Helpful Guides and Links For working with code on the web


A simple development workflow

Understanding how to move files between your personal computer and a web server efficiently is an essential skill for an aspiring developer. Regardless of the type of website you are building or the flavour of code you are writing, you are, most of the time, writing and saving that code into a local file. For the world to see your code rendered in their browsers, that file needs to be copied to a web server.  On public web hosting sites like MediaTemple or GoDaddy, once the page is on the server, it’s read-only. You can’t open and edit that page directly from the web server, so If you want to make a change, you have to copy the file back down from the server to your local computer, open the local file, edit it, then copy that file back up to your web server, overwriting the previous version. The steps look like this :

  • View the page in your Browser. Identify something that needs editing on the page.
  • Switch to your  FTP Client and Download the page file to your desktop.
  • Switch to your Editor and  Open the downloaded file,  edit it and save it.
  • Back to your FTP Client to Upload the file back to your web host, overwriting the old version of the file.
  • Switch to your Browser to refresh the view of the page to see the new version

This ’round trip’ is a integral part of the web development workflow. It is usual for a developer to be updating a file dozens, even hundreds of times per day;  having to make this trip on every edit is a slow and tedious exercise at best and one that can become a real headache if the  ‘local’ and ‘remote’ copies of your files get out of sync.

Use a Smart FTP Client

FTP clients like Cyberduck and Transmit automate the round trip making the edit process much faster. When you doubleclick on a file shown in your remote server directory file browser,  the client downloads it to a hidden temporary location on your local drive, then opens it up in your editor. The client then watches that file and will automatically upload it back to the remote server when you save it. This gives you the impression you are ‘working from the server’ and is very intuitive. Coda, a web editor for the mac,  has an FTP client built in, allowing you to keep everything in the one workspace.

Use a Browser  Auto –  Refresher

Brackets is a free Mac / Windows web editor (recently purchased by Adobe) with an awesome feature called experimental live preview that alone makes the editor worth using. When enabled, Brackets will automatically render every change you make to your file into your browser  –  as you edit it. You stay in your editor the whole time. Select file / enable experimental live preview. 

Create a Sandbox Webserver on your computer

A common approach is to set up a web server your own computer (known as creating a sandbox) so you can do all your editing and testing with your personal server. This cuts the remote server out of the development loop altogether, greatly reducing the bottleneck created by slow file transfers and time spent messing around FTPing files to and fro. 

On a mac you can fire up a local web server by either  messing with the terminal to access it’s built in web server (it comes with OSX) or you can  install an app to do it for you. If you are inexperienced with the terminal and want the path of least resistance go with an app. That said, I strongly encourage you to explore the terminal at every opportunity as you will be using it before too long.


Use MAMP to run a web server on OSX

The daddy of webserver GUI apps for OSX is MAMP. Well loved by millions of developers to build sites that depend on PHP and MySQL code (think wordpress).


Lifehacker : Using MAMP with WordPress

WordPress : Installing wordpress locally with MAMP

Use the Terminal to fire up a server on OSX

OSX is based on a unix operating system which happens to come installed with Apache, the same web server application software used by unix web servers the world over.  All you need to do is launch the App. Unix means command line instructions which can be tedious for beginners but perseverance will pay off.

The Mac Observer : Time-Saving Terminal Tips

OSX Daily : Firing up Apache in OSX


Sublime Text Editor

Prettify / Beautify / Format / Reindent

Prettify / Beautify

Sublime’s build-in Reinvent command : Create a keyboard shortcut to make this quick and easy :

{“keys”: [“command+shift+r”], “command”: “reindent”,”args”:{“single_line”:false} },

Live Reloading

Live reloading

Sublime text plugins and settings

Prettify / Beautify / Format / Reindent

Sublime’s build-in Reinvent command : Create a keyboard shortcut to make this quick and easy :

{“keys”: [“command+shift+r”], “command”: “reindent”,”args”:{“single_line”:false} },

Indentation Guides


“caret_extra_width”: 2,
“caret_style”: “solid”,
“color_scheme”: “Packages/User/dune.tmTheme”,
“draw_minimap_border”: true,
“draw_white_space”: “none”,
“fade_fold_buttons”: false,
“font_face”: “Consolas”,
“font_size”: 18,
“highlight_line”: true,
“highlight_modified_tabs”: true,
“match_selection”: false,
“match_tags”: true,
“tab_size”: 4


General / Unsorted

Magnetic Popup – a modern lighbox viewer.

Owl Carousel – image carousel engine

Hover Effect Ideas – collection of interesting hover effects with sample code

The code player code playback IDE

hover.css for easy hoverin’

caption hover effects tutorial on codrops

appear.js tracks the appearance of stuff

uplabs resources site lots of beautiful stuff there.




What to look for in an Editor

Code Completion : Intelligent completion of code.

Refactoring : e.g. intelligent function, variable, class renaming.

Debugging : with step by step code, inclusion of break points and variable inspector.

Navigation : Jump to Method/class definition from calling chunk, step through calls, investigate hierarchy of calls.

Syntax Checking : signalling syntax errors in realtime while writing

Beautify / auto indenting


Desktop Editors

Visual Studio Code 

Sublime Text


Bootstrap Studio


Online Editors



Bootstrap Studio








Sublime Text Tools and Shortcuts for Beginners

Sublime Text Power User Book

Brackets Beautify : Beautify your code

Brackets Selections : Adds Sublime Text style selections to Brackets

Cheat Sheets

Dash for OS X 


Reference Guides

The Art of Debugging

A debugging thought process

List of graphical user interface elements – Wikipedia, the free encyclopedia

The Motive Web Design Glossary – web communication design terminology and definitions | Motive Guides

Debugging Tools

Safari Web Inspector

Tilt 3D (firefox only)

Ember Inspector

JSON Prettyfier




Cross Browser Testing

13 Essential Tools to Check Cross-Browser Compatibility



Git and Github

Using the Terminal

The $PATH to Enlightenment

Build Tools

minification / file consolidation  / pre and post processing / dependency management CSS file pre-processing Javascript pre-processing / transpilers

file management
library management
library version updating
minification of files

Workflow Orchestration for the Wary

Any application that can be written in JavaScript, will eventually be written in JavaScript-Jeff Atwood

Understanding AMD & RequireJS

Understanding RequireJS for Effective JavaScript Module Loading

Why do people use ‘requireJS’? What are the benefits? – Quora

Why Use Node.js? A Comprehensive Tutorial with Examples | Toptal

Seven Awesome Things You Can Build with Node.js




Source: Grunt: The JavaScript Task Runner

Source: 01 – What is npm? | npm Documentation

Source: JSPM vs Webpack – I Like Kill Nerds

Source: SurviveJS – Webpack Compared

Source: Understanding javascript-package-managers



Templating Engines






Source: What are Javascript, AJAX, jQuery, AngularJS, and Node.js? | Organic Donut