Plus a TypeScript to Lua transpiler, console.log fun, and a love letter to Electron.

#516 — November 27, 2020

Unsubscribe  |  Read on the Web

JavaScript Weekly

Flash Animations Live Forever at the Internet Archive — I know that many readers built Flash powered sites and used JavaScript’s ActionScript cousin before coming to JavaScript. If so, this may be a walk down memory lane. The Internet archive are now archiving and emulating Flash animations (using Ruffle, a Rust powered Flash emulator) in the browser thanks to WebAssembly.

Jason Scott

🎁  Some Black Friday Things We Found for JavaScript Developers — Rather than clutter up the newsletter with the various offers going on, we’ve collected together all the ones we’ve found (or from people we know) and put them on one page 😄 Enjoy!

Superhighway

▶  How to Build a React Form Without the Hassle — Building React forms from scratch can be messy. How do you deal with form validation or styling, for example? An efficient and easier way is to use the React form library in KendoReact, a professional UI component library. Learn more in the video.

Progress KendoReact sponsor

TypeScript Performance Tips — This wiki page has been around a while but blew up on social media this week. Its original author stresses the points covered are guidance rather than indisputable fact, and many of the tips improve other forms of performance than just execution speed.

Microsoft

TypeScriptToLua: Write Lua with TypeScript — Lua is embedded in all sorts of places (games, Redis, NGINX..) so being able to write JavaScript and have it converted could open up some extra opportunities.

TypeScriptToLua Contributors

⚡️ Quick Releases

📚 Tutorials, Opinions and Stories

Boop! A Whimsical Twist on Hover Transitions — We love a bit of whimsy and this is a fantastic tutorial (aimed at intermediate React developers) for creating UI elements with a pleasant, animated feel.

Josh W Comeau

Optimizing Your Pages for the Back/Forward Cache — Firefox and Safari cache the state of entire pages (rather than just the underlying assets) so if you go back or forward, pages can be restored instantly. Chrome is gradually adopting similar features and there are some things you should take into account.

Philip Walton (Google)

Use console.log() Like a Pro — I can already hear people arguing pros don’t use console.log, but the polls usually say otherwise ;-) Nonetheless, some nicely demonstrated tips here.

Marko Denic

Stream Announced the Public v2.0 Availability of Their React Native SDK — The React Native SDK is now rewritten in TypeScript to ensure type safety for easier-to-read code and debugging.

Stream sponsor

What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps — A good walkthrough on the differences between SSR and static generation and the basics of building a statically rendered site using Next.js.

Colby Fayock

How I Built and Deployed a Fun Serverless Machine Learning App — A thorough examination, including code examples, of how a developer built a complete and fun image filter app with React, JavaScript, and got it running on Netlify and S3.

Ahmed Besbes

Adding Video to Your App with Vime.js — Vime.js is a modern framework-agnostic media player that can support services like YouTube and Vimeo.

Lawrence Oputa

▶  Automating the YouTube Upload Process Using Node — OK, most of us probably don't need to do this, but I appreciated how the creator walked through designing the feature. Definitely a tight screencast at only 10 minutes.

QuanticDev

OpenTelemetry 101 Technical Guide

Lightstep sponsor

▶  React, jQuery, Vue: What's Your Favorite Flavor of Vanilla JS?

The Stack Overflow Podcast podcast

How to Authenticate Django REST Framework API Calls from a Vue.js Client App

🛠 Code & Tools

supported by Okta

List.js 2.3.0: Add Search, Sort, Filters, and More to Tables and Lists — A long standing library with no dependencies that lets you give a bit more dynamism to HTML elements (though lists and tables are the obvious candidates) by adding search, sort, and filter features. Example.

Jonny Strömberg

Limited-Time Sale: 25% off Wallaby.js (First Time in 6 Years) and 50% off Quokka.js — Breakpoints and console.log is the past, real-time feedback without leaving your editor is the future.

Wallaby.js sponsor

uvu: A Fast and Lightweight Test Runner — Aimed at both Node and the browser, uvu is for anyone who likes things light. The output is nice too and as of this week’s 0.5.0 release, it has native ES module support too.

Luke Edwards

reading-time: Medium-Like Reading Time Estimation — Feed it some text and it’ll give you some basic estimates (e.g. ‘7 min read’).

Nicolas Gryman

vue-dock-menu: A Dockable Vue.js Menu Bar — Certainly an interesting UI concept here. It’s a menu bar, until you drag it to be a sidebar!

Prabhu Murthy

Zettlr: A Modern Markdown Editor — A rather attractive editor. Bear in mind it’s GPL licensed if you want to integrate it anywhere, but you may find it useful just as a personal editor.

Zettlr

web-ext: Command Line Tool to Help Build, Run, and Test Web Extensions
Mozilla

Reactochart: Good Looking Chart Components from Spotify

RxJS Ninja Template Library: A Starter Project for Building TypeScript Libaries with the NX Monorepo Approach

💻 Jobs

Engineering Manager (San Francisco) — Familiar with current web application frameworks? Got a solid understanding of agile methodologies? Join us and help lead a team, as we build the future of software engineer hiring.

Triplebyte

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