Una 🇺🇦 @Una Twitter profile

Last Seen Profiles

@VKosmopoulos

@susanlorr

@aimeecarrero

@cbonac

@Gab_iguana

@cadengreer_9

@RSprachrohr

@DonbasDIY

@bootsilva_

@labour_local

@HamadHouss61941

@LabourRichard

@griffinbarrowsx

@CoachDRamey613

@Bilbymon

@BrandonPresley

@zanotwitte

@Hedgehog291

@IceBreached

@jack_harre

@idletan_twtt

@UKEVSoc

@Delta_Exchange

@CrifDeutschland

@FreeBandzTwill

@PenfoldDavid

@MuseoTuitero

@tsubuyaki238

@petitabell

@jaylaarachellee

@Mila_Quebec

@pepesolis026061

@jasmine_tea88

@SoldierVAL_

@tradinglord

@LastChance28719

Una 🇺🇦

@Una

5 years

This weekend I: ✅ Recorded a song about array methods ✅ Realized I have no life

172

2K

5K

Una 🇺🇦

@Una

4 years

🎉 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

Una 🇺🇦

@Una

4 years

This made my night

47

633

4K

Una 🇺🇦

@Una

3 years

Have you seen the new flexbox debugging features in Chrome DevTools?! Prettttyyy darn cool

55

672

3K

Una 🇺🇦

@Una

2 years

`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

613

3K

Una 🇺🇦

@Una

5 years

Hello, you’ve been blessed with a good week by this happy puppo 🙏🐶 pass it on

15

339

3K

Una 🇺🇦

@Una

6 years

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!

49

636

2K

Una 🇺🇦

@Una

4 years

🌈 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!

118

41

2K

Una 🇺🇦

@Una

6 years

"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

331

2K

Una 🇺🇦

@Una

4 years

🤯🤯🤯 THIS IS A NATIVE BROWSER FEATURE!? 🤯🤯🤯

Tomek Sułkowski

@sulco

4 years

#HTML / #UX tip for today: Setting `autocomplete="one-time-code"` will allow your user to fill the input field with the auth code they've just received - without the need to manually copy it from a message.

47

1K

5K

32

325

2K

Una 🇺🇦

@Una

6 years

Programming: Some days you're an architect, some days you're a janitor

32

661

2K

Una 🇺🇦

@Una

3 years

.lockdown { margin: 6ft; padding: 15lbs; position: couch; }

43

263

2K

Una 🇺🇦

@Una

3 years

Unsubscribe buttons should have a minimum legal size

60

146

2K

Una 🇺🇦

@Una

4 years

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

512

2K

Una 🇺🇦

@Una

5 months

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

319

2K

Una 🇺🇦

@Una

3 years

Some personal news 👰🏻‍♀️💒

165

9

2K

Una 🇺🇦

@Una

6 years

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 😎

44

477

2K

Una 🇺🇦

@Una

4 years

🤔 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

389

2K

Una 🇺🇦

@Una

1 year

My neck

Kyle⚡

@elyktrix

1 year

What’s stopping you from coding like this

2K

1K

14K

28

73

2K

Una 🇺🇦

@Una

3 years

MY HEART

Umair Hafeez 🔰

@_UmairHafeez_

3 years

A short tutorial to understand z-index in CSS 👇

241

3K

13K

32

182

2K

Una 🇺🇦

@Una

1 year

👀 An early look at transitioning to and from `display: none` in CSS 👀

60

223

2K

Una 🇺🇦

@Una

5 years

1 week of conference travel = 1 very waggy boy 🐶

42

87

2K

Una 🇺🇦

@Una

7 months

🆕 Quick HTML Tip: Now you can add horizontal rules between options in select elements 🚀 Support: Chrome 119 & Safari 17

30

269

2K

Una 🇺🇦

@Una

3 years

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.

Hiten Shah

@hnshah

3 years

What was the most memorable experience you had while interviewing for a job?

316

40

336

71

86

2K

Una 🇺🇦

@Una

3 years

🚨 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

405

2K

Una 🇺🇦

@Una

4 years

For 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 charge by implementing in their product moving forward 🙂

321

274

2K

Una 🇺🇦

@Una

2 years

I’m Ukrainian and my entire family is from Kiev (some still live there) so this hits (literally) close to home 😔

The Spectator Index

@spectatorindex

2 years

BREAKING: Explosions are being heard in several Ukrainian cities, including Kyiv and Kharkiv.

187

2K

6K

135

49

2K

Una 🇺🇦

@Una

4 years

#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

281

2K

Una 🇺🇦

@Una

3 years

I was today years old when I learned that:

Addy Osmani

@addyosmani

4 years

TIL CSS "background-repeat: round" ~ repeats background images without clipping ✂️

66

2K

8K

22

184

2K

Una 🇺🇦

@Una

7 years

Why is it called 'git blame' and not 'git credit'

111

457

2K

Una 🇺🇦

@Una

1 month

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

171

2K

Una 🇺🇦

@Una

4 years

🙋🏻‍♀️ Raise your hand if you've used the padding hack for aspect ratio

131

41

1K

Una 🇺🇦

@Una

4 years

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

132

8

1K

Una 🇺🇦

@Una

4 years

New workspace 🌱

49

20

1K

Una 🇺🇦

@Una

2 years

If you haven't checked out Patterns yet, DO! It's really useful!

11

230

1K

Una 🇺🇦

@Una

5 years

I am unbelievably excited to share this with y’all!!! 🎉🐶🎉👩🏻‍💻🎉

Google for Developers

@googledevs

5 years

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! 🐶

124

269

1K

37

146

1K

Una 🇺🇦

@Una

7 years

Omg dead 😂 "There are only 2 hard things in computer science: - Naming things - Vertically centering things" - @DavidKPiano #CSSconfEU

24

620

1K

Una 🇺🇦

@Una

4 years

Remember that one time you were going to rebuild your portfolio site over quarentine?

76

73

1K

Una 🇺🇦

@Una

2 years

: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

179

1K

Una 🇺🇦

@Una

4 years

🔥 `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

