Thomas Steiner

@tomayac

🇪🇺 Dad-of-3. Developer Advocate at (🇩🇪), PhD from (🇪🇸), Postdoc at (🇫🇷). 🐡

Hamburg, Germany
Joined May 2008

Media

  1. Jan 24
    Safari Web Inspector showing a 3D layers view of a Twitter page.
  2. Jan 13

    Finished 's 📖 book Permanent Record (highly recommended). In there, he mentions 's (at the time CTO of the , now Managing Director at ) talk on Big Data: . More people should see this. Own your data.

  3. Jan 7
    Replying to

    As promised getting back to you. I actually could share the example SVG from your CodePen. Note that a lot of apps like Hangouts don't accept SVGs, but, for example, if you share to Gmail, it works, as proven by the screenshot.

    SVG image attachment in a newly composed Gmail message that originated from a Web Share operation.
  4. Jan 7
    Sad emoji face rendered in the textual variation next to neutral and happy emoji faces that both render in their emoji variation.
  5. Jan 4
    Replying to
  6. 19 Dec 2019
    Replying to

    If I may, some additional data to look at would be (that is, a run on the randomly selected page out of many others with images). Massive savings potential, here's the relevant excerpt of the analysis. ⤵️

    Lighthouse results cropped to the "use next-gen images" section showing massive savings potential.
  7. 18 Dec 2019

    Tip: Don't set absolute font sizes! If someone has their default browser font size bumped up/down, you override their choice and force them to zoom. 😔 Instead, set the font size to `100%` on the `:root {}` level and make everything a function thereof via `em` or `rem`. 🎉

    Browser preferences page showing the default font size settings section.
    Default font size set to very large, a web page uses the appropriate font size in function of this setting.
    Default font size set to very small, a web page uses the appropriate font size in function of this setting.
    Default font size set to medium regular, a web page uses the appropriate font size in function of this setting.
    Show this thread
  8. 17 Dec 2019

    Speed metrics can be quite abstract, so on my blog I've tried to make them more understandable. At the bottom of each page, you now get Largest Contentful Pain (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). Try it on and check the LCP.

    Speed metrics in the footer of the page.
    Link to display largest contentful paint.
    Largest contentful paint highlighted.
    Show this thread
  9. 13 Dec 2019

    Based on my experiments, I don't think it does anything useful yet. It can currently be used to feature-detect support. But may have a better answer.

    Logging window.location.fragmentDirective on the DevTools console.
  10. 13 Dec 2019
    Replying to
    Google Groups screenshot of https://groups.google.com/a/chromium.org/g/blink-dev/c/zlLSxQ9BA8Y/m/Sy5K41lkAwAJ.
  11. 13 Dec 2019

    🎉 The Scroll to Text Fragment proposal () now has 4 LGTMs, i.e., is ready to ship! It allows you to truly deep-link into docs—even when there's no # anchor. Here's a sample URL: ⛄️ (Test with flag 🚩 #​enable-text-fragment-anchor)

    Scroll to Text Fragment URL in action, the document is scrolled to the selected fragment.
  12. 12 Dec 2019
    Replying to and

    Confirmed, it works correctly on Android. 🤖

    Snowman rendering as textualand as emoji variation.
  13. 10 Dec 2019
    Replying to

    Still blows my mind what they pulled out of CGA: .

  14. 9 Dec 2019

    Facebook have recently marked their WebView-based In-App Browser debuggable 🧐. I have taken a close look 👀 with the and have documented my findings. 👉 Thanks, , who announced this feature.

    Above the fold screenshot of the article.
    Show this thread
  15. 9 Dec 2019

    Hi there 👋. You just lost me at "Download and Install ". Any reason why I need to download a player instead of just running the game on the Web? We all know amazing games can run in the browser… 😄

    "Download and Install Roblox" call to action prompt.
  16. 4 Dec 2019

    I’m using the `env(safe-are-inset-{left,right})` CSS function () on my new old blog (); and (completely biasedly) have to say: it looks gorgeous 🤩 on my notch phone 📱. Easy to implement, too: .

    Safe are on iPhone pro with the notch respected, and the unsafe area filled with the background pattern.
    Show this thread
  17. 2 Dec 2019

    It's also hilarious how manages to fsck this up on desktop, but makes it work perfectly on mobile; and in its Validator shows it should work fine universally.

    Twitter Card image preview not working on desktop.
    Twitter Card image preview working fine on mobile.
    Twitter Card Validator showing it should all work fine.
    Show this thread
  18. 29 Nov 2019
    Replying to

    Neat. There seems to be a problem with dark mode in the blog section: it only gets dark after manually toggling dark mode, whereas the header correctly gets dark. Some contrast issues, too (hamburger menu gets almost invisible due to the background animation).

    Header dark, but blog section light.
  19. 27 Nov 2019

    Chrome Remote Desktop () lets you access your PC from a phone, tablet, or other device. I've debugged what it does and found it renders from a hidden video into a canvas. Here's me re-creating PiP view: `$('video').requestPictureInPicture()`

    Chrome Remote Desktop running in Picture in Picture frame.

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

    ·