Main Content Area

Useful Plugins for Brackets

The interface of the brackets code editor
The interface of the Brackets code editor.

In all the courses I teach, which mainly involve writing web code, I encourage the use of the Brackets code editor. It's a powerful one, and especially useful for working with and learning web languages because:

Code the Web
  • It's free
  • It's open-source
  • It works on MacOS, Windows and Linux
  • It's minimalistic in design and function
  • Doesn't coddle or try to hand-hold the user
  • It has a built-in extension directory
  • It's highly customizable
  • It integrates with Chrome
  • It's written in JavaScript
  • Extensions are also written in JavaScript

Over the course of a couple of years, I've collected a few extensions that are simply excellent for working on web projects. They help in a lot of ways, and I though I'd list them for others to peruse.

Below you will find links to the extensions, as well as short descriptions for them. Quick-installation instructions are at the bottom of the article.

The Extensions

Disable Auto-Close Tags Completely
True to its name, this extension completely stops Brackets from closing your HTML tags for you, if that sort of thing suits you.
HTML Templates
This one's a no-brainer... it throws in the doctype and basic HTML tags like the character encoding meta tag, head, body, title, etc.
Saves a few seconds in creating your HTML documents initially.
This integrates the autoprefixer shell script into brackets, adding CSS vendor prefixes to all the CSS rules that need them.
The beauty of this extension is that it connects to to figure out which prefixes are needed, and even removes ones that are no longer required.
The "AutoPrefix on Save" option keeps your code prefixed as you work.
This is particularly useful for CSS Keyframe Animation code.
Nu Markup Checker for Brackets
Uploads your HTML to the W3C HTML validator and displays the results at the bottom of the screen, linking each error message to the line it occured in.
This is a quick way to correct HTML errors as you work.
I noticed that if enough people are using this extension on a single shared IP address, the validation site will actually block the IP after a while. If you wait, it will start working again. Alternatively, you can use a proxy/VPN to get around the issue.
Lorem Ipsum Generator
Generates "Lorem Ipsum" dummy text to speed up the creation of prototypes, templates or layouts.

Installing Extensions

Shortcut for installing these extensions in Brackets
A quick shortcut for installing these particular extensions.

You can quickly install these extensions like so:

  1. Open up Brackets side by side with this browser window.
  2. Click on the extensions icon in Brackets (it looks like a Lego brick, near the top right)
  3. Click on "Install from URL" at the bottom left of the modal window
  4. Drag one of the extension links (the extension titles on this page) from this browser window into the URL field in Brackets
  5. Click "Install"
  6. Rinse and repeat as needed

In Conclusion

Brackets can be a powerful text editor, especially if you take the time to customize it with extensions to most effectively match your development style.

It fits in well with many other pieces of software in your toolkit, without forcing you into any specific workflow.

Sunrise For Version 6

Sunrise in Toronto

This Site has a History

I have been working on this website for a decade and possibly more, depending on how far back I count. If my memory serves me correctly, the domain was first registered in late 2006, at the suggestion of a clever professor at Humber College.

The teacher insisted I get the domain for my full name while it was still available. I didn't really think that anyone would “steal” the domain name, but luckily I listened and bought it when I still could. It really is a satisfying thing to have a small corner of the web all to yourself.

Previous to that, I had hosted my site under various other domains, other people's hosting accounts and even under Geocities at one point (with a hit counter and poorly tiled background as you may expect). By my best estimate this website redesign is probably version six, if I only look at the major redesigns.

Ideas behind the Redesign

This site is built from ground up with my own backend and frontend code. I tend to obsess over trying to do as much “from scratch” as I can when working on web projects.

This is an increasingly ridiculous philosophy, given the number of different languages, technologies and techniques that go into a modern web site or app. However, I find that if an opportunity to make something by hand presents itself, I like to take it simply because that is the way to learn the most in doing it.

In terms of design and functionality, my main goals were:

  • A consistent brand that can transfer over into print and the physical world
  • A site that lets me write content directly in HTML5
  • A ui that uses some of the established ideas, but also adds something new to the mix
  • At least the existing functionality for lessons/teaching to help enhance what I do in the classroom
  • Day/night modes, so that the site is highly readable and displays well on screens and projectors
Create your own visual style… let it be unique for yourself and yet identifiable for others. Orson Welles

I went through many sketches, mockups and functioning prototypes before settling on what you see in front of you.