标签：#webdev

​We just deployed a major update to our SQL Server web sandbox, moving from an individual tool to a collaborative environment: ​✅ Group Rooms (Beta): Create private rooms using security tokens to chat and write code together in real time. ✅ Simulated Linked Servers (Beta): Connect with your friends' sandboxes to run cross-queries strictly in read-only mode to preserve performance. ✅ Gamification & XP: Earn experience points and unlock technical badges as you run queries or build database schemas. ✅ Social Layer: Manage your friends list and customize your public developer profile to showcase your achievements. ​Currently, all features are completely free to use during this phase of the platform. Try it out with your colleagues at tsqlsandbox.online and leave your feedback below!

I built a little web tool that lets you play with the mechanics behind opinion polarization, echo chambers, and network fragmentation. You adjust sliders for things like: How tolerant people are of differing opinions Homophily (how much we prefer connecting with similar people) Rewiring rate Feed bias (how much the algorithm pushes "engaging" content) And you can turn on bots too Click the Presets under the diagram to try out different scenarios. Enjoy breaking society in the name of science submitted by /u/Fanatic-Mr-Fox [link] [留言]

Here's the maths most calculators get wrong Most freelance rate calculators are wrong. Not buggy — conceptually wrong. They take your income goal, divide by hours, and hand you a number that will quietly lose you money all year. I got tired of explaining the correct calculation to freelancer friends, so I built a tool that does it properly. Here's the logic behind it, and a bit about how I built it. The flawed formula The typical calculator does this: hourly_rate = annual_income_goal / annual_hours_worked So if you want $80,000 and work 2,080 hours a year (40 × 52), it tells you to charge ~$38/hr. This is wrong in three separate ways. Fix 1: Tax is not optional Your income goal is a net number — what you want to keep. But you're taxed on gross. So the first correction is grossing up: const grossIncome = netTarget / ( 1 - taxRate ); // $80,000 / (1 - 0.28) = $111,111 That's already a $31,000 gap the naive formula ignores. Fix 2: You don't bill every hour you work This is the big one. Freelancers bill roughly 55–65% of their working hours. The rest is admin, proposals, invoicing, sales calls, and learning. const totalHours = weeksWorked * hoursPerWeek ; // 46 * 40 = 1840 const billableHours = totalHours * billableRatio ; // 1840 * 0.6 = 1104 So your real billable capacity isn't 2,080 hours. It's closer to 1,104. Pricing on the wrong denominator is how people end up working 50-hour weeks and still missing their income target. Fix 3: Business expenses come out of gross Software, hardware, insurance, courses — all real costs that need covering before you pay yourself: const totalNeeded = grossIncome + annualExpenses ; The corrected formula Putting it together: function minimumRate ({ netTarget , taxRate , expenses , weeks , hoursPerWeek , billableRatio }) { const gross = netTarget / ( 1 - taxRate ); const totalNeeded = gross + expenses ; const billableHours = weeks * hoursPerWeek * billableRatio ; return totalNeeded / billableHours ; } minimumRate ({ netTarget : 80000 ,

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

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

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

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

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

If you have ever submitted an iOS application to Apple's App Store and received a cryptic rejection notice about icon specifications, you are not alone. Apple's human interface guidelines for icons are extraordinarily precise — and for good reason. The iOS ecosystem spans devices from the tiny Apple Watch to the expansive iPad Pro, each requiring icons at exact pixel dimensions to render correctly across Retina, Super Retina XDR, and ProMotion displays. Understanding iOS icon sizes is not optional. It is a prerequisite for shipping. Every pixel dimension you provide must match Apple's specifications exactly, must use lossless PNG format, must not include transparency, and must be delivered with the exact filename that Xcode expects. One missed size, one wrong filename, and your project fails to build correctly. Precision is not a suggestion — it is a hard requirement enforced by Xcode's build system. iPhone Icon Sizes For iPhone applications, the required icon sizes span multiple uses within the operating system. The App Store listing requires a 1024×1024 pixel icon. The home screen displays icons at different sizes depending on device generation and display density. Notification icons, Spotlight search results, and Settings app icons all require their own specific dimensions. Usage Scale Size (px) Filename Convention App Store 1× 1024×1024 Icon-1024.png Home Screen 2× 120×120 Icon-60@2x.png Home Screen 3× 180×180 Icon-60@3x.png Spotlight 2× 80×80 Icon-40@2x.png Spotlight 3× 120×120 Icon-40@3x.png Settings 2× 58×58 Icon-29@2x.png Settings 3× 87×87 Icon-29@3x.png Notification 2× 40×40 Icon-20@2x.png Notification 3× 60×60 Icon-20@3x.png iPad Icon Sizes iPad adds its own set of required sizes, particularly because of the larger screen real estate and different display densities. Xcode's asset catalog system requires each icon to be placed in the correct slot, and any missing slot will prevent archiving for App Store submission. This makes completeness not just a best p

