Freelancing

CSS-Tricks

What’s Old is New

2 months 2 weeks ago

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 … Read article “What’s Old is New”

The post What’s Old is New appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Cassidy Williams

I learned to love the Same-Origin Policy

2 months 2 weeks ago

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 “I learned to love the Same-Origin Policy”

The post I learned to love the Same-Origin Policy appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Eric Portis

25 Years of JavaScript & 25 Free Courses

2 months 2 weeks ago

(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 … Read article “25 Years of JavaScript & 25 Free Courses”

The post 25 Years of JavaScript & 25 Free Courses appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Geoff Graham

Three Ways to Distinguish a Site From the Norm

2 months 2 weeks ago

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:

  1. Stunning visuals that cannot be created in UI vector editors, like Figma and Sketch
  2. Beautifully-animated interactions that cannot be dreamt in the language of Stacks of Rectangles
  3. 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 “Three Ways to Distinguish a Site From the Norm”

The post Three Ways to Distinguish a Site From the Norm appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Erik Kennedy

Learning to Simplify

2 months 2 weeks ago

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 “Learning to Simplify”

The post Learning to Simplify appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Andy Bell

Slow Movement

2 months 2 weeks ago

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”

The post Slow Movement appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Manuel Matuzovic

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

2 months 2 weeks ago

I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points.

You might also call it a “smooth scrolling” library, but it doesn’t leverage native smooth scrolling — it does just the opposite by virtualizing scrolling and ensuring it’s always smooth. You could probably consider this “scrolljacking” so if you … Read article “How to Use the Locomotive Scroll for all Kinds of Scrolling Effects”

The post How to Use the Locomotive Scroll for all Kinds of Scrolling Effects appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Nelson Michael

The Power of Lampshading

2 months 2 weeks ago

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 … Read article “The Power of Lampshading”

The post The Power of Lampshading appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Chris Coyier

It’s Always Year Zero

2 months 2 weeks ago

In the short term, opinions about technology often follow a compressed form of Laver’s Law:

  • Everything just before me was completely broken.
  • Everything that comes after me is completely unnecessary.
  • Everything I use right now is perfectly fine; stop changing things.

We tend to judge things based on where we started, our personal “Year Zeros.” But what’s “Year Zero” for us isn’t “Year Zero” for others. And in the fullness of time, the good ideas win out and hindsight … Read article “It’s Always Year Zero”

The post It’s Always Year Zero appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Shawn Wang

Old is Solid; New Gets Talked About

2 months 2 weeks ago

When Chris asked me to write about “one thing I learned about building websites this year” I admit my brain immediately went through a list of techniques and CSS properties I started using this year. But then I paused. Other people can write about that much better than I can. What’s something that I specifically have learned?

Then I realized that I’ve been “learning” the same lesson for the last five years, yet I keep falling into the same trap … Read article “Old is Solid; New Gets Talked About”

The post Old is Solid; New Gets Talked About appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Kilian Valkhof

What’s New in WCAG 2.1: Label in Name

2 months 2 weeks ago

WCAG 2.1 Recommendations rolled out in 2018. It’s been a couple years now and there are some new Success Criterion. In this article, I will discuss Label in Name, which is how we visually label components. We’ll take a look at what some failure states look like, how to fix them, and examples of how to do them correctly.

You lost me at Success Criterion…

A Success Criterion is a testable statement that aren’t technology-specific. It’s the baseline from … Read article “What’s New in WCAG 2.1: Label in Name”

The post What’s New in WCAG 2.1: Label in Name appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Todd Libby

Hell Yes! CSS!

2 months 2 weeks ago

Speaking of cool CSS stuff you can buy, Julia Evans’ zine Hell Yes! CSS! is hot off the presses. A “zine” being 28 pages of “short, informative, and fun comics which will quickly teach you something useful.” Some parts of it are like cheat sheets. Some parts of it are like concepts made digestible through the relaxed format. Some parts of it are like mini-tutorials. There is definitely some uhmmmm wow weird moments in there that might stump … Read article “Hell Yes! CSS!”

The post Hell Yes! CSS! appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Chris Coyier

Representation Matters

2 months 3 weeks ago

This year I had the pleasure of re-launching The Accessibility Project. I spend a lot of time researching and writing about accessibility and inclusive design, so this felt like the cumulation of a lot of that effort. The site now uses all sorts of cool web features like CSS Grid, @supports, and media features, aria-current, Service Workers, and Eleventy. But that’s really not the important bit.

The important bit I learned this year … Read article “Representation Matters”

The post Representation Matters appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Eric Bailey

Netlify & Next.js

2 months 3 weeks ago

Cassidy Williams has been doing a Blogvent (blogging every day for a month) over on the Netlify Blog. A lot of the blog posts are about Next.js. There is a lot to like about Next.js. I just pulled one of Cassidy’s starters for fun. It’s very nice that it has React Fast-Refresh built-in. I like how on any given “Page” you can import and use a <Head to control stuff that would be in a <head. … Read article “Netlify & Next.js”

The post Netlify & Next.js appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Chris Coyier

Not Much

2 months 3 weeks ago

What’s one thing I learned about building websites this year? Not all that much.

This year, unlike most previous years, I didn’t explore a lot of new technologies. For obvious reasons, it’s been a difficult year to be as engaged in the hot new topics and to spend time playing around with new things. So, for the most part, I’ve tried to keep calm and carry on.

That said, I did try a couple of things that were new to … Read article “Not Much”

The post Not Much appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Ire Aderinokun

Debugging CSS

2 months 3 weeks ago

High five to Ahmad Shadeed for releasing his new book, Debugging CSS. I think that’s a neat angle for a book on CSS. There are a ton of books on the general subject of CSS already, so not that they can’t be fresh takes on that, but this feels equally important and less trodden territory.

Browser DevTools help us a ton these days in debugging CSS, but there isn’t exactly a step-by-step guide about about it that I know … Read article “Debugging CSS”

The post Debugging CSS appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Chris Coyier

MDN on GitHub

2 months 3 weeks ago

Looks like all the content of MDN is on GitHub now. That’s pretty rad. That’s been the public plan for a while. Chris Mills:

We will be using GitHub’s contribution tools and features, essentially moving MDN from a Wiki model to a pull request (PR) model. This is so much better for contribution, allowing for intelligent linting, mass edits, and inclusion of MDN docs in whatever workflows you want to add it to (you can edit MDN source files directly

Read article “MDN on GitHub”

The post MDN on GitHub appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Chris Coyier

Give Users Control: The Media Session API

2 months 3 weeks ago

Here’s a scenario. You start a banging Kendrick Lamar track in one of your many open browser tabs. You’re loving it, but someone walks into your space and you need to pause it. Which tab is it? Browsers try to help with that a little bit. You can probably mute the entire system audio. But wouldn’t it be nice to actually have control over the audio playback without necessarily needing to find your way back to that tab?

The Media … Read article “Give Users Control: The Media Session API”

The post Give Users Control: The Media Session API appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Idorenyin Udoh

HTTP Archive’s Annual State of the Web Report

2 months 3 weeks ago

The HTTP Archive looked at more than 7 million websites and compiled their annual report detailing how the sites were built. And there’s an enormous wealth of information about how the web changed in 2020. In fact, this report is more like an enormous book and it’s entirely fabulous. The data comes from making queries to the HTTP Archive and is broken down into various sections, such as Performance, Security, and the languages themselves, including how folks wrote HTML or … Read article “HTTP Archive’s Annual State of the Web Report”

The post HTTP Archive’s Annual State of the Web Report appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Robin Rendle

Make it Personal

2 months 3 weeks ago

One thing I noticed about building websites in 2020: despite all the social networks and publishing platforms craving our content, our stories, and our attention, people are somehow still building personal websites. Over the course of the year, many of you have launched or relaunched your website. It indeed feels like the personal website is experiencing a little revival.

To me, this comes as no surprise. The benefits of having your own personal site are enormous and appealing. As a … Read article “Make it Personal”

The post Make it Personal appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Matthias Ott

Hacking Tutorials

iOS Programming