CSS Houdini

CSS Houdini resources and news, and contributors #css #cssHoudini

[CSS Houdini @csshoudini]

We are excited to announce that we have a Houdini dedicated channel in the @csscommunitydev 🤩

🇬🇧 https://t.co/EQ5punUL4O
🇪🇸 https://t.co/juqEyqDYJ3

#css #cssHoudini #cssCommunityDev

[Aakash Rao @Aakash_codes]

What is CSS Houdini?

➥ What it brings to the table
➥ Benefits of CSS Houdini
➥ Examples & Resources

A Thread 🧵

[Una 🇺🇦 @Una]

🚨 The State of CSS 2022 survey is out! 🚨

If you write CSS, please take this survey! 🙏🏼

It really helps us understand where the community is and how to best support you 😁

Check it out here ⬇️⬇️⬇️

https://t.co/jpKZQCCQTs

[Smashing Magazine 🇺🇦 🏳️‍🌈 @smashingmag]

🔖 Core Web Vitals Tools To Boost Your Web Performance Scores on @smashingmag
https://t.co/RUoBMMXDoE

Treo
https://t.co/gy0rweOn89

Bulk Core Web Vitals Check
https://t.co/McUuqtWzlO

PageSpeed Compare
https://t.co/jsVDrc2nEI

#webperf

[Cassidy @cassidoo]

We've put together a small conference to benefit Ukraine on April 25-26!

There are 17 amazing speakers joining in, and all of the money donates goes directly to benefit orgs that could use your help.

Register, learn more, and donate here!
https://t.co/CB5gzzMjrZ

[Una 🇺🇦 @Una]

SO EXCITED TO ANNOUNCE: MY TEAM IS HIRING! 🎉🥳

Join @argyleink, @JecelynYeen + me as a Chrome Developer Advocate focusing on CSS, UI, & DevTools 🥰

You'll be working on making it easier for devs to build, style, & debug web interfaces

This is literally my dream job! 😍

1/2

[George Francis @georgedoescode]

New tutorial just landed! "Creating Generative Patterns with The CSS Paint API" ✨

Join me in creating 3 (hopefully!) beautiful generative patterns, and learn everything you need to make 100000 more with CSS Houdini 🎨

Check it out on @css // https://t.co/yMamyINGg0

[Rik Schennink @rikschennink]

🧪 Use CSS numeric factory functions instead of string concatenation to set style unit values.

https://t.co/S4E5wzt7MT

[George Francis @georgedoescode]

New Houdini stuff! ✨

Magical generative patterns that rearrange themselves based on the browser window 🎨

A kinda different approach for responsive design...

Inspired by @chriscoyier 's generative grids pen 💛

CodePen (Desktop only + Chrome / Edge) https://t.co/WvYqXy3Yoq

[CSS Houdini @csshoudini]

@addyosmani I can’t wait to see it and let me know if you would like feedback 😉

[CSS Houdini @csshoudini]

Thank you @addyosmani , now, I need this t-shirt 🤩

https://t.co/UiK1D7vPCK

#CSS #cssHoudini

[Addy Osmani @addyosmani]

@csshoudini Haha. This one involved a wild number of SVG layers for the design. I'll be sure to use some paint worklet magic next time ;)

[Adam Argyle @argyleink]

@Una NOISE! NOISE! NOISE! Love it. It's like my static gradient but better!

feTurbulence is so rad, key to unlocking so many great effects...

How am I the 1st Github star!? 🤯 https://t.co/L82z7wd1PA

[left (mine) https://t.co/zVX4HwgLa1]
[right (theirs) https://t.co/qyo5n5cwwQ]

[Joan León 🏞️⚡️ @nucliweb]

@esepuntoge Hay varias opciones de optimización, pero creo que la más importante es cambiar los recursos .gif por vídeos.

ℹ️ https://t.co/8cwd4DfVD8

Como esas animaciones son decorativas (por cierto, muy chulas) podrías probar de hacerlas en CSS con @csshoudini

#WebPerf #WPO #performance

[Joan León 🏞️⚡️ @nucliweb]

HTML, CSS and JavaScript are Web Standards, but do you know there are many more? such as accessibility, SVG, Media, Performance, Web API, i18n.

Take a look at the @w3c "All Standards and Drafts" list.
https://t.co/XukPeHlOgn

#Web #standard

[Una 🇺🇦 @Una]

Cool things you can do with the CSS Paint API! 😎

Check out https://t.co/EvZkZ1J22s for more ⬇️⬇️

[Una 🇺🇦 @Una]

Generative blobs with the CSS Paint API 🦠

https://t.co/atS6454d03

[Una 🇺🇦 @Una]

Fresh #CSSPodcast all about counters and @ًcounter-style just dropped!

You can use counters to:

📑 Create styled outlines
🧮 Create custom list styles
🎯 Create CSS games(!)

https://t.co/cd5GtVRzFx