JavaScript Weekly

What impact could modern JS have on your users?

Fri, 22 Jan 2021 00:00:00 +0000

#522 — January 22, 2021

JavaScript Weekly

The JavaScript 'Rising Stars' of 2020 — Fingers crossed this is our final ‘look back’ at 2020, but the ‘Best of JS Rising Stars’ roundup comes out at the start of each year and shows off the fastest growing JavaScript tools and projects over the past year based on GitHub stars (which, yes, is by no means a definitive metric). Stand out projects include Deno, Playwright, esbuild, and Rome, all of which we expect to see great things of in 2021.

Michael Rambeau and Benjamin Blackwood

EStimator.dev: The Modern JavaScript Savings Calculator — Enter a URL and this tool will tell you how much faster the site could be if the code was switched over (or compiled) to modern JavaScript. Read about it here.

Google Chrome Labs

Spreadsheet Viewer: Render XLSX Files In the Browser — Spreadsheet Viewer is a client-side component that allows users to preview XLSX file without the need of opening it in an external app. It is mobile-friendly, and supports all major frameworks such as React, Angular, and Vue. Check out the live demo.

Handsontable sponsor

JerryScript: A Ultra-Lightweight JS Engine for the Internet of Things — If you’ve got a constrained environment (e.g. a microcontroller, a watch, or the like) with only kilobytes of RAM to hand, this is the sort of thing you might want to try. It’s ES 5.1 compliant and, as of this week, supports realms, BigInt, class fields, flatMap, and more.

JerryScript

How I Build JavaScript Apps in 2021 — A freelance developer shares his development approach from avoiding build processes and transpiling, to testing and re-using his own work.

Tim Daubenschütz

Quick Bits

The Node.js team have opened up their 2021 user survey and want you to take it. Don't forget to name drop us in question 59 😄
Dr. Axel Rauschmayer is working on a ES2021 edition of his JavaScript for Impatient Programmers book and you can stay up to date on it via this list.
GitHub has made it easier to rename existing branches in repos – such as if you want to change master to main.
A look at Google's progress on migrating Puppeteer to TypeScript.
The ▶️ latest episode of the TC39er podcast features Ujjwal Sharma, a compiler hacker and Node.js and V8 contributor.

📖 Articles, Opinion & Tutorials

Some Language-Agnostic Guidelines on Naming Variables — JavaScript is used although the basic principles can be applied to most languages.

Artem Zakharchenko

13 JavaScript One-Liners That’ll Make You Look Like a Pro — I think the title oversells it a little, but nonetheless, you might pick up a tip or two from these well presented examples.

Twan Mulder

Running Rust in WebAssembly in a Pool of Concurrent Web Workers in JavaScript — “I would like to share a little experiment I did for no other reason than to show I could.” Fantastic. This sort of thing is only going to become more popular, too. This will be WebAssembly’s decade.

Alessandro Genova

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log.

Wallaby.js sponsor

Capturing Hacker News Mentions with Node and MongoDB — If you don’t want to read the ‘orange site’ (as it’s often called) but you’d like to know if something gets mentioned there, here’s one option.

Nic Raboy

Async Loops and Why They Fail — Mixing loops with async calls in JavaScript can produce unexpected results. First in a four part series.

Federico Kereki

▶ 10 JavaScript Clean Code Examples — Thoughts on ten examples of approaches worth considering if you’re trying to keep your code clean. It’s based on this article by Ibeh Ubachukwu.

Adrian Twarog

Creating Comic Book Speech Bubbles with SVG and JavaScript — Can comic-style speech bubbles be rendered in both an accessible and visually authentic manner? Yes, with a little work.

Paul Spencer

