DevIdiot!
Building a Personal Engineering Portfolio that Actually Advances Your Career
Building a Personal Engineering Portfolio that Actually Advances Your Career Building a Personal Engineering Portfolio that Actually Advances Your CareerA strong portfolio can be the difference between a good interview and a great one. This tutorial walks software engineers through designing, building, and maintaining a practical portfolio that demonstrates impact, growth, and leadership-without resorting to vanity metrics or generic snippets. 1) Define what you’re provingBefore
Building a Real-Time Collaborative UI with CRDTs in the Frontend
Building a Real-Time Collaborative UI with CRDTs in the Frontend Building a Real-Time Collaborative UI with CRDTs in the FrontendCreating a frontend that truly supports simultaneous collaboration-where multiple users can edit the same content at the same time and see each other’s changes in near real-time-has long been a challenging problem. This guide walks you through building a real-time collaborative UI from the ground up using Conflict-free Replicated Data Types (CRDTs). You’ll g
I built a JavaScript library that adds hover sounds to any HTML element.
Why it's usefulInstead of just playing audio, I built it to solve real-world edge cases:data-delay: Prevents accidental sound triggers when users just move the mouse quickly across the screen..refresh(): A built-in method to automatically bind events to new elements injected dynamically via AJAX or APIs.Smart Tab-Switching: It automatically pauses all active audio if the user changes browser tabs, saving battery and performance.Global Controls: It includes .playAll(), .pauseAll(), and .stopAll()
A Post-Quantum Future for Let's Encrypt
<a href="https://news.ycombinator.com/item?id=48385114">Comments</a>
DoNotNotify: Android App Filters Promotional Notifications
Your phone buzzes. It's your banking app. Again. Not about suspicious activity. A promotional offer. The third one this week.You can't disable the app's notifications entirely. You actually need alerts for important transactions. But you're drowning in marketing noise disguised as critical updates.Sound familiar?This exact frustration drove the creation of DoNotNotify, an Android app that surfaced on Hacker News in early 2026. Within weeks, it became something more interesting than just another
How does VuReact compile Vue 3's CSS Modules to React?
VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.In this article, we will look at how Vue SFC <style module> blocks are compiled into React code. Before We StartTo keep the examples easy to read, this article follows two simple conventions:All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.The discussion assumes you are already familiar with CSS Modules in Vue 3.
How we compress video in the browser — and why nothing gets uploaded
Every "free online video compressor" works the same way: you upload your file, wait in a queue while their server re-encodes it, then download a watermarked result. For a 200 MB clip on a slow connection, you've uploaded and downloaded 200 MB just to make it smaller — and handed your footage to a stranger's server.VidCompress takes the opposite approach: for files under 300 MB, the entire compression happens in your browser. The video never leaves your device. The core idea: WebCodecsModern
A free Text-to-Speech API with voice effects (whisper, laugh, pause)
Most "free" text-to-speech APIs share two problems: you hit a monthly characterwall fast, and the output is flat — no control over how a line is spoken. Iwanted something I could call from a side project without a billing surprise,and that could actually whisper, laugh, or pause where I wanted it to. So Ishipped one and made it public.This is a quick walkthrough of the free text-to-speech APIon induwara.lk — what it does, and how to call it in a couple of lines. What you get5 AI voices, 28
Building session replay that masks input data by default
Session replay sounds scary because the naive version records everything a user types, including passwords and personal data. We built ours to mask sensitive input by default, so the safe path is the default path. Here is the approach. What session replay actually isIt is not a video. Recording video would be huge and would capture everything. Instead you record the DOM and its mutations, then replay them in an iframe later. Much smaller, and crucially, you control what gets captured.
How to Merge PDF Files in the Browser (No Server Required)
You have three PDFs: a contract, an appendix, and a signature page. You need one file.The obvious solution is an online PDF merger. But here's the catch — most of them upload your files to a server first. That contract with confidential terms? Now it's on someone else's cloud.In this post, I'll show you how to merge PDFs entirely in the browser using JavaScript, with a stack I've been running in production for months. Why Browser-Side Merging MattersThere are two architectures for online PD
I Built an AI Web App That Explains Anything in 4 Different Styles
As a recent Information Technology graduate, I wanted to build a project that combined web development, AI, and user experience. The result was ELI5 AI, an AI explanation tool that can explain code snippets, error messages, articles, and technical concepts in multiple styles depending on the user's level of understanding.Many AI tools provide a single explanation. However, beginners and experienced developers often need different levels of detail. I wanted to create a tool that could adapt its e
How to Optimize a Real-Time Chat Application: A Deep Dive into Our Production Codebase
Building a real-time chat application is a deceptively challenging engineering task. It combines the complexities of persistent socket networking, heavy client-side cryptography, concurrent asset downloads, and frequent UI re-renders. Without careful engineering, your chat app will quickly become sluggish, drain users’ battery, and overwhelm your database — and once performance debt piles up, it’s incredibly expensive to refactor.In this post, we’ll walk through four critical optimization techni
Understanding Components and Props
Hello again. If you are reading this, you are interested in React. This is the second in the React Introductory series. Check out Introduction to React if you haven't. Let's continue ... What are ComponentsThese are, ideally, the smallest building blocks of a page or user interface. They include buttons, input boxes, radio buttons and check boxes etc.These are what make up a page and are used for data input and user interactions.Components make use and/or take the syntax of html elements. T
⭐ One line of code that fixed my jumping sticky header
You've built a sticky header. It works. You ship it.Then someone opens your site on a slow connection, scrolls down, and the whole page jolts — content jumps up by a few pixels right as the header sticks. It looks broken. And the worst part? You can't reproduce it locally, because on your machine the fonts are already cached.I hit this exact bug in a navigation plugin I maintain. Here's what's actually happening, and the fix that finally killed it. The setupA sticky header that's position:
How does VuReact handle Vue 3's top-level TypeScript declarations in React?
VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.In this article, we will look at how VuReact handles top-level TypeScript declarations when compiling Vue 3 code to React. Before We StartTo keep the examples easy to read, this article follows two simple conventions:All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.The discussion assumes you are already familiar with T
I built a ceiling projection mapping of the planes flying over my house
<a href="https://news.ycombinator.com/item?id=48383823">Comments</a>
Designing an Observability-Driven Data Platform: From Telemetry to Actionable Insights
Designing an Observability-Driven Data Platform: From Telemetry to Actionable Insights Designing an Observability-Driven Data Platform: From Telemetry to Actionable InsightsObservability is more than pretty dashboards; it’s a discipline that ties data collection, storage, processing, and alerting to concrete product outcomes. This guide walks through designing an end-to-end, scalable data platform focused on observability. You’ll learn how to design data pipelines that not only collec
How To Make Your Design System AI-Ready
AI-generated prototypes often don't deliver consistently decent results because of tiny inconsistencies scattered all across a design system. I's decisions made but not documented, hard-coded values never cleaned up, or relying too much on AI making sense of mock-ups or design flows on its own.Yesterday I stumbled upon a useful practical guide by Hardik Pandya from Atlassian — on how to reduce drifts, minimize mistakes, maintain context, and improve the quality of AI-generated prototypes. Let’s
Meta workers can opt out of being tracked at work up to 30 min
<a href="https://news.ycombinator.com/item?id=48383220">Comments</a>
Every Byte Matters
<a href="https://news.ycombinator.com/item?id=48382382">Comments</a>
