标签：#javascript

Introduction With the World Cup 2026 group stage reaching its climax, football fans worldwide are speculating about who will make it to the finals. To make this experience interactive, I built a fully dynamic World Cup 2026 Bracket Simulator. Instead of just letting users click and choose winners, this app dynamically calculates ELO win probabilities and probabilistically generates realistic match scores (including extra time and penalties) based on team ratings. It also syncs with live match data in real-time. Live URL: https://worldcup-predict2026.github.io/champion/ Tech Stack: Vanilla JS, CSS3 (3D parallax), GitHub Actions, Python, football-data.org API Core Features & Technical Implementation ELO-Based Win Probability & Score Simulation Each team in the database is assigned an ELO-based strength rating. When a user runs the AI auto-prediction, the script calculates win probability and generates a realistic scoreline. Here is the goal roll algorithm (Poisson-like simulation) implemented in Vanilla JS: javascript function generateMatchScore(team1, team2, winner) { if (team1 === "TBD" || team2 === "TBD" || !winner) return null; const s1 = teamStrengths[team1] || 70; const s2 = teamStrengths[team2] || 70; const winnerIsTeam1 = (winner === team1); const strengthDiff = Math.abs(s1 - s2); const baseGoalExpected = 1.1; const bonusGoal = Math.min(1.8, strengthDiff / 12.0); // Goal weight based on ELO difference const rollGoals = (lambda) => { let L = Math.exp(-lambda); let k = 0; let p = 1.0; do { k++; p *= Math.random(); } while (p > L && k < 10); return k - 1; }; let gWin = 0; let gLose = 0; const r = Math.random(); if (r < 0.75) { // Regular time win (90 mins) gLose = rollGoals(baseGoalExpected); gWin = gLose + 1 + rollGoals(0.7 + bonusGoal); return winnerIsTeam1 ? ${gWin} - ${gLose} : ${gLose} - ${gWin} ; } else if (r < 0.92) { // Extra time win (AET) const normalGoals = rollGoals(baseGoalExpected); gLose = normalGoals; gWin = normalGoals + 1; return winnerIsTeam1 ?

Open Graph images are the single biggest factor in whether your shared links look credible or broken. Yet most sites ship one generic image on every page because making a unique one by hand is tedious. Here is a more sustainable approach: treat preview images as generated data, not hand-made design. The problem, concretely When you share a link, the receiving platform reads your page's og:image meta tag and renders a card. If that tag is missing, points to a low-res logo, or is the same image on all 200 pages, your links look generic in every feed, Slack channel, and group chat. Studies of social sharing consistently show that posts with a clear, relevant preview image get meaningfully more engagement than those without. The reason teams skip it is not ignorance. It is friction. Opening a design tool, duplicating a template, swapping the title text, exporting at the right dimensions, and uploading the file takes 10 to 20 minutes per page. Nobody keeps that up across a real publishing schedule. So the back catalog stays bare and new posts get whatever the default is. The insight: it is template work Look at a typical preview card and ask what actually changes between pages. Usually just the title, maybe the author and a category tag. The layout, background, logo, and fonts are constant. That is the textbook definition of a job you should template once and generate programmatically, not redo by hand each time. How to solve it The cleanest pattern is to generate the image at build time or on first request, then cache it. Conceptually: // During your build or in an API route async function getOgImage ( post ) { const params = new URLSearchParams ({ title : post . title , author : post . author , tag : post . category , }); // Returns a ready Open Graph image URL return `https://getcardforge.dev/api/card? ${ params } ` ; } // In your page head // <meta property="og:image" content={getOgImage(post)} /> You can build this yourself with a headless browser plus an HTML templ

As web developers, engineering workflows are heavily dependent on the NPM registry. However, the traditional process of searching, auditing, and integrating packages remains highly fragmented. Developers are routinely forced to hop between npmjs.com, GitHub source repositories, and external documentation tabs simply to verify bundle sizes, check dependency trees, or generate setup boilerplate. Following a strong reception on LinkedIn, X, and Facebook, the Motion Mind Team has introduced LibPilot to the dev.to community. LibPilot is not a traditional registry interface; it is an AI-powered search engine and discovery hub engineered to index, track, and analyze over 4,000,000 NPM packages in real time. Here is an architectural breakdown of how LibPilot restructures package exploration for modern developers and autonomous AI code agents. Intent-Based Discovery and Global Search Architecture Traditional search engines require users to input the exact name or strict keyword of a library. LibPilot introduces a dual-input architecture on its home page to eliminate this constraint: Direct Registry Querying: Users can input full or partial package names into the global search bar to instantly surface clean, structured, and typed suggestions directly from the live NPM ecosystem database. Contextual AI Recommendations: For scenarios where the ideal package is unknown, developers can type out a complete description of their project architecture or system constraints (for example: "a lightweight, typed state management engine that handles server-side rendering natively"). LibPilot's internal AI agent processes the functional requirements and suggests production-ready libraries suited for that stack. Continuous Context AI and Interactive Onboarding A core goal of the platform is reducing developer friction and maintaining deployment momentum. LibPilot transitions static package documentation into an interactive environment: Unlimited AI Chat Architecture: Once a library is select

