Industry News

#527 — February 26, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

JavaScript Performance Beyond Bundle Size — Nolan ponders why ‘bundle size’ is such a common thing to focus on when it comes to JavaScript performance and shares a collection of useful tools to study it further, if you wish, before moving on to more significant concerns ‘beyond the bundle.’ A really good read. Alex Russell reminds us to test on real mobile hardware too.

Nolan Lawson

The Definitive Guide to Streams — One of those posts that will bring you up to speed on a not often discussed area of JavaScript but which is really useful to understand! The Streams API allows you to programmatically read, write, and transform streams of data in a flexible way.

Thomas Steiner

A Friendly Introduction to Functional Programming with JavaScript by Anjana Vakil — Learn what Functional Programming (FP) is and how it differs from other programming styles (such as OO and imperative), and use key concepts of functional to improve your everyday coding.

Frontend Masters sponsor

TypeScript 4.2 Released — The extension (a superset, if you will) of JavaScript that adds static types and type-checking takes another step forward. 4.2 improves how type aliases are handled, adds leading/middle rest elements to tuple types, and more. The release notes are super thorough, as always.

Daniel Rosenwasser (Microsoft)

10 Years of Open-Source Visualization with D3.js — The creator of D3.js (the popular data visualization library) reflects on ten years since D3 1.0 was released with what he’s learnt from both developing D3 and leading a prominent project for so long. Congratulations, Mike!

Mike Bostock

Quick Bits

• There are releases of all supported Node.js branches to fix a critical security issue (an HTTP2 resource exhaustion DoS vulnerability).



• 
  free-for.dev is a curated list of 'free tiers' and services available to developers.



• A quick look at Ember's forthcoming template imports support. Looks nice.


• Storybook now has official Vue.js 3 support.
  

💻 Jobs

Hiring Remote Mid-Level / Senior Full Stack Engineer in North America — Must have heavy JS/React experience at a senior/expert level. Need to be able to work on web apps and JS client libraries.

Ardan Labs

JavaScript Engineer — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers.

Sticker Mule

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

📖 Articles, Opinion & Tutorials

Recreating Real-World Terrain with React, Three.js and WebGL Shaders — A fun Flight Simulator-inspired write-up of creating your own real-world textured 3D rendering for the Web.

Rishabh Karnad

Looks Good To Me: Making Code Reviews Better for Remote-First Teams — A developer from the BBC News team shares some of what they’ve learnt about code review that has improved their internal engineering culture.

James Donohue (BBC)

Best Practices for Building Better Angular Forms — Learn best practices for creating high-quality, accessible, and SEO-friendly Angular Forms. Read the guide on our blog.

Progress Kendo UI sponsor

Building a Serverless Multi-Player Game That Scales — A look at Simple Trivia Service, a game built to show off how to create a multiplayer game using AWS's various serverless services. There's also code available and it uses Vue.js for the front end with Node in the back.

Tim Bruce (AWS)

How to Create React Components with TypeScript — Aimed at developers with mild fears about the process.

Felix Gerschau

Building a Real-Time Webapp with Node and Socket.io — Want to create an app that does real-time data synchronization across multiple machines without introducing a third-party service like Pusher or Firebase? This is the first in a three part series but cuts to the heart of the matter.

Norbert Kovacs and Ferenc Hámori

The Definitive Guide to Feature Management

LaunchDarkly sponsor

Why JavaScript Developers Should Prefer Axios over Fetch — An interesting and perhaps initially counterintuitive thought.

Sabesan Sathananthan

How to Use Vue.js Environment Modes with a Node.js Mock Data Layer

Dave Berning

Building a Roadmap Voting App with Serverless Redis and Next.js

Noah Fischer

Thoughts on Porting Koan’s 150,000-line JavaScript Codebase to TypeScript

RJ Zaworski

Simple-Keyboard: A Virtual Keyboard for JavaScript Projects — Customizable, responsive and lightweight. Compatible with vanilla JS, React, Angular, Vue and more. Love the homepage on this one.

Francisco Hodge

Serverless UI: A Command-Line Tool for Deploying Serverless Functions to AWS — If you’d like to deploy functions in a simple, Netlify-style fashion with the Lambda and API Gateway setup handled for you, check this out. It uses AWS CDK under the hood and is a bit more ‘zero-config’ than something like Serverless Framework, say.

