Best of CSS-Tricks — September 2021

1. 1
   Article

   CSS-Tricks·5y

   Creating the Perfect Commit in Git

   This article is part of our “Advanced Git’ series. Part 2: Branching Strategies in Git Part 3: Better Collaboration With Pull Requests Part 4: Rebase vs. Merge (Coming soon!) Part 6: Interactive Rebase Part 7: Using the Reflog to Restore Lost Commits.

   92

   1
2. 2
   Article

   CSS-Tricks·5y

   What I Wish I Knew About CSS When Starting Out As A Frontender

   The Box Model (e.g. box-sizing , height , width , margin , padding ) The Document Flow and Positioning (e,g. position , top , left , etc.) There are also some useful concepts to keep in mind when building reusable and composable components.

   47

   1
3. 3
   Article

   CSS-Tricks·5y

   I completely ignored the front end development scene for 6 months. It was fine

   The number of languages and frameworks you know matters very little. What actually matters is your ability to up-skill quickly and effectively. If you focus on: learning how you best learn, andpracticing effectively communicating the things you've learned you can't go wrong. I wouldn't trade that experience for anything.

   24

   3
4. 4
   Article

   CSS-Tricks·5y

   Twitter's div Soup and Uglyfied CSS, Explained

   React Native for Web provides cross platform primitives that normalize inconsistencies and allow to build web applications that are touch friendly. To ensure reliable interactions like touch or gestures and to provide a higher degree of compatibility, React Native reimplements some web primitives making sure that semantics and accessibility are preserved if not enhanced.

   20

   6
5. 5
   Article

   CSS-Tricks·5y

   Grainy Gradients

   Noise makes otherwise solid colors or smooth gradients more realistic. Despite designers’ affinity for texture, noise is rarely used in web design. In this article, we’ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG.

   18

   2
6. 6
   Article

   CSS-Tricks·5y

   Proposal for CSS @when

   @media (min-width: 600px) { /* WHEN this media query is true, do these styles. */ } @media (max-width): 599px { /* ... */ }That’s a little… fidgety. The syntax is much cleaner in this new proposal.

   17

   1
7. 7
   Article

   CSS-Tricks·5y

   7 Practical Uses for the ::before and ::after Pseudo-Elements in CSS

   CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element. This effectively allows you to show something on a web page that might not be present in the HTML content. In this article, I’ll walk you through seven different examples that showcase how ::before or ::after can be used to create interesting effects.

   17

   2
8. 8
   Article

   CSS-Tricks·5y

   “Just in Time” CSS

   acss.io is the first usage of “Atomic CSS’ where the point of it is to be a compiler. The result is far less CSS than you’d see in an average stylesheet. It only generates the CSS that you actually need, because you asked for it, and no more.

   15

   1
9. 9
   Article

   CSS-Tricks·5y

   Web Streams Everywhere (and Fetch for Node.js)

   Streaming involves splitting a resource into smaller pieces and processing each chunk one at a time. There are three kinds of streams: readable streams, writable streams, and transform streams. The original Node streams aren’t being deprecated or removed but they will now co-exist with the web standard stream API.

   13
10. 10
    Article

    CSS-Tricks·5y

    Can we have custom media queries, please?

    The custom media queries section explains how to define and reuse aliases for media queries. Custom media queries are in the spec for years, but there doesn't seem to be much interest in implementing them. Neither MDN nor caniuse.com knows about the feature, yet.

    10

    1