Hope you had a great week! The big news in the tech/web world this week was a zero-day vulnerability for the popular Zoom video player, and there’s some fascinating info in one of the links below about how this vulnerability was likely due to a misunderstanding of CORS. For that reason I’ve also included a great introduction to CORS, along with your usual suspects of great CSS and JavaScript resources. Enjoy!

Best,

KBall from ZenDev

P.S. I’m starting something new: A 1 on 1 coaching program. It’s definitely not for everyone, but if you’ve been struggling with overwhelm or wishing you had a mentor at your company, maybe it’s for you. Check it out!

CSS & SCSS

CSS Lists, Markers, And Counters

This is awesome. Both the most thorough breakdown I’ve ever seen of the options available for styling lists, as well as an introduction to the new ::marker pseudoelement and CSS counters.Caveat: You’ll need the very latest Firefox or a recent Safari to see ::marker in action, and only Firefox seems to support nested counters.

Animating with Clip-Path

Super cool look at how you can use animations of the clip-path property to create a range of transition animations, moving from one piece of content to another seamlessly and beautifully.

Fun places to learn CSS Layout – Part 2: Grid Layout

Great roundup resource on a range of different available resources for learning CSS Grid. I’m a huge fan of Grid Garden (first on the list), and the rest of these look amazing as well.

Bringing new CSS techniques to production

Solid overview of a number of the more recent big CSS features (Grid and custom properties primarily) and the thinking that goes into starting to use them even as you might have to support legacy browsers that don’t understand them. Explains both how to create fallbacks, but also some of the hazards of overly relying on them.

A Little Reminder That Pseudo Elements are Children, Kinda.

An entertaining look at the way pseudo-elements like ::before do and do not get treated like child elements in the DOM.

JavaScript

8 Practices In React That Will Crash Your App In The Future

A solid list of common gotchas, some of the React specific but many of them general. I appreciate that the author not only lists the gotchas but for each one has a solid recommendation for improvement.

No, Getters and Setters in TypeScript & JavaScript aren't useless

Interesting look at the thinking behind the use of getters and setters, and some examples of proper use. I wish the author went deeper, but what’s there is solid.

Beware! Angular can steal your time.

Great rundown of common gotchas in Angular. Pretty Angular specific, so if you’re not using it just skip this, but if you are there’s some great advice in here.

Using Slots In Vue.js

While there are many ways in which Vue.js and React approach things similarly, one of the biggest idiomatic differences is the use of slots in Vue, as compared to props.children in React. This is an excellent overview of what slots are, how they work, and how they can be used to solve a number of different challenges.

Mistakes we make using JavaScript Promises

I keep hearing that promises and asynchronicity are challenging, so I’m always happy to find a great article like this that helps clear things up. This goes through some common mistakes and challenges using promises and how to fix them.

Promoted Link

All Programming Courses on sale at Udemy. Starting at $10.99

It’s been a little while, but all software development courses are now back on sale at Udemy! Woo-hoo! If you’ve got a new area you want to learn about, now is a great time to buy a course, even if you won’t have time for it for a little while, because you can get them dirt cheap. Courses I’ve been recommending recently include The Complete JavaScript Course 2019, Modern React with Redux (the course I learned React from, updated with all the latest features), and Vue JS 2 - The Complete Guide (by one of my favorite Udemy instructors, Maximilian Schwarzmüller.)

Other Awesomeness

Content or design first?

A thoughtful look at the relationship between content and design, and some steps that designers can take to better work with copywriters. Honestly I think a lot of these same ideas are important for developers. And you can extend it further by saying “don’t use placeholder copy for user generated content”. Force yourself (or your PM) to get realistic “true life” examples for the type of UGC you’re planning to use, and put that into your developer data as soon as possible. You’ll uncover countless edge cases.

Menus with “Dynamic Hit Areas”

Super cool solution to creating “megamenus” with dynamic flyouts, using SVGs to create a dynamic “hit area” to avoid the “accidental hide while moving the mouse” awkwardness that so easily results from using :hover in a naive approach.

Responsive design ground rules

Great set of guidelines for thinking, designing, and developing responsively in the multi-device world that is now our norm. If you’ve been in the design world you’ve probably heard of most of these, but I suspect you’ll find some new gems… I think my favorite that was new to me is ‘design from content out’... aka instead of device-size based breakpoints "expand until it looks like shit. Time for a breakpoint!". Love it!

Developers don't understand CORS

A look at the fundamental misunderstanding of CORS underlying the recent Zoom zero day vulnerability. Very interesting, and definitely worth a read through.

CORS – Cross-Origin Communication in the Modern Web

If you are one of the (many!) developers confused by CORS, and/or the above article didn’t have you nodding your head along and saying “yes yes of course”, this explainer on how CORS works may help.

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