Math.random() returns a number between 0 and 1, and roughly nobody reading this could explain what happens between the call and the return. That is fine, fine right up until the output decides who gets money, and then it becomes one of the genuinely hard problems in applied software, the kind that regulated industries build entire testing labs around. Start with the thing most people get wrong: a sequence that passes for random and a fair sequence are different claims, and your users cannot tell them apart by staring at outputs. The users will never catch the difference and that is the whole problem in one sentence. This is why fairness in any real-money system, an online casino being the sharpest example, is a verification problem long before it is a math problem. Pseudorandom generators are deterministic. A PRNG eats a seed, runs it through fixed arithmetic, and spits out numbers that sail through statistical randomness tests while being completely predetermined by that seed. Mersenne Twister is the poster child: excellent distribution, used everywhere by default for years, and from a few hundred observed outputs you can reconstruct its internal state and predict the rest. For a Monte Carlo simulation, who cares! For anything where a human has a financial reason to guess your next number, you just shipped a vulnerability and called it a feature. What you want when stakes exist is a CSPRNG. The guarantee that matters: even with a long history of outputs, an attacker cannot compute the next one or recover the internal state. crypto.randomBytes() in Node. crypto.getRandomValues() in the browser. They sit one autocomplete away from the unsafe option and offer wildly different guarantees, which is exactly why this bug ships so often. The safe call and the dangerous call look like fraternal twins. ** The part players actually rely on ** Say you build it correctly: a proper CSPRNG, real entropy, no timestamp nonsense. You know it is fair but now prove it to a stranger wh

Semana passada eu passei três horas debugando um bug que deveria levar 20 minutos. O problema? Um módulo de validação escrito em 2019 que ninguém mexe "porque funciona". Spoiler: não funcionava mais, e quando finalmente abri o arquivo, encontrei um // TODO: refactor this datado de 2020. Por que legacy vira bola de neve A indústria trata código legado como se fosse dívida técnica opcional — algo que você paga "quando tiver tempo". Mas código legado se comporta mais como mofo: se espalha, contamina áreas adjacentes, e quanto mais você ignora, mais cara fica a limpeza. O ciclo é previsível: você herda um projeto ou feature antiga, vê que está "meio bagunçado mas roda", adiciona sua feature com um if a mais, e segue em frente. Seis meses depois, outra pessoa faz o mesmo. Um ano depois, aquele arquivo tem 800 linhas, cinco níveis de if aninhados, e zero testes. Ninguém mais entende o fluxo completo, então cada mudança vira uma sessão de especulação: "se eu mexer aqui, quebra ali?" O custo real de esperar Esse código "que funciona" tem um custo oculto que aparece em três formas: Velocidade de desenvolvimento despenca. Features que deveriam levar dois dias levam uma semana porque você passa mais tempo entendendo o contexto do que escrevendo código novo. Bugs aumentam exponencialmente. Código sem testes e com lógica embolada é um gerador de regressões. Você corrige um edge case e quebra outro que nem sabia que existava. Onboarding vira tortura. Novo dev no time? Boa sorte explicando por que aquele service tem três formas diferentes de fazer autenticação, ou por que a mesma validação está copiada em sete lugares. Sinais de que você está sentado em cima de uma bomba Nem todo código antigo é legacy tóxico. Aqui estão os red flags que indicam que você precisa agir agora: // Red flag #1: comentários mentirosos ou inúteis function processPayment ( order ) { // Process the payment const user = order . user ; // TODO: fix this later // HACK: don't touch this, breaks prod if ( user