Jake Partusch

Tagger: A Zero Dependency, Vanilla JavaScript Tagging Library — Try a demo here.

Jakub T. Jankiewicz

Kotlin-First Android Chat SDK with New UI Components — Stream’s open-source SDK can cover all your messaging needs (including channels, threads, reactions, and more). Try our Android tutorial to see why we power feeds and chat for over a billion users.

Stream sponsor

React Drawer: A Sliding Drawer Component — Documentation is quite sparse, but there’s a handy Storybook collection of examples and with over 500k downloads a week it clearly has some draw… 😆

Alipay

Vue3 Icon Picker: An Beautiful Icon Picker Component for Vue — Try a demo here. The example is using Font Awesome and this is ported from a Vanilla JS version.

Hasin Hayder

Tippy.js 6.3: Highly Customizable Tooltip and Popover Library — Accessible, easy to theme, fast on low-end devices, and TypeScript ready. Also a great example of a good project site/homepage. GitHub repo.

atomiks

element-resize-detector: Optimized Cross-Browser Resize Listener for Elements

Lucas Wiener

#526 — February 19, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Announcing Vite 2.0 — Vite is a build tool aimed at giving you a faster development experience by providing a dev server with hot module replacement support, and Rollup- and esbuild-powered bundling and building.

Evan You

V8's Super Fast super Property Access — The first of two articles this week about how the V8 team are somehow making the already fast V8 JavaScript engine even faster for us. Using super, till now, was an unoptimized and slightly costly operation but now it’s almost on par with accessing normal properties.

Marja Hölttä (V8)

Frontity: Bringing React to WordPress — Frontity Framework connects with WordPress seamlessly so you can focus on building your React front-end, without worrying about tooling and configuration. Its ease of use and extensibility make it a favorite when working with headless WordPress.

Frontity sponsor

An Interview with Ryan Dahl, the Creator of Node.js and Deno — Ryan created Node.js 11 years ago and in recent years has moved on to Deno where he’s attempting a new take at the same idea. This interview touches on Deno’s challenges and Ryan’s love of Rust and Vim.

Evrone

V8's Route to Faster JavaScript Method Calls — This gets very technical and fast, but it’s yet more of a look behind what the V8 team is up to. This work improves the performance of your Node and browser-facing code alike.

Victor Gomes

Opal 1.1: A Ruby to JavaScript Compiler — An interesting way to take Ruby code to the frontend by simply translating it into JavaScript. It’s been around for years but 1.1.0 is the first significant release in some time.

Adam Beynon and Contributors

Quick Bits

• 
  NASA used Three.js to render a real-time simulation of this week's NASA rover landing on Mars 🚀



• The date-fns documentation site lets you play with the library in the browser console in a cute way and here's the code that makes it work.



• One of the Angular core team has written about how Angular strongly encourages best practices and the next natural step is for Angular 12 to enable 'strict mode' by default.



• Node.js has some security releases coming out next week – one of the security issues involved is of 'critical' severity. We will share these in next week's issue of Node Weekly.



• 
  esbuild now supports Apple's M1 chip natively and is even faster.


• The Colyseus open source Node-powered multiplayer game engine has been 'acquired' by Lucid Sight, a developer of popular licensed mobile games.

💻 Jobs

Senior/Lead React Developer (Remote) — Join our talented team - thinking big, building world-class restaurant and guest experience management products.

Eat App

Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

Komoot

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

📖 Articles, Opinion & Tutorials

How to 'Listify' a JavaScript Array — There’s a little more to making a human readable list from an array in JavaScript than you might think. There’s a bonus TypeScript version too.

Kent C Dodds

Avoiding npm Substitution Attacks — Recently there have been some high profile examples of supply chain attacks, such as where fake or eponymous packages are published, but you can reduce your attack surface by taking precautions and managing dependencies.

Isaac Z. Schlueter

Introducing SPOTcon 2021! Get Your Free Early Bird Ticket Today — Scout APM's digital event on performance and observability. Register before 2/28 and we'll donate $5 to OSS when you attend.

Scout APM sponsor

Learn Snowpack: A High-Performance Frontend Build Tool — We’ve mentioned Snowpack a lot in the past year but it’s nice to see a third party introduction and tutorial.

Jack Franklin

