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.

taking-the-episcopalian.co.uk domain name for sale

Ruins of Whitby Abbey

Ruins of Whitby Abbey by James Nader. (Image courtesy of iStockphoto - #109404.)

Would anybody like to acquire the domain name taking-the-episcopalian.co.uk? It expires on Saturday 07 April 2012. Contact me if you would like me to transfer the domain name to you.

History

In 1997 I began a two years course of studies at TISEC, the Theological Institute of the Scottish Episcopal Church, as well as an MTh in Ministry course at New College, the University of Edinburgh.

It wasn’t long before I started editing an “underground”, satirical newsletter that did the rounds among fellow students and a few tutors, mostly at residential weekends. We called it Taking the Episcopalian.

As I wrote later, “my original idea for the newsletter was to provide a forum for a light-hearted look at the life and work of TISEC. My personal interest is in satire – no, not the woodland god with goat’s ears, legs and a tail, that’s a satyr – but, satire: ‘ridicule, irony and sarcasm’.”

Its content was contributed to mostly by the full-time TISEC students, and also a few tutors. Taking the Episcopalian was fun, and it often relieved some tensions and made light of some of the politics, which in turn helped us to cope in a more light-hearted way.

Residential weekends became our deadlines and there was always a flurry of activity in the couple of weeks before the weekend to get articles finished and the newletter typeset (in Lotus AmiPro) and a few copies printed. I seem to remember we would print only two copies to reduce the chances of it being discovered by… well, tutors who hadn’t contributed to the newsletter.

Online

After ordination, and as the world wide web became more popular, Taking the Episcopalian quietly moved online. As we weren’t aiming for regular publications, new articles were added more infrequently. We did, however, acquire a couple of new contributors from the Church of England, and began what turned out to be a very popular new series with images lifted from the pages of vestments catalogues.

This, I think, was my favourite:

Priest in vestments

I'm a Christmas tree!

I even got an email from someone who works at F A Dumont Church Supplies who said, “I absolutely love your website, especially the model section!”

Feedback

The feedback was mostly positive.

“Brilliant! More please!”

“Ah, such fond memories come flooding back when I read this post. It took me right back to those dreadful days but oh, what fun we had. Thank you for this trip down memory lane. And I stand by everything I contributed!”

Your work is brilliant and most welcome!!

I even had an email from a bishop from Norway who wrote:

Dear Editor !

I must confess that I have fallen in what St Benedict condemns as a serious sin – and your web site is the reason for it, since it gives ‘anything that provokes laughter” … which he of course “condemns to
eternal exclusion.”

Thanks a lot for a lot of really good laughters ! I specially enjoy the chasuble with a thermostat!

During most encounters with my diocesan bishop he asked me when there was going to be more content; particularly more vestments.

Take down

But not all the feedback was positive, and in the end I was strongly and politely ‘invited’ to remove the site completely; acknowledging that while I wasn’t the only person involved I was certainly the most public face of Taking the Episcopalian.

Reuben and Joshua had not long been born and I simply didn’t have the energy to do anything else. The site had moved to WordPress.com by then so it was easy to mark the site as private and effectively hide all the content.

Moving on

That was three years ago, and I’ve not had the energy to do anything more about it.

Occasionally I get asked about the site, mostly asking when it will be back. I usually say that I was asked to take it down, and that I simply don’t have the time or energy to do anything about it these days. It’s just not been a priority.

I do wish that it had grown a bit more, but there you have it.

Transfer

If you would like to acquire the domain name then please get in touch. It’s currently registered with 123-reg.co.uk (and I’ve just noticed is still registered to my old address in Inverness) and is due to expire on 07 April 2012.

Contact me if you would like me to transfer the domain name to you. You’d be welcome to (most of) the backlog of content too, if you wanted it.

Reading through categories in Google Reader

20120112-googlereader

I’m a big fan of Google Reader, which is a Web-based application that allows me to subscribe (via RSS) to news and blog sites and read their latest updates in one convenient location, rather than having to traipse around a hundred or more websites.

I used to use a Windows application with the dubious name of FeedDemon. It was in my humble opinion the best RSS reader available for Windows. In fact, I liked it so much that I bought it.

And then there were changes to how feeds were aggregated and stored, and it started synchronizing with Google Reader rather than (if I remember correctly) its own server.

Which was when I realised that I didn’t need to wait a couple of minutes for the synchronization to complete before I read my posts. Instead of pulling them from Google Reader into FeedDemon I could go directly to Google Reader and cut out the middle-demon.

So I exorcised my PC and FeedDemon was gone. That was around 2007 or 2008.

So why has it taken me this long of using Google Reader to realise that I don’t need to have all my sub-folders open to access the posts?

I categorise my feeds into a number of folders (that I have both “Metal music” and “Music” is because Google Reader wasn’t playing properly the other night and after I created “Music” nothing happened until the next day!).

It was only the other day that I realised that I could simply click on the closed folder to see all the posts within, organized by date. And if I like, I can also view only unread items.

20120112-googlereader2

That’s making getting through reading updates much, much quicker and more enjoyable.

Of course, it also helps that I’ve purged a few blogs in the new year. This year I need to focus more. I’ve got a couple of Web projects that I’d like to launch in 2012, as well as a book on the go.