Documentary about Jeffrey Zeldman

Still of Jeffrey Zeldman video on Vimeo

Jeffrey Zeldman: 20 years of Web Design and Community from Lynda.com

Like probably thousands of other web professionals I owe a lot to Jeffrey Zeldman.

I remember spending hours sitting on a balcony in Tenerife, while Jane and her parents were out exploring the island and enjoying the sunshine, reading the first edition of his book Designing with Web Standards.

That book changed how I looked at the web and how I began to develop websites.

This is an excellent 40 minutes documentary, from Lynda.com, about Zeldman’s 20 years of “designing, organizing, and most of all sharing on the web”.

If you are interested in web development, you should watch it.

The nimble web

I spotted this video scroll past me in Twitter the other day. It lasts 31 seconds, is from an interview with Ethan Marcotte (who gave us responsive web design, as we know it today). I thought it was worth transcribing and sharing.

The web is definitely getting cheaper and slower, and more broadly accessed. Which is why it is incumbent upon us to make sure that our websites are not necessary the only place where that information lives. It could be in apps, it could be in services that are then pulled by other people. I think the more distributed we could think about our content and our services, I think the better off we’re going to be. I don’t know if the web is in decline but I definitely think it needs to be a lot more nimble.

Now there’s a challenge for us: the nimble web.

Minimal theme for Sublime Text

Minimal theme, compatible with both Sublime Text 2 and 3.

Minimal theme, compatible with both Sublime Text 2 and 3.

My favourite workspace theme for Sublime Text is currently Minimal Dark. With its dark sidebar I find it significantly less distracting than the default theme.

Here’s how to get it:

  1. Use via Package Control to install Theme – Minimal.
  2. Go to Preferences > Settings – User.
  3. Add the following line to your Preferences.sublime-settings file: “theme”: “Minimal Dark.sublime-theme”,

My current colour scheme is Tomorrow Night, which is also available via Package Control.

Bootstrap vs Foundation at Learnable

Two men and a woman chatting

Bootstrap vs Foundation

Learnable has just published an interesting video where two front-end developers discuss the benefits of both Bootstrap and Foundation.

I’ve been using Bootstrap on and off for the last couple of years, having been a firm user and contributor to the Blueprint CSS community.

For the last few months I’ve been really keen to check out Foundation. From what I’ve seen so far it looks very impressive. I’ll report back once I’ve had a more in depth look.

In the meantime, check out the video: Bootstrap vs Foundation.

Installing Node.js on Windows 8

Command line showing node installation

Command line showing node installation

Over the last month I’ve slowly begun exploring Node.js and so far I’m really liking what I’m seeing.

In a nutshell, Node.js (or simply Node) allows you to write server-side JavaScript. In other words, until now JavaScript is normally written to be run within a web browser, on a web page. Node instead allows you to write JavaScript applications that run outside the browser or via the command line.

Node uses Google Chrome’s JavaScript engine, called V8. Perfect if you are used to writing JavaScript for your browser.

This means that you can now write applications, or ‘modules’ that can do stuff outside the scope of a web browser. For example, you could write a simple web server in Node or — and this is what I want to use it for — you could write modules to manipulate web code and automate certain processes related to web development.

Installing Node.js

Installation on Windows 8 could not have been any more straight forward:

  1. Visit nodejs.org
  2. Click the “install” button to download the installer.
  3. Run the installer (make sure you tell the installer to add references to your PATH system variables).
  4. Reboot your PC.
  5. Er…
  6. That’s it!

Command line

Almost everything you do with Node is via a command line. You can use either the standard Windows cmd.exe or Windows PowerShell (or, indeed, any other command line interpreter (CLI) you may have installed).

To use the standard Windows command line:

  1. Press Win + R (for Run)
  2. Type: CMD
  3. Click OK

Checking that Node is installed is as simple as opening a command line and typing:

node --version

Hit enter and you’ll get a result, something like:

v0.10.5

Node Package Manager

One of the great things about the Node installer is that it automatically installs the Node Package Manager. This makes it much easier to install additional applications to extend Node’s capabilities.

Again, you can check the version of NPM by typing the following into your CLI:

npm version

You’ll get an answer, returned as a JSON object:

{ http_parser: '1.0',
  node: '0.10.5',
  v8: '3.14.5.8',
  ares: '1.9.0-DEV',
  uv: '0.10.5',
  zlib: '1.2.3',
  modules: '11',
  openssl: '1.0.1e',
  npm: '1.2.18' }

