Una 🇺🇦
@Una
Followers
91,186
Following
1,459
Media
2,881
Statuses
30,521
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
#BUS_KnockKnockKnock_KhonKaen
• 1249980 Tweets
スプリンターズS
• 85794 Tweets
CRかるび
• 47226 Tweets
WIN AT TODAY SHOW
• 42225 Tweets
スプリンターズステークス
• 34627 Tweets
ナムラクレア
• 25463 Tweets
三原じゅん子
• 22283 Tweets
REBECCA SUPPORTING ACTRESS
• 20328 Tweets
西村騎手
• 19965 Tweets
サトノレーヴ
• 19405 Tweets
ママコチャ
• 19019 Tweets
西村淳也
• 17339 Tweets
YINWAR x VIF x TOPS
• 15792 Tweets
#njdest
• 15768 Tweets
#相葉マナブ
• 15252 Tweets
ドゥラメンテ
• 14865 Tweets
マッドクール
• 14192 Tweets
ピューロマジック
• 10503 Tweets
This weekend I:
✅ Recorded a song about array methods
✅ Realized I have no life
171
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
663
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
608
3K
Hello, you’ve been blessed with a good week by this happy puppo 🙏🐶 pass it on
15
332
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
366
4K
45
261
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!
48
631
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!
117
42
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
330
2K
🤯🤯🤯 THIS IS A NATIVE BROWSER FEATURE!? 🤯🤯🤯
32
322
2K
Programming: Some days you're an architect, some days you're a janitor
32
656
2K
I’ve been working on a little side project this year 👀
:first-child launching next month 🥰
Very excited for this new life chapter 🧡🌈🍂
159
11
2K
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
509
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">..</>
65
314
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 😎
43
473
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
385
2K
MY HEART
32
177
2K
🆕 Quick HTML Tip: Now you can add horizontal rules between options in select elements
🚀 Support: Chrome 119 & Safari 17
31
266
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:
19
400
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?
313
40
328
71
86
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.
186
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
276
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
170
2K
🙋🏻♀️ Raise your hand if you've used the padding hack for aspect ratio
130
41
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
131
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
264
1K
37
146
1K
Omg dead 😂
"There are only 2 hard things in computer science:
- Naming things
- Vertically centering things"
-
@DavidKPiano
#CSSconfEU
24
617
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
323
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
23
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
16
397
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 🔮
29
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
327
1K
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
1K
I taught my 13 week old puppy how to smile on command 😛 Happy Weekend!
25
46
996
Alright ladies, time to pack it up. Angry man on internet says we shouldn’t code.
57
27
988
Does anyone else just do the lazy up arrow until they find "npm run dev"?
99
22
965
It's weird how working from home has become the place to be productive, and going into the office is for social hour
18
111
939
😱 I just realized I forgot to tweet my favorite photos from Noogler week!
21
19
926
🚨 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
264
924
CSS aspect ratio is finally here! 😱🥳🎉
13
209
913
🤯 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 ↓
158
3K
5K
21
285
904
✨🎉✨Introducing CSSGram: ✨🎉✨
A tiny (<1kb gzipped!) CSS library for Instagram filters.
22
528
887
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
870
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
855
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
16
111
787
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
826
🎉 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
646
2K
14
197
825
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
21
128
808
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
798
TIL: you don’t have to encode an SVG to use it as a data uri — you can use readable SVGs!
@LeaVerou
#FrontendUnited
12
144
791
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
178
781
HTML, CSS, JavaScript
9
86
774
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
770
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
638
3K
13
117
761
Anyone have a beginner JavaScript course you really like and would recommend to someone with 0 coding experience?
194
91
746
I'm joining
@Google
as a Developer Advocate for
@materialdesign
in April! ✨
Really looking forward to working with the team 🤗
Wrote some words here:
108
17
756
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
162
740
✨ 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
731
🚨
This is the named CSS color "hotpink" in Chrome (left) vs. Firefox (right)
Why so different!?
70
142
728
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
712
✨🚀 Just finished up the gradient folders! 🎉✨
✨🌈 Inject more color in your life (& desktop) 😎✨
36
128
693
Writing lots of code is cool but have you tried DELETING lots of code?! 😍
51
49
696
🎉 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
197
690
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
668
Ugh I love CSS.
One-liner for checking if an element has children (i.e. search result list)
#youMightNotNeedJS
19
180
645
How can you tell that something is written in Rust?
.
.
.
.
.
.
.
.
.
.
Don't worry, they'll tell you
32
47
641