Table from caniuse.com showing browser support for HTML accordion using detail/summary elements
Table from caniuse.com showing browser support for HTML accordion using detail/summary elements

I remember when I first came across Chris Coyer’s article; Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion.

Image for post
Image for post

Total madness. When I built my accessible JavaScipt accordion, Badger accordion back in 2017 it took ages. Now in 30 seconds, you can build an accessible accordion using just HTML. …


Image for post
Image for post

2018 what a year! I managed to do a ski season while working remotely doing web development work, spend 3 months travelling around USA & Canada, learned a load of new web dev skills, wrote some articles, moved back to England and landed myself an awesome job. If anyone cares (thanks for reading mum), here's what I did.

Digital Nomading for a ski season

Image for post
Image for post

In October of 2017 my girlfriend, Sarah and I moved to Whistler, Canada to spend the winter season in one of the worlds best ski resorts. Since I was 13 and spend my first week on the snow, I’ve always wanted to do a ski season. Before the snow started I worked remotely with the awesome Sonr.global team doing the frontend build for the initial site and product (it’s changed a bit since then but the foundation of what I did is still there). …


Image for post
Image for post

Back when I started web development a loading spinner used to be something that I’d use an animated .gif for.

Image for post
Image for post

Since CSS animations are now so well supported using an animated .gif for a loading spinner is now no longer necessary. The mighty Developer Jon Pearse, showed me how to make a CSS loading spinner so I thought I’d share his technique using a flexible SCSS mixin step by step. This spinner will work in all modern browsers as well as in IE10+. I am presuming here you have used CSS animations before for this tutorial.

Creating the CSS spinner markup

Our spinner is going to be a simple circle spinning around it’s own centre. The spinner markup is just a single div. Our spinner is going to be a pseudo element, ::before (you could use ::after as well) of our div. …

About

Stuart Nelson

Yorkshireman who’s ventured to Bath. Frontend developer; lover of Sass, JavaScript, web animations & skiing. Senior dev at @readyagency, Bath.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store