--- title: "Happy 25th birthday, JavaScript" publication: "JavaScript Weekly" issue: 517 published_at: "2020-12-04" canonical_url: "https://javascriptweekly.com/issues/517" --- Plus dynamically generating social sharing images, a handy online JSON editor, and reading ancient JavaScript books for fun. #517 — December 4, 2020 [Unsubscribe](https://javascriptweekly.com/leave/*|UID|*)|[Read on the Web](https://javascriptweekly.com/issues/517) ✍️ Sometimes we have weak issues, sometimes we have strong issues.. I think this is one of the latter! Lots of both fun and useful stuff here, from a JavaScript driven mannequin(!) to a fantastic serverless use case many of us could benefit from. Enjoy! __ _Peter Cooper, your editor_ JavaScript Weekly [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/fi54owb7ub2pc6brtode.jpg)](https://github.com/preactjs/wmr) [WMR: A Tiny All-in-One Development Tool for Modern Web Apps](https://github.com/preactjs/wmr) — From the Preact team comes an interesting ‘everything you need in a single box’ tool for putting together webapps with bundling, JSX, CSS modules support, and more. Get started with `npm init wmr projectname` if you dare or see [this Twitter thread](https://twitter.com/_developit/status/1334233001031503873) for just why this is exciting. Preact [What People in Tech Had to Say About JavaScript When It Debuted in 1995](https://superhighway.dev/javascript-25-years-1995) — It’s 25 years (today!) since a press release went out from Netscape and Sun Microsystems heralding the arrival of JavaScript. 28 then industry leaders chimed in with what they thought. We’re giving Bud Colligan a C- and Rose Ann Giordano an A+ for their comments. Chris Brandrick [![\](https://copm.s3.amazonaws.com/64fb5da9.jpg)](https://frontendmasters.com/courses/production-typescript/?utm_source=newsletter&utm_medium=email&utm_campaign=javascriptweekly&utm_content=typescript) [New Course: Production-Grade TypeScript](https://frontendmasters.com/courses/production-typescript/?utm_source=newsletter&utm_medium=email&utm_campaign=javascriptweekly&utm_content=typescript) — Use the TypeScript language at scale to increase the developer experience and productivity of your teams. Learn to manage even the most ambitious TypeScript projects with confidence and ease. Frontend Masters sponsor ▶[Vue vs. Svelte with Evan You and Rich Harris](https://undefined.fm/radio/vue-vs-svelte-with-evan-you-and-rich-harris) — Evan You, the creator of Vue.js, and Rich Harris, creator of Svelte, both got on the same podcast to talk about the future of frontend development. _(Note: There is cursing.)_ The Undefined Podcast podcast - The [first release candidate of Snowpack v3.0](https://www.snowpack.dev/posts/2020-12-03-snowpack-3-release-candidate) is out and there's a new way to load npm imports on-demand.. no more `npm install` step needed! We'll feature this again when it's released in January. - Chrome 88 is in beta but [lots of changes](https://blog.chromium.org/2020/12/chrome-88-digital-goods-lighting.html) are forthcoming, including [Atomics](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics), [SharedArrayBuffer](SharedArrayBuffer) (gated), the Digital Goods API, and the removal of Web Components v0 support. - AWS Lambda (the serverless platform you can throw JavaScript - and more - at to have it run at your beck and call) now supports up to [10GB of memory and 6 vCPUS](https://aws.amazon.com/blogs/aws/new-for-aws-lambda-functions-with-up-to-10-gb-of-memory-and-6-vcpus/), [1ms billing granularity](https://aws.amazon.com/blogs/aws/new-for-aws-lambda-1ms-billing-granularity-adds-cost-savings/), and [functions in containers.](https://aws.amazon.com/blogs/aws/new-for-aws-lambda-container-image-support/) ⚡️ Quick Releases - [htmx 1.0](https://htmx.org/posts/2020-11-24-htmx-1.0.0-is-released/) — Decorate HTML with behavior. Used to be intercooler.js. - [d3 6.3.0](https://github.com/d3/d3/) — Essential data visualizaton library. - [A-Frame 1.1](https://github.com/aframevr/aframe/releases/tag/v1.1.0) — Web framework to build VR experiences. Now 5 years old. - [Frappe Charts 1.5.4](https://github.com/frappe/charts) — Responsive, zero-dependency SVG charts. - [webpack 5.9.0](https://github.com/webpack/webpack) — It splits. It shakes. It bundles. - [Yarn 2.4](https://dev.to/arcanis/yarn-2-4-log-filters-audits-better-warnings-49io) — Package manager. Some updates on Yarn 3.0 here too. - [Nashorn 15](https://mail.openjdk.java.net/pipermail/nashorn-dev/2020-November/007597.html) — Oracle's JDK-based JavaScript engine. - [PWAdvent](https://pwadvent.dev/) is an advent calendar covering progressive browser API techniques, like the Web Share API, manifests, and service workers. 📚 Tutorials, Opinions and Stories [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/jn3iqnwwvenstdsdapbo.jpg)](https://www.ryanfiller.com/blog/automatic-social-share-images/) [Dynamically Generating Social Share Images Serverlessly](https://www.ryanfiller.com/blog/automatic-social-share-images/) — This is a perfect use case for a serverless function and a great example of post that pulls together a variety of ideas for a creative end result. Ryan Filler [Puppeteer vs Selenium vs Playwright, A Browser Automation Speed Comparison](https://blog.checklyhq.com/puppeteer-vs-selenium-vs-playwright-speed-comparison/) — Spoiler: There are differences in microbenchmarks but in real world scenarios it’s basically a wash. Use whichever suits your use case. Giovanni Rago (Checkly) [AngularJS Security Fundamentals](https://snyk.io/blog/angularjs-security/?utm_campaign=cooperpress-q4&utm_medium=Email&utm_source=cooperpress-javascript-weekly&utm_term=angularjs-security) — A collection of AngularJS security fundamentals for web developers. Snyk sponsor [Lots of Ways to Use `Math.random()` in JavaScript](https://css-tricks.com/lots-of-ways-to-use-math-random-in-javascript/) — I’m digging the level of creativity being shown in these examples. Lots to play with, perfect for learners. Jwahir Sundai ▶[Building a Svelte Static Website with Smooth Page Transitions](https://tympanus.net/codrops/2020/11/30/building-a-svelte-static-website-with-smooth-page-transitions/) — An 80-minute live coding session walking through building a site with Svelte.js with Three.js and GSAP-powered smooth page transitions. Yuriy Artyukh [How to Understand the `reduce` Function in 5 Examples](http://thecodebarbarian.com/javascript-reduce-in-5-examples.html) — Summing, seeking, chaining, and generally bringing things together. Valeri Karpov ▶[Converting an Old jQuery Plugin to Vanilla JS](https://gomakethings.com/converting-a-jquery-plugin-to-vanilla-js-lettering.js/) — [Lettering.js](http://letteringjs.com/) is a neat jQuery plugin for getting ‘letter level’ control over Web typography. It hasn’t been updated for three years, but here’s a screencast showing an attempt at removing the jQuery dependency. Chris Ferdinandi [Introducing Repluggable: Solving The Dependency Model Challenge with Micro Frontends & Contracts](https://www.wix.engineering/post/introducing-repluggable-solving-the-dependency-model-challenge-with-micro-frontends-and-contracts) Wix Engineering sponsor [Reading John Resig's 'Pro JavaScript Techniques' 14 Years Later](https://www.marklreyes.com/review-of-pro-javascript-techniques/) — Is anything still relevant from a popular book written by jQuery’s creator back in 2006? Mark thinks so. Mark Reyes [10 JavaScript Array Methods to Simplify Your Code](https://dev.to/denicmarko/10-javascript-array-methods-to-simplify-your-code-56fe) [A Grab Bag of Handy JavaScript 'Tricks'](https://dev.to/noseratio/a-few-handy-javascript-tricks-an9) 🛠 Code & Tools supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/pnoskhkpqs7sbmawc6xu.jpg)](https://jsonformatter.live/) [JSON Formatter Live: A Minimalist JSON Formatter & Minifier, Installable as a PWA](https://jsonformatter.live/) — Doesn’t store any data, is keyboard friendly, and will give you live inline error messages when you add any code. Alexandru Năstase [JSONEditor: A Component for Viewing and Editing JSON](https://github.com/josdejong/jsoneditor) — If your app needs to let users work with JSON, this is worth a look. It supports several models (including a tree view) and is cross browser compatible. [Live demo](http://jsoneditoronline.org/). Jos de Jong [Stream Chat React Native v2.0.0 Released](https://getstream.io/blog/stream-react-native-v2-sdk-release/?utm_campaign=2020_12_04_javascriptweekly&utm_medium=promoted_newsletter&utm_source=javascriptweeklypromoted) — 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 [JsDiff: A Visual Comparison of JavaScript Library Metrics](https://jsdiff.dev/) — NPM downloads, Google Trends, GitHub stars, open issue count, etc. Alexey Antipov [Over 100 JavaScript Algorithms and Data Structures Demonstrated](https://github.com/trekhleb/javascript-algorithms) — 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. Available in other languages too like Chinese, Korean, French, and Spanish. Oleksii Trekhleb et al. [Mannequin.js: A Library to Render and Manipulate a Mannequin Figure](https://boytchev.github.io/mannequin.js/) — I can’t think of any use I’d have for a animated human figure, but this is nonetheless a neat piece of work. [GitHub repo](https://github.com/boytchev/mannequin.js). Pavel Boytchev [Compressor.js: Client-Side Image Compressor](https://fengyuanchen.github.io/compressorjs/) — The idea is you’d use this if you want to compress supplied images before uploading them, say. [GitHub repo](https://github.com/fengyuanchen/compressorjs). Chen Fengyuan [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/nmot7xmlhvidt1obj1ke.jpg)](https://refreshless.com/nouislider/) [noUiSlider: Lightweight Range Slider with Full Multi-Touch Support](https://refreshless.com/nouislider/) — No dependency. Fits into wherever you need it. Great homepage too. [GitHub repo](https://github.com/leongersen/noUiSlider). Leon Gersen [auth.js 3.0: GitHub API Authentication Library for Node and Browser](https://github.com/octokit/auth.js) — An official library, no less, and it supports four auth strategies. GitHub [vue-select: Everything You Wish