Friday Frontend: This Edition is brought to you by CORS
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
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.
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.
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.
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.
An entertaining look at the way pseudo-elements like
::before do and do not get treated like child elements in the DOM.
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.
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.
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.
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.
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.
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.
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.
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!
A look at the fundamental misunderstanding of CORS underlying the recent Zoom zero day vulnerability. Very interesting, and definitely worth a read through.
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.