On Our Radar This Week: Zombies and UX Gaffes

[James_Hibbard]

Originally published at: http://www.sitepoint.com/on-our-radar-this-week-zombies-and-ux-gaffes/

Welcome to On Our Radar, a weekly round-up of news, trends and other cool stuff from the world of web development.

This week saw the launch of the Raspberry Pi 2, which is billed as being considerably faster than its predecessor, but not the slightest bit pricier. Microsoft somehow managed to get in on the act announcing that it is giving away a free version of Windows 10 for the single-board computer – which is a really smart move, apparently.

Elsewhere it seems that Google and Uber could soon become rivals, as Uber announced plans to research self-driving cars, whilst Google is reported to be developing its own Uber competitor. I guess this means Johnny Cabs might be with us sooner than we thought.

Finally, the Pirate Bay is back! But don’t get too excited, it might be a FBI honeypot.

The Right Tool for the Job

Gulp is a build system which can automate the mundane tasks in the development of a website. This beginner-level tutorial walks you through setting it up, then demonstrates how to use it to concatenate files and compile Sass.

You can also use Gulp (along with Node and Git) to deploy a project to Heroku.

Grunt is a JavaScript task runner, which can also automate repetitive tasks. Here are some ideas for incorporating Grunt into your WordPress development workflow.

One of the IO.js lead developers was interviewed on the Changelog podcast last week, where he discussed (amongst other things) the forking of Node and the future of the project.

Meanwhile Joyent launched a Node.js incubator program, as a part of which members will receive $25,000 worth of services. Rather predictably, anyone using IO.js need not apply.

Zombies and Design Gaffes

Bruno Skvorc recently discovered some critical (but easy to fix) UX flaws in a service he tried to sign up for. Rather than groan and be on his way, he wrote them up into a case study which he posted, complete with possible solutions.

What three things do poor user interfaces and zombies have in common? I’m afraid you’ll have to read the article to find out the answer.

It’s time to change the way we talk about accessibility and stop invoking the internal stereotypes we have about who is disabled.

What would you do if multiple designers ripped off your website (even going so far as to directly copy the code)? This guy took it as a compliment.

This walkthrough demonstrates how to use HTML and CSS for wireframing.

Here are 50 free web design resources covering everything from UI kits to icon sets, to web templates.

Bootstrap and Masonry

Masonry is a JavaScript grid layout library (popular for photo galleries). This is how you can get Bootstrap and Masonry to play nicely together.

Here are nine Bootstrap themes worth checking out (as well as some good advice on where to find more).

Not everyone is Bootstrap fan, however. Here are ten lightweight alternatives to this popular front-end framework.

Gallerize is a Ruby gem which can be used to create a Masonry style image gallery. Even for non-Rubyists, it is as easy as installing the gem, navigating to a directory containing pictures and entering a single command.

Rolling Your Own

This is a great post detailing how to make your own screen scraper using a little-known JavaScript console trick.

This is how to install and configure your very own open source, PHP-based URL shortner – because the world doesn’t have enough url shortners.

RAML stands for RESTful API Modeling Language and provides a structured, unambiguous format for describing a RESTful API. If you understood that, then maybe you want to check out the article.

Remember that talk of automating repetitive web dev tasks earlier? Well, here’s a Grunt plugin to compile RAML to HTML.

Smashing magazine ran an interesting article this week about redefining lazy loading using the lazy-load-xt plugin. This technique delays the loading of resources until a user actually needs them and can thus speed up your website considerably.

Jekyll (everyone’s favorite static site generator) has launched a theme of the month series. They only have two themes so far (what with it being February), so there’s a good chance of getting yours featured.

---

So that’s everything for this week. Thanks for joining us.

I’ll leave you with the news that a company called ConnectX wants to put server farms in space (I guess the desire for abundant, free cooling makes plenty of sense), the announcement that Google Earth Pro has dropped its $399 subscription fee (who cares what it does – it’s free!) and a great website I discovered called the Internet of Useless things (because connected doesn’t mean useful).

So which links caught your attention? Which build tools are you using? Do you have any examples of poor UX design you wish to share? Let us know, we would love to hear your thoughts.

Continue reading this article on SitePoint

[TechnoBear]

There’s a lot of good reading in there, which I hope to get round to. Thanks for the A List Apart article on accessibility, which I’ve just read and enjoyed. I can think of at least one bunch of devs I’d like to send this to:

Frankly, it’s none of our damn business why someone wants your website to work without a keyboard or a mouse, or on a screen reader or a Braille output. When you walk into the local grocery store, nobody greets you at the door and tells you that the store won’t work for you because you’re wearing glasses. Neither you nor your business should expect your audience to step up and voluntarily tell you what accessible technology they use, or why, or anything about their medical history, just so you can sell them socks, or a mutual fund, or a house.

[James_Hibbard]

Yeah, that was a good one!

I thought of that article again today when I was working on a client’s site and wanted a “back to top” feature (which should take you back to the top of the page from the foot of a long text).

So I wrote:

<a href="#top">ˆBack to the top</a>

$("a[href='#top']").click(function(e) {
  e.preventDefault();
  $("html, body").animate({ scrollTop: 0 }, "slow");
});

and thought “Sorted!”

Then I thought," what if someone has JS disabled?" and added one extra line after the opening <body> tag:

 <a name="top"></a>

Now it works for everyone.

And that’s the thing about accessibility - sometimes, just a little extra thought can go a long way.