Lea VerouVerified account

@LeaVerou

Elected member, HCI , IE, author. Made . I ♥ standards, code, design, UX, life! she/her

Boston, MA
lea.verou.me
Joined February 2009
Born June 13
510 Photos and videos Photos and videos

Tweets

You blocked @LeaVerou

Are you sure you want to view these Tweets? Viewing Tweets won't unblock @LeaVerou

  1. Pinned Tweet
    Jan 7

    Very humbled to be elected to the ! Huge impostor syndrome rn. Huge thanks to every company who voted for me. Special thanks to and for travel funding and for nominating me. Looking forward to making the Web better alongside fellow TAG members!

    62 replies 24 retweets 813 likes
    Show this thread
    Show this thread
    Undo
  2. 5 hours ago

    If you had a way to get the grandparent's (or other ancestor) font-size in CSS, what would you use it for? I.e. <div class="bigger"> This text is bigger <p>This should not be bigger</p> </div> I've seen people do weird em math to undo parent modifications, but can't find it.

    7 replies 1 retweet 7 likes
    Undo
  3. Retweeted
    21 hours ago

    My brain is on overdrive after ’s 1st day “Dynamic CSS Masterclass” 😎😊🤩 Time flew by… Can’t wait for tomorrow — thankxx! by

    3 retweets 19 likes
    Undo
  4. Retweeted
    May 24

    Spend FIVE days learning with , starting this Tuesday. CSS custom properties, Reactive CSS with custom properties and JS, Emulating mixins and custom shorthands, web components, Houdini API and so much more. You can still join!

    Online Workshops
    1 reply 2 retweets 12 likes
    Undo
  5. Retweeted
    May 24
    Replying to

    Dev tools has an "emulate a focused page" option which is super useful for testing this kind of thing. The name for the setting isn't great, but it essentially keeps focus within the page even if you move actual focus to dev tools!

    4 retweets 14 likes
    Undo
  6. May 24

    New blog post! …where I go down a rabbit hole trying to determine if the current tab is active.

    5 replies 6 retweets 43 likes
    Undo
  7. May 22

    Saturday CSS quiz! Without checking, what do u expect to get in Chrome 85+? --n { syntax:"<number>"; inherits:true; initial-value:0; } body { background: red } (--c:v) { body {background: tan} } (--c:v) and (--n:a) { body {background: lime} }

    8 replies 2 retweets 13 likes
    Undo
  8. May 21

    For those of you who asked, I wrote an explanation here:

    Thursday CSS quiz! Without trying this out, what background do you expect <div> to have? :root { --accent-color: skyblue; } div { --accent-color: revert; background: var(--accent-color, orange); }
    2 retweets 16 likes
    Undo
  9. May 21

    Friday CSS animation challenge! Starting from this codepen: How can you tweak the animation to produce the effect in the video? Hint: You do not need to tweak the keyframes.

    9 replies 6 retweets 23 likes
    Undo
  10. May 20

    If you are in the majority who got this wrong, no worries, there are still some tickets left for my CSS variables / custom properties online workshop next week! 😇 (I actually came up with this question while working on it!)

    Thursday CSS quiz! Without trying this out, what background do you expect <div> to have? :root { --accent-color: skyblue; } div { --accent-color: revert; background: var(--accent-color, orange); }
    1 reply 5 retweets 22 likes
    Undo
  11. May 20

    Thursday CSS quiz! Without trying this out, what background do you expect <div> to have? :root { --accent-color: skyblue; } div { --accent-color: revert; background: var(--accent-color, orange); }

    26 replies 7 retweets 56 likes
    Undo
  12. May 20

    Whoa, this makes me oddly proud. 😅 I wonder what other similarly generic searches I show up on!

    sorry I had forgotten your name
    3 replies 2 retweets 137 likes
    Undo
  13. Retweeted
    May 19

    I have my tickets 🎟 ready for the amazing workshop about with , and the workshop with . To the moon! 🚀

    2 replies 6 retweets 14 likes
    Undo
  14. May 19

    Wednesday's hall of shame: On , saving an invalid repo description closes the editing popup, SILENTLY DISCARDS your edits, and displays this error message. FWIW, I still have no idea what was wrong in the description I entered… 🤷🏽‍♀️

    1 reply 1 retweet 17 likes
    Undo
  15. May 18

    One week left until my Dynamic CSS workshop! It's presented as five 2 hour sessions, plus 30 minutes each for Q&A, so this is 12.5 hours of learning. I don't do many workshops, so this is a rare chance. A few tickets still left!

    1 reply 5 retweets 28 likes
    Undo
  16. Retweeted
    May 13

    🎉🥳 New upcoming workshops in town! 🏎 The React Performance Masterclass 🔥 Dynamic CSS Masterclass 🏝 New Adventures In Front-End 2021 🥳 Successful Design Systems

    New Smashing Workshops in town, and the Cat is quite excited!
    1 reply 3 retweets 22 likes
    Show this thread
    Show this thread
    Undo
  17. Retweeted
    May 12

    “Too convenient” like I don’t have to spend 2-3 hours/day driving across the bay bridge to pick up my kid before daycare starts dinging me $$$ by the 5 minute increments? I don’t need time to process, I need time to *work a full day* when school is already shorter than work days!

    Reason #3: Working from home can be too convenient. Commuting gives us time to process our days, let our minds wander, and explore ideas. Additionally, “office life forces transitions and breaks throughout the day.”
    Show this thread
    5 replies 18 retweets 97 likes
    Undo
  18. Retweeted
    May 12
    Replying to

    Here's one I swore at early today. The second digits of the day and month are obscured by up-down symbols that were not even buttons, so were not clickable to change the number. I had to count how many times I hit the up arrow key to know what date I was entering.

    Date entry boxes with up arrow and down arrow icons that hide the second digits of both the day and month
    2 replies 7 retweets 24 likes
    Undo
  19. May 12

    Note that these patterns will not just become guidelines, it's not that simple! But seeing what prevails will help us determine what the guidelines should be.

    1 reply 10 likes
    Show this thread
    Show this thread
    Undo
  20. May 12

    - Overwhelming majority (90%) of event names use the present tense (click, not clicked or clicking) - When a noun is present, it tends to go first (mousemove, not movemouse) - before/after are prepended, while start/end follow - Prepositions tend to be last (keyup, dragover etc)

    2 replies 5 retweets 15 likes
    Show this thread
    Show this thread
    Undo
  21. May 12

    Like finding patterns in data? Help the flesh out event naming guidelines by finding out what prevails in the Web Platform today. List of most events (from MDN): Some examples of patterns we have spotted thus far in the next tweet.

    1 reply 12 retweets 23 likes
    Show this thread
    Show this thread
    Undo

@LeaVerou hasn't Tweeted yet.

Loading seems to be taking a while.

Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.

    You may also like

    ·