ZenDev - Friday Frontend: July 24 Edition

Hey there,

One of the things that feels most challenging to me about this long disaster we’re going through as a world (especially exacerbated for those of us in countries with incoherently bad responses) is that there’s nothing sparkly to look forward to. Conferences are canceled or virtual (which is NOT the same), fun activities are high risk or canceled… it’s just a long slog.

To counteract that we’re planning a (very carefully low-risk) family road trip for the week after next, and it has definitely helped me in terms of having something to look forward to. If you’re feeling the drain of the long slog, maybe look for something you can plan as well.

Anyway, on to the content -- my favorite article this week is the look at the “state of pixel perfection” in today’s web, but I also really enjoyed “what the fork is a closure” and learned a lot from the article on typographic legibility. Enjoy!

Best,

KBall from ZenDev

P.S. If you are looking for work and happen to have Nuxt.js/Vue.js experience, I just got an inquiry about folks for a contract-to-hire position. Reach out to me and I’m happy to connect you. Unfortunately US only for now.

CSS & SCSS

Using Flexbox and text ellipsis together

Great technique for putting an ellipsis in the middle of a string, with the particular example of displaying files and always wanting to have the file type suffix there. Love it!

When do you use inline-block?

With all the emphasis on newer aspects of CSS, it’s nice to occasionally see articles like this that really break down the usecases for tried-and-true CSS features. 

Modern CSS Techniques To Improve Legibility

Deep dive into typography, what makes for legibility, and the newer CSS features that really allow you to fine tune this on the web.

Things I Wish I’d Known About CSS

On the fundamentals side, but a great read through if you’re relatively new to CSS and want a solid grounding. I’d use it more as a checklist than a way to learn all of these items -- look through, and if one of the concepts is new to you google around for more info, as the descriptions here are pretty sparse.

JavaScript

What the fork is a closure

Delightfully whimsical site put together by the incomparable Dan Abramov to explain JavaScript concepts. This particular article focuses on closures, with a great combo of a short, to the point explanation and then a longer dive into the thinking behind the concept.

Natively Format JavaScript Dates and Times

Interesting short hit on the date formatting capability of native JavaScript dates. I still tend to reach for libraries to do this, but maybe I don’t need to.

A View on New Vue: What to Expect in Vue 3

With Vue 3 now in RC, even if you haven’t been paying attention to what’s happening there, you should now. This article is a great way to come up to speed on all of the incredible improvements that have been made in what is still my favorite front-end framework.

Introducing React Spectrum

I think this is well worth looking into, but not for the headline piece. The headline, “React Spectrum”, is a release of the Adobe “Spectrum” design system as a set of React components. Great if you’re using Spectrum, not so useful otherwise. But what is super interesting is they actually broke it into 3 independent projects, the first 2 a set of design system independent primitives for dealing with state and dealing with accessibility. THOSE are tools that may be useful for anyone, anywhere, and are definitely worth digging into.

Other Awesomeness

The State Of Pixel Perfection

Super fun and interesting article that digs into both the question of “pixel perfection” and whether it’s a target that still has meaning in today’s world, but then also walks through some great exercises for developing your eye and understanding the impact of small nuances in an implementation. You should read this, it will make you a better front-end developer.

Adding Augmented Reality to your Websites

I love to see progress on this front. While the examples here are rather whimsical, I think there are a ton of fascinating opportunities for AR, and making it easy to do on websites rather than forcing everyone into native applications makes this so much easier to get started with.

When design breaks semantics

This is a pretty common problem - while it is great to try to make all of your markup perfectly semantic, there are sometimes mismatches between the semantically correct representation of an item and how we want it to display for reasons of visual hierarchy. The links/buttons case drawn out here is classic, but there are more. This instance dives particularly into how to handle this for links that look like buttons (and why sometimes that is in fact what you want), but the thinking will be useful for you as you tackle any such mismatches.