Druct

How to use CSS Scroll Snap

Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is the edges of those children that matter, not some fixed snapping distance.

I like

Emergency Website Kit

Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely important for websites that contain critical information for public safety. As Max writes:

In cases of emergency, many organizations need a quick way to publish critical information. But exi..

Creating an Editable Site with Google Sheets and Eleventy

Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It’s a tool that turns a Google Sheet into an API, that you as a developer can hit for data when building a website. In that last article, we used that API on the client side, meaning JavaScript needed to run on eve..

Maintaining Performance

Real talk from Dave:

I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals… somehow goofed and added 33 SECONDS to their page load.

This stuff is hard even when..

How Aaron Osteraas Made the Content to Code Career Transition

As Aaron Osteraas can tell you, the path between discovering what you want to do for a living and actually doing it is rarely linear.

Now a Software Engineer at Tigerspike, a digital services company headquartered in Sydney, Aaron’s journey toward becoming a develop..

Consistent Backends and UX: How Do New Algorithms Help?

Article Series

Get Static

In this piece, Eric Meyer argues that performance is more important than ever right now — especially for websites that contain critical information for the public:

If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static. I’m thinking here of sites for places like health departments (and pretty much all ..

ADA Compliance Is Mandatory for Digital Agencies, Here’s How It’s Done

This article was created in partnership with Inbound Junction. Thank you for supporting the partners who make SitePoint possible.

Based on web accessibility data, the ADA compliance-re..

How to Repeat Text as a Background Image in CSS Using element()

There’s a design trend I’ve seen popping up all over the place. Maybe you’ve seen it too. It’s this sort of thing where text is repeated over and over. A good example is the price comparison website, GoCompare, who used it in a major multi-channel advertising campaign.

Nike has used it as well, like in this advertisement:

Diggin' that orange! (

Add Beautiful Images with the Unsplash API

Perhaps you know Unsplash? I'd wager it's the most popular stock photography site out there for two big reasons:

Here's something you might not know though: Unsplash has an API, ..

Value Bubbles for Range Inputs

HTML5 range inputs, in supported browsers and by design, don't show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you'll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers above the range input.

The post Value Bubbles for Range Inputs

Build a Node.js CRUD App Using React and FeathersJS

Building a modern project requires splitting the logic into front-end and back-end code. The reason behind this move is to promote code re-usability. For example, we may need to build a native mobile application that accesses the back-end API. Or we may be developing a module that will be pa..

How to Animate Text with SVG and CSS

The other day I was helping my pal Jez work Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?

Like this:

CodePen Embed Fallback

Neat, huh? To build this thing I knew we could use SVG for the text and ..

CSS Viewport Units

Deep dive from Ahmad. I like the coverage of vmin and vmax, which I think I don't reach for as often as I should.

I'm thinking that if you are doing something highly directional (e.g. a full bleed trick), then directly using vw is necessary. On the other hand, if you're doing a calculation where t..