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