Drawing 2D Metaballs with WebGL2 — An in-depth tutorial on how to code 2D visuals using WebGL2 (the newest version of WebGL and supported by most browsers save for Safari. (Hands if you misread this as 'meatballs' at first.. 🤚)

Georgi Nikolov

Learn to Do File Uploads from the Client-Side Without Managing Storage

ImageKit.io sponsor

▶ Tips For Your Next JavaScript Interview — A handful of useful suggestions in an eight-minute video.

Chris Power

Using Dexie.js to Write Slick IndexedDB Code
Andy Haskell

🛠 Code & Tools

Sortable 1.13.0: Create and Reorder Lists with Drag-and-Drop — Supporting all modern browsers and touch devices, this library handles list-to-list dragging with auto scrolling, CSS animations, multi-drag support, and more. Lots of demos on the homepage. GitHub repo.

SortableJS

Forgo: A Tiny UI Runtime for Modern Web Apps — This is a small library that lets you build apps using JSX, similar to React. But unlike React, the syntax carries over from DOM APIs and JS so it’s easy to learn.

forgojs

Boa v0.11: An Experimental JS Lexer, Parser and Compiler — Written in Rust and led by a TC39 member, Boa aims for full spec compliance. Why would you use this? Maybe you’re interested in the current trend of writing JavaScript tooling in Rust or Go and would like an embeddable JavaScript implementation there..

Jason Williams

Scout APM - Leading Edge Performance Monitoring Starting at $39/Month — Streamline troubleshooting with real-time alerts & tracing logic that ties issues to source code. Try free for 14 days.

Scout APM sponsor

jsPDF 2.3: Client-Side PDF Generation for Everyone — There’s a live, interactive demo here.

James Hall

Focus Rings: A Centralized System for Displaying and Stylizing Focus Indicators — From the Discord team, a React-based solution to render clean and consistent focus ring indicators for keyboard navigation.

Discord

JZZ 1.2.0: A MIDI Library for Node and the Browser — Brings the Web MIDI API to Node so you can send, receive and play MIDI messages from both Node and the browser on Linux, macOS and Windows.

Jazz Soft

@vueuse/sound: A Vue Composable for Playing Sound Effects — A Vue version of the useSound React hook.

Yaël Guilloux

eslint-plugin-vue 7.5.0: Official ESLint Plugin for Vue.js
Vue.js Team

💻 Jobs

Software Engineer, Full-Stack (Fully Remote/US) — Supply chain accounts for ~10% of Global GDP. Join our small team to change how organizations work across the global supply chain.

Isometric Technologies

Find a Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

✅ A Neat Looking Extension

CodeCopy: A Browser Extension That Adds 'Copy to Clipboard' Buttons on Every Code Block — Works with GitHub (including gists), MDN, Stack Overflow (and other Stack Exchange sites), Medium, CSS Tricks, and more.

Zeno Rocha

The State of JS 2020 survey results

Fri, 15 Jan 2021 00:00:00 +0000

#521 — January 15, 2021

Unsubscribe | Read on the Web

JavaScript Weekly

The State of JS 2020 Survey Results — 23,765 people from 137 countries took part in the recent State of JS survey and while there are some common criticisms of the project, the results are nonetheless interesting and we’ll be digging into some in forthcoming issues. Standouts include:

Svelte took the top frontend framework crown from React for developer satisfaction.
Testing Library jumped straight to #1 for testing libraries.
More developers than ever are producing PWAs or using WebAssembly.
86% of respondents are using VS Code to work on their code.

State of JS

Announcing TypeScript 4.2 Beta — What’s new? Leading/middle rest elements in tuple types (e.g. let bar: [boolean, ...string[], boolean]), smarter type alias preservation, stricter checks for the in operator, and more.

Daniel Rosenwasser (Microsoft)

⭐️ Professional JavaScript Learning Path — From JavaScript foundations, all the way to Hardcore Functional JavaScript, find out how far you can go with your JavaScript abilities in this comprehensive learning path.

Frontend Masters sponsor

Snowpack v3.0: Reimagining Web Development with ESM — You can now import any npm package on demand (with streaming imports), and there’s a new native JavaScript API. Oh, and it’s the one year anniversary of Snowpack’s 1.0 release! 🎉

Fred K. Schott

We asked Snowpack's creator, Fred K Schott, for a few words on Snowpack 3.0:

“I couldn't be more excited about this launch! Streaming imports are a game changer that simplify dependency management by fetching packages as soon as you need them: pre-built, pre-bundled and ready to run.

We also shipped a first-class integration with esbuild to bundle Snowpack builds 100x faster than Webpack, Rollup or Parcel (seriously, look at these benchmarks!). If you haven't had a chance to check out Snowpack yet, v3.0 is a great chance to jump in.”

Node Package Maintainers, Get Ready For ES Modules — ES modules are rapidly becoming a day to day reality for Node.js package maintainers, so spare a thought for Sindre who has about 20 million packages (slight exaggeration) to his name. Sindre shares some basics on why it’s important and what his plans are.

Sindre Sorhus

📖 Articles, Opinion & Tutorials

Advanced Promise Patterns: Promise Memoization — Memoizing async methods to simplify caching and avoid common race conditions. An interesting example of memoization 👍

Jon Mellman

▶ Building FPGA Hardware Using TypeScript: Driving an RGB LED Panel — Most people aren’t likely to play with FPGAs rather than cheaper microcontrollers but this is a wonderful detailed JS-flavored look into that world.

Low Level JavaScript

How to Implement An Exponential Backoff Retry Strategy — Automatically retry an async operation in an efficient way

Tamás Sallai

The Effortless Backend for JavaScript Applications with GraphQL — Add state to your JavaScript apps effortlessly with Fauna - the secure and operations-free data API for Jamstack.

Fauna sponsor

10 Best Practices to Containerize Node Webapps with Docker — Production-grade guidelines for building optimized and secure Node-based Docker images whether for microservices, server-side rendering, or stand alone apps.

Liran Tal and Yoni Goldberg

The navigator.clipboard API — A look at async read and write methods for managing clipboard data.

David Walsh

▶ Working with WebSockets on AWS — A 30 minute screencast focusing on using API Gateway as a WebSocket endpoint to talk with a serverless Lambda function. Both the client and the serverless function are written in JavaScript, of course.

Ryan H Lewis

▶ Building Your Own E-commerce System in 25 Days — 25 videos covering 25 days of using Next.js, Netlify and Stripe to build an e-commerce system.

Jon Meyers

OpenTelemetry and Observability: Achieving Full System Visibility

Lightstep sponsor

Deploying a Serverless Jamstack Site with RedwoodJS, Fauna, and Vercel — A neat combination of ideas and technologies here. RedwoodJS is a ‘full stack Jamstack’ framework (created by one of the co-founders of GitHub), Vercel provides the deployment and hosting, and Fauna is a serverless database/data API.

Anthony Campolo

▶ Publishing a Vue.js 3 Component on npm

Lachlan Miller

🛠 Code & Tools

supported by

Altair: A Feature-Rich Cross Platform GraphQL GUI Client — A tool clearly written using Web technologies but available for macOS, Windows, Linux, etc. for testing and working with GraphQL and GraphQL APIs.

Sir Muel

Merge Chance: Will Your Pull Request Get Merged? — A very bare bones, but interesting, tool for seeing what percentage of a project’s pull requests from outsiders get merged in. For example, 83% do for Redis whereas only 23% do for Vue.js.

Piotr Zakrzewski

Cheerful, Collaborative Project Management — Some PM tools are too simple. Others, unwieldy and unpleasant. Clubhouse is nothing but good adjectives. Give us a try.

Clubhouse.io sponsor

Compiled: Build Time Atomic CSS-in-JS — Write your styles in JavaScript with the full power of CSS then have them compiled ahead of time. GitHub repo.

Atlassian

svelte-dnd-action: An Action-Based Drag and Drop Container for Svelte — Makes the bold claim that it “supports almost every imaginable drag and drop use-case, any input device and is fully accessible.”

Isaac Hagoel

Handtrack.js: Realtime Hand Detection in the Browser — Of course, there’s a demo. It seems to work pretty well.

Victor Dibia

vno: A Vue / Deno Love Story? — The first native build tool for compiling and bundling Vue single-file components in a Deno runtime.

Andrew Rehrig

Announcing Scala.js 1.4.0 — Build robust front-end web applications in Scala with Scala.js

Scala.js

💻 Jobs

Senior JavaScript Engineer - Platform Engineering (Berlin, DE) — Help us improve our web performance & frontend infrastructure with actionable feedback, scalable workflows & tools our devs love to use.

ResearchGate

Senior Frontend Developer (m/f/d) — We’re looking for talented React / React Native devs to join our InsureTech-Team and help us shape the insurance world of tomorrow. Offering responsibility, ownership and growth possibilities.

Getsafe Digital GmbH

Find Your Next Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

Hired

The top tools, stories, and resources of the past year.

Fri, 8 Jan 2021 00:00:00 +0000

#520 — January 8, 2021

Unsubscribe | Read on the Web

👋 We're back! Usually we end the year by looking back at the biggest items of the year, but December was so busy that we've decided to leave it till now :-) If you didn't see every issue last year (and you probably didn't!) you should find a few things in this issue that will catch your imagination.
__
Peter Cooper, your editor

