DEV Community: rocketsquirreldev

[DeskFlow]Scaling Up: Making My React Canvas App 6x Larger (v1.1.6)

rocketsquirreldev — Sat, 18 Apr 2026 14:02:24 +0000

I am building DeskFlow, a browser-based visual planner for desk setups and cable management.

As the tool gained traction, users (and myself) hit a frustrating wall: the fixed 2000x2000px canvas was simply too small. If you were planning a dual-monitor setup with a laptop, a KVM switch, a NAS, and an audio interface, the nodes and cables quickly turned into a chaotic, overlapping mess.

In version 1.1.6, I focused entirely on expanding the workspace and improving spatial navigation. Here is what changed.

1. A 5000x5000px Workspace

I expanded the canvas area by 6.25x. Now, users can space out their hardware nodes comfortably. You can zoom out to view the entire home office layout, or zoom in to precisely route cables between specific ports.

Bug fix note: When I expanded the container, users couldn't drag nodes past the top-left quadrant. I realized my clamp logic for node dragging still had the 2000 boundaries hardcoded in three different utility functions. Always use constants, folks!

2. Graph Paper Grid

The old dot-grid background was functional but boring. I replaced it with a classic engineering "graph paper" style using a combination of linear gradients.

Minor grid: 40px intervals (thin, subtle lines).
Major grid: 200px intervals (slightly thicker lines every 5 blocks).

This makes it significantly easier to judge spatial relationships ("This 4-block area is my monitor arm, this area is under the desk"). The translucent white lines on the dark theme contrast perfectly with the cyan/pink cable paths.

3. Dedicated Pan Mode (Like Figma)

With a massive canvas, navigation is critical. Previously, you had to hold Space + Drag or use the middle mouse button to pan.

I introduced a dedicated Pan Mode toggle (bottom-left hand icon, or press H). When active, simple left-click dragging pans the entire viewport. If you use tools like Figma or Miro, this interaction model feels instantly familiar.

4. UI Boundaries

I added subtle, translucent cyan borders between the left hardware panel, the main canvas, and the right shopping list panel. It’s a tiny CSS tweak (border-right: 1px solid rgba(0, 255, 255, 0.1)), but it dramatically sharpens the separation of the workspace.

If you are planning to overhaul your desk setup or just want to play around with some visual hardware routing, try it out directly in your browser.

🔗 Try it here: https://deskflow-gold.vercel.app/

Next on the roadmap: custom node labels and a minimap for this giant new canvas!

[CryptoTradingBot] My Crypto Algo-Bot Hit a 41% Win Rate, But Still Lost Money. Here is Why.

rocketsquirreldev — Thu, 16 Apr 2026 14:16:45 +0000

Over the past 11 days, I deployed version 8.03 of my Python-based crypto auto-trading bot on Binance Futures. I had recently built a real-time web dashboard for it, so monitoring the trades was easier than ever.

The good news? My win rate jumped from a miserable 26.7% to 41.2%.
The bad news? I still ended up with a net loss of -2.42 USDT.

In algorithmic trading, numbers don't lie. I dug into the logs of the 34 executed trades to find out exactly where my strategy was leaking money. Here is the post-mortem data analysis.

Overall Performance (April 5 - April 16)

Total Trades: 34
Wins: 14 / Losses: 20
Win Rate: 41.2%
Gross Profit: +11.07 USDT / Gross Loss: -13.49 USDT
Average Win: +0.79 / Average Loss: -0.67

Finding the Culprit: Asset Breakdown

Looking at the PnL by asset class revealed the obvious weak link:

LINKUSDT: 5W 4L (+3.33 USDT) 🏆
XRPUSDT: 3W 3L (+0.09 USDT)
ETHUSDT: 5W 6L (-1.83 USDT)
BTCUSDT: 1W 3L (-1.26 USDT)
SOLUSDT: 0W 4L (-2.75 USDT) 🚨

Insight 1: The Solana Mismatch. Just like ADA in my previous bot version, SOL's volatility profile does not fit my 15-minute timeframe strategy. All 4 trades were LONG entries that reversed and hit the stop-loss within 15 mins to 2 hours. If I had simply excluded SOL, my net PnL would have been +0.33 USDT.

Digging Deeper: The Volume Climax Trap

I cross-referenced all losing trades with my technical indicators. A glaring pattern emerged regarding the Volume Oscillator (VOL_OSC).

I isolated all trades where the bot entered while VOL_OSC >= 30 (indicating an unusually high volume spike):

