nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Wolf CMS: A fork of Frog CMS

I’ve written about my Frog CMS usage in previous blog posts; where other CMS’s can be a little overkill for small websites, Frog CMS fits perfectly into the gap. Unfortunately as much as I like Frog, the development seems to have stopped. The last stable version was released on the 26th April 2009, over a year ago. There’s no need to panic though, a development fork has been created called Wolf CMS which is building upon this superb little CMS and making it even better!

At the moment there’s very little difference between Frog and Wolf as you might expect, so migrating from one to the other is fairly simple, a wiki page has been created with instructions on how to do this. As it says on the page it’s probably best to decide between the two versions now since there’s still little difference between them, but this could change in future versions (version 0.6.0 introduced a number of large changes). So there may be a point where it isn’t (easily) possible to jump between the two versions.

So what are the differences at the moment? When version 0.6.0 of Wolf CMS was released on the 1st February it added a new core plug-in called ‘BackupRestore’, allowing admin users to easily backup the Wolf CMS core DB tables. I’ve been using an external plug-in to do this on sites I built, so having this feature added as a core plug-in is nifty addition. Other features include:

  • Admin users can now uninstall plug-ins, including the db tables
  • HTTPS Support added to the admin area for greater security
  • You can now preview a page before it is published

It’s great to see that such a useful little CMS hasn’t been left to stagnate and die out, the roadmap for Wolf CMS looks promising, so fingers crossed it has a bright future ahead of it. I think it’s time to migrate my Frog websites over to Wolf…

Aptana on Steroids using Zen Coding

I’ve mentioned before in previous articles that Aptana is my IDE of choice; one which I’ve been using for a few years. I only use a handful of the many features available in Aptana, all of which are also available in other editors (Notepad++ being one), but I’ve got so used to the way it works I’m sticking with it for the moment.

One of Aptana’s helpful features is the ability to generate code using the easy to access menu bar at the top of the code window (see image):

Aptana has a host of code helpers available

Generate and wrap code at the touch of a button

A superb feature it must be said, but it is totally eclipsed when you start using the Zen Coding JavaScript Library. Zen Coding, written by Sergey Chikuyonok isn’t a JavaScript Library in the traditional sense, it isn’t uploaded and linked to in your web page; it’s installed as a plug-in for your selected text editor. As you can see from the list there are many versions available, so you aren’t restricted to only Aptana.

Let me explain what it does first, then I’ll show you how to install it (for Aptana). As a Front End Web Developer you will often find you’re writing out the same blocks of code again and again. You can just copy / paste then modify, but even that’s quite slow and tedious. Zen Coding uses a technology that you will be very familiar with: CSS selectors. It may seem confusing at first, but once you see it in action it makes perfect sense. Here are a few code examples I use all the time:

1
2
3
4
5
6
7
8
9
10
11
12
<!--
Entering
ul#mainNav>li*5>a
generates the list below
-->
<ul id="mainNav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Using simple CSS selectors we’ve been able to quickly generate an unordered list that can be used for example, as a page navigation. You can even use more advanced selectors like siblings and abbreviated groups to generate more advanced HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--
Entering
div#wrapper>div#header+div#content+div#footer
generates this div set below
-->
<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

<!--
Or a more advanced example
div#content>(div.primary-section>h2.header+p+ul>li*5)+(div.secondary-section>h3+p)
generates the sections below
-->
<div id="content">
    <div class="primary-section">
        <h2 class="header"></h2>
        <p></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="secondary-section">
        <h3></h3>
        <p></p>
    </div>
</div>

It may take a little while to get into the routine, it’s all to easy to slip back into typing the code by hand; but once you do you can build the basic mark-up of a page in a matter of minutes.

There’s a very informative article on Smashing Magazine from last year which you may find useful if you plan on investigating Zen Coding further; I highly recommend adding it to your “toread” list. There are so many more functions available that I haven’t even touched on in this article, you will be amazed.

Now that you’ve seen Zen Coding in action you may be wondering how you install it for use with Aptana. Well luckily it’s dead simple. First create a ‘new project’ in Aptana, call it whatever you like e.g. ‘Zen Coding’:

Simple to setup Aptana with Zen Coding

Within the new project create a scripts directory and copy the Zen Coding JavaScript into into the directory. That’s it you’re done! Restart Aptana and start using Zen Coding. Once you’ve typed in a string of CSS selectors you wish to convert to HTML, hit CTRL + E (Expand Abbreviation) and it will do the rest for you. One thing to note, you must keep the new project you’ve just created open at all times, else Aptana won’t be able to access the scripts.

You can customise the key you use expand an abbreviation by editing the “Key” value in “Expand Abbreviation.js”. For more information on available keycodes see the Aptana documentation here.

Hopefully you find Zen Coding useful, it’s certainly changed the way I code on a day to day basis.

Using Image Data Inside the HTML5 Canvas Element

One of the interesting features of the HTML5 canvas API is it’s ability to manipulate pixel information at the individual byte level. Reading data and inserting it into the canvas is very simple:

