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.

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

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
}