标签：#javascript

GitHub热门项目 | An advanced guide which might benefit you a lot 🎉 . 人生进阶指南 离谱的人生 离谱的英语学习指南/英语学习教程/英语学习/学英语 | Stars: 55,583 | 148 stars today | 语言: JavaScript

It only took ten days to develop the language that powers the web. This article tells the story of JavaScript and the tools that helped shape it. 1995. The birth of a legend The idea for JavaScript was born at Netscape. At the time, web pages consisted almost entirely of HTML, and Netscape wanted to make them more interactive. The first step in that direction was licensing Java for use in the Netscape browser. However, Java's complexity proved challenging for web designers. Brendan Eich was then tasked with creating a programming language that wasn't too complex and could be embedded directly into HTML pages. Eventually, Marc Andreessen, co-founder of Netscape Communications, and Bill Joy, co-founder of Sun Microsystems, also contributed to the language development. To meet the deadline for the Netscape browser release, the companies agreed to collaborate on the language. During its development, the language changed its name several times. For example, the first version Eich created in just ten days was called Mocha. It was then renamed to LiveScript. The final name was chosen because the word Java was already popular and well-known. JavaScript was first announced shortly before the second beta release of Netscape Navigator. Meanwhile, Netscape announced that 28 leading IT companies planned to incorporate JavaScript into their future products. JavaScript 1.0 was released in 1996 alongside Netscape Navigator 2. 1997-1999. ECMAScript In 1996, Microsoft also released JScript as part of Internet Explorer 3, which was an open-source implementation of JavaScript for Windows. By the way, the name was changed to avoid negotiating trademark rights for Java with Sun Microsystems. To eliminate browser incompatibilities caused by different implementations, Netscape handed the JavaScript specification over to the ECMA international organization. So, the ECMA-262 specification was created. The language got the name ECMAScript because JavaScript was already trademarked. Around the

There's a project on every developer's machine that has Sass installed for one reason: &:hover {} . Not @mixin . Not @each . Just the nesting. The variables long since became --custom-properties . The only thing still justifying node_modules/sass is the ability to write child selectors inside parent rules. CSS added that natively in 2023. It shipped in Chrome 112, Firefox 117, and Safari 16.5 — every major browser released in the last two years. The compiler is not earning its spot anymore. What you've been writing in Sass The classic pattern — component styles scoped to a block, with states and modifiers nested inside: .card { padding : 1 .5rem ; border-radius : 0 .5rem ; background : var ( -- surface ); & :hover { background : var ( -- surface-hover ); } & __title { font-size : 1 .125rem ; font-weight : 600 ; } & --featured { border : 2px solid var ( -- accent ); } } The output is flat, specificity-controlled CSS. The source is organized by component. That's the trade Sass nesting has always offered — and native CSS now offers the same deal. The same thing in native CSS .card { padding : 1.5rem ; border-radius : 0.5rem ; background : var ( --surface ); &:hover { background : var ( --surface-hover ); } & .card__title { font-size : 1.125rem ; font-weight : 600 ; } & .card--featured { border : 2px solid var ( --accent ); } } Two differences are worth noticing. First: pseudo-classes work exactly as in Sass — &:hover resolves to .card:hover with no extra syntax. Second: descendant selectors require an explicit & followed by a space. & .card__title becomes .card .card__title . This is where native nesting differs from BEM's __ / -- convention: in native CSS, & is a selector reference , not a string concatenation operator. If you're using BEM naming heavily, &__foo becomes & .block__foo . The compiled output is identical; the source is slightly more explicit about what's happening. Media queries nested inside their rules This is the feature that earns native nesting a pe

