Mazzarolo MatteoMazzarolo Matteo

Blog

Refactoring barrel files with codemods

Barrel files can be a pain to deal with. Here's a jscodeshift codemod to refactor your codebase to stop referencing barrel file imports.

Handling CORS and opaque responses in Service Workers

Notes and gotchas on how to deal with CORS, opaque responses, and Cache Storage API in Service Workers

Optimizing SPA load times with async chunks preloading

Improve the performance of client-side rendered SPAs by avoiding the waterfall effect caused by route-based lazy-loading.

Conditional logging with query parameters

A simple pattern for enabling conditional logging using query parameters in your web applications.

Flexible network data preloading in large SPAs

Sharing my experience with a pattern I’ve used multiple times to implement flexible network data preloading in large client-side-rendered SPAs.

Setting up my fish shell from scratch on macOS

Sharing my notes on setting up the fish shell on macOS, including customizations like plugins, themes, and abbreviations.

Use relative paths in markdown and MDX images with Next.js

Next.js markdown/MDX blogs do not support loading images and other static assets using relative path by default. Here's how you can enable it.

Automatic width and height of local MDX images with Next.js

Preventing Cumulative Layout Shift in a Next.js blog: how to automatically set the width and height attributes on local images referenced in MDX & markdown files.

Named element IDs can be referenced as JavaScript globals

Did you know that DOM elements with IDs are accessible in JavaScript as global variables?

Automating visual UI tests with Playwright and GitHub Actions

How to build and automate a visual regression testing setup with Playwright and GitHub Actions.

Improving Prism diff syntax highlighting in Gatsby

Tweaking Prism and Gatsby to improve the syntax highlighting of diffs (works on Next.js and other framework too).

Simple colored logging for your JavaScript CLI output

A tiny copy-pasteable way to color the output of success and failure messages of your JavaScript CLI output (node.js, deno, etc.). No external libraries required.

The opposite of the noscript element

Using the noscript HTML element to display a website section only if JavaScript is enabled.

Checking if a JavaScript native function is monkey patched

Delving deep into how to determine whether a JavaScript native function has been monkey patched, and why it's not possible to determine it reliably.

Determining if an HTTP request was sent as beacon/keepalive

