Table of Contents with IntersectionObserver

If you have a table of contents on a long-scrolling page, thanks to, say, position: fixed; or position: sticky;, the IntersectionObserver API in JavaScript is the perfect companion to highlight items in the table of contents when corresponding content is in view. Ben Frain has a post all about thi..

Chapter 7: Standards

It was the year 1994 that the web came out of the shadow of academia and onto the everyone’s screens. In particular, it was the second half of the second week of December 1994 that capped off the year with three eventful days. Members of the World Wide Web Consortium huddled around a table at MIT o..

How I Built my SaaS MVP With Fauna ($150 in revenue so far)

Are you a beginner coder trying to implement to launch your MVP? I’ve just finished my MVP of ReviewBolt.com, a competitor analysis tool. And it’s built using React + Fauna + Next JS. It’s my first paid SaaS tool so earning $150 is a big accomplishment for me. In this post you’ll see why I chose Fa..

The WordPress Evolution Toward Full-Site Editing

The block editor was a game-changer for WordPress. The idea that we can create blocks of content and arrange them in a component-like fashion means we have a lot of flexibility in how we create content, as well a bunch of opportunities to develop new types of modular content. But there’s so much mo..

Too Many SVGs Clogging Up Your Markup? Try `use`.

Recently, I had to make a web page displaying a bunch of SVG graphs for an analytics dashboard. I used a bunch of , and elements on each graph to visualize certain metrics. This works and renders just fine, but results in a bloated DOM tree, where each shape is represented as se..

Web Frameworks: Why You Don’t Always Need Them

Richard MacManus explaining Daniel Kehoe’s approach to building websites, which he calls “Stackless”: There are three key web technologies underpinning Kehoe’s approach: ES6 Modules: JavaScript ES6 can support import modules, which are also supported by browsers. Module CDNs: JavaScript modules ca..

Firebase Crash Course

This article is going to help you, dear front-end developer, understand all that is Firebase. We’re going to cover lots of details about what Firebase is, why it can be useful to you, and show examples of how. But first, I think you’ll enjoy a little story about how Firebase came to be. Eight years..

AutomateWoo Brings Automated Communications to Bookings

AutomateWoo is this handy extension for WooCommerce that adds triggers actions based on your online store’s activity. Someone abandoned their cart? Remind them by email. Someone made a purchase? Ask them to leave a review or follow up to see how they’re liking the product so far. This sort of autom..

Web Components Are Easier Than You Think

When I’d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I’m from 1950), but it always seemed complicated and excessive. A thousand lines of JavaScript to save four lines of HTML. The..

CSS-Tricks Chronicle XXXIX

I’ve been lucky enough to be a guest on some podcasts and at some events, so I thought I’d do a quick little round-up here! These Chronicle posts are just that: an opportunity to share some off-site stiff that I’ve been up to. This time, it’s all different podcasts. Web Rush Episode 122: Modern We..