If you've shipped anything to the browser, you've used localStorage . And if you've used it for more than five minutes, you've also written this exact line more times than you'd like to admit: const user = JSON . parse ( localStorage . getItem ( ' user ' ) || ' null ' ) The Web Storage API has aged remarkably well for something so small, but it carries three persistent pain points that every frontend codebase ends up papering over by hand. Pain point #1: everything is a string. localStorage.setItem('count', 0) doesn't store the number 0 — it stores the string "0" . Read it back and typeof is "string" . Booleans become "true" / "false" , Date objects collapse into ISO strings (if you're lucky) or "[object Object]" (if you're not), and undefined becomes the literal string "undefined" . So every project grows a thin serialization layer of JSON.parse / JSON.stringify wrappers, plus a pile of defensive try/catch blocks for the day a malformed value sneaks in. Pain point #2: the API is verbose and stringly-typed. getItem , setItem , removeItem — three method calls and a string key for what is conceptually just reading and writing a property. It reads nothing like the rest of your code. Pain point #3: reactivity is broken in the tab you actually care about. The native storage event only fires in other tabs of the same origin. The tab that performed the write never hears about it. So if you want to react to your own storage changes — the overwhelmingly common case — the platform gives you nothing. Stokado is a small, zero-dependency library that addresses all three by wrapping any storage object in a Proxy . It's framework-agnostic, TypeScript-friendly, and works equally well with localStorage , sessionStorage , cookies, async backends like localForage, and a handful of mini-program runtimes. This article walks through what it actually does, feature by feature, with runnable code. Quick start npm install stokado import { createProxyStorage } from ' stokado ' const storage =

GitHub热门项目 | A plugin marketplace for Claude Code/GitHub Copilot that provides Power Platform development plugins, including reusable skills, agents, and commands for building and deploying solutions. | Stars: 388 | 7 stars today | 语言: JavaScript

GitHub热门项目 | Automatically sync your leetcode solutions to your github account - with some updates to keep it working | Stars: 559 | 12 stars today | 语言: JavaScript

GitHub热门项目 | Tower defense game that teaches cloud architecture. Build infrastructure, survive traffic, learn scaling. | Stars: 6,038 | 35 stars today | 语言: JavaScript

GitHub热门项目 | Vercel's official collection of agent skills | Stars: 28,276 | 32 stars today | 语言: JavaScript

GitHub热门项目 | Swagger UI is a collection of HTML, JavaScript, and CSS assets that dynamically generate beautiful documentation from a Swagger-compliant API. | Stars: 28,855 | 6 stars today | 语言: JavaScript

You have an API response. You want a Zod schema. So you paste the JSON into a JSON-to-Zod converter, copy the output, and ship it. Here's the trap: a lot of those converters infer basic types only . Your email , your uuid , your url , your ISO timestamp — they all come out as z.string() . The schema compiles, the types look right, and your validator quietly accepts "not-an-email" , "ftp://nope" , and "2026-99-99" forever. I wanted to see exactly how much gets lost, so I ran the same payload through two tools and diffed the output. Everything below is real, copy-pasteable output — nothing edited. The input A pretty ordinary user object: { "id" : "3f2a9c1e-5b7d-4e8a-9f1c-2d3e4f5a6b7c" , "email" : "ada@example.com" , "website" : "https://ada.dev" , "age" : 34 , "rating" : 4.7 , "created_at" : "2026-03-04T10:15:30Z" , "is_active" : true , "address" : { "city" : "Lyon" , "zip" : "69001" }, "tags" : [ "early-adopter" , "beta" ] } Tool 1 — json-to-zod (npm) const user = z . object ({ id : z . string (), email : z . string (), website : z . string (), age : z . number (), rating : z . number (), created_at : z . string (), is_active : z . boolean (), address : z . object ({ city : z . string (), zip : z . string () }), tags : z . array ( z . string ()), }); Structurally correct. But every meaningful field is a bare z.string() / z.number() . This schema will happily validate email: "lol" and created_at: "yesterday" . Tool 2 — TypeMorph import { z } from " zod " ; export const userAddressSchema = z . object ({ city : z . string (), zip : z . string (). regex ( /^ [ A-Z0-9 ][ A-Z0-9 \s\-]{1,8}[ A-Z0-9 ] $/i ), }); export type UserAddress = z . infer < typeof userAddressSchema > ; export const userSchema = z . object ({ id : z . uuid (), email : z . email (), website : z . url (), age : z . number (). int (). min ( 0 ). max ( 150 ), rating : z . number (). min ( 0 ). max ( 5 ), created_at : z . iso . datetime (), is_active : z . boolean (), address : userAddressSchema , tags :

