Published on CSS Tricks
Read it on CSS-Tricks
Recently there has been a proliferation of demos using the CSS property shape-outside to create interesting and unusual text and layout effects. (Here’s one example by Mandy Michael)
Read it on Originally published on Codepen
In my previous article, Progressive Web Apps: An Introduction, I wrote about the key technologies involved with building a PWA and how to get started with them. In this post I’m going to tell you about my experience of building a PWA with Gatsby, a static site generator.
Read it on Originally published on ournameismud.co.uk
Last Wednesday I had the honour of presenting a new talk at Bristol JS meetup group, alongside veteran speaker, JS whizz and web audio pioneer (also a friend of mine!) Ruth John. Ruth gave a amazing talk on Web Workers and Worklets – complete with lemmings and lots of demos, which made me excited to learn more about CSS Houdini and the CSS Paint API.
Read more
If you’re in the business of building websites, you may have increasingly heard people talking about Progressive Web Apps (PWAs). Developed by Google, PWAs have all the advantages of the web when it comes to user engagement, coupled with the speed and reliability users can expect from a native app.
Read it on Originally published on ournameismud.co.uk
I saw a tweet the other day from Christian Heilmann of Microsoft (formerly of Mozilla), a big name in the web industry and tech conference circuit:
Read more
As this is a brand new blog, I want to highlight some of the people in web development who have inspired me and whose articles (and writing style) I love.
Read more
I’ve been playing around with CSS variables (or custom properties) quite a lot recently and thought I’d share a few tips as I develop a practical strategy for integrating them into my workflow.
Read it on Originally published on Codepen
In case you haven’t heard about it, Gatsby is the latest hot thing in static site generators. While many static site generators (SSGs) use templating languages like Handlebars or Mustache, Gatsby uses React, helping contribute to its “blazing fast” claim.
Read more
I found myself recently building a layout in CSS Grid that would have previously needed JavaScript in order to work. It’s a layout based on equal sized square grid cells, where grid items could span one or two cells on the row and/or column axis. In other words, the grid cells needed to maintain an aspect ratio (1:1 in this case), but the actual grid items did not necessarily, something like this:
Read it on Originally published on Codepen
One of the things that can put people off trying out CSS Grid is there’s so much choice when it comes to defining your grid layout and placing your content, so it can be hard to know until you’ve been using it a while which is going to to be the best option for a particular layout. It’s only recently that I got around to fully appreciating the power of minmax() and how it can be such a huge helper when coding many of the layouts I’m required to build, so I’d like to share one way in which it’s been beneficial to me.
Read it on Originally published on Codepen
This week I’ve had a couple of scenarios where I’ve needed to build a hero section with a full-width image, a large heading and a translucent sidebar overlaying the image – where the sidebar bleeds to the edge of the viewport but (crucially) the content of the sidebar aligns to what I like to call the “wrapper” grid columns – i.e. the columns of the grid where we actually want to place our content. (I have a whole other post almost written on this!)
Read it on Originally published on Codepen