JavaScript Weekly

Our most clicked links of 2020

1. ECMAScript 2020: The Final Feature Set — TC39 (and then Ecma) approved the ECMAScript 2020 spec in early 2020, but what was new? Dr. Axel rounded it up succinctly with links to the various proposals. We also now have a draft of ECMAScript 2021 with us if you want to get prepared.. :-)

Dr. Axel Rauschmayer

2. 150+ JavaScript Questions (With Their Answers Explained) — Want to test your JavaScript knowledge? Whether for fun or a job interview, this remains an interesting set of questions, complete with explanations of the answers.

Lydia Hallie

3. ▶️ A Look at Deno: A (Then-)New JavaScript Runtime — Deno is a new(ish) JavaScript/TypeScript runtime created by Ryan Dahl, the creator of Node.js, and it was interesting to see his second take on a similar idea. 1.0 dropped in May with later releases adding cool things like being able to create standalone executables. Will Deno continue to grow in 2021? Let's see.

Bert Belder

Build a Simple React Application Using Hooks — Learn how to create a simple React application using Hooks to add state to a functional component.

Okta sponsor

4. Fixing Memory Leaks in Web Applications — When the front-end became more dynamic, part of the bargain was that front-end developers would have to deal with “a new class of problems that don’t really exist in the server-rendered world”.. including avoiding memory leaks on 101 different types of client device. Here’s an introduction to client-side memory leaks and how to begin investigating them.

