#516 — November 27, 2020
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
- Electron is often criticized for its weight, but the creator of an SVG animation tool has written a love letter to it because of how it makes his side business possible.
- TypeScript 4.1 came out last week, and Tomek Sułkowski is particularly excited for what it means for his Tailwind CSS productivity ;-)
- Henri Helvetica celebrates the 25th anniversary of the IMG tag with links to a collection of talks on modern Web image formats and tooling.
⚡️ Quick Releases
- webpack 5.8.0
- Iosevka 4.0 — Popular developer font itself defined in code.
- SystemJS 6.8.0 — Dynamic ES module loader.
- vue-loader 16.0.0 — Webpack loader for Vue.js components.
- underscore 1.12.0 — Hugely popular 'utility belt.'
- Size Limit 4.9 — Performance budget tool for JS.
- Node 15.3.0
📚 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
🛠 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
💻 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