This is the second stage of my CodeAlpha Full Stack internship — two projects, built in a deliberate order so the patterns from the first carry forward. First was a project management tool (auth + real-time updates with Socket.io). This one is a store: products, cart, orders. Same stack — Express, Prisma, PostgreSQL, JWT — but the interesting part isn't the CRUD, it's the order-placement flow, which is the first genuinely transactional piece of logic in the whole internship. I'll walk through the schema decisions, the auth changes from project one, and then spend most of the time on the part that actually matters: making sure an order can never be created without correctly and atomically updating stock and clearing the cart. The schema model User { id String @id @default(cuid()) name String email String @unique password String role String @default("USER") createdAt DateTime @default(now()) orders Order[] cartItems CartItem[] } model Product { id String @id @default(cuid()) name String description String price Float image String? stock Int @default(0) category String createdAt DateTime @default(now()) cartItems CartItem[] orderItems OrderItem[] } model CartItem { id String @id @default(cuid()) quantity Int @default(1) user User @relation(fields: [userId], references: [id]) userId String product Product @relation(fields: [productId], references: [id]) productId String @@unique([userId, productId]) } model Order { id String @id @default(cuid()) status String @default("PENDING") total Float createdAt DateTime @default(now()) user User @relation(fields: [userId], references: [id]) userId String items OrderItem[] } model OrderItem { id String @id @default(cuid()) quantity Int price Float order Order @relation(fields: [orderId], references: [id]) orderId String product Product @relation(fields: [productId], references: [id]) productId String } Two decisions worth explaining, because they're easy to get wrong if you're building this for the first time. OrderItem.price is a

While researching API changes I noticed something — Google Maps removed DirectionsService on May 1 2026 with no soft fallback. Calls just throw runtime errors after the deadline. Most developers won't know until something breaks. So I built DepRadar — paste your package.json, it checks your exact stack against known deprecations and shows only the ones affecting you, with severity, sunset dates, and migration links. Currently tracks 13 real deprecations across: Google Maps (DirectionsService, DistanceMatrixService removed) OpenAI (Realtime API Beta sunset) AWS SDK v2 (maintenance mode) Microsoft Actionable Messages (retired) moment.js, request package And more Free → depradar.netlify.app Open source → github.com/Ahmed889-code/depradar What deprecations am I missing from your stack?

We have all been there. You are staring at your screen late at night, trying to optimize a bundle size, or debugging an enterprise pipeline that has been failing for three hours straight. The mainstream development community constantly tells us to only install packages that are high performance, audited for security, and strictly necessary for production. But where is the fun in a perfectly clean node_modules folder? Sometimes, the ultimate way to level up your engineering workflow is to inject some absolute chaos into your dependencies. Why spend hours writing robust logic when you can install a library that brings pure irony to your terminal? Let us dive into ten packages that might look completely useless on the surface but are actually the most important modules you will ever encounter in your developer journey. 1. emoji-poop This NPM package lets you use the poop emoji in your output. The emoji is well required in most of the websites as the real fun begins when the site crashes and you can use this poop emoji to showcase the errors with an emoji. This will help the clients get a bit calm after seeing the emoji and the errors. Think about it from a psychological perspective: traditional red stack traces cause immediate client panic, but a well-placed graphical poop emoji introduces a masterclass in modern error mitigation. javascript // npm i emoji-poop const emoji = require('emoji-poop'); console.log(emoji) // 💩 2. thanos-js Who doesn't love Marvel, and Thanos being the strongest villain in the MCU? This package lets you delete files in Thanos fashion. Once you install and run it, it deletes 50% of your files, reducing your stress and giving you less codebase to work with. Yes, it deletes the files for those who are confused about what this package does. It uses fs.unlinkSync to delete the files. Deleting random files from .git would be absolutely evil, and Thanos would love to do it. Exactly half of the files are deleted. Each file is given a chance at random

We've all seen password strength meters on sign-up forms. Most of them rely on simplistic, static rules: "Must contain at least 8 characters, one number, and one special character." But from a mathematical standpoint, these rules are a poor proxy for actual password security. A password like Tr0ub4dor&3 conforms to these rules but is far easier to compromise than a randomly generated four-word passphrase like correct-horse-battery-staple . To truly measure password security, we have to look at information theory and compute its Shannon Entropy . Here is how password entropy works, the math behind it, and how you can calculate it directly in the browser with 100% client-side privacy. What is Password Entropy? In cryptography, entropy is a measure of the unpredictability or randomness of a password. It is expressed in bits . An entropy of $N$ bits means there are $2^N$ possible combinations that an attacker would have to guess in a worst-case brute-force search. < 28 bits: Very weak (easily guessed in milliseconds). 28 to 35 bits: Weak (cracked in minutes or hours). 36 to 59 bits: Reasonable protection (days to months). 60 to 127 bits: Very strong (takes years to decades to crack). 128+ bits: Extremely secure (mathematically unfeasible to crack). The Mathematical Formula To calculate the entropy ($E$) of a password, we use the following equation: $$E = L \times \log_2(R)$$ Where: $L$ is the length of the password (number of characters). $R$ is the size of the pool of unique characters from which the password is drawn. $\log_2(R)$ is the binary logarithm of the pool size, representing the amount of information carried by each character. Determining Pool Size ($R$) To find $R$, we analyze which character sets are present in the password string: Lowercase letters ( a-z ): 26 characters Uppercase letters ( A-Z ): 26 characters Numbers ( 0-9 ): 10 characters Common special characters/punctuation: 33 characters (e.g., !@#$%^&*()-_=+[]{}|;:',.<>/? etc.) If a password uses ch