Nolan Lawson

5. WTFJS: A List of Funny and 'Tricky' JavaScript Examples — This has been around for years but continues to resonate with developers and gets various tweaks and adjustments. Worth it if you want to take a look into some of the more “uh, what?” corners of JS.

Denys Dovhan

6. I Created The Exact Same App in React and Vue And.. — If anything is guaranteed for 2021, React and Vue will continue to push and inspire each other. The author of this post built the same app in React and Vue in both 2018 (the pre-hooks era!) and 2020 to see the differences between the two.

Sunil Sandhu

All the Canaries Lived: It’s Time to Adopt Progressive Delivery —
The adoption of Progressive Delivery will decide who wins and loses in modern software development.

LaunchDarkly sponsor

Runners up:

What to Pay JavaScript Developers in 2020? from Eric Elliott. Or, perhaps, what you could be earning?
▶️ You Really Don't Need All That JavaScript, I Promise was a fantastic 20 minute talk on why we shouldn't rely on JavaScript as much as we often do.
In Goodbye, Clean Code, Dan Abramov told us to beware of premature refactoring and de-duplication.
JavaScript Features To Forget by David Flanagan (who's written more JavaScript books than I've had hot dinners).

4 Most Clicked CodePens of 2020

We love a good live demo of some snippet of JavaScript or CSS and.. so do many of you. Here are our most clicked ones from 2020:

You Can Play The Blues — Get your music thing on and jam out.
IntersectionObserver Visualizer — A useful interactive demo of the IntersectionObserver API.
A Typing / Typewriter Effect in Pure CSS — Something that JS is often used for.
How to Colorize the Default <audio> Controls

🛠 Top Code & Tools of 2020

