JavaScript on your schedule

#​633 — April 6, 2023

Read on the Web

❓ JavaScript Weekly on a Thursday? It’s true. As well as it being Good Friday tomorrow, we’ve decided to move to Thursday permanently going forward. We hope you have a good Easter, if you celebrate it, otherwise enjoy one fewer email on Fridays ????
__
Your editor, Peter Cooper

JavaScript Weekly

Croner: Cron for JavaScript and TypeScript — Trigger functions upon the schedule of your choice using the classic cron syntax. Works in Node, Deno, Bun and the browser, across time zones, offers error handling and overrun protection, and more. There’s an interesting live demo on JSFiddle.

Hexagon

▶️ JSON vs XML with Douglas Crockford — The author of 2008’s hugely popular JavaScript: The Good Parts went on a podcast to share the story of JSON, his discovery of JavaScript’s ‘good parts’, and his general approach to building software, including his dislike of JavaScript ‘frameworks.’ There’s a transcript if you’re not keen on listening. (50 minutes.)

CoRecursive Podcast podcast

Headless CMS with World-Class TypeScript Support — Kontent.ai is the leading platform for modular content. Streamline your code using TypeScript SDK, CLI, Rich text resolver, and strongly typed model generator. Scale with no problems when your project grows. Have you seen our UI?

Kontent.ai sponsor

The Angular Signals RFC — There’s a lot of excitement about a shift in Angular involving the addition of signals as a reactive primitive – the official RFC is now available for this feature, and you’re encouraged to leave comments. If you’d rather see a practical use for signals, Joshua Morony recorded ▶️ a screencast showing them off.

Angular Team

Over 100 Algorithms and Data Structures Demonstrated in JS — Examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations.

Oleksii Trekhleb et al.

IN BRIEF:

Laurie Voss looks at the most popular frameworks used in sites deployed to Netlify. React-based options lead the way.

Oliver Dunk of the Chrome Extensions Team has posted an update on the Manifest V2 to Manifest V3 transition – it’s taking longer than expected so Manifest V2 isn’t disappearing any time soon.

V8 v11.2 is shipping with support for WebAssembly tail calls.

With Chrome 113, Chrome is now shipping support for WebGPU.

