Friday Frontend: The Year of Svelte Edition

Hey there,

If there’s one framework that looks poised for massive growth this year, it is Svelte. The buzz around the framework is incredible, and while usage levels are still low, almost everyone I talk to is excited about giving it a try this year. This newsletter includes 3 articles/resources to get you started on that path, along with your usual helping of all things good in CSS, JS, and Web development

Best,

KBall from ZenDev

CSS & SCSS

useStateInCustomProperties

Following up on a concept I shared in a previous newsletter, there’s now a React hook for mapping state from a React component into custom properties in the CSS. Using this approach for communicating state between JS and CSS is a super interesting area of possibility.

How to Play and Pause CSS Animations with CSS Custom Properties

Building on the theme of custom properties, this article digs into how and why you’d want to pause CSS animation, and then shows you how to control them using CSS custom properties.

CSS Frameworks, hype and dogmatism

As a veteran of some of the CSS framework wars, I definitely agree with this take to dial back on the heat about the “one true way” to do CSS. There are good best practices that are true for most cases. There are frameworks that are good for many cases. Use the tools that best fit your projects and the way you think, but don’t assume that because an approach works well for you that all other approaches are wrong.

The styled-components happy path

A nice dive into one of the most popular new ways to handle your CSS, with as set of recommended practices and ideas for effective use of styled-components.

You want minmax(10px, 1fr) not 1fr

Super short and sweet, but an important note for making grids that scale down as well as up.

JavaScript

Meet Svelte 3, a Powerful, Even Radical JavaScript Framework

Judging from the State of JS survey and some of the other buzz around, Svelte is definitely the hottest kid on the JavaScript block this year, and well worth learning. This is a decent introduction.

Awesome Svelte

On the topic of Svelte, this is a great collection of resources for the framework. UI components, data design, tooling. It’s a work in progress but looking good.

The Philosophy of Svelte

Super interesting piece on the driving ideas behind Svelte, and what makes it unique among current JavaScript frameworks.

array.sort() Does Not Simply Sort Numbers in JavaScript

Good callout of unexpected behavior in Array.sort, and fleshes out how to use this utility in more detail. I’d personally far prefer if Array.sort was immutable and just returned the new array, but we take the language we’re given.

JavaScript's Memory Management Explained

Memory management is the type of thing that web developers used to not have to worry about, but now with long-lived JavaScript applications that may go days or weeks without being reloaded, a memory leak can cause your application to grind a user’s browser to a halt. As a result, this is an increasingly important area to understand.

Other Awesomeness

When To Say No To Freelance Projects

This is a skill I wish I had learned earlier. Being able to assess when a project is not aligned with your values, skillset, or current capacity and then graciously say no is an incredibly important thing for your happiness and long term success.

Thinking in Jamstack

This is one of the most fun things to me about new application architectures - how they change the entire way you think about applications. I wish this article went deeper than it does, but it does a decent job of introducing what is different about the mental shift you need to make to build a Jamstack application.

Creating comic book speech bubbles with SVG and javascript

Super cool look at using SVGs to create comic book speech bubbles rather than embedding them within an image. This has a huge impact on accessibility. I’d love to see more in the direction of making all of this art into SVGs, as it would also enable some really interesting animation and other mix and match opportunities.

The Ivy Lee Method: The Daily Routine Experts Recommend for Peak Productivity

Super useful technique. Making yourself write down your most important tasks and prioritize them is a huge productivity booster right away. Single-tasking instead of multi-tasking is another multiplier.