CSS Trends Almanac for 2022 Part 2

In this episode of Syntax, it's part 2 of Wes and Scott's journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web.

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

00:06 Welcome
Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1
01:22 Smart home updates
04:05 Box sizing: border box
06:57 CSS Columns
09:20 Aspect Ratio
Can I Use CSS Properties Rotate
09:53 Transitions and animations
13:36 Transition time
17:05 Steps as a timing function
19:01 Sponsor: Prismic
19:43 Blend modes
23:57 Responsive web design
26:31 Prefers Color Scheme
27:48 Popular breakpoints
30:57 Sponsor: LogRocket
32:06 Feature queries and @ supports
34:59 Logical and physical properties
37:59 css-in-js
Sam Magura - Why We're Breaking Up with CSS-in-JS
Brad Frost - Why We’re Breaking Up with CSS in JS
42:28 Sass
43:20 Print styles
45:38 Sponsor: Sanity
46:38 Longhand properities
48:21 Non-existant properties
52:06 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Front Bumper Drillless Plate Holder
Wes: 1U Server Rack

Shameless Plugs

Scott: LevelUp Tutorials
Wes: Wes Bos Tutorials

Tweet us your tasty treats

Scott's Instagram
LevelUpTutorials Instagram
Wes' Instagram
Wes' Twitter
Wes' Facebook
Scott's Twitter
Make sure to include @SyntaxFM in your tweets

Playing: 537: CSS Trends Almanac for 2022 Part 2

Tauri Vs Electron - Desktop Apps with Web Tech

Anxiety and Uncertainty with Dr. Courtney Tolinski

The Svelte + SvelteKit Show

Hacking the Tonal - Proxying, Intercepting + Debugging Traffic?

Supper Club × How To Get Your First Dev Job With Stuart Bloxham

Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

CSS Nesting is Here!

Supper Club × What's New With Astro with Fred Schott

Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?

JavaScript Closures & Scope Explained

Supper Club × Shipping ESM with Mark Erikson

Anything but Coding - Landscaping, Fitness, and more!

OG Image Options

Supper Club × Make React 70% Faster! Million.js with 18 Year Old Aiden Bai

Rust for JS Devs — Part 2

8 Tricks When Using the Fetch() API

Supper Club × How Descript Built A Next Gen Video Editor In The Browser With Andrew Lisowski

6 or so New Approved and Proposed JavaScript APIs

JS Fundamentals - Decorators

Supper Club × Flightcontrol with Brandon Bayer

Potluck × Is TypeScript Fancy Duct Tape × Back Pain × Cloud Service Rate Limits

Why is Facebook’s HTML + CSS Such a Mess?

Supper Club × Ryan Florence of Remix

Standard Server JavaScript - Deno, Workers, Bun and More

Rust for JavaScript Developers - Node vs Rust Concepts

Supper Club × Email Sending, Spam, DMARC, SPF, Styling, and more with Andris Reinman

Polyfills, Transpiling and Monkey Patching

User Feedback UI - Toasts, Flash, Validation

Supper Club × WASM, Fastly Edge, and Polyfill.io with Jake Champion

Potluck × CSS Variables in React × JS Notebooks × Selling a Domain

Help Me Help You - How To Ask For Help

Supper Club × val.town with Steve Krouse

Stump’d × JavaScript × GraphQL × Memory Safety × Web History

Roundup - Sick AI Tools For Developers

Supper Club × Cloudinary with Colby Fayock

What are Headless Components?

Lightning CSS

Supper Club × Messaging Queues and Workers with Armin Ronacher

WTF is an ORM

Where to Register a Domain

Supper Club × Why Netlify bought Gatsby, GraphQL Data Layer, and Headless CMS with Dustin Schau

Potluck × Warp × Skeleton UI × Edge Functions × Donut Scoping

AsyncLocalStorage + AsyncContext API

Supper Club × JavaScript on Hardware, Micro Controllers, ESP32 with Nick Hehr

Electronics for Beginners

GitHub Projects, Milestones, Labels, and Actions

Supper Club × OpenAI, Future of programming, LLMs, and Math with Andrey Mishchenko

Is JSDoc Better than TypeScript?

Nothing in CSS - 0 vs 0px, no, none, hidden, initial and unset

Supper Club × Matt Rothenberg and Idan Gazit on Github Next

The New Syntax Site × Ingest, Stack, AI and more

JavaScript.exe - Standalone Executables

Supper Club × Bramus Van Damme on CSS

Potluck × JR Devs & Copilot × CSS Variable Limitations × SvelteKit

Why Is node_modules So Big?

Supper Club × Adam Argyle on What's New in CSS

Where Should You Host Your App? Hosting Providers Compared

WTF Are Signals And Why Is Everyone So Hot On Them All Of The Sudden?

Supper Club × Dylan Jhaveri - Video for the Web and MUX

UI Elements - Basics, Best Practice, and Built Ins

Bluesky + AT Protocol

Supper Club × Zach Lloyd from Warp

The Syntax Giveaway Site - Codes, Bots, Tech Stack and More!

RPC in JavaScript!

Supper Club × Privacy, Cookie Banners, GDPR with Donata and Hans Skillrud

Potluck × Crypto × SEO × Status Pages × Learning Tools

CSS Color Functions

Supper Club × ESLint with Nicholas Zakas

Can Vanilla CSS Replace Sass Yet?

Modals, Popups, Popovers, Lightboxes

Supper Club × Nate Weinert and Tamagui

600th Episode! Major Announcement and Swag Giveaway!

oAuth APIs Explained

Supper Club × Fabian Kägy - Modern WordPress - Blocks, Page builders, Headless, Custom Fields

Stump’d Gameshow! Answering Coding Interview Questions from AI

The New Import Map Standard

Supper Club × Web Components and Lit with Justin Fagnani of Google

Potluck × Testing Animations × Tools for Learning × Coding Related Injuries

Coding with the Open AI / Chat GPT API