Most TypeScript tutorials teach you the language. This article teaches you how to use it. There's a difference. The language has hundreds of features. A real project uses maybe twenty of them regularly, and about eight of them make up the difference between TypeScript that fights you and TypeScript that helps you. These are those eight. Each one comes from a pattern I've seen repeatedly in real codebases: first as an antipattern, then as a realization, then as a habit. The goal isn't to show off advanced type gymnastics. It's to show you the specific things that make your code safer, more readable, and less painful to maintain. TL;DR Most TypeScript pain comes from fighting the type system instead of working with it, any , manual casting, and loose types are the usual culprits. A small set of features, discriminated unions, utility types, satisfies , as const , generics, solve the majority of real-world typing problems. The best TypeScript isn't the most complex. It's the most precise. Table of Contents Tip 1: Use Discriminated Unions Instead of Optional Fields Tip 2: Stop Writing Types Twice with Utility Types Tip 3: Use satisfies to Validate Without Losing Inference Tip 4: Use as const for Literal Types That Don't Drift Tip 5: Write Type Guards Instead of Casting Tip 6: Use Generics to Write Functions Once Tip 7: Use ReturnType and Parameters to Stay in Sync Tip 8: Use unknown Instead of any for External Data Honorable Mentions Final Thoughts Tip 1: Use Discriminated Unions Instead of Optional Fields This is the tip that changes how you model data in TypeScript. Once you see it, you'll spot the antipattern everywhere. The antipattern // ❌ A type that tries to represent multiple states with optional fields interface ApiResponse { data ?: User error ?: string isLoading : boolean } The problem: this type allows impossible states. Nothing stops you from having both data and error set at the same time, or neither set, or isLoading: false with no data and no error . The

Every quarterly earnings number for every US public company going back to 2009 is sitting in a free, well-documented JSON API run by the US government. No API key. No rate limit for normal use. No paywall. Almost nobody in the dev community seems to know it exists. It's at data.sec.gov , and it's the same data Bloomberg charges $24k/year for. What's in it The SEC requires all US-listed companies to file financial reports in XBRL — a structured XML format where every number is tagged with a standardised concept name. The EDGAR system has been collecting these since around 2009. The companyfacts endpoint exposes all of it as clean JSON: GET https://data.sec.gov/api/xbrl/companyfacts/CIK{cik}.json Where CIK is the company's SEC identifier (10 digits, zero-padded). For Apple, that's 0000320193 . The response is a large JSON object with every concept the company has ever reported, broken down by period. The other endpoint you need is the ticker-to-CIK map: GET https://www.sec.gov/files/company_tickers.json This gives you a flat list of all US-listed companies with their CIK, ticker, and name. Load it once and cache it. One gotcha: concept names vary by company Companies don't all use the same GAAP concept names to report the same thing. Apple reports revenue as RevenueFromContractWithCustomerExcludingAssessedTax . Older companies use Revenues . Some use SalesRevenueNet . If you just look up one concept name, you'll get blanks for most companies. The fix is a concept alias map: try each name in order, use the first one that has data. const CONCEPT_MAP : Record < string , string [] > = { revenue : [ ' Revenues ' , ' RevenueFromContractWithCustomerExcludingAssessedTax ' , ' RevenueFromContractWithCustomerIncludingAssessedTax ' , ' SalesRevenueNet ' , ' SalesRevenueGoodsNet ' , ], netIncome : [ ' NetIncomeLoss ' , ' NetIncomeLossAvailableToCommonStockholdersBasic ' , ' ProfitLoss ' , ], operatingCashFlow : [ ' NetCashProvidedByUsedInOperatingActivities ' , ' NetCashProvidedB

Remember how I promised you (or rather myself) two weeks ago that from now on I'd only write light,...

GitHub热门项目 | Promise based HTTP client for the browser and node.js | Stars: 109,082 | 8 stars today | 语言: JavaScript

GitHub热门项目 | JavaScript animation engine | Stars: 70,268 | 152 stars today | 语言: JavaScript

