Change vs. Inertia

Recently, I’ve become more deeply aware of the inherent tension between change and inertia, as it applies to the evolution and use of web technologies. These forces have always been present and opposed to each other, but it seems to me that the side effects of these collisions are impacting web development more noticeably. On one hand, we’ve never seen more progress in the expansion of the array of web platform capabilities; the web is powerful and mature in ways … Read article

4y | CSS tricks
Optimizing Image Depth

Something I learned (or, I guess, re-learned) this year is how important it is to pay close attention to the bit depth of images. Way back in the day, we used to obsessively choose between 2-, 4-, or 8-bit color depth on our GIFs, because when lots of users were using dialup modems to surf the web, every kilobyte counted. Now that a huge number of us access the web via broadband, guess what? Every kilobyte still counts. Because … Read article “Optimizing Image Depth”

The post

4y | CSS tricks
What Makes CSS Hard To Master

Tim Severien:

I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let’s reflect on the language and find out what makes it hard.

Tim’s reasons CSS is hard (in my own words):

You can look at a matching Ruleset, and still not have the whole styling story. There might be multiple matching rulesets in disparate places, including in places that only apply conditionally, like within @media queries. Even

… Read article “What Mak

4y | CSS tricks
What’s Old is New

This year, I learned a lot about how “old” tricks can solve a lot of modern problems if you use the right tools. Following the growth of Jamstack-style development has been both a learning experience, while also a nostalgic one. It’s been amazing to see how you can power plain ol’ HTML, CSS, and JavaScript with the rise of headless CMSes, API-driven databases, e-commerce services, and modern frameworks. I feel like the biggest hurdle that all of the different framework &#

4y | CSS tricks
Three Ways to Distinguish a Site From the Norm

In an age where so much web design is already neat, clean, and simple, I can think of three ways to distinguish your site from the norm:

Stunning visuals that cannot be created in UI vector editors, like Figma and Sketch Beautifully-animated interactions that cannot be dreamt in the language of Stacks of Rectangles Typography

The third is the most accessible, and an awesome place to differentiate your brand. Accordingly, look for a renaissance of type — a flourishing of … Read article &

4y | CSS tricks
25 Years of JavaScript & 25 Free Courses

(This is a sponsored post.) Pluralsight is giving away 25 courses on JavaScript for free to celebrate JavaScript’s 25th birthday. It’s no cheapie, either. The courses range from getting your hands dirty with JavaScript for the first time, to full-on reactive development. Pluralsight’s been around a long time and they know how to design a great course. Five free courses are being released each week throughout this month, December. The $0 price tag is probably enough of an &#8230

4y | CSS tricks
I learned to love the Same-Origin Policy

I spent a good chunk of my work life this year trying (in collaboration with the amazing Noam Rosenthal) to standardize a new web platform feature: a way to modify the intrinsic size and resolution of images. And hey! We did it! But boy, was it ever a learning experience. This wasn’t my first standardization rodeo, so many of the issues we ran into, I more-or-less anticipated. Strong negative feedback from browsers. Weird, unforeseen gotchas with the underlying … Read article &#8220

4y | CSS tricks
Learning to Simplify

When I first got this writing prompt, my mind immediately started thinking stuff like, “What tech have I learned this year?” But this post isn’t really about tech, because I think what I’ve learned the most about building websites this past year is simplification. This year, I’ve learned that keeping it simple is almost always the best approach. Heck, I’ve been banging that drum for a while, but this year has really solidified those sort of thoughts. I’m trying to … Read article “Le

4y | CSS tricks
Slow Movement

There was a time when I felt overwhelmed by how fast the web developed. It seemed like not a single day passed without a new plugin, framework, technique, or language feature being released. I believed that in order to survive as a freelancer and to compete with others I had to learn everything everyone else was so good at: webpack, React, Angular, SVGs, Houdini, CSS Grid Layout, ES6, you name it. Being active on Twitter and going to conferences didn’t … Read article “Slow Movement&

4y | CSS tricks
The Power of Lampshading

I enjoyed this blog post from Shawn. Lampshading is apparently the idea of a TV show calling attention to some weakness (like an implausible plot point) so that the show can move on. By calling it out, it avoids criticism by demonstrating the self-awareness. For developers, Shawn notes, it’s like admitting to your teammates/boss that you don’t know some particular technology so the team can move on. Not only is this useful, it’s powerful. Higher-ups need to call out anything &

4y | CSS tricks

Chercher