标签：#dev

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built The average student opens their notes 3 days before the exam. The above average student opens them the night before. Either way, they both end up on YouTube at 3am watching a guy explain thermodynamics with a whiteboard and too much energy. I built something better. I built Forge AI — a collaborative AI study platform that turns your lecture notes, PDFs, and YouTube links into a full study session with an AI tutor that actually talks back. Here is what it does: 📄 Upload your notes or paste a YouTube link — Forge AI reads everything and builds you a prioritised study plan in seconds. 🧠 Deep Dive into any topic — get full AI generated study notes, a mnemonic memory trick, and a built-in quiz. 🎙️ Talk to your AI tutor live — it listens, speaks back, and you can see the transcript building in real time as it talks. 👥 Create a Forge Room — invite your study group, ask the AI questions together, battle each other in a live quiz, and everyone sees everything at the same time. It started as CrammAI . A solo study tool I built under exam pressure. Well, it could generate a study plan from your uploaded files and quiz you on topics. That was it. No voice. No collaboration. No rooms. No Finesse. Just you, alone, cramming at 2am. Five months later I came back to finish it. The result is Forge AI. Demo Live app GitHub Here is what Forge AI can do: 1. Upload your materials and pick your mode Three modes based on how much time you have: 🧘 Cruise Control — 1+ week until exam 🚀 Turbo Mode — 2 days left ⚡ Zoom Mode — due tonight 2. Paste a YouTube link — it transcribes automatically ts export const apiFetchYoutubeTranscript = async ( url : string ): Promise < string > => { const videoId = extractYoutubeId ( url ); const response = await fetch ( `/api/transcript?videoId= ${ videoId } ` ); const data = await response . json (); return data . transcript ; }; No manual transcription. Paste the link, Forge AI pull

A few months back I got frustrated. I needed to calculate something — nothing crazy, just a loan payment — and every site I landed on either wanted me to sign up, showed ads on every input, or was in English only (not helpful when sharing with family abroad). So I built Calculora . It's a free calculator site. 150+ tools, 13 languages, zero data collection. Everything runs in your browser — nothing gets sent anywhere. Why 13 languages? Because most people on the internet don't speak English as a first language. I wanted it to actually work for them — not just have a translated homepage, but real localized URLs, right-to-left layout for Arabic, the whole thing. Getting that right in Next.js took more time than I expected. Each tool has a different slug per language, so the routing has to map hundreds of combinations correctly. Totally worth it though. The math rendering For tools like the equation solver and statistics calculator, I wanted the formulas to look like real math — not just text. I used KaTeX for this. It's fast, lightweight, and renders LaTeX properly in the browser. The step-by-step solutions actually show the working — discriminant, roots, the full process — rendered cleanly. Some tools I'm proud of Equation Solver — linear and quadratic, with full steps shown Statistics Calculator — mean, median, mode, IQR, std dev, exportable FIRE Calculator — retirement planning done simply Debt Snowball/Avalanche — side-by-side payoff comparison What's next More tools, better mobile experience, and filling in gaps across the language versions. If you try it, I'd genuinely love feedback — especially on anything that feels off or missing. calculora.net

Launch week for a side project means the same chore every time: export the logo, open Figma, create artboards for LinkedIn (400×400 and 4200×700 cover), Google Business Profile (1200×1200 JPEG with a minimum file size or Google rejects it), YouTube (2560×1440 with a safe zone nobody remembers), Open Graph (1200×630), Instagram (circle crop), Discord, TikTok… Design tools are great at making brand assets. They are slow at batch-exporting exact platform specs — especially when encoding rules differ (PNG vs JPEG, max KB, min KB for GBP, center-right vs YouTube-safe positioning). So we built a small free tool: one SVG or PNG in → 21 platform files out. What it actually does Upload a logo. Pick categories (or take everything): 8 profile icons — mark-only, padded for circular crops (LinkedIn, X, GBP, Facebook, Instagram, YouTube, TikTok, Discord) 2 profile lockups — logo + wordmark for LinkedIn company and GBP 7 banners/covers — including LinkedIn 4200×700, YouTube safe-area channel art, Facebook cover under 100 KB target, Open Graph 1200×630 4 post sizes — Instagram square/portrait/story, Pinterest pin Outputs are PNG or JPEG per platform rules. White background. ZIP download. Why not Canva? Canva is excellent for templates and marketing creatives. For “I already have a logo, give me every official size,” you duplicate frames and export manually — often behind a paid tier for brand kits and bulk workflows. This tool does one job, free, no account: 👉 https://varnox.io/tools Longer write-up with platform gotchas (GBP min JPEG size, YouTube safe area, etc.): 👉 https://varnox.io/blog/free-social-media-logo-size-generator Privacy (because it’s your logo) SVG uploads sanitized before render Generated files expire after 30 minutes — nothing permanent stored No signup We use the same catalog internally when onboarding clients onto GBP + LinkedIn + OG tags. Shipping it publicly was easier than answering “what size is our Facebook cover again?” for the fifth time. Stack note (for

