ZenDev - Friday Frontend: May 22 Edition

Hey there,

Hope you’re doing well this week. I continue to be slammed with work, but there’s a light at the end of the tunnel. Very close to feature complete & starting on QA. Hope to be more responsive to y’all soon.

Enjoy your weekend reading!

Best,

KBall from ZenDev

P.S. I’m sorry, I’ve been completely slammed with deadline and life and have not been able to get back to everyone who reached out about finding work. I’ll keep plugging the resources I’ve been plugging, but have to say that realistically I won’t be able to do much personalized help until I finish this work project. The 2 resources in question:  this great resource of which companies are hiring and which are not, as well as share this resource that a reader shared.

CSS & SCSS

CSS Animation Timelines: Building a Rube Goldberg Machine

Super fun example of what is possible with CSS animation. I have to say I also love the level of readability that CSS variables brings to CSS. Similar to how you might factor out named constants in JavaScript code instead of using magic numbers, you can now do this throughout your CSS as well. 

Equal Width Columns in CSS Grid are Kinda Weird

Interesting edge case in Grid. I’m currently building in an environment where we aren’t using Grid because it’s a pain (though doable) to get Grid layouts working for IE11, so I haven’t hit all of these weird edge cases yet. But if you are able to use Grid for your layouts, chances are you’ve battled this challenge and will find this useful.

How to Tame Line Height in CSS

Deep dive into the line-height property, how it behaves, how that is different than you might expect if you were coming from a print/typography background, and how to force it to behave like leading does in print design.

Codepen: Painter

Brilliant inspiration of a piece of CSS art. I also love that all the CSS class names are in Spanish; part of me wishes we had the ability to translate e.g. property names automatically, so that you could learn things that make sense in your native tongue rather than everyone being forced into English for your syntax and CSS properties. Especially given how constrained the names are, it seems like we could do this and enable auto-translation for those particular words. Ah well.

JavaScript

How to use Typescript with Svelte

I’ve been using TypeScript more and more at work, and honestly I dunno that I’d ever choose to go back to vanilla JS given the choice. But I would love to get back to playing with Svelte if and when I ever have free time again (post COVID?). So I’m very excited to see folks publishing resources like this on how to integrate the two.

React Architecture Best Practices and Tips from Community Experts

This article wasn’t as good as I hoped it would be from the title - yes there is some good stuff in there, but I was hoping for a lot more! But frontend architectural articles are few and far between, and there is at least some good stuff in here. 

5 JavaScript Tips I Learned From Vue Source Code

Interesting dive into some nitty gritty behaviors of the JavaScript language and different runtime environments. Probably not very useful for day to day work, but more so for framework authors or folks really trying to master the language.

Upgrading a Legacy Angular Web App

Has any framework done a worse job of enabling migration to new versions than Angular? There was the 1 to 2 no migration path debacle, but I thought they might have learned their lesson from that. Apparently not. Check out this trail of pain in trying to update from version 4 to version 6!

Other Awesomeness

How to Build a Chrome Extension

I think a lot of folks have an idea in their head of extensions as complicated things to build, but honestly if you can use HTML, CSS, and Javascript to make a webpage, you can use them to make a chrome extension. Check out how easy it is!

Accessible Images For When They Matter Most

Fascinating super-deep dive into how to make images accessible. Starting from how to think about the role an image is playing and what the implications are for accessibility. It’s a lot more than slapping an alt tag on.

The Web We Want Survey Results

I love to see browser developers working with the community like this, and the choices people are making for what they want are fascinating. The bifurcation on some of the accessibility requests is fascinating - some people really want the browser to automatically fix accessibility issues, and others seem to really not (I guess worried it will mess up other things).

Form design: multiple inputs versus one input

Walk through of design tradeoffs for situations where you might be tempted to use multiple inputs in place of one. Does a nice job of not only explaining which is the right answer, but also the decision criteria and what you can do to solve the problem that might lead you to the other approach.

The Current State of Checkout UX (18 Common Pitfalls)

Thanks to COVID-19 and related lockdowns, e-commerce is currently experiencing a massive boom. If you’re working in this space, you probably know that checkout is one of the key gates to conversion and revenue, and optimizing your checkout flow is almost always a good investment. This article dives into how different e-commerce companies are doing and shows a set of common mistakes you can walk through and fix right away.