GitHub热门项目 | The best browser for both you and your AI agents work in parallel. | Stars: 479 | 199 stars this week | 语言: JavaScript

GitHub热门项目 | ⚡️ Streaming torrent client for the web | Stars: 31,207 | 225 stars this week | 语言: JavaScript

GitHub热门项目 | A high-performance, 100% client-side tool for removing Gemini AI image & video watermarks. Built with pure JavaScript using mathematically precise Reverse Alpha Blending. / 基于 JavaScript 的纯浏览器端 Gemini AI 图像和视频无损去水印工具，使用数学精确的反向 Alpha 混合算法 | Stars: 4,749 | 27 stars today | 语言: JavaScript

GitHub热门项目 | Sample Whatsapp App - Jasper's Market | Stars: 508 | 10 stars today | 语言: JavaScript

Introduction When learning JavaScript, one of the first concepts you’ll encounter is functions. Functions are the building blocks of JavaScript. They help you organize code, avoid repetition, and make your programs easier to understand. If variables store data, functions define behavior . You’ll use functions everywhere: handling user input, processing data, calling APIs, and structuring your code. In this article, we’ll cover: What is a function Function declarations Function expressions Parameters vs arguments Return values Arrow Functions Why Functions Matter 1. What is a Function? A function is a reusable block of code designed to perform a specific task. Think of it like a machine: Input → Process → Output function greet () { console . log ( " Hello! " ); } To run the function, you call it: greet (); // Hello! 2. Function Declaration This is the most common way to define a function: function add ( a , b ) { return a + b ; } 💡 Explanation: Defined using the function keyword Can be called before it is declared (because of hoisting) Key parts: function → keyword add → function name a, b → parameters return → output value add (); // ✅ Works! function add ( a , b ) { return a + b ; } 💡 Why does this work? JavaScript reads the code first, and function declarations are stored in memory during the initial phase (hoisting) . That’s why you can call the function even before it’s defined in the code. 3. Function Expressions Functions can also be stored in variables: function add ( a , b ) { return a + b ; } 💡 Explanation: Assigned to a variable Cannot be used before initialization add (); // ❌ Error: Cannot access before initialization const add = function ( a , b ) { return a + b ; }; 💡 Why does this cause an error? Because: const add has not been initialized yet when it is called. The function itself is not in memory at that moment . 4. Parameters vs Arguments This is a common beginner confusion: Parameter: variable in function definition Argument: actual value passed i

I built JSON Utility Kit as a small browser-based toolkit for everyday JSON tasks. The CSV to JSON converter recently got an update for nested JSON structures. For example, headers like user.name, user.email, order.id can be converted into nested objects instead of flat keys. What it supports: CSV to JSON conversion Nested object output from dot notation headers Browser-side processing No signup JSON formatting and validation tools nearby Tool: https://jsonutilitykit.com/tools/csv-to-json/ GitHub: https://github.com/kejie1/json_utility_kit

