Automate your release process with 🛳 Ship.js

Interesting work by Algolia, to more easily release new versions of your packages: When releasing, you go through something like the following: Update the version in package.json Update the changelog Actually release it (e.g. yarn build && yarn publish) Create a git tag As such as manual process is prone to errors, they’ve developed 🛳 …

ESNext: Immutable Datastructures in JavaScript with Records & Tuples

A new ECMAScript Proposal that I’m looking forward to is this one which introduces the Record and Tuple value types. In short: Records are immutable Objects that are compared by value. Tuples are immutable Arrays that are compared by value. The proposal is currently Stage-1. Update 2020.07.22: the proposal has now advanced to Stage-2! As …

How to start using your browser’s debugger

Solid introduction – with a real use case – on how to use the browsers’s built-in debugger: In this post, I will cover using breakpoints, stepping through your code, setting watch expressions, and applying your fixes in Chrome Developer Tools. How to stop using console.log() and start using your browser’s debugger → ☝️ Do not …

An HTML attribute potentially worth $4.4M to Chipotle

Jason Grigsby: I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually. The form didn’t play nice with autocomplete and therefore would not get sent … The culprit? A JS library …

An Introduction to Svelte

Developer Dave Ceddia, who had mainly been writing React before: A few months ago, Svelte 3 was released. I tried it out, ran through their tutorial, and built a few small things. And I can honestly say that I think writing Svelte feels even faster and easier than React. Svelte gave me the same spark, …

Find the cost of adding a npm package to your bundle with BundlePhobia

Ever wondered what the (size) impact of adding an NPM package to your project is? BundlePhobia is a tool that does not only that, it also recommends you other similar packages that have a lesser load. This thing lets you understand the performance cost of npm install‘ing a new npm package before actually adding it …

How to use React Dev Tools, an introduction

Dev Tools can do a lot of things. We’re are not going to dive into the nitty gritty details of each and every feature. Instead we’ll take a look at the top 10 helpful features that help us save time and write better React code. Good intro (*) on how to find your way around …

Run prettier or php-cs-fixer with GitHub Actions

Stefan Zweifel shares his GitHub Actions Workflows to run prettier and php-cs-fixer on his repos: Over the past few weeks I’ve added a handful of workflows to my projects. One workflow is really like, is to run prettier and php-cs-fixer to automatically format my code and commit the fixed files back to the repository. Here’s …

The Native File System API: Reading and Writing local files through JavaScript

The new Native File System API enables developers to build powerful web apps that interact with files on the user’s local device, like IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows web apps to read or save changes directly to files and folders …

How Facebook 3D Photos work, and how to create one yourself

💡 Sparked by the 3D Ken Burns Effect from a Single Image post, I was reminded of a few other 3D photo things … About a year ago, Facebook announced a feature named “3D Photos”, a way to show photos taken with Apple’s “Portrait Mode” (or any other device that does the same) interactively: Whether …