Skip to main content

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

Experimental feature: Feedback Tap overlay to exit Exit with Escape

Toggle theme

Tagged "Svelte"

Feb 25, 2021

Set innerHTML of an element in Svelte

You can use an HTML expression to add valid markup to an element

Browse by tag or all articles.

SeanMcP.com © 2018 - 2023 (SDG)