React Doctor es un linter de cero instalación que escanea un codebase de React buscando problemas de correctitud, seguridad, accesibilidad, rendimiento y mantenibilidad, luego los rankea y te entrega una lista de arreglos con forma de agente. Este post es un reporte de campo: lo corrí sobre una SPA real de React 18 + Vite + TypeScript (~50 rutas, TanStack Query, react-hook-form) y separé lo que de verdad me atrapó. El resultado honesto: 1,249 hallazgos, cinco que valía la pena arreglar, incluyendo dos bugs de seguridad reales. Los otros 1,244 fueron una mezcla de ruido, decisiones de criterio, y falsos positivos. TL;DR Categoría Reportados Vale la pena actuar Por qué la brecha Seguridad 18 warnings 2 13 eran sinks saneados en el servidor (falsos positivos); 1 mina de código muerto + 1 XSS real fueron el oro Bugs 24 errores, 487 warnings 2 1 fuga de timer, 1 key/spread; ~27 exhaustive-deps piden criterio humano Accesibilidad 434 warnings, 1 error 1 el 1 error ( aria-selected faltante) era real; los 434 son ruido de <Label> / <button type> Rendimiento 110 warnings 0 nada caliente; candidatos pero sin impacto medido Mantenibilidad 176 warnings 0 opiniones de estilo tipo "componente grande" Total 1,249 5 señal-a-ruido ≈ 1 en 250 El puntaje que imprimió: 39 / 100 . Dos cosas que ese encuadre esconde: los cinco que sacó a la superficie eran de alto valor (una fuga de token en localStorage y un sink de XSS almacenado), y el conteo no es determinista : una segunda corrida del mismo commit reportó 1,254, no 1,249. El veredicto en una línea: excelente generador de hipótesis, pésima compuerta. Úsalo para encontrar candidatos, verifica cada uno contra el código, y nunca conectes el conteo al CI. Qué es React Doctor Un solo binario que corres por npx / pnpm dlx , sin agregar dependencia a tu proyecto, sin archivo de configuración obligatorio. Parsea tu src/ , hace match contra un conjunto de reglas (sus familias: Seguridad, Bugs, Accesibilidad, Rendimiento, Mantenibilidad), e im

Everything worked. I'd wired up useOptimistic on a task list, the checkbox flipped the instant you...

I rebuilt aesencryption.net so text AES (128/192/256) runs fully in the browser - the key and plaintext never leave the page. The hard part is staying byte-compatible with common server-side AES libraries (mode, IV, padding, base64 output), so I ship copy-paste equivalents in PHP, Java, Python, Go, Rust, Kotlin and JS. Live tool (mine, free): https://aesencryption.net - feedback on the crypto choices welcome. My own site.

GitHub热门项目 | All parts of Claude Code's system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, security review, agent creation). Updated for each Claude Code version. | Stars: 11,638 | 28 stars today | 语言: JavaScript

GitHub热门项目 | 🦸 AI 编程超能力 · 中文增强版 — superpowers（116k+ ⭐）完整汉化 + 6 个中国原创 skills，让 Claude Code / Copilot CLI / Hermes Agent / Cursor / Windsurf / Kiro / Gemini CLI 等 16 款 AI 编程工具真正会干活 | Stars: 6,504 | 66 stars today | 语言: JavaScript

Like most developers, I have a handful of small utilities I reach for every day — formatting JSON, decoding a JWT, generating a UUID, testing a regex. For years I just googled "json formatter" and pasted my data into whatever site came up first. Then one day I caught myself pasting a production JWT into a random online parser that POSTs everything to its server. That felt bad. So I built my own toolbox that never sends data anywhere. It's called WeTool — free, no login, and every tool runs 100% in your browser . You can open DevTools → Network and confirm there are zero requests while you use it. Here are the 15 I use most: Everyday JSON formatter / validator URL encode / decode Base64 encode / decode Timestamp ↔ date converter Security & encoding Hash calculator (MD5 / SHA) JWT parser UUID generator QR code generator Text & format Regex tester Text diff Markdown preview SQL formatter Debugging Cron expression parser Color converter User-agent parser Two things that matter to me and might to you: Nothing is uploaded. No backend, no login, no tracking of what you type. Local-only. 15 languages. Most tool boxes are English-only; this one isn't. It's free and I'm actively adding tools — if something you use daily is missing, tell me in the comments and I'll add it. 👉 wetool.site

The first question I ask when reviewing a frontend architecture is: where does the state live relative to where it is used? In most codebases I have reviewed, the answer is "in a global store, regardless of scope." This is the wrong default. The rule State should live as close to its consumers as possible. If only one component needs it, it is component state. If a subtree needs it, it is a context or service scoped to that subtree. Global state is for truly global concerns: authentication, locale, theme.