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