Last year I was asked to investigate a startup's AWS bill. It had jumped from roughly $200/month to over $3,000 in a few weeks. Nobody knew why. After digging through logs, metrics, and database traffic, I found the culprit: a polling loop with no backoff strategy. The code looked harmless: async function processQueue () { const jobs = await getJobs () for ( const job of jobs ) { await processFile ( job ) } processQueue () } processQueue () At first glance, this seems reasonable. Process all available jobs, then check again. The problem appears when the queue is empty. When getJobs() returned no work, the loop immediately queried the database again. And again. And again. There was no delay, no backoff, and no event-driven trigger. As a result, the service continuously hammered the database looking for work that didn't exist. Each iteration generated: A database query Network traffic CPU usage Logging overhead Additional infrastructure load Individually, each operation was cheap. Executed hundreds of thousands of times per day, they became expensive. The fix was simple: async function processQueue () { while ( true ) { const jobs = await getJobs () for ( const job of jobs ) { await processFile ( job ) } await new Promise ( resolve => setTimeout ( resolve , 5000 )) } } Even better would have been replacing polling entirely with an event-driven design using a message queue. What this incident taught me: 1. Empty queues are production workloads. Many engineers optimize for peak traffic and forget about idle traffic. Systems often spend more time idle than busy. 2. Polling needs backoff. If you're polling, always define what happens when no work is found. 3. Cost bugs rarely look like bugs. Nothing crashed. No exceptions were thrown. The system was technically working exactly as written. It was just doing useless work 24/7. 4. Always monitor cost alongside performance. CPU, latency, and error rates looked normal. The AWS bill was the first real alert. One question I ask

Most "free developer tools" lists link to GitHub repos you need Node.js to run locally, or SaaS products with a login wall. Everything below runs in a browser tab, handles your data client-side or deletes it from the server within 30 minutes, and requires no account of any kind. All 26 tools are at at-use.com . Grouped by what you are actually trying to do. Encoding & Decoding Base64 Encoder/Decoder — Encode text or binary to Base64, or decode it back. UTF-8 text and binary file payloads both work. Runs in your browser — nothing sent to a server. URL Encoder/Decoder — Percent-encode strings for safe URL inclusion, or decode percent-encoded URLs back to readable text. Handles both application/x-www-form-urlencoded and RFC 3986 encoding modes. HTML Entity Encoder/Decoder — Convert special characters to named HTML entities ( < → &lt; , & → &amp; ) or decode entities back to characters. Useful when building template strings or sanitizing output for display. Binary Translator — Text to binary, binary to text, or translate between binary, decimal, hex, and octal. Useful for low-level debugging and learning number representations. Number Base Converter — Convert integers between binary (base 2), octal (base 8), decimal (base 10), and hexadecimal (base 16). All four outputs shown simultaneously. JWT Decoder — Paste a JWT token to decode and inspect the header and payload. Runs entirely in the browser — your token never leaves your machine. JSON & Text JSON Formatter & Validator — Format, validate, and minify JSON in one click. Toggle between pretty-print and compact output. Syntax errors include the exact line and column number. Uses browser-native JSON.parse() — no data sent anywhere. Text Diff — Side-by-side text comparison with no character limit (diffchecker.com caps at 25,000 characters on the free tier). JSON-aware mode auto-formats both inputs before diffing so whitespace differences do not pollute the output. Case Converter — 12 text case

Hello Dev Community! 👋 It is officially Day 71 of my unbroken 100-day full-stack engineering run! After mastering polymorphic multi-part storage configurations yesterday, today I successfully crossed into core transactional operations: Engineering a High-Fidelity "Confirm and Pay" Checkout View and Wiring Database Inbound Array Modifications! In real-world booking platforms, processing a successful transaction requires more than updating an absolute view; you have to link documents relationally across collections. Today, I wired that entire execution pipeline together! 🧠 What I Handled on Day 71 (Checkout Engineering & Target Mutations) As displayed across my latest system files in "Screenshot (164).png" and "Screenshot (165).jpg" , handling payments runs through structured backend steps: 1. High-Fidelity Checkout Component ( /reserve ) I built out the detailed split-pane verification interface visible in "Screenshot (164).png" . The layout captures target trip date selections, total guests parameter caps, card input structures, and computes subtotal ledgers dynamically: Base Compute: $9000 x 5 nights = $45000 . Transactional Upgrades: Appending structured service charges ( $85 ) and local tax calculations ( $42 ) to update the final sum directly to $45127 . 2. Live Document Array Mutators (MongoDB User List Insertion) The most crucial logic happens when the user clicks the primary validation trigger labeled Confirm and pay : The inbound route controller extracts the targeted property identity token ( home._id ) via an embedded hidden input container. Instead of running isolation updates, it issues an atomized update operation straight into our MongoDB user records array (e.g., using Mongoose operators like $push or tracking active profiles inside our custom data state loops). This appends the exact property listing target ID directly into the user's booking history array database matrix! 🛠️ View Markup Code Integration View As showcased in my VS Code script structu