OR 

Firefox Multi-Account Containers

It‘s an extension: Each Container stores cookies separately, so you can log into the same site with different accounts and online trackers can‘t easily connect the browsing. A great idea for a feature if you ask me. For example, I have two Buffer accounts and my solution is to use different browsers entirely to stay logged into both of them. I know plenty of folks that prefer the browser version of apps like Notion, Front, and Twitter

favicon of http://css-tricks.com

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 functio

favicon of http://css-tricks.com

Seriously, though. What is a progressive web app?

Amberley Romo read a ton about PWAs in order to form her own solid understanding. ‘Progressive web app‘ (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements. As a general term, the PWA approach is characterized by striving to satisfy the following set of attributes: Responsive Connectivity independent App-like-interac

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

Task management has never been easier

(This is a sponsored post.) monday.com is a team management tool that is exceptionally suitable for any industry sector and by any sized team. It will perfectly serve a team of two or a team of hundreds spread around the globe, and it can manage multiple projects at once. monday.com promotes effortless collaboration and transparency, it‘s "cheetah fast," it displays status in as many as 20 different colors, and its status board can be custo

favicon of http://css-tricks.com

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 Buil

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

The Cost of JavaScript in 2018

Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more. In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to ‘Time-to-Interactive‘ measurements and auditing your JavaScript bundles. Embrace performance budgets and learn to live with

favicon of http://css-tricks.com

Understanding why Semantic HTML is important, as told by TypeScript

What a great technological analogy by Mandy Michael. A reminder that TypeScript... makes use of static typing so, for example, you can give your variables a type when you write your code and then TypeScript checks the types at compile time and will throw an error if the variable is given a value of a different type. In other words, you have a variable age that you declare to be a number, the value for age has to stay The post Understanding why

favicon of http://css-tricks.com

Creating the ‘Perfect‘ CSS System

My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project: Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML conventions from the start. Meet early and often to discuss every library, framework, mental model, and gem you are interested

favicon of http://css-tricks.com

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 s

favicon of http://css-tricks.com

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: Fo

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

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

favicon of http://css-tricks.com

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 we

favicon of http://css-tricks.com

Browser painting and considerations for web performance

The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here‘s a simplified set of steps the browser goes through: Browser creates the DOM and CSSOM. Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (display: none elements are avoided). Browser computes the geometry of the layout and its elements ba

favicon of http://css-tricks.com

Chrome 69

Chrome 69 is notable for us CSS developers: Conic gradients (i.e. background: conic-gradient(red, green, blue);): We‘ve got lots of interesting articles about conic gradients here, and here‘s some use cases and a polyfill from Lea Verou. Logical box model properties: margin, padding, and border all get an upgrade for more use cases. Think of how we have margin-left now the "left" part doesn‘t make much sense when we switch dir

favicon of http://css-tricks.com

Here‘s how I recreated theory11‘s login form - how would you do it?

I ran across a super cool design for a login form over on the website theory11.com. Actually, the whole site and the products they make are incredibly well designed, there‘s just something about the clean and classy form that really got me. Plus, it just so happened that the CodePen Challenge that coming week was based on forms, so I took a few minutes and tried slapping it together. Fadeout vector pattern One of the things I thought The

favicon of http://css-tricks.com