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.
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. …
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.
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). …
Back when I started web development a loading spinner used to be something that I’d use an animated
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.
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