How to Publish an Angular, React, Svelte, or Vue App with Azure Static Web Apps — A multi-step tutorial on deploying a modern JavaScript app to Azure Static Web Apps, Azure’s platform for building and deploying static apps from a GitHub repository.

John Papa (Microsoft)

Serverless TypeScript: A Complete Setup for AWS SAM Lambdas — A workflow for creating TypeScript-based AWS Lambda functions with AWS SAM that support testing, debugging, etc. and using shared layers to package dependencies.

Andrey Novikov and Sergey Alexandrovich

The Ultimate Guide to Cardinality for Observability

Lightstep sponsor

How to Use WebSockets With Your Vue.js Projects — Not a tutorial but two blobs of code to show you how a basic Vue.js frontend and a Node backend can communicate with WebSockets.

Mastering JS

Web Frameworks: Why You Don't Always Need Them

Richard MacManus

How to Create a Shrinking Header on Scroll without JavaScript

Håvard Brynjulfsen

a11y-dialog: Accessible, Lightweight Dialog Windows — It can lean on the native dialog element, if you like, has WAI-ARIA support, and there’s a demo here. I like it.

Hugo “Kitty” Giraudel

Metascraper: A Library to Scrape Metadata from Web Content — It uses things like Open Graph annotations, JSON+LD, and HTML metadata to get you things like author, title, description, and even an image related to the URLs of your choice.

Microlink

fullPage.js: Create Fullscreen Scrolling Sites — Available in Vue, React, and Angular flavors too. (GPL 3.0 licensed.) GitHub repo.

Álvaro Trigo

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

Neutralino 1.8: Portable, Lightweight Desktop App Framework — Think something like Electron but rather than including a Chromium distribution with every app, it uses the platform’s built-in Web view component. Due to this, Neutralino boasts low memory use and small distribution size for apps. GitHub repo.

Codezri

ExcellentExport.js: Export Table Data to Excel or CSV — If your app/page has some data in HTML tables and you’d like to export it to CSV or XLSX without any server involvement, this could help.

Jordi Burgos

OrgChart: A jQuery Plugin for Rendering Org Charts — It’s not often we get to link to jQuery plugins anymore(!) but this is one that’s kept up to date. There are Vue, Angular, and React versions too but less frequently updated. Examples of output.

Xuebin Dong

fast-check: Property Based Testing for JavaScript and TypeScript

Nicolas Dubien

disableautofill.js: Disable Form Auto-Fill and Auto-Complete Functions — You need to be very careful about where you use things like this due to effect on assistive tools.

Terry Lin

SVGJAR: An Easy Way to Add SVG Images to Ember Apps

Ivan Votti

#525 — February 12, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

▶  JavaScript's Creator Brendan Eich Shares The Full Story of JavaScript — Lex Fridman is an AI researcher who’s becoming well known for high quality interviews with some of the greatest minds of our time and here he talks with Brendan Eich about his coding history, JavaScript’s full origin story, the browser wars, and Brave.

Lex Fridman

Marko 5: eBay's UI Library Grows Up — If you’ve used eBay, you’ve used Marko. It’s eBay’s open-source JavaScript UI framework and is celebrating its ninth birthday with a new major version. There’s a lot to like, but it’s obviously not React or Angular. Project homepage.

Ryan Carniato

Locate Front-End Issues Like JavaScript or Network Errors Instantly — Get proactively alerted 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

Remotion: Create Videos and Motion Graphics with React — I'm no fan of video editing, but what if rather than creating videos in apps like Final Cut or AfterEffects we could just program them.. Here's a fantastic 90-second trailer showing off the idea, but Alex Anderson has also put together an 18-minute screencast showing off exactly how to make a video production of your own. v1.1 just dropped. GitHub repo.

Jonny Burger

Mass Function Overloading: Why and How? — Lea is rewriting Bliss to use ES modules and is pondering the implications for her API’s design.

Lea Verou

Quick Bits

• The first release candidate of TypeScript 4.2 is out.


• React has now passed the 10 million downloads per day mark.



• 
  Ajv is a JSON schema validator and an OpenJS Foundation project. Here's a huge update on what's going on with it.

💻 Jobs

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 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

📖 Articles, Opinion & Tutorials

Sharing Data Between CSS and JavaScript with Custom Properties — How to use JavaScript to give CSS things it can’t access. For example, CSS can’t read pointer coordinates, but JavaScript can.