Three years ago we had our first real outage. Six hours of downtime. Thousands of angry users. Multiple executives on the call. Here's what we did right, what we did wrong, and what we'd do differently. What we did right 1. Communicated immediately. The moment we knew we had a problem, we updated the status page and emailed our biggest customers personally. Not when we had answers. When we had a question. 2. Had a single incident commander. One person making calls. Not a committee. When the CEO tried to direct technical work, the IC politely rerouted and told her where her help was actually needed (talking to customers). 3. Took care of our people. During hour 4, I ordered food. During hour 5, I forced the primary engineer off the call for 20 minutes to walk outside. Long incidents destroy people. You have to feed them and force them to rest. 4. Wrote it down as we went. We had a shared doc with a live timeline. When the post-mortem came, we had every decision captured. What we did wrong 1. Tried to fix the root cause during the incident. For the first 2 hours, we were digging into why the database was struggling. We should have been mitigating (rolling back) first. 2. Let too many people 'help.' By hour 3, we had 12 engineers in the call. Half of them were useless. The IC should have kicked people out sooner. 3. Gave optimistic estimates. 'We'll be back in 30 minutes.' We were not back in 30 minutes. That miscommunication was worse than saying 'unknown.' 4. Didn't prepare the executive communication. The CEO had to answer customer questions in real time with no script. We should have drafted talking points for her after hour 1. What we'd do differently Mitigate first, investigate second. Always. Cap the number of active engineers at 4 during an incident. Others go on standby. Default to 'unknown' for estimates. Only give a number when we're sure. Assign someone explicitly to 'executive liaison.' Their job is to keep the C-suite informed without interrupting the tec

