13 June 2014

Five front-end links for Friday

A few links I found interesting this week.

13 May 2014

Highlight dates from selection to hover position

This would be useful on a calendar when selecting a range between two dates.

View the demo

9 May 2014

Recruiter email fails

I get a LOT of email from recruiters, this is a collection of the strangest:

Hedging their bets:

“We may or may not have spoken in the recent past.”

22 April 2014

Pure CSS Rollover Image Carousel

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

22 November 2013

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

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.

24 October 2013

I love your style: Learning Ruby on Rails

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.

22 August 2013

The placeholder attribute

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.

16 August 2013

CSS opacity not working in iOS

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.

2 August 2013

IE8 password input field displays square characters

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.

5 June 2013

Fluid width squares in CSS

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?

15 March 2013

Click event handler iPhone: non-anchor elements

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*.

19 December 2012

Goodbye 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.