4Getting started

Brack­ets is my text ed­i­tor of choice (see § 1.4.1).

I will use Brack­ets to write the en­tire HTML, CSS and jQuery code used within this web­site. Brack­ets is good, it has the fa­cil­ity to allow the view­ing of web pages in real time as they are being de­vel­oped—this means that any changes made to the HTML or CSS is im­me­di­ately vis­i­ble on the web­site.

This is a very use­ful fa­cil­ity and I came to the con­clu­sion that de­sign­ing with the web­site open is the best way to see and un­der­stand what you are doing.

Brack­ets lets you add ex­ten­sions that do cer­tain things: auto-save, ad­di­tional menu func­tions, au­to­mat­i­cally add browser pre­fixes &c.

I’m rec­om­mend­ing Brack­ets as the text ed­i­tor of choice—you don’t have to use it, I ap­pre­ci­ate that this is just my per­sonal pref­er­ence; how­ever, I do use it ex­ten­sively and the im­ages of code being de­vel­oped and the colour cod­ing used is all based on Brack­ets.

I’m going to as­sume that you are using Brack­ets, the next sec­tions deal specif­i­cally with in­stalling and con­fig­ur­ing Brack­ets, if you are not using Brack­ets, skip to section 4.2.

Brack­ets is avail­able from the brackets.io web­site. I’m cur­rently using ver­sion 1.13. It’s pretty easy to get; just click the big blue down­load but­ton (high­lighted in or­ange in Fig­ure 4.1).

Fig­ure 4.1   Brack­ets text ed­i­tor down­load

This will down­load the brack­ets.​release.​1.​13.​msi file.

Run this file and leave all the de­fault op­tions se­lected (Fig­ure 4.2)

Fig­ure 4.2   Brack­ets text ed­i­tor in­stall op­tions

After the in­stal­la­tion is com­plete, start Brack­ets, it will look some­thing like Fig­ure 4.3.

Fig­ure 4.3   Brack­ets first use

Right, we’ve in­stalled Brack­ets and now we can in­stall some ex­ten­sions. Ex­ten­sions are “plu­g­ins” that add extra func­tion­al­ity to Brack­ets, one comes pre-in­stalled with Brack­ets, this is the live pre­view func­tion (this is the light­ning bolt icon in the right hand side bar, Fig­ure 4.4).

Fig­ure 4.4   Brack­ets side­bar

The live pre­view browser up­dates in real time when­ever changes are made to the HTML or CSS files, changes to other file types (Java script for ex­am­ple) cause the pre­view page to be re­loaded when the file is saved.

Brack­ets has a fairly ex­ten­sive li­brary of ex­ten­sions avail­able to it. Most of these are writ­ten by third-part de­vel­op­ers (rather than Adobe) and I’ve in­stalled sev­eral that I think are use­ful.

These are:

	Extension	Search for	Function
	Autoprefixer	Autoprefix	Automatically adds browser prefixes to CSS code (all those –webkit things that nobody understands)
	Autosave files on Window Blur	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 ex­ten­sions to Brack­ets click the Ex­ten­sions Man­ager icon (it’s the sec­ond icon in the right hand side bar; it looks like a Lego brick, Fig­ure 4.4). This opens the ex­ten­sion man­ager di­a­logue box (Fig­ure 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.

Fig­ure 4.5   Brack­ets ex­ten­sion man­ager

To find the ex­ten­sions, click the avail­able tab and enter the “search for” terms listed in Table 4.1 in the search box at the top; se­lect the ac­tual ex­ten­sion from those pre­sented by the search and click in­stall on the right hand side.

• It is my experience that Brackets should be closed and re-started after each extension is installed. It can tie itself in knots if you don’t.

The Copy as HTML ex­ten­sion is not re­quired for cod­ing (the oth­ers all make cod­ing eas­ier apart from the icon thing, that just makes it look nice), I use it purely to copy code from Brack­ets and paste it into other doc­u­ments (it pre­serves all the syn­tax colour cod­ing). It’s how I got the code frag­ments from Brack­ets into the pdf doc­u­ment ver­sion of this web­site.

• I also use an extension called Brackets-Git (which I haven’t listed in the table); I use this as a version control mechanism for the website. Git is a version control system and I’ve written a whole website about it here. Git has quite a steep learning curve and you don’t need it for what we are doing here. If you want to use version control, check out my Brackets-Git website. To get the extension search for Bracket-Git in the Brackets extension manager, it’s the one by Martin Zagora.

Unin­stalling an ex­ten­sion is much the same, click the in­stalled tab and then click the re­move but­ton next to the ex­ten­sion you want to unin­stall. It will re­quire Brack­ets to close and re-open. This is how to unin­stall the Ex­tracts ex­ten­sion if you don’t want it.