A visual overview of web skills
Read NoteA wonderfully easy to navigate list of resources, tutorials, and guides for every stage of the web dev …
theAdhocracy
A wonderfully easy to navigate list of resources, tutorials, and guides for every stage of the web dev …
An excellent overview of (most of) the unit options you can use in CSS Grid columns and rows, with examples. (No …
An in-depth guide to SVG filters, including colour manipulation, contrast, brightness, sharpening, blur, blend modes, and distortion. Very useful when trying to work out which combination of filters …
Josh keeps publishing articles that are both interesting to read and specifically useful to problems that I'm currently working on, but this time his article became the inspiration to solve a problem …
A look at how I've been using Git aliases to remove repetitive tasks, automate workflows, and generally optimise working on the command line. They're small tips, but they've had a big impact on me.
Reddit has once again directed me towards a very interesting online resource: Interneting is …
Migrating assets to a new CMS can be a complete pain, but working out which files go with each page or article on a website doesn't have to be a nightmare if you start with a solid foundation. For me, that means tightly coupling my folder structure on the server with my content structure on the website, a workflow that Craft is particularly nifty at automating.
Craft CMS has the ability to accept environment variables as well as aliases. It can be worthwhile understanding how these two seemingly similar concepts differ, and when you might want to use one over the other.
An excellent collection of articles, tutorials, and advice on modern web development challenges. From PWAs to accessibility to caching, there's a lot of information …
A solid introduction to the Jamstack, including full build tutorials for an initial SSG setup with Eleventy and Netlify, integrations with the News API service and Open Weather, geolocation checks …
Having hooked up Algolia with my Gatsby build pipeline and populated a search index from my Craft CMS API, the next step was the build a frontend UI to enable users to actually query my posts. It turned out to be a pretty simple process.
IndieWebify.Me is the main service I've been using to get my site set up with IndieWeb technologies. It's a great, step-by-step tutorial on how to get involved and helps you easily test your …
I have to admit: I didn't know what an accessibility statement was until I read Ethan's post 🙋♂️ That's not great. Now I do, so hopefully, in the near future, I'll get around to adding …
Customising HTML lists often means sacrificing standard browser typesetting bonuses, like hanging indents. But with a little bit of modern CSS, you can get them back again, whilst still getting to use custom counters – like emoji 🚀
Great overview of how to deal with webmentions on a NextJS site. Should be applicable to other React SSGs like Gatsby. Useful …
Josh outlines the various steps required to get a dark mode theme working properly in Gatsby. I've been wondering about adding a dark mode at some point and, honestly, I'm amazed by the number of …
Very informative beginner's guide to testing React websites using Jest and the React Testing …
A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type …
Where has this article been my whole life! Andy's posts are often brilliant, but this an absolute gold mine of information, from ideal character lengths to clever type-setting tricks. And I thought I …
A wonderful overview of how to use keyframe animation in CSS, including some very useful tips on animation state and creating meaningful animation APIs using custom properties and CSS math …
My new PC is up and running and starting to be "just right" (we'll get to further details later, I promise), so one of the big "new" things I've got for the new year is a subscription to Adobe CC - …
For about two years now I've become increasingly annoyed at my PC screen. The left-most edge has been "clipped", missing about 2mm across all programs. I'm not sure when the issue first occurred, I …
A few weeks ago I was lucky enough to spend a long weekend in Dartmoor. We ended up visiting Wistman's Wood for much of the first afternoon, which was so captivating we would have definitely spent …
I've wanted to diversify the content on here for a while and give myself the green light to write more personal stuff. To that end, I've created a new journal section. I hope people enjoy it, but that really isn't the point 😉
Static sites don't make search functionality easy, but luckily there are some excellent services that do. I've been messing around with Algolia and finally have it working with Craft and Gatsby the way I want it... on the backend, at least.
Two months after Disney+ launched I'm still a huge fan of the content catalogue but swing between feeling bemused and exasperated at the actual experience of using the service.
Seth has put together what he calls …
The idea of a great divide in front-end development resonated with me. I'm worried about how the erosion of certain skills could lead to a less inclusive, accessible web, for both users and developers. On the other hand, there are some massive advantages to our new tools. It's a double-edged sword.
Another great overview of how to use the `react-hooks` extension for the Testing Library suite, with some more complex examples than many other …
What do you do when a website has loaded but the content is still being fetched from an API? One answer is to fill the page with animated placeholders, creating a skeleton of what the user can expect, with a dash of CSS animation to let them know that something's still going on behind the scenes.