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

Potluck × Learning Web Dev × Video Streaming × Mono Repos

HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more!

Supper Club × Next.js on AWS + Serverless with Dax Raad

New Syntax Website Brainstorm! IRL!

Web Streams Explained

Supper Club × Digital Nomad with Eric Sartorius

Fundamentals × What Makes a Website Slow?

Node in the Browser × WebContainers + NodeBox

Supper Club × Visual Coding Languages With Steve Sewell

AI and Coding with ChatGPT

Clean vs Sloppy Code

Supper Club × Astro 2.0 with Fred Schott

Warp Terminal × Next Gen Terminals

Logging

Supper Club × Solid.js with Ryan Carniato

Potluck × Native Web Components × JS Class Mixins × Application Secrets

Save us from Config File Hell

Supper Club × Qwik framework from Miško Hevery, the Creator of Angular

Converting JS to TypeScript

Polish and Perf

Supper Club × Rust In Action with Tim McNamara

Node.js CJS → ESM

CSS Wishlist

Supper Club × Caleb Porzio

We React to State of JS 2022

Container Queries Explained

Supper Club × Simen Svale Skogsrud and Espen Hovlandsdal from Sanity

Potluck × JS Modules × HTML Tags × Recession × Budgeting

Buy It or Build It? A Service is Not a Solution

Supper Club × Katherine Mello on Liberal Arts → Coding, Bootcamps, and Sustainability

2023 Goals × Learning and Doing

TypeScript Fundamentals × Satisfies and as const

Supper Club × Sarah Drasner on Engineering Management

Our Predictions for 2023

TypeScript Fundamentals × Type Narrowing, Guards, and Predicates

Supper Club × Polypane with Kilian Valkhof

Were We Wrong? 2022 Predictions Revisited

Desktop Apps in JS × Electron and Tauri

Supper Club × Switching into Coding and climbing the Pommade ladder with Kenneth Lyerly

Potluck × Twitter Thoughts × Business Models × Senior Developer

“Serverless” Databases

Supper Club × Remotion React Video with Jonny Burger

JavaScript in 2022

Rendering Methods Explained

Supper Club × Coding at Disney with Vu Le

Code Styles × Readable Rules and Petty Preferences

GitHub Next Projects

Supper Club × Bun with Jared Sumner

Potluck × Twitter Following × TypeScript × Playwright

Serverless Limitations

Supper Club × Anything But Coding with Wes and Scott

Responsive Design Techniques

React use() hook and Async Server Components Proposal

Supper Club × Ryan Dahl and Deno

CSS Trends Almanac for 2022 Part 2

Short Form Content with Tiktok, Reels, Shorts, Tweets

Supper Club × Open Table LIVE SHOW

Potluck × Meeting IRL × SSG vs SSR × Domain Privacy

Zod Schema Validation and Type Generation

Supper Club × Coding with ADHD with Dr. Courtney Tolinski

Spooky Web Dev Stories Part 2

Explained - Buzz Words and Concepts

Supper Club × GraphQL as an Aggregation Layer with Filipe Ferreira of Sky TV

Spooky Web Dev Stories 2022

Hydration & New Frameworks Like Qwik

Supper Club × tRPC With Alex KATT Johansson

2022 CSS Trends and Usage Web Almanac

Bookmarklets

Supper Club × Neovim, Lua, RPC and Twitch with TJ DeVries

Use The Platform!

Syntactic Sugar, Declarative and First Class Citizens? What does that even mean?

Supper Club × ORMs with Nikolas Burk from Prisma

Potluck - Using Emoji in Naming × Project Estimates × Goal Planning

How to Get Past the Blahs and Finish Your Project

Supper Club × Open Sauced With bdougie

Wes’ New Soundproof Office

WTF Is Enhance Framework?

Supper Club × Arc Browser with Hursh Agrawal

The Productivity Episode