Christian Heilmann

Generators in JavaScript and How to Use Them — Not played around with generators (as introduced in ES6) yet? This is a pretty good walkthrough.

Karim Elghamry

Faster CI/CD for All Your Software Projects Using Buildkite — See how Shopify kept build times under 5 minutes while they scaled from 300 to 1800 engineers.

Buildkite sponsor

How to Generate a Presigned URL in Modular AWS SDK for JavaScript — A very common use case for S3 is to have client side apps directly download or upload assets to/from it (e.g. photos, videos, large uploads). The way to give users privileged access to S3 objects or buckets without giving them full-on AWS credentials is to use signed URLs, as demonstrated here.

Allan Zheng

Seven Interview Questions on JavaScript Closures — You might want to revise A Simple Explanation of JavaScript Closures before you take these on ;-)

Dmitri Pavlutin

Accessing Hardware Devices on the Web: A Roundup of APIs — Chrome tends to have more unique APIs for hardware access so take care if cross browser compatibility is necessary, but there are a lot of options nonetheless from the Gamepad API or getUserMedia to the Generic Sensor API or Web NFC.

François Beaufort

How Ruby on Rails' Creator is Taking on JavaScript Frameworks with Hotwire — David Heinemeier Hansson holds strong views about Web development and JavaScript-heavy front-end frameworks isn't a part of his approach.

Richard MacManus

Build Interactive Messaging with Stream, MML, Node, & React

Stream sponsor

▶  Syntax.fm Covers Deno — The popular Syntax.fm Web development podcast turns its attention to Deno (the TypeScript-oriented, safety first, server side JavaScript runtime) with a thorough tour of its capabilities and potential.

Syntax Podcast podcast

Clean Code Through Reactive Programming in Angular with RxJS

Paul Clavier

Getting Started with Apache Kafka in Node.js

Valeri Karpov

WebdriverIO v7 Released — WebdriverIO is a popular browser and mobile automation testing framework for Node. v7 brings it over to TypeScript, improves its Google Lighthouse integration, and improves compiler tool integration. There’s even a brief video about the release.

Christian Bromann

GoldenLayout: A Multi-Window Layout Manager for Webapps — This project went open source five years ago (we covered it in issue 279!) but with this week’s 2.0 release has been rewritten in TypeScript, reworked (bye jQuery!), and now only supports modern browsers. Want some demos?

Wolfram Hempel

Ember Table 3.0: Powerful Table Control for Ember Apps — Another older library that’s been brought up to modern standards (though it has dropped Ember versions under 2.8). Always great to see this happening. GitHub repo.

Addepar

Managing Your Tasks Shouldn't Be a Task — "Clubhouse is like a fast and delightful version of Jira, a more purposeful version of Trello." - Current User.

Clubhouse.io sponsor

Mineflayer 3.0: Let's Build Minecraft Bots in JavaScript — Want to have some gaming fun but not ready to put down the code? There’s even a tutorial aimed at non-coders if you want to let the kids have a go. GitHub repo.

Andrew Kelley

run-parallel 1.2: Run an Array of Functions in Parallel — Run an array of functions in parallel.

Feross Aboukhadijeh

#524 — February 5, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Making GitHub’s New Homepage Fast and Performant — If you’re not logged in, GitHub’s new homepage is essentially a laundry list of GitHub’s features (with screenshots, videos, etc.) coupled with a live updating 3D globe of GitHub activity. This is a lot for a browser to handle at once, so they’ve had to do a lot of work to keep it fast.

Tobias Ahlin (GitHub)

Don't Use Functions As Callbacks Unless They're Designed for It — A clever and nuanced point here. Callbacks can introduce added hidden complexity that can cause seemingly innocent code to break so it pays to be careful.

Jake Archibald

Fast, Reliable Feature Management for the Modern Enterprise — LaunchDarkly is a feature management platform that empowers teams to safely deliver & control software through feature flags. By separating code deployments from feature releases, we enable you to deploy faster, reduce risk, and iterate continuously.

LaunchDarkly sponsor

npm 7 Now Generally Available — It’s been in beta for some time but npm 7 is now ready for the big time. The new features and changes (which are mostly minor) were covered in last year’s presenting npm 7.0.0 post but include workspaces, automatically installing peer dependencies and an improved package lock file format.

