A brief round up of what I did this year, mainly for myself but you can read it if you want.
Posted in: General
Recently I was uninspired by Bootstrap’s cop-out for responsive tables where they just add horizontal scrollbars for widths under 768px.
I’d come across a few ideas in the past and now I’m exploring them to give pros and cons for each solution.
A few links I found interesting this week.
This would be useful on a calendar when selecting a range between two dates.
This might be useful for a list of search results where you want the ability to show more images without the distraction of using a full carousel.
The first in what I hope is a series of simple techniques to get around problems that at first sight might seem impossible. I like to say that everything is possible given a bit of thought*.
This technique is for when you need to place a background-image more than 100% to the right of the page.
For years designers have overlaid labels onto input fields in order to save screen real-estate. As front-end developers we implement this using absolute positioning and event handlers to move the label offscreen once the user has focused into the field. User focuses; label disappears.
The placeholder attribute was introduced in HTML5 and has since been misused in order to replicate the functionality described above. Let me set this out very clearly before we move on, the placeholder attribute IS NOT a replacement for a label.
Named anchors have been around since HTML was created and allowed you to link to a different part of a page. They can be referenced by external page by using a hash then the identifier after the URL
A while ago I wrote ‘It’s not HTML5! But that’s ok’ and then I finished a web standards version of The Guardian’s interactive in order to prove they do not require Flash. So when I saw I had been mentioned on The Guardian website’s technology section I was excited!
Web 2.0, AJAX and now HTML5 – all buzz words that have got non-developers a little bit more excited about web development and me using a lot more /facepalm.
As a developer you know what these buzzwords mean and can read between the lines when asked for an HTML5 site. They don’t really want a site full of offline-storage, data-* attributes, video and audio elements but you can give them one that is progressively enhanced and standards compliant.
The HTML 5 specification includes a web storage API for data storage in web clients. It means we can store large amounts of data, client-side, to read and write to as we like without causing the site to slow down (when compared to using cookies).
A DTD (document type definition) tells the browser what version of (X)HTML you are coding your web page in. Standards compliant pages must contain a DTD as the first item on the page otherwise it will not validate. Which one should you use?
In this series of articles I have described how to remove the deprecated attributes in HTML and replicate the styles using CSS. The first part looked at hspace and vspace, type and border. Part two described how to replicate link, alink and vlink, size, noshade and clear. In this final part I will be mopping up width, height, bgcolor and align.