The Rise of the Butt-less Website

It seems like all the cool kids have divided themselves into two cliques: the Headless CMS crowd on one side and the Static Site Generator crowd on the other. While I admit those are pretty cool team names, I found myself unable to pick a side. To paraphrase Groucho Marx, “I don’t care to belong to any club that will have me as a member.” For my own simple blog (which is embarrassingly empty at the moment), a static site generator could be a great fit. Systems like Hugo and Jekyll have both been highly recommended by developers I love and trust and look great at first glance, but I… Read More

Continue Reading

Using SVG to Create a Duotone Effect on Images

Anything is possible with SVG, right?! After a year of collaborating with some great designers and experimenting to achieve some pretty cool visual effects, it is beginning to feel like it is. A quick search of « SVG » on CodePen will attest to this. From lettering, shapes, sprites, animations, and image manipulation, everything is better with the aid of SVG. So when a new visual trend hit the web last year, it was no surprise that SVG came to the rescue to allow us to implement it. The spark of a trend Creatives everywhere welcomed the 2016 new year with the spark of a colorizing technique popularized by Spotify’s 2015 Year… Read More

Continue Reading

Comparing Novel vs. Tried and True Image Formats

Popular image file formats such as JPG, PNG, and GIF have been around for a long time. They are relatively efficient and web developers have introduced many optimization solutions to further compress their size. However, the era of JPGs, PNGs, and GIFs may be coming to an end as newer, more efficient image file formats aim to take their place. We’re going to explore these newer file formats in this post along with an analysis of how they stack up against one another and the previous formats. We will also cover optimization techniques to improve the delivery of your images. Why do we need new image formats at all? Aside… Read More

Continue Reading

When You Just Don’t Trust a Tab

Do we need a word for when a browser tab has sat too long and you just don’t trust thing are going to work as you expect them do when you come back?I tweeted that the other day and apparently other people had them feels. It’s that feeling where you just know your session isn’t valid anymore and if you actually try to do anything that requires you to be logged in, it ain’t gonna work. It’s particularly uncomfortable if you were actually trying to do something and now you’re unsure if it’s done or saved. As for that name… here’s some good ones from the thread: Schrödinger’s tab Crusty… Read More

Continue Reading

Keeping Parent Visible While Child in :focus

Say we have a . We only want this div to be visible when it’s hovered, so: div:hover { opacity: 1; } We need focus styles as well, for accessibility, so: div:hover, div:focus { opacity: 1; } But div’s can’t be focused on their own, so we’ll need: There is content in this div. Not just text, but links as well. This little piggy went to market. Go to market This is where it gets tricky. As soon as focus moves from the div to the anchor link inside it, the div is no longer in focus, which leads to this weird and potentially confusing situation: In this example, :hover… Read More

Continue Reading

Calendar with CSS Grid

Here’s a nifty post by Jonathan Snook where he walks us through how to make a calendar interface with CSS Grid and there’s a lot of tricks in here that are worth digging into a little bit more, particularly where Jonathan uses grid-auto-flow: dense which will let Grid take the wheels of a design and try to fill up as much of the allotted space as possible. As I was digging around, I found a post on Grid’s auto-placement algorithm by Ian Yates which kinda fleshes things out more succinctly. Might come in handy. Oh, and we have an example of a Grid-based calendar in our ongoing collection of CSS… Read More

Continue Reading

The User Experience of Design Systems

Rune Madsen jotted down his notes from a talk he gave at UX Camp Copenhagen back in May all about design systems and also, well, the potential problems that can arise when building a single unifying system: When you start a redesign process for a company, it’s very easy to briefly look at all their products (apps, websites, newsletters, etc) and first of all make fun of how bad it all looks, and then design this one single design system for everything. However, once you start diving into why those decisions were made, they often reveal local knowledge that your design system doesn’t solve. I see this so often where… Read More

Continue Reading

On Building Features

We’ve released a couple of features recently at CodePen that I played a role in. It got me thinking a little bit about the process of that. It’s always unique, and for a lot of reasons. Let’s explore that. What was the spark? Features start with ideas. Was it a big bright spark that happened all the sudden? Was it a tiny spark that happened a long time ago, but has slowly grown bright? Documenting ideas can help a lot. We talked about that on CodePen Radio recently. If you actually write down ideas (both your own and as requested by users), it can clarify and contextualize them. Documenting all… Read More

Continue Reading