A look at how Microsoft’s Blazor (a stack aimed at building front-end apps with C#) is skirting around JavaScript with its focus on WebAssembly.

JSDayIE 2023: The First JavaScript Conference in Ireland Is Back! — Join us on September 26th in Dublin to experience everything the Irish JavaScript community and Ireland have to offer.

JSDayIE sponsor

RELEASES:

Electron 24.0 – Complete with Chromium 112, V8 11.2, and Node 18.14.

Storybook 7.0 – Though still tagged ‘next’ and pending a proper launch.

Storybook for React Native 6.5

WebStorm 2023.1 – Commercial JS IDE from JetBrains.

Rete.js 2.0 Beta – Framework for building node-based editors.

???? Articles & Tutorials

Making a Big, Slow Vue/Alpine Page ‘Blazingly’ Fast — A practical example of a pattern the author is billing a “reactive switchboard.” “I’m going to use Vue/Alpine lingo in this article, but I think this pattern applies to lots of different tools.”

Caleb Porzio

▶  Watch Dan Abramov Explore React Server Components — At an epic (though well timestamped) four hours, this isn’t a quick watch, but Dan and Ben Holmes walk through everything React Server Components oriented, complete with diagrams, code, and a real-world app.

Ben Holmes

Getting PWAs in App Stores with PWABuilder — Thomas Steiner demonstrates how PWABuilder makes it possible to submit Progressive Web Apps (PWAs) to app stores like those provided by Google, Apple, and Microsoft.

Thomas Steiner (Google)

Add a Full-Featured Notification Center to Your App in Minutes

Courier.com sponsor

What Are Source Maps? — Learn how source maps can help you debug your original code instead of what was actually deployed after the build process.

Sofia Emelianova (Chrome Developers)

How I Used ChatGPT in My JavaScript Projects

James Q Quick

???? Code & Tools

Relaunching JSPM CLI for Import Map Package Management — Several years ago when JS had numerous competing module formats, JSPM was a useful package manager atop SystemJS, but now it’s being relaunched as an import map package management tool.

Guy Bedford

Chrome Extension CLI 1.4: CLI for Building Chrome Extensions — Want to get building an extension for Chrome as quickly as possible? This Node-powered tool aims to get you on the right path ASAP. v1.4 adds a script to generate a ZIP file (also known as a ‘postcode file’ at Microsoft UK? ????) of the extension.

Dutiyesh Salunkhe

React Chrono 2: A Flexible Timeline Component — A complete overhaul of a popular component. You can render themeable timelines in vertical, horizontal, or vertical alternating orientations. It includes keyboard navigation support, auto advancement, and, as of v2, support for nested timelines.

Prabhu Murthy

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Jampack: A Post-Processing Tool to Optimize Static Websites — Similar to a bundler or build tool, with features like image optimization, asset compression, and some code auto-fixes — all amounting to strong Core Web Vitals scores.

divRIOTS

imask.js 6.5.0: A Vanilla JavaScript Input Mask — Prevent users from entering invalid values. Has plugins for Vue, Angular, React, Svelte, and Solid, if needed.

imaskjs

tween.js 19.0
↳ JS tweening engine for easy animations.

Swiper 9.2
↳ Modern mobile-friendly touch slider.

gridstack.js 7.3
↳ Dashboard layout and creation framework.

ReacType 15.0
↳ Visual prototyping tool that can export React apps.

xstyled 3.8
↳ Utility-first CSS-in-JS framework for React.

Spacetime 7.4.2
↳ Lightweight timezone library.

???? Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

????‍???? Got a job listing to share? Here’s how.

???? Wise Words of the Week

A reminder from Vue.js’s Evan You that we live in a vast and varied world, including in the JavaScript ecosystem:

Flatlogic Admin Templates banner

367: With Micah Godbolt

I got to talk with Micah Godbolt this week! Micah is is a long-hauler at Microsoft working on Design Systems and such. His CodePen account looks a lot like mine: steady consistent usage of “just trying to figure something out” Pens sprinkled with some ideas that somehow seem to click with the wider front-end world. I found it fascinating that putting the word “Design Systems” into his book title “Front-end Architecture for Design Systems” was suggested by the publisher, and they were right! Turns out the term Design Systems clicked a lot harder since the 2016 publication and I’m sure hasn’t hurt sales!

Time Jumps

00:35 Guest introduction

02:46 Front end architecture for design systems

06:31 Building design systems

10:23 Sponsor: Linode

11:08 You don’t need a UI framework

17:49 Responsive multi-level nav pen

19:30 Multi height equal column pen

23:01 How do you ship components?

27:00 Testing for bugs

28:41 Consistently making pens

35:13 Creating a stripped down use case

40:06 Where can people find out more

Sponsor: Linode

Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure.  From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for all compute instances, including shared, dedicated, high memory, and GPUs. Linode makes cloud computing simple, affordable, and accessible allowing you to focus on your customers, not your infrastructure.  Visit linode.com/codepen, create a free account and you’ll get $100 in credit.

The post 367: With Micah Godbolt appeared first on CodePen Blog.Flatlogic Admin Templates banner

365: Klare

Klare is moving on from design at CodePen to design at GitHub. Huge congrats Klare! If you didn’t know Klare was our one and only dedicated designer here at CodePen and left a massive mark here in the design and UX of CodePen, the app, as well as internally in our organization practices. I’m talking with Klare here just a few days before her last day to reflect on her years here.

Time Jumps

00:25 Klare’s announcement

01:40 What are some of your work highlights?

04:01 Accessing your work

05:26 Following social feeds on CodePen

08:00 Designing at CodePen

11:27 Leaving behind a design system

14:06 Making incremental changes

16:08 Sidebar nav for an app

18:02 Homepage updates

21:26 Using a common language for code design system

25:35 Documentation and project management

29:08 New job description

The post 365: Klare appeared first on CodePen Blog.Flatlogic Admin Templates banner