1
2
3
4
5
6
7
8
9
10
11
12
//Select our canvas and context
var canvas = document.getElementById("imageCanvas");
var context = canvas.getContext('2d');
//Select the image from the DOM
var selectedImage = document.getElementById("image");

//Draw the image to the canvas then read in the data
context.drawImage(selectedImage, 0, 0);
var originalLakeImageData = context.getImageData(0,0, width, height);

//Image data is now stored in an array in the form
//originalLakeImageData.data = [r1, g1, b1, a1, r2, g2, b2, a2....]

The data is stored in one long array with 4 values for every 1 pixel in the image (red, green, blue, alpha). Once you have the data inside a variable you can start manipulating it in whatever way you like. I’ve put together 3 demos displaying some pixel manipulation in action, you can view them here.

Images manipulated using the canvas API

  • Slider: This demo simply shows a before and after shot of a photograph I have cleaned up in Photoshop. As you slide your mouse over the image it reads in data from each data set. I find this is quite a good way of displaying before and after shots.
  • Pointer: Uses the same image data as the previous demo, only this time a region is picked out of the new image data set and displayed instead of the old image data. This gives the effect of ‘looking through’ the old image to the new one underneath.
  • Black & White: This demo only uses 1 data set, depending on where you hover the mouse you get a black and white image. The image data is read for every pixel, an average of the colour is calculated and pushed back into the data set. This results in a black and white image.

Some inspiration for the experiment was taken from the extremely useful jQuery Before / after plug-in, which I’ve yet to use but do plan to in the future.

One issue you may notice is the fact that the swipe is slightly sluggish; this is because as you hover over the image, the JavaScript is looping through every pixel in the image continuously:

1
2
3
4
5
6
7
8
9
10
//Loop through all the pixels in the image
//Top to bottom
for(var j = 0; j < selectedImageData.height; j++){
    //Left to right
    for(var i = 0; i < selectedImageData.width; i++){
        //Look for our individual pixel info (Times 4 due to RGBA)
        var index = (j * 4) * selectedImageData.width + (i * 4);
        //Do something with the data...
    }
}

That works out to be a staggering 720,000 bits of information in the data array (300px x 460px x 4) per image. The smaller your images are the smoother the effect, so there is a limit to how effective this method can be. I won’t be using it on a live project any time soon, but the demos have allowed me to experiment with manipulating image data using canvas.

Note: You may be wondering where the images are from. They are both my own images, one is of my Great Uncle Ben, who along with my Grandfather and their older brother Joe, fought in the Second World War. Here you can see him in uniform in North Africa. The second image was taken by me at Ullswater Water in the Lake District in 2006.

Recommended books for Front End Web Developers

So you’ve decided to persue a career as a Front End Web Developer (or you already are one and are looking for something new to read); smashing! The life of a Front End Developer is never dull… (cough) okay sometimes it is but there are certainly some exciting technologies out there to play with, especially at the moment with HTML5 and CSS3 gaining popularity.

Like with anything, you need to have a solid foundation of knowledge to build upon when it comes to new technologies, sometimes it’s a little dull but it will pay dividends in the future. Once you have the basic knowledge the world is you web browser. So here are a list of five books I’ve read in the past that I’ve found particularity helpful.

Looking for new Front End books to read, you could try one of these.

DOM Scripting

The reason I’ve put this book first is simply because it’s one of the best technical books I’ve ever read. The way it’s written is simple to understand and concise. All the way through the book it explains not only what you are doing but also why you’re doing it, and why you should also follow the same methodology.

If you are a complete beginner to JavaScript and the DOM this book will get you up and running and understanding in just a couple of chapters. Now some may say “oh I don’t need to know this anymore, that’s what JavaScript librarys are for”, but in my opinion that’s a dangerous road to go down. If ever your chosen library doesn’t do what you need, or if you can’t use a library for whatever reason; then you’re in trouble.

If you know the basics of the DOM and how to manipulate it using JavaScript, you’re much more likely to solve any issues you encounter and you’ll have a much better understanding of what the libraries are actually doing.

Author: Jeremy Keith (Amazon).

Eric Meyer on CSS

There simply couldn’t be a review of front end development books without a book from the wizard of CSS, Eric Meyer. Eric has been a major part of the CSS community for many years; helping to educate developers in the proper usage of CSS and how it can make development so (so!) much easier. I had the pleasure of attending a 2 day workshop of his in London a few years back, and still use what I learnt there on a day to day basis.

‘Eric Meyer on CSS’ will teach you some of the advanced techniques involved in using CSS in a practical manner. You take a plain website built using tables, clean up the mark-up and layer on features and functionality using CSS over the various chapters; so rather than just getting a list of properties and selectors to read about, you actually get to see a live project changing over time.

Be warned, the book isn’t for absolute beginners, you do really need to know the basics of HTML and CSS to get the most out of it. Not to worry though, all the information you need to learn the basics of many different languages including HTML and CSS is available online at w3schools. You don’t have to stick to HTML and CSS, they also have JavaScript and the DOM if you’re feeling adventurous.

Author: Eric Meyer (Amazon)

JavaScript – The Definitive Guide

