Benny Powers: Web Developer2026-03-12T19:27:26Zhttps://bennypowers.dev/Benny Powersגאולת שאגת הארי2026-03-12T19:27:26Zhttps://bennypowers.dev/posts/geulah-shaagat-ari/Read more...גאולה לאדר תשפ"ו2026-03-03T14:24:33Zhttps://bennypowers.dev/posts/geulah-adar-5786/Read more...GNOME 2.20 but its Web Components2026-02-27T13:56:43Zhttps://bennypowers.dev/posts/GNOME-2-web/Just because we could didn't mean that we shouldToucan Wireless Split Ergonomic Keyboard DIY Build2026-02-20T12:56:34Zhttps://bennypowers.dev/posts/toucan-diy/Has keyboard endgame been acheived? LOL no, but we had fun along the way.Introducing The Custom Elements Dev Server2025-12-04T14:04:56Zhttps://bennypowers.dev/posts/custom-elements-dev-server/An opinionated development server for HTML and custom elements. Like Storybook, but it's all about HTML - no framework required. Auto-generated knobs, smart reload, and manifest-driven demo discovery.
Apollo Elements v3.0.0 - GraphQL Meets Web Components2025-10-04T00:00:00Zhttps://bennypowers.dev/posts/apollo-elements-3/After 3+ years, Apollo Elements v3.0.0 is here with Apollo Client 4 support, Node.js 24, and a cleaner API. Build GraphQL-powered web components that work in any framework—or no framework at all.Introducing CEM Language Server2025-08-19T00:00:00Zhttps://bennypowers.dev/posts/introducing-cem-language-server/Remember wishing your editor actually *understood* your custom elements? Wish granted. The CEM Language Server is here, and it's built right. ✨ After weeks of development, the CEM Language Server is finally here! Built from the ground up in Go with proper error handling, comprehensive testing, and all the LSP features you'd expect for working with custom elements.Fun with Ripgrep, part 12025-07-15T19:08:57Zhttps://bennypowers.dev/posts/fun-with-ripgrep/Read more...Writing your own OS in 100 lines of YAML2025-05-16T11:01:48Zhttps://bennypowers.dev/posts/your-own-os/The BlueBuild project is an easy and fun way to customize your own operating system.Introducing Design Tokens Language Server2025-04-28T18:29:36Zhttps://bennypowers.dev/posts/introducing-design-tokens-language-server/Design tokens are the single source of truth for UI styling. The `design-tokens-language-server` makes working with design tokens a seamless experience in your everyday development workflow.Your Design System is Not a Solution2024-09-24T05:31:54Zhttps://bennypowers.dev/posts/your-design-system-is-not-a-solution/Design systems are tools, not solutions. They're not there to solve every problem for every team, but rather to put quality tools in the hands of skilled craftsmen.Typescript Eleventy Config2024-09-03T15:02:14Zhttps://bennypowers.dev/posts/typescript-11ty-config/Node 22.6 introduced the --experimental-strip-types flag, and eleventy 3.0.0 adds support for JavaScript module configs, which means we can set up an 11ty project written in TypeScript using esm and build it without tsc.
Hosting Firefish on a Raspberry Pi2024-07-08T11:20:30Zhttps://bennypowers.dev/posts/selfhosting-firefish/Self-hosting the firefish fediverse microblogging app isn't as hard as you might think. Using Gentoo Linux and Podman on a Raspberry Pi, initial setup is almost entirely straightforward
Server Rendering Lit Web Components with Drupal2024-08-06T13:14:41Zhttps://bennypowers.dev/posts/drupal-lit-ssr/Server-rendered web components require no javascript up front. Declarative
Shadow DOM let's you render your components' shadow roots before the page
finishes loading. While the Lit framework's utilities for SSR are still
experimental, we can write a proof-of-concept to integrate with Drupal.
Import Maps for Cross-team Collaboration2024-05-12T14:28:42Zhttps://bennypowers.dev/posts/import-maps-cross-team-collaboration/In large organizations, it takes many inputs across multiple teams to produce a single web page. Import maps aid in reducing the potential friction between teams by abstracting package names over resource URLs.Leaving Mastodon2023-12-03T15:19:32Zhttps://bennypowers.dev/posts/leaving-mastodon/Mastodon is probably a great idea, but is extremely hostile to Jews, so I'm out
We are Abraham smashing the idols2023-10-23T00:00:00Zhttps://bennypowers.dev/posts/we-are/Read more...Am Yisrael Chai2025-08-20T20:46:21Zhttps://bennypowers.dev/posts/am-yisrael-hai/The Jewish people are fighting for their lives. Stand with them. Put this Web
component on your web site to direct visitors to donate to Israeli causes
Another way React Breaks HTML2023-08-02T15:43:01Zhttps://bennypowers.dev/posts/another-way-react-breaks-html/Unsuspecting #react users may come to believe that #WebComponents break
react, but the truth is - as usual - exactly the opposite. Despite the
superficial similarity to #HTML, react's JSX language breaks the web
platform's powerful native slot element.
Sorting and Dating 11ty Posts by Name2023-07-28T08:25:31Zhttps://bennypowers.dev/posts/sort-and-date-11ty-posts-by-name/Organize and automate your 11ty blog's post structure with ISO dates and
some quick JavaScript.
WebC Declarative Shadow DOM Slot Workarounds2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/webc-dsd-slot-workaround/A cheeky hack to make <slot> elements work as expected in
11ty's WebC framework.
Debugging GNOME Extensions with dbus-run-session2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/debugging-gnome-extensions-dbus-run-session/How to run a nested gnome session (wayland) so you can test out changes to a GNOME extension without having to log out.
Toggle Markdown Image Syntax with Treesitter2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/markdown-images-treesitter/Use #Neovim's #treesitter and #lua APIs to script a function that toggles
between #HTML and #markdown image synax
Building a static storage import-map CDN2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/import-map-cdn/Import maps, the new browser standard, open up a world of possibilities for factoring and optimizing web pages and experiences. In this post, we explore one of them briefly: developing a static import-map-based #CDN to serve your #NPM packages.
מקלדת עדעלמן הארגונומי2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/adelman/מקלדת נוחה וארגונומית לעברית שמבוסס על המקלדת הלטינית דבוראקwebc.nvim2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/webc-nvim/New Neovim Plugin - Basic support for WebC filesספירה ואיסרו חג2025-08-20T20:46:21Zhttps://bennypowers.dev/posts/sefira-isru-hag-pesah/דרשה על ספירת העומר ואיסרו חג שניתנה בבית הכנסת שערי רחמים ושמחה בירושליםELI5 What are Web Components2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/eli5-web-components/#eli5 (explain to me like I'm 5-years-old) what #WebComponents are and how they're different from #javascript-heavy #frameworks
Wrapping Emoji in your 11ty build2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/11ty-wrap-emoji/Wrapping emoji in element with #aria-label is an #accessibility practice recommended by experts like Leonie Watson. This post builds on work by Kitty Giraudel and others in automatically wrapping emoji in your #11ty/#eleventy pages.
WebC First Impressions2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/webc-impressions/Thoughts from my first attempt at understanding the new WebC framework from 11tyImproving BBC micro:bit's Tug-of-LED Exercise Part 1: Audio2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/microbit-spruce-up-tug-of-led/Putting some shine on one of Makecode's built-in exercises. Add features to
Tug-of-LED like audio, network, and fancier graphics. Students will learn
about functions, arrays, and audio frequency while improving their gameplay.
splitjoin.nvim2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/splitjoin-nvim/New Neovim Plugin - separate lists into multiple lines then glue them back togetherCheaply Rebuilding an 11ty site on Netlify2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/cheap-netlify-11ty-rebuilds/Save money and build minutes while rebuilding your 11ty site using GitHub Actions and the netlify CLI
SVG Icon Sprites in Eleventy2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/11ty-svg-sprites/Use SVG icons in Eleventy and only ship the code you need.Micro:bit countdown2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/microbit-countdown/Let's spice up the stock makecode countdown tutorial8 Nights of Web Components Tips: 57832023-07-28T08:02:13Zhttps://bennypowers.dev/posts/8-days-5783/Instead of one night of web components posts, we get eight crazy nights!Make a Micro Dreidle2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/micro-dreidle/Let's use makecode to turn a micro:bit into a dreidle!Form-Associated Custom Elements2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/form-associated-custom-elements/Use the new <em>form-associated custom elements</em> and <em><code>ElementInternals</code></em> standards to create accessible custom elements which behave like native HTML form controls.
Let's Write a Redux Controller for Web Components2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/lets-write-a-redux-controller-for-web-components/Using Lit-style reactive controllers, learn how to easily add redux-style
state reducers to your web components.
8 Days of Web Components Tips2024-09-04T04:56:21Zhttps://bennypowers.dev/posts/8-days-of-webcomponents-tips/In honour of Hannukah this year, I undertook to write 8 web components tips, one for each night of the festival. Tonight is the 8th and final night of the festival. The mystics said that this night combines and contains aspects of each of the seven previous nights, so I'd like to share a compilation of those tips with the dev community.Narrowing the Type of Class Accessors2024-09-04T04:56:21Zhttps://bennypowers.dev/posts/narrowing-the-type-of-class-accessors/Try using decorators to narrow the type of JavaScript subclass accessorsWhat's Not new in React 182024-09-04T04:56:21Zhttps://bennypowers.dev/posts/whats-not-new-in-react-18/The react team could have implemented HTML support in React 18, they could have even let others do it for them, but they didn't. It's time to reconsider a web framework which is at best negligent and at worst actively hostile to web standards.Let's Build a Colour Picker Web Component2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/lets-build-a-colour-picker-web-component/Build and accessible, web-native colour picker component that works in any framework with the web components APIs.
Any Framework, One Stripe Integration2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/any-framework-one-stripe-integration/Stripe Elements custom elements work across front-end frameworks and even in vanilla HTML and JS.Promise Chains are Kinda Awesome2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/promise-chains-are-kinda-awesome/Some say that promises shouldn't be used when async await is available but that's not always true. Here's why 'promise chains' are actually amazing.Centring Overlapping Content with CSS Grid2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/centring-overlapping-content-with-css-grid/How to overlay content on top of an image or other element simply using CSS Grid.Embed a Dev.to User Feed with Web Components2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/embed-a-dev-to-user-feed-with-web-components/Let's build a web component to embed a dev.to feed in a page.Lets Build Web Components! Part 8: MythBusters Edition2023-01-31T10:23:33Zhttps://bennypowers.dev/posts/lets-build-web-components/part-8-mythbusters/Web Components are awesome, but perhaps a little misunderstood. This post dispels many myths which have cropped up recently.Lets Build Web Components! Part 6: Gluon2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-6-gluon/Hit that sweet spot between library cruft and bare browser APIs with Gluon web components.Lets Build Web Components! Part 7: Hybrids2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-7-hybrids/Web Components are the future, but with a little care and some helpful polyfills, they can be the present as well.Lets Build Web Components! Part 5: LitElement2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-5-litelement/Reactive Components without compiling or VDOM Overhead? Say hello to LitElement.Lets Build Web Components! Part 4: Polymer Library2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-4-polymer-library/Learn how to build web components and factor apps with the OG web-components library, Polymer.Solving Problems in Vue with Web Components2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/solving-problems-in-vue-with-web-components/You don't need to give up your frameworks to use web components. You can use them anywhere you can use HTML and JavaScript.Lets Build Web Components! Part 3: Vanilla Components2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-3-vanilla-components/You don't need a fancy framework or complicated tools to design components and build apps, you just need your web browser!Lets Build Web Components! Part 2: The Polyfills2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-2-the-polyfills/Web Components are the future, but with a little care and some helpful polyfills, they can be the present as well.Lets Build Web Components! Part 1: The Standards2022-11-09T14:31:56Zhttps://bennypowers.dev/posts/lets-build-web-components/part-1-the-standards/A step by step guide on how to factor a modern, component-based app using web standardsHow I broke Dev.to on my First PR2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/how-i-broke-devto-on-my-first-pr/A tale of two face-palmsYou Should be Using esm2023-07-28T08:02:13Zhttps://bennypowers.dev/posts/you-should-be-using-esm/esm lets you seamlessly combine cjs and js modules with little fuss, if you're transpiling just to use import, chances are you shouldn't.