Ryan Johnson @CITguy

:has, text-indent: hanging, text-wrap: balance, iframe lazy loading, … @firefox 121 is released today with lots of presents for web developers 🥳 mozilla.org/en-US/firefox/…

20 127 691 85K 49

View Details

Ryan Johnson @CITguy

3 years ago

@devwrite_ @wesbos @syntaxfm Seems like we're about due for the pendulum to swing back to the server.

1 0 1 33 0

View Details

Ryan Johnson @CITguy

3 years ago

@MichaelFilipiuk Oh wow... A design decision that makes 0 difference when it's coded in HTML+CSS

0 0 0 8 0

View Details

Luke Wroblewski @LukeW

3 years ago

multi-column forms: - are often misinterpreted - making them less intuitive - and more error prone baymard.com/blog/avoid-mul…

2 21 129 21K 32

View Details

Wouter de Bres @WdeB

3 years ago

When I check my auto layout in Figma.

23 222 2K 157K 110

View Details

Ryan Johnson @CITguy

3 years ago

@housecor There's nothing more infuriating to me than seeing something that I can easily fix, but I'm not ALLOWED to.

0 0 1 34 0

View Details

Ryan Johnson @CITguy

3 years ago

Whoever designed the new @MarcosPizza online ordering portal should be fired. It's #hotgarbage with numerous #usability and #accessibility issues.

0 0 0 39 0

View Details

Ryan Johnson @CITguy

3 years ago

@JerubaalXerxes @flaviocopes This is what I ran into recently. NPM packages could technically still work on newer Node, but their package metadata was too strict to allow it.

0 0 2 14 0

View Details

With CSS `@property` you can finally set different transition values for transform functions at the same element ✨ ✅ Browser support caniuse.com/mdn-css_at-rul… 🔗 Demo @CodePen codepen.io/aaroniker/pen/… 📄 Docs developer.mozilla.org/en-US/docs/Web… Here is how (sets a different duration and easing for translateY and scale) 👇 @property --scale { syntax: ""; inherits: false; initial-value: 1; } @property --translate-y { syntax: ""; inherits: false; initial-value: 0px; } button { property: --translate-y, --scale; transform: translateY(var(--translate-y)) scale(var(--scale)); transition: --scale .9s cubic-bezier(0.75, -0.5, 0, 1.75), --translate-y .3s ease; &:hover { --translate-y: -8%; --scale: 1.2; } }