Some Web performance recipes for Puppeteer

No Comments

#​535 — April 23, 2021

Unsubscribe  |  Read on the Web

JavaScript Weekly

Starting a TypeScript Project in 2021 — A practical no-fluff guide to getting a TypeScript project started including (optionally) esbuild for bundling, linting, testing with Jest, publishing an npm package, and more.

Chris Hager

Node.js 16 Released — 16 immediately replaces 15.x as the ‘current’ release line with 16 due to become a LTS release in October 2021 (whereupon it will be codenamed ‘Gallium’.) v16 now includes V8 9.0, has fat binaries for Apple silicon users, npm 7.10.0, Atomics.waitAsync, and more.

Bethany Griggs

ButterCMS Melts into Your React App. #1 Rated Headless CMS — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

ButterCMS sponsor

Web Performance Recipes with Puppeteer — A highly useful, no-nonsense set of examples of using Puppeteer from Node to calculate and extract numerous forms of Web performance stats (e.g. first paint and first contentful paint), as well as emulate slow networks and CPUs.

Addy Osmani

Quick Bits

Firefox 88, released this week, adds support for JavaScript embedded in PDF forms. (I’m keen to see an article about this..)
There’s a new curated list of JavaScript tooling not written in JavaScript. Think esbuild and swc, etc.

Curious how many people copy and paste code from Stack Overflow answers? Now we know.

📖 The GraphQL Guide is a new book by John Resig (yes, he of jQuery fame) and Loren Sands-Ramshaw.

Releases

Grunt 1.4 — Task runner.
Strapi 3.6.0 — Headless Node.js CMS.
eslint-plugin-unicorn — Sindre Sorhus’s ‘awesome ESLint rules.’
Grid.js 4.0 — Agnostic table control.
Ember 3.26 — The battle-tested framework.

💻 Jobs

Frontend Engineer (All Genders) — Grow & work in our cross-functional squads in an amazing environment, providing a personal educational budget and 30d of vacation.

Homeday

Software Engineer, Full Stack (Ruby/Rails) — Doximity is looking for passionate software engineers to make high-quality contributions to modern, production web applications.

Doximity

Find Software Engineering Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.

Hired

📖 Articles, Opinions & Tutorials

How Josh Comeau Builds His Blog — He might not like this description but I think Josh has become a bit of a superstar in the frontend space recently with things like his guide to CSS transitions, styled-components best practices and JavaScript operator guide. Here he gives a fantastic look behind the scenes of how his blog works and all the technologies brought together.

Josh W Comeau

Solving a Mystery Behavior of parseInt() — parseInt(0.0000005) returns 5 because.. of course it does 😆 Dmitri digs into this quirk and poses a question of his own for you to think about.

Dmitri Pavlutin

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

How to Convert HTML to an Image with Puppeteer from Node — Could be useful for auto generating images for use on social media, say.

Ryan Glover

Debugging JavaScript Efficiently with Chrome DevTools — An introductory tutorial for anyone getting tired of all the console.logs.

Victoria Lo

Five Key Lessons React Tutorials Don’t Teach — The author enumerates and explains the important concepts which he feels receive short shrift from many React tutorials.

Reed Barger

Book a Demo. Ship Fast. Rest Easy. LaunchDarkly

LaunchDarkly sponsor

How to Streamline Angular Reactivity — How to observe RxJS streams and keep the reactivity intact in your components and directives with ng-observe.

Levent Arman Özak

A Complete Guide To Incremental Static Regeneration (ISR) with Next.js

Lee Robinson

Styled Components Best Practices for React Developers

Robin Wieruch

Voice-Enabling an Angular App with Wake Words — Using the Web Speech API..

David Bartle

🛠 Code & Tools

Sucrase: A Super-Fast Babel Alternative — It’s not exactly a Babel replacement as it covers a subset of what Babel does, but this is yet another ‘fast JS tool not written in JS’ that boasts being 20x faster than Babel at compiling Jest. We first mentioned it three years ago but it’s come a long way since then. GitHub repo.

Sucrase Contributors

Prisma ORM Toolkit Now ‘Ready For Production’ — Prisma is already a pretty popular ORM approach so this may be surprising news, but after two years of development they’re keen to show off everything Prisma can do and where the project is headed.

Nikolas Burk

Pulumi Infrastructure as Code: Any Cloud, Familiar Languages — Provision cloud infrastructure using JavaScript and use constructs you already know – code completion, for loops, and more.

Pulumi sponsor

WinBox: An HTML5 ‘Window Manager’ for the Web — Very thoroughly documented and works pretty well, but feels a bit like Web-based UI experiments of 10+ years ago..? Interesting though and some nice demos to play with here. GitHub repo.

WinBox

Volta 1.0.4: The JavaScript Tool Installer and Launcher — 1.0.4 will automatically fetch the native Apple silicon version of Node for versions where it is available (Node 16+).

Volta Contributors

Inkline: A Customizable Vue.js UI/UX Library — Includes 50+ components designed for mobile-first apps with out-of-the-box accessibility support via WAI-ARIA.

Alex Grozav

js-image-carver: Content-Aware Image Resizer and Object Remover — A fun demo on this one. GitHub repo.

Oleksii Trekhleb

Compodoc: The Missing Documentation Tool for Your Angular App

Vincent Ogloblinsky

    About us and this blog

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment