Teaching Web Dev for Free is Good Business
It feels like a trend (and a smart one) for tech platforms to invest in really high-quality learning material for their platform. Let’s have a gander.
Webflow University
Surely Webflow is thinking: if people invest in learning Webflow, they’ll be able to build what they need for themselves and the..
A DRY Approach to Color Themes in CSS
The other day, Florens Verschelde asked about defining dark mode styles for both a class and a media query, without repeat CSS custom properties declarations. I had run into this issue in the past but hadn’t come up with a proper solution.
What we want is to avoid redefining—and thus repeating—cust..
SmolCSS
A wonderful collection of little layout-related CSS snippets from Stephanie Eckles that serves both as a quick reference and a reminder of how straightforward and powerful CSS has become.
Random things to note!
The resizeable containers aren’t some JavaScript library. They are just
s with re..
Hiding Content Responsibly
We’ve covered the idea of hiding things in CSS many times here, the most recent post being Marko Ilic’s “Comparing Various Ways to Hide Things in CSS” which did a nice job of comparing different techniques which you’d use in different situations. Hugo “Kitty” Giraudel has done something similar in “..
React Component Tests for Humans
React component tests should be interesting, straightforward, and easy for a human to build and maintain.
Yet, the current state of the testing library ecosystem is not sufficient to motivate developers to write consistent JavaScript tests for React components. Testing React components—and the DOM ..
What’s the Backup Plan for Your WordPress Site?
Of all the reasons we love and use Jetpack for CSS-Tricks—a poster child WordPress site—is that we can sleep easy at night knowing we have real-time backups running with Jetpack Backup. That way, no matter what, everything that makes this site tick, from all the template files to every single word w..
Getting Deep into Shadows
Let’s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces.
Take the landing page below. It is for cycling tours in Iceland. Notice the e..
To the brain, reading computer code is not the same as reading language
One of the things I do when teaching beginning front-end development is ask students to describe what it’s like to read HTML. I give them pretty basic markup for a long-form article, and ask them to read it twice: first in the code, then on the front end.
The #1 common response I hear? It’s like le..
Clipping Scrollable Areas On The inline-start Side
On a default left-to-right web page, “hanging” an element off the right side of the page (e.g. position: absolute; right: -100px;) triggers a horizontal scrollbar that scrolls as far as needed to make that whole element visible. But if you hang an element of the left side of the page, it’s just hidd..
Three Ways to Blob with CSS and SVG
Blobs are the smooth, random, jelly-like shapes that have a whimsical quality and are just plain fun. They can be used as illustration elements and background effects on the web.
So, how are they made? Just crack open an illustration app and go for it, right? Sure, that’s cool. But we’re in a post ..
