Some Useful Web Development Tools

In course of working and learning, we all discover some useful tools that just make life easier. But the net is a big place. And usual venues of information sharing - meeting at conferences and swapping tidbits doesn't happen all the time. So am trying to write down a list of webdev tools, and other general tools that I found useful.

There is a lot of choice out there for most tools. So I have included the one we use, and a few others that we evaluated. To begin with,

General Resources

• ThemeForest: HTML CSS Templates. We use Metronic. But they have many more to suit your style and needs.
• Font Awesome: Nifty icons that work just like fonts
• StackOverflow: Ask and answer your programming questions
• JSFiddle: Scratchpad to test drive your HTML, Javascript, CSS.
• Asana: Work management tools. We eventually didn't use this much
• GitHub: Code repositories
• BitBucket: Another code repo. Take your pick.
• TinyPNG: Compress images
• Qualy SSL Server Test
• Mailtrap: SMTP server testing
• CoffeeScript: Write pythonic javascript

Web Frameworks

• Django: This is probably redundant here, given that we have been talking of Django all the time. Basically, Python based web framework.
• Ruby on Rails, 
• ASP.NET

CSS Frameworks

• Bootstrap: Makes building responsive frontend UI a charm. Well designed and defined css snippets for frequently used web elements.
• Foundation
• HTML5 Boilerplate

JavaScript Libraries

• jQuery: Nifty JavaScript library that makes html document traversing, event handling and ajax simpler
• YUI

JavaScript Frameworks

• Backbone with Marionette: Backbone is awesome when you have a fairly interactive application. Helps you manage the client data display and event handling in a MVC fashion. Marionette is another library that makes backbone easier. Now, just to note, there are many more JavaScript Frameworks coming along. Back when we were evaluating, it was Backbone, Angular and Ember. But by the time I publish this post, this list will probably be outdated. :-)
• AngularJS
• Ember
• Meteor
• NodeJS
• ReactJS

Code Editors

Okaym. We are a Vi shop. But for what its worth, there are these awesome 

• PyCharm
• Sublime Text
• Atom
• WebStorm

Module Loaders
Won't make a recommendation here since we are not yet convinced that out choice is working for us yet :) But you have Module Loader Comparison + Pros / Cons to help out

• Webpack
• Browserify
• Require.js

Build Tools

• Gulp
• Grunt

Know of an awesome tool? Leave a comment!

Paypal Shopping Cart

PayPal's documentation has really very subtle hints about what needs to be done to get Paypal working for a website, and you need to plough through a lot of links to figure out anything useful.

On sign up, they take the user to a page with customizable buttons for Buy Now, Subscribe, Shopping Cart. Now, if the site has only one item to sell, it should use the 'Buy Now', if it is selling subscriptions, use the Subscription Button. For a site that sells multiple items and needs a shopping cart, Paypal has tied up with some Shopping Cart providers.

There is however an option of creating your own light weight shopping carts. Its called Third Party Shopping Cart. This is especially useful when a website is just starting out and it doesn't need the whole armada of a formal Shopping Cart, but it needs something beyond a Buy Now or Subscription Button.

To create your own shopping cart, we need to have a list of items, quantities and price. Then we pass it to Paypal as follows:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_cart">
   <input type="hidden" name="upload" value="1">
   <input type="hidden" name="business" value="seller@mywebsite.com">
   <input type="hidden" name="item_name_1" value="Item Name 1">
   <input type="hidden" name="amount_1" value="1.00">
   <input type="hidden" name="quantity_1" value="2">
   <input type="hidden" name="shipping_1" value="1.75">
   <input type="hidden" name="item_name_2" value="Item Name 2">
   <input type="hidden" name="amount_2" value="2.00">
   <input type="hidden" name="quantity_2" value="3">
   <input type="hidden" name="shipping_2" value="2.50">
   <input type="submit" value="PayPal">
</form>

The suscript-ing numbers item_name_1, amount_1 all refer to the first item on list. There are other options like tax_x, handling_x, discount_amount_x, weight_x. The value of x must increase by 1 for each new item in the cart.

There are some options that can be applied to the entire cart like: currency can be specified with hidden currency, units of weight can be given as weight_unit, tax can be calculated for the entire cart instead of per-item by using tax_cart, discount_amount_cart to charge a single discount amount for the entire cart, discount_rate_cart to give a discount percentage for the entire cart.

This will display a PalPal button on the site. Clicking on that button takes the user to PayPal's site where it shows the list of all the items purchased and the total quantity, and invites the user to pay using the PayPal account or a credit card.

To make Paypal really integrate with a website though, the website needs IPN or PDT.  Stackoverflow has a good discussion on which one to use. We use IPN and are happy with it so far.