Search engine optimization doesn't require expensive tools. Your browser's built-in developer tools can identify and diagnose most SEO problems in under 15 minutes. Here are the 11 most impactful SEO checks you can run directly from Chrome DevTools. 1. Check Meta Description Length Right-click any element, Inspect, expand <head> , find <meta name="description"> . Metric Optimal Range Meta description length 120-155 characters Title tag length 50-60 characters H1 count per page Exactly 1 const meta = document . querySelector ( ' meta[name="description"] ' ); const len = meta ? meta . content . length : 0 ; console . log ( `Meta description: ${ len } chars` ); 2. Verify Only One H1 Tag Exists const h1s = document . querySelectorAll ( ' h1 ' ); console . log ( `H1 count: ${ h1s . length } ` ); A study of 1.2 million pages found pages with one H1 ranked 12% higher on average. 3. Find Images Missing Alt Text const imgs = document . querySelectorAll ( ' img ' ); const missing = [... imgs ]. filter ( i => ! i . alt || i . alt . trim () === '' ); console . log ( ` ${ missing . length } of ${ imgs . length } images missing alt text` ); Pages with complete alt text see 3.7% higher image search visibility. 4. Detect Render-Blocking Resources Open DevTools, Network tab, reload, click "Blocking" filter. Resources in red block first contentful paint. Total blocking time under 200ms More than 20 render-blocking resources signals a problem Each render-blocking CSS file adds 50-300ms to page load 5. Check Canonical Tag Consistency const canonical = document . querySelector ( ' link[rel="canonical"] ' ); console . log ( canonical ? `Canonical: ${ canonical . href } ` : ' No canonical tag ' ); 6. Audit Internal Links const links = [... document . querySelectorAll ( ' a[href] ' )]; const internal = links . filter ( l => { try { return new URL ( l . href ). hostname === window . location . hostname ; } catch ( e ) { return false ; } }); console . log ( `Internal links: ${ internal . len

Tired of uploading your private files to sketchy ad-filled website for conversion and OCR? Meet EasyConvert, a serverless media tool that uses FFmpeg WASM to convert, compress and OCR media files 100% locally. Link: easy-convert.pages.dev Github: https://github.com/nihid7/easyconvert submitted by /u/Fun-Time9529 [link] [留言]

Hey everyone!! sharing something I've been building for the past 2 months. Leafy lets you and your team annotate any webpage. You click an element (or highlight text), leave a comment, @ mention teammates, and they get notified. Comments are anchored to specific parts of the page and sync across devices. Use cases I've seen people use it for: → Product teams reviewing features on their products → Designers leaving feedback on live prototypes → Researchers annotating sources together → QA marking bugs on staging environments → Sales teams using it on salesforce → Students using it for marking interesting things on any page, to study You can organise teams into "Gardens" (I know, quirky naming). Free tier supports up to 3 gardens with 5 members each. I'd love any feedback! especially on what feels broken or missing. Chrome Web Store: https://chromewebstore.google.com/detail/leafy-annotate-the-web-to/doohbmfpjanoimbigjbjocanpenbfkkh https://preview.redd.it/4riy4haubu5h1.png?width=908&format=png&auto=webp&s=69ecac6f3bef7a4843c58095c3d8a5972ff2ceaa Product page: https://get-leafy.com submitted by /u/maxisrichtofen [link] [留言]

The idea is to make it straightforward to find any ffmpeg version and configuration you require, and to have the binaries available for production CI/CD flows without worrying they will expire. submitted by /u/pinter69 [link] [留言]