325

1K

Una 🇺🇦

@Una

5 years

When a CSS developer goes to a museum

16

178

1K

Una 🇺🇦

@Una

6 years

Two of the best humans in tech I know got married today!!! Congrats @sarah_edo and @dizzyd 💕👰🏼🤵🏻🎊

37

59

1K

Una 🇺🇦

@Una

3 years

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

50

1K

Una 🇺🇦

@Una

3 years

🚨 New CDC guidelines say CSS is a programming language

28

108

1K

Una 🇺🇦

@Una

3 years

How does Chrome render pixels on the screen? Learn all about RenderingNG from @chrishtr :

13

253

1K

Una 🇺🇦

@Una

7 years

You can learn anything, but you can't learn everything 🙃 So accept that, and focus on what matters to you

16

398

1K

Una 🇺🇦

@Una

5 years

Nothing makes me feel as smart as solving some basic 8th grade geometry 😂

19

62

1K

Una 🇺🇦

@Una

3 years

Don't forget to link your labels to your checkboxes and radio inputs!

23

139

1K

Una 🇺🇦

@Una

7 years

Its 2017. Design & engineering are incredibly intertwined, but companies still don't really know what to do with hybrid skillsets 😐🤔

53

330

1K

Una 🇺🇦

@Una

5 years

I taught my 13 week old puppy how to smile on command 😛 Happy Weekend!

25

47

1K

Una 🇺🇦

@Una

1 year

`text-wrap: balance` in action 🎬

Una 🇺🇦

@Una

1 year

Wowowow Intent to Ship for `text-wrap: balance`

9

10

133

26

141

1K

Una 🇺🇦

@Una

3 years

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 😂

44

14

1K

Una 🇺🇦

@Una

2 years

Alright ladies, time to pack it up. Angry man on internet says we shouldn’t code.

58

29

997

