Trivia! Visual Studio …
The post What I learned by building my own VS Code extension appeared first on CSS-Tricks.
.filter is a built-in array iteration method that accepts a predicate which is called against each of its values, and returns a subset of all values that return a truthy value.
That is a lot to unpack in one statement! Let’s take a look at that statement piece-by-piece.
“Built-in" simply means that it is part of the language—you don’t need to add any libraries to get access to this functionality.
"Iteration methods" accept a function that are run against each
The post Level up your .filter game appeared first on CSS-Tricks.
Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an element, but without using props or re-rendering the whole component.
That’s the sort of thing refs are good for and what we’ll be digging into in this post.
How to create a ref
createRef() is a new API …
The post Working with refs in React appeared first on CSS-Tricks.
This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I’ve seen so far because it has the complexity of multiple areas that have to interact with two players.
Wanna see the complete game?
View Repo View Demo
Oh, you wanna learn how it works? Let’s dig in.
I could …
The post Building Battleship in CSS appeared first on CSS-Tricks.
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one:
Browser support and basic usage
Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016, with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it.
Scroll snapping is used by setting the scroll-snap-type property on a container element and the …
The post Practical CSS Scroll Snapping appeared first on CSS-Tricks.
Just the other day in a Slack group I hang out in someone asked “what web design events is everyone going to and loving?" An Event Apart is always my immediate answer. I’ve gotten to speak a number of An Event Apart events, which is an incredible honor and always a good time. So from that perspective, I love it. I can tell you that it’s the most well-run conference I go to that gets all the details right.
The post An Event Apart appeared first on CSS-Tricks.
The Open Web continues to show up in places we would have never originally expected to find it: our phones, televisions, watches, books, video game consoles, fast food menus, gas pumps, elevators, cars—even our refrigerators.
By not making too many or too strict assumptions about how the web should be used, it remains flexible and adaptable. These qualities have allowed it to outperform closed technologies like Flash and Silverlight.
With the web’s growth comes new features to better accommodate its …
The post The possibilities of the color-adjust property appeared first on CSS-Tricks.
AI got the following result down to a single HTML element …
The post Simple Interactive Pie Chart with CSS Variables and Houdini Magic appeared first on CSS-Tricks.
They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting …
The post Switch font color for different backgrounds with CSS appeared first on CSS-Tricks.
When we saw Chris put up a list of cloud-hosted data-stores, we couldn’t resist letting him know that we also had one of those, only ours is a fully featured CMS that come with a rich query language and an open source, real time, collaborative authoring tool that you can tailor to your specific needs using React. It’s called Sanity.io.
“Add us to your list!” we asked Chris. “No, your stuff is interesting, can’t you write about you…
The post Five interesting ways to use Sanity.io for image art direction appeared first on CSS-Tricks.