Best of CSS-Tricks — July 2021

  1. 1
    Article
    Avatar of css_tricksCSS-Tricks·5y

    ES2021

    Promise.any & AggregateError & WeakRefs & FinalizationRegistry. Objects are Logical. Assignment Operators, Numeric Separators, and String.prototype.replaceAll. ES2021 Features! are available in ES6, ES7, and ES8.

  2. 2
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Demystifying styled-components

    styled-components is a tool that takes arbitrary CSS and assigns it to a React component. By demystifying it, we'll be able to diagnose and fix weird CSS issues with way less frustration. This article is written for experienced React developers. It may surprise you to learn that styled-Components doesn't do anything with the CSS we added to it.

  3. 3
    Article
    Avatar of css_tricksCSS-Tricks·5y

    The Nine States of Design

    The nine states of design apply to all designs and all components. These states will repeat based on the page, user interaction, updated data, and pretty much any change of your application’s state. By thoughtfully designing for these changes, you can create a polished experience for users.

  4. 4
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Body Toggle

    It’s a one-liner that toggles the class on the <body> so you can mock up different states and toggle between them on click. I appreciate the clarity of this trick that Mikael Ainalem posted over on Reddit. Could be on any element as well!

  5. 5
    Article
    Avatar of css_tricksCSS-Tricks·5y

    A shared ESLint configuration

    Like our markdown linters, all Mapbox documentation repositories use a shared ESLint configuration. Our configuration covers everything from enforcing React best practices to improving accessibility, including: eslint- plugin-jsx-a11y checks accessibility rules on JSX elements. eslinter-plugin-es allows us to disallow unsupported ECMAScript syntax.

  6. 6
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Links on React and JavaScript

    React 18 is coming soon, and the React team has put together a list of things to look out for. The list includes React Query, Just-In-Time translations, Compound Components, and React Hooks. There are also a number of other React-related articles.

  7. 7
    Article
    Avatar of css_tricksCSS-Tricks·5y

    Zero-Width Space

    The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually. WordPress was being weird about it and not escaping it even when in a code block.

See all CSS-Tricks archives