Link Category

April 10, 2019

Under-Engineered Toggles

Toggles. Switches. Whatever you want to call them, they’ve been with us for some time and have been a dominant a staple for many form interfaces. They’re even baked right into many CSS frameworks, including Bootstrap and Foundation.

It’s easy to think of them in binary terms: on and off. Off and on. Click to change the state and call it a day, right? I mean, it’s just a checkbox with a styled visual representation.

Well, Adrian Roselli shows … Read article

The post Under-Engineered Toggles appeared first on CSS-Tricks.

April 5, 2019

Revisiting the Rendering Tier

Have you ever created a well-intentioned, thoughtful design system only to watch it grow into an ever-increasing and scary codebase? I’ve been working in sort of the opposite direction, inheriting the scary codebase and trying to create a thoughtful system from it.

Here’s Alex Sanders on the topic, explaining how his team at The Guardian has tackled the task of creating design systems while combating complexity:

Systems that try to contain complexity over long periods of time by convention

Read article

The post Revisiting the Rendering Tier appeared first on CSS-Tricks.

April 4, 2019

A Couple of New Wufoo Tips

(This is a sponsored post.)

High fives to Wufoo, our long-time sponsor here on CSS-Tricks. It’s powered the vast majority of forms I’ve built over the past decade. If you’ve never used it or heard of it: it’s a form builder. It makes the arduous task of implementing forms trivially easy. Building a form on Wufoo means you’ll get a form that does everything right UX-wise, gives you full design control, integrates with anything, and that you … Read article

The post A Couple of New Wufoo Tips appeared first on CSS-Tricks.

April 3, 2019

Responsible JavaScript

We just made a note about this article by Jeremy Wagner in our newsletter but it’s so good that I think it’s worth linking to again as Jeremy writes about how our obsession with JavaScript can lead to accessibility and performance issues:

What we tend to forget is that the environment websites and web apps occupy is one and the same. Both are subject to the same environmental pressures that the large gradient of networks and devices impose. Those constraints

Read article

The post Responsible JavaScript appeared first on CSS-Tricks.

April 2, 2019

Who has the fastest website in F1?

Jake Archibald looks at the websites of Formula One race teams and rates their performance, carefully examining their images and digging into the waterfall of assets for each site:

Trying to use a site while on poor connectivity is massively frustrating, so anything sites can do to make it less of a problem is a huge win.

In terms of the device, if you look outside the tech bubble, a lot of users can’t or don’t want to pay for

Read article

The post Who has the fastest website in F1? appeared first on CSS-Tricks.

April 1, 2019

KV Storage

localStorage is…

  • Good! It’s an incredibly easy API to use.
localStorage.setItem('name', 'Chris'); let name = localStorage.getItem('name');
  • Bad! Philip Walton explains why:
  • localStorage is a synchronous API that blocks the main thread, and any time you access it you potentially prevent your page from being interactive.

    Chrome has an idea (here’s the proposal) for reinventing it. Ultimately the API is even simpler:

    import { storage } from 'std:kv-storage';
    storage.set('name', 'Chris');
    storage.get('name');

    But! It’s async, so I can use awaitRead article

    The post KV Storage appeared first on CSS-Tricks.

    April 1, 2019

    A historical look at lowercase defaultstatus

    Browsers, thank heavens, take backward compatibility seriously.

    Ancient websites generally work just fine on modern browsers. There is a way higher chance that a website is broken because of problems with hosting, missing or altered assets, or server changes than there is with changes in how browsers deal with HTML, CSS, JavaScript, another other native web technologies.

    In recent memory, #SmooshGate was all about a new JavaScript feature that conflicted with a once-popular JavaScript library. Short story, JavaScript has a … Read article

    The post A historical look at lowercase defaultstatus appeared first on CSS-Tricks.

    March 29, 2019

    Scroll-Linked Animations

    You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right now. You watch the scroll position via a DOM event and alter an element’s styling based on that position. Or, probably better if you can, use IntersectionObserver. We just blogged about all this.

    Now there is a new (unofficial) Read article

    The post Scroll-Linked Animations appeared first on CSS-Tricks.

    March 29, 2019

    You probably don’t need input type=“number”

    Brad Frost wrote about a recent experience with a website that used <input type="number">:

    Last week I got a call from my bank regarding a wire transfer I had just scheduled. The customer support guy had me repeat everything back to him because there seemed to be a problem with the information. “Hmmmm, everything you said is right right except the last 3 digits of the account number.”

    He had me resubmit the wire transfer form. When I exited

    Read article

    The post You probably don’t need input type=“number” appeared first on CSS-Tricks.

    March 28, 2019

    Powers of Two

    Refactoring is one of those words that evokes fear in the eyes of many folks, from developers to product owners and everyone in between. It may as well be a four-letter word in many ways. It’s also something that we talk about quite a bit around here because, like books on the topic, where to start with one, and the impact of letting technical debt pile up.

    Ben Rady has thoughts on refactoring as well, but in … Read article

    The post Powers of Two appeared first on CSS-Tricks.