To find out what packages are installed enter the following into your CLI:

npm ls

The result will be formatted as a directory structure, like this:

C:\Users\Gareth
├── cssmin@0.4.1
└── n@1.1.0

Obviously, to find out which globally-installed packages are available use the global flag:

npm ls -g

The first application/module that I want to investigate in depth is the CSS pre-processor Less which is used by the Bootstrap project. I will no doubt report back.

Porting Monokai colour scheme to WeBuilder 2014

WeBuilder 2014 beta 7 with the new Monokai theme

WeBuilder 2014 beta 7 with the new Monokai theme

I have been using Blumentals WeBuilder now since March 2006—nearly seven years. It’s a solid web code editor and IDE (integrated development environment) but over the last couple of years it has been creaking at the seams a little. Some features were quite slow, others weren’t keeping up with the astonishing rate of change that the web standards have been going through of late.

So, over the last year or so the Blumentals team have been rebuilding the application from scratch, moving to a more up-to-date code base (they code it in Delphi, I believe) making it much faster and preparing the way for future enhancements and improvements. And boy! does it show. The new version is looking great. But I’ll get to that in a minute.

While they were working on what will soon be released as WeBuilder 2014 I found myself—as I do every six months or so—looking around at competing web IDEs to see what they were up to. I tried the usual candidates: Aptana, CodeLobster, Notepad++, NetBeans, Komodo Edit, etc. but nothing grabbed me until I stumbled on Sublime Text 2.

Wow! Sublime Text 2 is fast. Lightning fast. And it’s packed with features, and what it does’t have there is usually an add-on for it — which is most easily installed via the Sublime Package Control. But I digress.

I found myself using Sublime Text 2 more and more, and one of the things that I loved most about it was one of the in-built colour schemes: Monokai (based on a TextMate theme by Wimer Hazenberg). I had never used a dark theme before on an editor, but this one I really liked, and it was much easier on my eyes than the glaring white themes I’ve been using in the past.

Porting Monokai to WeBuilder

When WeBuilder 2014 was released in beta, owner and developer Karlis Blumentals invited users to create and submit colour schemes for WeBuilder (a new feature in 2014). So I set about porting the Monokai theme to WeBuilder.

Every code editor highlights its code syntax slightly differently. The code highlighting in Sublime Text is pretty simple, defining the same colours for a number of elements regardless of the language. So, for example, all strings are #E6DB74 (yellow), all keywords are #F92672 (dark pink), etc.

WeBuilder’s colour schemes are more granular: if you want HTML elements within a PHP document to look different to HTML elements within an HTML or ASP document then you can in WeBuilder.

Also, the way that code elements are broken up into different syntax colours is slightly different between editors. It’s more-or-less impossible to port one theme to another editor exactly colour-for-colour, element-for-element. I decided, then, to try to keep within the spirit of the theme.

I relalised fairly quickly, therefore, that I needed to keep things as consistent as I could across all languages. So all strings would be yellow (#E6DB74), all numbers (integer or floating) purple (#AE81FF), all HTML tags or language reserved words would be dark pink (#F92672), etc.

I created a spreadsheet to plan things out and document what I was doing.

Spreadsheet of many colours

Spreadsheet of many colours

That really helped. Especially when I did something wrong and reset my entire colour scheme to system defaults. Having documented it as I went along it only took me about 45 minutes to retype it. (A back-up would have been useful, huh!)

I’m really pleased with how they turned out, to be honest. And it would appear that Blumentals Software are too.

Available now

I passed the file to Blumentals last week and it’s already been incorporated into beta 7, which is currently available for download. (The beta versions are free while errors are being addressed, the final version will be available to purchase.)

To say thank you for what I did I received this kind email from @blumentals the other day:

@garethjms - you have earned a free upgrade to v2014 by porting Monokai scheme for our editor

@garethjms – you have earned a free upgrade to v2014 by porting Monokai scheme for our editor

How wonderfully generous of them. I was so delighted by their generosity. I simply did it because I really like the colour scheme, and I wanted in a small way to say thank you to Blumentals for all that they’ve given to the web building community over the last 6+ years.

More themes…

I’m starting work on porting another couple of themes now: Twilight (also used in Sublime Text 2) and Tomorrow, which is a lovely collection of dark and light themes.