Rome: Unifying The Frontend Development Toolchain — We first casually mentioned this in-beta tool, dubbed the “spiritual successor of Babel”, back in April, but things have continued to come a long way since then. Rome aims to replace Babel, ESLint, Webpack, Prettier, Jest, and more, to ostensibly simplify the frontend workflow. We’re all for it if it works. Here’s an introductory blog post.

Sebastian McKenzie

1loc: A Collection of One-line JS Snippets — A neat little collection of vanilla JavaScript one-liners divided into various categories (arrays, date/time, DOM, etc).

Nguyen Huu Phuoc

Snowpack: A Build System for the Modern Web — Say bye-bye to your bundler and let modern browsers’ ES module support do the heavy lifting with Snowpack. Or if you need to target more than just modern browsers, you can always just use it to speed things up in development. A Snowpack 3.0 release candidate came out at the end of 2020 with the final 3.0 release due... any day now.

Fred K. Schott

Stream Chat React Native v2.0.0 Released — The official React Native and Expo library of components for Stream Chat (a service for building chat apps) is now rewritten in TypeScript to ensure type safety for easier-to-read code/debugging.

Stream sponsor

Grid.js: An Advanced Table Control — A lightweight, advanced table plugin that can work alongside React, Angular, Vue, or, well, nothing. Check out some of the examples for more on how to use it. It uses Preact under the hood.

Afshin Mehrabani

33 Line 'React' — Sure, React does some useful things, but you can do the same things with very little code, so.. why not? A fun experiment that was rather unlikely to replace React ;-) Also of interest was that Hacker News had its say and the author responded.

Oliver Russell

GitHub Unveiled Its 'Super Linter': One Linter to Rule Them All? — Setting up the right linters for the various types of code in your projects can be… a bit of a pain. So GitHub unveiled Super Linter, a combination of linters you could use with your repos via GitHub Actions for a variety of different languages.

GitHub

Spend Less Time Debugging and More Time Building

Scout APM sponsor

Vue 3.0 'One Piece' Released — Vue.js is a highly popular framework for building UIs with JavaScript, and a common alternative to things like React or Angular. Vue 3.0 was in the pipeline for so long that its eventual release post actually got relatively few clicks, but it's a huge release nonetheless with a new composition API, Teleport, and more.

Vue.js Team

p5.js 1.0: The 'Creative Coding' Libary — A major milestone for a long-standing JavaScript library that builds upon Processing, a popular creative coding environment (which also inspired the Arduino IDE). p5 is a bit hard to explain succinctly, so definitely check it out.

lauren mccarthy

💻 Jobs

Senior UI/Front-End Developer — Help power the world’s largest online design school and help students worldwide learn design and improve their careers.

Interaction Design Foundation

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

Welcome to JavaScriptLandia?

Fri, 18 Dec 2020 00:00:00 +0000

#519 — December 18, 2020

Unsubscribe | Read on the Web

JavaScript Weekly

JavaScriptLandia: The OpenJS Foundation's 'Individual Supporter Program' — A new initiative launched by the OpenJS Foundation and several prominent JavaScript community members which lets you express your support for the JavaScript ecosystem. Jory Burson and Myles Borins went on Stack Overflow’s podcast to explain what it’s all about.

Sara Chipps

A Growing Collection of 100+ Node.js Best Practices — This in-depth guide for Node developers came in as the most clicked link in Node Weekly this year and since it has continued to be updated regularly, we thought it was time to link it here too.

Yoni Goldberg

💡 Check out the top Node links of 2020 in this week's issue of Node Weekly.

10 React Security Best Practices — A checklist to help you and your team find and fix security issues in your React applications.

Snyk sponsor

JSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox — I’m a big fan of tools like JSBin and CodePen for throwing together quick experiments or testing out a bit of code. This is a new alternative which has numerous layouts, very responsive autocomplete, and iOS and Android apps too.

JSitor

⚡️ Quick Releases

