Hope your week was amazing! Maybe it’s just because I’ve started working more with Svelte myself, but it seems like now everywhere I turn I’m seeing it come up. This week there’s 3 articles about it I’ve included, 1 in CSS and 2 in JavaScript. Definitely check those out.

Some other super fun articles, I love the 25 days of CSS animations, and RxDB looks like a fascinating possibility. There’s also some great looks at accessibility, both calling out challenges in development and walking through how to make a good accessible color scheme.

Have a great weekend! Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

The hidden Attribute is Visibly Weak

Semantic HTML is great! Embracing semantics is wonderful! And what could be more semantic than using a hidden attribute so you could do things like <div hidden>Some hidden stuff!</div>... and yet. It’s extremely fragile, as outlined by this article, along with some suggestions for how to work around that fragility.

25 Days of CSS Animations: Teaching Myself CSS through Motion Design.

This article has the whole package. Compelling story, useful tips, lots of examples you can learn from, and last but not least EYE CANDY. Some very very neat animations!

Accessible Drop Caps

Great, digestible article on how to create accessible drop caps. The solution they came to is similar to a longer-form article I linked to in June, so if you want to go deeper into the challenges of setting up drop caps check that one out, but if you want a simple good answer without much fluff, this one is great.

The wondrous world of CSS counters

This is a delightfully whimsical and meandering look at CSS counters. I had no idea you could use them to generate different forms of counter styles (though in retrospect I shouldn’t be surprised, how else would you internationalize this?), and I love the entertainment value of using CSS to implement FizzBuzz.

Making Tables Responsive With Minimal CSS

Tables are a super useful tooling for displaying data, but they can have challenges on mobile. Those challenges can be overcome though, with the clever use of CSS! :) Take a look in this article.

What I Like About Writing Styles with Svelte

A look at how Svelte approaches CSS, and how it provides a nice middle ground between CSS-in-JS and vanilla CSS. It reminds me a lot of how Vue handles styles, and I like it. :D

JavaScript

JAMstack Tools and The Spectrum of Classification

I’m minorly obsessed with JAMstack at the moment, so it’s useful to see articles like this one spelling out what a lot of the options are. Is it a complete survey of everything available? No, and it doesn’t set out to be. But is it a good starter? Absolutely.

Observing Visibility in React

Nice look at how to use the IntersectionObserver API within a React component to keep track of what is and is not visible.

The Svelte Handbook

I’ve been greatly enjoying using Svelte recently, and highly recommend it as a new framework to learn. Svelte is taking the trend towards pre-compilation and pre-rendering to the extreme, with a 0-runtime framework that lets you have the convenience of a Vue or React but without shipping a runtime, because it all compiles down to vanilla JS.

Svelte vs React: First impressions

A rundown looking at basic ‘todo’ applications side by side, built with Svelte and React. Does a solid job of showing the tradeoffs involved.

Other Awesomeness

Why Are Accessible Websites so Hard to Build?

I super appreciate the point raised by this article. Accessibility feels hard because accessibility errors are currently invisible to most developers. JavaScript and CSS are both also hard, but because errors in them are immediately and incontrovertibly visible, we work hard to fix them. If we can use tooling to make accessibility issues as in-your-face as JS or CSS issues, we’ll quickly start building more accessible websites.

Designing accessible color systems

Fascinating in-depth look at what it takes to design a color system that is accessible “by default” and still looks good. This is a HARD topic, and I love the way the authors go deep on multiple factors looking at visual weight and clear differentiation, and how those interact with accessibility.

Can we please style the control?!

A look behind the covers of what the Web Incubator Community Group is working on to improve the web. Super interesting to see the data of complaints for form controls… I think I’ve hit almost all of these issues over time. :P

RxDB

Super interesting new database designed to let you subscribe to changes. If you’re creating reactive applications using a framework like Vue, React, Angular, or Svelte, this has the potential to let you hook into your database in a similar way to how you’d subscribe to changes in an in-client store like Redux or Vuex.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html