64 Followers
106 Following
123 Posts
⌨️ Frontend Developer 🐘 Mastodon @andrico 🕸 Web Components 🪟 http://a2000.netlify.app
Websitehttps://andri.co/
Component Odysseyhttps://component-odyssey.com/
Twitterhttps://twitter.com/andricokaroulla
a2000https://a2000.netlify.app/

Been feeling a little confident about your abilities as a developer? Try learning shaders, it'll knock you down a couple of pegs.

Spent nearly a week only on shaders and it's starting to click.

Here's some Perlin noise converted to ascii

I've never messed with sites that reveal text on scroll. I understand the case for images, but text less so.

Does anyone stand by them?

Thanks to @kizu 's article, I managed to remove the JavaScript for this "fill text" effect, and instead rely only on CSS

The Chrome flamegraphs show an improvement to performance as well

https://kizu.dev/fit-to-width/

Fit-to-Width Text: A New Technique

Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.

When I built Learn WCs, I disabled animations on Firefox because the frame rate was so bad.

Turns out it was due to 2 CSS properties 👀

https://component-odyssey.com/articles/13-improving-performance-by-changing-two-lines-of-css

The Two Lines of CSS That Tanked Performance (120fps to 40fps)

Learn WCs felt so sluggish on Firefox that I disabled the background animation for all users. Turns out, fixing it took changing two lines of CSS.

🏍️ The Two Lines of CSS That Tanked Performance (120fps to 40fps)

by Andrico X: @andricokaroulla @andrico

#webperf #performance #css #webdev

https://component-odyssey.com/articles/13-improving-performance-by-changing-two-lines-of-css

The Two Lines of CSS That Tanked Performance (120fps to 40fps)

Learn WCs felt so sluggish on Firefox that I disabled the background animation for all users. Turns out, fixing it took changing two lines of CSS.

I want to give a shoutout to @joshtumath and @backwardok . They offered some excellent advice for some of the issues I found :)

I did another round of testing on the Learn WCs site, including going more in-depth with a screen. I learnt a ton, like:

- when to hide decorative content
- when to create screen reader only content
- quirks between screen readers and browsers
- choosing HTML over ARIA to provide state information

I wrote up everything I learned here:

https://component-odyssey.com/articles/12-improving-the-screen-reader-experience-for-learn-wcs

Improving the Screen Reader Experience for Learn WCs

I refactored markup, wrangled with browser quirks, and hid elements all in the hopes of improving the screen reader experience

I've published a blog post about my first week in the CSSWG! There's a lot to get your head around! https://www.joshtumath.uk/posts/2024-08-21-my-first-week-in-the-css-working-group/
My first week in the CSS Working Group - Josh Tumath

Josh Tumath
Here's the CodePen if anyone's interested in playing around with it: https://codepen.io/andrico1234/pen/jOjYbQM
A11y Question

...

I'm also not sure whether to make the right content a polite alert to alert screen reader users on change. Maybe landmarks to indicate that left content affects right content is less aggro.

aria-controls looks handy, but the left content would be inside shadow DOM