XOutlier
Download .zipAdd to Chrome

Una 🇺🇦

@Una88k followers

Building the web you build on @GoogleChrome ✨🎨 Web Experience DevRel Lead 🦄 @csswg + @openuicg. #CSSPodcast host 🎬

Open on X
Top outlier
27.7×
Best organic post
Peak views
380k
Single post
Bookmarks
13k
Across 98 organic posts
Last scan
Oct 17
Community cache
Posts 98 posts
#DatePost↓ OutlierViewsLikesRepostsBookmarks
1Nov 27, '23No-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) - light27.7×380k1.9k2901.2k
2Jun 5, '24Yall. 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. 🤯🤯🤯 @fser24.3×332k2.4k232965
3Apr 25, '23👀 An early look at transitioning to and from `display: none` in CSS 👀19.7×269k1.6k200406
4Feb 28, '23`text-wrap: balance` in action 🎬16.6×228k919125171
5Oct 23, '23🆕 Quick HTML Tip: Now you can add horizontal rules between options in select elements 🚀 Support: Chrome 119 & Safari 1714.9×204k1.5k228271
6Feb 4, '23My neck12.3×168k1.6k6310
7Aug 13, '25🥳 CSS functions have arrived!!! 🥳 And they are *AWESOME* Now, you can do things like this: @​function --alpha(--color, --opacity) { result: rgb(from var(--color) r g b / var(--op12.1×165k1.4k167394
8Sep 3, '24I’ve been working on a little side project this year 👀 :first-child launching next month 🥰 Very excited for this new life chapter 🧡🌈🍂10.8×148k2.4k1044
9Feb 3, '19This weekend I: ✅ Recorded a song about array methods ✅ Realized I have no life10×04.8k1.4k190
10May 14, '20🎉 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 569.4×04.6k1.2k257
11Apr 3, '24Super simple scroll-driven progressive enhancement: animate in your images 🩷 @​keyframes appear { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } } img { animation: 8.9×122k1.4k1481.1k
12Sep 15, '25To do this with the (upcoming) interest invoker API, it's 1 line of code: .parent:has(:interest-source) button { interest-show-delay: 0s; } You have your default delay. Then, you u6.8×94k95949536
13May 16, '25Introducing 🤯 flex-wrap: balance 🤯 Would you use this? ⚠️ Not a "real" feature yet, just something one of our engineers has been working on. (You can try it out in the latest Chr6.8×93k1.5k118311
14Dec 19, '23You 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 jus6.6×90k726100142
15Aug 15, '23Smooth list morphing with view transitions 😎 I'm a convert 💯6.3×87k66484285
16Sep 12, '24We'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 detai6.1×84k977159178
17Oct 14, '25View transitions are in every browser now ✨6.0×82k8017367
18Oct 7, '20This made my night5.9×03.7k54754
19May 14, '24Apparently I made it on the livestream 😂😂😂 #GoogleIO5.8×80k1.2k2023
20Apr 17, '21Have you seen the new flexbox debugging features in Chrome DevTools?! Prettttyyy darn cool5.5×02.9k591201
21Mar 22, '22`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 { a5.4×02.6k529412
22Jul 2, '20Thanks 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 imp4.5×01.9k463466
23Apr 23, '18Hello! 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 wo4.2×02.1k542167
24Jun 19, '18Programming: Some days you're an architect, some days you're a janitor3.8×01.9k5948
25Oct 26, '20🤯🤯🤯 THIS IS A NATIVE BROWSER FEATURE!? 🤯🤯🤯3.7×02.1k295211
26Jul 28, '19Hello, you’ve been blessed with a good week by this happy puppo 🙏🐶 pass it on3.6×02.5k2943
27Apr 27, '20🤔 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 p3.4×01.7k351244
28Jun 11, '20For what it’s worth, I’m *super* happy to rename the default branch structure of “master” to “main” and I hope we can all do this together as a community with @github leading the c3.4×01.4k24048
29Jun 9, '25backdrop-filter: blur()3.4×46k7491248
30Jan 11, '18"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%; m3.3×02.1k29637
31Mar 27, '24✨ hr in select is now in all major desktop browsers*✨ *(not yet on mobile) Learn more:3.3×45k6847882
32Jan 5, '18A 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 own3.2×01.7k4252
33Aug 17, '21🚨 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: Chromi3.2×01.5k356209
34Sep 24, '17Why is it called 'git blame' and not 'git credit'2.9×01.4k4100
35Jan 9, '25I ❤️ SVG2.9×39k67137284
36Apr 23, '21.lockdown { margin: 6ft; padding: 15lbs; position: couch; }2.9×01.9k22517
37Mar 9, '20🌈 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 of2.8×02.1k3819
38Nov 12, '21If you haven't checked out Patterns yet, DO! It's really useful!2.7×01.2k205389
39May 5, '17Omg dead 😂 "There are only 2 hard things in computer science: - Naming things - Vertically centering things" -@DavidKPiano #CSSconfEU2.7×01.1k5590
40Jun 29, '20#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, 2.7×01.4k234210
41Nov 3, '21Unsubscribe buttons should have a minimum legal size2.6×01.8k1247
42Feb 26, '21I was today years old when I learned that:2.4×01.4k162165
43Sep 7, '21MY HEART2.4×01.6k16447
44Aug 5, '20🔥 `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 aut2.4×01.1k281160
45Oct 5, '21Some personal news 👰🏻‍♀️💒2.3×01.7k913
46Apr 2, '22: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 wid2.2×01.1k156243
47Jul 26, '21How does Chrome render pixels on the screen? Learn all about RenderingNG from @chrishtr:2.2×0998235210
48Oct 14, '21Anyone have a beginner JavaScript course you really like and would recommend to someone with 0 coding experience?2.2×069584366
49Jan 19, '215 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 mod2.1×01.5k7942
50Oct 25, '15✨🎉✨Introducing CSSGram: ✨🎉✨ A tiny (<1kb gzipped!) CSS library for Instagram filters.2.1×08234781
51Sep 8, '191 week of conference travel = 1 very waggy boy 🐶2.1×01.5k7817
52Sep 1, '17You can learn anything, but you can't learn everything 🙃 So accept that, and focus on what matters to you2.0×09323431
53Oct 17, '19I am unbelievably excited to share this with y’all!!! 🎉🐶🎉👩🏻‍💻🎉1.9×01.1k126109
54Feb 24, '22I’m Ukrainian and my entire family is from Kiev (some still live there) so this hits (literally) close to home 😔1.9×01.4k4410
55Dec 5, '20Can someone please teach me how to make passive income? 🙏1.9×083227263
56Mar 26, '21🚨 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 try1.9×082922697
57Mar 23, '17Its 2017. Design & engineering are incredibly intertwined, but companies still don't really know what to do with hybrid skillsets 😐🤔1.9×09002871
58May 12, '20🙋🏻‍♀️ Raise your hand if you've used the padding hack for aspect ratio1.9×01.3k3632
59May 18, '21🎉 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 set1.8×0739178197
60Apr 24, '19🤯 Did you know that you can type `` or `` in your URL bar and it makes a new google doc/sheet/form/etc!?!?!?!?!?!! 🤯1.7×082926338
61Dec 31, '19On 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 ye1.7×01.3k64
62Jan 29, '21CSS aspect ratio is finally here! 😱🥳🎉1.7×083418092
63Mar 16, '19When a CSS developer goes to a museum1.7×01k16113
64Oct 16, '20Remember that one time you were going to rebuild your portfolio site over quarentine?1.7×01.1k6420
65Mar 30, '17CSS in a nutshell.1.6×06753490
66Oct 5, '20New workspace 🌱1.6×01.2k2042
67Apr 27, '21Don't forget to link your labels to your checkboxes and radio inputs!1.6×093212185
68Sep 1, '21Responsive card > Responsive button > Responsive icon Container queries are the future y'all. SO dope to work with. Demo requires Canary + Container Queries flag Uses: - Newe1.5×0742116146
69Jan 14, '22CSS 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 sh1.5×0645125158
70Mar 29, '22Did 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:1.5×0675134119
71Aug 26, '18TIL: 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 🤯1.4×078217817
72Jul 3, '19Thought 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()1.4×069915084
73May 17, '21🚨 New CDC guidelines say CSS is a programming language1.4×0944898
74Sep 2, '18Two of the best humans in tech I know got married today!!! Congrats @sarah_edo and @dizzyd 💕👰🏼🤵🏻🎊1.3×0981582
75Jul 3, '21Good 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 confer1.3×09654420
76Apr 28, '19Nothing makes me feel as smart as solving some basic 8th grade geometry 😂1.3×09425420
77Oct 13, '21It's weird how working from home has become the place to be productive, and going into the office is for social hour1.3×083610120
78Jun 18, '19🚨 This is the named CSS color "hotpink" in Chrome (left) vs. Firefox (right) Why so different!?1.3×066612125
79May 17, '19TIL: you don’t have to encode an SVG to use it as a data uri — you can use readable SVGs! @LeaVerou #FrontendUnited1.3×071512361
80Aug 23, '19I taught my 13 week old puppy how to smile on command 😛 Happy Weekend!1.3×0925449
81Oct 21, '21Does anyone else just do the lazy up arrow until they find "npm run dev"?1.2×0841207
82Aug 19, '20More 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, the1.2×06918133
84Oct 11, '18If you’re wondering what kind of person I am1.2×0784530
85Aug 9, '17Outfit of the day 💁🏻1.2×0876430
86Apr 6, '21Wow 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 Monday1.2×0912127
87Apr 27, '20FINALLY!!!! The gap property is in Chrome Canary 🙏 I've been waiting for this day for ages. So many layout woes will be resolved 🎇1.2×069910230
88May 22, '22Alright ladies, time to pack it up. Angry man on internet says we shouldn’t code.1.1×0850267
89Jan 8, '18✨🚀 Just finished up the gradient folders! 🎉✨ ✨🌈 Inject more color in your life (& desktop) 😎✨1.1×06331160
90Mar 25, '21I 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!" guide1.1×07504322
91Apr 19, '19😱 I just realized I forgot to tweet my favorite photos from Noogler week!1.1×0859193
92Jan 30, '22Hey 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 y1.1×06265433
93Nov 9, '20Woah! This Emmet preview screen on @codepen is so neat!1.0×07126121
94May 5, '21Saving 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 over1.0×07344914
95Sep 23, '20Having a good manager is more important to your job satisfaction and growth potential than enjoying the work you do.1.0×06617410
96Nov 5, '20HTML, CSS, JavaScript1.0×0685713
98May 3, '22Some 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 f1.0×073311
99Jan 28, '21Writing lots of code is cool but have you tried DELETING lots of code?! 😍0.9×0630413
100Jul 5, '20Happy 4th of July weekend! 🇺🇸0.8×0659132

Scan another creator

@
@karpathy@levelsio@paulg@naval@marclou@illyism

Run this on any account.

XOutlier builds this table for every public profile you open on x.com, with live data and every post, not just the top 50.

Add to Chrome Download .zip