On Saturday, inspired by Paul Annett’s Channel 4 logo, I decided to build a parallax illusion in the browser.

Here’s the end result: http://maban.co.uk/sandbox/parallax-illusion/

How it works

To build this you only need 2 images. One is the stripes (mine is a 14×8 gif where 6px are transparent, and 8 are black) and the main image which is actually 2 images in 1 layered on top of each other.

The main image is a bird in 2 states – 1 with its wings up, 1 down. You can have more states, but I wanted to keep this very simple.

The stripes are a transparent, repeating background which appear over the image.

The stripes of the image that are visible need to be the same width as the gap between the stripes that go on top of it. So that the wings on the down state aren’t visible while it’s on the up state, you’ll need to position the blank stripes slightly differently on the down state, in this case 6px to the right of the ones on the up state. Then simply layer the two images on top of each other and save them as one image.

The HTML:

<div class="image">
<div class="strips"></div>
</div>

The CSS:

.strips {
background-image:url("strips.gif");
background-repeat:repeat;
background-position:center center;
height:100%;
width:100%;
}
.image {
background-image:url("background.gif");
position:fixed;
background-repeat:repeat-x;
height:100%;
width:100%;
}

All this does is position the stripes over the image, and make both images the full height and width of the screen since there’s no content in them. The image stays in the same place while the stripes move with the width of the window because they are centred.

More parallax illusions

Paul Annett sent me a couple of links to parallax illusions he’d seen that other people have made: one of a horse running, and one of a 3D object.

I’m planning on doing a full write-up for an upcoming issue of Scrunchup.

So what does a front end developer actually do? Let’s start with the “front end” bit. A website can be broken down into two main bits, the front end, and the back end.

The Front End

The front end of a website is the visual bit that the user interacts with. This includes the design, images, colours, buttons, forms, typography, animations and content. It’s basically everything that you as a user of the website can see.

The Back End

The back end of the site is the bit that you don’t see. It’s the code that makes e-commerce sites work, the database where your Amazon wishlist is stored, it’s all the magic that happens behind the visual part of the website that makes the website actually work.

Now for the “developer” bit. To explain what a developer does, I should probably clarify what a designer does.

The Designer

Designers decide how a website is going to look, what the colour scheme will be, how all the headings will look, and how all the pages will work together. They usually build a flat visual graphic of the site which has pictures of how the site will look and how each of the interactions will look. At this stage you can’t interact with it, it’s just a picture. They then hand this file to the developer.

The Developer

The developer takes the file that the designer has sent them, and they look at it and work out how they are going to build the site so that it will work in a browser. (A browser is the bit of software that you use to look at websites. There are lots of browsers including Internet Explorer, Firefox, Safari…).
Developers will break the design up into components, and start to build these into a website using code. They then test the site in lots of different browsers, and sometimes on mobile phone browsers too. Each browser treats the code slightly differently, and the developer has to make sure that the site is accessible for lots of different users on lots of different browsers, and on different sized screens.
They have to make sure the text can be resized without breaking the site, that the site is readable by search engines like Google, and people with visual disabilities using screen readers, or people with old technology. They have to make sure the site looks as close to the design they have been given as possible.

The Front End Developer

So combining these two things, a front end developer works on the code that makes a website look the way it does. They use HTML to build the content, CSS to style the pages, and sometimes use JavaScript and PHP to make the pages more dynamic.

Now, this is all a bit of a generalisation. There is a lot of crossover with roles, and my role as a front end developer may be different to someone else who also calls themselves a front end developer, and it all depends on their skills and background. There are also many different roles within front end and back end which I will probably go into another time.

Here’s a screenshot I took from their site of their rules when my choice of password was rejected:

Rule Number One: Your password must be between 6 and 8 characters. No more, no fewer.  Surely when you’re protecting your finances from hackers you’d want the option to have a longer password.  My FTP password is around 20 characters with a mixture of capitals, lowercase, numbers and symbols. A little obsessive perhaps, but as this article on InfoWorld states “Character-for-character, password length is more important for security than complexity”.  The longer you make your password, the harder it is to crack.

Natwest’s argument may be that by forcing a password under 9 characters, they are making it easier for people to remember it.  But so what?  I want the option to use my ridiculously long password because I value my security.

Rule Number Two: Your password is not case sensitive. So I guess that means if I add a mixture of capitals and lowercase, the password field will treat them all as lowercase, making my password easier to crack.  Great.

Rule Number Three: Your password must contain both alpha and numeric characters, as you’d expect.  It’s obviously a good idea to force people to do this on a site such as this, as this makes their password more secure.

Rule Number Four: No symbols, spaces or special characters.  Umm, why?  C’mon Natwest, you’re trying to teach people to treat their security seriously.  How is preventing people from making their passwords secure going to help?

Rule Numbers Five and Six: Characters or digits cannot occur more than twice in a row, or contain ascending or descending values.  Good, a gold star.

What annoys me most about this is that as a bank, Natwest should be educating their users about security, and encouraging them to use really secure passwords.  You’re probably familiar with the little red, amber and green progress-style bars that email clients like Hotmail and Gmail display when you start typing a password – why not have something like that?  I regret that I’m slating just Natwest for doing this when it’s probably the same across all online banking systems.  I wrote them this letter about it in February:

“I was just wondering if the Natwest online site is scheduled for a redevelopment.  I find it really confusing and frustrating to use, and there are big security issues like it won’t let me use a password with symbols, or over a certain number of characters.”

And here’s the automated response I got back:

“Thank you for your message received via the feedback section of the
natwest.com website.  Thank you for taking the time in forwarding this information, which we have passed on to the relevant department.”

If you use online banking, do they do things differently, or are they all just as bad?