[{"data":1,"prerenderedAt":2741},["ShallowReactive",2],{"blog-10-javascript-one-liners-you-should-know":3,"blog-all-for-nav":294},{"id":4,"title":5,"author":6,"body":7,"date":282,"description":283,"extension":284,"meta":285,"navigation":286,"path":287,"readingTime":157,"relatedTool":288,"seo":289,"stem":290,"tags":291,"__hash__":293},"blog\u002Fblog\u002F10-javascript-one-liners-you-should-know.md","10 JavaScript One-Liners Every Developer Should Know","Codeyaan",{"type":8,"value":9,"toc":270},"minimark",[10,14,18,23,40,43,47,63,66,70,79,82,86,95,98,102,111,115,130,134,161,165,184,187,191,200,207,211,220,226,251,254,257,266],[11,12,5],"h1",{"id":13},"_10-javascript-one-liners-every-developer-should-know",[15,16,17],"p",{},"These aren't just clever tricks — they're practical patterns you'll reach for daily.",[19,20,22],"h2",{"id":21},"_1-remove-duplicates-from-an-array","1. Remove Duplicates from an Array",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-javascript shiki shiki-themes github-light github-dark","const unique = [...new Set(array)];\n","javascript","",[31,32,33],"code",{"__ignoreMap":29},[34,35,38],"span",{"class":36,"line":37},"line",1,[34,39,27],{},[15,41,42],{},"Works with primitives (strings, numbers). For objects, you'll need a different approach.",[19,44,46],{"id":45},"_2-generate-a-random-uuid","2. Generate a Random UUID",[24,48,50],{"className":26,"code":49,"language":28,"meta":29,"style":29},"const uuid = crypto.randomUUID();\n\u002F\u002F \"3b241101-e2bb-4d52-8f4a-6e9d2ed35c21\"\n",[31,51,52,57],{"__ignoreMap":29},[34,53,54],{"class":36,"line":37},[34,55,56],{},"const uuid = crypto.randomUUID();\n",[34,58,60],{"class":36,"line":59},2,[34,61,62],{},"\u002F\u002F \"3b241101-e2bb-4d52-8f4a-6e9d2ed35c21\"\n",[15,64,65],{},"Built into all modern browsers — no library needed.",[19,67,69],{"id":68},"_3-copy-text-to-clipboard","3. Copy Text to Clipboard",[24,71,73],{"className":26,"code":72,"language":28,"meta":29,"style":29},"await navigator.clipboard.writeText(\"Hello, clipboard!\");\n",[31,74,75],{"__ignoreMap":29},[34,76,77],{"class":36,"line":37},[34,78,72],{},[15,80,81],{},"Requires user interaction (click\u002Fkeypress) and HTTPS.",[19,83,85],{"id":84},"_4-shuffle-an-array","4. Shuffle an Array",[24,87,89],{"className":26,"code":88,"language":28,"meta":29,"style":29},"const shuffled = array.sort(() => Math.random() - 0.5);\n",[31,90,91],{"__ignoreMap":29},[34,92,93],{"class":36,"line":37},[34,94,88],{},[15,96,97],{},"Good enough for most cases. For truly unbiased shuffling, use Fisher-Yates.",[19,99,101],{"id":100},"_5-get-a-random-element","5. Get a Random Element",[24,103,105],{"className":26,"code":104,"language":28,"meta":29,"style":29},"const random = array[Math.floor(Math.random() * array.length)];\n",[31,106,107],{"__ignoreMap":29},[34,108,109],{"class":36,"line":37},[34,110,104],{},[19,112,114],{"id":113},"_6-flatten-a-nested-array","6. Flatten a Nested Array",[24,116,118],{"className":26,"code":117,"language":28,"meta":29,"style":29},"const flat = array.flat(Infinity);\n\u002F\u002F [1, [2, [3, 4]]] → [1, 2, 3, 4]\n",[31,119,120,125],{"__ignoreMap":29},[34,121,122],{"class":36,"line":37},[34,123,124],{},"const flat = array.flat(Infinity);\n",[34,126,127],{"class":36,"line":59},[34,128,129],{},"\u002F\u002F [1, [2, [3, 4]]] → [1, 2, 3, 4]\n",[19,131,133],{"id":132},"_7-check-if-an-element-is-in-the-viewport","7. Check if an Element is in the Viewport",[24,135,137],{"className":26,"code":136,"language":28,"meta":29,"style":29},"const isVisible = (el) => {\n  const r = el.getBoundingClientRect();\n  return r.top \u003C window.innerHeight && r.bottom > 0;\n};\n",[31,138,139,144,149,155],{"__ignoreMap":29},[34,140,141],{"class":36,"line":37},[34,142,143],{},"const isVisible = (el) => {\n",[34,145,146],{"class":36,"line":59},[34,147,148],{},"  const r = el.getBoundingClientRect();\n",[34,150,152],{"class":36,"line":151},3,[34,153,154],{},"  return r.top \u003C window.innerHeight && r.bottom > 0;\n",[34,156,158],{"class":36,"line":157},4,[34,159,160],{},"};\n",[19,162,164],{"id":163},"_8-debounce-a-function","8. Debounce a Function",[24,166,168],{"className":26,"code":167,"language":28,"meta":29,"style":29},"const debounce = (fn, ms) => {\n  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };\n};\n",[31,169,170,175,180],{"__ignoreMap":29},[34,171,172],{"class":36,"line":37},[34,173,174],{},"const debounce = (fn, ms) => {\n",[34,176,177],{"class":36,"line":59},[34,178,179],{},"  let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };\n",[34,181,182],{"class":36,"line":151},[34,183,160],{},[15,185,186],{},"Okay, this one is two lines. But it saves you from installing lodash.",[19,188,190],{"id":189},"_9-deep-clone-an-object","9. Deep Clone an Object",[24,192,194],{"className":26,"code":193,"language":28,"meta":29,"style":29},"const clone = structuredClone(original);\n",[31,195,196],{"__ignoreMap":29},[34,197,198],{"class":36,"line":37},[34,199,193],{},[15,201,202,203,206],{},"Native deep cloning — handles dates, maps, sets, and circular references. Finally no more ",[31,204,205],{},"JSON.parse(JSON.stringify(...))"," hacks.",[19,208,210],{"id":209},"_10-group-an-array-by-key","10. Group an Array by Key",[24,212,214],{"className":26,"code":213,"language":28,"meta":29,"style":29},"const grouped = Object.groupBy(items, (item) => item.category);\n",[31,215,216],{"__ignoreMap":29},[34,217,218],{"class":36,"line":37},[34,219,213],{},[15,221,222,225],{},[31,223,224],{},"Object.groupBy"," is a newer API (2024+). Falls back to a reduce for older environments:",[24,227,229],{"className":26,"code":228,"language":28,"meta":29,"style":29},"const grouped = items.reduce((acc, item) => {\n  (acc[item.category] ??= []).push(item);\n  return acc;\n}, {});\n",[31,230,231,236,241,246],{"__ignoreMap":29},[34,232,233],{"class":36,"line":37},[34,234,235],{},"const grouped = items.reduce((acc, item) => {\n",[34,237,238],{"class":36,"line":59},[34,239,240],{},"  (acc[item.category] ??= []).push(item);\n",[34,242,243],{"class":36,"line":151},[34,244,245],{},"  return acc;\n",[34,247,248],{"class":36,"line":157},[34,249,250],{},"}, {});\n",[252,253],"hr",{},[15,255,256],{},"These one-liners are the kind of thing you learn once and use forever. Bookmark this page and come back to it when you need a quick reference.",[15,258,259,260,265],{},"Want to format or test your JavaScript? Try our ",[261,262,264],"a",{"href":263},"\u002Fcode-formatter","Code Formatter"," for instant Prettier formatting right in the browser.",[267,268,269],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":29,"searchDepth":59,"depth":59,"links":271},[272,273,274,275,276,277,278,279,280,281],{"id":21,"depth":59,"text":22},{"id":45,"depth":59,"text":46},{"id":68,"depth":59,"text":69},{"id":84,"depth":59,"text":85},{"id":100,"depth":59,"text":101},{"id":113,"depth":59,"text":114},{"id":132,"depth":59,"text":133},{"id":163,"depth":59,"text":164},{"id":189,"depth":59,"text":190},{"id":209,"depth":59,"text":210},"2026-05-10","Clean, practical JavaScript one-liners for everyday tasks — from array tricks to clipboard access. No libraries needed.","md",{},true,"\u002Fblog\u002F10-javascript-one-liners-you-should-know",null,{"title":5,"description":283},"blog\u002F10-javascript-one-liners-you-should-know",[292,28],"tips","buiDX40CsqiQ7A8cPZovqQwDd5aLh4VbdEMCM2fXUoE",[295,563,1040,1764,1962],{"id":296,"title":297,"author":6,"body":298,"date":551,"description":552,"extension":284,"meta":553,"navigation":286,"path":554,"readingTime":555,"relatedTool":556,"seo":557,"stem":558,"tags":559,"__hash__":562},"blog\u002Fblog\u002Fwhat-is-base64-encoding.md","What is Base64 Encoding and When Should You Use It?",{"type":8,"value":299,"toc":537},[300,303,306,310,318,321,328,335,339,350,356,362,366,371,374,404,408,411,417,428,432,435,439,442,446,453,468,472,479,483,494,519,522,526,534],[11,301,297],{"id":302},"what-is-base64-encoding-and-when-should-you-use-it",[15,304,305],{},"If you've worked with APIs, emails, or embedded images, you've likely encountered Base64. But what exactly is it, and why do we need it?",[19,307,309],{"id":308},"the-problem-base64-solves","The Problem Base64 Solves",[15,311,312,313,317],{},"Many systems — email protocols, URLs, JSON — are designed to handle ",[314,315,316],"strong",{},"text",", not binary data. When you need to transmit binary data (like an image, a file, or encrypted bytes) through these text-based channels, things break.",[15,319,320],{},"Base64 solves this by converting binary data into a safe set of 64 ASCII characters:",[24,322,326],{"className":323,"code":325,"language":316},[324],"language-text","A-Z, a-z, 0-9, +, \u002F\n",[31,327,325],{"__ignoreMap":29},[15,329,330,331,334],{},"Plus ",[31,332,333],{},"="," for padding.",[19,336,338],{"id":337},"how-it-works","How It Works",[15,340,341,342,345,346,349],{},"Base64 takes every ",[314,343,344],{},"3 bytes"," (24 bits) of input and splits them into ",[314,347,348],{},"4 groups of 6 bits",". Each 6-bit group maps to one of the 64 characters.",[24,351,354],{"className":352,"code":353,"language":316},[324],"Input:   \"Hi\"\nBinary:  01001000 01101001\nBase64:  SGk=\n",[31,355,353],{"__ignoreMap":29},[15,357,358,359,361],{},"Since \"Hi\" is only 2 bytes (not divisible by 3), padding (",[31,360,333],{},") is added.",[19,363,365],{"id":364},"common-use-cases","Common Use Cases",[367,368,370],"h3",{"id":369},"_1-data-uris-in-htmlcss","1. Data URIs in HTML\u002FCSS",[15,372,373],{},"Embed small images directly in your HTML without extra HTTP requests:",[24,375,379],{"className":376,"code":377,"language":378,"meta":29,"style":29},"language-html shiki shiki-themes github-light github-dark","\u003Cimg src=\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUg...\" \u002F>\n","html",[31,380,381],{"__ignoreMap":29},[34,382,383,387,391,395,397,401],{"class":36,"line":37},[34,384,386],{"class":385},"sVt8B","\u003C",[34,388,390],{"class":389},"s9eBZ","img",[34,392,394],{"class":393},"sScJk"," src",[34,396,333],{"class":385},[34,398,400],{"class":399},"sZZnC","\"data:image\u002Fpng;base64,iVBORw0KGgoAAAANSUhEUg...\"",[34,402,403],{"class":385}," \u002F>\n",[367,405,407],{"id":406},"_2-api-authentication","2. API Authentication",[15,409,410],{},"HTTP Basic Auth sends credentials as Base64:",[24,412,415],{"className":413,"code":414,"language":316},[324],"Authorization: Basic dXNlcjpwYXNzd29yZA==\n",[31,416,414],{"__ignoreMap":29},[15,418,419,420,423,424,427],{},"(This is ",[31,421,422],{},"user:password"," encoded — ",[314,425,426],{},"not encrypted!",")",[367,429,431],{"id":430},"_3-jwt-tokens","3. JWT Tokens",[15,433,434],{},"JSON Web Tokens use Base64URL encoding for the header and payload sections.",[367,436,438],{"id":437},"_4-email-attachments","4. Email Attachments",[15,440,441],{},"MIME encoding uses Base64 to attach binary files to emails.",[19,443,445],{"id":444},"important-base64-is-not-encryption","Important: Base64 is NOT Encryption",[15,447,448,449,452],{},"A common misconception — Base64 is ",[314,450,451],{},"encoding",", not encryption. Anyone can decode it. Never use it to \"hide\" sensitive data.",[24,454,456],{"className":26,"code":455,"language":28,"meta":29,"style":29},"\u002F\u002F Anyone can decode this\natob('cGFzc3dvcmQxMjM=') \u002F\u002F \"password123\"\n",[31,457,458,463],{"__ignoreMap":29},[34,459,460],{"class":36,"line":37},[34,461,462],{},"\u002F\u002F Anyone can decode this\n",[34,464,465],{"class":36,"line":59},[34,466,467],{},"atob('cGFzc3dvcmQxMjM=') \u002F\u002F \"password123\"\n",[19,469,471],{"id":470},"the-size-overhead","The Size Overhead",[15,473,474,475,478],{},"Base64 increases data size by approximately ",[314,476,477],{},"33%",". Every 3 bytes become 4 characters. Keep this in mind when embedding large files.",[19,480,482],{"id":481},"url-safe-base64","URL-Safe Base64",[15,484,485,486,489,490,493],{},"Standard Base64 uses ",[31,487,488],{},"+"," and ",[31,491,492],{},"\u002F",", which have special meaning in URLs. URL-safe Base64 replaces them:",[495,496,497,506,513],"ul",{},[498,499,500,502,503],"li",{},[31,501,488],{}," → ",[31,504,505],{},"-",[498,507,508,502,510],{},[31,509,492],{},[31,511,512],{},"_",[498,514,515,516,518],{},"Padding ",[31,517,333],{}," is removed",[15,520,521],{},"This variant is used in JWTs and URL parameters.",[19,523,525],{"id":524},"try-it-yourself","Try It Yourself",[15,527,528,529,533],{},"Use our ",[261,530,532],{"href":531},"\u002Fbase64-encode-decode","Base64 Encode\u002FDecode tool"," to experiment with encoding and decoding text. It supports both standard and URL-safe modes, all running in your browser.",[267,535,536],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":29,"searchDepth":59,"depth":59,"links":538},[539,540,541,547,548,549,550],{"id":308,"depth":59,"text":309},{"id":337,"depth":59,"text":338},{"id":364,"depth":59,"text":365,"children":542},[543,544,545,546],{"id":369,"depth":151,"text":370},{"id":406,"depth":151,"text":407},{"id":430,"depth":151,"text":431},{"id":437,"depth":151,"text":438},{"id":444,"depth":59,"text":445},{"id":470,"depth":59,"text":471},{"id":481,"depth":59,"text":482},{"id":524,"depth":59,"text":525},"2026-05-15","Learn what Base64 encoding is, how it works under the hood, and practical use cases for web developers. Includes examples and common pitfalls.",{},"\u002Fblog\u002Fwhat-is-base64-encoding",5,"base64-encode-decode",{"title":297,"description":552},"blog\u002Fwhat-is-base64-encoding",[560,561],"tutorial","tools","UF5GOTWepFy5gUcCE821yFutjU0xOxP-9OniI04B0b4",{"id":564,"title":565,"author":6,"body":566,"date":1030,"description":1031,"extension":284,"meta":1032,"navigation":286,"path":1033,"readingTime":738,"relatedTool":1034,"seo":1035,"stem":1036,"tags":1037,"__hash__":1039},"blog\u002Fblog\u002Funderstanding-jwt-tokens.md","Understanding JWT Tokens: A Developer's Complete Guide",{"type":8,"value":567,"toc":1011},[568,571,574,578,581,587,601,605,609,612,654,657,661,668,741,746,790,794,797,803,807,813,817,821,824,844,848,851,855,858,865,871,875,953,957,965,979,982,986,1008],[11,569,565],{"id":570},"understanding-jwt-tokens-a-developers-complete-guide",[15,572,573],{},"JWTs are everywhere — authentication, API authorization, single sign-on. Yet most developers use them without truly understanding how they work. Let's fix that.",[19,575,577],{"id":576},"what-is-a-jwt","What is a JWT?",[15,579,580],{},"A JSON Web Token (JWT) is a compact, URL-safe string that represents claims between two parties. It's pronounced \"jot\" and looks like this:",[24,582,585],{"className":583,"code":584,"language":316},[324],"eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxMjM0In0.signature\n",[31,586,584],{"__ignoreMap":29},[15,588,589,590,593,594,593,597,600],{},"Three parts separated by dots: ",[314,591,592],{},"Header",", ",[314,595,596],{},"Payload",[314,598,599],{},"Signature",".",[19,602,604],{"id":603},"the-three-parts","The Three Parts",[367,606,608],{"id":607},"_1-header","1. Header",[15,610,611],{},"The header specifies the token type and signing algorithm:",[24,613,617],{"className":614,"code":615,"language":616,"meta":29,"style":29},"language-json shiki shiki-themes github-light github-dark","{\n  \"alg\": \"HS256\",\n  \"typ\": \"JWT\"\n}\n","json",[31,618,619,624,639,649],{"__ignoreMap":29},[34,620,621],{"class":36,"line":37},[34,622,623],{"class":385},"{\n",[34,625,626,630,633,636],{"class":36,"line":59},[34,627,629],{"class":628},"sj4cs","  \"alg\"",[34,631,632],{"class":385},": ",[34,634,635],{"class":399},"\"HS256\"",[34,637,638],{"class":385},",\n",[34,640,641,644,646],{"class":36,"line":151},[34,642,643],{"class":628},"  \"typ\"",[34,645,632],{"class":385},[34,647,648],{"class":399},"\"JWT\"\n",[34,650,651],{"class":36,"line":157},[34,652,653],{"class":385},"}\n",[15,655,656],{},"This is Base64URL-encoded to form the first part of the token.",[367,658,660],{"id":659},"_2-payload","2. Payload",[15,662,663,664,667],{},"The payload contains ",[314,665,666],{},"claims"," — statements about the user and metadata:",[24,669,671],{"className":614,"code":670,"language":616,"meta":29,"style":29},"{\n  \"sub\": \"1234567890\",\n  \"name\": \"Jane Doe\",\n  \"iat\": 1716239022,\n  \"exp\": 1716242622,\n  \"role\": \"admin\"\n}\n",[31,672,673,677,689,701,713,725,736],{"__ignoreMap":29},[34,674,675],{"class":36,"line":37},[34,676,623],{"class":385},[34,678,679,682,684,687],{"class":36,"line":59},[34,680,681],{"class":628},"  \"sub\"",[34,683,632],{"class":385},[34,685,686],{"class":399},"\"1234567890\"",[34,688,638],{"class":385},[34,690,691,694,696,699],{"class":36,"line":151},[34,692,693],{"class":628},"  \"name\"",[34,695,632],{"class":385},[34,697,698],{"class":399},"\"Jane Doe\"",[34,700,638],{"class":385},[34,702,703,706,708,711],{"class":36,"line":157},[34,704,705],{"class":628},"  \"iat\"",[34,707,632],{"class":385},[34,709,710],{"class":628},"1716239022",[34,712,638],{"class":385},[34,714,715,718,720,723],{"class":36,"line":555},[34,716,717],{"class":628},"  \"exp\"",[34,719,632],{"class":385},[34,721,722],{"class":628},"1716242622",[34,724,638],{"class":385},[34,726,728,731,733],{"class":36,"line":727},6,[34,729,730],{"class":628},"  \"role\"",[34,732,632],{"class":385},[34,734,735],{"class":399},"\"admin\"\n",[34,737,739],{"class":36,"line":738},7,[34,740,653],{"class":385},[15,742,743],{},[314,744,745],{},"Standard claims:",[495,747,748,754,760,766,772,778,784],{},[498,749,750,753],{},[31,751,752],{},"iss"," — Issuer (who created the token)",[498,755,756,759],{},[31,757,758],{},"sub"," — Subject (who the token is about)",[498,761,762,765],{},[31,763,764],{},"aud"," — Audience (who the token is for)",[498,767,768,771],{},[31,769,770],{},"exp"," — Expiration time",[498,773,774,777],{},[31,775,776],{},"iat"," — Issued at",[498,779,780,783],{},[31,781,782],{},"nbf"," — Not valid before",[498,785,786,789],{},[31,787,788],{},"jti"," — Unique token ID",[367,791,793],{"id":792},"_3-signature","3. Signature",[15,795,796],{},"The signature ensures the token hasn't been tampered with:",[24,798,801],{"className":799,"code":800,"language":316},[324],"HMACSHA256(\n  base64UrlEncode(header) + \".\" + base64UrlEncode(payload),\n  secret\n)\n",[31,802,800],{"__ignoreMap":29},[19,804,806],{"id":805},"how-authentication-works-with-jwt","How Authentication Works with JWT",[24,808,811],{"className":809,"code":810,"language":316},[324],"1. User logs in with email\u002Fpassword\n2. Server verifies credentials\n3. Server creates a JWT with user info + signs it\n4. Server sends JWT to client\n5. Client stores JWT (localStorage, cookie, memory)\n6. Client sends JWT in Authorization header on each request\n7. Server verifies signature + checks expiration\n8. Server processes the request\n",[31,812,810],{"__ignoreMap":29},[19,814,816],{"id":815},"common-security-mistakes","Common Security Mistakes",[367,818,820],{"id":819},"never-store-secrets-in-the-payload","Never store secrets in the payload",[15,822,823],{},"The payload is just Base64-encoded — anyone can decode it:",[24,825,827],{"className":26,"code":826,"language":28,"meta":29,"style":29},"\u002F\u002F This is NOT encryption\natob('eyJwYXNzd29yZCI6InNlY3JldCJ9')\n\u002F\u002F '{\"password\":\"secret\"}'\n",[31,828,829,834,839],{"__ignoreMap":29},[34,830,831],{"class":36,"line":37},[34,832,833],{},"\u002F\u002F This is NOT encryption\n",[34,835,836],{"class":36,"line":59},[34,837,838],{},"atob('eyJwYXNzd29yZCI6InNlY3JldCJ9')\n",[34,840,841],{"class":36,"line":151},[34,842,843],{},"\u002F\u002F '{\"password\":\"secret\"}'\n",[367,845,847],{"id":846},"always-validate-the-signature-server-side","Always validate the signature server-side",[15,849,850],{},"Never trust a JWT without verifying its signature. The whole point of the signature is proving the token was issued by your server.",[367,852,854],{"id":853},"set-short-expiration-times","Set short expiration times",[15,856,857],{},"JWTs can't be revoked once issued (unlike session tokens). Keep expiration times short (15 minutes to 1 hour) and use refresh tokens for longer sessions.",[367,859,861,862],{"id":860},"dont-use-alg-none","Don't use ",[31,863,864],{},"alg: \"none\"",[15,866,867,868,870],{},"Some JWT libraries accept ",[31,869,864],{}," which means no signature verification. Always reject tokens with no algorithm.",[19,872,874],{"id":873},"jwt-vs-session-tokens","JWT vs Session Tokens",[876,877,878,894],"table",{},[879,880,881],"thead",{},[882,883,884,888,891],"tr",{},[885,886,887],"th",{},"Feature",[885,889,890],{},"JWT",[885,892,893],{},"Session Token",[895,896,897,909,920,931,942],"tbody",{},[882,898,899,903,906],{},[900,901,902],"td",{},"Storage",[900,904,905],{},"Client-side",[900,907,908],{},"Server-side",[882,910,911,914,917],{},[900,912,913],{},"Scalability",[900,915,916],{},"No server state",[900,918,919],{},"Requires session store",[882,921,922,925,928],{},[900,923,924],{},"Revocation",[900,926,927],{},"Hard (can't invalidate)",[900,929,930],{},"Easy (delete from store)",[882,932,933,936,939],{},[900,934,935],{},"Size",[900,937,938],{},"Larger (contains claims)",[900,940,941],{},"Small (just an ID)",[882,943,944,947,950],{},[900,945,946],{},"Best for",[900,948,949],{},"Microservices, APIs",[900,951,952],{},"Traditional web apps",[19,954,956],{"id":955},"debugging-jwts","Debugging JWTs",[15,958,959,960,964],{},"When a JWT isn't working, you need to inspect its contents. Use our ",[261,961,963],{"href":962},"\u002Fjwt-decoder","JWT Decoder"," to:",[495,966,967,970,973,976],{},[498,968,969],{},"See the header algorithm",[498,971,972],{},"Read all payload claims",[498,974,975],{},"Check if the token is expired",[498,977,978],{},"View the issued\u002Fexpiration timeline",[15,980,981],{},"All decoding happens in your browser — your tokens never leave your device.",[19,983,985],{"id":984},"key-takeaways","Key Takeaways",[987,988,989,996,999,1002,1005],"ol",{},[498,990,991,992,995],{},"JWTs are ",[314,993,994],{},"signed",", not encrypted — anyone can read the payload",[498,997,998],{},"The signature prevents tampering, not reading",[498,1000,1001],{},"Keep expiration times short",[498,1003,1004],{},"Store tokens securely (httpOnly cookies > localStorage)",[498,1006,1007],{},"Always verify signatures server-side",[267,1009,1010],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":29,"searchDepth":59,"depth":59,"links":1012},[1013,1014,1019,1020,1027,1028,1029],{"id":576,"depth":59,"text":577},{"id":603,"depth":59,"text":604,"children":1015},[1016,1017,1018],{"id":607,"depth":151,"text":608},{"id":659,"depth":151,"text":660},{"id":792,"depth":151,"text":793},{"id":805,"depth":59,"text":806},{"id":815,"depth":59,"text":816,"children":1021},[1022,1023,1024,1025],{"id":819,"depth":151,"text":820},{"id":846,"depth":151,"text":847},{"id":853,"depth":151,"text":854},{"id":860,"depth":151,"text":1026},"Don't use alg: \"none\"",{"id":873,"depth":59,"text":874},{"id":955,"depth":59,"text":956},{"id":984,"depth":59,"text":985},"2026-05-14","Everything you need to know about JSON Web Tokens — how they work, when to use them, security pitfalls to avoid, and how to debug them.",{},"\u002Fblog\u002Funderstanding-jwt-tokens","jwt-decoder",{"title":565,"description":1031},"blog\u002Funderstanding-jwt-tokens",[560,1038],"security","AdUkIm9zKPkAkRiwSwgn4LLTIoYbhhxAwdKK6Uo83Hw",{"id":1041,"title":1042,"author":6,"body":1043,"date":1754,"description":1755,"extension":284,"meta":1756,"navigation":286,"path":1757,"readingTime":1428,"relatedTool":1758,"seo":1759,"stem":1760,"tags":1761,"__hash__":1763},"blog\u002Fblog\u002Fregex-cheat-sheet-for-developers.md","Regex Cheat Sheet: The Only Guide You'll Ever Need",{"type":8,"value":1044,"toc":1735},[1045,1048,1051,1055,1166,1170,1242,1251,1287,1291,1339,1354,1358,1383,1387,1443,1447,1451,1460,1464,1473,1477,1486,1490,1499,1503,1512,1516,1525,1529,1587,1591,1677,1681,1721,1725,1733],[11,1046,1042],{"id":1047},"regex-cheat-sheet-the-only-guide-youll-ever-need",[15,1049,1050],{},"Regular expressions are one of those tools that feel like dark magic until you learn the patterns. This cheat sheet covers everything you need for day-to-day development.",[19,1052,1054],{"id":1053},"the-basics","The Basics",[876,1056,1057,1070],{},[879,1058,1059],{},[882,1060,1061,1064,1067],{},[885,1062,1063],{},"Pattern",[885,1065,1066],{},"Matches",[885,1068,1069],{},"Example",[895,1071,1072,1087,1103,1119,1135,1151],{},[882,1073,1074,1078,1081],{},[900,1075,1076],{},[31,1077,600],{},[900,1079,1080],{},"Any character except newline",[900,1082,1083,1086],{},[31,1084,1085],{},"a.c"," → \"abc\", \"a1c\"",[882,1088,1089,1094,1097],{},[900,1090,1091],{},[31,1092,1093],{},"\\d",[900,1095,1096],{},"Any digit (0-9)",[900,1098,1099,1102],{},[31,1100,1101],{},"\\d\\d"," → \"42\"",[882,1104,1105,1110,1113],{},[900,1106,1107],{},[31,1108,1109],{},"\\w",[900,1111,1112],{},"Word character (a-z, A-Z, 0-9, _)",[900,1114,1115,1118],{},[31,1116,1117],{},"\\w+"," → \"hello_world\"",[882,1120,1121,1126,1129],{},[900,1122,1123],{},[31,1124,1125],{},"\\s",[900,1127,1128],{},"Whitespace (space, tab, newline)",[900,1130,1131,1134],{},[31,1132,1133],{},"\\s+"," → \"   \"",[882,1136,1137,1142,1145],{},[900,1138,1139],{},[31,1140,1141],{},"\\D",[900,1143,1144],{},"NOT a digit",[900,1146,1147,1150],{},[31,1148,1149],{},"\\D+"," → \"abc\"",[882,1152,1153,1158,1161],{},[900,1154,1155],{},[31,1156,1157],{},"\\W",[900,1159,1160],{},"NOT a word character",[900,1162,1163,1165],{},[31,1164,1157],{}," → \"@\", \"!\"",[19,1167,1169],{"id":1168},"quantifiers","Quantifiers",[876,1171,1172,1181],{},[879,1173,1174],{},[882,1175,1176,1178],{},[885,1177,1063],{},[885,1179,1180],{},"Meaning",[895,1182,1183,1193,1202,1212,1222,1232],{},[882,1184,1185,1190],{},[900,1186,1187],{},[31,1188,1189],{},"*",[900,1191,1192],{},"0 or more",[882,1194,1195,1199],{},[900,1196,1197],{},[31,1198,488],{},[900,1200,1201],{},"1 or more",[882,1203,1204,1209],{},[900,1205,1206],{},[31,1207,1208],{},"?",[900,1210,1211],{},"0 or 1 (optional)",[882,1213,1214,1219],{},[900,1215,1216],{},[31,1217,1218],{},"{3}",[900,1220,1221],{},"Exactly 3",[882,1223,1224,1229],{},[900,1225,1226],{},[31,1227,1228],{},"{2,5}",[900,1230,1231],{},"Between 2 and 5",[882,1233,1234,1239],{},[900,1235,1236],{},[31,1237,1238],{},"{3,}",[900,1240,1241],{},"3 or more",[15,1243,1244,1247,1248,1250],{},[314,1245,1246],{},"Greedy vs Lazy",": By default, quantifiers are greedy (match as much as possible). Add ",[31,1249,1208],{}," to make them lazy:",[24,1252,1254],{"className":26,"code":1253,"language":28,"meta":29,"style":29},"\u002F\u002F Greedy: matches the longest possible string\n\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*>\u002F);  \u002F\u002F \"\u003Cdiv>hello\u003C\u002Fdiv>\"\n\n\u002F\u002F Lazy: matches the shortest possible string\n\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*?>\u002F); \u002F\u002F \"\u003Cdiv>\"\n",[31,1255,1256,1261,1269,1274,1279],{"__ignoreMap":29},[34,1257,1258],{"class":36,"line":37},[34,1259,1260],{},"\u002F\u002F Greedy: matches the longest possible string\n",[34,1262,1263,1266],{"class":36,"line":59},[34,1264,1265],{},"\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*>\u002F);",[34,1267,1268],{},"  \u002F\u002F \"\u003Cdiv>hello\u003C\u002Fdiv>\"\n",[34,1270,1271],{"class":36,"line":151},[34,1272,1273],{"emptyLinePlaceholder":286},"\n",[34,1275,1276],{"class":36,"line":157},[34,1277,1278],{},"\u002F\u002F Lazy: matches the shortest possible string\n",[34,1280,1281,1284],{"class":36,"line":555},[34,1282,1283],{},"\"\u003Cdiv>hello\u003C\u002Fdiv>\".match(\u002F\u003C.*?>\u002F);",[34,1285,1286],{}," \u002F\u002F \"\u003Cdiv>\"\n",[19,1288,1290],{"id":1289},"anchors","Anchors",[876,1292,1293,1301],{},[879,1294,1295],{},[882,1296,1297,1299],{},[885,1298,1063],{},[885,1300,1180],{},[895,1302,1303,1317,1329],{},[882,1304,1305,1310],{},[900,1306,1307],{},[31,1308,1309],{},"^",[900,1311,1312,1313,1316],{},"Start of string (or line with ",[31,1314,1315],{},"m"," flag)",[882,1318,1319,1324],{},[900,1320,1321],{},[31,1322,1323],{},"$",[900,1325,1326,1327,1316],{},"End of string (or line with ",[31,1328,1315],{},[882,1330,1331,1336],{},[900,1332,1333],{},[31,1334,1335],{},"\\b",[900,1337,1338],{},"Word boundary",[24,1340,1342],{"className":26,"code":1341,"language":28,"meta":29,"style":29},"\u002F^\\d+$\u002F.test(\"12345\");  \u002F\u002F true — entire string is digits\n\u002F^\\d+$\u002F.test(\"123ab\");  \u002F\u002F false\n",[31,1343,1344,1349],{"__ignoreMap":29},[34,1345,1346],{"class":36,"line":37},[34,1347,1348],{},"\u002F^\\d+$\u002F.test(\"12345\");  \u002F\u002F true — entire string is digits\n",[34,1350,1351],{"class":36,"line":59},[34,1352,1353],{},"\u002F^\\d+$\u002F.test(\"123ab\");  \u002F\u002F false\n",[19,1355,1357],{"id":1356},"character-classes","Character Classes",[24,1359,1361],{"className":26,"code":1360,"language":28,"meta":29,"style":29},"[abc]     \u002F\u002F a, b, or c\n[a-z]     \u002F\u002F any lowercase letter\n[A-Z0-9]  \u002F\u002F uppercase letter or digit\n[^abc]    \u002F\u002F NOT a, b, or c (negation)\n",[31,1362,1363,1368,1373,1378],{"__ignoreMap":29},[34,1364,1365],{"class":36,"line":37},[34,1366,1367],{},"[abc]     \u002F\u002F a, b, or c\n",[34,1369,1370],{"class":36,"line":59},[34,1371,1372],{},"[a-z]     \u002F\u002F any lowercase letter\n",[34,1374,1375],{"class":36,"line":151},[34,1376,1377],{},"[A-Z0-9]  \u002F\u002F uppercase letter or digit\n",[34,1379,1380],{"class":36,"line":157},[34,1381,1382],{},"[^abc]    \u002F\u002F NOT a, b, or c (negation)\n",[19,1384,1386],{"id":1385},"groups-and-capturing","Groups and Capturing",[24,1388,1390],{"className":26,"code":1389,"language":28,"meta":29,"style":29},"\u002F\u002F Capturing group\nconst match = \"2026-05-12\".match(\u002F(\\d{4})-(\\d{2})-(\\d{2})\u002F);\n\u002F\u002F match[1] = \"2026\", match[2] = \"05\", match[3] = \"12\"\n\n\u002F\u002F Named group\nconst match2 = \"2026-05-12\".match(\u002F(?\u003Cyear>\\d{4})-(?\u003Cmonth>\\d{2})-(?\u003Cday>\\d{2})\u002F);\n\u002F\u002F match2.groups.year = \"2026\"\n\n\u002F\u002F Non-capturing group (just for grouping, no capture)\n\u002F(?:https?):\\\u002F\\\u002F\u002F\n",[31,1391,1392,1397,1402,1407,1411,1416,1421,1426,1431,1437],{"__ignoreMap":29},[34,1393,1394],{"class":36,"line":37},[34,1395,1396],{},"\u002F\u002F Capturing group\n",[34,1398,1399],{"class":36,"line":59},[34,1400,1401],{},"const match = \"2026-05-12\".match(\u002F(\\d{4})-(\\d{2})-(\\d{2})\u002F);\n",[34,1403,1404],{"class":36,"line":151},[34,1405,1406],{},"\u002F\u002F match[1] = \"2026\", match[2] = \"05\", match[3] = \"12\"\n",[34,1408,1409],{"class":36,"line":157},[34,1410,1273],{"emptyLinePlaceholder":286},[34,1412,1413],{"class":36,"line":555},[34,1414,1415],{},"\u002F\u002F Named group\n",[34,1417,1418],{"class":36,"line":727},[34,1419,1420],{},"const match2 = \"2026-05-12\".match(\u002F(?\u003Cyear>\\d{4})-(?\u003Cmonth>\\d{2})-(?\u003Cday>\\d{2})\u002F);\n",[34,1422,1423],{"class":36,"line":738},[34,1424,1425],{},"\u002F\u002F match2.groups.year = \"2026\"\n",[34,1427,1429],{"class":36,"line":1428},8,[34,1430,1273],{"emptyLinePlaceholder":286},[34,1432,1434],{"class":36,"line":1433},9,[34,1435,1436],{},"\u002F\u002F Non-capturing group (just for grouping, no capture)\n",[34,1438,1440],{"class":36,"line":1439},10,[34,1441,1442],{},"\u002F(?:https?):\\\u002F\\\u002F\u002F\n",[19,1444,1446],{"id":1445},"real-world-patterns","Real-World Patterns",[367,1448,1450],{"id":1449},"email-validation-simple","Email validation (simple)",[24,1452,1454],{"className":26,"code":1453,"language":28,"meta":29,"style":29},"\u002F[\\w.-]+@[\\w.-]+\\.[a-zA-Z]{2,}\u002F\n",[31,1455,1456],{"__ignoreMap":29},[34,1457,1458],{"class":36,"line":37},[34,1459,1453],{},[367,1461,1463],{"id":1462},"url-extraction","URL extraction",[24,1465,1467],{"className":26,"code":1466,"language":28,"meta":29,"style":29},"\u002Fhttps?:\\\u002F\\\u002F[\\w.-]+(?:\\\u002F[\\w.\u002F-]*)?\u002Fg\n",[31,1468,1469],{"__ignoreMap":29},[34,1470,1471],{"class":36,"line":37},[34,1472,1466],{},[367,1474,1476],{"id":1475},"phone-number","Phone number",[24,1478,1480],{"className":26,"code":1479,"language":28,"meta":29,"style":29},"\u002F\\+?\\d[\\d\\s-]{7,}\\d\u002F\n",[31,1481,1482],{"__ignoreMap":29},[34,1483,1484],{"class":36,"line":37},[34,1485,1479],{},[367,1487,1489],{"id":1488},"hex-color","Hex color",[24,1491,1493],{"className":26,"code":1492,"language":28,"meta":29,"style":29},"\u002F#[0-9a-fA-F]{3,8}\u002F\n",[31,1494,1495],{"__ignoreMap":29},[34,1496,1497],{"class":36,"line":37},[34,1498,1492],{},[367,1500,1502],{"id":1501},"ip-address","IP address",[24,1504,1506],{"className":26,"code":1505,"language":28,"meta":29,"style":29},"\u002F\\b\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\b\u002F\n",[31,1507,1508],{"__ignoreMap":29},[34,1509,1510],{"class":36,"line":37},[34,1511,1505],{},[367,1513,1515],{"id":1514},"password-strength-8-chars-upper-lower-digit","Password strength (8+ chars, upper, lower, digit)",[24,1517,1519],{"className":26,"code":1518,"language":28,"meta":29,"style":29},"\u002F^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d).{8,}$\u002F\n",[31,1520,1521],{"__ignoreMap":29},[34,1522,1523],{"class":36,"line":37},[34,1524,1518],{},[19,1526,1528],{"id":1527},"lookaheads-and-lookbehinds","Lookaheads and Lookbehinds",[24,1530,1532],{"className":26,"code":1531,"language":28,"meta":29,"style":29},"\u002F\u002F Positive lookahead: match \"foo\" only if followed by \"bar\"\n\u002Ffoo(?=bar)\u002F\n\n\u002F\u002F Negative lookahead: match \"foo\" only if NOT followed by \"bar\"\n\u002Ffoo(?!bar)\u002F\n\n\u002F\u002F Positive lookbehind: match \"bar\" only if preceded by \"foo\"\n\u002F(?\u003C=foo)bar\u002F\n\n\u002F\u002F Negative lookbehind: match \"bar\" only if NOT preceded by \"foo\"\n\u002F(?\u003C!foo)bar\u002F\n",[31,1533,1534,1539,1544,1548,1553,1558,1562,1567,1572,1576,1581],{"__ignoreMap":29},[34,1535,1536],{"class":36,"line":37},[34,1537,1538],{},"\u002F\u002F Positive lookahead: match \"foo\" only if followed by \"bar\"\n",[34,1540,1541],{"class":36,"line":59},[34,1542,1543],{},"\u002Ffoo(?=bar)\u002F\n",[34,1545,1546],{"class":36,"line":151},[34,1547,1273],{"emptyLinePlaceholder":286},[34,1549,1550],{"class":36,"line":157},[34,1551,1552],{},"\u002F\u002F Negative lookahead: match \"foo\" only if NOT followed by \"bar\"\n",[34,1554,1555],{"class":36,"line":555},[34,1556,1557],{},"\u002Ffoo(?!bar)\u002F\n",[34,1559,1560],{"class":36,"line":727},[34,1561,1273],{"emptyLinePlaceholder":286},[34,1563,1564],{"class":36,"line":738},[34,1565,1566],{},"\u002F\u002F Positive lookbehind: match \"bar\" only if preceded by \"foo\"\n",[34,1568,1569],{"class":36,"line":1428},[34,1570,1571],{},"\u002F(?\u003C=foo)bar\u002F\n",[34,1573,1574],{"class":36,"line":1433},[34,1575,1273],{"emptyLinePlaceholder":286},[34,1577,1578],{"class":36,"line":1439},[34,1579,1580],{},"\u002F\u002F Negative lookbehind: match \"bar\" only if NOT preceded by \"foo\"\n",[34,1582,1584],{"class":36,"line":1583},11,[34,1585,1586],{},"\u002F(?\u003C!foo)bar\u002F\n",[19,1588,1590],{"id":1589},"javascript-regex-methods","JavaScript Regex Methods",[24,1592,1594],{"className":26,"code":1593,"language":28,"meta":29,"style":29},"\u002F\u002F Test if pattern matches\n\u002F\\d+\u002F.test(\"hello123\");  \u002F\u002F true\n\n\u002F\u002F Find first match\n\"hello123\".match(\u002F\\d+\u002F);  \u002F\u002F [\"123\"]\n\n\u002F\u002F Find all matches\n\"a1b2c3\".matchAll(\u002F\\d\u002Fg);  \u002F\u002F iterator of [\"1\"], [\"2\"], [\"3\"]\n\n\u002F\u002F Replace\n\"hello world\".replace(\u002Fworld\u002F, \"JS\");  \u002F\u002F \"hello JS\"\n\n\u002F\u002F Split\n\"a,b,,c\".split(\u002F,+\u002F);  \u002F\u002F [\"a\", \"b\", \"c\"]\n",[31,1595,1596,1601,1606,1610,1615,1623,1627,1632,1640,1644,1649,1657,1662,1668],{"__ignoreMap":29},[34,1597,1598],{"class":36,"line":37},[34,1599,1600],{},"\u002F\u002F Test if pattern matches\n",[34,1602,1603],{"class":36,"line":59},[34,1604,1605],{},"\u002F\\d+\u002F.test(\"hello123\");  \u002F\u002F true\n",[34,1607,1608],{"class":36,"line":151},[34,1609,1273],{"emptyLinePlaceholder":286},[34,1611,1612],{"class":36,"line":157},[34,1613,1614],{},"\u002F\u002F Find first match\n",[34,1616,1617,1620],{"class":36,"line":555},[34,1618,1619],{},"\"hello123\".match(\u002F\\d+\u002F);",[34,1621,1622],{},"  \u002F\u002F [\"123\"]\n",[34,1624,1625],{"class":36,"line":727},[34,1626,1273],{"emptyLinePlaceholder":286},[34,1628,1629],{"class":36,"line":738},[34,1630,1631],{},"\u002F\u002F Find all matches\n",[34,1633,1634,1637],{"class":36,"line":1428},[34,1635,1636],{},"\"a1b2c3\".matchAll(\u002F\\d\u002Fg);",[34,1638,1639],{},"  \u002F\u002F iterator of [\"1\"], [\"2\"], [\"3\"]\n",[34,1641,1642],{"class":36,"line":1433},[34,1643,1273],{"emptyLinePlaceholder":286},[34,1645,1646],{"class":36,"line":1439},[34,1647,1648],{},"\u002F\u002F Replace\n",[34,1650,1651,1654],{"class":36,"line":1583},[34,1652,1653],{},"\"hello world\".replace(\u002Fworld\u002F, \"JS\");",[34,1655,1656],{},"  \u002F\u002F \"hello JS\"\n",[34,1658,1660],{"class":36,"line":1659},12,[34,1661,1273],{"emptyLinePlaceholder":286},[34,1663,1665],{"class":36,"line":1664},13,[34,1666,1667],{},"\u002F\u002F Split\n",[34,1669,1671,1674],{"class":36,"line":1670},14,[34,1672,1673],{},"\"a,b,,c\".split(\u002F,+\u002F);",[34,1675,1676],{},"  \u002F\u002F [\"a\", \"b\", \"c\"]\n",[19,1678,1680],{"id":1679},"common-mistakes","Common Mistakes",[987,1682,1683,1695,1705,1715],{},[498,1684,1685,632,1688,1690,1691,1694],{},[314,1686,1687],{},"Not escaping special characters",[31,1689,600],{}," matches ANY character. Use ",[31,1692,1693],{},"\\."," for a literal dot.",[498,1696,1697,1704],{},[314,1698,1699,1700,1703],{},"Forgetting the ",[31,1701,1702],{},"g"," flag",": Without it, only the first match is returned.",[498,1706,1707,1710,1711,1714],{},[314,1708,1709],{},"Catastrophic backtracking",": Nested quantifiers like ",[31,1712,1713],{},"(a+)+"," can cause exponential processing time.",[498,1716,1717,1720],{},[314,1718,1719],{},"Over-engineering email validation",": Use a simple pattern + send a verification email instead.",[19,1722,1724],{"id":1723},"practice","Practice",[15,1726,1727,1728,1732],{},"Test all these patterns live on our ",[261,1729,1731],{"href":1730},"\u002Fregex-tester","Regex Tester",". It highlights matches in real-time and shows capture groups — perfect for learning and debugging.",[267,1734,269],{},{"title":29,"searchDepth":59,"depth":59,"links":1736},[1737,1738,1739,1740,1741,1742,1750,1751,1752,1753],{"id":1053,"depth":59,"text":1054},{"id":1168,"depth":59,"text":1169},{"id":1289,"depth":59,"text":1290},{"id":1356,"depth":59,"text":1357},{"id":1385,"depth":59,"text":1386},{"id":1445,"depth":59,"text":1446,"children":1743},[1744,1745,1746,1747,1748,1749],{"id":1449,"depth":151,"text":1450},{"id":1462,"depth":151,"text":1463},{"id":1475,"depth":151,"text":1476},{"id":1488,"depth":151,"text":1489},{"id":1501,"depth":151,"text":1502},{"id":1514,"depth":151,"text":1515},{"id":1527,"depth":59,"text":1528},{"id":1589,"depth":59,"text":1590},{"id":1679,"depth":59,"text":1680},{"id":1723,"depth":59,"text":1724},"2026-05-12","A practical regex reference covering patterns, quantifiers, groups, lookaheads, and real-world examples. Bookmark this one.",{},"\u002Fblog\u002Fregex-cheat-sheet-for-developers","regex-tester",{"title":1042,"description":1755},"blog\u002Fregex-cheat-sheet-for-developers",[1762,28],"guide","7KPh7MNLAvuSWYeDkRjys_6c6VrsQaLfhU5txrCPnH8",{"id":4,"title":5,"author":6,"body":1765,"date":282,"description":283,"extension":284,"meta":1959,"navigation":286,"path":287,"readingTime":157,"relatedTool":288,"seo":1960,"stem":290,"tags":1961,"__hash__":293},{"type":8,"value":1766,"toc":1947},[1767,1769,1771,1773,1781,1783,1785,1797,1799,1801,1809,1811,1813,1821,1823,1825,1833,1835,1847,1849,1869,1871,1887,1889,1891,1899,1903,1905,1913,1917,1937,1939,1941,1945],[11,1768,5],{"id":13},[15,1770,17],{},[19,1772,22],{"id":21},[24,1774,1775],{"className":26,"code":27,"language":28,"meta":29,"style":29},[31,1776,1777],{"__ignoreMap":29},[34,1778,1779],{"class":36,"line":37},[34,1780,27],{},[15,1782,42],{},[19,1784,46],{"id":45},[24,1786,1787],{"className":26,"code":49,"language":28,"meta":29,"style":29},[31,1788,1789,1793],{"__ignoreMap":29},[34,1790,1791],{"class":36,"line":37},[34,1792,56],{},[34,1794,1795],{"class":36,"line":59},[34,1796,62],{},[15,1798,65],{},[19,1800,69],{"id":68},[24,1802,1803],{"className":26,"code":72,"language":28,"meta":29,"style":29},[31,1804,1805],{"__ignoreMap":29},[34,1806,1807],{"class":36,"line":37},[34,1808,72],{},[15,1810,81],{},[19,1812,85],{"id":84},[24,1814,1815],{"className":26,"code":88,"language":28,"meta":29,"style":29},[31,1816,1817],{"__ignoreMap":29},[34,1818,1819],{"class":36,"line":37},[34,1820,88],{},[15,1822,97],{},[19,1824,101],{"id":100},[24,1826,1827],{"className":26,"code":104,"language":28,"meta":29,"style":29},[31,1828,1829],{"__ignoreMap":29},[34,1830,1831],{"class":36,"line":37},[34,1832,104],{},[19,1834,114],{"id":113},[24,1836,1837],{"className":26,"code":117,"language":28,"meta":29,"style":29},[31,1838,1839,1843],{"__ignoreMap":29},[34,1840,1841],{"class":36,"line":37},[34,1842,124],{},[34,1844,1845],{"class":36,"line":59},[34,1846,129],{},[19,1848,133],{"id":132},[24,1850,1851],{"className":26,"code":136,"language":28,"meta":29,"style":29},[31,1852,1853,1857,1861,1865],{"__ignoreMap":29},[34,1854,1855],{"class":36,"line":37},[34,1856,143],{},[34,1858,1859],{"class":36,"line":59},[34,1860,148],{},[34,1862,1863],{"class":36,"line":151},[34,1864,154],{},[34,1866,1867],{"class":36,"line":157},[34,1868,160],{},[19,1870,164],{"id":163},[24,1872,1873],{"className":26,"code":167,"language":28,"meta":29,"style":29},[31,1874,1875,1879,1883],{"__ignoreMap":29},[34,1876,1877],{"class":36,"line":37},[34,1878,174],{},[34,1880,1881],{"class":36,"line":59},[34,1882,179],{},[34,1884,1885],{"class":36,"line":151},[34,1886,160],{},[15,1888,186],{},[19,1890,190],{"id":189},[24,1892,1893],{"className":26,"code":193,"language":28,"meta":29,"style":29},[31,1894,1895],{"__ignoreMap":29},[34,1896,1897],{"class":36,"line":37},[34,1898,193],{},[15,1900,202,1901,206],{},[31,1902,205],{},[19,1904,210],{"id":209},[24,1906,1907],{"className":26,"code":213,"language":28,"meta":29,"style":29},[31,1908,1909],{"__ignoreMap":29},[34,1910,1911],{"class":36,"line":37},[34,1912,213],{},[15,1914,1915,225],{},[31,1916,224],{},[24,1918,1919],{"className":26,"code":228,"language":28,"meta":29,"style":29},[31,1920,1921,1925,1929,1933],{"__ignoreMap":29},[34,1922,1923],{"class":36,"line":37},[34,1924,235],{},[34,1926,1927],{"class":36,"line":59},[34,1928,240],{},[34,1930,1931],{"class":36,"line":151},[34,1932,245],{},[34,1934,1935],{"class":36,"line":157},[34,1936,250],{},[252,1938],{},[15,1940,256],{},[15,1942,259,1943,265],{},[261,1944,264],{"href":263},[267,1946,269],{},{"title":29,"searchDepth":59,"depth":59,"links":1948},[1949,1950,1951,1952,1953,1954,1955,1956,1957,1958],{"id":21,"depth":59,"text":22},{"id":45,"depth":59,"text":46},{"id":68,"depth":59,"text":69},{"id":84,"depth":59,"text":85},{"id":100,"depth":59,"text":101},{"id":113,"depth":59,"text":114},{"id":132,"depth":59,"text":133},{"id":163,"depth":59,"text":164},{"id":189,"depth":59,"text":190},{"id":209,"depth":59,"text":210},{},{"title":5,"description":283},[292,28],{"id":1963,"title":1964,"author":6,"body":1965,"date":2732,"description":2733,"extension":284,"meta":2734,"navigation":286,"path":2735,"readingTime":727,"relatedTool":2736,"seo":2737,"stem":2738,"tags":2739,"__hash__":2740},"blog\u002Fblog\u002Fcss-gradients-complete-guide.md","CSS Gradients: From Basics to Beautiful Backgrounds",{"type":8,"value":1966,"toc":2716},[1967,1970,1973,1977,1980,2063,2067,2070,2101,2155,2159,2162,2244,2248,2251,2324,2326,2330,2351,2355,2402,2406,2477,2481,2664,2668,2697,2701,2704,2706,2713],[11,1968,1964],{"id":1969},"css-gradients-from-basics-to-beautiful-backgrounds",[15,1971,1972],{},"Gradients can transform a flat design into something that feels polished and professional. Here's everything you need to know.",[19,1974,1976],{"id":1975},"linear-gradients","Linear Gradients",[15,1978,1979],{},"The most common type — colors transition along a straight line.",[24,1981,1985],{"className":1982,"code":1983,"language":1984,"meta":29,"style":29},"language-css shiki shiki-themes github-light github-dark","\u002F* Top to bottom (default) *\u002F\nbackground: linear-gradient(#3b82f6, #8b5cf6);\n\n\u002F* With angle *\u002F\nbackground: linear-gradient(135deg, #667eea, #764ba2);\n\n\u002F* Multiple color stops *\u002F\nbackground: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);\n","css",[31,1986,1987,1993,2010,2014,2019,2034,2038,2043],{"__ignoreMap":29},[34,1988,1989],{"class":36,"line":37},[34,1990,1992],{"class":1991},"sJ8bj","\u002F* Top to bottom (default) *\u002F\n",[34,1994,1995,1998,2002,2004,2007],{"class":36,"line":59},[34,1996,1997],{"class":385},"background: linear-gradient(",[34,1999,2001],{"class":2000},"s7hpK","#3b82f6",[34,2003,593],{"class":385},[34,2005,2006],{"class":2000},"#8b5cf6",[34,2008,2009],{"class":385},");\n",[34,2011,2012],{"class":36,"line":151},[34,2013,1273],{"emptyLinePlaceholder":286},[34,2015,2016],{"class":36,"line":157},[34,2017,2018],{"class":1991},"\u002F* With angle *\u002F\n",[34,2020,2021,2024,2027,2029,2032],{"class":36,"line":555},[34,2022,2023],{"class":385},"background: linear-gradient(135deg, ",[34,2025,2026],{"class":2000},"#667eea",[34,2028,593],{"class":385},[34,2030,2031],{"class":2000},"#764ba2",[34,2033,2009],{"class":385},[34,2035,2036],{"class":36,"line":727},[34,2037,1273],{"emptyLinePlaceholder":286},[34,2039,2040],{"class":36,"line":738},[34,2041,2042],{"class":1991},"\u002F* Multiple color stops *\u002F\n",[34,2044,2045,2048,2051,2053,2056,2058,2061],{"class":36,"line":1428},[34,2046,2047],{"class":385},"background: linear-gradient(90deg, ",[34,2049,2050],{"class":393},"#ff6b6b",[34,2052,593],{"class":385},[34,2054,2055],{"class":393},"#feca57",[34,2057,593],{"class":385},[34,2059,2060],{"class":2000},"#48dbfb",[34,2062,2009],{"class":385},[367,2064,2066],{"id":2065},"direction-keywords","Direction Keywords",[15,2068,2069],{},"Instead of angles, you can use keywords:",[24,2071,2073],{"className":1982,"code":2072,"language":1984,"meta":29,"style":29},"background: linear-gradient(to right, #3b82f6, #8b5cf6);\nbackground: linear-gradient(to bottom right, #3b82f6, #8b5cf6);\n",[31,2074,2075,2088],{"__ignoreMap":29},[34,2076,2077,2080,2082,2084,2086],{"class":36,"line":37},[34,2078,2079],{"class":385},"background: linear-gradient(to right, ",[34,2081,2001],{"class":2000},[34,2083,593],{"class":385},[34,2085,2006],{"class":2000},[34,2087,2009],{"class":385},[34,2089,2090,2093,2095,2097,2099],{"class":36,"line":59},[34,2091,2092],{"class":385},"background: linear-gradient(to bottom right, ",[34,2094,2001],{"class":2000},[34,2096,593],{"class":385},[34,2098,2006],{"class":2000},[34,2100,2009],{"class":385},[876,2102,2103,2113],{},[879,2104,2105],{},[882,2106,2107,2110],{},[885,2108,2109],{},"Keyword",[885,2111,2112],{},"Angle Equivalent",[895,2114,2115,2125,2135,2145],{},[882,2116,2117,2122],{},[900,2118,2119],{},[31,2120,2121],{},"to top",[900,2123,2124],{},"0deg",[882,2126,2127,2132],{},[900,2128,2129],{},[31,2130,2131],{},"to right",[900,2133,2134],{},"90deg",[882,2136,2137,2142],{},[900,2138,2139],{},[31,2140,2141],{},"to bottom",[900,2143,2144],{},"180deg (default)",[882,2146,2147,2152],{},[900,2148,2149],{},[31,2150,2151],{},"to left",[900,2153,2154],{},"270deg",[19,2156,2158],{"id":2157},"color-stops","Color Stops",[15,2160,2161],{},"You can control exactly where each color appears:",[24,2163,2165],{"className":1982,"code":2164,"language":1984,"meta":29,"style":29},"\u002F* Color at specific positions *\u002F\nbackground: linear-gradient(\n  90deg,\n  #3b82f6 0%,\n  #8b5cf6 50%,\n  #ec4899 100%\n);\n\n\u002F* Hard color stops (no transition) *\u002F\nbackground: linear-gradient(\n  90deg,\n  #3b82f6 50%,\n  #8b5cf6 50%\n);\n",[31,2166,2167,2172,2177,2182,2190,2198,2206,2210,2214,2219,2223,2227,2233,2240],{"__ignoreMap":29},[34,2168,2169],{"class":36,"line":37},[34,2170,2171],{"class":1991},"\u002F* Color at specific positions *\u002F\n",[34,2173,2174],{"class":36,"line":59},[34,2175,2176],{"class":385},"background: linear-gradient(\n",[34,2178,2179],{"class":36,"line":151},[34,2180,2181],{"class":385},"  90deg,\n",[34,2183,2184,2187],{"class":36,"line":157},[34,2185,2186],{"class":2000},"  #3b82f6",[34,2188,2189],{"class":385}," 0%,\n",[34,2191,2192,2195],{"class":36,"line":555},[34,2193,2194],{"class":2000},"  #8b5cf6",[34,2196,2197],{"class":385}," 50%,\n",[34,2199,2200,2203],{"class":36,"line":727},[34,2201,2202],{"class":393},"  #ec4899",[34,2204,2205],{"class":385}," 100%\n",[34,2207,2208],{"class":36,"line":738},[34,2209,2009],{"class":385},[34,2211,2212],{"class":36,"line":1428},[34,2213,1273],{"emptyLinePlaceholder":286},[34,2215,2216],{"class":36,"line":1433},[34,2217,2218],{"class":1991},"\u002F* Hard color stops (no transition) *\u002F\n",[34,2220,2221],{"class":36,"line":1439},[34,2222,2176],{"class":385},[34,2224,2225],{"class":36,"line":1583},[34,2226,2181],{"class":385},[34,2228,2229,2231],{"class":36,"line":1659},[34,2230,2186],{"class":2000},[34,2232,2197],{"class":385},[34,2234,2235,2237],{"class":36,"line":1664},[34,2236,2194],{"class":2000},[34,2238,2239],{"class":385}," 50%\n",[34,2241,2242],{"class":36,"line":1670},[34,2243,2009],{"class":385},[19,2245,2247],{"id":2246},"radial-gradients","Radial Gradients",[15,2249,2250],{},"Colors radiate outward from a center point:",[24,2252,2254],{"className":1982,"code":2253,"language":1984,"meta":29,"style":29},"\u002F* Default: ellipse from center *\u002F\nbackground: radial-gradient(#3b82f6, #1e3a8a);\n\n\u002F* Circle shape *\u002F\nbackground: radial-gradient(circle, #3b82f6, #1e3a8a);\n\n\u002F* Custom position *\u002F\nbackground: radial-gradient(circle at 25% 25%, #3b82f6, transparent);\n",[31,2255,2256,2261,2275,2279,2284,2301,2305,2310],{"__ignoreMap":29},[34,2257,2258],{"class":36,"line":37},[34,2259,2260],{"class":1991},"\u002F* Default: ellipse from center *\u002F\n",[34,2262,2263,2266,2268,2270,2273],{"class":36,"line":59},[34,2264,2265],{"class":385},"background: radial-gradient(",[34,2267,2001],{"class":2000},[34,2269,593],{"class":385},[34,2271,2272],{"class":2000},"#1e3a8a",[34,2274,2009],{"class":385},[34,2276,2277],{"class":36,"line":151},[34,2278,1273],{"emptyLinePlaceholder":286},[34,2280,2281],{"class":36,"line":157},[34,2282,2283],{"class":1991},"\u002F* Circle shape *\u002F\n",[34,2285,2286,2288,2291,2293,2295,2297,2299],{"class":36,"line":555},[34,2287,2265],{"class":385},[34,2289,2290],{"class":389},"circle",[34,2292,593],{"class":385},[34,2294,2001],{"class":2000},[34,2296,593],{"class":385},[34,2298,2272],{"class":2000},[34,2300,2009],{"class":385},[34,2302,2303],{"class":36,"line":727},[34,2304,1273],{"emptyLinePlaceholder":286},[34,2306,2307],{"class":36,"line":738},[34,2308,2309],{"class":1991},"\u002F* Custom position *\u002F\n",[34,2311,2312,2314,2316,2319,2321],{"class":36,"line":1428},[34,2313,2265],{"class":385},[34,2315,2290],{"class":389},[34,2317,2318],{"class":385}," at 25% 25%, ",[34,2320,2001],{"class":2000},[34,2322,2323],{"class":385},", transparent);\n",[19,2325,1446],{"id":1445},[367,2327,2329],{"id":2328},"subtle-page-background","Subtle page background",[24,2331,2333],{"className":1982,"code":2332,"language":1984,"meta":29,"style":29},"background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n",[31,2334,2335],{"__ignoreMap":29},[34,2336,2337,2339,2342,2345,2348],{"class":36,"line":37},[34,2338,2023],{"class":385},[34,2340,2341],{"class":393},"#f5f7fa",[34,2343,2344],{"class":385}," 0%, ",[34,2346,2347],{"class":393},"#c3cfe2",[34,2349,2350],{"class":385}," 100%);\n",[367,2352,2354],{"id":2353},"glassmorphism-overlay","Glassmorphism overlay",[24,2356,2358],{"className":1982,"code":2357,"language":1984,"meta":29,"style":29},"background: linear-gradient(\n  135deg,\n  rgba(255, 255, 255, 0.1),\n  rgba(255, 255, 255, 0.05)\n);\nbackdrop-filter: blur(10px);\n",[31,2359,2360,2364,2369,2380,2390,2394],{"__ignoreMap":29},[34,2361,2362],{"class":36,"line":37},[34,2363,2176],{"class":385},[34,2365,2366],{"class":36,"line":59},[34,2367,2368],{"class":385},"  135deg,\n",[34,2370,2371,2374,2377],{"class":36,"line":151},[34,2372,2373],{"class":385},"  rgba(255, 255, 255, 0",[34,2375,2376],{"class":393},".1",[34,2378,2379],{"class":385},"),\n",[34,2381,2382,2384,2387],{"class":36,"line":157},[34,2383,2373],{"class":385},[34,2385,2386],{"class":393},".05",[34,2388,2389],{"class":385},")\n",[34,2391,2392],{"class":36,"line":555},[34,2393,2009],{"class":385},[34,2395,2396,2399],{"class":36,"line":727},[34,2397,2398],{"class":389},"backdrop-filter",[34,2400,2401],{"class":385},": blur(10px);\n",[367,2403,2405],{"id":2404},"text-gradient","Text gradient",[24,2407,2409],{"className":1982,"code":2408,"language":1984,"meta":29,"style":29},".gradient-text {\n  background: linear-gradient(135deg, #3b82f6, #8b5cf6);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n",[31,2410,2411,2419,2449,2461,2473],{"__ignoreMap":29},[34,2412,2413,2416],{"class":36,"line":37},[34,2414,2415],{"class":393},".gradient-text",[34,2417,2418],{"class":385}," {\n",[34,2420,2421,2424,2426,2429,2432,2435,2439,2441,2443,2445,2447],{"class":36,"line":59},[34,2422,2423],{"class":628},"  background",[34,2425,632],{"class":385},[34,2427,2428],{"class":628},"linear-gradient",[34,2430,2431],{"class":385},"(",[34,2433,2434],{"class":628},"135",[34,2436,2438],{"class":2437},"szBVR","deg",[34,2440,593],{"class":385},[34,2442,2001],{"class":628},[34,2444,593],{"class":385},[34,2446,2006],{"class":628},[34,2448,2009],{"class":385},[34,2450,2451,2454,2456,2458],{"class":36,"line":151},[34,2452,2453],{"class":628},"  -webkit-background-clip",[34,2455,632],{"class":385},[34,2457,316],{"class":628},[34,2459,2460],{"class":385},";\n",[34,2462,2463,2466,2468,2471],{"class":36,"line":157},[34,2464,2465],{"class":628},"  -webkit-text-fill-color",[34,2467,632],{"class":385},[34,2469,2470],{"class":628},"transparent",[34,2472,2460],{"class":385},[34,2474,2475],{"class":36,"line":555},[34,2476,653],{"class":385},[367,2478,2480],{"id":2479},"animated-gradient","Animated gradient",[24,2482,2484],{"className":1982,"code":2483,"language":1984,"meta":29,"style":29},".animated-gradient {\n  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n  background-size: 400% 400%;\n  animation: gradient 15s ease infinite;\n}\n\n@keyframes gradient {\n  0% { background-position: 0% 50%; }\n  50% { background-position: 100% 50%; }\n  100% { background-position: 0% 50%; }\n}\n",[31,2485,2486,2493,2530,2550,2572,2576,2580,2591,2617,2639,2660],{"__ignoreMap":29},[34,2487,2488,2491],{"class":36,"line":37},[34,2489,2490],{"class":393},".animated-gradient",[34,2492,2418],{"class":385},[34,2494,2495,2497,2499,2501,2503,2506,2508,2510,2513,2515,2518,2520,2523,2525,2528],{"class":36,"line":59},[34,2496,2423],{"class":628},[34,2498,632],{"class":385},[34,2500,2428],{"class":628},[34,2502,2431],{"class":385},[34,2504,2505],{"class":628},"-45",[34,2507,2438],{"class":2437},[34,2509,593],{"class":385},[34,2511,2512],{"class":628},"#ee7752",[34,2514,593],{"class":385},[34,2516,2517],{"class":628},"#e73c7e",[34,2519,593],{"class":385},[34,2521,2522],{"class":628},"#23a6d5",[34,2524,593],{"class":385},[34,2526,2527],{"class":628},"#23d5ab",[34,2529,2009],{"class":385},[34,2531,2532,2535,2537,2540,2543,2546,2548],{"class":36,"line":151},[34,2533,2534],{"class":628},"  background-size",[34,2536,632],{"class":385},[34,2538,2539],{"class":628},"400",[34,2541,2542],{"class":2437},"%",[34,2544,2545],{"class":628}," 400",[34,2547,2542],{"class":2437},[34,2549,2460],{"class":385},[34,2551,2552,2555,2558,2561,2564,2567,2570],{"class":36,"line":157},[34,2553,2554],{"class":628},"  animation",[34,2556,2557],{"class":385},": gradient ",[34,2559,2560],{"class":628},"15",[34,2562,2563],{"class":2437},"s",[34,2565,2566],{"class":628}," ease",[34,2568,2569],{"class":628}," infinite",[34,2571,2460],{"class":385},[34,2573,2574],{"class":36,"line":555},[34,2575,653],{"class":385},[34,2577,2578],{"class":36,"line":727},[34,2579,1273],{"emptyLinePlaceholder":286},[34,2581,2582,2585,2589],{"class":36,"line":738},[34,2583,2584],{"class":2437},"@keyframes",[34,2586,2588],{"class":2587},"s4XuR"," gradient",[34,2590,2418],{"class":385},[34,2592,2593,2596,2599,2602,2604,2607,2609,2612,2614],{"class":36,"line":1428},[34,2594,2595],{"class":393},"  0%",[34,2597,2598],{"class":385}," { ",[34,2600,2601],{"class":628},"background-position",[34,2603,632],{"class":385},[34,2605,2606],{"class":628},"0",[34,2608,2542],{"class":2437},[34,2610,2611],{"class":628}," 50",[34,2613,2542],{"class":2437},[34,2615,2616],{"class":385},"; }\n",[34,2618,2619,2622,2624,2626,2628,2631,2633,2635,2637],{"class":36,"line":1433},[34,2620,2621],{"class":393},"  50%",[34,2623,2598],{"class":385},[34,2625,2601],{"class":628},[34,2627,632],{"class":385},[34,2629,2630],{"class":628},"100",[34,2632,2542],{"class":2437},[34,2634,2611],{"class":628},[34,2636,2542],{"class":2437},[34,2638,2616],{"class":385},[34,2640,2641,2644,2646,2648,2650,2652,2654,2656,2658],{"class":36,"line":1439},[34,2642,2643],{"class":393},"  100%",[34,2645,2598],{"class":385},[34,2647,2601],{"class":628},[34,2649,632],{"class":385},[34,2651,2606],{"class":628},[34,2653,2542],{"class":2437},[34,2655,2611],{"class":628},[34,2657,2542],{"class":2437},[34,2659,2616],{"class":385},[34,2661,2662],{"class":36,"line":1583},[34,2663,653],{"class":385},[19,2665,2667],{"id":2666},"performance-tips","Performance Tips",[987,2669,2670,2676,2682,2691],{},[498,2671,2672,2675],{},[314,2673,2674],{},"Gradients are rendered by the GPU"," — they're fast and don't affect performance",[498,2677,2678,2681],{},[314,2679,2680],{},"Avoid very complex gradients"," with 10+ color stops on large areas",[498,2683,2684,2690],{},[314,2685,2686,2687],{},"Use ",[31,2688,2689],{},"will-change: background"," for animated gradients",[498,2692,2693,2696],{},[314,2694,2695],{},"Prefer CSS gradients over images"," — they're resolution-independent and load instantly",[19,2698,2700],{"id":2699},"browser-support","Browser Support",[15,2702,2703],{},"CSS gradients work in all modern browsers. No prefixes needed since 2015.",[19,2705,525],{"id":524},[15,2707,528,2708,2712],{},[261,2709,2711],{"href":2710},"\u002Fcss-gradient-generator","CSS Gradient Generator"," to visually create gradients with multiple color stops, adjust angles, and copy the CSS instantly. It supports both linear and radial gradients.",[267,2714,2715],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":29,"searchDepth":59,"depth":59,"links":2717},[2718,2721,2722,2723,2729,2730,2731],{"id":1975,"depth":59,"text":1976,"children":2719},[2720],{"id":2065,"depth":151,"text":2066},{"id":2157,"depth":59,"text":2158},{"id":2246,"depth":59,"text":2247},{"id":1445,"depth":59,"text":1446,"children":2724},[2725,2726,2727,2728],{"id":2328,"depth":151,"text":2329},{"id":2353,"depth":151,"text":2354},{"id":2404,"depth":151,"text":2405},{"id":2479,"depth":151,"text":2480},{"id":2666,"depth":59,"text":2667},{"id":2699,"depth":59,"text":2700},{"id":524,"depth":59,"text":525},"2026-05-08","Master CSS gradients — linear, radial, and conic. Learn syntax, color stops, real-world patterns, and performance tips with practical examples.",{},"\u002Fblog\u002Fcss-gradients-complete-guide","css-gradient-generator",{"title":1964,"description":2733},"blog\u002Fcss-gradients-complete-guide",[1762,1984],"YMhdz_zNgtgIq0_x8a0WIfnnW7Bdr_R1ssGYf1BN8Rk",1779031064155]