What I learned by building my own VS Code extension

VS Code is slowly closing the gap between a text editor and an interactive development environment (IDE). At the core of this extremely versatile and flexible tool lies a wonderful API that provides an extensible plugin model that is relatively easy for JavaScript developers to build on. With my first extension, VS Code All Autocomplete, reaching 25K downloads, I wanted to share what I learned from the development and maintenance of it with all of you.

Trivia! Visual Studio …
The post What I learned by building my own VS Code extension appeared first on CSS-Tricks.

Link: https://css-tricks.com/what-i-learned-by-building-my-own-vs-code-extension/

Level up your .filter game

.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.

Link: https://css-tricks.com/level-up-your-filter-game/

Working with refs in React

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.

Link: https://css-tricks.com/working-with-refs-in-react/

Building Battleship in CSS

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.

Link: https://css-tricks.com/building-battleship-in-css/

Practical CSS Scroll Snapping

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:

Live Demo
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.

Link: https://css-tricks.com/practical-css-scroll-snapping/

An Event Apart

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.
But …
The post An Event Apart appeared first on CSS-Tricks.

Link: https://css-tricks.com/an-event-apart/

The possibilities of the color-adjust property

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.

Link: https://css-tricks.com/the-possibilities-of-the-color-adjust-property/

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript!
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.

Link: https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/

Switch font color for different backgrounds with CSS

Ever get one of those, “I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018.
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.

Link: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

Five interesting ways to use Sanity.io for image art direction

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.

Link: https://css-tricks.com/five-interesting-ways-to-use-sanity-io-for-image-art-direction/