Brackets is my text editor of choice (see § 1.4.1).
I will use Brackets to write the entire HTML, CSS and jQuery code used within this website. Brackets is good, it has the facility to allow the viewing of web pages in real time as they are being developed—this means that any changes made to the HTML or CSS is immediately visible on the website.
This is a very useful facility and I came to the conclusion that designing with the website open is the best way to see and understand what you are doing.
Brackets lets you add extensions that do certain things: auto-save, additional menu functions, automatically add browser prefixes &c.
I’m recommending Brackets as the text editor of choice—you don’t have to use it, I appreciate that this is just my personal preference; however, I do use it extensively and the images of code being developed and the colour coding used is all based on Brackets.
I’m going to assume that you are using Brackets, the next sections deal specifically with installing and configuring Brackets, if you are not using Brackets, skip to section 4.2.
This will download the brackets.release.1.13.msi file.
Run this file and leave all the default options selected (Figure 4.2)
After the installation is complete, start Brackets, it will look something like Figure 4.3.
Right, we’ve installed Brackets and now we can install some extensions. Extensions are “plugins” that add extra functionality to Brackets, one comes pre-installed with Brackets, this is the live preview function (this is the lightning bolt icon in the right hand side bar, Figure 4.4).
The live preview browser updates in real time whenever changes are made to the HTML or CSS files, changes to other file types (Java script for example) cause the preview page to be reloaded when the file is saved.
Brackets has a fairly extensive library of extensions available to it. Most of these are written by third-part developers (rather than Adobe) and I’ve installed several that I think are useful.
|Autoprefixer||Autoprefix||Automatically adds browser prefixes to CSS code (all those –webkit things that nobody understands)|
|Autosave files on
|Autosave||Automatically saves all the files open in Brackets whenever you click out of the Brackets window|
|Brackets icons||Icons||Adds little icons to the side of each file in the file tree showing its type (HTML, CSS, JS &c.)|
|Copy as HTML||Copy HTML||Copies code to the clipboard and preserves the colour coding used by Brackets (I use it to copy code from Brackets into documents)|
|Interactive Linter||Interactive||Analyses the HTML, CSS and Java script code and highlights errors in the syntax and structure—a process referred to as “linting”†1|
|Pop-up menu Brackets||Pop-up||Adds case conversion functionality to the pop-up menu that appears when text is right clicked in the Brackets window. It adds uppercase, lowercase and camel case†2 conversions.|
|Table 4.1 My selection of Brackets extensions|
To add extensions to Brackets click the Extensions Manager icon (it’s the second icon in the right hand side bar; it looks like a Lego brick, Figure 4.4). This opens the extension manager dialogue box (Figure 4.5).
|†1||Linting: (present participle of the verb to lint—yes I know, I think lint is the stuff you get off old jumpers too; and it’s definitely not a verb) is the process of automatically checking software for errors—this process is usually carried out by another software programme called (would you believe it) a “linter”. Apparently it started with C code and there is a whole Wikipedia article on it here.|
|†2||Camel case is the practice of joining words together and capitalising the start of each word (CamelCase for example), its more formal name is medial capitals.|
To find the extensions, click the search for” terms listed in Table 4.1 in the search box at the top; select the actual extension from those presented by the search and click on the right hand side.tab and enter the “
The Copy as HTML extension is not required for coding (the others all make coding easier apart from the icon thing, that just makes it look nice), I use it purely to copy code from Brackets and paste it into other documents (it preserves all the syntax colour coding). It’s how I got the code fragments from Brackets into the pdf document version of this website.
Uninstalling an extension is much the same, click thetab and then click the button next to the extension you want to uninstall. It will require Brackets to close and re-open. This is how to uninstall the Extracts extension if you don’t want it.