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