Brian Douglas

The V8 v8.9 Branch — The latest branch of the V8 JavaScript engine has been created and will be in beta until Chrome 89’s eventual release. It’s a relatively small update, but top-level await comes to browser use cases and function calls with mismatched argument sizes will get a lot faster.

Ingvar Stepanyan

Quick Bits

• 
  Homebrew 3.0 is out with Apple Silicon support.



• There's a new VS Code release which lets you debug Node.js worker threads and also adds conditional exception breakpoints to the JS debugger.



• AWS Amplify has added support for Vue 3.
  



• If you happen to have the 'Clubhouse' social audio app and you're quick enough, several well known JavaScript developers are getting together for a 'JavaScript Friday' chat at 10am PT (6pm GMT) today. More info here.
  

💻 Jobs

Full-Stack Web Engineer — As part of adidas, we engage millions of users each day - through our apps and on the web. Join our Web Team and support the maintenance of our website and tools to provide the best user experience.

Runtastic

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 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

📖 Articles, Opinion & Tutorials

▶  Using Vue 3 with Electron to Build a Desktop App — A tightly edited 10-minute screencast that shows off the key parts in making a local file explorer with Vue and Electron without plodding through every single line of code.

Coding with Justin

How JavaScript Can Now Be Executed in Oracle Database — As of version 21c, released last month, Oracle Database can now execute JavaScript, powered by GraalVM. This post digs into the technicalities of how it works.

Alina Yurenko (Oracle)

Access your Database from React Server Components with Ease — Query data from MySQL, PostgreSQL DBs in React Server Components with Prisma, a better ORM for JavaScript & TypeScript.

Prisma sponsor

Dynamic Static Typing in TypeScript — A look at some of TypeScript’s more advanced features including union types, conditional types, template literal types, and generics.

Stefan Baumgartner

▶  Discussing Next Gen Bundlers with Jason Miller and Fred Schott — A podcast chat with the maintainers of Snowpack and WMR about bundling and how ES Modules change the game for modern JavaScript development. Educational!

The ShopTalk Show podcast

▶  What Is Gatsby.js, and Why Is It a Big Deal? — If you’re interested in Gatsby, this is a good interview with Gatsby engineer Max Stoiber.

Prismic

Buildkite Helps You Deliver Software Quickly and Securely at Any Scale

Buildkite sponsor

Using the Web Serial API with RxJS for Two-Way Reactive Communication with Serial Hardware

Tane Piper

Lazy Loading Routes in Vue with webpack Dynamic Comments

Jorge Baumann

HTML Form Validation in Cypress

Gleb Bahmutov

Building Server-Side Rendering for React Apps on AWS Lambda

Roman Boiko

Vuex 4.0 Released: State Management Mechanism for Vue 3 Apps — Vuex now supports Vue 3 in its new 4.0 incarnation. Here’s the full 4.0 release notes.

Vuex Community

autoComplete.js 8.3: A Simple Pure Vanilla Auto Completion Library — Vanilla JavaScript, no dependencies, and there’s a live demo here.

Tarek Raafat

eslint-config-auto: Automatically Configure ESLint Based on Project Dependencies — “Having got fed up of maintaining eslint configs on a range of projects, I’ve put together a meta config that inspects the dependencies listed package.json and then automatically configures itself with the most appropriate plugins..”

David J. Bradshaw

Wallaby’s Test Profiler Helped Us Make Jest Tests Run 5x Faster — Wallaby’s Test Profiler allows you to quickly record a test’s CPU usage profile to analyze its runtime performance.

Wallaby.js sponsor

redaxios: The Axios API, as an 800 Byte Fetch Wrapper — If you love the Axios API but want it using the Fetch API behind the scenes..

Jason Miller

v8go: Execute JavaScript from Go(lang) — Lets you create V8 contexts and run code eval-style. If you happen to be a Go developer, check out our Go newsletter too :-)

Roger Chapman

Five React Native Libraries You Might Have Missed — Some useful React Native libraries to be sure to check out for your next mobile app project.

Fabian Lee

react-ultimate-resume: Your 21st Century Resume — This is novel: a library which enables you to create an online resume to help you stand out from the crowd. Built by developers for developers with an eye on what tech recruiters allegedly want.

WeLoveDevs