Tag Archive: development

I was reading an article on Mark Boulton’s website, the first time I’ve visited it since the redesign. The article, A Richer Canvas, was interesting but that’s not what this blog post is about.

The website is very minimal, with typography the focus. The navigation is in a sidebar on the right and just simple, grey text. Until you mouse over the sidebar. When you do, all the links turn from grey to green. It’s a really effective technique and quite eye-catching. It’s simple, but elegant, and not something I’ve seen before.

Now all I need to do is work out how he did it and then steal the idea.

*** Update ***

I gave it a go, and it’s very easy. Took me 15 minutes to find out how he did it and then code my own (very rough) example: Trick navigation example.

All you need to do is apply a hover pseudo-class to a div, and target each anchor within that div (see code in comment below). That way the anchor changes when you hover over the div, not the anchor. Use some CSS3 transitions to add a little easing and that’s it.

Five things I learnt in week seven

  1. What Ajax allows us to do. I had heard of Ajax before last week, and I could even remember what the acronym stood for (Asynchronous JavaScript and XML) but I didn’t realise what it actually does: allow applications to ‘retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page.’ (Wikipedia).
  2. There’s no point worrying about learning JavaScript from scratch. Frameworks like jQuery are there to do the heavy lifting for you, although understanding the basics of programming (functions, arrays, expressions, operators etc.) is a big help.
  3. Embrace the DOM. It’s as simple to target elements with a framework like jQuery as it is with CSS.
  4. jQuery functions toggle! Perhaps the single most useful thing I learnt last week.
  5. There’s no need to be afraid. I’ve always been a bit intimidated by JavaScript, mainly because it speaks as if it were a programming language. Now though I feel that learning a framework like jQuery shouldn’t be any more difficult than learning CSS. Time to stop being a scaredy-cat and start getting my hands dirty

Five things I learnt in week six

Five things I learnt in Week Six

  1. I’ve finally got the hang of semantic class names/IDs. Don’t use names which describe how an element is presented (.red, #nav-left). Instead use names which give the element meaning (.warning, #sub-nav).
  2. Always write a print style sheet. It shouldn’t take very long, and it adds an extra layer of functionality (and polish) to your website.
  3. Use uneven padding to to centre the separators when styling navigation. I’m not sure why this works, but it does.
  4. Don’t avoid selectors just because older browsers don’t understand them. Using an adjacent sibling selector is the best way to remove the border from the last item in a navigation list. All that will happen in older browsers is that the border won’t be removed and I can live with that.
  5. Always ask ‘What happens if..?’ The best way of making your designs bulletproof.