Blog | Steve Lacey - Web Developer & Designer http://stevelacey.net/ en-gb Web Developer at Wired Media in Bristol. Copyright © Steve Lacey 2012 http://www.rssboard.org/rss-specification steve@stevelacey.net (Steve Lacey) Steve Lacey - Blog http://stevelacey.net/images/logo.png http://stevelacey.net/ Progressive Enhancement A polyfill, or polyfiller, is a piece of code (or plugin) that > provides the technology that you, the developer, expect the browser to > provide natively. Flattening the API landscape if you will. Polyfills are particularly useful when utilising any of the new JavaScript API’s such as geolocation or websockets. Where the functionality is either pretty much fully supported, or completely absent; giving room for a full fallback implementation. A good resource is the wide selection of [fallbacks including shims and polyfills][] recommended by [Paul Irish][]. [HTML5 Shim by Remy Sharp]: http://remysharp.com/2009/01/07/html5-enabling-script [Modernizr]: http://modernizr.com [Selectivizr]: http://selectivizr.com [coined by Remy Sharp]: http://remysharp.com/2010/10/08/what-is-a-polyfill [fallbacks including shims and polyfills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills [Paul Irish]: http://paulirish.com ]]> http://stevelacey.net/blog/progressive-enhancement.html http://stevelacey.net/blog/progressive-enhancement.html 2011-04-03T00:00:00+01:00 JavaScript Frameworks jQuery is a fast and concise JavaScript Library that simplifies HTML > document traversing, event handling, animating, and Ajax interactions > for rapid web development. jQuery is designed to change the way that > you write JavaScript. ### [MooTools][] > MooTools is a compact, modular, Object-Oriented JavaScript framework > designed for the intermediate to advanced JavaScript developer. It > allows you to write powerful, flexible, and cross-browser code with > its elegant, well documented, and coherent API. If you want to read further into the topic of which framework is right for you, I’d recommend reading [Aaron Newton’s thoughts on the matter][]. I admire MooTools’ approach of enhancing existing JavaScript functionality- and it’ll definitely be something I look into for future projects, but for the purpose of this session we’ll be focusing on jQuery. jQuery ------ ### Getting it onto your website You could download the latest copy and keep it locally.. but a recommended practice is to use the copy maintained by Google as part of their AJAX API: `http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js` The version number can be as granular as you like, I often use 1 so that I get all the latest updates, but stuff can break if a significant change is made, it’s probably better advice to use one decimal place versioning, meaning you get all bugfixes for that major version and minor feature releases. The main advantages to using their API are: 1. Updates. 2. Bugfixes. 3. Caching. Lots of developers do this, a majority of your users probably already have this file cached from another websites usage of the API. Meaning faster loading. Looking for the jQuery UI hosted script? `http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js` ### Selectors `$("a img")` `$("header .logo")` `$("footer #copyright")` #### More? `$("input:first")` `$("ul li:gt(5)")` `$("p:contains('Some text')")` #### MOAR!? [http://api.jquery.com/category/selectors][] ### Events These are key to deciding when things should happen. One you’ll need to get familiar with is: $(document).ready(function() { ... }); This is called when the DOM is fully loaded, if you were to execute DOM alterations prior to this event, you’d only capture whatever has been loaded thus far. Others are fairly self explanatory: $("a#logo").click(function() { alert("Don't click my logo!"); }); ### Animation There are shed loads of animation methods built into jQuery: - [slideUp][] - [slideDown][] - [slideToggle][] - [fadeIn][] - [fadeOut][] - [fadeToggle][] - and even more available via plugins and [jQuery UI][]. ### Callbacks $("ul").slideUp(200, function() { // I'm the callback, executed when the ul has finished sliding up }); $("p").fadeOut(1000, function() { $("p.other").fadeIn(1000, function() { // I'm a nested callback, executed when p is faded out and p.other is faded in. }); }); $("a").click(function(event) { // I'm a callback executed when you click an anchor. (well.. any anchor in this case) $(this).siblings("p").slideDown(); event.preventDefault(); // I don't want the anchor to act like normal! (Ask me if you want to know why not to use return false;) }); If you want to do a lot of stuff with a node, and stay DRY, you might want to wrap stuff up, repeating similar selectors is lame. $("ul li").each(function() { $(this).find("a").click(function() { // do stuff }); $(this).find("p").css("color", "red"); }); ### Debugging As with every language ever, get an error, at any cost. Stop guessing. Tools for doing so: Webkit Inspector is built into Chrome and Safari, and is pretty excellent- right click on anything and click inspect element to see how your DOM is looking. To get JavaScript errors click on the console tab.. If you’re a FireFox fan, [Firebug][] is even more awesome; use that, if you’re a Chromer, it isn’t really worth it- the Chrome version is no match to the FireFox version or webkit inspector. Regardless of which tool you’re using as a console. In your JavaScript make use of **console.log** to push out the values of things when stuff isn’t working, it’ll dump whatever you pass to it into your inspector or FireBug console. Exercises --------- ### Basic Animations Do some simple event based animations, how about a button that fades or slides a div in and out? Here’s some markup to get you started: Animation Example
I'M A DIV
And some style: body { padding: 200px; } button, div { display: block; width: 200px; font: 20px arial; text-align: center; line-height: 200px; } button { background: #e46217; float: left; } div { background: #237bff; float: right; } #### Hints - You’ll want to apply the [click][] event when the document is ready. - You could expand on any animations you do by [changing the text too][]. #### Finished Example [Basic Animations][] ### Twitter Feed Scraper Build a really basic scraper of the Twitteer Search API. #### Hints - You’ll want it to start scraping when the document is ready. - If only there was some [documentation of how to use the Twitter Search API][]. - You’ll probably want to use AJAX, if only [jQuery had a method for that][]. - JavaScript Object Notation (JSON) requires no additional parsing by JavaScript. - Twitter isn’t on cems.uwe.ac.uk, so this is cross-domain… **JSONP** is a hack around doing cross-domain AJAX… lucky that jQuery natively supports that **dataType**. - You’d want tweets in the DOM so users can see them, perhaps you could [prepend][] each list item to an unordered list you add to body? - To keep polling for tweets you’ll want to push your code out to a function, then make it recursive with a delay; try sticking **setTimeout(’getTweets()’, 2000);** at the end of it ;) don’t forget to call the function for the first time when the document is ready. - You can do all this in <30 lines of jQuery. #### Finished Example [Basic Twitter Feed Scraper][] Onwards! -------- Hopefully having had a play, you have the key understand to take this forward, the key to using frameworks is documentation, and jQuery has shed loads ([http://api.jquery.com][]). jQuery is all based around these core concepts, so you should be able to see patterns when using new functionalities, I don’t know this stuff, I’m guessing most of the time- there’s no magic involved, jQuery is logical and readable and with a bit of practice you’ll find it easy. [jQuery]: http://jquery.com [MooTools]: http://mootools.net [Aaron Newton’s thoughts on the matter]: http://jqueryvsmootools.com [http://api.jquery.com/category/selectors]: http://api.jquery.com/category/selectors/ [slideUp]: http://api.jquery.com/slideUp [slideDown]: http://api.jquery.com/slideDown [slideToggle]: http://api.jquery.com/slideToggle [fadeIn]: http://api.jquery.com/fadeIn [fadeOut]: http://api.jquery.com/fadeOut [fadeToggle]: http://api.jquery.com/fadeToggle [jQuery UI]: http://jqueryui.com/demos/animate [Firebug]: http://getfirebug.com [click]: http://api.jquery.com/click [changing the text too]: http://api.jquery.com/text [Basic Animations]: /examples/javascript-frameworks/animation [documentation of how to use the Twitter Search API]: http://apiwiki.twitter.com/w/page/22554756/Twitter-Search-API-Method:-search [jQuery had a method for that]: http://api.jquery.com/jQuery.ajax [prepend]: http://api.jquery.com/prepend [Basic Twitter Feed Scraper]: /examples/javascript-frameworks/twitter [http://api.jquery.com]: http://api.jquery.com/ ]]> http://stevelacey.net/blog/javascript-frameworks.html http://stevelacey.net/blog/javascript-frameworks.html 2011-04-01T00:00:00+01:00 Version Control Why is it awesome?
  • Track changes.
  • Never lose code again. Seriously.
  • Revert stuff when you dick it.
  • Collaborate as part of a team, without conflict, even when working on the same file(s).
  • Deploy stuff easily, and without having to remember what you've changed.
  • Open-Source your projects, look awesome.
  • Make something cool, open, and encourage contribution, free code.
  • Every agency ever uses it. If they don't. They're doing it wrong.

What are the options?

  • Subversion (SVN)
    • A bit legacy, likes to break and yell TREE CONFLICT at your face.
    • Still used for major codebases like Wordpress and the Symfony Project.
    • The majority are migrating away from it. But it's still useful if you want to contribute or utilise the above.
  • Git
    • Distributed.
    • Pretty hard to dick.
    • Quite approachable.
    • Github.
  • Mercurial
    • Distributed.
    • Looks cool.
    • Supported by Github also.
    • Considered it when migrating away from SVN at work.. went with Git.

So how do I use it?

Command line will always be the fastest way, and isn't too scary once you've got used to it.

If you're on a Mac; Git Tower looks cool pretty. Don't ask me how to use it though; I'd be guessing.

Repository

.git

Staging Area

Every file change that you want to commit goes into the staging area at some point. Adding or removing puts stuff in the staging area. You can see what's in it when you do 'git status'.

You can dynamically stage stuff and commit it all at once by adding the 'a' flag to your commit:

git commit –am "Blah blah added some new buttons and stuff."

That would commit all the files that git already knows about that have changed (so no untracked files).

You also don't have to commit the whole stage at once. You can add file paths (space-delimitated) to most commands:

git commit –m "OMG some images!" images/flowers/* images/trees images/logo.png

Some scenarios

I've added a feature, and nothing else, all these files need to go up!

git add . // Unix basics, '.' Remember?
git status // Check what's going up
git commit –m "My awesome new feature that does x. YAY."

Done.

git commit –m "I made some changes to the config and junk." includes/config.php

Done.

I want my code on Github so people see it and think "WOW, YOU'RE AWESOME"

Having committed some stuff. Push.

Argh I need to configure Github!

Note: You'll need to copy an SSH public key from your environment to Github, so that it knows it's yours and its okay to accept code from it.

How?

help.github.com/win-set-up-git

Follow the bit starting at:

Next: Set Up SSH Keys

3. Generate a new SSH key.

]]> http://stevelacey.net/blog/version-control.html http://stevelacey.net/blog/version-control.html 2011-03-31T00:00:00+01:00 Command Line Basics Configuring your environment

To access milly's CLI you'll be needing an SSH client, if you're on a Mac, that'll do, go to terminal and use the ssh function. If you're on Windows, man up and get a Mac.. or download Putty.

To login, go to: cemsusername@milly

Command line interfaces (CLI) have different 'shells', which are basically CLI environments. UWE's milly server is based on Solaris; which uses some crazy shell, bash has a more common set of functions and more scripts readily available in the 'path' (Git and Vim for example). To set up your CLI environment to use bash execute these two commands, which will copy some configuration files from my account to your home (unix) directory.

cp /nas/students/s/slacey/unix/.cshrc ~

cp /nas/students/s/slacey/unix/.bashrc ~

Restart putty and you should be in bash. You should be able see "username@milly" rather than ">" now and if you execute 'git' you should get the Git help screen rather than "command not found".

Now for some basics:

Traversing

Getting around you'll need to know some of the characters used for navigating via command line. These cascade across all lines of web work, you'll know a few of them:

Currenct Directory .
Parent Directory ..
Wildcard, match everything *
Home Directory (aka your unix directory) ~
Root /

Get used to the 'cd' (change directory) function, you'll be using it a lot. After logging in, you'll be in your home directory (unix drive), so for example from here you could:

cd public_html (go to public_html)

cd ../windows (go to your Windows directory)

cd . (move to the current directory... where you already are... pointless)

cd / (go to root... where there's some stuff, you're not allowed to touch any of it)

cd ../../../../ (go to... somewhere...)

Bash tab completion is awesome. Who likes typing stuff? It's dull. If you've started typing a path, and there's only one file or directory that matches what you've typed so far, hit tab, and it'll complete it for you.. if not, hit it again and bash will recommend what possible matches there are. Don't type everything out manually. You'll get RSI.

Listing files

List files with 'ls', it has a few options too, you specify those with a dash.

Long format ls -l
\w Hidden files ls -a
Long format, \w hidden files ls -la

Permissions

“chmod” is the command line tool that you use to set permissions on files. It stands for change mode and allows you to fine tune who can access the files and to what level.

First, let’s see what it can do. Chances are you won’t understand what’s going on but I’ve often found that it’s easier to learn about something if you know what it can achieve first.

To see what the current permissions of a file run “ls -l” at the command line:
CLI Permissions
The boxed area is the permissions for each file. d at the beginning indicates a directory, following this there are three groups of three letters, these indicate the permissions for different user groups—we’ll get on to that later.

By the way, if you wanted to know what all the other stuff means, here goes:

Access Permissions | Files Contained (1 if it is a file) | Owner | Group Owner | Size | Date Last Modified | File Name
 
Directory Listing 755
Accessing the folder in Apache, we can see our folder. What if we want to keep it private?
CLI Change Permissions
Here is an extreme case, we change the permissions of the file to 000 (nobody can read the file, write to it or execute it—ouch).
Directory Listing 000
And as if by magic, we can no longer see it. If we try to access the folder directly:
Forbidden

There’s two ways of setting permissions. By letters (symbolic) or numbers (numeric). The possible values are listed in the table below.

# Symbolic Permissions
7 rwx Full
6 rw Read and Write
5 rx Read and Execute
4 r Read Only
3 wx Write and Execute
2 w Write Only
1 x Execute Only
0   None

Syntax

Numeric

chmod [numeric] [folder/filename]

The numeric notation expects three numbers:

7 7 7
File Owner Group Other Users

Symbolic

chmod [user group]+[symbolic] [folder/filename]

The symbolic notation expects some letters (the permissions) and some more letters (who it’s targeting)

File Owner (u) => Group (g) => Others (o) => All (a)

So if you want to do the equivalent of a numeric “777” you would do:

chmod a+rwx my_awesome_folder

Here’s an example of a variety of folder permissions and how they look:

Mixed Permissions

]]> http://stevelacey.net/blog/command-line-basics.html http://stevelacey.net/blog/command-line-basics.html 2011-03-29T00:00:00+01:00 Spotify Never download music again!.. or at least that's what I'm going to do. It's not often I come across an application that changes the way I live as dramatically as Spotify does.

Spotify is basically a streaming application, but different to any I've ever seen before. Their database contains a massive selection of songs, all of which are available to you at the click of a mouse. The quality of the service is so extraordinary you won't even notice a delay, the bitrate of the music streamed is around 160kbps and I challenge anyone to notice any difference to playing music from your hard drive.

The service is funded by non-intrusive advertising in the form of audio ads that play every 20 or so songs and a banner that appears in the application every now and again. If these are annoying you, you can also opt to pay a quid for a day pass, or a monthly membership.

As long as record labels continue their support of the application (and don't get their artists removed from the service... Metallica) I think Spotify could be revolutionary to the way we listen to music.

At the moment Spotify is only available on PC/Mac but they are planning for expansion onto the Symbian platform as well as other systems, presumably including the iPhone. With it's built-in Last.fm and WLM integration and the ability to share your playlists with your friends via simple HTTP links; Spotify is the perfect little music app and I definitely recommend you to have a go with it. I only have one playlist at the moment, click here to add it.

Presently Spotify is invite-only unless you pay for a premium account. I have 5 invites left so feel free to drop me a message if you want to grab one.

]]> http://stevelacey.net/blog/spotify.html http://stevelacey.net/blog/spotify.html 2009-02-08T00:00:00+00:00 Christmas PAL Session It's the last session before Christmas, as part of the festive cheer I have hidden 7 Santa's and a Snowman on my site. Whoever spots them all and post there location as a comment on this post first wins a box of celebrations! (The Santa on this post doesn't count!) Good Luck!

]]> http://stevelacey.net/blog/christmas-pal-session.html http://stevelacey.net/blog/christmas-pal-session.html 2008-12-15T00:00:00+00:00 Stockazon It's been a long time since my last article, so I thought I'd post a quick update. A few weeks ago I was approached by a developer I've known for a few years who wanted me to design a new website for his next project 'Stockazon'.

The concept is basically for a website that distributes SMS text messages to users alerting them when new stock arrives in on Amazon items that they're watching. Users can buy 'credits' from Stockazon via PayPal and search and add items to their basket via the website.

The website is still very much in development but you can check out the progress by clicking the image to the right, once completed I'll also add it to the Portfolio page. I am working on purely the front-end of the site, all the graphics, HTML and CSS. The back-end has already been developed by the owner so my only task is to make the website functional and appealing to users.

In other news I've been busy enjoying the summer, it's good to have a break from Uni; but I'm also looking forward to going back in September. I've now signed up to the PAL (Peer Assisted Learning) Scheme, and will be trained in late September, so next year I will be paid to run PAL Sessions with 1st Year Students who are taking the 'Introduction to the Web' module that I did last year. I feel this will be a positive experience for me and assist with improving my communication skills and should hopefully make it easier for me to find a work placement opportunity next year.

I've still got big plans for the improvement and expansion of Easy Freebie, it's just an issue of getting around to doing it. I want to update all the sites to a new design, link them all to a central offers database and add a whole bunch of new exciting features. Once all that is complete I will be investing some serious money in advertising and be running a selection promotions exclusive to eXceem members.

If you have any suggestions for the Stockazon design, please leave a comment below and I'll get right on it. You may also notice the new feature I've added, if you enter your E-Mail address when posting, you'll receive an alert when someone else leaves a response!

]]> http://stevelacey.net/blog/stockazon.html http://stevelacey.net/blog/stockazon.html 2008-08-15T00:00:00+01:00 The Planet ThePlanet.comApologies for the downtime of the site over the last couple of days; it was caused by an explosion in Houston, Texas at ThePlanet.com's datacentre which knocked out over 9000 websites including my own. It took me a while to establish what had caused the problem, mainly because I'm down a hierarchy of 2 other companies before I get to ThePlanet (SureSpace.net that purchases reseller hosting from HostNine.com who rent space from ThePlanet.com). The explosion was caused by an electrical fire in one of the rooms of the facility, the blast was powerful enough to take down 3 walls in an equipment room but fortunately no-one was injured and none of the servers were damaged. The downtime lasted around 36 hours, as they fought to restore power after being re-allowed access to the facility by fire services. I was writing a blog at the time of the accident at about 7pm BST Saturday and was quite aggravated by the sudden downtime; but I am at least pleased that everything has now been repaired and that no data was lost.

]]> http://stevelacey.net/blog/the-planet.html http://stevelacey.net/blog/the-planet.html 2008-06-02T00:00:00+01:00 BBC Website Overspend BBCIn the news this week is the apparent overspend by the BBC on the development of their new website.

Now I would certainly not be the first to acknowledge that the new website is the pinnacle of what we as developers look for in modern web design, pretty much everything about it is fantastic. But should it have really cost £85.1 million to do it? BBC Home There are many reports in the tabloids at the moment claiming the BBC overspent by as much as £36 million (Source: The Guardian); however the figure I'm more likely to be convinced by is what was stated by Dame Patricia Hodgson that the BBC exceeded their budget by approximately £3.5 million.

Either way I find it hard to believe that the amount paid was worth it, I know I certainly would be a very happy man if I were working for the BBC web development team and got handed an amount as substantial as what some of the team must have got.

There is no doubt in my mind that the new website is brilliant, the whole look and feel of the site is above and beyond the old one. The use of whitespace is much improved; the whole design feels a lot less cluttered and they made the somewhat logical step to abandon compatibility with legacy screen resolutions. The new BBC iPlayer is astounding; It certainly comes in use when I want to quench my thirst for Dr Who when usually I have missed the show on Saturday evenings. In addition to this, the BBC News site is so much more user-friendly now, I can spend a lot of time browsing it now that I don't get aggravated by the small fixed width, left-aligned design. BBC News The interactivity of the new site is also a big selling point in my opinion. I'm a big fan of AJAX, which is used a lot around the new site, allowing the user to fully customise their experience on the site easily without reloading the page; and also allowing the BBC to obtain more information about how their users navigate their site and therefore develop around those needs. The simple use of pastel colours and slight gradient also contributes to making the design near perfect and a complete joy to use.

]]> http://stevelacey.net/blog/bbc-website-overspend.html http://stevelacey.net/blog/bbc-website-overspend.html 2008-06-02T00:00:00+01:00 Save the Developers Well it's finally complete! If you've been keeping up with the random posts I've been making on here over the last week or so you'll have noticed the development of this blog which is now pretty much ready for use. There may be some tiny issues over the next month or so and features I may add such as a fixed position for images in posts or 'trackbacks' and a 'tag cloud' but the basic system is good to go. If you're one of the people that for some reason still uses Internet Explorer, you may notice some graphical issues around the blog e.g. on the comments section; I will fix these at some point but it's not high on my priorities as IE has been known to cause me to have somewhat mental breakdowns at the wrath of the ignorant way it interprets XHTML & CSS. This brings me onto a website I found a month or so ago on my friend Byrion's website:

Save the Developers

Save the Developers is a website dedicated to the promotion of upgrading your browser if you are still using the now legacy browser, Internet Explorer 6, to at least Internet Explorer 7 or even better an alternative browser such as FireFox, Opera or Safari. Developers can join the movement to promote this as standard so that no longer will we have to toil developing various 'holly hacks' and other IE6-only scripting in order to be fully compatible, by simply adding a script to their site which will alert any users that visit who are using legacy browsers. Join the cause!

]]> http://stevelacey.net/blog/save-the-developers.html http://stevelacey.net/blog/save-the-developers.html 2008-05-29T00:00:00+01:00