The Curious Engineer

All blogs / JavaScript / TypeScript

Matteo Mazzarolo's blog

mmazzarolo.com/blog

Matteo Mazzarolo's personal blog. JavaScript, productivity, nerdy stuff.

JavaScript / TypeScriptFrontend / CSS / browsersWeb developmentTesting / QA

’16’17’18’19’20’21’22’23’24’25’26
Posts
75 from 19 Sep 2016 to 5 Sep 2026
Posting
now and then (1 in the last year)
Kind
personal blog
Feed
https://mmazzarolo.com/blog/index.xml

2026 1

  1. AI made it worth building games for our game nights

2024 5

  1. Refactoring barrel files with codemods
  2. Handling CORS and opaque responses in Service Workers
  3. Optimizing SPA load times with async chunks preloading
  4. Conditional logging with query parameters
  5. Flexible network data preloading in large SPAs

2023 3

  1. Setting up my fish shell from scratch on macOS
  2. Use relative paths in markdown and MDX images with Next.js
  3. Automatic width and height of local MDX images with Next.js

2022 18

  1. Named element IDs can be referenced as JavaScript globals
  2. Automating visual UI tests with Playwright and GitHub ActionsHow to build and automate a visual regression testing setup with Playwright and GitHub Actions.
  3. Improving Prism diff syntax highlighting in GatsbyTweaking Prism and Gatsby to improve the syntax highlighting of diffs (works on Next.js and other framework too).
  4. Simple colored logging for your JavaScript CLI outputA 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.
  5. The opposite of the noscript elementUsing the noscript HTML element to display a website section only if JavaScript is enabled.
  6. Checking if a JavaScript native function is monkey patchedDelving deep into how to determine whether a JavaScript native function has been monkey patched, and why it's not possible to determine it reliably.
  7. Determining if an HTTP request was sent as beacon/keepaliveHow 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).
  8. Using JavaScript to fill localStorage to its maximum capacityHow to programmatically fill localStorage and sessionStorage to their maximum capacity using JavaScript (mainly for testing purposes).
  9. 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.
  10. Hide annoying results from Google searchTweaking 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.
  11. Random notes around service workers development and testingSharing a bunch of tips and tricks I learned through the years around service workers development and testing.
  12. Ouch, Safari on iOS can overlap multiple full-screen videosI 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.
  13. How I capture, encode, and embed screen recordings for the webHere'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.
  14. 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.
  15. Note e consigli su come lavorare da remoto, dall'Italia, per aziende tech estereUna 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.
  16. Track down the JavaScript code responsible for polluting the global scopeDebugging what JavaScript code is adding global variables to the window object.
  17. Find what JavaScript variables are leaking into the global scopeLet's build a utility to check what variables have been added or leaked to the global window object at runtime by JavaScript code.
  18. Creating and deploying a tiny proxy server on Vercel in 10 minutesHere's how you can create and deploy a tiny Node.js proxy server on Vercel in 10 minutes.

