Skip to content

Diary of a front end developer

Welcome to an opinionated exploration of front end web development through the eyes of a developer who’s been building since the 90s. It contains live experiments (via CodePen), development set-up, guides, and industry musing. Covering all aspects of building for modern web, including code, user experience (UX), accessibility (a11y) and design, this is the diary of a front end developer.

CSSJSDesignAnimationMobile

Latest posts

Linked radio buttons with CSS

Demo: codepen.io/shellbryson/pen/KWKyXN It’s a pattern we see fairly often across the web: a series of ‘buttons’ connected by lines to indicate procession, ratings or steps. The trick is to make it as flexible and accessible as possible, and this is perfectly achievable without JavaScript. Using regular form elements as our base, we can use a little …

Continue reading Linked radio buttons with CSS

Reactionary

Another crazy week as we get into the final few days before launch of a big new financial site at the studio. Meanwhile, I’ve managed to calve out a little time to play with React. I still have an issue with JSX and inlined CSS. It feels like a backwards step, mixing structure, JS and …

Continue reading Reactionary

IPv6

Manic week at work as we get closer to the release on a big financial site (hence the severe lack of updates here). Took some time out tonight to do some housekeeping. Finally got around to adding IPv6 after reading various press regarding the increasing scarcity of IPv4 addresses. It’s a little more fuss to …

Continue reading IPv6

Magic social icons with CSS

This is a simple trick for automatically displaying icons (such as social icons) without any script. Using a CSS wildcard selector, we check the href of our link and display a pseudo-element with matching content. a[href*=”github.com”]::before { content: “\f113”; } The above example uses a Font-Awesome glyph as content, but this could easily be replace with an …

Continue reading Magic social icons with CSS

Crunch

There’s nothing like the crunch at the end of a project to find out which processes are really working for you. Agile is a great methodology for approaching a project, but it can easily (and frequently, in my experience) lead to “ticket overload”. This is especially apparent at the end of projects where throughput of …

Continue reading Crunch

Breakpoints

A rolling discussion tonight regarding media queries (breakpoints) and the units to use. em, px, rem? This (zellwk.com/blog/media-query-units) article suggests that em behaves the most consistently across all browsers, but then digging into the comments, there’s a counter argument for px. I like to use em/rem for elements that are truly relatively scaled. So things like …

Continue reading Breakpoints

Live editing

Live editing of themes inside WordPress admin is the scariest thing (but, y’know, awesome). Could so easily fry a site, and it scares me even more to think the number of custom themes must out there in the hands of clients with this feature enabled. Carnage. So, cough, throwing caution to the wind, made a couple …

Continue reading Live editing