[{"data":1,"prerenderedAt":1287},["ShallowReactive",2],{"cache-index-list":3},[4,204,986,1076],{"id":5,"title":6,"added":7,"body":8,"category":192,"cover":192,"coverSmall":192,"description":193,"expires":192,"extension":194,"external_url":192,"hash":195,"language":49,"meta":196,"navigation":139,"path":197,"pinned":139,"related":192,"seo":198,"series":192,"slug":199,"status":200,"stem":201,"subcategory":192,"tags":202,"updated":192,"version":192,"__hash__":203},"cache\u002Fcache\u002F2025\u002F03\u002Fanimating-height-auto.md","Animating Height Auto","2024-12-08",{"type":9,"value":10,"toc":187},"minimark",[11,16,37,41,44,82,85,171,175,183],[12,13,15],"h2",{"id":14},"what-this-is","What This Is?",[17,18,19,20,24,25,29,30],"p",{},"There's new ",[21,22,23],"strong",{},"experimental"," browser support for animating height via keywords like ",[26,27,28],"code",{},"height: auto;",". ",[31,32,36],"a",{"href":33,"rel":34},"https:\u002F\u002Fdrafts.csswg.org\u002Fcss-values-5\u002F#valdef-interpolate-size-allow-keywords",[35],"nofollow","Here's the W3C Working Draft",[12,38,40],{"id":39},"how-this-works","How this works",[17,42,43],{},"First we need to opt in:",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-css shiki shiki-themes github-light github-dark","html {\n    interpolate-size: allow-keywords;\n}\n","css","",[26,52,53,66,76],{"__ignoreMap":50},[54,55,58,62],"span",{"class":56,"line":57},"line",1,[54,59,61],{"class":60},"s9eBZ","html",[54,63,65],{"class":64},"sVt8B"," {\n",[54,67,69,73],{"class":56,"line":68},2,[54,70,72],{"class":71},"sj4cs","    interpolate-size",[54,74,75],{"class":64},": allow-keywords;\n",[54,77,79],{"class":56,"line":78},3,[54,80,81],{"class":64},"}\n",[17,83,84],{},"Then we can write our animation:",[45,86,88],{"className":47,"code":87,"language":49,"meta":50,"style":50},".container {\n    height: 0;\n    transition: height 0.2s;\n}\n\n.container.is-open {\n    height: auto; \u002F* We can now animate the height with the 'auto' keyword! *\u002F\n}\n",[26,89,90,98,112,129,134,141,149,166],{"__ignoreMap":50},[54,91,92,96],{"class":56,"line":57},[54,93,95],{"class":94},"sScJk",".container",[54,97,65],{"class":64},[54,99,100,103,106,109],{"class":56,"line":68},[54,101,102],{"class":71},"    height",[54,104,105],{"class":64},": ",[54,107,108],{"class":71},"0",[54,110,111],{"class":64},";\n",[54,113,114,117,120,123,127],{"class":56,"line":78},[54,115,116],{"class":71},"    transition",[54,118,119],{"class":64},": height ",[54,121,122],{"class":71},"0.2",[54,124,126],{"class":125},"szBVR","s",[54,128,111],{"class":64},[54,130,132],{"class":56,"line":131},4,[54,133,81],{"class":64},[54,135,137],{"class":56,"line":136},5,[54,138,140],{"emptyLinePlaceholder":139},true,"\n",[54,142,144,147],{"class":56,"line":143},6,[54,145,146],{"class":94},".container.is-open",[54,148,65],{"class":64},[54,150,152,154,156,159,162],{"class":56,"line":151},7,[54,153,102],{"class":71},[54,155,105],{"class":64},[54,157,158],{"class":71},"auto",[54,160,161],{"class":64},"; ",[54,163,165],{"class":164},"sJ8bj","\u002F* We can now animate the height with the 'auto' keyword! *\u002F\n",[54,167,169],{"class":56,"line":168},8,[54,170,81],{"class":64},[12,172,174],{"id":173},"browser-support","Browser Support",[17,176,177,182],{},[31,178,181],{"href":179,"rel":180},"https:\u002F\u002Fcaniuse.com\u002Fmdn-css_properties_interpolate-size_allow-keywords",[35],"Browser support"," is getting there but still not available in Safari or Firefox... go figure.",[184,185,186],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":50,"searchDepth":68,"depth":68,"links":188},[189,190,191],{"id":14,"depth":68,"text":15},{"id":39,"depth":68,"text":40},{"id":173,"depth":68,"text":174},null,"We can now \"mostly\" animate height auto in CSS now!","md","fresh",{},"\u002Fcache\u002F2025\u002F03\u002Fanimating-height-auto",{"title":6,"description":193},"animating-height-auto","active","cache\u002F2025\u002F03\u002Fanimating-height-auto",[49],"NHb8MGzxKqPWilNMFlYuREvHssAPZjefUZ04FvWvIN4",{"id":205,"title":206,"added":207,"body":208,"category":192,"cover":192,"coverSmall":192,"description":976,"expires":192,"extension":194,"external_url":192,"hash":195,"language":192,"meta":977,"navigation":139,"path":978,"pinned":979,"related":192,"seo":980,"series":192,"slug":981,"status":200,"stem":982,"subcategory":192,"tags":983,"updated":192,"version":192,"__hash__":985},"cache\u002Fcache\u002F2025\u002F03\u002Fpass-by-reference-or-value.md","Pass by Reference, Pass by Value","2025-03-20",{"type":9,"value":209,"toc":966},[210,213,219,225,233,241,257,261,266,269,471,475,482,582,585,589,592,595,742,745,953,956,960,963],[17,211,212],{},"I've never been a great test taker and that extends to a situation I recently found myself in... interviewing for a job. As part of the interview I had to answer some relatively easy technical questions. A few on JavaScript proficiency and a few general \"no right or wrong, how would I do this\" kind of questions. However, one of these questions in particular caught me off guard.",[214,215,216],"blockquote",{},[17,217,218],{},"Could I explain Pass by Value vs. Pass by Reference in JavaScript?",[17,220,221,224],{},[21,222,223],{},"Dang it",". I may have well been trying to explain my browser history to my grandma. I was floundering. It's not that I just completely didn't understand this, I've been working with this stuff for years, but as things go this was a test and as we already know... I'm not a great test taker.",[17,226,227,228,232],{},"After the interview I immediately started a ",[229,230,231],"del",{},"quick"," rather long deep dive down the interwebs to figure out the error of my ways so that next time maybe I'll flounder a little less, and if you're reading this maybe you will too.",[12,234,236,237,240],{"id":235},"some-things-ive-grokked-through-science-research","Some things I've grokked through ",[229,238,239],{},"science"," research",[242,243,244,248,251,254],"ul",{},[245,246,247],"li",{},"I've found that although this is a mostly foundational concept, it does still confuse a lot of people.",[245,249,250],{},"Pass by value and pass by reference in JavaScript is different than in other languages... for better or worse. My cousin told me worse but I think the jury is still out.",[245,252,253],{},"When you assign a variable it takes up a specific location in memory and that's an important concept to remember.",[245,255,256],{},"Anything that is not a JavaScript primitive type is passed by reference. That means objects, arrays, functions.",[12,258,260],{"id":259},"the-nitty-gritty","The Nitty-Gritty",[262,263,265],"h3",{"id":264},"pass-by-value","Pass by Value",[17,267,268],{},"JavaScript's primitive types (strings, numbers, booleans, etc.) are passed by value. This means that when passing them to a function or assigning them to a new variable, you're actually creating a copy of the original value.",[45,270,274],{"className":271,"code":272,"language":273,"meta":50,"style":50},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F Let's see pass by value in action\n\nlet myAge = 35; \u002F\u002F Let's just pretend this is my age\nlet yourAge = myAge; \u002F\u002F yourAge gets a COPY of myAge's value\n\nyourAge = 25; \u002F\u002F Changing yourAge doesn't affect myAge\nconsole.log(myAge); \u002F\u002F Still 35\nconsole.log(yourAge); \u002F\u002F 25\n\n\u002F\u002F Function parameters work the same way\nfunction addFiveYears(age) {\n    age = age + 5; \u002F\u002F This only affects the local copy\n    console.log('Inside function:', age);\n}\n\naddFiveYears(myAge); \u002F\u002F Logs \"Inside function: 40\"\nconsole.log('Original age:', myAge); \u002F\u002F Still 35\n","js",[26,275,276,281,285,304,319,323,338,352,364,369,375,394,416,433,438,443,454],{"__ignoreMap":50},[54,277,278],{"class":56,"line":57},[54,279,280],{"class":164},"\u002F\u002F Let's see pass by value in action\n",[54,282,283],{"class":56,"line":68},[54,284,140],{"emptyLinePlaceholder":139},[54,286,287,290,293,296,299,301],{"class":56,"line":78},[54,288,289],{"class":125},"let",[54,291,292],{"class":64}," myAge ",[54,294,295],{"class":125},"=",[54,297,298],{"class":71}," 35",[54,300,161],{"class":64},[54,302,303],{"class":164},"\u002F\u002F Let's just pretend this is my age\n",[54,305,306,308,311,313,316],{"class":56,"line":131},[54,307,289],{"class":125},[54,309,310],{"class":64}," yourAge ",[54,312,295],{"class":125},[54,314,315],{"class":64}," myAge; ",[54,317,318],{"class":164},"\u002F\u002F yourAge gets a COPY of myAge's value\n",[54,320,321],{"class":56,"line":136},[54,322,140],{"emptyLinePlaceholder":139},[54,324,325,328,330,333,335],{"class":56,"line":143},[54,326,327],{"class":64},"yourAge ",[54,329,295],{"class":125},[54,331,332],{"class":71}," 25",[54,334,161],{"class":64},[54,336,337],{"class":164},"\u002F\u002F Changing yourAge doesn't affect myAge\n",[54,339,340,343,346,349],{"class":56,"line":151},[54,341,342],{"class":64},"console.",[54,344,345],{"class":94},"log",[54,347,348],{"class":64},"(myAge); ",[54,350,351],{"class":164},"\u002F\u002F Still 35\n",[54,353,354,356,358,361],{"class":56,"line":168},[54,355,342],{"class":64},[54,357,345],{"class":94},[54,359,360],{"class":64},"(yourAge); ",[54,362,363],{"class":164},"\u002F\u002F 25\n",[54,365,367],{"class":56,"line":366},9,[54,368,140],{"emptyLinePlaceholder":139},[54,370,372],{"class":56,"line":371},10,[54,373,374],{"class":164},"\u002F\u002F Function parameters work the same way\n",[54,376,378,381,384,387,391],{"class":56,"line":377},11,[54,379,380],{"class":125},"function",[54,382,383],{"class":94}," addFiveYears",[54,385,386],{"class":64},"(",[54,388,390],{"class":389},"s4XuR","age",[54,392,393],{"class":64},") {\n",[54,395,397,400,402,405,408,411,413],{"class":56,"line":396},12,[54,398,399],{"class":64},"    age ",[54,401,295],{"class":125},[54,403,404],{"class":64}," age ",[54,406,407],{"class":125},"+",[54,409,410],{"class":71}," 5",[54,412,161],{"class":64},[54,414,415],{"class":164},"\u002F\u002F This only affects the local copy\n",[54,417,419,422,424,426,430],{"class":56,"line":418},13,[54,420,421],{"class":64},"    console.",[54,423,345],{"class":94},[54,425,386],{"class":64},[54,427,429],{"class":428},"sZZnC","'Inside function:'",[54,431,432],{"class":64},", age);\n",[54,434,436],{"class":56,"line":435},14,[54,437,81],{"class":64},[54,439,441],{"class":56,"line":440},15,[54,442,140],{"emptyLinePlaceholder":139},[54,444,446,449,451],{"class":56,"line":445},16,[54,447,448],{"class":94},"addFiveYears",[54,450,348],{"class":64},[54,452,453],{"class":164},"\u002F\u002F Logs \"Inside function: 40\"\n",[54,455,457,459,461,463,466,469],{"class":56,"line":456},17,[54,458,342],{"class":64},[54,460,345],{"class":94},[54,462,386],{"class":64},[54,464,465],{"class":428},"'Original age:'",[54,467,468],{"class":64},", myAge); ",[54,470,351],{"class":164},[262,472,474],{"id":473},"pass-by-reference","Pass by Reference",[17,476,477,478,481],{},"Objects in JavaScript (including arrays and functions) are passed by reference. What this means is that unlike when passing by value, these variables do not create a new spot in memory, they just ",[21,479,480],{},"reference"," the original. A reference is just a pointer to where the actual data lives.",[45,483,485],{"className":271,"code":484,"language":273,"meta":50,"style":50},"\u002F\u002F Pass by reference example\n\nlet bestHomie = { name: 'Matt', age: 35 };\n\nfunction addOneYear(homie) {\n    homie.age += 1; \u002F\u002F This changes the original object!\n}\n\naddOneYear(bestHomie);\nconsole.log(bestHomie); \u002F\u002F {\"name\": \"Matt\", \"age\": 36} - The original was modified\n",[26,486,487,492,496,520,524,538,554,558,562,570],{"__ignoreMap":50},[54,488,489],{"class":56,"line":57},[54,490,491],{"class":164},"\u002F\u002F Pass by reference example\n",[54,493,494],{"class":56,"line":68},[54,495,140],{"emptyLinePlaceholder":139},[54,497,498,500,503,505,508,511,514,517],{"class":56,"line":78},[54,499,289],{"class":125},[54,501,502],{"class":64}," bestHomie ",[54,504,295],{"class":125},[54,506,507],{"class":64}," { name: ",[54,509,510],{"class":428},"'Matt'",[54,512,513],{"class":64},", age: ",[54,515,516],{"class":71},"35",[54,518,519],{"class":64}," };\n",[54,521,522],{"class":56,"line":131},[54,523,140],{"emptyLinePlaceholder":139},[54,525,526,528,531,533,536],{"class":56,"line":136},[54,527,380],{"class":125},[54,529,530],{"class":94}," addOneYear",[54,532,386],{"class":64},[54,534,535],{"class":389},"homie",[54,537,393],{"class":64},[54,539,540,543,546,549,551],{"class":56,"line":143},[54,541,542],{"class":64},"    homie.age ",[54,544,545],{"class":125},"+=",[54,547,548],{"class":71}," 1",[54,550,161],{"class":64},[54,552,553],{"class":164},"\u002F\u002F This changes the original object!\n",[54,555,556],{"class":56,"line":151},[54,557,81],{"class":64},[54,559,560],{"class":56,"line":168},[54,561,140],{"emptyLinePlaceholder":139},[54,563,564,567],{"class":56,"line":366},[54,565,566],{"class":94},"addOneYear",[54,568,569],{"class":64},"(bestHomie);\n",[54,571,572,574,576,579],{"class":56,"line":371},[54,573,342],{"class":64},[54,575,345],{"class":94},[54,577,578],{"class":64},"(bestHomie); ",[54,580,581],{"class":164},"\u002F\u002F {\"name\": \"Matt\", \"age\": 36} - The original was modified\n",[17,583,584],{},"Because of this, when making changes, the referenced variable is changed. Not some copy of the variable in some other deep dark shadowy spot in memory.",[262,586,588],{"id":587},"in-the-immortal-words-of-run-dmc-its-tricky","In the immortal words of Run DMC, \"It's tricky\"",[17,590,591],{},"There are a couple of nuances with references that can trip up even the best of us:",[17,593,594],{},"First, JavaScript compares object references, not their content:",[45,596,598],{"className":271,"code":597,"language":273,"meta":50,"style":50},"\u002F\u002F References vs content comparison\n\nlet arr1 = [1, 2];\nlet arr2 = [1, 2];\nconsole.log(arr1 === arr2); \u002F\u002F false - Despite the identical content in each array, their different spots in memory are what is being compared\n\nlet arr3 = arr1; \u002F\u002F arr3 references the same array as arr1\nconsole.log(arr1 === arr3); \u002F\u002F true - arr3 is referencing the same spot in memory as arr1\n\n\u002F\u002F This explains why this works:\narr3.push(3);\nconsole.log(arr1); \u002F\u002F [1, 2, 3] - the original array is modified\n",[26,599,600,605,609,633,652,670,674,689,705,709,714,730],{"__ignoreMap":50},[54,601,602],{"class":56,"line":57},[54,603,604],{"class":164},"\u002F\u002F References vs content comparison\n",[54,606,607],{"class":56,"line":68},[54,608,140],{"emptyLinePlaceholder":139},[54,610,611,613,616,618,621,624,627,630],{"class":56,"line":78},[54,612,289],{"class":125},[54,614,615],{"class":64}," arr1 ",[54,617,295],{"class":125},[54,619,620],{"class":64}," [",[54,622,623],{"class":71},"1",[54,625,626],{"class":64},", ",[54,628,629],{"class":71},"2",[54,631,632],{"class":64},"];\n",[54,634,635,637,640,642,644,646,648,650],{"class":56,"line":131},[54,636,289],{"class":125},[54,638,639],{"class":64}," arr2 ",[54,641,295],{"class":125},[54,643,620],{"class":64},[54,645,623],{"class":71},[54,647,626],{"class":64},[54,649,629],{"class":71},[54,651,632],{"class":64},[54,653,654,656,658,661,664,667],{"class":56,"line":136},[54,655,342],{"class":64},[54,657,345],{"class":94},[54,659,660],{"class":64},"(arr1 ",[54,662,663],{"class":125},"===",[54,665,666],{"class":64}," arr2); ",[54,668,669],{"class":164},"\u002F\u002F false - Despite the identical content in each array, their different spots in memory are what is being compared\n",[54,671,672],{"class":56,"line":143},[54,673,140],{"emptyLinePlaceholder":139},[54,675,676,678,681,683,686],{"class":56,"line":151},[54,677,289],{"class":125},[54,679,680],{"class":64}," arr3 ",[54,682,295],{"class":125},[54,684,685],{"class":64}," arr1; ",[54,687,688],{"class":164},"\u002F\u002F arr3 references the same array as arr1\n",[54,690,691,693,695,697,699,702],{"class":56,"line":168},[54,692,342],{"class":64},[54,694,345],{"class":94},[54,696,660],{"class":64},[54,698,663],{"class":125},[54,700,701],{"class":64}," arr3); ",[54,703,704],{"class":164},"\u002F\u002F true - arr3 is referencing the same spot in memory as arr1\n",[54,706,707],{"class":56,"line":366},[54,708,140],{"emptyLinePlaceholder":139},[54,710,711],{"class":56,"line":371},[54,712,713],{"class":164},"\u002F\u002F This explains why this works:\n",[54,715,716,719,722,724,727],{"class":56,"line":377},[54,717,718],{"class":64},"arr3.",[54,720,721],{"class":94},"push",[54,723,386],{"class":64},[54,725,726],{"class":71},"3",[54,728,729],{"class":64},");\n",[54,731,732,734,736,739],{"class":56,"line":396},[54,733,342],{"class":64},[54,735,345],{"class":94},[54,737,738],{"class":64},"(arr1); ",[54,740,741],{"class":164},"\u002F\u002F [1, 2, 3] - the original array is modified\n",[17,743,744],{},"Second, even though objects are passed by reference, if you reassign the parameter inside a function, it won't affect the original:",[45,746,748],{"className":271,"code":747,"language":273,"meta":50,"style":50},"\u002F\u002F Reassigning vs modifying\n\nlet matt = { height: '6ft', eyes: 'brown', career: 'web dev' };\n\nfunction upgrade(person) {\n    \u002F\u002F Creates a new object and assigns it to the parameter\n    person = { height: '6.5ft', eyes: 'blue', career: 'finance' };\n    console.log('Inside function:', person);\n}\n\nupgrade(matt); \u002F\u002F Logs the new object from the function\nconsole.log('Original:', matt); \u002F\u002F Still { height: \"6ft\", eyes: \"brown\", career: \"web dev\" }\n\n\u002F\u002F But if we modify properties instead of reassigning them:\nfunction upgradeCareer(person) {\n    person.career = 'astronaut';\n}\n\nupgradeCareer(matt);\nconsole.log('After upgrade:', matt); \u002F\u002F { height: \"6ft\", eyes: \"brown\", career: \"astronaut\" }\n",[26,749,750,755,759,788,792,806,811,835,848,852,856,867,884,888,893,906,918,922,927,936],{"__ignoreMap":50},[54,751,752],{"class":56,"line":57},[54,753,754],{"class":164},"\u002F\u002F Reassigning vs modifying\n",[54,756,757],{"class":56,"line":68},[54,758,140],{"emptyLinePlaceholder":139},[54,760,761,763,766,768,771,774,777,780,783,786],{"class":56,"line":78},[54,762,289],{"class":125},[54,764,765],{"class":64}," matt ",[54,767,295],{"class":125},[54,769,770],{"class":64}," { height: ",[54,772,773],{"class":428},"'6ft'",[54,775,776],{"class":64},", eyes: ",[54,778,779],{"class":428},"'brown'",[54,781,782],{"class":64},", career: ",[54,784,785],{"class":428},"'web dev'",[54,787,519],{"class":64},[54,789,790],{"class":56,"line":131},[54,791,140],{"emptyLinePlaceholder":139},[54,793,794,796,799,801,804],{"class":56,"line":136},[54,795,380],{"class":125},[54,797,798],{"class":94}," upgrade",[54,800,386],{"class":64},[54,802,803],{"class":389},"person",[54,805,393],{"class":64},[54,807,808],{"class":56,"line":143},[54,809,810],{"class":164},"    \u002F\u002F Creates a new object and assigns it to the parameter\n",[54,812,813,816,818,820,823,825,828,830,833],{"class":56,"line":151},[54,814,815],{"class":64},"    person ",[54,817,295],{"class":125},[54,819,770],{"class":64},[54,821,822],{"class":428},"'6.5ft'",[54,824,776],{"class":64},[54,826,827],{"class":428},"'blue'",[54,829,782],{"class":64},[54,831,832],{"class":428},"'finance'",[54,834,519],{"class":64},[54,836,837,839,841,843,845],{"class":56,"line":168},[54,838,421],{"class":64},[54,840,345],{"class":94},[54,842,386],{"class":64},[54,844,429],{"class":428},[54,846,847],{"class":64},", person);\n",[54,849,850],{"class":56,"line":366},[54,851,81],{"class":64},[54,853,854],{"class":56,"line":371},[54,855,140],{"emptyLinePlaceholder":139},[54,857,858,861,864],{"class":56,"line":377},[54,859,860],{"class":94},"upgrade",[54,862,863],{"class":64},"(matt); ",[54,865,866],{"class":164},"\u002F\u002F Logs the new object from the function\n",[54,868,869,871,873,875,878,881],{"class":56,"line":396},[54,870,342],{"class":64},[54,872,345],{"class":94},[54,874,386],{"class":64},[54,876,877],{"class":428},"'Original:'",[54,879,880],{"class":64},", matt); ",[54,882,883],{"class":164},"\u002F\u002F Still { height: \"6ft\", eyes: \"brown\", career: \"web dev\" }\n",[54,885,886],{"class":56,"line":418},[54,887,140],{"emptyLinePlaceholder":139},[54,889,890],{"class":56,"line":435},[54,891,892],{"class":164},"\u002F\u002F But if we modify properties instead of reassigning them:\n",[54,894,895,897,900,902,904],{"class":56,"line":440},[54,896,380],{"class":125},[54,898,899],{"class":94}," upgradeCareer",[54,901,386],{"class":64},[54,903,803],{"class":389},[54,905,393],{"class":64},[54,907,908,911,913,916],{"class":56,"line":445},[54,909,910],{"class":64},"    person.career ",[54,912,295],{"class":125},[54,914,915],{"class":428}," 'astronaut'",[54,917,111],{"class":64},[54,919,920],{"class":56,"line":456},[54,921,81],{"class":64},[54,923,925],{"class":56,"line":924},18,[54,926,140],{"emptyLinePlaceholder":139},[54,928,930,933],{"class":56,"line":929},19,[54,931,932],{"class":94},"upgradeCareer",[54,934,935],{"class":64},"(matt);\n",[54,937,939,941,943,945,948,950],{"class":56,"line":938},20,[54,940,342],{"class":64},[54,942,345],{"class":94},[54,944,386],{"class":64},[54,946,947],{"class":428},"'After upgrade:'",[54,949,880],{"class":64},[54,951,952],{"class":164},"\u002F\u002F { height: \"6ft\", eyes: \"brown\", career: \"astronaut\" }\n",[17,954,955],{},"It's like my Facebook profile. If someone hacks in and changes all my information, my actual profile gets updated for everyone to see. But if they just copy everything into a new fake profile posing as me, my original profile doesn't get touched—complete with that regrettable bathroom selfie from 2018.",[12,957,959],{"id":958},"in-the-end","In the end",[17,961,962],{},"This wasn't necessarily foreign to me but it is a confusing concept I obviously wasn't prepared to explain. But next time interviewer–you best believe, I got you.",[184,964,965],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":50,"searchDepth":68,"depth":68,"links":967},[968,970,975],{"id":235,"depth":68,"text":969},"Some things I've grokked through science research",{"id":259,"depth":68,"text":260,"children":971},[972,973,974],{"id":264,"depth":78,"text":265},{"id":473,"depth":78,"text":474},{"id":587,"depth":78,"text":588},{"id":958,"depth":68,"text":959},"Can you explain Pass by Value vs Pass by Reference in JavaScript?",{},"\u002Fcache\u002F2025\u002F03\u002Fpass-by-reference-or-value",false,{"title":206,"description":976},"pass-by-reference-or-value","cache\u002F2025\u002F03\u002Fpass-by-reference-or-value",[984],"javascript","Wje6q5JN1u9KDaFl3wiE7ZVsgVWyr1ttqQezx5Aht_M",{"id":987,"title":988,"added":989,"body":990,"category":192,"cover":192,"coverSmall":192,"description":1067,"expires":192,"extension":194,"external_url":192,"hash":195,"language":192,"meta":1068,"navigation":139,"path":1069,"pinned":979,"related":1070,"seo":1071,"series":192,"slug":1072,"status":1073,"stem":1074,"subcategory":192,"tags":192,"updated":192,"version":192,"__hash__":1075},"cache\u002Fcache\u002F2025\u002F05\u002Fmy-dream-job.md","My Dream Job","2025-05-13",{"type":9,"value":991,"toc":1060},[992,996,999,1003,1006,1010,1013,1016,1019,1022,1025,1028,1031,1034,1037,1041,1044,1047,1051,1054,1057],[12,993,995],{"id":994},"forward","Forward",[17,997,998],{},"I've been thinking about this lately. I'm currently four months into being laid off and unemployed. My full-time job has become searching for something new, and while I'm in the process of interviewing with a couple of companies I'd really love to work for, the broader landscape looks a bit bleak. I've also turned down some interviewing opportunities that perhaps I shouldn't have, and I'm starting to regret those decisions – after all, who knows what might happen in this market?",[12,1000,1002],{"id":1001},"but-what-do-i-want-to-do","But what do I want to do?",[17,1004,1005],{},"I was recently asked what my perfect and or dream job would be... and honestly, I had a little trouble answering that at the time.",[12,1007,1009],{"id":1008},"my-thoughts-since","My thoughts since",[17,1011,1012],{},"I've thought about it though!",[17,1014,1015],{},"I've thought about how I love to spin up a new project. Hell, it could be a tutorial app (I love a good tutorial) that I'm looking to learn one piece of, or a dumbass idea I had, or a new contract job. Whatever it might be I've realized that what I really like about this is figuring things out and learning something new.",[17,1017,1018],{},"I like to figure out the best design and UX.",[17,1020,1021],{},"I like to worry about state management... and component libraries.",[17,1023,1024],{},"I like to figure out the best folder structure for this application.",[17,1026,1027],{},"I like to figure out the right framework, front-end and back-end, or what this should be built in.",[17,1029,1030],{},"I want to take your ideas and make them a for-honest-to-God working prototype. Something you can show off and maybe sell to make money off of.",[17,1032,1033],{},"Can I learn some new technology? Some new library? or framework in the process? Hopefully!!",[17,1035,1036],{},"From nuts to bolts, or concept to mostly completion 😬. I really like building POC's. It's fun.",[12,1038,1040],{"id":1039},"just-because","Just Because",[17,1042,1043],{},"I also know that I am completely happy and at-ease with the world being an IC (individual contributor) on a longstanding application, working for the powers at be, or whatever.",[17,1045,1046],{},"But shoot, if I could have my dream? It would be this.",[12,1048,1050],{"id":1049},"my-dream","My Dream",[17,1052,1053],{},"I would love to build concept apps, full-time. Applications that are just a thought, or need a proof of concept (POC) first. I would love to be an experimental developer... I guess?",[17,1055,1056],{},"I don't know, I'm unsure what this position is, or would be titled, or if it even exists?! I do know that I've thought of this often and would definitely love the potential opportunity. The closest I can think of is a developer advocate... that maybe doesn't have to fully \"advocate\"? Hah.",[17,1058,1059],{},"Maybe this is possible, maybe it's not. But it sure seems like a dream!",{"title":50,"searchDepth":68,"depth":68,"links":1061},[1062,1063,1064,1065,1066],{"id":994,"depth":68,"text":995},{"id":1001,"depth":68,"text":1002},{"id":1008,"depth":68,"text":1009},{"id":1039,"depth":68,"text":1040},{"id":1049,"depth":68,"text":1050},"If I could have a dream job in the dev space, this would be it.",{},"\u002Fcache\u002F2025\u002F05\u002Fmy-dream-job",[],{"title":988,"description":1067},"my-dream-job","archived","cache\u002F2025\u002F05\u002Fmy-dream-job","ssRcN_n3PiKVwiEqyyVqpxKni4ge_wL_moIMylsrzQc",{"id":1077,"title":1078,"added":1079,"body":1080,"category":192,"cover":1278,"coverSmall":1279,"description":1280,"expires":192,"extension":194,"external_url":1245,"hash":195,"language":192,"meta":1281,"navigation":139,"path":1282,"pinned":139,"related":192,"seo":1283,"series":192,"slug":1153,"status":200,"stem":1284,"subcategory":192,"tags":1285,"updated":192,"version":192,"__hash__":1286},"cache\u002Fcache\u002F2025\u002F07\u002Fcarve.md","Carve","2025-07-20",{"type":9,"value":1081,"toc":1268},[1082,1085,1089,1098,1102,1105,1114,1120,1124,1133,1137,1140,1151,1154,1157,1166,1175,1178,1182,1233,1236,1240,1249,1265],[17,1083,1084],{},"So, the other day I was starting a new project, just like hundreds of other projects before it. This one however, was actually an older project that I wanted to revive. But you know what? Just like hundreds of other projects before it... I wanted to change everything about the stack it was originally built on. 🤦🏻‍♂️",[12,1086,1088],{"id":1087},"init","Init",[17,1090,1091,1092,1097],{},"I got all hot and heavy thinking through my opinions. What I like to work with, what I might want to work with in the future, and where the state of some other projects and frameworks are at. I used to be quite the advocate for React and Next.js, but in the past year or so I've gotten a little dismayed by Next.js and Vercel (more on this later). I was still into React and found ",[31,1093,1096],{"href":1094,"rel":1095},"https:\u002F\u002Ftanstack.com\u002Frouter",[35],"Tanstack Router",", which I initially built my project on... and it was great, I will always recommend anything Tanstack to anyone. I had also been working with Vue.js at my job full time and was really finding that to be enjoyable. I had actually initially learned Vue.js before ever getting into React. That was years ago.",[12,1099,1101],{"id":1100},"over-engineering-much","Over engineering, Much?",[17,1103,1104],{},"As I was working through getting a new project up and running that I could somewhat import my old project into, I kept running into walls, knowing what ultimately I wanted.",[17,1106,1107,1108,1113],{},"A monorepo that was type safe end-to-end. Something like ",[31,1109,1112],{"href":1110,"rel":1111},"https:\u002F\u002Fcreate.t3.gg\u002F",[35],"create-t3-app"," but with some very different ways of doing things. I wanted the flexibility to add apps or packages and have them work together within a singular repo... that's what monorepo's are for. I needed my types to flow through from the servers to the web apps for my own personal DX (developer experience). I also wanted the frontend apps and backend servers to work through an API layer that still allowed types to work, which can be tricky in a monorepo. I wanted, needed, the ability to add servers and frontends and maintain a singular api layer.",[17,1115,1116],{},[1117,1118,1119],"em",{},"Needless to say, I stopped working on the project at hand and started a new one. Lets build a template for all future projects. So like a good soldier, that's what I did.",[12,1121,1123],{"id":1122},"credit","Credit",[17,1125,1126,1127,1132],{},"I want to give credit where credit is due. The very first iteration of this was started with ",[31,1128,1131],{"href":1129,"rel":1130},"https:\u002F\u002Fbetter-t-stack.dev\u002F",[35],"Better T Stack",". It's a very cool project and I hope those devs continue to build on it. I'll urge you to look into it when starting up your frontend projects.",[12,1134,1136],{"id":1135},"now","Now",[17,1138,1139],{},"I've spent the last few days working through things (emotionally and mentally), and I think I've built a \"tool\" that could be beneficial... at least for me, going forward.",[242,1141,1142,1145,1148],{},[245,1143,1144],{},"It's very opinionated.",[245,1146,1147],{},"It's very early.",[245,1149,1150],{},"I'm very likely to change opinions.",[12,1152,1078],{"id":1153},"carve",[17,1155,1156],{},"I'm calling it Carve. There's no good reason for that, but shoot... I can't call it Tanstack Start... and I've already started working on branding efforts (which is a whole other rabbit hole for me). 🙃",[17,1158,1159,1160,1165],{},"The template uses Nuxt.js for a frontend application. I've really started liking Nuxt.js. At the time of this writing, Nuxt Labs, the team behind Nuxt.js, were just bought by Vercel. I'm not sure what that means for the future of Nuxt.js, but from what I've seen, it might be OK... They didn't seem to destroy SvelteKit and some of the other Nuxt Lab projects are said to be going open source. Like ",[31,1161,1164],{"href":1162,"rel":1163},"https:\u002F\u002Fui.nuxt.com\u002F",[35],"Nuxt UI Pro",", which I'd like to add to this template.",[17,1167,1168,1169,1174],{},"In an alternate universe version of myself, I've chosen ",[31,1170,1173],{"href":1171,"rel":1172},"https:\u002F\u002Felysiajs.com\u002F",[35],"Elysia.js"," for the starter backends. I would typically shout \"use Hone.js\" from the mountaintops, but I actually had a better experience getting types to flow with Elysia.",[17,1176,1177],{},"Maybe you caught that \"backend(s)\" in the last paragraph. This may be a mistake that I'll change later, but I'm separating auth logic from app logic into their own servers and databases. At this point I could separate much more before I'm really done with this, but this is where I'm starting. It's a lot to maintain on a development side and I do have a dockerfile to help spin up the databases, but again, this is a WIP, and will change.",[262,1179,1181],{"id":1180},"speaking-of-auth-here-are-some-decisions-ive-made-that-may-change","Speaking of Auth, here are some decisions I've made (that may change)",[242,1183,1184,1193,1202,1211,1219],{},[245,1185,1186,1187,1192],{},"I've chosen ",[31,1188,1191],{"href":1189,"rel":1190},"https:\u002F\u002Fwww.better-auth.com\u002F",[35],"Better Auth",", it's really cool.",[245,1194,1195,1196,1201],{},"I'm using ",[31,1197,1200],{"href":1198,"rel":1199},"https:\u002F\u002Fbun.sh\u002F",[35],"Bun"," for package management and runtime.",[245,1203,1204,1205,1210],{},"Instead of tRPC or REST or GraphQL, ",[31,1206,1209],{"href":1207,"rel":1208},"https:\u002F\u002Forpc.unnoq.com\u002F",[35],"oRPC"," because I'm interested.",[245,1212,1213,1218],{},[31,1214,1217],{"href":1215,"rel":1216},"https:\u002F\u002Fbiomejs.dev\u002F",[35],"Biome",", but honestly I may go back to ESLint and Prettier... Biome doesn't format Vue SFC's, and I\"m butt hurt about that.",[245,1220,1221,1226,1227,1232],{},[31,1222,1225],{"href":1223,"rel":1224},"https:\u002F\u002Fturborepo.com\u002F",[35],"Turborepo",", but I'm also looking at ",[31,1228,1231],{"href":1229,"rel":1230},"https:\u002F\u002Fnx.dev\u002F",[35],"NX",", who knows where that'll go.",[17,1234,1235],{},"There are other decisions I'm making as I go and they might change all the time. But right now, you can at least get something up and running.",[12,1237,1239],{"id":1238},"so-lfgo","So, LFGO!!",[17,1241,1242,1243,1248],{},"You can use Carve right now. Find it ",[31,1244,1247],{"href":1245,"rel":1246},"https:\u002F\u002Fgithub.com\u002Fmatthewatkins\u002Fcarve",[35],"at this Github link",", and click the \"Use This Template\" button at the top of the page.",[17,1250,1251,1252,1255,1256,1260,1261,1264],{},"Just read through the README.md and the supporting ",[26,1253,1254],{},"\u002Fdocs\u002F"," and you should be good. You also may need to ",[31,1257,1259],{"href":1198,"rel":1258},[35],"install Bun"," on your machine, though. And, there are scripts outlined in the ",[26,1262,1263],{},"\u002Fdocs\u002FCARVE_INIT.md"," file that help if you want to rename the project and get things going.",[17,1266,1267],{},"Anyway, have fun and let me know how it goes.",{"title":50,"searchDepth":68,"depth":68,"links":1269},[1270,1271,1272,1273,1274,1277],{"id":1087,"depth":68,"text":1088},{"id":1100,"depth":68,"text":1101},{"id":1122,"depth":68,"text":1123},{"id":1135,"depth":68,"text":1136},{"id":1153,"depth":68,"text":1078,"children":1275},[1276],{"id":1180,"depth":78,"text":1181},{"id":1238,"depth":68,"text":1239},".\u002Fcarve_07202025.jpg",".\u002Fcarve_sm_07202025.jpg","Introducing Carve.",{},"\u002Fcache\u002F2025\u002F07\u002Fcarve",{"title":1078,"description":1280},"cache\u002F2025\u002F07\u002Fcarve",[984],"nG7fJEovczbY5EzN04VkXN7Um1SxPIS85BA8wFxzw6o",1782502285487]