How to determine whether an HTTP request was sent after the user left the page (such as requests sent using the Beacon API or the Fetch API's keepalive option).

Using JavaScript to fill localStorage to its maximum capacity

How to programmatically fill localStorage and sessionStorage to their maximum capacity using JavaScript (mainly for testing purposes).

Handling localStorage errors (such as quota exceeded errors)

Using JavaScript to determine whether the browser supports localStorage and sessionStorage, and if they have free space available.

Hide annoying results from Google search

Tweaking Google's search results page to remove unnecessary noise (like "People also search for" and "People also ask" boxes) and results you don't care about.

Random notes around service workers development and testing

Sharing a bunch of tips and tricks I learned through the years around service workers development and testing.

Ouch, Safari on iOS can overlap multiple full-screen videos

I just discovered an annoying behavior of Safari on iOS: full-screen videos can overlap each other and make it hard to close them without force closing Safari.

How I capture, encode, and embed screen recordings for the web

Here's how I capture, encode, and embed screen recordings on my blog, using FFmpeg and a minimal HTML5 structure to create great videos for the web.

Moving a macOS window by clicking anywhere on it (like on Linux)

Today I learned that, since macOS High Sierra onwards, you can move a window by starting to drag anywhere on it.

Note e consigli su come lavorare da remoto, dall'Italia, per aziende tech estere

Una raccolta di note e consigli per programmatori su come lavorare da remoto, dall’Italia, per aziende tech estere: pro e contro, tipi di contratto, Partita IVA, salario, interview process, e molto altro.

Track down the JavaScript code responsible for polluting the global scope

Debugging what JavaScript code is adding global variables to the window object.

Find what JavaScript variables are leaking into the global scope

Let's build a utility to check what variables have been added or leaked to the global window object at runtime by JavaScript code.

Creating and deploying a tiny proxy server on Vercel in 10 minutes

Here's how you can create and deploy a tiny Node.js proxy server on Vercel in 10 minutes.

Lessons learned publishing a Content Security Policy (CSP)

Lessons learned publishing a Content Security Policy (CSP) for our web apps at InVision.

Speed up your TypeScript monorepo with esbuild

Using esbuild and turborepo to compile your monorepo's TypeScript codebase and massively improve your build and testing time.

Chrome does some weird stuff if you toggle a stylesheet on and off

Deep dive into a weird Chrome behaviour: if you re-enable a stylesheet, Chrome may mistakenly try to fetch it again, causing a flash of unstyled content.

React Native monorepo for every platform: Browser Extensions & Electron

Running a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Browser extension & Electron setup.

React Native monorepo for every platform: The Web

Running a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Web app setup.

React Native monorepo for every platform: Windows & macOS

Running a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: macOS setup.

React Native monorepo for every platform: Android & iOS

Running a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Android & iOS setup.

React Native monorepo for every platform: Yarn Workspaces monorepo setup

Running a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: The monorepo setup.

React Native monorepo for every platform

Running a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Series overview.

Sigh, this is what browsing the web in the EU looks like nowadays

Just venting. Between GDPR dialogs, dark patterns, and invasive ads, browsing the web nowadays — especially from EU — is a miserable experience.

Loading web workers using Webpack 5

A few notes around the currently available options for loading web workers using webpack 5.

Git alias to checkout & pull the default branch of GitHub repos

A git alias to checkout the default branch and pull down the updates of GitHub repositories.

Mistakes I made while maintaining an open-source React Native library for five years

The design decisions and mistakes I made while maintaining React Native Modal — an open-source modal component library for React Native.

Building a desktop app with Electron and Create React App

A step-by-step tutorial explaining how to create a desktop application using Create React App (CRA) and Electron.

React Native responsive scaling on the web

How to scale views responsively in your React Native for Web projects.

Scrolling with a third-party mouse looks horrible on macOS

Here's how you can make any third-party mouse scrolling suck a bit less on macOS.

Moving the mouse cursor can cause CPU spikes on macOS

Today I learned that, depending on the polling rate of the input device, just moving the cursor on macOS can cause CPU spikes.

Yet another browser-specific CSP quirk: Safari and the base-uri directive

I just discovered yet another browser-specific Content Security Policy quirk: Safari reports a violation if a <base> element is removed when a CSP base-uri directive is set on the page.

Creating a serverless function to scrape web pages metadata

Nowadays, websites provide metadata about their content directly in their markup: here's how you can scrape this metadata using a serverless function.

Content Security Policy violation inconsistencies across browsers

I recently learned that Content Security Policy (CSP) violations are reported differently depending on the browser being used.

Open-sourcing Remotebear, a remote jobs aggregator

I'm open-sourcing Remotebear, a jobs aggregator that collects the latest remote opportunities from the best full-remote and remote-friendly tech companies.

Generating a robots.txt in Next.js

A robots.txt file tells search engine crawlers which pages or files the crawler can or can't request from your site. Next.js does not generate a robots.txt out-of-the-box, so here are a couple of options on how to create it.

Hiding Google's annoying "People also search for" suggestions

Let's see how to disable the annoying "People also search for" box in Google search results.

Scroll restoration in Next.js

Next.js doesn't handle scroll restoration out-of-the-box. Here are a couple of options to support scroll restoration in Next.js projects.

Media queries of <source> elements can be used only within <picture> elements

Today I learned you can't switch a <video> source based on the preferred color scheme for dark/light mode support.

Run your React Native app on the web with React Native for Web

Adding React Native for Web to an existing React Native app.

Using Alfred to open your GitHub repositories in the browser

I created an Alfred workflow to quickly open my company's GitHub repos in the browser.

Generating iOS App Previews for the App Store

Creating iOS App Previews can be a slow and error-prone process. Here are a few tips on how to capture and generate them by recording the simulator.

Browse and open VSCode projects using Alfred

Here's an Alfred workflow that you can use to browse and open VSCode projects (or any other IDE projects).

Apply a MacOS-like drop shadow to any image

The MacOS screenshot utility adds a nice drop shadow to your screenshots. Here's how you can apply a similar drop shadow to any image using ImageMagick.

A simple React-Native Animated hook

A basic "useAnimation" hook for React-Native animations

React-Native cross-platform shadows

A set of cross-platform React-Native elevation definitions to make your component's shadow look the same on iOS and Android.

Searching Jira tickets with Alfred

I can't stand Jira slowness, so I created an Alfred workflow to search for Jira tickets.

Developing a browser extension with Create React App

Create React App is a great tool for developing React applications for the web. With a couple of tweaks it can also become one of the best ways to create browser extensions.

On eslint-plugin-react-app

Here's a minimal set of easy-to-install ESLint rules for your project. Just install a single NPM package, add it to your .eslintrc, and you'll be all set.

Fast software, slow animations: Jira Cloud

The new Jira Cloud app for macOS is now available. Does it feel faster than the Jira web interface?

Charles Proxy automation

Automating Charles usage through the CLI.

About shorter keyboard space bars

Why is your keyboard's space bar key so big?

Activate your home row cursor keys using Right Command

Using the right Command key to activate your home row cursor keys on macOS.

Testing an Apollo Client mutation effect on the cache

Here are a few suggestions on how you can test your Apollo Client's mutation effects on the cache.

TLDR: Semantic Release

Speedrunning the setup of Semantic Release: a powerful set of tools for fully automating version management and package publishing.

Styling the React Native TextInput on Android

The painful experience of styling the React Native TextInput component on Android.

The Starter App

An in-depth tutorial about building mobile apps using React-Native.

Trello authentication in React-Native

Here's how you can add an authentication and authorization layer to your React-Native app to interact with the Trello APIs.

Middlewares: The underrated Redux strength

Redux middlewares: a key feature of Redux that is not being praised enough.

How I built a super-simple game using React-Native

Today I released Tap The Number: a tiny React-Native game I built to provide tips on how to handle such small projects.

My journey toward a maintainable project structure for React/Redux

Redux is not very opinionated about the way of structuring a project around it: here's what I learned while trying to create my own developer-friendly project structure.

Parse-Server hidden features

Unlocking a few powerful features of Parse-Server to programmatically create administration roles, classes, and level permissions.