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.

PowerMockup – create wireframes using Microsoft PowerPoint

PowerMockup website

PowerMockup

When designing (or redesigning) websites I tend to follow a five stage process:

  1. Gather / discover
  2. Structure
  3. Design
  4. Build and test
  5. Launch and maintenance

During the second stage (structure) I will focus largely on two aspects of the website’s structure: the overall site hierarchy and the structure of each of the pages, what are traditionally called ‘wireframes’.

Site structure

To design the site structure, for years, I’ve used mind maps and my mind mapping application of choice is Mindjet MindManager.

I love MindManager, and each version just gets better than the last. An important thing for me is that the software interface doesn’t get in the way of capturing and organising the information. It’s packed with subtle but powerful features such as keyboard shortcuts and the ability to drag information from web pages and Windows Explorer directories).

Page structure and wireframes

When it comes to designing page-level structures I pretty much always start by drawing wireframes using a good old fashioned pencil and pad of paper.

Wireframes are visual guides that present a skeleton or framework for the information on the page. They are concerned more with where information and design elements should sit rather than how they look.

If you think of it in terms of architecture, the building blueprint will show you that the kitchen needs a window between the wall cupboards, and in front of the sink, but it won’t tell you what colour or make they are.

As I said, I usually start all my wireframe diagrams with a pencil and pad, but occasionally I want something that I can save, edit and share with others via email.

Until now I’ve usually used either Balsamiq or Mockingbird, both of which have limited, free accounts. But recently I’ve been trying out PowerMockup.

PowerMockup

PowerMockup is a wireframing tool that integrates with Microsoft PowerPoint 2007 or 2010. It is essentially a library of PowerPoint shapes offering

  • 89 fully-editable user-interface (UI) elements
  • 104 wireframe icons
PowerMockup stencil library elements

Examples of some of the PowerMockup stencil library elements

And it is as simple to use as finding the element you want to use and dragging it onto your PowerPoint slide. The UI elements and icons can all be resized, and recoloured too which provides a great deal of flexibility.

Page size

Also, remember, although you are working in Microsoft PowerPoint which, by default, is set up for a 4:3 or 16:9 aspect ratio screen you can adjust the page setup for any screen size and aspect ratio. That way you are not limited to only designing for ‘above the fold’.

Example

As a quick example, I mocked-up the PowerMockup website homepage using PowerMockup in Microsoft PowerPoint 2010:

Wireframe of the PowerMockup  website using PowerMockup

Wireframe of the PowerMockup website using PowerMockup

My experience

Intuitive

I have to say that I was very pleasantly surprised using PowerMockup. Because it integrates with Microsoft PowerPoint I didn’t have to learn a whole new application: it was very intuitive to use.

Design

I really like the design of the elements too. My main criticisms of both Balsamiq and Mockingbird is that their UI elements have quite a sketchy, cartoony feel to them; particularly Balsamiq.

In contrast the UI elements in PowerMockup are clean, unfussy and unobtrusive. While Balsamiq and to a lesser extent Mockingbird’s UI elements have a Comic Sans feel to them, PowerMockup’s UI elements feel more like something classical like Helvetica.

Price

PowerMockup costs US $39.95 (approx. £25 GBP) for a single-user license, although obviously you also need a licensed copy of Microsoft PowerPoint 2007 or 2010.

The cheapest, standalone version that I can find, Home and Student, will cost you £75.00 GPB on Amazon UK), so you’re talking about a total cost of around £100 for one user.

If you already own a copy of PowerPoint 2007 or 2010, however, then you’re laughing and you may even qualify for a free license.

There are also two team licenses available: 5 users for US $119.95 (approx. £74 GBP), and 10 users for US $199.90 (approx. £123 GBP).

Conclusion

I’ve been genuinely very impressed with PowerMockup. What is not to like? It has a very extensive, very attractive, and very usable collection of UI elements and icons, and most importantly it’s really simple to use.

What might be nice is if someone could throw together a number of PowerPoint template files (with sensible background grids) to emulate the most common page dimensions, e.g. Blueprint CSS’s 950px width, 960 Grid System’s 960px width, plus some responsive-style tablet and mobile templates. Coupled with PowerMockup these could be a very useful, very affordable combination for small design studios and individuals.

I can definitely see myself using PowerMockup on the next design project I need to work on.