04-06 ETHUSDT BUY (VOL_OSC 42.4) -> -1.33
04-14 SOLUSDT BUY (VOL_OSC 58.2) -> -1.07
04-14 ETHUSDT BUY (VOL_OSC 53.0) -> -1.02
04-16 XRPUSDT BUY (VOL_OSC 51.5) -> -1.00

Insight 2: Do not chase the climax. 4 trades, 4 losses, costing me -4.42 USDT. When volume spikes abnormally high, the trend is usually reaching its climax before a sharp reversal. My bot was chasing the breakout right at the top. Filtering out these 4 trades alone would have pushed my net PnL to +2.00 USDT.

The Plan for v8.04

Data analysis turns failure into a roadmap. For the upcoming v8.04 update, I am implementing two simple, data-driven rules:

Drop SOLUSDT from the watchlist.
Implement a Climax Filter: Block all entries if VOL_OSC >= 30.

These two rules alone would have improved this week's performance by roughly +6 USDT.

Algo-trading isn't about intuition; it's about debugging your logic through raw data. Time to update the code and let v8.04 run. I'll share the results next time!

[DeskFlow]Improving UX in my Side Project: Adding Multi-select & Group Move to DeskFlow

rocketsquirreldev — Wed, 15 Apr 2026 13:22:51 +0000

As an indie developer building DeskFlow (a visual desk setup & cable planner), I've been using my own tool to plan my home office upgrade.

But I quickly realized a massive pain point: as my setup grew complex, moving things around became a chore. To move a monitor, a hub, and a laptop, I had to click and drag each item individually. It was tedious and counter-intuitive.

So, I spent my late-night coding session implementing a proper Multi-select and Group Move feature.

What's New?

Box Selection: Click and drag on an empty canvas to create a selection box (highlighted with an orange dotted border). Any hardware nodes within the box are selected.
Modifier Keys: Use Shift or Cmd/Ctrl + click to toggle selection on individual nodes.
Synchronized Movement: Once selected, dragging any node moves the entire group. Cables follow the movement in real-time, maintaining the structure.
Batch Action: Hit Delete to clear out multiple nodes at once.

Why this matters

In any visual tool, the "speed of thought" should not be hindered by the UI. By allowing users to rearrange clusters of devices in a single motion, planning a desk layout becomes much more fluid and playful.

If you're a fellow developer or gear enthusiast looking to map out your cable management or desk peripherals, give it a spin. No installation, no sign-up—just pure planning in your browser.

🔗 Link: https://deskflow-gold.vercel.app/

I'd love to hear your feedback on the UX or any features you'd like to see next!

[x509Lab]Generating Ed25519 Certificate Chains in the Browser (No Server Required)

rocketsquirreldev — Tue, 14 Apr 2026 12:25:41 +0000

I recently released an update to x509Lab (a completely browser-based visual certificate chain builder) to support Ed25519 key generation and signing.

If you deal with modern TLS, SSH, or code signing, you know Ed25519 is becoming the standard. It uses much smaller keys than RSA and offers faster signing than ECDSA.

Here is how I implemented it entirely on the client side using the Web Crypto API, without any backend server.

🔗 Try it live: https://x509lab.vercel.app

Visualizing and Generating Ed25519 Chains

The goal of x509Lab is to let you drag and drop Root CAs, Intermediate CAs, and Leaf nodes, connect them, and generate a valid PKI tree.

Now, when you click Generate Certs, you can select Ed25519 from the Key Algorithm dropdown. The app will instantly generate the keypairs, sign the certificates down the chain, and verify the trust loop—all in your browser.

The Technical Struggle: Web Crypto API & ASN.1 DER

Generating the keys using crypto.subtle.generateKey({ name: 'Ed25519' }) and signing them was the easy part. The real challenge was encoding the resulting certificates into a valid .pem format that OpenSSL would accept.

The Web Crypto API doesn't spit out X.509 certificates out of the box. You have to build the ASN.1 structure manually.

Here are a few technical hurdles I had to overcome:

Custom OID Implementation: I had to manually implement the DER encoding for the Ed25519 Object Identifier (1.3.101.112) based on RFC 8410.
The NULL Parameter Trap: When dealing with RSA, the signature algorithm sequence typically includes a NULL parameter. However, for Ed25519, including this NULL parameter violates the standard and breaks the certificate.
Raw Signatures: Unlike ECDSA, which requires converting the signature into a specific DER sequence, Ed25519 uses the raw 64-byte signature directly.

Auto-generating OpenSSL Commands

A visual tool is great, but eventually, you need to type commands into a terminal.

