This week, I have a request to make. If you are working at a company that is still hiring, please send me a quick email and let me know. Details that are super valuable to include are location, what roles you’re hiring for, and if you hire folks remotely in normal times (AKA once we get out of our current shelter-in-place).

So many folks are struggling right now; I both personally know a number of amazing people who have been laid off, and have heard from a number of the readers of this newsletter as well. I’d love to help each and every one of these folks find their next position. And if you’re hiring, I’d love to help you find your next great hire. :)

Anyway, on to the content below. Stay safe and healthy!

Best,
KBall from ZenDev

P.S. If you’re one of the folks who’ve been impacted and are looking for work, feel free to hit REPLY and tell me what you’re looking for and a bit about yourself, and I will happily connect you to as many companies as I can find that are still hiring. Most of the opportunities I have connections to right now are in the bay area, but I’m doing what I can to find more. I also want to plug this great resource of which companies are hiring and which are not.

CSS & SCSS

Margin considered harmful

This is a very clickbaity title, and I appreciate Chris Coyier’s article calling that out and layering on some (in my opinion valid) concerns, but I think the big picture message is actually reasonable. Reusable components should not themselves contain margin, because margins should be determined by context. This is not a super new concept, and not really about margin, but about how you think about assigning it. In traditional CSS you could use a child selector, or a BEM name that indicated which subcomponent you were in. Today in CSS grid we can use the gap. But the key idea is - margins should be controlled by the container (which sets context), NOT the component itself.


How They Fit Together: Transform, Translate, Rotate, Scale, and Offset

Super useful quick post, looking at some nuances of using the new independent properties for translate, rotate, scale, and offset. I hadn’t even been aware there were separated properties now and you didn't have to put everything together into a transform property, so double good new stuff for me! :)


🤯CSS Pseudo Elements/Classes you have never heard of!

I was skeptical - I didn’t expect the post to actually succeed in finding new pseudo-elements or classes that I hadn’t run into. But I was wrong. There’s a ::backdrop pseudoelement for styling inside video?!? So cool!


Pure CSS Typing Animation

Quick hit, and you have to open up the SCSS tab of the codepen to really see how it works, but this is a delightful little CSS-only animation to have in your toolkit.


JavaScript

Washing your code: avoid mutation

I don’t agree with every example in here - in fact, I think there are some times where functional programming purists go out of their way to avoid mutation and end up with much more convoluted code as a result (Many use of reduce seem to fit this bucket). However, there are many other cases where avoiding mutation is useful, and this article does a reasonably good job at walking through what that looks like.


11 Useful Custom React Hooks for Your Next Web App

Custom hooks are the new utility libraries, particularly given how widespread React use has gotten. Here’s a great list of some available utilities that you can plug straight into your React applications.


9 Top JS Gaming Engines and Libraries for 2020

With the current shelter in place orders across much of the world, it feels like the developer community has bifurcated - those who are parents or have other caregiving responsibilities are overwhelmed, trying to figure out how to cope with dramatically increased needs & lower resources. Those who are not are trying to figure out how to fill their time and keep from going crazy. If you’re in that latter group and want a new project area to explore, check out these gaming engines that will let you write games directly in JavaScript.


S.O.L.I.D. Principles around You, in JavaScript

Great overview of architectural principles that have stood the test of time. With both great illustrations explaining the meaning and JavaScript examples to see it in code. Very well done.


Other Awesomeness

Performant Expandable Animations: Building Keyframes on the Fly

Excellent example of combining the performance CSS keyframe animations with the flexibility of JavaScript animations by generating your keyframes on the fly.


16 front-end projects (with designs) to help improve your coding skills

My number one recommendation for learning is to get yourself a project. You will learn more trying to solve particular details of a project than in a dozen tutorials. The next question of course is how to find a project - this is a great resource for that, with a set of sample projects complete with designs and requirements. Check them out!


Apple’s attack on service workers

Apple is going to start removing service workers from the iOS Safari cache when a site has not been visited for 7 days. I don’t feel like I have a super strong sense of the impacts of the change in terms of typical use, but this seems like an important update to be aware of.


How to write UX copy that makes your product a joy to use

How many of you still get handed designs filled with ‘Lorem Ipsum’? In far too many companies copy is an afterthought. Especially things like error copy and the like are often filled in “by default”, or without much thought. And bad UI copy can be SO bad. This article does a nice job of highlighting both some things not to do but also bringing up general principles for better copy. So if you end up often writing copy “by default”, or you’re frustrated with the copy you get from team members but didn’t have concrete things to recommended, this is a great article to take a look at.