New tools for web design and development: January 2013
The collection and validation of user input seems to be a theme pervading the early days of 2013. Front-line form checking, inline content editing, even the tricky business of establishing a user’s humanity get some worthwhile attention.
Another facet of the web which has received plenty of attention recently could be called cosmetic, but that makes it sound cheap, which it’s not. The web needs a lot of cosmetics to hide its various blemishes and abnormalities. So here we find a universal fix for the scroll bar’s varying looks, a CSS-based icon set and a URL-shortening service which is nothing short of brilliant.
So, if you work your way through that lot, February is going to be busy and good-looking.
Forms present the designer with a very particular set of problems which it’s all too easy to get bogged down with. However, just the sight of a blank field is enough to put some users off, so it’s crucial to ensure the process of data input is as painless and error-free as possible. Parsley.js wants to help with that.
Hooked into the data- attributes of your form’s input fields, Parsley comes with a broad range of routines, from minimum length to URL validity. And at 800 lines, the library is tiny too, so extending the routines for more intensive validation shouldn’t be too taxing.
2. Are You a Human?
Price: Free / $19 / $79 per month
Ever just given up on a Captcha form, convinced that the thing must be broken somehow? Well, you’re not alone in that. Apparently something like a quarter of users are put off by the unwieldy captcha validation process. And to cap it all, the process is not immune to being hacked.
Are You a Human presents a much simpler and more friendly way to validate a user’s humanity. A set of simple games involving human comprehension and decision-making skills prove to be a more enjoyable, rapid solution. And not only do they work better, they’re extremely straightforward to implement.
If you’re using Twitter Bootstrap, jQuery UI or regular jQuery, X-Editable gives you the ability to create in-page editable content with almost no hassle at all. It works smoothly, is simple to integrate and ties in agnostically with your server-side code.
These and the remaining options for customising the experience are well documented, making this an interesting addition to the UI/UX champion’s armoury.
Markdown is an appealing idea – writing code using email-like syntax which is easily readable and rapidly translated into regular HTML. Even so, it’s just another thing to learn, right? Well, Dillinger makes that process so transparent that you’ll be up and running in no time. And if you’re already on the Markdown wagon, it’s a handy ‘code anywhere’ option.
Written using some of today’s most popular technologies, Dillinger uses Node.js for parallel connectivity, Twitter Bootstrap for its looks, Ace Editor for input and Showdown to handle the markdown itself. Exported files can remain Markdown or jump to HTML.
Sometimes you just need to know character codes, that’s the way it is. Could be you’re searching for the HTML encoding of the Euro, or the integral sign, or you want to add a circumflex accent to your text. Nobody keeps this stuff in their head and it’s a regular pain in the arse trying to find a reliable resource that covers all the bases. That was until you heard about character-code.com.
Handsome layout, sensible filters, Unicode/HTML/ASCI, ‘at a glance’ breakdown. What more could you ask for? Before long character-code.com will have you excitedly producing sentences which begin, “I know the unicode value for… ”
6. Malihu jQuery Custom Scroller 2.3
If you want to give your site some consistently swish-looking, cross-browser custom scroll bars, Manos Malihu has got just the thing for you. It includes inertial scrolling, mouse wheel support and fully customisable styles and works just about everywhere. It does, however, rely on jQueryUI.
You would be forgiven for thinking that styling a scroll bar would be one of the things we might have cracked by 2013. You would, of course, be wrong. Webkit being the worthy exception doesn’t really help because you still have to implement an alternative for non-webkit users. Malihu’s updated plugin provides a reliable solution.
7. One Div
One div is a collection of single-div icons drawn using CSS3. This clever approach has the advantage of being animatable and, where supported, they can be smoothly scaled, just like SVG.
The problem comes when you look into the cross-platform support situation. Sadly, as things stand, there’s only a subset of the full collection which can be relied on in every browser. Hopefully, that situation will continue to improve. And as it does, the library will continue to grow though community contributions.
8. Zigg.be Alpha
If you’ve ever had to tell someone a URL over the phone you’ll be well aware that anything which happens past the .com may as well be in a foreign language. If you’re talking to a relative, it’s a foreign language they don’t speak. Zigg.be just ends that pain.
Just enter your massively over-complex URL, decide how long you want it to persist, and away you go. The result is a short, readable URL, like zigge.be/wide or zigge.be/bread zigge.be/lamp. Just think, even your grandmother would be able to navigate her way to the right ebay auction in time for your birthday. An API would be nice once it’s out of alpha.
BaconJS turns the dynamic elements of your UI into observable properties and the activities of your users into event streams. These you can combine, filter and recombine before allowing your functions to cause ‘side-effects’.