2021 24

  1. Lessons learned publishing a Content Security Policy (CSP)Lessons learned publishing a Content Security Policy (CSP) for our web apps at InVision.
  2. Speed up your TypeScript monorepo with esbuildUsing esbuild and turborepo to compile your monorepo's TypeScript codebase and massively improve your build and testing time.
  3. Chrome does some weird stuff if you toggle a stylesheet on and offDeep 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.
  4. React Native monorepo for every platform: Browser Extensions & ElectronRunning 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.
  5. React Native monorepo for every platform: The WebRunning a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Web app setup.
  6. React Native monorepo for every platform: Windows & macOSRunning a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: macOS setup.
  7. React Native monorepo for every platform: Android & iOSRunning a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Android & iOS setup.
  8. React Native monorepo for every platform: Yarn Workspaces monorepo setupRunning a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: The monorepo setup.
  9. React Native monorepo for every platformRunning a React Native app on Android, iOS, macOS, Windows, the web, a browser extension, and Electron, using a Yarn Workspaces monorepo: Series overview.
  10. Sigh, this is what browsing the web in the EU looks like nowadaysJust venting. Between GDPR dialogs, dark patterns, and invasive ads, browsing the web nowadays — especially from EU — is a miserable experience.
  11. Loading web workers using Webpack 5A few notes around the currently available options for loading web workers using webpack 5.
  12. Git alias to checkout & pull the default branch of GitHub reposA git alias to checkout the default branch and pull down the updates of GitHub repositories.
  13. Mistakes I made while maintaining an open-source React Native library for five yearsThe design decisions and mistakes I made while maintaining React Native Modal — an open-source modal component library for React Native.
  14. Building a desktop app with Electron and Create React AppA step-by-step tutorial explaining how to create a desktop application using Create React App (CRA) and Electron.
  15. React Native responsive scaling on the webHow to scale views responsively in your React Native for Web projects.
  16. Scrolling with a third-party mouse looks horrible on macOSHere's how you can make any third-party mouse scrolling suck a bit less on macOS.
  17. Moving the mouse cursor can cause CPU spikes on macOSToday I learned that, depending on the polling rate of the input device, just moving the cursor on macOS can cause CPU spikes.
  18. Yet another browser-specific CSP quirk: Safari and the base-uri directiveI 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.
  19. Creating a serverless function to scrape web pages metadataNowadays, websites provide metadata about their content directly in their markup: here's how you can scrape this metadata using a serverless function.
  20. Content Security Policy violation inconsistencies across browsersI recently learned that Content Security Policy (CSP) violations are reported differently depending on the browser being used.
  21. Open-sourcing Remotebear, a remote jobs aggregatorI'm open-sourcing Remotebear, a jobs aggregator that collects the latest remote opportunities from the best full-remote and remote-friendly tech companies.
  22. Generating a robots.txt in Next.jsA 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.
  23. Hiding Google's annoying "People also search for" suggestionsLet's see how to disable the annoying "People also search for" box in Google search results.
  24. Scroll restoration in Next.jsNext.js doesn't handle scroll restoration out-of-the-box. Here are a couple of options to support scroll restoration in Next.js projects.

2020 4

  1. Media queries of <source> elements can be used only within <picture> elementsToday I learned you can't switch a <video> source based on the preferred color scheme for dark/light mode support.
  2. Run your React Native app on the web with React Native for WebAdding React Native for Web to an existing React Native app.
  3. Using Alfred to open your GitHub repositories in the browserI created an Alfred workflow to quickly open my company's GitHub repos in the browser.
  4. Generating iOS App Previews for the App StoreCreating 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.

2019 13

  1. Browse and open VSCode projects using AlfredHere's an Alfred workflow that you can use to browse and open VSCode projects (or any other IDE projects).
  2. Apply a MacOS-like drop shadow to any imageThe 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.
  3. A simple React-Native Animated hookA basic "useAnimation" hook for React-Native animations
  4. React-Native cross-platform shadowsA set of cross-platform React-Native elevation definitions to make your component's shadow look the same on iOS and Android.
  5. Searching Jira tickets with AlfredI can't stand Jira slowness, so I created an Alfred workflow to search for Jira tickets.
  6. Developing a browser extension with Create React AppCreate 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.
  7. On eslint-plugin-react-appHere'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.
  8. Fast software, slow animations: Jira CloudThe new Jira Cloud app for macOS is now available. Does it feel faster than the Jira web interface?
  9. Charles Proxy automationAutomating Charles usage through the CLI.
  10. About shorter keyboard space barsWhy is your keyboard's space bar key so big?
  11. Activate your home row cursor keys using Right CommandUsing the right Command key to activate your home row cursor keys on macOS.
  12. Testing an Apollo Client mutation effect on the cacheHere are a few suggestions on how you can test your Apollo Client's mutation effects on the cache.
  13. TLDR: Semantic ReleaseSpeedrunning the setup of Semantic Release: a powerful set of tools for fully automating version management and package publishing.

2018 3

  1. Styling the React Native TextInput on AndroidThe painful experience of styling the React Native TextInput component on Android.
  2. The Starter AppAn in-depth tutorial about building mobile apps using React-Native.
  3. Trello authentication in React-NativeHere's how you can add an authentication and authorization layer to your React-Native app to interact with the Trello APIs.

2017 2

  1. Middlewares: The underrated Redux strengthRedux middlewares: a key feature of Redux that is not being praised enough.
  2. How I built a super-simple game using React-NativeToday I released Tap The Number: a tiny React-Native game I built to provide tips on how to handle such small projects.

2016 2

  1. My journey toward a maintainable project structure for React/ReduxRedux 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.
  2. Parse-Server hidden featuresUnlocking a few powerful features of Parse-Server to programmatically create administration roles, classes, and level permissions.