Pure CSS Rollover Image Carousel

April 22nd, 2014

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.

View the demo Read the rest of this entry »

Problem: Background image overlapping right-hand-side of the grid

November 22nd, 2013

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. Read the rest of this entry »

I love your style: Learning Ruby on Rails

October 24th, 2013

Having spent just over two years working as a front-end developer on Ruby on Rails projects I’ve become pretty handy with ERB, HAML & SASS but when it comes to looking further into the back-end stack I’ve been hesitant to do anything except look at the code and write the occasional simple helper for my views. I’ve had an idea for a while and I decided to bite the bullet and make it myself.

The site is I love your style. The idea is to be able to ask beauty or fashion questions directly to those people you admire, as an aside you can also ask the wider community. The grand vision is for it to be a Stack Overflow for beauty and fashion. Read the rest of this entry »

The placeholder attribute

August 22nd, 2013
Translations: French

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. Read the rest of this entry »

CSS opacity not working in iOS

August 16th, 2013

I was having a problem where adding a basic css opacity on an element wouldn’t work when viewing in iOS. Looked fine on desktop.

I didn’t come across a specific solution to my problem, but someone else had a similar thing when using opacity with transitions. Read the rest of this entry »

IE8 password input field displays square characters

August 2nd, 2013

Ever seen this when testing a website in IE8… Instead of the usual obfuscation using dots or stars, you see a square/rectangular symbol which usually shows up when the browser doesn’t have the entity available to display. The usual reason is that there is a custom font or webfont in use on the fields. Read the rest of this entry »

Fluid width squares in CSS

June 5th, 2013

It’s easy to make a perfect square in CSS – set an equal height and width and boom, you’re done. But what if you don’t always know the width of the square? For instance you’ve given the structures percentage widths to fit a fluid container.

No hacks, no javascript? Read the rest of this entry »

Click event handler iPhone: non-anchor elements

March 15th, 2013

I have a results table where each row is a form and the user continues by pressing the submit button for that result. At smaller widths I collapse the table, hide the submit button and add a click event handler to the tr – it works fine, up to a point.

A filter bar was added that uses AJAX to reorder and add to the results so now the DOM is being generated with JS. Usually you can use .on(event, selector, handler) to catch any generated elements, but this won’t work on iPhone or iPad*. Read the rest of this entry »

Goodbye 2012

December 19th, 2012

I wanted to do a round-up of things I’ve written in 2012, but quite pathetically that would give me a list of three, so I’ll add to that what I’ve been working on this year. Read the rest of this entry »

Same page references, or named anchors

August 22nd, 2012

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 Read the rest of this entry »

Autoplay is still bad for all users

May 13th, 2012

Just over three years ago I wrote an article called Autoplay is bad for all users. It was written a few months after WCAG 2 became a formal recommendation but before HTML5, particular the video element, had really gone into mass production.

Much, if not all, of that article still holds true today but there are a couple of points to add to it. Read the rest of this entry »

My responsive web development technique

May 5th, 2012

Responsive web development is a relatively new technique and one that I’ve been implementing for the last 9 months or so professionally. Many articles have been written about how you should create a responsive site and wanted to get mine out there too. Read the rest of this entry »

WAI-ARIA: A side project

November 27th, 2011

A new domain is born—wai-aria.punkchip.com—a place for me to keep all the great articles and links I found about ARIA. Read the rest of this entry »