SVG Animated Masks, Deno, and Working Remotely with a Full House

An overview of what was Creating Zeal this week.

📹 YouTube

Creating and Animating an SVG Mask

In this video, Amy demonstrates how to turn an SVG into a mask, giving a jpg the appearance of a wavy bottom edge. Then, for added flair, she animates it.

✍️ Blog

Working Remotely with a Full House: Staying Sane while working from Home
After working remotely for a little over a decade now, one of my most difficult and rewarding aspects is family. My family includes my partner, 2 boys, a mother-in-law, and our dog. While this isn’t a huge family, in a 1000 sq ft house it can be hard to find space and time to concentrate on work. However being able to take a lunch break and spend time with everyone is a great way to recharge in the middle of the day. For me and my family we needed to find a balance between work and interacting with each other.

🖥️ Twitch

Learning Deno Runtime with Nate!

Learning Deno Runtime with Nate!

Deno is a NodeJs replacement. In the most recent Twitch stream, Erik and Nate learn Deno together.

🔗 Links and Interestings

Send Data between Tabs with JavaScript

Did you know you can send information between open browser tabs using JavaScript? Let's say your user is viewing your site with multiple tabs and something happens one tab which you want to react to on the other tabs - you can do this using the Broadcast Channel API.

A Practical Overview of CSS Houdini

A Practical Overview of CSS Houdini

Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell the browser how to apply CSS during a render process. Houdini’s browser support is improving and some APIs are available for use today, so it’s a good time to become familiar with them and experiment. We are going to take a look at each part of Houdini, its current browser support and see how they can be used today using progressive enhancement.

The Difference Between Width and Flex Basis

The Difference Between Width and Flex Basis

This article does a great job of explaining the difference between width and flex-basis and how min-width and max-width affect the final flex-basis.