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

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

Project Sheru, progress

  Making interesting progress with the theme for this site (Pattern Library and WordPress theme). After an intense weekend, the 3D-menu concept has come together better than expected. Some glitchy problems in Safari with the first try, but got it working nicely now.

Continue reading Project Sheru, progress

Battery Status API experiment

The JavaScript Battery Status API offers some interesting additional functionality that we can leverage for UI elements. Browser support is getting better—at the time of writing (Feb, 2017), Chrome, FireFox and Opera are good to go, but leaves glaring omissions of Safari/iOS. This little experiment creates a simple battery UI element, with its background an …

Continue reading Battery Status API experiment

Responsive navigation UX experiment

Mobile navigation frequently consists of a burger menu placed in the top right of the viewport. But consider this: a user with a large phone using just one hand, can their thumb stretch that far? This is particular issue on the larger format phones such as an iPhone 7 Plus. Some of the UX niggles in mobile navigation: Awkward …

Continue reading Responsive navigation UX experiment

Visible password toggle with CSS and JS

Password fields usually mask their content, but is that really good UX? UX challenges of password fields User ‘loses their place’ forcing them to start entering the password again. Password hard to type or complex, no visual guide to text being entered. Difficulty in paste a password from elsewhere. Difficult to visually check validity of password before …

Continue reading Visible password toggle with CSS and JS

Responsive modal dialogs

A super simple responsive modal window with minimal JavaScript. Mobile friendly (mobile first, natch!), fills the viewport on mobiles Keyboard navigable Marked up for accessibility Masks the content on desktop Particular attention here on the accessible aspects of modal markup: aria-labeledby, aria-describedby and the toggling of aria-hidden on show/hide. Basic modal markup with these aria properties: …

Continue reading Responsive modal dialogs

Using flex to change element display order

Here’s a dead simple trick for creating alternating boxes (flipping the order of element display) in CSS with display: flex. Each pair of boxes is wrapped in a div with flex applied. We can then select every odd wrapper and change the order of the content. .inner:nth-child(odd) { .box–box1 { order: 1; } } See the it …

Continue reading Using flex to change element display order

Scaling content with CSS vw units

While experimenting with a new Pattern Library based workflow and I put together something to play with scaling content based on css vw units (viewport width) and full-page splashy design. All it takes is… font-size: 10vw; …and the browser will calculate the size on the fly. There are 4 related properties, vh, vw, vmin, and vmax which can …

Continue reading Scaling content with CSS vw units

Mobile-first responsive tables with CSS

Here’s a rehash of an experiment I did a while back with responsive tables. The goal is to make style a table ‘truly’ mobile first, while maintaining semantic HTML. Update The initial demo was using min-width to handle the breakpoint which resulted in overly complicated CSS. This second demo reworks the CSS to use a max-width based breakpoint instead. …

Continue reading Mobile-first responsive tables with CSS

Project Sheru

Project Sheru: A Pattern Library based modern WordPress theme (and playpen). Truly mobile first (code, UX, UI) Truly responsive (natural visual breakpoints) Accessible (screen reading, WCAG AA+ and ADA) Modern development workflow (grunt + sass, handlebars patterns, clean theme) Prototyping via CodePen GitFlow on GibHub of WordPress theme and Pattern Library This project has been …

Continue reading Project Sheru