x509Lab analyzes your visual tree and generates the exact openssl CLI commands needed to recreate that setup. With this update, it now natively outputs the correct syntax for Ed25519:

openssl genpkey -algorithm Ed25519 -out root.key

If you're studying cryptography, setting up internal CAs, or just sick of remembering OpenSSL flags, give it a try. Let me know what you think in the comments!

Building a Real-Time Dashboard for My Python Crypto Bot (Without Breaking It)

rocketsquirreldev — Fri, 10 Apr 2026 12:52:42 +0000

When I first deployed my Python crypto trading bot to an AWS EC2 instance, I thought Telegram notifications would be enough. Getting a ping for every entry, stop-loss, or take-profit felt sufficient.

But over time, the limitations became glaring. What's my current win rate? How is v8.03 performing compared to v8.02? What's the exact PnL curve looking like? Telegram gives you isolated moments; it doesn't give you the narrative. But to see the big picture, I had to RDP into my Windows EC2 server, open CSV files, and manually calculate stats. I needed a dashboard, but I had one strict rule: Do not touch the core trading logic.

Here is how I built a real-time web dashboard for my bot with minimal footprint.

The Architecture: Decoupled by Design

Injecting UI or heavy API logic directly into a live trading bot is a recipe for disaster. If the UI thread crashes, I don't want it bringing down the trading engine during a volatile market move.

I opted for a completely decoupled file-based architecture:

The Bot (Writer): Runs as usual. At the end of every candle evaluation, it simply writes its current state (balance, open positions, active settings) to a bot_state.json file.
The Flask API (Reader): A lightweight separate process that reads the .json and .csv trade logs and serves them via REST endpoints.
The Frontend: A Vanilla JS + Chart.js static HTML page that polls the API every 15 seconds.

Step 1: The Lightweight Flask API

I created a dashboard_api.py script. It exposes endpoints like:

/api/status: Bot version, strategy, ADX levels.
/api/balance: Current USDT balance.
/api/trades: Parses the CSV trade logs.
/api/stats: Calculates win rate and total PnL.

Inside the main bot script, I only added three lines of code inside the start() method to launch the Flask server as a daemon thread. The trading logic remained untouched.

Step 2: The Vanilla JS Frontend

I didn't want to over-engineer this with React or Vue. A single index.html file using Vanilla JS and Chart.js for the PnL curve was perfect.

It fetches data asynchronously every 15 seconds. The dashboard displays active parameters, a live PnL chart, currently open positions, a recent trade ledger, and a historical comparison of bot versions (e.g., v8.00 vs v8.01 vs v8.02).

Challenges & Troubleshooting

1. The Flask Threading Bottleneck
Initially, the dashboard kept hanging. The browser was trying to fetch 6 API endpoints simultaneously, but the default Flask development server runs on a single thread. Requests were timing out.
Fix: Simply setting threaded=True in the app.run() parameters solved the concurrency issue.

