Pavel Grinchenko

🚀 I recently released typed-channel—a tiny library for building type-safe communication between different parts of your apps!

Check out this demo of type-safe worker communication in action ⬇️

Want to play with the code yourself? Try the interactive demo: 

And, of course, you can install the package itself:
npm install typed-channel

What makes typed-channel special? The transports system!

It provides EventTarget and PostMessage transports (which covers a lot of web APIs) out of the box, plus you can create custom transports for any messaging system.

When might you need typed-channel?

• Event buses
• Web Workers communication
• Communication between tabs (BroadcastChannel)
• Any event-based system where you want payload type checking

And it is with zero dependencies and small bundle size! 📦

typed-channel was born out of a real need in our Harmonizer project where we wanted to communicate with Web Workers in a type-safe way.

No more guessing what messages are available or what payload shape to expect—the compiler keeps everything in check!

After the worker implementation, I needed a type-safe event bus system. I realized the pattern was similar—just with different message transfer methods. This insight led to the "transports" concept—swappable communication mechanisms that all share the same type-safe API.

typed-channel proved its worth when we started developing Figma plugin, where main and ui threads are separate ones. I just created a custom transport implementation and got full type safety between the plugin and UI contexts, as I had with Worker and events bus before!

No more message passing with unknown payloads!

You can find docs &amp; examples in the repository. Star it if it helps you! ⭐

Unfortunately, I started noticing such issues on more and more websites lately. Even on well-known companies' projects. It seems people stopped testing their projects on other platforms (than MacOS). Otherwise, they would notice it on Windows.

This is the main reason why I turn scrollbars visibility on in my MacOS on initial setup.

🚀 I want to introduce my new small tool—Code to Markup. Convert your code snippets into beautiful HTML markup for your static websites (and beyond)! You can have beautiful code blocks without any JS!

⚡ How it works:
1️⃣ Pick your highlighter
2️⃣ Choose from dozens of beautiful themes
3️⃣ Select your programming language
4️⃣ Paste your code
5️⃣ Copy the generated HTML markup

That's it! 🚀

It was born out of necessity—I tried to find the most lightweight and easy way to highlight code for a static landing page. Bringing JS to highlight one or two blocks of code felt like overkill.

I noticed that ALL major highlighting libraries have their own sandboxes, where you can play with their themes and see the highlighted result, but NONE of them allow you to copy HTML. So why not code such a tool myself, right? 😄

What can Code to Markup do?
- Supports major highlighters: Shiki, Highlight.js and Prism.js
- Generates copy-ready HTML markup. Shiki is self-contained. Highlight.js &amp; Prism.js need theme styles
- 220+ languages and 60+ themes
- No JS needed on your final site

It is perfect for: 
- Static landing pages
- Blog posts (Hugo, Jekyll, etc.)
- Email templates
- Simple websites where you want syntax highlighting WITHOUT the JS bloat

Features that matter: 
- Get your HTML in one click
- Share URLs with embedded code
- Remembers your last settings
- Works 100% in browser

Try it now: 

What do you think? Would love your feedback! 🙏
MIT Licensed. Open Source.

#WebDev #Tools #SyntaxHighlighting #OpenSource

Thanks!
As far as I understood, both projects are more about highlighting code in the editors, while my tool is about providing static highlighted code blocks. Can't see how they can be integrated. Could you elaborate your idea?

TIL about setPointerCapture &amp; releasePointerCapture Element methods.

Back in the pre-Pointer Events era, everybody used to handle move events by setting mousedown on the element and mousemove/mouseup on the document. This was to handle the edge case when the mouse leaves the element, and events like mousemove/mouseup wouldn’t reach it.

Here's how the logic would look with the old (pre-Pointer Events) approach using mouse events (note where the addEventListener methods are called)

With Pointer Events, the process becomes cleaner. You can capture all pointer events directly on the element itself, without worrying about the mouse leaving the element.

It allows keeping all pointer-related logic confined to the element.