The Development Toolchain

Helpful Guides and Links For working with code on the web

Reference


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.

mamp

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).

Get MAMP

Lifehacker : Using MAMP with WordPress

WordPress : Installing wordpress locally with MAMP

terminal
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
http://livestyle.io


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

https://github.com/buymeasoda/soda-theme/issues/153

Preferences

{
“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,
“ignored_packages”:
[
“Vintage”
],
“indent_guide_options”:
[
“draw_normal”,
“draw_active”
],
“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

https://designshack.net/articles/css/joshuajohnson-2/

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.

wow.js

 


Editors

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

Brackets

Bootstrap Studio

WebStorm

Online Editors

Cloud9

Webflow

Bootstrap Studio

Kodingen

Thimble

Sandboxes

CodeKit

jsFiddle

cloud9

Resources

https://wrapbootstrap.com

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 

caniuse


Reference Guides

http://singlepageappbook.com

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

LiveReload

JSHint

JSLint


Cross Browser Testing

13 Essential Tools to Check Cross-Browser Compatibility

Ghostlab

Browserstack 


Git and Github

https://help.github.com/articles/cloning-a-repository/


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

http://www.infoworld.com/article/2866712/php/php-vs-node-js-an-epic-battle-for-developer-mind-share.html

Browserify

CommonJS

Broccoli

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

npm,

bower


Templating Engines

handlebars


Transpilers

source https://babeljs.io

Typescript


Frameworks

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