#568 — December 10, 2021 |
JavaScript Weekly |
📉 How We Cut 99% of Our JavaScript with Qwik and Partytown — It’s neat to see the original creator of Angular talking about cutting down on the amount of JavaScript! :-) The Qwik framework and Partytown were used here to both serve up less JS, and then kick most of the execution away from the main JS thread — a neat approach. Miško Hevery |
▶ A Coding Interview with Dan Abramov — Dan Abramov, best known for his fantastic Overreacted blog and co-creating Redux, bravely subjects himself to a ‘coding interview’ with Ben Awad. They cover a mixture of JavaScript and frontend topics, including.. centering a div! Ben Awad and Dan Abramov |
Put the “Flow” in Your Workflows with Shortcut — Imagine how much more you could get done if your project management tools didn't make you sigh. Shortcut is the ideal solution for task management, bug tracking, iteration planning, and reporting. Delight the scrum gods and give us a try for free. Shortcut (formerly Clubhouse.io) sponsor |
GitHub Rolling Out Enforced 2FA and More Security for npm Registry Logins — Many public code package registries have suffered issues with user security in recent years, including npm, so GitHub are moving forward with plans for ‘enhanced login verification’ including enforced 2FA for publishers of high impact packages in early 2022. Myles Borins |
IN BRIEF:
RELEASES: Mongoose 6.1 – MongoDB ODM for Node.js. |
|
📖 Tutorials, Opinions & Stories |
Cubic Bézier: From Math to Motion — Underpinning any sort of realistic animated motion is some tricky math, the cornerstone of which is the Bézier curve. This article makes the connection between the theory and what eventually ends up on the screen. Maxime Heckel |
Plugging Memory Leaks in Your App — “In any reasonably sized app, you can bet memory is leaking somewhere,” says Stoyan, so having a how to on mitigating such leaks is useful. React is used as the basis for the examples here but the basic concepts apply elsewhere too. Stoyan Stefanov |
💡 And as it happens, Microsoft Edge has added a new Detached Elements tool to help you investigate and resolve DOM-oriented memory leaks. |
Data Visualization Made Easy with ReactJS, Nivo and InfluxDB — Learn how to query from InfluxDB with the client libraries to visualize with Nivo. InfluxData sponsor |
▶ Build a Color Contrast Checker with Eleventy Serverless — A lightning talk about using Eleventy Serverless to build a zero client-side JavaScript app. Ben Myers |
▶ Why Ruby2JS is a Game Changer — Ruby2JS is a Ruby to JavaScript transpiler, and Jared argues its main value is in being able to write as if JavaScript had Ruby’s rich syntax and standard library. Jared White podcast |
Optimizing State Management in React Apps |
Reasons to Avoid JavaScript CDNs |
🛠 Code & Tools |
Tailwind CSS v3.0 Released — Tailwind CSS is an increasingly popular CSS framework, and while we’d usually just mention it in Frontend Focus, v3.0 has an interesting JavaScript related feature: Play CDN, which lets you use Tailwind CSS on any Web page using a single Adam Wathan (Tailwind) |
vue-agile 2.0: A Carousel Component for Vue — Responsive, touch-friendly, with Nuxt.js SSR support, and doesn’t include any predefined styles, so its look is fully customizable. Demos here. Łukasz Florczak |
Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code Retool sponsor |
graphql-request: A Minimal GraphQL Client for Node and Browsers — The target use here is small scripts and simple apps, not larger things where something like Apollo might provide the structure you need. Prisma Labs |
ts-belt: A Practical Utility Library for FP in TypeScript — The getting started docs tell the story best, but the author essentially loves ReScript, but acknowledges TypeScript’s popularity and aims to bring some of ReScript’s functional practices to TS via this library. GitHub repo. Marcin Dziewulski et al. |
COBE: A 5KB WebGL Globe Rendering Library — You can try out an impressive demo here and the API is simple and easy to use. Shu Ding |
Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API Stream sponsor |
OpenLayers 6.9: High Performance Frontend Mapping Library — A system for putting dynamic maps onto your pages that can render map tiles pulled from various sources, vector data layers, markers, etc. OpenLayers |
Interface Forge: Graceful Mock-Data and Fixture Generation with TypeScript |
Zod: TypeScript-First Schema Validation with Static Type Inference |