Friday Frontend: Welcome to September Edition

Hey there,

Greetings from smoke-filled California, where we’re all hunkered down inside our houses most of the time and running out to spend time outside any time the smoke even momentarily clears. I hope you’ve all had as good of a week as possible in 2020.

This week there’s a number of interesting articles, but the ones that grabbed me the most are all down in the ‘Other Awesome’ section. I particularly like the articles on creating your own luck, writing better microcopy, and our tendency to re-solve solved problems.

Best,

KBall from ZenDev

CSS & SCSS

How to Use CSS Grid for Sticky Headers and Footers

Great step-by-step instructions on using CSS Grid for an extremely common problem - sticky headers and footers. The proposed solution is also useful for app-style layouts where you have a “frame” around some sort of interactive content.

Custom CSS Styles for Form Inputs and Textareas

I love this! And it’s part of a great series I’ve linked to pieces of several times now. Shows how to use modern CSS to create super clean, consistent, custom styles for a persistently challenging part of HTML: Form inputs and textareas.

shape-margin property

Simple explanation of this super-useful property for layouts that go beyond boxes. If you’re using shape-outside you should know about shape-margin. Interesting thing that I hadn’t realized until I played with the demo: This appears to only work up to the point of the original bounding box. As your shape-margin pushes your shape beyond that box the text will conform to the box instead.

Why CSS ::before doesn’t work on inputs and images

I’ve run into this limitation before, but always chalked it up to the arbitrariness of specification design and the meandering path of the web platform. But no, there’s a coherent reason behind it! Check it out!

Proportional Resizing with CSS Variables

Super useful, simple technique for defining height/width ratios and allowing for proportional resizing using CSS variables. Define your ratio, override it as desired, and watch everything smoothly adjust in proportion!

JavaScript

Why use Getters and Setters functions

Solid introduction to why you might use getters and setters. A reason not mentioned is being able to track and do things related to when variables are accessed or changed… prior to Vue 3, the entire Vue reactivity system was built on top of getters and setters, and there’s tons of potential to build useful reactive actions at a micro level using them.

6 Tips and Best Practices for a Scalable React Project

The recommendations here are pretty high level, but the author breaks them down into some more concrete examples or questions you can ask yourself to help guide your thinking.

Designing a JavaScript Plugin System

Plugins are a super common pattern in libraries, but can also be useful for internal systems that aren’t intended to be public. This post is nominally about JavaScript, but really is about what goes into a good plugin interface and how to create a simple plugin system for whatever project you may be working on.

Introducing Danfo.js, a Pandas-like Library in JavaScript

Python (and pandas) continues to be the de facto standard for data science once you get out of the world of R and Matlab and into full-featured programming languages. I’ve been using Pandas a fair amount recently myself. But I love to see developments like this that allow the potential of full-stack javascript solutions even in data science heavy environments.

Other Awesomeness

How to Create Luck

This is a super useful mindset post. And while it’s worth bearing in mind that your experiences will vary based on your situation and level of privilege, there are some aspects of this ability to “create luck” that will apply to everyone. In the startup world we used to say “You work hard so you can get lucky”. A more historical framing of this from Louis Pasteur is “Chance favors the prepared mind”. You can’t control luck, but you can put yourself in more situations to get lucky and prepare yourself to better take advantage of that luck when it strikes.

7 Practical Tips for Better Microcopy

While it’s great when you can work with an excellent copywriter, often times designers or front-end developers are making tons of decisions on the microcopy that goes into your user interfaces. This makes a huge difference, and studying good copy practices IMO should be a part of understanding interface design & development. This article is a good start.

Solving Solved Problems

Super useful and thought provoking article about our tendency as engineers to keep reinventing the wheel. Worth reading and taking a moment to reflect on your and your team’s practices.

Introducing: Modern Web

This looks interesting - a website dedicated to helping developers get up and running quickly on the modern web. It’s brand new and not super clear how extensive it’s going to get, but looks like the big focus right now is on ES Modules, helping folks get going on that both with guides and an ES module-first based test runner.

Hands-on WebAssembly: Try the basics

Step by step tutorial to teach you how to WebAssembly works and how to get it built all the way from a file of C or Rust code up to wasm and served to the browser.