npm 7.2.0 — Nomenclature predictably misunderstood.
Node 14.15.3 — The popular server-side runtime.
Popper.js 2.6 — Tooltip and popover placement engine.
esprint 2.0 — Fast multithreaded ESLint runner.
Polly.js 5.1.0 — Record, replay, and stub HTTP interactions.
Flux 4.0 — React app architecture library but now in 'maintenance mode' as of this release.

Node.js has a full suite of security releases coming in the week of January 4, 2021 due to some newly discovered security issues.
The npm registry now displays when packages have bundled TypeScript declarations. See Fastify's package page for an example.
GitHub has got rid of its cookie banners — how? By ceasing to use all non-essential cookies. Fantastic!
The State of JS Survey is still open if you haven't taken it yet, but probably not for long!

📚 Tutorials, Opinions and Stories

Styling console.log() Output Formatting with CSS — Like most of us (probably?) Ben forgets console.log output can be styled with CSS, so he sat down to write out a bunch of increasingly elaborate examples to make it stick.

Ben Nadel

▶ What Is GraphQL? — Drew McLellan (of Perch and 24ways fame) and Eve Porcello (co-author of Learning GraphQL) discuss GraphQL and how it can solve common API problems. (41 minutes.)

Smashing Magazine podcast

Improve Serverless Observability With AWS Lambda Extensions Integration — Learn how New Relic is integrating with the Extensions API to make monitoring your AWS Lambda functions even easier.

New Relic sponsor

5 Most Clicked YouTube Videos of 2020

By JavaScript Weekly readers, anyway! No PewDiePie here ;-)

A Look at Deno: A 'New' JavaScript Runtime — Deno 1.0 came out earlier this year and it's continued to mature since then.
You Really Don't Need All That JavaScript, I Promise — Why we shouldn't reach for a JS framework as the first, last, and only tool we use.
Vue.js: The Documentary — A well produced 30-minute documentary focused on Evan You and his work on Vue.js.
React: The Basics in 20 Minutes — As it says!
(Re)-Implementing The Easiest JavaScript Game Ever — It's the 'running dinosaur' game you may have seen in Chrome when your wifi drops.

Using Airtable as a Database to Store Realtime Messages — Learn how to use Airtable to store realtime messages using a group chat app built with Vue.js as an example.

Srushtika Neelakantam

An Engineering Leader’s Guide to OpenTelemetry

Lightstep sponsor

Things I Wished More Developers Knew About Databases — Our most popular link this year from Database Weekly and one I think most developers will benefit from - hence, it's here too!

Jaana Dogan

How to Create Animated, 'Apple Music' Style Cards with WebGL and Three.js
Johnny Simpson

How Redux Reducers Work
Fortune Ikechi

🛠 Code & Tools

supported by

Moiva.io: A JavaScript Library Comparison Tool — The output is quite simple, but it plots some charts of downloads, bundle sizes, and various GitHub statistics, giving you a way to make basic comparisons. The developer has written about his motivations for building it too.

Alexey Antipov

AWS SDK for JavaScript Version 3 Now Generally Available — The next major version of AWS’s JavaScript SDK is now available and it has a new modular architecture with a separate package for each service.. so if you want to just use SQS, say, you just pull in the package for that. Browsers, Node.js and React Native are all catered for.

Trivikram Kamat (AWS)

Stream sponsor

JSweet 3.0: A Java to JavaScript Transpiler — Java programs are transpiled to TypeScript and JavaScript for use in browsers, mobile Web views, or Node.js. BTW, if you don't like Java, the final code sample here may give you the shivers.

Cinchéo

tiny-swiper: An 'Ingenious' JavaScript Carousel — A free carousel offering a ‘native-like experience’ for the web. Zero dependencies, written in TypeScript, no attribution required. Demos here.

Joe Harris

Dynamoose 2.5.0: A Modeling Tool for Amazon's DynamoDB — As Mongoose is to MongoDB, Dynamoose hopes to be to Amazon’s DynamoDB.

Dynamoose

💻 Jobs

Full Stack Senior JavaScript/Node.js Developer - Video Platform — Melbourne based, remote friendly role, working on exciting AI powered video creation SAAS product. Apply here.

Vidnami

JavaScript Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery