This week, we’ve got blessings from the CSS Gods, Node.js partnering with Zac Efron, and bilb-woahhh baggins. Welcome to #71.
i guess if i love you, i should let you move on - Zac Efron (-ryan dahl)
Node.js Releases v17
The OG JavaScript runtime just had a major release last week, v17. He stopped answering our calls but can someone make sure Ryan Dahl gets this.
At this point Node, unlike your ex, is pretty stable. But there are a couple new things worth highlighting (in Node, not your ex - don’t send that text).
-
OpenSSL 3.0 Support — OpenSSL is a low-level toolkit for the Transport Layer Security (TLS) and Secure Sockets Layer (SSL) protocols that just released v3.0, and Node 17 now supports it. Most of these changes are pretty under-the-hood, which means you probably won’t notice (or understand) them. But if you want to knock yourself out reading about the hot new FIPS module, be my guest.
-
More Promisified APIs — Node has been steadily working to introduce more promise-based core APIs, and Node 17 comes with more of these new “promisified” API’s for the Readline module. Coincidentally, Promisified is the title of the straight-to-DVD documentary that I directed in 2010 about the Jonas Brothers and their promise rings.
-
Stack Traces Addition — “What version are you using?” is the first question that’s always asked when something breaks. So the Node team decided to do us all a solid by finally just including the Node version at the end of your stack trace.
Bottom Line: Why didn’t anyone on the Node team think to get Zac Efron to do a Cameo announcing this release as his character from 17 Again? Or at least Matthew Perry? What else are GitHub Sponsors even for?
The only pair programmer I’ll allow [sponsored]
Raygun gives you X-ray vision
…for your code. Now stop looking at me like that.
Raygun is a super powerful tool that makes it easy to get all the diagnostics you care about for your team’s web and mobile apps. When there’s an issue, it shows you exactly what’s going on, who’s being impacted, and exactly how to fix the root cause — down to the specific line of code itself.
This X-Ray Code Vision lets you quickly prioritize fixing the issues that have the biggest impact on your users, so that you can quickly return to watching Spider-Man 3 starring Tobey Maguire (aka the greatest film of the 21st century).
Start a 14-day free trial of Raygun and give your team a tool that’ll genuinely make their lives easier. It only takes a few lines of code, and their simple, usage-based plans start at $4 a month – a small price to get your users to love you, your team to love you, and your stepdad to finally respect you.
Try it out. Thank me later.
When you use CSS to maintain aspect ratio
Aspect-Ratio Blessings
If you had to describe the web in one word, there’s a fair chance that that word would be “hacky”. There’s a reason it’s called CSS Tricks and not CSS Tips, amrite 🥁?
Take this, for example: How do you maintain the aspect ratio of a div with CSS? What seems simple actually requires a wrapper <div>, a bunch of extra CSS, and some inconvenient math calculations.
<style>
.aspect-wrapper {
width: 200px;
}
.aspect-box {
width: 100%;
padding-bottom: 56.25%;
background: gold;
}
</style>
<div class="aspect-wrapper">
<div class="aspect-box"></div>
</div>
Here’s the CodePen.
Not ideal. For one, you have to calculate the percentage of the aspect ratio that you want the box to maintain. The 56.25% used in the example above is for a widescreen 16:9 aspect ratio.
Also, this hack only lets you maintain aspect ratio for a fixed width, but not a fixed height — and there might not even be a hack to fix that!
The Good News: None of that matters now. And I’m not just saying that because I’ve been reading too many tweets from Nihilist Arbys (again). It’s because the CSS Gods Working Group loves us, so the proposal for a new aspect-ratio CSS property has been finalized and is now available in every browser.
Here’s how it works: You just like, use it.
<style>
.no-hack-box {
height: 200px;
background: rebeccaPurple;
aspect-ratio: 16 / 9;
}
</style>
<div class="no-hack-box"></div>
One <div>, no math, and it works on fixed-height elements as well. It even works on elements in a flexbox or grid layout, or paired with object-fit when working with images.
You can see it in action in this CodePen.
Bottom Line: The CSS Gods have heard our prayers. Turns out, when there was just one set of footprints in the CSS sandbox, it’s because they were carrying us all along 🙏.
For more information, here’s a nice breakdown by the CSS Tricks master himself.
Spot the Bug
const petName = 'Leo'
const placeholder = '{NAME}'
const reminderTemplate = '{NAME} is due for another visit. Please call us so we can set up a new appointment. We look forward to seeing you and {NAME} soon.'
const reminder = reminderTemplate.replace(placeholder, petName)
Cool Bits
-
It’s been 992 days since React Hooks were officially released, and the new (beta) React docs now reflect that change. Another big “L” for team React.createClass.
-
Appwrite is an open source Firebase alternative that makes cross platform app development easy. It’s got a realtime database, file storage, serverless functions, numerous authentication methods and an architecture that’s focused on scalability, privacy, security and self-hosting out of the box. [sponsored]
-
James Quick made this video on How to create a PWA with Next.js in 10 minutes. This should get those pesky Google devs to stop judging you for not having PWA support while they turn a blind eye to the degradation of the free and open internet, lol.
-
You can now build websites for your browser in your browser thanks to the new vscode.dev. Big win for the 1 person I know who loves programming on their iPad (looking at you, Ben Adam).
-
Evin wrote about Chaotic JavaScript patterns, and he describes the article as “dubious solutions to dubious problems.” You had us at dubious, Evin.
-
Winbox.js is a modern HTML window manager for the web. I’ve got $10 to the first person to get some chaotic JavaScript patterns running on vscode.dev running in a Winbox.
-
Cash is a super small jQuery alternative that also happens to Rule Everything Around Me.
-
Rowy lets you manage your Firestore database in a spreadsheet-like UI, similar to Airtable. Here’s to hoping this becomes a new naming convention going forward. Could have “Boxy” for our CSS framework, “Bundly” for the bundler, and “undefined is not a functiony” for the JavaScript framework.
Spot the Bug - Answer
String.prototype.replace only replaces the first occurrence found in the string. If there could be more than one occurrence, use String.prototype.replaceAll which is part of ES2021.
const petName = 'Leo'
const placeholder = '{NAME}'
const reminderTemplate = '{NAME} is due for another visit. Please call us so we can set up a new appointment. We look forward to seeing you and {NAME} soon.'
const reminder = reminderTemplate.replaceAll(placeholder, petName)
