Una 🇺🇦
@Una
Followers
90,995
Following
1,450
Media
2,883
Statuses
30,530
Making the web more stylish ✨🎨 Web UI DevRel Lead @Google 🦄 @csswg + @openuicg . #CSSPodcast host 🎬
Brooklyn, NY
Joined November 2008
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
#Orm1stFMNanning
• 701926 Tweets
ORM HEARTBEAT UNSTOPPABLE
• 677716 Tweets
Cardi B
• 131016 Tweets
गोवर्धन पूजा
• 95596 Tweets
ルヴァンカップ
• 63097 Tweets
OUROAD IN VIETNAM
• 55647 Tweets
#YINWAR1STFANMEETING
• 43302 Tweets
サッカー
• 42170 Tweets
グランパス
• 37116 Tweets
#albirex
• 36852 Tweets
#アルビレックス新潟
• 34884 Tweets
土砂降り
• 20409 Tweets
日本シリーズ中止
• 19598 Tweets
Gobert
• 18803 Tweets
サポーター
• 16347 Tweets
ファンタジーS
• 15572 Tweets
ピクミン
• 13807 Tweets
名古屋優勝
• 12950 Tweets
ランゲラック
• 12639 Tweets
名古屋さん
• 12538 Tweets
大雨の中
• 11790 Tweets
This weekend I:
✅ Recorded a song about array methods
✅ Realized I have no life
169
2K
5K
🎉 Aspect Ratio just landed in Chrome Canary! 🎉
➡️Check it out by enabling the experimental web platform features flag in version 84.0.4145.0 or later
👋🏽 Say your goodbyes to 56.25% and let me know if you find any bugs! 🐞
71
1K
5K
Have you seen the new flexbox debugging features in Chrome DevTools?!
Prettttyyy darn cool
55
659
3K
`accent-color` is now supported in all modern browsers 🎉🎨
One line of code enables you to style previously-hard-to-access form controls like checkboxes and radio buttons
body {
accent-color: hotpink;
}
Works really nicely with the `color-scheme` property too!
24
605
3K
Hello, you’ve been blessed with a good week by this happy puppo 🙏🐶 pass it on
15
330
3K
Yall. This is so cool!!!
The text reflected in the raindrops with a shader 🤯
Real, searchable, translatable DOM content in the canvas. Stylable with regular CSS, too. 🤯🤯🤯
@fserb
For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas.
One of them is the ability to have HTML elements in a canvas.
Here's a ThreeJS demo with a live HTML texture.
131
363
4K
45
260
3K
Hello! I made a little helper website for using CSS Grid in a progressively enhanced way 🤗
✨ ✨
It showcases examples of layouts/components that use CSS grid and how to get them working in IE/Edge too!
47
623
2K
🌈 I'm back from vacation & have some news! 🌿
Today I'm joining the
@googlechrome
team as a Dev Advocate focused on CSS (and Web UI) best practices / new technologies!
I've officially managed to turn my side project into my day job 😱
I can't wait to learn from my new team!
115
41
2K
"Break out" of a parent's containing width to take the full screen of a page w/this nice utility class:
```
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
```
49
326
2K
🤯🤯🤯 THIS IS A NATIVE BROWSER FEATURE!? 🤯🤯🤯
32
322
2K
Programming: Some days you're an architect, some days you're a janitor
32
653
2K
I’ve been working on a little side project this year 👀
:first-child launching next month 🥰
Very excited for this new life chapter 🧡🌈🍂
167
11
3K
Thanks for all the great questions during
#webdevLIVE
😁
➡️ Check out (built for this talk!)
for some modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of code can be!
Video is coming soon 📽️
29
508
2K
No-JS hamburger menu w/the popover API:
Browser handles:
- clicks on hamburger & close btns
- esc key to exit
- tab nav
- spacebar + enter key toggle (open & close)
- light dismiss (click away) close
How:
<btn popovertarget="menu">..</>
<div popover role="menu" id="menu">..</>
64
313
2K
A great way to learn a concept is to write a blog post about it
✍️ Remember taking notes in school?
It's like that, but more polished, organized, & filled with links + your own definitions (which helps you think it through)
Blogging = public notes u can reference & share 😎
42
470
2K
🤔 Did you know: min() max() and clamp() let you inject logic into your CSS!
🎉 And the support is pretty darn good, too! (All modern browsers have full support w/the Safari tech preview update)
📊 Support:
👩🏻💻 Gist:
28
386
2K
MY HEART
32
176
2K
🆕 Quick HTML Tip: Now you can add horizontal rules between options in select elements
🚀 Support: Chrome 119 & Safari 17
31
264
2K
🚨 Add a custom color to your forms in 1 line of CSS: INTRODUCING the accent-color property!!
`accent-color: pink`= pink checkboxes, radio buttons, sliders, etc.
Landing in:
Chromium 93 (Aug 31)
Firefox 92 (Sept 7)
Read:
Try it:
18
396
2K
5 years ago, I was flown out to interview at Slack, and was told that the code I wrote for the take-home test was "too modern" (like, arrow functions)
I quote: "...we don't use modern JavaScript here"
The experience was fine, but the reason for the rejection just felt odd.
What was the most memorable experience you had while interviewing for a job?
312
40
329
71
87
2K
I’m Ukrainian and my entire family is from Kiev (some still live there) so this hits (literally) close to home 😔
BREAKING: Explosions are being heard in several Ukrainian cities, including Kyiv and Kharkiv.
185
2K
6K
133
48
2K
#lintHTMLwithCSS
:
/* Headers out of order (i.e. h2 before h1, etc.)
Result: dotted blue outline
*/
h2 ~ h1,
h3 ~ h1,
h4 ~ h1,
h5 ~ h1,
h6 ~ h1,
h3 ~ h2,
h4 ~ h2,
h5 ~ h2,
h6 ~ h2,
h4 ~ h3,
h5 ~ h3,
h6 ~ h3,
h5 ~ h4,
h6 ~ h4,
h6 ~ h5 {
outline: 2px dotted blue;
}
36
273
2K
I was today years old when I learned that:
TIL CSS "background-repeat: round" ~ repeats background images without clipping ✂️
66
2K
8K
21
180
2K
Super simple scroll-driven progressive enhancement: animate in your images 🩷
@keyframes appear {
from { opacity: 0; scale: 0.8; }
to { opacity: 1; scale: 1; }
}
img {
animation: appear linear both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
16
168
2K
🙋🏻♀️ Raise your hand if you've used the padding hack for aspect ratio
127
40
1K
On the last day of the decade I woke up engaged to my roommate, dog dad, and favorite human ❤️💍
It was a complete surprise and I’m so excited to spend the coming year and every year after that with him 🤗
Happy New Years y’all! Wishing you all the best in 2020
130
6
1K
I am unbelievably excited to share this with y’all!!! 🎉🐶🎉👩🏻💻🎉
Double, double toil and trouble. Say goodbye to all your web design struggle 🎃🌕👻
Introducing Designing in the Browser, a hauntingly good new series about designing beautiful interfaces with best practices in mind.
Stay tuned for the launch on Nov 7. Ruff! 🐶
122
263
1K
37
146
1K
Omg dead 😂
"There are only 2 hard things in computer science:
- Naming things
- Vertically centering things"
-
@DavidKPiano
#CSSconfEU
24
614
1K
Remember that one time you were going to rebuild your portfolio site over quarentine?
76
73
1K
🔥 `content-visibility` is landing in Chromium 85!
This CSS prop gives you some serious perf gains by skipping layout, style, and paint until needed!
✨ the auto value does this automatically
A demo we tested had initial render drop from 232 to 30ms!😱
19
322
1K
:has() + container queries = the component-based logical styling we've always dreamed of 😍
In this demo:
🖼 If the card has an image: make the font smaller & at < 400px wide, stack it
✨ If no image: bigger font, no stacking
⚠️ Need flags on in Canary
22
176
1K
Two of the best humans in tech I know got married today!!! Congrats
@sarah_edo
and
@dizzyd
💕👰🏼🤵🏻🎊
37
58
1K
Good news y’all! In a world of fake women-in-tech grifters, fortunately I’m a real person who’s been putting out real (free) tech content, running meetups, & speaking at conferences since 2013!
Follow me for CSS, UI, performance and more 🥳
(& occasional photos of my dog 🐶)
25
49
1K
You can learn anything, but you can't learn everything 🙃
So accept that, and focus on what matters to you
15
396
1K
We're getting close to finalizing an API to enable a customizable native select element!
🥳 Now it's in stage 2 in the WHATWG & we'd love to hear your thoughts.
This post details how to use it, new elements and parts, and what you can do today 🔮
30
179
1K
Nothing makes me feel as smart as solving some basic 8th grade geometry 😂
19
59
1K
Its 2017. Design & engineering are incredibly intertwined, but companies still don't really know what to do with hybrid skillsets 😐🤔
52
326
993
Wow it seems like everyone's leaving their jobs and starting new roles! I have some personal news too.
Tomorrow, it will be my last day at Google.
Until Monday, I'll be back Monday. Just taking a lil weekend vacation 🙂
I'll miss my team & I'm excited for this new adventure 😂
43
13
990
I taught my 13 week old puppy how to smile on command 😛 Happy Weekend!
25
46
988
Alright ladies, time to pack it up. Angry man on internet says we shouldn’t code.
57
27
978
Does anyone else just do the lazy up arrow until they find "npm run dev"?
98
22
957
It's weird how working from home has become the place to be productive, and going into the office is for social hour
18
110
931
😱 I just realized I forgot to tweet my favorite photos from Noogler week!
21
19
921
🚨 An experimental flag for container queries (
@container
) just hit Chrome Canary!
Yes, seriously!
Go to: chrome://flags in your URL bar and turn on enable-container-queries to try it out.
Here's a demo to help you see how they work (w/flag in Canary):
22
262
920
CSS aspect ratio is finally here! 😱🥳🎉
13
207
906
🤯 Did you know that you can type `` or `` in your URL bar and it makes a new google doc/sheet/form/etc!?!?!?!?!?!! 🤯
Introducing a ✨ .new ✨ time-saving trick for users. Type any of these .new domains to instantly create Docs, Sheets, Slides, Sites or Forms ↓
159
3K
5K
21
285
896
✨🎉✨Introducing CSSGram: ✨🎉✨
A tiny (<1kb gzipped!) CSS library for Instagram filters.
22
526
882
TIL: Just like you can copy an SVG from Illustrator into a text file, you can copy an SVG from a text file and paste it into Illustrator 🤯
11
205
863
Saving you a click:
- Last week sucked for me.
- Sorry I’m not sorry
- Good luck if you left
- Thank you if you stayed
- Customers, please don’t drop us
- This will blow over
15
63
847
You won’t need to use display grid/flex for align-content anymore 🙂
That means you can be more intentional with the layout algorithm and avoid unintended side effects when you just want this centering feature
15
110
786
I used to write "Convert your CSS codebase into Sass!" guides
Now I think it's time for a "Convert your Sass codebase into vanilla CSS!" guide
47
54
825
🎉 Today my team is launching Learn CSS!
A free course that guides you through CSS fundamentals + some advanced techniques
Use the modules as reference or go through the entire set in order, w/demos, diagrams, and check-ins to test your comprehension 😎
⭐ Want to level up your web styling expertise?
This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Learn the Core aspects of CSS and how to use them.
Get started →
11
638
2K
14
196
817
Responsive card > Responsive button > Responsive icon
Container queries are the future y'all.
SO dope to work with.
Demo requires Canary + Container Queries flag
Uses:
- Newer `container: inline-size` syntax
- Named containers to query diff parents
19
128
803
Some professional news 🙂
Friday was my last day as a Senior DevRel Eng at Google
This week I’m a Staff DevRel Eng at Google 😎
Very excited about what we’ve been able to achieve for UI devs on the web platform so far & what’s to come!!
Pic of Disco & I celebrating our promos
74
1
792
TIL: you don’t have to encode an SVG to use it as a data uri — you can use readable SVGs!
@LeaVerou
#FrontendUnited
12
143
784
Thought you couldn't apply color functions in vanilla CSS?
✨ THINK AGAIN! ✨
❌ No Preprocessors
❌ No PostProcessors
❌ No JS
✅ calc() and CSS Variables!
➡️ Here's an example of mix():
See my previous tweets for more color functions!
13
176
778
HTML, CSS, JavaScript
9
85
767
More than ever, I'm getting emails like "I've been a React dev for 5 years, now how do I learn CSS?"
& I'm realizing that as the prevalence of JS frameworks is on the rise, the need to learn basic CSS is on the rise, too.
52
103
763
FINALLY!!!! The gap property is in Chrome Canary 🙏
I've been waiting for this day for ages.
So many layout woes will be resolved 🎇
🎉 flex that gap in the latest release of Chrome Canary 🎉
```css
display: flex; 🦾
gap: 1ch; 🔥
```
early adopters:
help us test it out won't ya!?
note:
requires web experiments enabled, visit chrome://flags/
#enable
-experimental-web-platform-features in Canary to enable
70
637
3K
13
116
759
Anyone have a beginner JavaScript course you really like and would recommend to someone with 0 coding experience?
193
92
748
I'm joining
@Google
as a Developer Advocate for
@materialdesign
in April! ✨
Really looking forward to working with the team 🤗
Wrote some words here:
107
17
747
Did you catch that the dialog element became stable in all modern browser engines this month? 🎉
Here's a quick walkthrough video & demo to play with:
Webkit blog:
MDN docs:
17
161
736
✨ hr in select is now in all major desktop browsers*✨
*(not yet on mobile)
Learn more:
10
87
751
Hey y'all, check out my new NFT project: JSNFT
We're minting all native JavaScript functions, & anytime someone uses the function you own, they have to pay you royalties.
Yes yes, totally reasonable NFT project.
Nobody is allowed to use querySelector() now without paying me.
57
74
723
🚨
This is the named CSS color "hotpink" in Chrome (left) vs. Firefox (right)
Why so different!?
70
142
720
CSS Cascade layers are coming to Chromium 99 (currently in Canary) & Firefox 97 (currently in Nightly)
So what are they & how do you use them? 👀
I made a quick video to show you:
25
147
705
Writing lots of code is cool but have you tried DELETING lots of code?! 😍
51
48
695
✨🚀 Just finished up the gradient folders! 🎉✨
✨🌈 Inject more color in your life (& desktop) 😎✨
36
126
688
🎉 Blog post just went live!
😎 Learn about some really powerful and concise lines of code that bring zen and clarity to writing your web layouts!
➡️
😊 Very happy with how this (and the video, linked within the post) came out!
14
194
681
Did you know popovers are about to land in stable Chrome?!
I just wrote a post all about how to use them 😁
Popovers give you a lot for free:
- top layer promotion
- light-dismiss behavior
- focus management
- accessible keyboard bindings
Learn more ⬇️
20
126
684
Never underestimate the privilege of English as a first language in a global career market (like tech)
19
58
662
Ugh I love CSS.
One-liner for checking if an element has children (i.e. search result list)
#youMightNotNeedJS
19
176
638
Stable today in Chrome 114 🎉:
🎁 CSS: text-wrap: balance
🍿 HTML: popover API
⏱️ JS: scrollend event
🎥 Video:
11
123
633