Skip to main content
Articles
About
Search
Commands
Email me
Send an email to contact Sean McPherson (seanmcp): sean@seanmcp.com
Find me on GitHub
Find me on LinkedIn
Find me on YouTube
Find me on Mastodon
Articles
It has everything
Even a description
2018 into 2019
Reflecting on last year while looking forward to next
2019 into 2020
Reflecting on last year while looking forward the next
5 Lessons from 10k open-source downloads
A few things I've learned from managing a modestly popular open-source package.
A first look at Static CMS with Astro
Documenting my first attempt at switching from Netlify CMS to Static CMS
A modest redesign for 2021
Freshening up SeanMcP.com for the new year
A new Twitter handle
Kicking off 2020 with (yet another) new handle
Access the home directory in Deno
Using Deno's environment to determine your computer's home directory
Accessibility Wednesday
Learning and sharing about accessibility for everyone
Add a custom emulated device in Chrome
Walking through the steps within the Google Chrome dev tools to better mimic your users' devices.
Add a YouTube-embedder shortcode to your Eleventy site
A quick guide to writing a time-saving shortcode to create the embeddable code from a YouTube url
Add Heroicons to an Eleventy site
A guide to using the eleventy-plugin-heroicons package in your Eleventy projects
Add text to the beginning of every file
Using a shell script to add a line to every file with a given extension
Adding accessibility checks to your React app
A few tools to help you build more accessible React applications
Adding images to articles (again)
I went through the process of adding images back to my articles with a helpful script to automate image processing for me.
Adding images to my articles
How the right design and process for sourcing images made all the difference for me
Are command bars the future?
Command bars are a great way to access functionality through a single user interface, but how much potential does this pattern have to change the way we interact with products?
Arguments or parameters?
An attempt to remember the difference between the two
Astro components do not merge HTML attributes
Props are merged, but attributes are not. This is an important rule to know when authoring Astro components.
Astro components for Netlify features
Announcing astro-netlify-components, a library for using Netlify features in your Astro projects.
Await multiple promises in JavaScript
By calling your asynchronous functions before awaiting, you can save valuable time in your JavaScript programs
Awesome browser extensions
A curated list of helpful browser extensions.
Be careful parsing formatted numbers in JavaScript
JavaScript's parseInt, parseFloat, and Number constructors struggle with comma-separated number strings.
Before You Debug
An organized approach to debugging your code
Building browser extensions
Some resources and guides for making browser add-ons/extensions
Calculate the sum of everything up to a given number
A little tool to calculate 5 + 4 + 3 + 2 + 1
Change extensions of all files in a directory
A little Bash script to rename all files from `.jsx` to `.tsx`
How to check npm scripts in current directory
Writing a script to read the package.json for you
Checkout the previous git branch
Using a git shorthand to checkout the most recent branch
Convert class components to functions with React Hooks
A step by step guide to converting old components to modern React
Copy the last git commit hash on macOS
A one liner to copy the last commit hash to the clipboard on a Mac
Count class methods in JavaScript
Although JS treats them like object, finding the methods of a class programmatically is trickier than I thought.
COVID-19 journal
Recording my experience contracting COVID-19 in 2020
Create a "Dave Rupert"-inspired activity graph
A little code walk through a the new Activity Graph on my homepage.
How to create a render prop component
Render props are a popular technique in modern React, but they can be tricky. Here is a brief explanation and guide to creating your own.
Create a URL shortener with Netlify
Build your very own shortener in six quick steps
Geddes' Guide to Crafting
When building something new, get your foundation in place before building upon it.
Don't remove default focus styles, enhance them
Edit a previous commit message
The steps to edit recent or ancient commit messages
Emulate iPhone & iPad in Safari
Simulating your web pages on Apple devices is easy with Safari's responsive design mode
English words by consonant-vowel pattern
A tool to look up common words by their consonant-vowel pattern and resources for the rest
Add event listener for class change
How to create a custom event listener for class names using the MutationObserver API
The fastest way to look for object properties
Filter out premium Medium articles
Using a console script to alter the content on a webpage
Find an iOS simulator identifier
How to find a simulator ID using the Xcode UI or terminal
Finding a Linux distro and software that work
After a lot of trial an error, I settled on Raspberry Pi OS and Firefox for my little Linux-powered computer.
Fix 'downloadable font: rejected by sanitizer' error in Firefox
Make sure that the path to your font is correct before going down the debugging rabbit hole.
Fix 'EMFILE: too many open files' error in Jest
When trying to run Jest in watch mode, this error may mean that you are missing a dependency.
Fix "Error: Could not resolve pagination key in template data" in Eleventy
Not a true fix, but a decent workaround when paginating collections in Eleventy
Fix Netlify CMS YAML error 'Implicit map keys need to be on a single line'
Make sure that your configuration file is being copied to the destination directory.
Fix Netlify Dev's 'Multiple possible start commands found' issue
You need to include additional properties in your netlify.toml to get it working correctly.
Fix "package esbuild-linux-64 could not be found" error on Netlify
I don't know how applicable this solution will be to your situation, but it worked for me!
Free to grow
Why tests (should) free you to grow with confidence
Get innerHTML of Enzyme wrapper
Writing a little helper function to grab the HTML of all children of a shallow wrapper in Enzyme
Get started with Preact
Giving Linux another try
It's been about 10 years since I last tried using Linux, so I think it's time to explore what it has to offer in 2022.
Great programming reads
A list of articles, books, and resources for software engineers
Handy git commands
A curated collection of git commands that help me do my job better
Helpful online tools for diagramming
Features and examples for some of the tools that I use to create illustrations and diagrams
How to get the browser and version in JavaScript
A brief journey into the dangerous world of user agent sniffing
How to open the Dev Tools
A comprehensive guide for opening the dev tools in Chrome and Firefox
How to pronounce my name
A guide to pronounce my often-mispronounced name
Increase the playback speed on any audio or video online
Since audio and video are native HTML elements, you can change the playing speed with a quick console script
Intro to "The Economics of Software Development"
Introducing a new series on how economics helps explain the decisions we make when developing software
Jest tips & tricks
A growing list of little things that make working with Jest a little better
JS Basics: Generate a random number
Using JavaScript's Math object to generate random numbers
JS Basics: Ternary Operator
Demystifying the inline if statement
Latin phrases to know
Laws I Love
Lessons Learned at Abstractions 2019
Some notes and thoughts from Pittsburgh's cross-discipline software conference
Let's stop skinning cats
Proposing an alternative, more constructive idiom to "there's more than one way to skin a cat"
Logging with Eleventy and Nunjucks
Adding a simple filter to save you a lot of grief.
MagnoliaJS 2020 conference notes
Some notes from the talks that I was able to attend
Make a POST request with fetch
A sample POST with fetch for those of us who can never remember how.
Make a web component
How to make a custom web component with only a few lines of code
Make all properties required in TypeScript
Using the Required utility type to required all properties of a type
Manage analysis paralysis while programming
Music to code to
A growing list of artists that I like to listen to while programming.
My best Slack emojis
A curated list of the best reaction emojis that I have created for Slack
New command palette
I added a new new command/control K command palette to my site. You can use the keyboard shortcut or activate it by clicking the magnifying glass in the header.
Node.js is great for scripting
Node.js and JavaScript are a great option for scripting for the language features and the large ecosystem. Oh, and it's pretty fast too!
Nodemon for Deno
Denon is a utility for Deno that provides source watching and process restarting just like Nodemon
Over my head
A list of articles, topics, and resources that are currently over my head
Parse argument aliases in Deno
Using Deno's standard flags module to parse command-line arguments with aliases
Portable custom search engines
Custom search engines (sometimes called site search) are a great browser feature, but they aren't easily ported from one browser to the next. I created a portable web app to handle your custom search engines from any browser.
Prevent Chrome from adjusting audio input levels on Mac
A clever extension can prevent Google Meet from muting your bluetooth microphone
Publishing my first YouTube video
Why I started a YouTube channel and what I learned in the process
React Native Glossary
A growing list of terms you need to recognize when working in React Native
Read a json file in Deno
How to use Deno's standard library to read and parse data from a json file.
Read a json file in Node.js
How to use Node.js's file system to read and parse data from a json file.
Read URL search parameters with JavaScript
How to use URLSearchParams to parse any search parameters string like window.location.search
Reasons to use prop-types
Rebuilding with Astro
Detailing why and how I rebuilt this site with Astro.
Reflecting on a new role
Moving into mobile development at Niche and looking back on how I got here
Remove an item at a given index in JavaScript
Sidestep slicing and splicing and use Array's filter method for a no-hassle solution.
How to remove duplicates from an object array?
Not as easy as we'd like it, but not as hard as it could be
How to replace Math.random with crypto in JavaScript
A drop-in replacement for Math.random that generates cryptographically strong random values
Reviewing 2019 goals
Checking in on the goals I set for myself in 2019
Run Netlify CMS and your dev server in one command
The npm-run-all package allows you to run multiple scripts from your package.json in parallel
Sass converts hsla to hex incorrectly
A simple solution to stop Sass from transparent hsla colors to opaque hex colors.
Search all files for two strings
A terminal command to search for all the files in the current directory that contain two independent strings.
See all package versions in npm cli
How to use npm view to see all the published versions of a package on the registry.
Send data to the window with Eleventy
How to create a shortcode to expose data for client-side scripts
Set innerHTML of an element in Svelte
You can use an HTML expression to add valid markup to an element
Setup Netlify CMS with Eleventy
Six video update
Lessons learned from publishing six videos on YouTube
Should I snapshot my UI components?
The temptation is strong, but consider some of the tradeoffs.
Solid VS Code extensions
A curated list of great extensions that might fly under your radar
Standardize character width with CSS
Two CSS properties that make letters and numbers the same width.
Starring content
A write-up on the new star feature on seanmcp.com
"Stop Teaching Code" in JavaScript
A quick review of Jeff Olson's article on teaching code with translated examples
Store readable data
When forced between storing data for humans or computers, choose the former.
Storing data in state vs. class variable
Why do we store data in state as opposed to on the class?
Tab focus not working in Safari?
For some unknown reason, you need to enable tab highlighting in the browser's settings.
The Economics of Software Development, Part I
How developers can reduce opportunity costs and avoid the sunk-cost fallacy
The Economics of Software Development, Part II
Why developers should rely on markets to make the best decisions for their product
The Economics of Software Development, Part III
Demand inelasticity in web development, why its bad, and what we can do about it.
There is no multi-tasking on the Raspberry Pi
Detailing some of the struggles that I've encountered while trying to do front-end development on a Raspberry Pi.
Thoughts on Steve Job on consulting
Steve Jobs had some opinions on consulting, and it sparked a few thoughts of my own. What makes a valuable consultant? Experience.
Three new games on Toollama
Turtle Guide, Paint Pig, and Spotlight all help children build computer literacy
Three reasons to learn Python
Tools for custom Slack emojis
The full toolbelt for making your own custom Slack emojis
TypeScript mega-course on Egghead.io
Creating a playlist to learn TypeScript
TypeScript without TypeScript
TypeScript provides valuable features but complicate the development process. What are some alternatives that provide the features without the headache?
Updated TypeScript mega-course on Egghead.io
Reviewing and updating my TypeScript mega-course on Egghead.io
Upgrading an Eleventy site to 1.0.0
Make sure the you are using Node.js version 12 or later
Use multiple Chrome Profiles when debugging
With specialized profiles, you can help identify issues without messing with your favorite settings.
Use remark to covert markdown into HTML
The missing "hello world" example to get up and running with remark
How to use StackBlitz with Firefox
Disable enhanced tracking protections to use StackBlitz with Firefox
Use your domain on Mastodon with Astro
A quick guide on using an Astro endpoint to generate the webfinger you need to use your domain on Mastodon.
Using BEM names in React Native
A quick how-to without committing to whether it's a good idea or not
Using dynamic routes to organize blog posts in Astro
If you want to display multiple blog posts on a single page, then you might want to use a dynamic route to generate pages for your content.
VS Code Garden
A garden all about VS Code
What default parameters do (and don't do)
Correcting my mental model
What happened to @react-native-community packages?
Why you won't be installing any community packages on your next React Native project
What is a build.gradle file?
An brief explanation of Gradle and build.gradle files for JavaScript developers
What is Hermes in React Native?
Hermes is a JavaScript engine that is designed to run on mobile devices. It helps power React Native on Android – and now iOS – devices.
What is the song from Boston Dynamic's Spot Launch video?
Using the Google app's music recognition feature, I was able to identify the song as "Banana" by Stony Pony
What to include in every node module
When to use React's memo HOC
The memo higher-order component can prevent your component for re-rendering unnecessarily, but you should use caution before using it
Why a blog?
An effort to preserve my content on the ever-changing web
Why I switched from Gatsby to Eleventy
Why you shouldn't mutate parameters
Write a draft script for your SSG blog
Easily spin up a new article when you don't have a CMS
Tags
#Growth (4)
#Year In Review (2)
#WIP (14)
#Open Source (2)
#Package (1)
#Astro (8)
#Netlify (8)
#Static CMS (1)
#Blogging (5)
#Design (1)
#Meta (9)
#Social Media (1)
#Twitter (1)
#Deno (4)
#A11y (4)
#Chrome (5)
#Dev Tools (6)
#Eleventy (9)
#YouTube (3)
#Icons (1)
#Scripting (3)
#Shell (3)
#React (8)
#UI (2)
#Patterns (2)
#Programming (7)
#JavaScript (26)
#Asynchronous Code (1)
#Garden (13)
#Extensions (2)
#Debugging (8)
#Firefox (4)
#Math (1)
#Tools (4)
#Git (3)
#Productivity (1)
#TIL (1)
#macOS (3)
#Terminal (1)
#Personal (3)
#Craft (1)
#CSS (5)
#Professional (1)
#Safari (2)
#Reading (1)
#Console Scripting (2)
#iOS (2)
#Xcode (1)
#Computing (3)
#Linux (3)
#Error (4)
#Jest (2)
#Testing (4)
#Enzyme (1)
#Preact (1)
#Software Engineering (5)
#Review (1)
#Economics (4)
#Language (2)
#Conferences (2)
#Soap Box (1)
#Nunjucks (1)
#Web Components (1)
#TypeScript (5)
#Music (2)
#Emojis (1)
#Slack (2)
#Node.js (5)
#Professional Development (3)
#CLI (2)
#Product (1)
#Browsers (1)
#Bug (2)
#Career (2)
#Android (2)
#Mobile (6)
#React Native (6)
#Sass (1)
#Styling (1)
#npm (1)
#Svelte (1)
#VS Code (1)
#Typography (1)
#Teaching (1)
#Raspberry Pi (1)
#Thoughts (1)
#EdTech (1)
#Toollama (1)
#Python (1)
#Course (2)
#Egghead (2)
#Markdown (1)
#StackBlitz (1)
#Mastodon (1)
#Gradle (1)
#Detective Work (1)
#Node Modules (1)
#Performance (1)
#Bash (1)
#Static-site Generator (1)
Notes
Note #1
Hello world!
Note #10
To find the date a file was created in Node, you can use the `fs.stat` or `fs.statSync` methods and look for `birthdate`. [See this answer on StackOverflow](https://stackoverflow.com/a/28886086). This might work differently based on your operating system, so your mileage may vary.
Note #11
I tried for a long time to find this resource, so I'm going to save it here: [_Add DuckDuckGo-powered search to your website_](https://marcamos.com/journal/add-duckduckgo-search/) You can add site-wide search to any static site using an HTML `form` and a few fields. Pretty cool!
Note #12
When I was teaching, teachers had a popular aphorism: "You really know something until you have to teach it." Today I learned that this idea was given the term "the illusion of explanatory depth" (IOED) by psychologists in 2002. Further reading: [[0]](http://www.meteo.mcgill.ca/~huardda/articles/rosenblit02.pdf), [[1]](https://cogsci.mindmodeling.org/2016/papers/0185/paper0185.pdf), [[2]](https://www.edge.org/response-detail/27117), [[3]](https://behavioralscientist.org/to-fight-polarization-ask-how-does-that-policy-work/), [[4]](https://www.npr.org/sections/13.7/2015/07/06/420513593/what-you-really-know-about-bicycles)
Note #13
[`github1s`](https://github.com/conwnet/github1s) is the coolest thing that I have seen in a while. By changing the url of any GitHub repository, you can open the repo in a VS Code browser. This is begging for a userscript to add a link to every GitHub repo {% emoji "🤔" %}
Note #14
I added a [/uses](/uses) page to keep track of the extensions and programs that I use everyday. Nothing is revolutionary, but there are a few extensions and user scripts that I find helpful.
Note #15
Today I learned that in Vim `:w` stands for "write" and is not a weird alias for "save." That's much easier to remember.
Note #16
I enjoyed reading [_Hacker Christianity_](https://aliensintheapple.com/2013/12/22/hacker-christianity/) by [Ben Hoyt](https://benhoyt.com/). It's nice to ready perspectives from the intersection of Christianity and programming. I'll be on the lookout for more like this.
Note #17
This morning I added a new page with an embedded emoji picker: https://www.seanmcp.com/sm/emoji-picker/ It embeds [Nolan Lawson's `emoji-picker` web component](https://www.webcomponents.org/element/@@npm/emoji-picker-element) in a webpage and prompts you to copy when selecting an emoji. You can see the [source code here](https://github.com/SeanMcP/seanmcp.com/blob/master/src/sm/emoji-picker.njk). I'll use this when doing computer activities with my three-year-old son, but others may find it useful as well.
Note #18
One of the things I miss most about Windows when working on macOS is the window management. I've tried a few window management apps in the past, and today I'm giving [Rectangle](https://rectangleapp.com/) a spin. So far, the keyboard shortcuts feel logical and the app isn't trying to do too much. We'll see how it goes!
Note #19
If you wait until you are feeling productive, you will never be.
Note #2
Why messages? I really like the idea of preserving content that would otherwise be shared on social media on my own site. It's definitely not the most popular option (in fact, I doubt anyone else will read these), but I think it's the right decision in the long run.
Note #20
Netlify is moving their React UI component library to Tailwind CSS: > what started with organised PostCSS gradually grew to become a complex and entangled global CSS architecture with a lot of specificity and overrides. ... the added tech debt it introduces makes it difficult to keep shipping fast without adding any regressions. Besides, as the number of frontend developers contributing to the codebase also grows, this kind of CSS architecture becomes even more difficult to work with. To accomplish this, they set a deadline, divided the work across their front-end guild, and tracked their progress on GitHub. They added some internal tooling for visual-regression tests and to make building class lists easier, especially for conditional cases. [Read more about Netlify's adoption of Tailwind CSS here](https://www.netlify.com/blog/2021/03/23/from-semantic-css-to-tailwind-refactoring-the-netlify-ui-codebase/)
Note #21
[In the article _How I Built My Blog_](https://www.joshwcomeau.com/blog/how-i-built-my-blog/), Josh Comeau walks through the tech stack behind his lovely personal site. It's neat to see the choices that he made and the reasoning behind them.
Note #22
WebAssembly sounds neat and has real potential, but the setup for a "Hello World" programming is pretty complex: https://wasmbyexample.dev/examples/hello-world/hello-world.assemblyscript.en-us.html
Note #23
**Pop quiz**: What does the following evaluate to in JavaScript? ``` Object.keys('hmm...').length ``` **Answer**: `6`. Here JS treats the string as a type of array which itself is a type of object. Who knew!
Note #24
Google Chrome has been crashing on me without warning the past two weeks, so I'm going to give Microsoft Edge another try. Nice to see that there are more extensions available in Edge Add-on store.
Note #25
Every time I use [esbuild](https://esbuild.github.io/), I'm impressed with its simplicity and speed. This new generation of JS tooling is really exciting!
Note #26
[_20 Things I’ve Learned in my 20 Years as a Software Engineer_](https://www.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/) by Justin Etheredge of Simple Thread made it to the top of Hacker News, and there were some interesting insights from the article. > There is no “right” architecture, you’ll never pay down all of your technical debt, you’ll never design the perfect interface, your tests will always be too slow. This isn’t an excuse to never make things better, but instead a way to give you perspective. Worry less about elegance and perfection; instead strive for continuous improvement and creating a livable system that your team enjoys working in and sustainably delivers value. > [Watch out for the 0.1x programmer] who wastes time, doesn’t ask for feedback, doesn’t test their code, doesn’t consider edge cases, etc… We should be far more concerned with keeping 0.1x programmers off our teams than finding the mythical 10x programmer. > If you are using your tools, and you don’t love or hate them in a myriad of ways, you need to experience more. You need to explore other languages, libraries, and paradigms. There are few ways of leveling up your skills faster than actively seeking out how others accomplish tasks with different tools and techniques than you do. > Good written communication is one of the most important skills for any software engineer to master. The article is worth the read (warning: a few vulgarities).
Note #27
I was able to update `@11ty/eleventy` for this site from version `0.12.0` to `1.0.0` ~~without any issues~~ [only one hiccup](/articles/upgrading-an-eleventy-site-to-1-0-0). Kudos to Zach Leatherman & co. on [the 1.0 release](https://github.com/11ty/eleventy/releases/tag/v1.0.0)!
Note #28
Today marks the end of a chapter and the start of a new adventure. Onward and upward! 🦄
Note #29
> I have enjoyed working with React for the past few years; it always felt like the right level of abstraction from working with the actual DOM. That being said, I have also become wary of how error-prone React hooks code often becomes. Solid.js feels like it uses a lot of the ergonomic parts of React while minimizing confusion and errors. – Nick Scialli in [_Solid.js feels like what I always wanted React to be_](https://typeofnan.dev/solid-js-feels-like-what-i-always-wanted-react-to-be/)
Note #3
Each note is a simple markdown file. All the data necessary to render on the screen is set at a higher level, so it's super simple. **Edit**: Okay, I needed to add a date field. My favorite part of this setup is that I can commit a new note through GitHub, which automatically triggers a Netlify build.
Note #30
In [_Deep dive into React Native’s New Architecture_](https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd), Atharva Patil does a great job of summarizing all of the changes that are coming to React Native in 2022. Definitely worth the 7-minute read.
Note #31
In doing research on debugging, I've found [Diomidis Spinellis' _Effective Debugging_](https://www.spinellis.gr/debugging/) to be really insightful. It's chock-full of helpful tips and real-world examples that illustrate the recommendations well. If you are looking for a general book on debugging, then I highly recommend it.
Note #32
I started watching Brian Vaughn's [_Deep dive with the React DevTools profiler_](https://www.youtube.com/watch?v=nySib7ipZdk) to learn more about using the React Profiler, but there are a bunch of general tips for creating more performant React applications as well. Watching it was a good use of 37 minutes!
Note #33
Requesting data _before_ rendering the user interface is putting the horse before the cart. It's great to see tools like React Router moving in that direction. 🐎 https://remix.run/blog/remixing-react-router
Note #34
Note #35
This week I gave a talk titled _React Bug Catcher: Tools and strategies for debugging React apps_ at [React Global 2022](https://events.geekle.us/react2/). It was a good experience, but I _really_ underestimated (again) how much time it takes to prepare a conference talk. ⌛️
Note #36
I added a new feature to the site called "stars." When it is enabled, you can add a little star anywhere on the site by tapping. I'm planning to write an article about why I wrote it, but in the meantime let me know if you have any feedback on the feature: sean@seanmcp.com **Edit**: Stars are dead. [Long live bookmarks](/notes/44)!
Note #37
I've needed to look up how to use React Testing Library to test that a component with particular props multiple times. Today I found a helpful answer on StackOverflow: https://stackoverflow.com/a/58634377/8486161
Note #38
Today I learned about TypeScript's non-null assertion operator: `!`. It's a nice way to let the TS compiler know that the value cannot be `null` or `undefined`, which is a pretty common use case in my experience. [This StackOverflow question and answer helped unpack things for me](https://stackoverflow.com/questions/42273853/in-typescript-what-is-the-exclamation-mark-bang-operator-when-dereferenci), and [you can reference the documentation here](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator). ❗️
Note #39
Today I added Netlify CMS to the site in order to make it easier to add [notes](/notes). I may expand the feature for articles in the future. The most difficult part of the process was the limited control over file slugs. Notes are numbered and incremented, but there wasn't a good way to do that with Netlify CMS without adding a new field. Oh well. Hopefully the ease of use will trump the annoyance of unnecessary data.
Note #4
Nunjucks and Liquid have different methods for passing arguments to a filter. In Nunjucks, it's: ``` {{ 'value' | filter('arg') }} ``` In Liquid, it's: ``` {{ 'value' | filter: 'arg' }} ```
Note #40
This is the first note created by Netlify CMS in production 🚀
Note #41
I spent some time this morning looking into [`zx`, Google's tool for writing shell scripts in JavaScript](https://github.com/google/zx). They have a lot of neat features baked in, but one of the coolest I saw was the ability to [execute scripts from a Markdown file](https://github.com/google/zx/blob/main/docs/markdown.md). That's a much more approachable way to document scripts than code comments! ✨
Note #42
I've been a big fan of CodeSandbox.io since it released. However, recently I noticed that when you want to convert a sandbox to a GitHub repository, it requires access to your organizations too. I'm happy to give them access to my GitHub account, but I do not want to give them permissions to edit repos at Khan Academy. This seems like strange oversight from the CodeSandbox team. 🤔
Note #43
This morning I spent some time trying out [SvelteKit](https://kit.svelte.dev/) for the first time, and... it did not go well 🙈 I say this as a big Svelte fan, but it feels like Kit was designed to be unpleasant to use. Complicated patterns at every turn, and an undecipherable build for the uninitiated. My hope was that SvelteKit would be a great tool to build projects in Svelte (that _is_ what it says on the tin), but I guess I'll need to look elsewhere.
Note #44
I've added a bookmarking feature to the site! When you're looking at an article or note, you'll see a little bookmark icon to the top right. If you toggle that, it will save the page in `localStorage` and highlight it whenever you browse [articles](/articles) or [notes](/notes). I know that I'm going to find this useful, and I hope that you do too! 🔖
Note #45
For a long time I avoided using the `.mjs` extension with Node.js because it felt odd. But after years of fiddling with package `type`s and CLI arguments to get it to run ES Modules, I've come around to "Michael Jackson Script". I'm looking forward to the day when ESM are the default in Node.js, but until then: _viva la `.mjs`_.
Note #46
YouTube is rolling out handles for their channels, and I was able to snag [@seanmcp](https://youtube.com/@seanmcp). There are a lot of Sean McPs in the world, so it always feels like a victory when I get to a handle first. Is that petty? 😅
Note #47
Reflecting on the recent situation at Twitter, [Dave Rupert wrote](https://daverupert.com/2022/11/silos/): > Now we are barn-less. Silo-less. Wandering open pastures for the next watering > hole. > Wherever you end up I want to offer an idea; you are the value. Your ideas, > your insights, your compassion, your ability to help someone in need, your > dumb puns and dank memes; that’s what’s valuable. That's encouraging to me, because I have the autonomy to choose a platform or build one that suits my needs. This site is an example of that. But what about the folks who are unable? Even if they realize they are the value, where are they to go? I'm afraid the options are limited; they're stuck trading a frog for a toad.
Note #48
There was an interesting Slack thread at work today discussing how to meet and make friends as an adult. A lot of folks chimed in and shared their experience and some things that have worked for them. As a Christian who is active in a church community, I've never encountered these challenges. But I'm empathetic towards those who have: meaningful in-person relationships are necessary and increasingly difficult to find.
Note #5
🚀 I [released a new version](https://npm.im/eleventy-plugin-emoji) of `eleventy-plugin-emoji` this morning. Two minor changes: 1) the filter now supports a label, and 2) the default class name is now `eleventy-emoji`.
Note #6
I added a new section to the site called ["Bookshelf"](https://seanmcp.com/bookshelf). This was modelled after [David Rupert's bookshelf](https://daverupert.com/bookshelf), with the additional ability to include notes for each book. I'm really enjoying the ability to add features to my site as needed.
Note #7
[_10 bad TypeScript habits to break this year_](https://startup-cto.net/10-bad-typescript-habits-to-break-this-year/) was shared on the latest edition of [JavaScript Weekly](https://javascriptweekly.com/). There are a few useful tidbits in there, but I'm particularly interested in using `class Foo implements Bar` to mock data for tests (6) and using descriptive names for generics (7).
Note #8
The W3C has a [feed validator](https://validator.w3.org/feed/) that is pretty handy when you are working on generating RSS/XML feeds.
Note #9
Max Böck has [a guide for persisting files inbetween Netlify builds](https://mxb.dev/blog/persistent-build-folders-netlify/) using a custom plugin. It looks pretty straightforward, so I'm going to file that away for later 🗄
Pages
Abby
A page about my three-legged dog
Articles
Read articles about programming
Notes
A feed of short notes, thoughts, or ideas
Tags
All of the tags for my articles
Talks
Outlines of talks I've given and workshops I've lead
Bookmarks
View and manage bookmarks on this site
Bookshelf
A running list of books that I have read
About
Learn more about me and my work
Feed
Subscribe to my blog with your favorite RSS reader
Map
A detailed site map
Series
Articles organized into series
Soccer
Read articles about soccer from a dedicated fan
Tools
A library of tools to help make your life easier. Okay, there are some games too – but they're educational!
Uses
A curated list of tools and technology that I use
Toggle theme
Tagged "Twitter"
Jan 28, 2020
A new Twitter handle
Kicking off 2020 with (yet another) new handle
Browse
by tag
or
all articles
.