<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Leo Harrison</title>
    <description>The latest articles on DEV Community by Leo Harrison (@leoharrison).</description>
    <link>https://dev.to/leoharrison</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3934160%2F0be9a16b-4996-4508-addb-5c9e190f70c9.png</url>
      <title>DEV Community: Leo Harrison</title>
      <link>https://dev.to/leoharrison</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/leoharrison"/>
    <language>en</language>
    <item>
      <title>Do You Have Trouble with Online Collaboration?</title>
      <dc:creator>Leo Harrison</dc:creator>
      <pubDate>Sat, 16 May 2026 04:05:49 +0000</pubDate>
      <link>https://dev.to/leoharrison/do-you-have-trouble-with-online-collaboration-3ldp</link>
      <guid>https://dev.to/leoharrison/do-you-have-trouble-with-online-collaboration-3ldp</guid>
      <description>&lt;p&gt;If you have ever tried to sketch out an idea with a remote teammate, you know the pain. One person shares their screen. The other person says "no, move that to the left — no, my left." You end up spending more time explaining than actually working.&lt;/p&gt;

&lt;p&gt;I ran into this problem too many times. So I built a simple collaborative whiteboard that solves the core problem: letting multiple people draw on the same canvas, in real time, without any friction.&lt;/p&gt;

&lt;p&gt;What It Does&lt;br&gt;
It is a browser-based whiteboard. You open the link, create a room, and start drawing. Share the room link with your team, and they join instantly. Everyone sees the same canvas. Everyone can draw, erase, add rectangles and circles, and chat in the side panel.&lt;/p&gt;

&lt;p&gt;There is no download, no waiting, and no feature bloat. The toolbar has exactly what you need: pen, eraser, rectangle, circle, fill toggle, undo, and redo. You can change brush size and color. You can export the canvas as a PNG image. That is it.&lt;/p&gt;

&lt;p&gt;Why I Built It&lt;br&gt;
Most online whiteboard tools are either too heavy or too expensive. They take ten seconds to load, throw up multiple popups asking you to sign in or upgrade, and come with hundreds of features you will never use. I wanted something that loads in under a second and lets me start drawing immediately.&lt;/p&gt;

&lt;p&gt;The whiteboard runs on vanilla JavaScript — no React, no Vue, no framework overhead. The backend is Supabase, which handles authentication, real-time messaging, and data storage. The whole thing is hosted on Netlify and deploys with a single drag-and-drop.&lt;/p&gt;

&lt;p&gt;What Makes It Work&lt;br&gt;
The interesting technical challenge was canvas synchronization. When multiple people draw on the same canvas, you need to broadcast each stroke to everyone else. But full-resolution canvas images can exceed the message size limits of real-time channels. If you try to send the whole canvas at once, the message gets dropped, and the other users see nothing.&lt;/p&gt;

&lt;p&gt;My solution was to split the canvas into tiles — 16 smaller images — and send them as separate messages. The receiving side collects the tiles, reassembles them like a jigsaw puzzle, and renders the complete canvas. If some tiles are lost due to network issues, the system still assembles whatever it received. This tiled approach guarantees that canvas sync works regardless of canvas size.&lt;/p&gt;

&lt;p&gt;Real-Time Collaboration Features&lt;br&gt;
Beyond drawing sync, the whiteboard includes several collaboration features. A chat panel lets team members talk while they draw. User cursors are visible in real time, so you can see where other people are pointing. The user list shows who is in the room, and the first person to join automatically becomes the room administrator. The admin can mute or kick users and clear the canvas.&lt;/p&gt;

&lt;p&gt;The app supports both English and Chinese, with automatic language detection based on browser settings or IP location. A language toggle button sits in the top-right corner for manual switching.&lt;/p&gt;

&lt;p&gt;Authentication Without Annoyance&lt;br&gt;
Registration uses email OTP codes instead of magic links. You enter your email, receive an 8-digit code, type it in, and you are done. After verification, you can optionally set a password for future logins. There is also a password reset flow for existing users. The whole auth system is built on Supabase Auth, which handles session management and token refresh automatically.&lt;/p&gt;

&lt;p&gt;Admin Dashboard&lt;br&gt;
The app includes a separate admin page at /admin.html that shows registered users, new sign-ups, and email verification status. There is a searchable user table with roles and timestamps. The data query layer is abstracted from the UI, so it can be connected to a unified admin panel for managing multiple sites in the future.&lt;/p&gt;

&lt;p&gt;Give It a Try&lt;br&gt;
The project is free and open source. You can use it as-is, fork the code, or integrate it into your own product. It is simple enough to understand in one read-through, but solid enough to use in production.&lt;/p&gt;

&lt;p&gt;Live site: &lt;a href="https://cobboard.netlify.app" rel="noopener noreferrer"&gt;https://cobboard.netlify.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have feedback, bug reports, or ideas, I would love to hear them. Happy collaborating.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>programming</category>
    </item>
    <item>
      <title>Hi Dev.to, I'm Leo — I build free client-side tools and run 20+ sites</title>
      <dc:creator>Leo Harrison</dc:creator>
      <pubDate>Sat, 16 May 2026 03:55:02 +0000</pubDate>
      <link>https://dev.to/leoharrison/hi-devto-im-leo-i-build-free-client-side-tools-and-run-20-sites-1ma2</link>
      <guid>https://dev.to/leoharrison/hi-devto-im-leo-i-build-free-client-side-tools-and-run-20-sites-1ma2</guid>
      <description>&lt;p&gt;Hey everyone,&lt;/p&gt;

&lt;p&gt;First post here. Thought I'd introduce myself properly.&lt;/p&gt;

&lt;p&gt;I'm an indie maker. I build free web tools — the kind you need for 30 seconds and don't want to create an account for. JSON formatting, Base64 encoding, QR code generation, regex testing... the little stuff developers reach for every day.&lt;/p&gt;

&lt;p&gt;My main project right now is Aggregation Tool (&lt;a href="https://aggtool.xyz" rel="noopener noreferrer"&gt;https://aggtool.xyz&lt;/a&gt;) — 100+ utilities in one place. I built it because every time I Googled "json formatter" I'd land on a site with 15 banner ads, a cookie consent popup, and a "sign up for pro" modal before I could even paste my code. I got fed up and made my own.&lt;/p&gt;

&lt;p&gt;Everything runs client-side. No data leaves your browser. No backend. No database. No tracking. Pure vanilla JavaScript — no React, no frameworks, no build step. Just edit the file and refresh.&lt;/p&gt;

&lt;p&gt;I've got 20+ other sites running too, each one a small, focused tool. No team. No funding. Just me, a text editor, and a lot of late nights.&lt;/p&gt;

&lt;p&gt;I'll be posting here about what I'm building, what I'm learning, and honestly — what's not working. I'm also here to get roasted on my UI decisions and hear what tools you wish existed but don't.&lt;/p&gt;

&lt;p&gt;If you're into indie making, vanilla JS, or just want to say hi, drop a comment. Happy to connect.&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Leo&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>productivity</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
