#552 — August 20, 2021 |
JavaScript Weekly |
Ruby on Rails' Creator on Modern Web Apps without JS Bundling or Transpiling — David Heinemeier Hansson (the original creator of the popular Ruby on Rails framework) has explained where he sees the future of JavaScript in Rails-based apps and it involves using import maps and not needing bundlers like Webpacker – instead apps will just pull in the ES modules needed. He also shows off how it works in this 27-minute screencast. David Heinemeier Hansson (DHH) |
An Absurd Future for SQL on the Web? — absurd-sql is a project aiming to provide a persistent backend for SQLite on the web. It uses IndexedDB but with sql.js in front so you can use SQLite in a natural but persisted way from webapps. Some interesting thoughts here. James Long |
Learn the Fundamentals of TypeScript — Use TypeScript to add strong typing to large JavaScript apps helps reduce bugs and keeps code performant and maintainable. This course covers all you need to know including how to migrate your codebase to TypeScript and improve productivity while building large-scale apps with ease. Frontend Masters sponsor |
Announcing React Native 0.65 — The VM within React Native has had an upgrade and now has ES i18n API (Intl) suport, supports M1 Macs and Mac Catalyst, has a much faster garbage collector, and more, including accessibility improvements. Luna Wei and Facebook |
QUICK BITS:
|
RELEASES: Mocha 9.1.0 – Testing framework. |
|
📖 Articles, Opinions & Tutorials |
Creating an Interactive Gantt Chart Component with Vanilla JS — Coding a Gantt chart (commonly used as a way to visualize schedules) as a reusable Web component, covering the architecture of the component, rendering the calendar with CSS Grid, and managing the state of the draggable tasks with proxy objects. Anna Prenzel |
Loading Third-Party JavaScript — This isn’t new, but recently popped up on our radar again and remains a solid resource — learn how to optimize the loading of third-party scripts to reduce their impact on performance. Addy Osmani & Arthur Evans |
Build a React Chat Application — In a few simple steps we’ll show you how to launch a chat app using our React component library. Stream sponsor |
Guidelines (from the 1970s!) on How to Split Your React Components — Some interesting ideas extracted from a 1970s paper: “Designing Software for Ease of Extension and Contraction” by David Parnas. João Forja |
How to Write TypeScript Interfaces in JSDoc Comments — A way to avoid build steps but still enjoy TypeScript type checking on your Wes Goulet |
Dmitri Pavlutin |
'I Tried Angular as a React Developer. Here are Six Things I Like About It.' |
How to Build a Portfolio Site with Next.js and Tailwind CSS |
Truthy and Falsy: When All is Not Equal in JavaScript |
🛠 Code & Tools
wavesurfer.js: Navigable Waveforms via the Web Audio and Canvas APIs — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. katspaugh and contributors |
Marked 3.0: A Fast Markdown Parser and Compiler — Works in the browser or server-side. Demo here to see it in action. Christopher Jeffrey |
Go from Zero to Live Streaming, in a Couple of Minutes — Mux Video is an API-first platform that makes it easy to build beautiful live video that streams everywhere. Mux sponsor |
zx 3.0: A Tool for Writing Better Shell Scripts — Rather than using something like |
v-lazy-image: A Vue.js Component to Lazy Load Images — Uses Intersection Observer and then progressive rendering with CSS animations to keep things smooth. CodeSandbox demo. Alex Jover |
Pyodide: Python Compiled to WebAssembly for the Web — Python continues its ascent in the worlds of programming education and data science, so if you have a use case for interoperating with it in the browser from JavaScript, this is what you need. It is just one of numerous ways to use Python in the browser, though. Pyodide contributors and Mozilla |
Book a Demo. Ship Fast. Rest Easy. LaunchDarkly LaunchDarkly sponsor |
Notistack: A Library for Easy Snackbar/Toast Notifications — You can try out a whole slew of demos and an API reference on the docs site. Hossein Dehnokhalaji |
Serendipity: A Beautiful VS Code Theme with Dark and Light Modes — The color palette was selected specifically to be pleasing to the eyes on retina displays. michael andreuzza |
🕰 ICYMI (Some older stuff that may catch your eye...)
|
🐟 And one that didn't quite get away... |
Fishdraw: Procedurally Generated Fish Drawings — This Node-based project creates ‘all sorts of weird fishes’ and boasts being fully procedurally generated - the output looks pretty amazing. Lingdong Huang |