Archive | article

RSS feed for this section

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.

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

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.

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.

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

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.

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.

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.

New on Wufoo: Form Manager Beta, File Manager Beta, Entry Manager Beta

Wufoo really is firing on all cylinders lately! As you may know, I’ve been using Wufoo here on this site, and pretty much every other site I’ve ever made, to power the web forms for over a decade. That’s a dang long time, which more than proves to me Wufoo is a form solution to trust. But also a product that improves!

There is a new Form Manager, Entry Manager, and File Manager.

Enable the beta stuff …

The post New on Wufoo: Form Manager Beta, File Manager Beta, Entry Manager Beta appeared first on CSS-Tricks.

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.