The youth these days couldn’t possibly understand the abstraction of a floppy disk for a save icon.

People have been kicking that ol’ chestnut around for years. Do the youngsters have no idea what it is?, we ask. What happens when all the things we based our icons on don’t exist anymore?, we wonder. Do we need a new one?, and we experiment. Olivia Walch’s skewering is hilarious: Comic about the kids pic.twitter.com/LneN1Ff32u — Olivia (@oliviawalch) December 16, 2017 Baby bear: Make a button and put the word save in it. The youth these days couldn’t possibly understand the abstraction of a floppy disk for a save icon. is a post from CSS-Tricks

Continue Reading

Is jQuery still relevant?

Remy Sharp: I’ve been playing with BigQuery and querying HTTP Archive‘s dataset … I’ve queried the HTTP Archive and included the top 20 [JavaScript libraries] … jQuery accounts for a massive 83% of libraries found on the web sites. This corroborates other research, like W3Techs: jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites. And BuiltWith that shows it at 88.5% of the top 1,000,000 sites they look at. Even without considering what jQuery does, the amount of people that already know it, and the heaps of resources out there around it, yes, jQuery is still relevant. People haven’t… Read More

Continue Reading

From Local Server to Live Site

(This is a sponsored post.) With the right tools and some simple software, your WordPress development workflow can be downright delightful (instead of difficult)! That’s why we built Local by Flywheel, our free local development application. Now, we’ve launched Local Connect, a sweet feature embedded in the app that gives you push-pull functionality with Flywheel, our WordPress hosting platform. There’s no need to mess with downloading, uploading, and exporting. Pair up these platforms to push local sites live with a few quick clicks, pull down sites for offline editing, and streamline your tools for a simplified process! Download Local for free here and get started! Direct Link to Article —… Read More

Continue Reading

Accessibility Testing Tools

There is a sentiment that accessibility isn’t a checklist, meaning that if you’re really trying to make a site accessible, you don’t just get to check some things off a list and call it perfect. The list may be imperfect and worse, it takes the user out of the equation, so it is said. Karl Groves once argued against this: I’d argue that a well-documented process which includes checklist-based evaluations are better at ensuring that all users’ needs are met, not just some users. I mention this because you might consider an automated accessibility testing tool another form of a checklist. They have rules built into them, and they test… Read More

Continue Reading

Evolution of img: Gif without the GIF

Colin Bendell writes about a new and particularly weird addition to Safari Technology Preview in this excellent post about the evolution of animated images on the web. He explains how we can now add an MP4 file directly to the source of an img tag. That would look something like this: The idea is that that code would render an image with a looping video inside. As Colin describes, this provides a host of performance benefits: Animated GIFs are a hack. […] But they have become an awesome tool for cinemagraphs, memes, and creative expression. All of this awesomeness, however, comes at a cost. Animated GIFs are terrible for web… Read More

Continue Reading

Making your web app work offline, Part 2: The Implementation

This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let’s extend it to support offline. Article Series: The Setup The Implementation (you are here!) Making an `offline.htm` file Next, lets add some code to detect when the application is offline, and if so, redirect our users to a (cached) `offline.htm`. But wait, if the service worker file is generated automatically, how do we go about adding in our own code, manually? Well, we can add an entry for importScripts, which tells our service worker to import the scripts we specify. It… Read More

Continue Reading

Making your web app work offline, Part 1: The Setup

This two-part series is a gentle introduction to offline web development. Getting a web application to do something while offline is surprisingly tricky, requiring a lot of things to be in place and functioning correctly. We’re going to cover all of these pieces from a high level, with working examples. This post is an overview, but there are plenty of more-detailed resources listed throughout. Article Series: The Setup (you are here!) The Implementation (posts tomorrow, stay tuned) Basic approach I’ll be making heavy use of JavaScript’s async/await syntax. It’s supported in all major browsers and Node, and greatly simplifies Promise-based code. The link above explains async well, but in a… Read More

Continue Reading

Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. This article will focus on genuine CSS tricks that would be easy to drop into any project without having to touch the DOM or use JavaScript. The methods covered here will follow these rules Single element (no helper divs, but psuedo-elements are allowed) CSS only (no JavaScript) Works for any size (not restricted to a specific width, height, or aspect ratio) Supports transparent backgrounds Smooth and performant transition I proposed this challenge in the Animation at Work Slack and again on Twitter.… Read More

Continue Reading