[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Fruntime-the-concept-nobody-explained-properly-and-that-changes-everything-when-you-understand-it":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":947,"translations":1016,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":65,"metaTitle":944,"metaDescription":945,"updatedAt":946},"64ce42d7-3398-425d-817a-714ee77cbd1d","runtime-the-concept-nobody-explained-properly-and-that-changes-everything-when-you-understand-it","Runtime: The Concept Nobody Explained Properly (And That Changes Everything When You Understand It)","Runtime means both the moment of execution and the environment that runs the code. Understand this duality, learn to differentiate compile-time errors from runtime errors, and see how Node, Deno, and Bun apply this concept in distinct ways.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774464638320-featured-ijck77.jpg",false,"6db59740-4e97-4af7-9572-90cab25f01f8","2026-03-25T23:01:24.283+00:00",10,151,{"name":50,"avatar":9},"Genildo Souza",{"slug":13,"name":14,"color":15},[53,56,59,62],{"slug":54,"name":55},"typescript","TypeScript",{"slug":57,"name":58},"runtime","Runtime",{"slug":60,"name":61},"nextjs","Next.js",{"slug":63,"name":64},"javascript","JavaScript",{"type":66,"content":67},"doc",[68,79,86,94,105,111,117,123,129,157,164,172,178,188,198,209,215,223,229,260,266,273,297,311,320,338,345,363,369,376,411,426,434,446,452,458,473,481,493,501,508,516,523,546,560,568,574,582,616,623,631,643,650,676,684,696,703,711,719,737,751,759,769,775,781,788,810,816,823,839,847,853,863,869,881,894,902,908,914,920,926,937,941],{"type":69,"attrs":70,"content":72},"heading",{"id":71,"level":36},"h_vk44tw6b",[73],{"text":74,"type":75,"marks":76},"The confusion has a reason","text",[77],{"type":78},"bold",{"type":80,"attrs":81,"content":83},"paragraph",{"id":82},"p_ilv000mq",[84],{"text":85,"type":75},"Have you ever read a sentence like this?",{"type":80,"attrs":87,"content":89},{"id":88},"p_xt5un2w8",[90],{"text":91,"type":75,"marks":92},"\"Node.js is a JavaScript runtime.\"",[93],{"type":78},{"type":80,"attrs":95,"content":97},{"id":96},"p_o2iiu7ut",[98,100],{"text":99,"type":75},"And thought: ",{"text":101,"type":75,"marks":102},"okay, but what does that mean in practice?",[103],{"type":104},"italic",{"type":80,"attrs":106,"content":108},{"id":107},"p_6eb7162n",[109],{"text":110,"type":75},"If you had that feeling, it's not because you weren't paying attention. It's because most technical content assumes you already know what \"runtime\" means — and moves on as if it were obvious.",{"type":80,"attrs":112,"content":114},{"id":113},"p_shf7gs19",[115],{"text":116,"type":75},"But it's not obvious. And the fact that no one stops to explain it properly creates a ripple effect: you read about Node, about Deno, about Bun, about \"runtime errors\", about \"runtime environment\" — and all these things seem vaguely related, but you can't piece them together.",{"type":80,"attrs":118,"content":120},{"id":119},"p_wb1lszi9",[121],{"text":122,"type":75},"I know how that feels. For a long time, I used the word \"runtime\" without being sure what it meant. I repeated what I read. It worked in conversations. But deep down, the concept was a fog.",{"type":80,"attrs":124,"content":126},{"id":125},"p_b9e7sikk",[127],{"text":128,"type":75},"This article exists to dispel that fog. Without unnecessary jargon. Without skipping steps. Without pretending it's simple when it actually needs a bit of context to make sense.",{"type":130,"attrs":131,"content":134},"callout",{"id":132,"type":133,"title":9},"call_y6lr1dki","info",[135],{"type":80,"attrs":136,"content":138},{"id":137},"p_zs1nrde7",[139,143,145,149,151,155],{"text":140,"type":75,"marks":141},"The word \"runtime\" is confusing for a specific reason: it is used to describe two different things.",[142],{"type":78},{"text":144,"type":75}," Sometimes it means a ",{"text":146,"type":75,"marks":147},"moment",[148],{"type":78},{"text":150,"type":75}," (when the code is executing). Other times it means an ",{"text":152,"type":75,"marks":153},"environment",[154],{"type":78},{"text":156,"type":75}," (the program that executes the code). These two definitions are related but not the same thing — and most comprehension problems start when someone uses the word without making it clear which one is in play.",{"type":158,"attrs":159},"image",{"id":160,"alt":9,"src":161,"size":162,"align":163,"title":9,"width":9,"height":9},"img_gmnysl1r","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002F1774582026580-9yive9.png","large","center",{"type":69,"attrs":165,"content":167},{"id":166,"level":36},"h_1cyggt9u",[168],{"text":169,"type":75,"marks":170},"Runtime as a moment: when code comes to life",[171],{"type":78},{"type":80,"attrs":173,"content":175},{"id":174},"p_awu2fj5m",[176],{"text":177,"type":75},"All code goes through at least two phases before doing anything useful.",{"type":80,"attrs":179,"content":181},{"id":180},"p_yu8mxb1g",[182,186],{"text":183,"type":75,"marks":184},"The first phase",[185],{"type":78},{"text":187,"type":75}," is when you write the code. It exists as text in a file. At this point, it does nothing — it's just an instruction, like a cake recipe that no one has started preparing yet.",{"type":80,"attrs":189,"content":191},{"id":190},"p_31fiaqfm",[192,196],{"text":193,"type":75,"marks":194},"The second phase",[195],{"type":78},{"text":197,"type":75}," is when something takes that code and starts executing it. Instructions become actions. Variables receive values. Functions are called. Results appear.",{"type":80,"attrs":199,"content":201},{"id":200},"p_f1z2vx1u",[202,204,207],{"text":203,"type":75},"This second phase is the ",{"text":57,"type":75,"marks":205},[206],{"type":78},{"text":208,"type":75},". Literally: the time when the code is running.",{"type":80,"attrs":210,"content":212},{"id":211},"p_t21sfjay",[213],{"text":214,"type":75},"It seems trivial, but this distinction has enormous practical consequences:",{"type":216,"attrs":217,"content":220},"codeBlock",{"id":218,"language":63,"highlighted":219},"code_j71qzknm","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> dividir\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> a \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> b;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> resultado\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> dividir\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(resultado); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Infinity\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[221],{"text":222,"type":75},"function dividir(a, b) {\n  return a \u002F b;\n}\n\nconst resultado = dividir(10, 0);\nconsole.log(resultado); \u002F\u002F Infinity",{"type":80,"attrs":224,"content":226},{"id":225},"p_5vzue3er",[227],{"text":228,"type":75},"When you wrote this code, nothing went wrong. Your editor didn't complain. JavaScript didn't point out any errors. Everything seemed to work.",{"type":80,"attrs":230,"content":232},{"id":231},"p_sunn428t",[233,235,239,241,246,248,252,254,258],{"text":234,"type":75},"But when the code ",{"text":236,"type":75,"marks":237},"ran",[238],{"type":78},{"text":240,"type":75}," — at runtime — it produced ",{"text":242,"type":75,"marks":243},"Infinity",[244],{"type":245},"code",{"text":247,"type":75},", which is probably not what you wanted. The problem only exists at the moment of execution, because only at that moment do the real values (",{"text":249,"type":75,"marks":250},"10",[251],{"type":245},{"text":253,"type":75}," and ",{"text":255,"type":75,"marks":256},"0",[257],{"type":245},{"text":259,"type":75},") encounter the division operation.",{"type":80,"attrs":261,"content":263},{"id":262},"p_hr25xpvd",[264],{"text":265,"type":75},"Now look at this one:",{"type":216,"attrs":267,"content":270},{"id":268,"language":63,"highlighted":269},"code_yp1jijxt","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> saudar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> `Olá, ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">nme\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}!`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F typo: 'nme' instead of 'nome'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[271],{"text":272,"type":75},"function saudar(nome) {\n  return `Olá, ${nme}!`; \u002F\u002F typo: 'nme' instead of 'nome'\n}",{"type":80,"attrs":274,"content":276},{"id":275},"p_zhwqy2mo",[277,279,283,285,289,291,295],{"text":278,"type":75},"This code has a bug. But if no one calls the function ",{"text":280,"type":75,"marks":281},"saudar",[282],{"type":245},{"text":284,"type":75},", the error will never appear. It only explodes at runtime — the moment someone actually executes ",{"text":286,"type":75,"marks":287},"saudar(\"Maria\")",[288],{"type":245},{"text":290,"type":75}," and JavaScript tries to find a variable called ",{"text":292,"type":75,"marks":293},"nme",[294],{"type":245},{"text":296,"type":75}," that doesn't exist.",{"type":130,"attrs":298,"content":300},{"id":299,"type":133,"title":9},"call_eeec7s36",[301],{"type":80,"attrs":302,"content":304},{"id":303},"p_owf0hlmr",[305,309],{"text":306,"type":75,"marks":307},"Runtime error",[308],{"type":78},{"text":310,"type":75}," is a problem that only reveals itself when the code is running, with real data, under real conditions. That's why you hear this expression all the time in error messages and technical discussions.",{"type":69,"attrs":312,"content":315},{"id":313,"level":314},"h_29hmgh25",3,[316],{"text":317,"type":75,"marks":318},"Runtime vs. compile time",[319],{"type":78},{"type":80,"attrs":321,"content":323},{"id":322},"p_zkuv1ai3",[324,326,330,332,336],{"text":325,"type":75},"When you are writing code in VS Code, you are in ",{"text":327,"type":75,"marks":328},"development time",[329],{"type":78},{"text":331,"type":75},". At this moment, some tools — like TypeScript or ESLint — can look at your code and point out problems ",{"text":333,"type":75,"marks":334},"before",[335],{"type":104},{"text":337,"type":75}," it runs.",{"type":216,"attrs":339,"content":342},{"id":340,"language":54,"highlighted":341},"code_pokpig8k","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> saudar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> `Olá, ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">nme\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}!`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F TypeScript will underline 'nme' in red here\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[343],{"text":344,"type":75},"function saudar(nome: string): string {\n  return `Olá, ${nme}!`; \u002F\u002F TypeScript will underline 'nme' in red here\n}",{"type":80,"attrs":346,"content":348},{"id":347},"p_jweolp23",[349,351,355,357,361],{"text":350,"type":75},"TypeScript caught the error ",{"text":352,"type":75,"marks":353},"before runtime",[354],{"type":78},{"text":356,"type":75}," because it statically analyzes the code — it reads the text, checks types, compares references. This happens in what we call ",{"text":358,"type":75,"marks":359},"compile time",[360],{"type":78},{"text":362,"type":75},".",{"type":80,"attrs":364,"content":366},{"id":365},"p_9nybb9lz",[367],{"text":368,"type":75},"But not every error can be caught beforehand:",{"type":216,"attrs":370,"content":373},{"id":371,"language":54,"highlighted":372},"code_iz5ik1wt","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> buscarUsuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> usuarios\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">> \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">    1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Ana\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">    2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Carlos\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> usuarios[id]; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F What if 'id' is 3?\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> nome\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> buscarUsuario\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(nome.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">toUpperCase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">()); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 💥 TypeError at runtime!\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[374],{"text":375,"type":75},"function buscarUsuario(id: number): string {\n  const usuarios: Record\u003Cnumber, string> = {\n    1: \"Ana\",\n    2: \"Carlos\",\n  };\n  return usuarios[id]; \u002F\u002F What if 'id' is 3?\n}\n\nconst nome = buscarUsuario(3);\nconsole.log(nome.toUpperCase()); \u002F\u002F 💥 TypeError at runtime!",{"type":80,"attrs":377,"content":379},{"id":378},"p_g4zmzwpp",[380,382,386,388,392,394,398,400,404,406,409],{"text":381,"type":75},"TypeScript doesn't complain here. The typing is correct. But at runtime, when ",{"text":383,"type":75,"marks":384},"id",[385],{"type":245},{"text":387,"type":75}," is ",{"text":389,"type":75,"marks":390},"3",[391],{"type":245},{"text":393,"type":75},", the result is ",{"text":395,"type":75,"marks":396},"undefined",[397],{"type":245},{"text":399,"type":75}," — and calling ",{"text":401,"type":75,"marks":402},".toUpperCase()",[403],{"type":245},{"text":405,"type":75}," on ",{"text":395,"type":75,"marks":407},[408],{"type":245},{"text":410,"type":75}," explodes.",{"type":130,"attrs":412,"content":415},{"id":413,"type":414,"title":9},"call_zkqv37em","tip",[416],{"type":80,"attrs":417,"content":419},{"id":418},"p_jzlrio4h",[420,424],{"text":421,"type":75,"marks":422},"Runtime is where theory meets practice.",[423],{"type":78},{"text":425,"type":75}," Compile-time errors are gentle — they warn you beforehand. Runtime errors are treacherous — they can hide for weeks until the exact combination of data makes the bug manifest.",{"type":69,"attrs":427,"content":429},{"id":428,"level":36},"h_rtk3iiec",[430],{"text":431,"type":75,"marks":432},"Runtime as an environment: the machine that runs your code",[433],{"type":78},{"type":80,"attrs":435,"content":437},{"id":436},"p_l4e5s0q4",[438,440,444],{"text":439,"type":75},"When someone says \"Node.js is a JavaScript runtime,\" they are not talking about a moment in time. They are talking about a ",{"text":441,"type":75,"marks":442},"program",[443],{"type":78},{"text":445,"type":75}," — a complete environment that knows how to take JavaScript code and execute it.",{"type":80,"attrs":447,"content":449},{"id":448},"p_r4jjhy7p",[450],{"text":451,"type":75},"JavaScript, by itself, is just a language. A set of rules on how to write instructions. But rules alone do nothing. You need something that reads these rules and puts them into practice.",{"type":80,"attrs":453,"content":455},{"id":454},"p_a41nnkxs",[456],{"text":457,"type":75},"Every runtime is a combination of two things:",{"type":459,"attrs":460},"speedCards",{"id":461,"cards":462,"title":471,"caption":472},"speed_mb1vtxwx",[463,467],{"label":464,"value":465,"detail":466},"Engine","🔧","The part that understands the language and executes instructions. V8 in Chrome and Node. SpiderMonkey in Firefox. JavaScriptCore in Safari and Bun.",{"label":468,"value":469,"detail":470},"APIs","📦","The extra capabilities that define what the code can do in the world. \nIn the browser: document, window, fetch. In Node: fs, http, process.","Anatomy of a runtime","The engine is the motor. The APIs are the tools that come in the box. Together, they form the environment where your code comes to life.",{"type":69,"attrs":474,"content":476},{"id":475,"level":314},"h_gua9v58j",[477],{"text":478,"type":75,"marks":479},"The same code, different runtimes",[480],{"type":78},{"type":80,"attrs":482,"content":484},{"id":483},"p_5ac06skk",[485,487,491],{"text":486,"type":75},"The same JavaScript behaves differently depending on ",{"text":488,"type":75,"marks":489},"where",[490],{"type":78},{"text":492,"type":75}," it's running — because the runtime changes the rules of the game.",{"type":80,"attrs":494,"content":496},{"id":495},"p_irvq3657",[497],{"text":498,"type":75,"marks":499},"In the browser:",[500],{"type":78},{"type":216,"attrs":502,"content":505},{"id":503,"language":63,"highlighted":504},"code_10y6b03q","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F This works in the browser\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">document.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">querySelector\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'.botao'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'click'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  alert\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Clicked!'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[506],{"text":507,"type":75},"\u002F\u002F This works in the browser\ndocument.querySelector('.botao').addEventListener('click', () => {\n  alert('Clicked!');\n});",{"type":80,"attrs":509,"content":511},{"id":510},"p_67zdqgtr",[512],{"text":513,"type":75,"marks":514},"In Node.js:",[515],{"type":78},{"type":216,"attrs":517,"content":520},{"id":518,"language":63,"highlighted":519},"code_4j52la55","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F This works in Node\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> fs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> require\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'fs'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> conteudo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> fs.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">readFileSync\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'.\u002Farquivo.txt'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'utf-8'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">console.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(conteudo);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[521],{"text":522,"type":75},"\u002F\u002F This works in Node\nconst fs = require('fs');\nconst conteudo = fs.readFileSync('.\u002Farquivo.txt', 'utf-8');\nconsole.log(conteudo);",{"type":80,"attrs":524,"content":526},{"id":525},"p_pd3snn6c",[527,529,533,535,539,540,544],{"text":528,"type":75},"If you try to run the first code in Node, it explodes. ",{"text":530,"type":75,"marks":531},"document",[532],{"type":245},{"text":534,"type":75}," doesn't exist there. If you try to run the second in the browser, same result — ",{"text":536,"type":75,"marks":537},"require",[538],{"type":245},{"text":253,"type":75},{"text":541,"type":75,"marks":542},"fs",[543],{"type":245},{"text":545,"type":75}," don't exist in the browser. JavaScript is the same. The language is the same. But what's available changes completely depending on the runtime.",{"type":130,"attrs":547,"content":549},{"id":548,"type":414,"title":9},"call_pndb1bmm",[550],{"type":80,"attrs":551,"content":553},{"id":552},"p_2pikkccw",[554,558],{"text":555,"type":75,"marks":556},"When a beginner dev takes a Node tutorial and tries to run it in the browser console (or vice-versa), that's the source of the problem.",[557],{"type":78},{"text":559,"type":75}," It's not that the code is wrong. It's that it was written for a different runtime. Understanding this prevents hours of frustration.",{"type":69,"attrs":561,"content":563},{"id":562,"level":36},"h_yh3jtjtu",[564],{"text":565,"type":75,"marks":566},"The new generation of runtimes: Node vs. Deno vs. Bun",[567],{"type":78},{"type":80,"attrs":569,"content":571},{"id":570},"p_hebfvu5l",[572],{"text":573,"type":75},"Node.js dominated the landscape for over a decade. But in recent years, two new runtimes appeared with different proposals. Now that you understand what a runtime is, comparing the three becomes simple — because the question shifts from \"which is the best?\" to \"which engine does it use, what APIs does it offer, and what philosophy does it follow?\".",{"type":69,"attrs":575,"content":577},{"id":576,"level":314},"h_zc4268is",[578],{"text":579,"type":75,"marks":580},"Node.js — the veteran",[581],{"type":78},{"type":80,"attrs":583,"content":585},{"id":584},"p_5lpgrjdj",[586,588,591,594,598,600,603,605,609,610,614],{"text":587,"type":75},"Created in 2009 by Ryan Dahl. Takes V8 (Chrome's engine) and runs it outside the browser. Instead of ",{"text":530,"type":75,"marks":589},[590],{"type":245},{"text":253,"type":75,"marks":592},[593],{"type":245},{"text":595,"type":75,"marks":596},"window",[597],{"type":245},{"text":599,"type":75},", it offers ",{"text":541,"type":75,"marks":601},[602],{"type":245},{"text":604,"type":75},", ",{"text":606,"type":75,"marks":607},"http",[608],{"type":245},{"text":604,"type":75},{"text":611,"type":75,"marks":612},"process",[613],{"type":245},{"text":615,"type":75}," and dozens of other modules. It has the largest ecosystem in the world — over 2 million packages on npm.",{"type":216,"attrs":617,"content":620},{"id":618,"language":63,"highlighted":619},"code_0i80c7p2","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Node.js — creating an HTTP server in 5 lines\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> http\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> require\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'http'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> server\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> http.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">createServer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">req\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">res\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  res.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">'Hello from Node!'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">server.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">listen\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">3000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[621],{"text":622,"type":75},"\u002F\u002F Node.js — creating an HTTP server in 5 lines\nconst http = require('http');\n\nconst server = http.createServer((req, res) => {\n  res.end('Hello from Node!');\n});\n\nserver.listen(3000);",{"type":69,"attrs":624,"content":626},{"id":625,"level":314},"h_5h39r6ye",[627],{"text":628,"type":75,"marks":629},"Deno — the fresh start",[630],{"type":78},{"type":80,"attrs":632,"content":634},{"id":633},"p_7a42ffz7",[635,637,641],{"text":636,"type":75},"Created in 2020 by the ",{"text":638,"type":75,"marks":639},"same Ryan Dahl",[640],{"type":78},{"text":642,"type":75},". After years of seeing how Node was used, he gave a talk called \"10 Things I Regret About Node.js\" and started from scratch. Same V8 engine, but everything else is different: native TypeScript, security by default, built-in tools.",{"type":216,"attrs":644,"content":647},{"id":645,"language":54,"highlighted":646},"code_y7v44m1p","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Deno — same server, native TypeScript, no config\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">Deno.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">serve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ port: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">3000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }, (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">_req\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Response\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Hello from Deno!\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[648],{"text":649,"type":75},"\u002F\u002F Deno — same server, native TypeScript, no config\nDeno.serve({ port: 3000 }, (_req) => {\n  return new Response(\"Hello from Deno!\");\n});",{"type":130,"attrs":651,"content":653},{"id":652,"type":133,"title":9},"call_x3c44mvw",[654],{"type":80,"attrs":655,"content":657},{"id":656},"p_rtis7rij",[658,662,664,668,670,674],{"text":659,"type":75,"marks":660},"Security by default:",[661],{"type":78},{"text":663,"type":75}," In Node, your code can read files and access the network without asking for permission. In Deno, everything is blocked by default. Want to access the file system? You need to run with ",{"text":665,"type":75,"marks":666},"--allow-read",[667],{"type":245},{"text":669,"type":75},". Want to make requests? ",{"text":671,"type":75,"marks":672},"--allow-net",[673],{"type":245},{"text":675,"type":75},". A malicious package cannot silently steal data from your system.",{"type":69,"attrs":677,"content":679},{"id":678,"level":314},"h_4swia99y",[680],{"text":681,"type":75,"marks":682},"Bun — raw speed",[683],{"type":78},{"type":80,"attrs":685,"content":687},{"id":686},"p_qyxasyni",[688,690,694],{"text":689,"type":75},"Appeared in 2023 with an aggressive proposal: to be the fastest JavaScript runtime. It uses a different engine — ",{"text":691,"type":75,"marks":692},"JavaScriptCore",[693],{"type":78},{"text":695,"type":75}," (Apple\u002FSafari) instead of V8. Written in Zig. Starts processes up to 4x faster than Node. Installs packages up to 25x faster than npm.",{"type":216,"attrs":697,"content":700},{"id":698,"language":63,"highlighted":699},"code_zegzwwfq","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F Bun — same server, familiar syntax\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">Bun.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">serve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  port: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">3000\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">req\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> Response\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Hello from Bun!\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[701],{"text":702,"type":75},"\u002F\u002F Bun — same server, familiar syntax\nBun.serve({\n  port: 3000,\n  fetch(req) {\n    return new Response(\"Hello from Bun!\");\n  },\n});",{"type":216,"attrs":704,"content":708},{"id":705,"language":706,"highlighted":707},"code_oykb5sgs","bash","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\"># In Bun, everything is frighteningly fast\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">bun\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> install  # instead of npm install\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">bun\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> test     # instead of jest\u002Fvitest\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">bun\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> build    # instead of webpack\u002Fesbuild\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[709],{"text":710,"type":75},"# In Bun, everything is frighteningly fast\nbun install  # instead of npm install\nbun test     # instead of jest\u002Fvitest\nbun build    # instead of webpack\u002Fesbuild",{"type":69,"attrs":712,"content":714},{"id":713,"level":314},"h_xhr7gn6j",[715],{"text":716,"type":75,"marks":717},"Comparing side by side",[718],{"type":78},{"type":459,"attrs":720},{"id":721,"cards":722,"title":735,"caption":736},"speed_3pgnis95",[723,727,731],{"label":724,"value":725,"detail":726},"🟢","Node.js","V8 Engine. 15+ years. Largest ecosystem. TypeScript needs compiling. No security restriction. Build your own tool stack.",{"label":728,"value":729,"detail":730},"🔒","Deno","V8 Engine. ~6 years. Native TypeScript. Security by default (explicit permissions). Built-in formatter, linter, and test runner.",{"label":732,"value":733,"detail":734},"⚡","Bun","JavaScriptCore Engine. ~3 years. Native TypeScript. 4x faster than Node on startup. Bundler, test runner, and package manager included.","Node.js vs Deno vs Bun","Three runtimes, same language, different philosophies.",{"type":130,"attrs":738,"content":740},{"id":739,"type":414,"title":9},"call_7nmdzmra",[741],{"type":80,"attrs":742,"content":744},{"id":743},"p_r2isdb4k",[745,749],{"text":746,"type":75,"marks":747},"Starting now?",[748],{"type":78},{"text":750,"type":75}," Node remains the safest choice — immense ecosystem, abundant tutorials, market standard. Want something more modern with native TypeScript? Deno. Need raw speed in scripts and CI\u002FCD? Try Bun.",{"type":69,"attrs":752,"content":754},{"id":753,"level":36},"h_2bhxdv6z",[755],{"text":756,"type":75,"marks":757},"Runtime errors in practice: what changes for you",[758],{"type":78},{"type":80,"attrs":760,"content":762},{"id":761},"p_oml19n0v",[763,765],{"text":764,"type":75},"When a bug appears in your code, one of the most useful questions you can ask is: ",{"text":766,"type":75,"marks":767},"at what phase did this error occur?",[768],{"type":78},{"type":80,"attrs":770,"content":772},{"id":771},"p_dh8doo0e",[773],{"text":774,"type":75},"Compile-time errors are gentle — they tell you exactly what's wrong before anything happens. Runtime errors are treacherous — they can hide for days until the exact combination of data makes the bug manifest.",{"type":80,"attrs":776,"content":778},{"id":777},"p_pwm3g4xf",[779],{"text":780,"type":75},"A common real-world example:",{"type":216,"attrs":782,"content":785},{"id":783,"language":63,"highlighted":784},"code_rly3pabc","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> carregarPerfil\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">userId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> resposta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">`\u002Fapi\u002Fusuarios\u002F${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">userId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> dados\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> resposta.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">json\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> dados.nome.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">toUpperCase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F 💥 what if the API returns { erro: \"not found\" }?\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[786],{"text":787,"type":75},"async function carregarPerfil(userId) {\n  const resposta = await fetch(`\u002Fapi\u002Fusuarios\u002F${userId}`);\n  const dados = await resposta.json();\n  return dados.nome.toUpperCase(); \u002F\u002F 💥 what if the API returns { erro: \"not found\" }?\n}",{"type":80,"attrs":789,"content":791},{"id":790},"p_llcon0cm",[792,794,798,800,804,806,809],{"text":793,"type":75},"No tool will warn you that ",{"text":795,"type":75,"marks":796},"dados.nome",[797],{"type":245},{"text":799,"type":75}," might not exist. The code is syntactically perfect. But at runtime, when the API returns an object without the ",{"text":801,"type":75,"marks":802},"nome",[803],{"type":245},{"text":805,"type":75}," property, the ",{"text":401,"type":75,"marks":807},[808],{"type":245},{"text":410,"type":75},{"type":80,"attrs":811,"content":813},{"id":812},"p_df1bwnc6",[814],{"text":815,"type":75},"Experienced developers write defensive code — not for elegance, but for survival:",{"type":216,"attrs":817,"content":820},{"id":818,"language":63,"highlighted":819},"code_qwcnuzni","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> carregarPerfil\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">userId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> resposta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> fetch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">`\u002Fapi\u002Fusuarios\u002F${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">userId\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">}`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> dados\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> resposta.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">json\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">dados.nome) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> 'Unknown user'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> dados.nome.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">toUpperCase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[821],{"text":822,"type":75},"async function carregarPerfil(userId) {\n  const resposta = await fetch(`\u002Fapi\u002Fusuarios\u002F${userId}`);\n  const dados = await resposta.json();\n\n  if (!dados.nome) {\n    return 'Unknown user';\n  }\n\n  return dados.nome.toUpperCase();\n}",{"type":130,"attrs":824,"content":826},{"id":825,"type":133,"title":9},"call_e4kmwnsa",[827],{"type":80,"attrs":828,"content":830},{"id":829},"p_bze1i2z6",[831,833,837],{"text":832,"type":75},"The check ",{"text":834,"type":75,"marks":835},"if (!dados.nome)",[836],{"type":245},{"text":838,"type":75}," is not elegance. It's survival. It only makes sense when you understand that runtime is uncertain territory — the place where your code encounters data you haven't controlled.",{"type":69,"attrs":840,"content":842},{"id":841,"level":36},"h_3v3jr6m6",[843],{"text":844,"type":75,"marks":845},"The question that separates beginners from intermediates",[846],{"type":78},{"type":80,"attrs":848,"content":850},{"id":849},"p_mlazvprn",[851],{"text":852,"type":75},"When a beginner encounters an error, the natural reaction is: \"my code is wrong, I need to fix it.\"",{"type":80,"attrs":854,"content":856},{"id":855},"p_44w7je99",[857,859],{"text":858,"type":75},"When someone who understands runtime encounters the same error, the question is different: ",{"text":860,"type":75,"marks":861},"\"is this error from my code, from the environment it's running in, or from the data it received?\"",[862],{"type":78},{"type":80,"attrs":864,"content":866},{"id":865},"p_estyn9yp",[867],{"text":868,"type":75},"It could be that you are importing a module that does not exist in that runtime. It could be that the version of Node on your machine is different from the version on the server. It could be that the user's browser does not support an API you used. It could be that the environment variable was not configured in the deploy.",{"type":80,"attrs":870,"content":872},{"id":871},"p_gggix72i",[873,875,879],{"text":874,"type":75},"All these are ",{"text":876,"type":75,"marks":877},"runtime problems",[878],{"type":78},{"text":880,"type":75},", not logic problems. And when you understand the difference, your ability to diagnose bugs takes a leap.",{"type":882,"attrs":883},"summaryBox",{"id":884,"items":885,"title":893},"sum_or7wtf7f",[886,887,888,889,890,891,892],"Runtime (moment) — the instant your code is executing, in contrast to when you are writing or compiling.","Runtime (environment) — the program that executes your code: browser, Node.js, Deno, or Bun. Each combines its own engine + APIs.","Runtime error — a bug that only appears during execution, when the code encounters real data and conditions.","The same code behaves differently in different runtimes — because the available APIs change. Browser code won't run in Node and vice versa.","Node.js (V8, largest ecosystem, 15+ years). Deno (V8, secure by default, native TypeScript). Bun (JSC, faster, complete toolkit).","The key question when diagnosing bugs: is the problem with the code, the environment, or the data?","Understanding runtime is understanding that your code does not live in isolation. It always runs within something.","Key takeaways from this article",{"type":69,"attrs":895,"content":897},{"id":896,"level":36},"h_v5qpieqm",[898],{"text":899,"type":75,"marks":900},"A final thought",[901],{"type":78},{"type":80,"attrs":903,"content":905},{"id":904},"p_1v69vs1w",[906],{"text":907,"type":75},"Most concepts in programming seem difficult for two reasons: either no one explained them properly, or someone explained them using other concepts you also didn't know.",{"type":80,"attrs":909,"content":911},{"id":910},"p_roawz8ww",[912],{"text":913,"type":75},"Runtime is a classic case of the first. It's not a difficult concept. It's a poorly presented concept.",{"type":80,"attrs":915,"content":917},{"id":916},"p_uplc8if6",[918],{"text":919,"type":75},"Now that you know what it is — both the moment and the environment — you will start to notice this word everywhere. In documentation, in error messages, in discussions about tools. And instead of skipping over it, you will stop and understand exactly what is being said.",{"type":80,"attrs":921,"content":923},{"id":922},"p_82qikdzx",[924],{"text":925,"type":75},"It's foundational. And foundation is what separates those who follow tutorials from those who understand what they are doing.",{"type":927,"attrs":928},"promoBox",{"id":929,"title":930,"layout":931,"ctaHref":932,"eyebrow":933,"variant":934,"ctaLabel":935,"description":936},"promo_cv7rk8ha","Want to deepen fundamental concepts?","stacked","\u002Ftags\u002Fjavascript","Fundamentals","default","Explore","If runtime made sense, you'll like the other articles about concepts every developer should understand — but no one explains properly.",{"type":938,"attrs":939},"newsletterBlock",{"id":940},"nl_xqlfdgtk",{"type":80,"attrs":942},{"id":943},"p_s4b1kjxs","Runtime: The Concept Nobody Explained Properly","Runtime: execution moment or environment? Understand the difference and how Node, Deno, and Bun work.","2026-08-24T14:53:53.315534+00:00",[948,969,987,1001],{"id":949,"slug":950,"title":951,"excerpt":952,"image":953,"featured":954,"groupId":955,"publishedAt":956,"readingTime":47,"views":957,"author":958,"category":959,"tags":960},"81f24e9a-fc6b-47d0-beb9-d00a6137ed99","framework-vs-sdk-who-calls-whom","Framework vs SDK: Who Calls Whom","Most developers memorize names, but few understand the mechanism. Here is the simple rule to tell a framework from an SDK and level up your debugging.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1787491947099-featured-ikba2e.jpg",true,"0ccb21eb-6459-40ed-8110-227836e9bb74","2026-08-23T13:15:25.439194+00:00",0,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[961,962,965,966],{"slug":63,"name":64},{"slug":963,"name":964},"python","Python",{"slug":57,"name":58},{"slug":967,"name":968},"sdk","Sdk",{"id":970,"slug":971,"title":972,"excerpt":973,"image":974,"featured":44,"groupId":975,"publishedAt":976,"readingTime":977,"views":978,"author":979,"category":980,"tags":981},"c2d6b1ca-29bf-401f-8ab9-a1f828504d0b","microfrontends-with-angular-and-nx-what-nobody-tells-you","Microfrontends with Angular and Nx: what nobody tells you","Every tutorial teaches how to set up microfrontends in minutes, but few reveal the architectural chaos that emerges after months of production deploys.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785206853570-featured-zoyhgn.webp","3368e1b2-b6de-4e94-a3d4-294fae8ade13","2026-08-03T01:42:48.969355+00:00",15,5,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[982,985,986],{"slug":983,"name":984},"angular","Angular",{"slug":63,"name":64},{"slug":54,"name":55},{"id":988,"slug":989,"title":990,"excerpt":991,"image":992,"featured":44,"groupId":993,"publishedAt":994,"readingTime":995,"views":47,"author":996,"category":997,"tags":998},"36440333-311c-4081-92e6-030a04a38fed","astro-island-architecture-performance-and-where-the-framework-truly-fits","Astro: Island Architecture, Performance, and Where the Framework Truly Fits","Astro challenges the modern web status quo by prioritizing static HTML and isolating interactivity into independent, lightweight code islands.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1785721161920-featured-a5vzkb.webp","cb62459e-7ace-43d3-a545-661c5695e925","2026-08-03T01:00:45.280114+00:00",38,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[999,1000],{"slug":63,"name":64},{"slug":54,"name":55},{"id":1002,"slug":1003,"title":1004,"excerpt":1005,"image":1006,"featured":44,"groupId":1007,"publishedAt":1008,"readingTime":1009,"views":957,"author":1010,"category":1011,"tags":1012},"633b6488-2a90-4632-86a5-9cff7ed52f08","javascript-event-loop-the-heart-of-non-blocking-concurrency-revisited-in-2025","JavaScript Event Loop: The Heart of Non-Blocking Concurrency — Revisited in 2025","The Event Loop is not just a simple loop, but a sophisticated coordination mechanism between Call Stack, queues, and runtime. Essential for JS concurrency, it enables thousands of asynchronous operations without blocking the UI. This guide explores its structure, differences between Node.js and browsers, common bugs, advanced techniques, and 2025 trends like Structured Concurrency and scheduler.yield().","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1772847201637-featured-oreiro.jpeg","df6ca967-8130-4b2d-bcac-3532a150131e","2026-07-26T18:54:25.359533+00:00",6,{"name":50,"avatar":9},{"slug":13,"name":14,"color":15},[1013,1014],{"slug":63,"name":64},{"slug":1015,"name":725},"nodejs",{"en":40,"pt":1017,"es":1018},"runtime-o-conceito-que-ninguem-te-explicou-direito-e-que-muda-tudo-quando-voce-entende","runtime-el-concepto-que-nadie-te-explico-bien-y-que-lo-cambia-todo-cuando-lo-entiendes"]