Category: Article

Customising Cross-Browser Range Inputs with CSS and JavaScript

The following is a guest post by Steven Estrella. Steven shared with me a technique for creating customized range inputs by writing a little JavaScript atop some of the techniques explored here by Daniel Stern and others. I invited Steven to explain his approach.Last year, Daniel Stern wrote a very useful article to...

How To Do Knockout Text

There are a couple of ways to do knockout text (text that appears cut out, such that you can see a background behind it) on the web. There is one fairly new way that has pretty decent browser support that is pretty interesting. But let’s cover all the ground.Just Photoshop It Up Like anything else, you can just...

Discussion Around Ad Blocking

The discussion has heated up with the drop of iOS 9 and its ability to run apps that block ads. That was just the spark for the conversation, as ad blocking isn’t a new thing. Desktop browsers have had extensions that can block ads for a long time. There are ad blockers that work for Android. Not a new concept, j...

How I Live-Coded My Most-Hearted Pen

The following is a guest post by Ana Tudor. If you’ve seen Ana’s work, perhaps you know that she uses mathematics and code together to make art. The finished pieces look like they take ages to make. But as I witness with my own eyes, Ana can think through what it takes to build something like this while doi...

An Intro to CSS Testing with SonarQube

The following is a guest post by David Racodon. David contributes to this open source code quality tool he’ll tell you all about. I hadn’t heard of it until now, but I know there are lots of folks out there interested in tooling to help keep their CSS in check. This is a bit like CSS lint but formalized int...

The Importance of Context-Shifting in UX Patterns

Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent...

Office Hours, Now With Themed Sessions

Our brand new Office Hours has been going great! We’ve gotten to meet some of you and help you out of some problems. We’ve learned, though, that many of you just like to listen, talk shop, and don’t necessarily have a problem you need help with right this second. So, we’re going to start having...

Poll Results for Managing Styles with JavaScript

In our last poll, we asked “What’s your take on managing styles entirely in JavaScript?”. This is a concept we wrote about in depth here and recently talked about in a panel on ShopTalk. Over 23,000 people voted. See the Pen Crazy Pie Chart by Chris Coyier (@chriscoyier) on CodePen. The largest cont...

Emoji Toggles!

Fun Friday thing! Natalya on CodePen made a super fun Pen. You know how clicking a <label> with a for attribute that matches a checkbox input, it will toggle the input to checked or unchecked? That, combined with the :checked selector in CSS and the sibling combinator forms The Checkbox Hack, and you can use tha...

Prefetching, preloading, prebrowsing

When we talk about front end performance we think things like concatenation, minification, caching, or gzipping assets on the server so that the page loads faster and users can complete their goals as quickly as possible. Resource prefetching is another performance enhancing technique. We can use it to tell the brows...