The Gatsby team shipped an update to its source plugin for WordPress, graduating it to a beta release. The new version brings a new set of features to Gatsby’s headless WordPress configuration, which brings together WPGraphQL and WPGatsby to power a Gatsby front-end that pulls in data from WordPress.
It’s always notable when the world biggest CSS framework goes up a major version (it’s in alpha now).
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things.
Let’s answer that that question, and while we’re at it, make Vue reactivity work with localStorage.… Read article “How to Make localStorage Reactive in Vue”
What would be great is for users to immediately start using the plugin once it’s installed but have access to helpful tips while they are actively using … Read article “Adding a Custom Welcome Guide to the WordPress Block Editor”
It’s useful when DevTools tells you that a declaration is invalid. For example, colr: red; isn’t valid because colr isn’t a valid property. Likewise color: rd; isn’t valid because rd isn’t a valid value. For the most part, a browser’s DevTools shows the declaration as crossed out with a warning () icon. It would be nice if they went a step further to tell you which thing was wrong (or both) and suggest likely fixes, but hey, I don’t wanna … Read article “Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools”
I’ve got an article in there: When frontend means full stack. I’ll probably someday port it over here and perhaps add some more context (there were some constraints for print) but I love how it turned … Read article “Increment Issue 13: Frontend”
Apple is well-known for the sleek animations on their product pages. For example, as you scroll down the page products may slide into view, MacBooks fold open and iPhones spin, all while showing off the hardware, demonstrating the software and telling interactive stories of how the products are used.… Read article “Let’s Make One of Those Fancy Scrolling Animations Used on Apple Product Pages”
In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that comes from literally putting pieces of lead between lines of type.
I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device I needed with pure CSS, and they looked great, but there was a problem: the devices it offered were not responsive (i.e. they couldn’t … Read article “Turning a Fixed-Size Object into a Responsive Element”