We run 10+ web products. For years our SEO tooling was a $100+/month subscription we mostly used for one job: technical audits. The keyword and backlink dashboards sat untouched while the bill renewed every month. At some point the math stopped making sense, so we rebuilt our stack around what we actually use. Here's the honest breakdown — what we kept free, what we replaced, and why. What a technical audit actually needs to check Before picking tools, it helps to know what you're auditing. The technical layer is finite and well-defined: Crawlability — robots.txt, broken internal links, redirect chains Indexability — noindex tags, canonical correctness, soft 404s, orphan pages Sitemaps — only canonical, indexable, 200-status URLs On-page — titles, meta descriptions, one H1, valid structured data International — hreflang reciprocity (if you're multilingual) Performance — Core Web Vitals (LCP, CLS, INP) That's it. None of it requires a keyword database or a backlink index — the two things you're really paying $100+/mo for in the big suites. The free tools that cover most of it Google Search Console is non-negotiable and free. The Pages report is the source of truth for what's indexed and why the rest isn't. PageSpeed Insights (free) gives you real Core Web Vitals. Screaming Frog's free tier crawls up to 500 URLs, which is plenty for small sites. For a long time that was our whole stack: GSC + PageSpeed + free Screaming Frog. If your site is under 500 pages, you may not need anything else. Where it broke down for us The free Screaming Frog cap (500 URLs) is the wall. Several of our sites are bigger, and re-auditing them meant either the paid Screaming Frog licence (annual) or going back to a monthly suite. Both felt wrong for something we run after every deploy. So we built our own crawler for the technical layer — and then, honestly, turned it into a product because other people we talked to had the same problem. It does the whole checklist above across the entire sit

I got fired from my first job, took down a database server with a badly written query, and was...

submitted by /u/fagnerbrack [link] [留言]

I finished building my first portfolio. I want everyone to give their honest opinion on it. No need to hold back. waliimran.vercel.app Thanks you!

A step-by-step, beginner-friendly guide to stripping out Bootstrap and setting up the blazing-fast Tailwind CSS v4 compiler in your .NET Blazor Hybrid or Web app. Tailwind CSS v4 is officially here, and it is a complete game-changer! It scraps the old, bulky JavaScript configuration files ( tailwind.config.js ) and moves your theme settings directly into standard CSS. Plus, its new native compiler is faster than ever. If you are building a .NET Blazor app (whether it's Blazor WebAssembly, Server, or a MAUI Blazor Hybrid app) and want to swap out the default Bootstrap styles for utility-first Tailwind bliss, you can do it all without ever leaving your IDE. Let's get this configured step-by-step using Visual Studio 2022 ! Prerequisites Before we start, make sure you have: Node.js installed on your development machine. A Blazor project opened in Visual Studio 2022 . Step 1: Say Goodbye to Bootstrap in Solution Explorer Blazor templates ship with Bootstrap by default. Let's use Visual Studio's Solution Explorer to clean that out so our styles don't conflict. In the Solution Explorer window, expand your wwwroot folder. Expand the css subfolder. Right-click the bootstrap folder and select Delete . Now, open your main HTML entry file inside wwwroot (this will be index.html for Blazor Hybrid/WASM or App.razor inside the Components folder for Blazor Web). Locate the <head> section and delete the line linking the Bootstrap stylesheet: <link rel= "stylesheet" href= "css/bootstrap/bootstrap.min.css" /> powershell Step 2: Open the Developer PowerShell & Install Tailwind v4 Tailwind v4 splits the design library from the command-line build tool, so we need to install both. We can use Visual Studio's built-in terminal for this. In the top menu of Visual Studio 2022, go to Tools > Command Line > Developer PowerShell . A terminal window will open at the bottom of your IDE, already navigated to your project folder. Paste and run the following commands: i. Initialize a package.json fil

A step-by-step, beginner-friendly guide to stripping out Bootstrap and setting up the blazing-fast Tailwind CSS v4 compiler in your .NET Blazor Hybrid or Web app. Tailwind CSS v4 is officially here, and it is a complete game-changer! It scraps the old, bulky JavaScript configuration files ( tailwind.config.js ) and moves your theme settings directly into standard CSS. Plus, its new native compiler is faster than ever. If you are building a .NET Blazor app (whether it's Blazor WebAssembly, Server, or a MAUI Blazor Hybrid app) and want to swap out the default Bootstrap styles for utility-first Tailwind bliss, you can do it all without ever leaving your IDE. Let's get this configured step-by-step using Visual Studio 2022 ! Prerequisites Before we start, make sure you have: Node.js installed on your development machine. A Blazor project opened in Visual Studio 2022 . Step 1: Say Goodbye to Bootstrap in Solution Explorer Blazor templates ship with Bootstrap by default. Let's use Visual Studio's Solution Explorer to clean that out so our styles don't conflict. In the Solution Explorer window, expand your wwwroot folder. Expand the css subfolder. Right-click the bootstrap folder and select Delete . Now, open your main HTML entry file inside wwwroot (this will be index.html for Blazor Hybrid/WASM or App.razor inside the Components folder for Blazor Web). Locate the <head> section and delete the line linking the Bootstrap stylesheet: <link rel= "stylesheet" href= "css/bootstrap/bootstrap.min.css" /> powershell Step 2: Open the Developer PowerShell & Install Tailwind v4 Tailwind v4 splits the design library from the command-line build tool, so we need to install both. We can use Visual Studio's built-in terminal for this. In the top menu of Visual Studio 2022, go to Tools > Command Line > Developer PowerShell . A terminal window will open at the bottom of your IDE, already navigated to your project folder. Paste and run the following commands: i. Initialize a package.json fil

As I'm observing engineers, I notice that most of them share the same characteristic: unending loads of curiosity. You, software developers, are deeply interested in how things work underneath; you implement, break, troubleshoot, fix, and break again. You create apps that people use everyday and by doing so, you shape the digitalised world we live in today. Now let me share something personal: I am terrified of breaking things. I am often terrified to such an extent that I find it hard to breathe. I am suffering from something called Generalised Anxiety Disorder (GAD), which basically means I am allergic to uncertainty. While most people see trying something new as exciting, for me it's a source of stress. Every unknown step, every unfamiliar process, every situation where I don't know what comes next — it triggers something. My brain immediately goes to the worst-case scenarios. "I can't do this." "I'll do it wrong." "What if something breaks?" These thoughts don't just pop up and disappear — they pile on top of each other until they become paralyzing. But this story isn't about anxiety — it's about how good UX can change a moment from overwhelming to manageable. And how you, as a software developer, can make a real change for people who are struggling. The app that saved my day A few months ago I decided to change my mobile operator. The alternative offer had much better terms that sounded really appealing to me. No long-term contract, competitive prices, support for eSIM for travellers abroad – in short: very flexible. Head held high, I went to the new operator's office to ask them to transfer my number. But the agent quickly wiped the smile off my face. "Yes, this offer is flexible, but you need to do all the operational work yourself in the app. I can only offer you a regular long-term contract," he said. He gave me my new SIM card, and I, with a long face, went to the nearby cafe. The thought that I had to transfer my number myself felt daunting. "What if I do

Every online Fake Data Generator tool I used had the same quiet flaw: whatever you paste gets POSTed to someone's server. For a Fake Data Generator, that paste is often exactly the sensitive thing — a token, a config, an API response. So I built Fake Data Generator to not do that. Generate fake names, emails, UUIDs, addresses — custom columns, CSV/JSON export. 100% browser-side — and it runs entirely in your browser, so there's nothing to send and nothing to breach. You don't have to take my word for it: open DevTools → Network, use the tool, and watch the tab stay empty. One HTML file, View-Source-able. https://faker.platotools.com/ It's part of platotools.com — a set of single-purpose, client-side dev tools. Feedback and edge-case bug reports very welcome.

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built I built TradeWeave — a B2B + B2C fashion marketplace that connects small scale weavers and manufacturers directly to customers and retailers, eliminating middlemen entirely. The project started as a notebook idea at midnight: "What if factory workers and artisans could sell directly, keeping the full margin instead of losing 40% to supply chain bloat?" Demo 🔗 Live Demo — TradeWeave — Try it right now, no installation needed How to use: Hover over any dress card — it flips to reveal sizes Pick a size, adjust quantity, click "Add to cart" Click "Sign up" to see the premium registration flow Click the TradeWeave logo 5 times to unlock the hidden admin dashboard Click "Wholesale" tab to see direct manufacturer listings 💻 Source Code: github.com/Deeraj25/tradeweave The Comeback Story Before: Idea scribbled in a notebook at midnight Zero code written Zero deployment Tucked away under "someday projects" Status: Abandoned After: Full-featured marketplace in production ~550 lines of polished HTML/CSS/JavaScript Deployed live on Netlify + GitHub Pages Anyone can use it instantly Real product with real features Core fixes: Built the entire marketplace from scratch (this was a notebook idea, not existing code) Implemented hover-to-flip cards with CSS 3D transforms (perspective + rotateY) Created responsive product grid with auto-fill layout Built localStorage persistence for cart + admin state What Changed, Fixed, and Added Features added: 5 product categories with 20+ items Hover-flip interaction (no page reload needed) AI Try-On modal with upload UX Wholesale B2B portal with manufacturer data Hidden admin dashboard (5-click unlock) Aurora-style signup with animated hero and steps Real-time analytics dashboard (revenue, top categories, order table) Mobile-responsive design Keyboard + mouse support Polish & optimization: Custom animations (staggered reveals, floats, shimmers) Cormorant Garamond typograp

If you’ve been following my previous posts, you know I’m a big advocate for Trunk-Based Development and shrinking your pull requests until they almost feel too small. In a perfect world, developers merge code directly into the main branch multiple times a day, everything flows smoothly, and production remains rock solid. But let’s be honest. When you actually try to pitch this to a backend team working on a core system, you almost always hit the exact same wall of resistance. Someone in the back of the room will inevitably raise their hand and ask: “That sounds great in theory, but I’m currently refactoring our legacy checkout service. It’s going to take me four days of deep architectural changes. Are you seriously telling me I should merge half-baked, broken code into the main trunk and push it straight to production where real customers are buying our products?” It’s a completely valid objection. If your only tool for hiding uncompleted work is holding onto a massive, long-lived feature branch, then trunk-based development breaks down immediately. You end up with the exact nightmare we talked about earlier: huge code reviews, painful merge conflicts, and code that rots before it ever sees a live environment. To make continuous delivery actually work without causing catastrophic production outages every single afternoon, you need to decouple two concepts that most engineering teams mistakenly treat as the exact same thing: Deployment and Release . Last article in this category is focused on Trunk-Based Development: https://codecraftdiary.com/2026/05/18/trunk-based-development-roadmap/ The Core Concept: Shifting Left by Decoupling In traditional development setups, deploying code and releasing a feature happen simultaneously. You merge your giant feature branch, the CI/CD pipeline runs, the code hits the live servers, and boom—your users immediately see the new functionality. This model is incredibly high-stakes. If something goes wrong, your only options are rollin

This is a submission for the GitHub Finish-Up-A-Thon Challenge What I Built SpendWise AI is a free tool that audits your AI tool spending (Cursor, Copilot, Claude, ChatGPT, Gemini, Windsurf) against verified vendor pricing and tells you exactly where you're overspending and what to do about it. I originally built this as a week-long assignment for a startup. The problem it solves is simple: founders and engineering managers pay for multiple AI tools but have no idea if they're getting ripped off. SpendWise gives them that answer in under a minute, no signup needed. The interesting part is that the core audit engine has zero AI in it. It runs 6 hardcoded rules against verified pricing data, so every recommendation is reproducible and verifiable. AI (Groq's Llama 3) only kicks in to write a friendly summary paragraph on top of the structured results. I made this choice because financial recommendations need to be deterministic. Same input, same output, every time. The stack is Next.js 16, TypeScript, Tailwind + shadcn/ui, Supabase for the database, Groq for AI summaries, Resend for emails, and Vitest for testing. Deployed on Vercel. Live app: spendwise-ai-test.vercel.app Source code: github.com/Karam-999/SpendWise-AI Demo The original audit tool: The comeback (re-audit on pricing change): You can try the Round 1 version live at spendwise-ai-test.vercel.app . Pick a tool like Cursor on Teams plan at $40/mo, run the audit, and see the full savings breakdown. The Round 2 features (pricing change detection, re-audit diff view) are on a separate branch and not merged to main yet, but the demo video above walks through the complete flow. The Comeback Story Where it was: The original version was basically a calculator. You fill in your AI tools, it shows you where you can save money, and that's it. If Cursor changed its pricing the next week, your audit was already stale and you'd never know about it. It worked fine as a one-time thing. It had the form, the audit engine, AI

Most side projects start with a simple frustration. Mine started with a banking app. One of my banks had a feature I really liked. It automatically categorized transactions and showed spending breakdowns in graphs and charts. For the first time, I could easily see how much I spent on restaurants, groceries, transport, subscriptions, and other categories. The problem was that only one of my banks offered this feature. Like many people, I use multiple bank accounts, credit cards, and savings accounts. Two of my other banks provided little more than a long list of transactions. If I wanted a complete picture of my finances, I had to switch between apps and manually piece everything together. As a software engineer, my first instinct was obvious: "Why don't I just build this myself?" That idea eventually became MyVault . The Original Goal The first version of the project was surprisingly simple. I wanted users to: Upload bank statements Extract transaction data Automatically categorize spending View useful charts and reports The goal wasn't budgeting. It wasn't investment tracking. It wasn't accounting. I simply wanted a single place where I could see spending across all of my bank accounts. Once I started building, however, I realized there was a much more interesting opportunity. If all transaction data was already extracted and structured, why not allow users to ask questions about their finances? Instead of searching through transactions manually, users could simply ask: How much did I spend on restaurants last year? What subscriptions am I paying for? Which categories increased the most this month? How much did I spend while traveling? That's when MyVault started evolving from a reporting tool into an AI-powered financial assistant. Building as a Solo Developer One of the biggest challenges wasn't technology. It was building everything alone. When you're working on a side project, you don't just write code. You become responsible for everything: Product decisions B

The Problem If you've ever audited your Windows network traffic during a boot-up sequence, you know the truth: there's a "blind spot." Between the moment your network drivers initialize and your VPN/WireGuard tunnel actually establishes, your traffic is leaking. Many third-party solutions exist, but they are often bloated, use proprietary binaries, or act as black boxes. I wanted something transparent, native, and bulletproof. The Solution: WG-KillSwitch I developed a pure PowerShell-based kill switch architecture. It doesn't rely on third-party libraries—it uses native Windows system components to enforce security. Key Architectural Features: Zero-Trust Firewall Matrix: Hardens the system by blocking all outbound traffic by default, allowing only authenticated tunnel traffic. WMI Persistent Watchdog: Unlike standard scripts that can be killed via Task Manager, this project uses WMI Event Subscriptions. If the watchdog process is terminated, Windows itself immediately respawns it. Resilience: Survives hard reboots, modem resets, and Windows service cycling. Resilience & Leak Testing I've put this through a gauntlet of tests: Forced Reboots: Zero leaks detected during driver load. Process Termination: The WMI engine restores the protection in milliseconds. Dynamic Network Resets: The firewall matrix remains active regardless of adapter status. Let's Collaborate This is open source, transparent, and built for the community. I'm looking for security audits and feedback. Check out the source code, open an issue, or submit a PR: https://github.com/ryderlacin-pixel/Windows-WireGuard-KillSwitch

The original babel-plugin-transform-flow-strip-types hasn't been updated in 9 years and breaks silently in Babel 7 and 8 environments. The fix I published a maintained fork that works as a drop-in replacement: npm install --save-dev babel-plugin-transform-flow-strip-types-maintained Then update your .babelrc: { "plugins": ["transform-flow-strip-types-maintained"] } That's it. No other changes needed. What's fixed Babel 7 and 8 peer dependency conflicts Missing syntax plugin declaration Deprecated visitor patterns allowDeclareFields support Automated migration If you want to update your entire project automatically: npx flow-strip-migrate . This updates your package.json and babel config in one command. More info: https://flowstrip.netlify.app npm: https://www.npmjs.com/package/babel-plugin-transform-flow-strip-types-maintained

This is a submission for the GitHub Finish-Up-A-Thon Challenge. I’ll keep this short since the repo...

Every time I started a side project, I rebuilt the same five things before I wrote a single line of the actual idea: auth, a database, file uploads, a deploy pipeline, and TLS. Different domain, same plumbing. By the third project I was copy-pasting my own docker-compose.yml from a folder two repos over and renaming things until they stopped erroring. So I stopped. I froze that plumbing into one boilerplate — PocketBase + Next.js + Caddy on a single cheap VPS — and now I ship every side project on it. Same shape every time: clone, rename, write the part that's actually new, push. The thing I care about most isn't the speed, though. It's that I stopped paying for it. A handful of real projects now run on this setup for a few euros a month, total — not a stack of per-service SaaS bills that each want $25 here and $20 there before you've shipped anything. No Vercel seat, no managed Postgres, no Auth-as-a-Service, no object-storage line item. Here's the whole thing. Why this stack The trick that makes the cost collapse is PocketBase . It's a single Go binary that gives you, in one process: Auth — email/password, OAuth, the works, with a real users collection A database — SQLite, with a schema you manage from an admin UI Realtime — subscribe to collection changes over SSE File storage — uploads handled, with on-the-fly thumbnails An admin dashboard — at /_/ , for free That's four or five separate SaaS products collapsed into one binary that runs anywhere and stores everything in a folder. Compared to wiring up Supabase or Firebase, the mental model is tiny: it's one process and one data directory. Back up the directory and you've backed up the entire app — database, uploaded files, auth tokens, all of it. For the front I use Next.js (App Router, React Server Components) because that's where I'm fastest, and Caddy as the reverse proxy because it gets you automatic HTTPS with zero config — it provisions and renews Let's Encrypt certificates on its own. And it all lives on