Una 🇺🇦

@Una

3 years

Does anyone else just do the lazy up arrow until they find "npm run dev"?

99

22

985

Una 🇺🇦

@Una

7 years

Outfit of the day 💁🏻

31

45

967

Una 🇺🇦

@Una

5 years

😱 I just realized I forgot to tweet my favorite photos from Noogler week!

21

19

946

Una 🇺🇦

@Una

3 years

Can someone please teach me how to make passive income? 🙏

162

33

928

Una 🇺🇦

@Una

3 years

It's weird how working from home has become the place to be productive, and going into the office is for social hour

18

109

952

Una 🇺🇦

@Una

3 years

🚨 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

266

937

Una 🇺🇦

@Una

3 years

CSS aspect ratio is finally here! 😱🥳🎉

New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly...

Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.

web.dev

13

209

929

Una 🇺🇦

@Una

5 years

🤯 Did you know that you can type `` or `` in your URL bar and it makes a new google doc/sheet/form/etc!?!?!?!?!?!! 🤯

Google Docs

@googledocs

6 years

Introducing a ✨ .new ✨ time-saving trick for users. Type any of these .new domains to instantly create Docs, Sheets, Slides, Sites or Forms ↓

156

3K

5K

21

288

913

Una 🇺🇦

@Una

9 years

✨🎉✨Introducing CSSGram: ✨🎉✨ A tiny (<1kb gzipped!) CSS library for Instagram filters.

22

529

895

Una 🇺🇦

@Una

6 years

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

885

Una 🇺🇦

@Una

6 years

If you’re wondering what kind of person I am

81

62

881

Una 🇺🇦

@Una

3 years

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

An Update

Last week was terrible. We started with policy changes that felt simple, reasonable, and principled, and it blew things up internally in ways we never anticipated. David and I completely own the...

world.hey.com

15

63

864

Una 🇺🇦

@Una

5 months

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

一丝

@yisibl

5 months

Vertical centering used to be one of the biggest CSS layout headaches, but now the display: block element can be vertically centered by align-content: center. Which has been implemented in Chrome Canary and WebKit Nightly. Thanks @fantasai and tkent.

19

114

421

16

121

805

Una 🇺🇦

@Una

3 years

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

48

54

839

Una 🇺🇦

@Una

3 years

🎉 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 😎

Learn CSS | web.dev

An evergreen CSS course and reference to level up your web styling expertise.

web.dev

Chrome for Developers

@ChromiumDev

3 years

⭐ 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

652

2K

14

197

830

Una 🇺🇦

@Una

3 years

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

130

819

Una 🇺🇦

@Una

7 years

CSS in a nutshell.

14

418

799

Una 🇺🇦

@Una

2 years

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

806

Una 🇺🇦

@Una

5 years

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!

Color Mix in Vanilla CSS

...

codepen.io

14

182

799

Una 🇺🇦

@Una

5 years

TIL: you don’t have to encode an SVG to use it as a data uri — you can use readable SVGs! @LeaVerou #FrontendUnited

12

145

798

Una 🇺🇦

@Una

4 years

HTML, CSS, JavaScript

♡♥Jans♡♥

@GoldenJans

4 years

Can y’all even name the 3 branches of government?

10K

2K

20K

9

89

791

Una 🇺🇦

@Una

4 years

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

784

Una 🇺🇦

@Una

3 years

Woah! This Emmet preview screen on @codepen is so neat!

7

71

785

Una 🇺🇦

@Una

4 years

FINALLY!!!! The gap property is in Chrome Canary 🙏 I've been waiting for this day for ages. So many layout woes will be resolved 🎇

Adam Argyle

@argyleink

4 years

🎉 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

649

3K

13

119

772

Una 🇺🇦

@Una

3 years

Anyone have a beginner JavaScript course you really like and would recommend to someone with 0 coding experience?

195

93

758

Una 🇺🇦

@Una

4 years

Having a good manager is more important to your job satisfaction and growth potential than enjoying the work you do.