The very large book you can see in the image above is ‘JavaScript – The Definitive Guide’, and it really is a definitive guide. It has of 900+ pages of wonderful JavaScript! Now I wouldn’t expect anyone to read it page by page (although that’s what I did), but it’s defiantly a book you should have in your tool kit for reference. It goes over pretty much all aspects of JavaScript you will ever use and even though it is quite technical it isn’t hard to follow; with plenty of examples and explanation of the code.

Again there’s an argument for do you need to know JavaScript if you just intend on using a library. Well I guess that up to you, but I personally don’t feel comfortable using any sort of framework / abstraction without having at least some understanding of the language it is built on.

Author: David Flanagon (Amazon)

Learning jQuery

So assuming you know about HTML, CSS and JavaScript it’s time to learn one of the many JavaScript libraries available. Now I agree with Christian Heilmann on a point he made at Full Frontal 2009 (I think it was Christian who made it), it doesn’t matter what library you use, as long as you use one!

‘Learning jQuery’ is a fantastic book that will take you through all aspects of jQuery, from setting up and writing basic code to Ajax and writing your own jQuery plug-ins. If you know how to use CSS to select parts of the DOM then jQuery will be simple for you to pick up and use. The book is filled with practical examples and applications, all using best practice methods.

I only had one slight gripe with the book while reading it; I found the font for the code blocks was slightly too big, so you tended to get a lot of wrapping on large code blocks. In terms of the content though, it really is one book that is a must read if you use jQuery or want to use jQuery in your projects.

Author: Jonathan Chaffer & Karl Swedberg (Amazon)

PHP Solutions

Now I know what you may be thinking, PHP isn’t a front end language, it’s a server side language. That is very true, but one thing I can guarantee is one day you will have to integrate the front end templates you’ve built into a server side language; be that PHP, .Net, JSP, Java etc. As I’ve mainly worked with open source technologies, PHP is primarily what I integrate into.

‘PHP Solutions’ is another excellent Friends of Ed book that takes you through lots of practical uses of PHP that you can use straight out of the book. It covers subjects such as setting up your server and includes, to online galleries and security. You may not use any of the functionality it covers since most frameworks and CMS’s have the functionality built in; but it will give you an understanding of how PHP works as a language which in turn will help you when it comes to integration.

Author: David Powers (Amazon)

So there you have 5 books I’d recommend to any Front End Web Developer looking to expand their client-side knowledge. Leave a comment if there are any books you’d recommend and I’ll take a look and add it to my Amazon wishlist.

Adding Content using CSS3

CSS3 is an exciting new browser technology, it’s implementation is improving with every new browser release. Microsoft is adding a whole host of CSS3 selectors to the their next version of Internet Explorer, version 9. Until IE9 is released and the vast majority of users start using it, (2016 maybe?) it’s a case of having to use CSS3 quite cautiously.

Using the ‘progressive enhancement’ methodology, we build a website that works in all browsers first, then ‘layer on’ the cool features and ‘nice to haves’ after, so users with modern browsers get the full site experience and older browsers still have access to all the content. CSS3 sits in the ‘nice to have’ category for the moment.

While looking through the W3C CSS3 Working Draft I came across a section called ‘Inserting content into an element’. The CSS3 pseudo-elements listed here are used to add content to the page using CSS. Cool! ….wait a second; for years we’ve been separating layout from content, allowing us to easily edit a whole website layout from a single file. The pseudo-elements seem to be going against this mantra! Uh ohh! It’s controversial, but I believe if used responsibly the pseudo-elements shouldn’t cause any major accessibility issues.

::before & ::after
The ::before and ::after pseudo-elements are used to add content before and after the content inside the selected element (surprising huh!):

1
2
3
4
5
6
#element::before {
    content: "Paradox: ";
    }
#element::after {
    content: " Now my head hurts."
    }

View a demo here.

The specifications even allow you to add more content by iterating the pseudo-elements, so ::after::after (or ::after(2)) but this isn’t supported in current browsers I have tested. I’m personally hoping that part of the specification isn’t implemented, as you can have too much of a good thing. You could end up in the nightmare situation of pages completely generated using CSS3 using multiple levels of ::before and ::after.

The CSS3 specification has also outlined the pseudo-element ::outside but it hasn’t been implemented yet in the current version of Firefox I’m using (3.6.3).

Outline will allow you to wrap an element inside another element and then add styling to it. Usually you’d modify the source code by adding extra divs to do this, but it isn’t always possible. Outline would have been very useful over the past couple of years for adding ‘sliding doors’ and rounded corners where needed, without having to clutter up the mark-up with ‘for style’ only tags. Oh well it’s a tool for the future.

I can’t say I’m a big fan of these new pseudo-elements as they seem to be stepping on HTML’s toes. It’s hard to think of a situation where you’d want the CSS to be writing content to the pages since it isn’t accessible to screen readers or search engines, but I’m sure there are some. The only example that springs to mind is when you add a ‘:’ after the label on a form field, you don’t want a screen reader to read out the ‘colon’ so you add it using CSS.

I’d love to hear where other people plan on using ::before and ::after, or where you are using them at the moment.

Currently on page 14 of 23« First1213141516Last »