Got a lot of old git branches hanging around? Here’s a little script that will delete the branches that have been marged. It’ll print out the branches to be deleted, and then prompt for whether you want to delete them. If your top-level branch isn’t called “main”, customize the MAIN variable to match. Script: Delete old git branches #!/bin/bash # Change this to match the name of your top level…
I tried to run the old standalone version of SketchUp Make 2017 on my modern M1 Mac running macOS Monterey 12.4 recently. At first it went pretty badly, crashing on startup with the error “SketchUp quit unexpectedly.” But I got it working! Here’s how to get it running by removing the code signature. The main clue came when I tried running it from the Terminal, to see if it would show a more useful…
So, you bought a code signing certificate for your Electron app. One step closer to being able to release your app on Windows. Congrats! Finally, 3 weeks later, after a few phone calls, Sectigo issued the certificate. Woohoo! The email went to spam and you didn’t see it for 3 days, but hey, we’re making progress. In their email, they say in big red letters that you must use Internet Explorer to…
We’re going to build a Svelte store, written in Rust, and run it in an Electron app. This spun out of a video editor which I originally built in Swift. It turns out people on Windows want to edit videos too, so now I’m rewriting it with Rust, Electron, and Svelte with an eye for performance. Rust is a systems programming language, akin to C or C++, but safer. It’s known for being super fast.…
On Twitter, Kyle Shevlin was talking about how at the end of a software engineering interview, they’ll often offer a painfully-small amount of time to ask some of your own questions. The worst part is, I often just blank in the 5 minute question time. I’ll come up with something because I’m good on my feet, but deep down it feels ineffectual. I’m not getting what I need in that time period, so let…
I’ve been working on a video editor built on top of Electron and Rust, where Rust does the heavy lifting, and Electron (paired with Svelte) takes care of the UI. Debugging the JS is easy enough: pop open Electron’s devtools, set some breakpoints, and you’re off to the races. Debugging the Rust is a little harder. But it’s possible! Here’s my setup for attaching VSCode’s debugger to the native Rust…
You can improve the performance of your Electron apps quite a bit by offloading intensive tasks to Rust. There are 2 main libraries out there to help you do this: Neon and napi-rs . As it stands today, Neon is more popular, with over 5700 stars on Github, whereas napi-rs has only a little over 800. That said, stars aren’t everything! For my use case (and as of this writing) napi-rs supports an…
Need to use double braces in your ConvertKit email? Maybe you’re trying to write some code, and the braces are getting stripped out along with everything inside. Here’s the easy fix: Before the opening double braces, add {% raw %} . After the closing braces, add {% endraw %} . Example of Escaping Double Braces in ConvertKit Liquid I had this problem myself – some of my email content was getting…
Is one of your Mac apps crashing? If you got a crash report from your users, or an unsymbolicated crash log from Sentry, I’ll walk you through how to decode it into something you can use to debug the crash. For my own app Recut , I’ve added the Sentry library to capture crash reports. For whatever reason, Sentry does not symbolicate my crash reports. I’ve uploaded the dSYMs and it just seems to…
No matter what kind of app you’re writing, there’s a good chance you need at least one form. Forms in React are often a pain, filled with verbose and boilerplate-y code. Let’s look at how to make forms in React with less pain. In this article we’ll be focusing on using plain React, with no libraries. You’ll learn how forms really work, so you can confidently build them yourself. And if later you…
I’ve gotten very used to having VSCode autoformat my file when I save. Usually, I use Prettier. But I joined a project that uses ESLint to manage its code style, and I wanted to match the team’s formatting. I wanted that sweet auto-formatting on save, but using the eslintrc.json file in the project’s root dir instead of Prettier. Most blog posts wanted to make an entire tutorial out of this… how…
Got an error like this in your React component? Cannot read property `map` of undefined In this post we’ll talk about how to fix this one specifically, and along the way you’ll learn how to approach fixing errors in general. We’ll cover how to read a stack trace, how to interpret the text of the error, and ultimately how to fix it. The Quick Fix This error usually means you’re trying to use .map…
The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs. In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project. What is State? Just so we’re on the same page, let’s talk about state for a second. Every interactive app involves…
What’s the best way to build React apps in 2021? What has changed since 2016? What libraries is everyone using these days? This post is inspired by a now-deleted Reddit post from someone who had learned React in 2016, and was concerned about how to get back into it and refresh their skills. I started using and teaching React in 2016 myself. Over the last few years, there have been some big changes…
In React, image tags are a bit weird. This isn’t really React’s fault, but more a problem of where the images will reside on the server after the app is built. I’m talking about the plain old <img src=""/> tag here. The same one you’d use in HTML. When you img in a React component, the the src prop needs to be point at something that the server can serve. Don’t Use a File Path From Your Computer A…
I had an xml file that looked something like this, and I wanted to remove all the <meta> tags from it: < xml > < note > < to >A</ to > < from >B</ from > < meta > junk </ meta > < meta > more junk </ meta > < body > keep this </ body > </ note > ... </ xml > The sed utility made quick work of it. Some caveats: The file was already well-formatted, and these meta tags spanned multiple lines. If your…
Want to run some code before your React component renders? There are a few ways to make this work, and we’ll talk about them here. But, I have to warn you: Running code before render is usually a sign that you’re going against the grain of how React works. TL;DR – There is no Before Render, only After It makes perfect sense to think “I want to fetch data before my component renders”. Logical! But…
So you’ve added some styles to your page with Chrome’s dev tools. Awesome. But when you click away from the element you’ve styled, the styles disappear from the sidebar! What if you were styling something that changes state, or left the DOM temporarily? How can you add on to those existing styles? Turns out that styles you add in the Elements tab are automatically added to the inspector-stylesheet…
In the summer of 2020, Svelte added TypeScript support. Turning it on is as simple as running a single script! But the default starter project doesn’t have Jest testing set up. I took the default Svelte starter with TypeScript and added Jest to it, along with a couple sample tests. The final project is here . This was pieced together from info at the Svelte testing library docs , the Svelte…