Jack Appleby

@jappleby

4 years

What’s the most important lesson you learned at the job you hated most?

550

62

568

17

83

754

Una 🇺🇦

@Una

5 years

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

758

Una 🇺🇦

@Una

2 years

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

166

754

Una 🇺🇦

@Una

1 month

✨ hr in select is now in all major desktop browsers*✨ *(not yet on mobile) Learn more:

11

87

757

Una 🇺🇦

@Una

4 years

Happy 4th of July weekend! 🇺🇸

8

15

747

Una 🇺🇦

@Una

2 years

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.

Dan "Quietly Quit" Hon

@hondanhon

2 years

Jesus. Fucking. Christ.

367

1K

9K

58

74

742

Una 🇺🇦

@Una

5 years

🚨 This is the named CSS color "hotpink" in Chrome (left) vs. Firefox (right) Why so different!?

70

143

734

Una 🇺🇦

@Una

9 months

Smooth list morphing with view transitions 😎 I'm a convert 💯

16

90

724

Una 🇺🇦

@Una

2 years

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

151

724

Una 🇺🇦

@Una

6 years

✨🚀 Just finished up the gradient folders! 🎉✨ ✨🌈 Inject more color in your life (& desktop) 😎✨

36

129

704

Una 🇺🇦

@Una

3 years

Writing lots of code is cool but have you tried DELETING lots of code?! 😍

51

49

705

Una 🇺🇦

@Una

4 years

🎉 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!

Ten modern layouts in one line of CSS | Articles | web.dev

This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

web.dev

14

198

697

Una 🇺🇦

@Una

1 year

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 ⬇️

Introducing the popover API | Blog | Chrome for Developers

Learn how to build tooltips, menus, and more with the new popover API.

developer.chrome.com

20

128

689

Una 🇺🇦

@Una

4 years

Never underestimate the privilege of English as a first language in a global career market (like tech)

20

58

676

Una 🇺🇦

@Una

7 months

I've been testing the <selectlist> prototype implementation in Canary recently to give ergonomic feedback and get accessibility feedback It's been so much fun to play with this powerful API! 💯🎉 Here's the AirBnb select built without any JS @openuicg

12

90

667

Una 🇺🇦

@Una

7 years

Ugh I love CSS. One-liner for checking if an element has children (i.e. search result list) #youMightNotNeedJS

19

180

656

Una 🇺🇦

@Una

3 years

Greece 🇬🇷 Bucket list ✅

18

4

657

Una 🇺🇦

@Una

2 years

A sad day for the tech community 💔

35

32

635

Una 🇺🇦

@Una

1 year

How can you tell that something is written in Rust? . . . . . . . . . . Don't worry, they'll tell you

33

47

645

Una 🇺🇦

@Una

11 months

Stable today in Chrome 114 🎉: 🎁 CSS: text-wrap: balance 🍿 HTML: popover API ⏱️ JS: scrollend event 🎥 Video:

New in Chrome 114: text-wrap:balance, CHIPS, Popover API and more!

Chrome 114 is rolling out now! With text-wrap: balance to improve text layouts, Cookies Having Independent Partitioned State are here, the new Popover API ma...

www.youtube.com

11

128

640

Una 🇺🇦

@Una

3 years

We need to fix the web.

Shit User Story

@ShitUserStory

3 years

As a... – visitor I want to... – accept cooki… oh, close the special offer moda… oh, close the invite to surve… oh, close the chat windo… oh, wait for ad placeholders to shift the layout before I give up and close the tab so that... – I can see the ‘before you leave’ modal

30

708

4K

20

69

644

Una 🇺🇦

@Una

4 years

CSS is FULL of functions! - color - gradients - values like attr() & url() - math - grid - pseudo selectors - animation functions, i.e. cubic-bezier(), steps() - shapes, i.e. polygon() - sizing, i.e. scale() Hear about these & more in today's #CSSPodcast

The CSS Podcast

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets...

pod.link

9

113

638