#485 — April 24, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

Introducing Crank.js: A New JSX-Driven Framework — A new framework for creating JSX-driven components with functions, promises and generators. If you haven’t got time to read the creator’s lengthy (but well worth reading!) rationale for creating another framework, check out the GitHub repo or jump straight into a CodeSandbox example. I hope to see a lot more about this in the near future.

Brian Kim

The Cost of JavaScript Frameworks — Using data from the HTTP Archive, Tim explores the performance cost of using various popular frameworks as a starting point. Some good analysis here.

Tim Kadlec

You Hacked the Gibson? Yeah, They Built Their Own Login — Don't let Crash Override pwn your app. FusionAuth adds secure login, registration and user management to your app in minutes not months. Download our community edition for free.

FusionAuth sponsor

Node.js 14 Released — v14 now becomes the current ‘release’ line with it becoming a LTS (Long Term Support) release in October. Diagnostic reports are now a stable feature, it now uses V8 8.1, there's an experimental Async Local Storage API, and more.

Michael Dawson and Bethany Griggs

Vidact: A Compiler to Convert React-like Apps to Vanilla JS — Compiles pure React-compatible JavaScript (JSX) to vanilla JavaScript with no virtual DOM.. think similar to Svelte, but without introducing a new syntax. A curious idea.

Mohamad Mohebifar

Highlight.js 10.0: The Web Syntax Highlighter Library — I always laugh when I see a big release of a popular library and saw we last linked it 5 years ago ???? Nonetheless, this is a big release and Highlight.js continues to be a fantastic library for syntax highlighting code.

highlight.js

???? Jobs

Senior Full-stack Developer (Malmö/Sweden) — Every day is different from the next. Join our upbeat Team and work on exciting, major projects using a modern JavaScript stack.

Ortelius AB

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

???? Tutorials

▶  React: The Basics in 20 Minutes — A well presented, up to date (yep, it covers hooks) tutorial that doesn’t hang around, whether you’re new to React or just want a refresher.

Devistry

Creating Web Apps via TypeScript and webpack — The example app doesn’t use any front-end framework, just vanilla DOM APIs. Some knowledge of TypeScript, webpack, and npm are required, but this is a neat way to bring together a bunch of tools.

Axel Rauschmayer

What Is The toJSON() Function? — If an object has a toJSON function, JSON.stringify() calls toJSON() and serializes the return value from toJSON() instead.

Valeri Karpov

A Much Faster Way to Debug Code Than with Breakpoints or console.log — Move forward and backwards through your code to understand what led to a specific bug, view runtime values, edit-and-continue, and more.

Wallaby.js sponsor

How Does TypeScript Work? A Bird’s Eye View — Dr. Axel goes into depth on the structure of a typical TypeScript project, what gets compiled, and how can an IDE be used to write TypeScript. Aimed at people who haven’t yet picked TypeScript up.

Axel Rauschmayer

10 Lesser Known Angular Features You've Probably Never Used

W3Radar

You Might Not Need switch — Using an object of outcomes instead of switch suits many use cases, though take care over readability.

Valentino Gagliardi

???? Code & Tools

Phelia: A Reactive Slack Application Framework — If you think Slack apps were all about text bots, think again.. you can now create apps complete with in-app UIs. Phelia brings the React approach to the task.

Max Chehab

Marked.js 1.0: A Fast Markdown Parser and Compiler — Got Markdown to render? Marked.js to the rescue. While the project is years old, 1.0 has dropped just this week. Here’s a live demo.

Christopher Jeffrey

Stream Chat API & JavaScript SDK for Custom Chat Apps — Build real-time chat in less time. Rapidly ship in-app messaging with our highly reliable chat infrastructure.

Stream sponsor

Alpine.js: A Minimal Framework for Composing JS Behavior in Your Markup — We only gave Alpine a brief link when it first dropped but with new versions coming out thick and fast, we think it’s well worth a look. Billed as “like Tailwind for JavaScript”, Alpine lets you keep the HTML you know and love and just pepper it with JavaScript as and where appropriate.

Alpine.js

enroute: A React Router with a Small Footprint for Modern Browsers

TJ Holowaychuk

Rosetta: A General Purpose Internationalization Library in 292 Bytes — Less than 300 bytes, but does have a few dependencies. Aims to be very simple and is targeted at basic string use cases.

Luke Edwards

NAB 2020 May Be Canceled, But The Full Bitmovin Experience Is Not

Bitmovin Inc. sponsor

Hotkey 1.4: Trigger an Action on an Element When a 'Hotkey' is Pressed — Use Hotkey, set the data-hotkey attribute on your elements, and you get keyboard shortcuts. GitHub built and uses it (look for the data-hotkey attributes on their pages).

GitHub

web-worker: Consistent Web Workers for the Browser and Node — In Node it works as a web-compatible Worker implementation atop worker_threads. In the browser it’s an alias for Worker.

Jason Miller

#486 — May 1, 2020

Unsubscribe  :  Read on the Web

JavaScript Weekly