2. Legacy CSV Ghost Data
My total PnL suddenly showed +$3,700 USDT (which I definitely didn't make). The API was reading old v7.x CSV files sitting in the logs/ directory. Because the column structures had changed between versions, the parser was reading random timestamp strings as PnL floats.
Fix: Added a strict date filter and outlier rejection logic to ignore corrupted or legacy data rows.

3. The AWS + Windows Double Firewall
I opened port 8765 (API) and 3000 (HTML) in my AWS Security Group, restricted to my IP. But I still couldn't connect. I forgot that I was running a Windows EC2 instance, which has its own internal firewall.
Fix: Had to add an inbound rule via the command line:
netsh advfirewall firewall add rule name="Dashboard" dir=in action=allow protocol=TCP localport=8765

Conclusion

Building this dashboard was a game-changer. Staring at raw numbers in a terminal is one thing, but seeing a visual PnL curve and a comparative table of version win rates immediately highlights structural flaws in your strategy.

If you are building an algo-trading bot, spend a weekend building a visual dashboard. Data visualization is the first real step toward strategy optimization.

[x509Lab]Stop losing your cert trees! Adding Save & Load to x509Lab

rocketsquirreldev — Wed, 08 Apr 2026 13:26:39 +0000

If you’ve ever used a web-based visualizer tool, spent 10 minutes carefully arranging nodes, and then accidentally hit Cmd+R (or F5) only to watch everything vanish... you know the pain.

A few weeks ago, I launched [x509Lab]

(https://x509lab.vercel.app), a browser-based GUI tool to visually build and verify X.509 certificate chains (Root CA → Intermediate → Leaf). While users loved the drag-and-drop canvas and the auto-generated openssl CLI commands, there was a glaring issue: There was no way to save your work.

If you closed the tab, your beautifully constructed PKI tree was gone forever.

Today, I’m excited to announce that Save and Load functionality is finally live in v1.2.0!

The Fix: Exporting the Canvas to JSON

I wanted a solution that didn't require a backend database or user accounts. x509Lab is designed to be a quick, stateless, client-side utility.

So, I implemented a feature that serializes your entire canvas state into a .json file that you can download and keep locally.

How it works:

Build your certificate hierarchy on the canvas.
Click the [💾 Save] button in the top menu (or use the developer-approved Ctrl+S / Cmd+S keyboard shortcut).

A file named x509lab-chain-[date].json is instantly downloaded to your machine.

Next time you visit, just click [📂 Load], select your file, and your exact tree is restored—edges, nodes, and all!

🛡️ What about Security? (Important Note)

Since x509Lab deals with sensitive security assets (certificates and private keys), I had to be very careful about what gets saved to this JSON file.

What IS saved:

Node positions (x, y coordinates) and custom names.
Node types (Root CA, Intermediate, Leaf).
The connection structure (Edges).
The uploaded Public Certificates (PEM format).

What is NOT saved:

🚫 Private Keys. For security reasons, if you uploaded or generated a Private Key inside the app, it is deliberately stripped out of the save file. Even if someone intercepts your .json backup, your private keys remain safe because they were never exported.

Catching up: Recent Updates

I've been quietly pushing a few other quality-of-life improvements based on your feedback:

v1.2.0: Save/Load chain feature (New!)
v1.1.3: Fixed an issue with OpenSSL CLI copy (removed # comments from the clipboard), and added a Keyboard Shortcuts help menu.
v1.1.1: Fixed long certificate names getting truncated in the UI, and added visual feedback to Copy buttons.
v1.1.0: GUI-to-CLI auto-generation (My favorite feature so far).

Try it out!

If you deal with mTLS, internal CA setups, or just want to visualize how SSL certificates chain together, give it a spin. It's completely free and runs locally in your browser.

🔗 Link: https://x509lab.vercel.app

Let me know if you run into any bugs or have feature requests in the comments below. Happy securing! 🚀

[DeskFlow]"How My First User Request Uncovered a Hilarious Structural Bug"

rocketsquirreldev — Mon, 06 Apr 2026 12:31:17 +0000

I recently launched DeskFlow, a visual desk setup simulator. Just a few days in, I received my very first user request to add a new piece of equipment!

The user requested the Kuycon P27D 4K 27" 144Hz monitor. They even took the time to manually configure the ports in the app before submitting (3 USB-C, 1 HDMI, 1 DP). It was an incredibly proud moment for me as a solo dev.

Verifying the Specs

Before pushing it to production, I checked the official Kuycon website to verify the ports. The user did a great job, but there were some slight differences compared to the official specs:

USB-C: User put 3 -> Actually 2 (one 100W PD, one standard)
HDMI: User put 1 -> Actually 2 (HDMI 2.1)
DP: User put 1 -> Actually 1 (Spot on!)
Missing: AC power and a 3.5mm audio jack.

I corrected the data based on the official specs and inserted it directly into my Supabase database.

The Mystery of the Missing Monitor

I ran the SQL, saw the row in Supabase, and confidently hard-refreshed my app (Cmd+Shift+R).

But the monitor wasn't showing up in the "Monitors" tab.

At first, I blamed caching. I refreshed again and again, but the Kuycon P27D was nowhere to be found.

The Root Cause: Hardcoded Guesswork

I dug into the code and found the culprit: the equipmentCategory() function. This function decides which tab an item belongs in.

To my horror, it was completely ignoring the category column in my Supabase DB. Instead, it was doing this:

String equipmentCategory(Equipment e) {
  final n = e.name.toLowerCase();
  if (n.contains('monitor') || n.contains('display') || n.contains('odyssey')) {
    return 'Monitors';
  }
  // ...
}

My app was literally guessing the category by reading the product's name! Previous items happened to have words like "Monitor", "Display", or "Odyssey" in their names, so they accidentally worked fine.

But "Kuycon P27D" didn't trigger any of those keywords, so the app unceremoniously dumped it into the "Others" tab.

Worse yet, I realized my Equipment data model didn't even have a category field. The app wasn't even attempting to fetch it from the database.

The Fix

I fixed two things immediately:

Added the category field to the model so it actually reads from the DB.

class Equipment {
  final String? category;  // Finally here!
  // ...
}

factory Equipment.fromJson(Map<String, dynamic> json) {
  return Equipment(
    category: json['category'] as String?, 
    // ...
  );
}

Updated the logic to prioritize the database value, using a mapping table to convert DB values to UI tab names. The old name-guessing logic is now just a fallback.

const _dbCategoryMap = {
  'monitor': 'Monitors',
  'laptop':  'Laptops',
  // ...
};

String equipmentCategory(Equipment e) {
  if (e.category != null && e.category!.isNotEmpty) {
    return _dbCategoryMap[e.category!.toLowerCase()] ?? 'Others';
  }
  // Fallback to name guessing
  final n = e.name.toLowerCase();
  // ...
}

Lesson Learned

If it weren't for this specific user requesting a monitor without the word "monitor" in its name, this bug could have stayed hidden for months.

Thanks to my very first user, a core structural flaw was caught and fixed. DeskFlow v1.1.1 is now live, and equipment sorting is finally deterministic!

Huge shoutout to whoever requested the Kuycon P27D 🙏

Plz try! and give me your feedback!
--> https://deskflow-gold.vercel.app/

[x509Lab]Stop Googling openssl commands: Auto-generate CLI codes

rocketsquirreldev — Sat, 04 Apr 2026 13:21:03 +0000

If you've ever had to manually set up a complete X.509 certificate chain (Root CA → Intermediate CA → Leaf) for your server, you know the pain. Staring at a black terminal, trying to remember the exact syntax for openssl, and figuring out the correct order to bundle them is frustrating.

I recently built x509Lab, a fully browser-based GUI tool to visualize and verify certificate chains. While visualizing is great, I realized users still had to manually type commands in their terminal to actually generate those certificates.

So, I added a new feature: GUI to CLI auto-generation.

1. Build your tree visually

First, you drag and drop nodes on the canvas to build your desired certificate hierarchy. Once your structure is ready, simply click the </> (Code) button on the left sidebar.

2. Copy the generated `openssl` commands

x509Lab analyzes your visual tree and automatically generates the exact openssl CLI commands needed to recreate that setup on your actual server.

The commands are strictly ordered for each node:

Key Generation: (openssl genrsa or openssl ecparam)
Certificate Signing: (openssl req -x509 or openssl x509 -req using the parent's key)
Chain Bundling: (cat ... > chain.pem)
Verification: (openssl verify)

The best part? It automatically reflects the cryptographic algorithms you selected in the GUI. Whether you chose RSA-2048, RSA-4096, ECDSA P-256, or ECDSA P-384, the parameters are instantly updated in the command block.

3. Paste directly into your terminal

Every section has a convenient Copy button. Just click, paste it directly into your terminal, and watch your certificates generate without a single typo.

Try it out!

If you deal with SSL/TLS certificates, mTLS, or internal PKI setups, I hope this tool saves you from hours of terminal headaches. It's 100% free, requires no login, and all parsing happens locally in your browser.

🔗 Link: https://x509lab.vercel.app

Let me know what you think in the comments, or if there are any specific openssl flags you'd like to see added in the next update!

[DeskFlow]Curing "Blank Canvas Syndrome" in my Flutter Web app 🗺️

rocketsquirreldev — Thu, 02 Apr 2026 13:24:54 +0000

Curing "Blank Canvas Syndrome" in my Flutter Web app 🗺️

Hi DEV community! 👋

I've been building DeskFlow, a visual desk setup planner using Flutter Web. As the app's core features started coming together, I realized I had created a major UX risk.

When a new user opens a diagramming tool for the first time, what do they see?

A giant, empty grid.

🛑 The Problem: The 5-Second Window

If you drop a user into a blank workspace without a map, they will bounce. I have maybe 5 seconds to show them the value of the app before they close the tab.

The core loop of DeskFlow is simple, but it wasn't obvious at first glance.

I needed a way to guide users to that "Aha!" moment instantly, without a boring, text-heavy manual.

💡 The Solution: A Focused Onboarding Flow

I just shipped a lightweight tutorial overlay. It darkens the background and highlights the specific UI components you need to interact with to get started. Here's a quick video of the full experience:

Instead of forcing users to read a guide, I broke the UI down into three quick, visual steps. Here’s a closer look at the onboarding journey:

🛠 Step 1: Getting your Gear

First, I need to show users where to find their equipment. The onboarding flow highlights the Equipment Library (the left panel) with a clear instruction to drag a device onto the canvas to begin. It's the simplest possible starting point.

🔌 Step 2: Connecting the Dots

Once a device is placed, the core utility of DeskFlow is port compatibility. The next step guides the user to click on port chips to draw connections between devices. This is where the app automatically checks physical and bandwidth compatibility (like whether a hub actually supports a specific monitor's bandwidth).

🛒 Step 3: Reaping the Rewards (The Shopping List)

The ultimate "Aha!" moment is the output: the automatically generated Shopping List. The tutorial directs the user to the right panel, showing exactly which cables and adapters are required for their visual setup, including real-time prices. This closes the loop from planning to execution.

Mission Complete

After these three quick steps, the tutorial overlay disappears, leaving the user with a dismissible "You are good to go!" message and a fully unlocked canvas, ready for them to plan their dream setup.

🚀 Feedback Welcome!

Adding this quick onboarding flow makes me feel much more confident about how new users will experience the app.

I'd love to hear your thoughts:

Does the visual guiding feel intuitive?
Is it too short, or just right?
How do you handle "blank canvas syndrome" in your own apps?

Try the live app here (no login required): https://deskflow-gold.vercel.app

Cheers,
RocketSquirrel

[DeskFlow]Solving the "Desk Setup Math" Nightmare: From Visual Planner to Instant Checkout 🛒🔌

rocketsquirreldev — Wed, 01 Apr 2026 13:20:06 +0000

Solving the "Desk Setup Math": Adding contextual monetization to my Flutter Web app 🔌

A few weeks ago, I shared DeskFlow here — a visual desk setup planner I built with Flutter Web. The response was awesome, and it validated that I wasn't the only one who hated figuring out if a specific dock could daisy-chain two 4K monitors.

If you missed it, here's the previous post:
I built a desk setup cable planner with Flutter Web — here's what I learned

The app did its core job well: drag equipment onto the canvas, connect the ports, validate the physical connections, and auto-generate a "Shopping List".

But as I started using it for my own actual desk upgrade, I realized I left a massive UX gap.

🛑 The UX Flaw: The "Setup Math" Nightmare

Generating a list that says Requires: 2x DP Cables, 1x Thunderbolt 4 Cable is helpful, but it doesn't close the loop. Whenever you upgrade a workspace, you have to do the mental "Setup Math":

🤔 "Okay, I have one DP cable in my drawer. I need one more."
📦 "Wait, does this new USB-C hub come with a host cable, or do I need to buy one?"
⚠️ "If I search 'Thunderbolt 4 cable' on Amazon, half of them are cheap knockoffs that only support 20Gbps. Which one actually works?"

Keeping track of what you own, what you need to buy, and finding the exact product that matches the required specs was still a massive headache.

💡 The Solution: From Diagram to Cart

I just pushed a new update to fix this. Now, the auto-generated shopping list doesn't just give you generic cable names—it provides a direct 'Buy' button.

These buttons link directly to verified, high-quality cables (like Cable Matters or Belkin) that perfectly match your setup's bandwidth and power requirements.

You can plan your setup visually, check your physical drawer for what you already own, and instantly buy the missing, compatible pieces with one click. No more guessing.

💸 Transparent Monetization (The Elephant in the Room)

I want to be 100% transparent with the DEV community: These are Amazon Affiliate links. As an indie hacker, figuring out how to monetize a free, purely client-side SPA (Single Page Application) is tough. I absolutely hate plastering banner ads over a clean UI, and putting core features behind a paywall ruins the utility.

Placing affiliate links on the exact missing pieces the user already needs to buy felt like the ultimate win-win:

For the User: Saves 20 minutes of searching Amazon and prevents buying the wrong, incompatible cable. Costs them nothing extra.
For Me: Generates a small commission to help keep the Vercel/Supabase backend running.

🛠 Under the Hood

Technically, it was a very simple addition. In my Supabase DB, I mapped my existing cable_type to a new affiliate_url column. The Flutter UI simply binds the URL to the 'Buy' button if it exists.


dart
// Fetching the verified cable link from Supabase
final cableData = await supabase
    .from('cables')
    .select('name, price, affiliate_url')
    .eq('type', _normalizeCableType(portType))
    .single();

// Rendering the button
if (cableData['affiliate_url'] != null) ...[
  ElevatedButton(
    onPressed: () => launchUrlString(cableData['affiliate_url']),
    child: Text('Buy on Amazon'),
  )
]

[DeskFlow]I built a desk setup cable planner with Flutter Web — here's what I learned

rocketsquirreldev — Mon, 30 Mar 2026 12:44:02 +0000

I hate planning desk setups.

Every time I buy a new monitor or dock, I spend 20 minutes Googling "does USB-C carry DisplayPort signal" or "can I daisy-chain these two monitors." So I built a tool to do it for me.

DeskFlow — a browser-based diagram tool where you drag equipment onto a canvas, click ports to connect them, and instantly see whether the cable is physically possible + what to buy.

What it does

Drag equipment from a library onto a canvas
Click two ports to connect them — compatibility is checked automatically
Incompatible connections are rejected (e.g. HDMI out → DP in via passive adapter is blocked, two bidirectional power ports can't connect to each other)
Shopping list panel auto-generates with cable names and prices from a DB

Stack

Flutter Web — single codebase deployed as a web app without learning a JS framework
Supabase — equipment DB (33 devices, 11 cable types). anon key only, all reads. No auth needed.
Vercel — static hosting with a vercel.json rewrite rule for SPA routing

The interesting problems

1. Gesture arena conflicts in Flutter Web

The canvas uses a GestureDetector with HitTestBehavior.opaque for panning. Port chips sit on top of the canvas as overlaid widgets.

Problem: tapping a port chip would get stolen by the canvas gesture detector before the port's tap handler fired.

Fix: replaced GestureDetector with raw Listener (onPointerDown/Move/Up). Listeners don't participate in the gesture arena — they always fire.

// Before: lost to gesture arena
GestureDetector(
  onPanUpdate: (d) => _handleResize(d.delta),
  child: divider,
)

// After: always fires
Listener(
  onPointerMove: (e) => _handleResize(e.delta),
  child: divider,
)

2. Port compatibility model

Ports have a type (hdmi, dp, usbC, thunderbolt4, usbA, power, ethernet, sdcard) and a direction (input, output, bidirectional).

TB4 and USB-C share the same physical connector → treated as compatible
USB-C ↔ HDMI/DP/USB-A → allowed (adapters exist)
DP(output) → HDMI(input) → allowed (passive adapter)
HDMI(output) → DP(input) → blocked (needs active converter)
Two bidirectional power ports → blocked (two chargers can't charge each other)
SD card ↔ SD card only → no cross-type adapters

TB4 ports fall back to usbC when looking up the cable catalog:

static String _normalizeCableType(String type) =>
    type == 'thunderbolt4' ? 'usbC' : type;

3. SPA routing on Vercel

Flutter Web produces a single index.html. Direct URL access returns 404 without this in vercel.json:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

What's next

Setup templates (home office, streaming, video editing)
Mobile/touch support
Shopping cart total / budget summary panel

Happy to answer questions about any of the Flutter Web specifics — it's a surprisingly capable target that doesn't get enough coverage.

[x509Lab]I built a browser-based X.509 certificate chain builder (no dependencies, pure Web Crypto API)

rocketsquirreldev — Sun, 29 Mar 2026 12:52:02 +0000

The Problem

Every time I needed to debug a certificate chain issue, I ended up juggling
openssl verify, openssl x509 -text, and manually cross-referencing DNs.
It works, but visualizing how a Root CA → Intermediate CA → Leaf chain fits
together is painful without a GUI.

Existing online tools either require uploading your cert to a server (not
great for sensitive certs) or are too simplistic to handle real chain scenarios.

So I built x509Lab — a browser-based X.509 certificate chain builder and
verifier that runs 100% client-side.

👉 Live demo: https://x509lab.vercel.app

What it does

Visual Chain Builder

Drag-and-drop tree UI to compose Root CA → Intermediate CA → Leaf chains.
You can also model Cross-Certificate relationships. Each node is a certificate
you either upload or generate on the spot.

Certificate Upload & Parsing

Upload PEM, DER, CRT, or CER files. The tool parses them and slots them into
the tree. Subject/Issuer DN, validity period, key usage, and public key
algorithm are all extracted and displayed.

8-Point Chain Verification

Click "Verify" and the tool checks:

Cryptographic signature validity (issuer signs subject)
Issuer DN ↔ Subject DN match
Validity period (not-before / not-after)
CA flag (basicConstraints: CA:TRUE)
Key Usage (keyCertSign)
Path length constraints
Algorithm consistency
Self-signed root detection

Test Certificate Generation

No certs on hand? Generate a full test chain in the browser:

RSA-2048 / RSA-4096
ECDSA P-256 / ECDSA P-384

Keys are generated with crypto.subtle.generateKey and never leave your browser.

Technical Highlights

Zero Dependencies

No node-forge, no jsrsasign, no OpenSSL.wasm — just the browser's native
Web Crypto API (crypto.subtle).

Custom ASN.1 / DER Parser

The hardest part. I wrote a custom ASN.1/DER encoder and parser from scratch.
Getting DER encoding right for certificate generation was tricky — especially
the TBSCertificate structure, integer sign-byte handling, and OID encoding.

If you've done this before, you know the pain of off-by-one errors in length
octets. Happy to share notes in the comments.

Single HTML File

The entire app is a single index.html. No build step, no Node.js, no
bundler. Just open the file and it works — or visit the Vercel deployment.

Use Cases

Learning PKI concepts — visualize how certificate chains work
Debugging TLS issues — verify chain structure before deploying
Security training — build intentionally broken chains to demonstrate common misconfigurations
Generating test certs — quick self-signed chains for local dev without touching openssl

What's Next

PKCS#12 (.p12/.pfx) export/import
CSR generation and parsing
Ed25519 algorithm support
openssl command auto-generation (output equivalent CLI commands)
Mobile responsive layout

Try It

https://x509lab.vercel.app

The source will be open-sourced soon. If you have feedback, questions about

the DER implementation, or feature requests — drop them in the comments!

DEV Community: rocketsquirreldev

[DeskFlow]Scaling Up: Making My React Canvas App 6x Larger (v1.1.6)

1. A 5000x5000px Workspace

2. Graph Paper Grid

3. Dedicated Pan Mode (Like Figma)

4. UI Boundaries

[CryptoTradingBot] My Crypto Algo-Bot Hit a 41% Win Rate, But Still Lost Money. Here is Why.

Overall Performance (April 5 - April 16)

Finding the Culprit: Asset Breakdown

Digging Deeper: The Volume Climax Trap

The Plan for v8.04

[DeskFlow]Improving UX in my Side Project: Adding Multi-select & Group Move to DeskFlow

What's New?

Why this matters

[x509Lab]Generating Ed25519 Certificate Chains in the Browser (No Server Required)

Visualizing and Generating Ed25519 Chains

The Technical Struggle: Web Crypto API & ASN.1 DER

Auto-generating OpenSSL Commands

Building a Real-Time Dashboard for My Python Crypto Bot (Without Breaking It)

The Architecture: Decoupled by Design

Step 1: The Lightweight Flask API

Step 2: The Vanilla JS Frontend

Challenges & Troubleshooting

Conclusion

[x509Lab]Stop losing your cert trees! Adding Save & Load to x509Lab

The Fix: Exporting the Canvas to JSON

How it works:

🛡️ What about Security? (Important Note)

Catching up: Recent Updates

Try it out!

[DeskFlow]"How My First User Request Uncovered a Hilarious Structural Bug"

Verifying the Specs

The Mystery of the Missing Monitor

The Root Cause: Hardcoded Guesswork

The Fix

Lesson Learned

[x509Lab]Stop Googling openssl commands: Auto-generate CLI codes

1. Build your tree visually

2. Copy the generated openssl commands

3. Paste directly into your terminal

Try it out!

[DeskFlow]Curing "Blank Canvas Syndrome" in my Flutter Web app 🗺️

Curing "Blank Canvas Syndrome" in my Flutter Web app 🗺️

🛑 The Problem: The 5-Second Window

💡 The Solution: A Focused Onboarding Flow

🛠 Step 1: Getting your Gear

🔌 Step 2: Connecting the Dots

🛒 Step 3: Reaping the Rewards (The Shopping List)

Mission Complete

🚀 Feedback Welcome!

[DeskFlow]Solving the "Desk Setup Math" Nightmare: From Visual Planner to Instant Checkout 🛒🔌

Solving the "Desk Setup Math": Adding contextual monetization to my Flutter Web app 🔌

🛑 The UX Flaw: The "Setup Math" Nightmare

💡 The Solution: From Diagram to Cart

💸 Transparent Monetization (The Elephant in the Room)

🛠 Under the Hood

[DeskFlow]I built a desk setup cable planner with Flutter Web — here's what I learned

What it does

Stack

The interesting problems

1. Gesture arena conflicts in Flutter Web

2. Port compatibility model

3. SPA routing on Vercel

What's next

[x509Lab]I built a browser-based X.509 certificate chain builder (no dependencies, pure Web Crypto API)

The Problem

What it does

Visual Chain Builder

Certificate Upload & Parsing

8-Point Chain Verification

Test Certificate Generation

Technical Highlights

Zero Dependencies

Custom ASN.1 / DER Parser

Single HTML File

Use Cases

What's Next

Try It

2. Copy the generated `openssl` commands