???? I18n Ally: An All-in-One i18n Extension for VS Code — Got some internationalization work to do? I18n Ally gives you inline annotations, automated translations via Google Translate (which you can review), progress indication, etc. Supports React, Angular, Vue and other frameworks.

Anthony Fu

How a Few Lines of Code Broke Lots of Packages — Just under a week ago, people were reporting that create-react-app was broken. The culprit? A tiny change in a tiny dependency: is-promise. Luckily a fix was out very quickly and the creator of is-promise reflects on what happened here. Liran Tal also has some analysis of the situation.

Forbes Lindesay

Identify Front-End Issues Like JavaScript or Network Errors Fast — Datadog’s algorithmic alerts will proactively alert on any client-side issues such as JavaScript and network errors. Optimize the load time of your front-end resources, and detect any UI issues that affect critical user journeys. Try it free with Datadog Synthetics.

Datadog sponsor

Q: A JavaScript 'Quantum Circuit' Simulator — Bring quantum computing to your browser with this JavaScript simulation. If you were never quite sure what your JavaScript code was going to do, now you can formally explore the concept ????

Stewart Smith

???? Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

Senior Full-Stack Developer (Malmö/Sweden) — Every day is different from the next. Join our upbeat Team and work on exciting, major projects using a modern JavaScript stack.

Ortelius AB

???? Tutorials

A Guide to window.location — A breakdown that covers most of the methods and properties available on the DOM’s window.location object.

samantha ming

Implementing Dark Mode in React Apps Using styled-components

Blessing Krofegha

▶  Let's Build a Financial Dashboard App with React (Webinar On‑Demand) — Join TJ VanToll as he walks you through building a responsive Bootstrap-themed Stocks Portfolio app. Check it out today.

Progress KendoReact sponsor

Getting Started with NuxtJS — Learn how to create Vue.js-powered server-side rendered apps with NuxtJS including configuring an app and deploying it on Heroku.

Timi Omoyeni

▶  Learn Svelte: A 16-Part Course on Learning the Popular UI Framework — The course centers around building a chatbot, which is a nice change from the todos and other overused tutorial examples.

noah kaufman

10 Practical JavaScript Tricks — These kinds of lists are usually pretty run of the mill, but this one actually contains some lesser-known quick tips that you may not have seen before.

zander shirley

Moving TinyMCE to Modern JavaScript — The creators of TinyMCE (a popular WYSIWYG HTML editor) have been refactoring its rather legacy JavaScript (the first version came out 17 years ago!) to modern practices.

Joakim Lindkvist

7 JavaScript Design Patterns Every Developer Should Know — This is sort of like a (very) mini version of Addy Osmani’s 2017 book on JS design patterns (which is referenced at the end of the post).

deven rathore

▶  An Introduction to State Machines Using XState — XState is a neat way to work with state machines in JavaScript, Kyle is a neat teacher, and Egghead is a neat platform for unlocking these videos for us too.

Kyle Shevlin

Ride Down Into JavaScript Dependency Hell

AppSignal sponsor

A Collection of Challenging TypeScript Exercises — “The goal: Let everyone play with many different TypeScript features and get an overview of TypeScript capabilities and principles.”

Marat Dulin

A Visual Guide to React Mental Models — Different people learn in different ways but good mental models are always valuable and can be helpful if you need to juggle all of the pieces involved in a framework like React.

Obed Parlapiano

Turning Vue Components Into Reusable npm Packages — Outlines how you can reuse Vue components across your projects by automating your process to bundle, test, document, and publish your components.

Sjoerd de voorhoede

???? Code & Tools

jExcel v4: A Vanilla JS Interactive Table / Spreadsheet Control — 4.0 adds support for tabs/workbooks, updating a remote data source with JSON, formula support in a sheet footer, and more. There are lots of demos and examples on the official homepage.

Paul Hodel

Will It CORS? — A handy online tool/wizard for establishing how your (potential) use case will (or won’t!) operate alongside CORS (Cross-Origin Resource Sharing).

HTTP Toolkit

Get Great Visual Feedback & Bug Reports, Even from Non-Technical Folk — Simply click a page element to pin visual feedback with screenshots & metadata. BugHerd = fast and easy bug tracking.

BugHerd sponsor

utfu: Replace Busted Characters From Legacy Text with UTF-8 — Useful when old content contains characters like “— in place of a single quote, and similar legacy text issues.

Daniel Sieradski

Middy 1.0: A Node Middleware Framework for AWS Lambda — Middy’s aim is to make writing serverless functions (hosted on AWS Lambda) easier by providing a familiar middleware abstraction to Node developers.

Luciano Mammino

useWorker() 3.0: A React Hook for Blocking-Free Background Tasks — Makes it easier to throw tasks off to a Web Worker in React.

Alessio Koci

webpack-blocks: Configure webpack using Functional Feature Blocks

Andy Wermke

JZZ: A MIDI Library for Node and the Browser — Send, receive and play MIDI messages from both Node and the browser on Linux, macOS and Windows.

Sema

MDX 1.6: Use JSX in Markdown Documents — This version introduces initial Vue support.

Compositor and Vercel