[{"data":1,"prerenderedAt":1589},["ShallowReactive",2],{"blog-dark-mode":3,"blog-all-for-related":1123},{"id":4,"title":5,"author":6,"body":7,"cardAlt":5,"categories":1108,"description":1111,"draft":1112,"extension":1113,"headerImage":1114,"keywords":1115,"meta":1116,"name":1117,"navigation":113,"path":1118,"seo":1119,"series":6,"stem":1120,"updated":6,"year":1121,"__hash__":1122},"blog\u002Fblog\u002Fdark-mode.md","Add Dark mode to websites",null,{"type":8,"value":9,"toc":1100},"minimark",[10,14,20,23,1096],[11,12,13],"p",{},"I am a huge fan of dark mode — from editors, terminals to websites, I have most of stuff customized for dark mode. Now most of the website and apps support a dark mode.",[11,15,16],{},[17,18,19],"strong",{},"Dark Mode is ❤️️",[11,21,22],{},"One of the typical case is using your mobile and laptops at night and you don’t want lights on — relatable? Yeah, It is such a pain to use light mode in low light scenarios. Now you want to add it to your personal website and side projects too right? Let’s learn how to do that!",[24,25,26,29,34,50,61,148,153,156,159,161,165,168,171,178,198,201,421,424,591,594,634,641,644,651,903,913,918,1016,1018,1022,1028,1034,1036,1040,1062,1065,1068,1077,1079,1082,1091],"ads",{},[27,28],"hr",{},[30,31,33],"h2",{"id":32},"using-media-queries","Using Media Queries",[11,35,36,37,41,42,49],{},"A new media query",[38,39,40],"code",{},"prefers-color-scheme"," is added in ",[43,44,48],"a",{"href":45,"rel":46},"https:\u002F\u002Fdrafts.csswg.org\u002Fmediaqueries-5\u002F#prefers-color-scheme",[47],"nofollow","Media Queries 5"," specifications. You can simply set your css based on whether the user’s preferred light\u002Fdark mode.",[11,51,52,53,56,57,60],{},"Here, I just show a simple example, where I am setting ",[38,54,55],{},"background-color"," and ",[38,58,59],{},"color"," property for both the modes.",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-css shiki shiki-themes github-light github-dark","@media (prefers-color-scheme: dark) {\n  html {\n    background-color: black;\n    color: white;\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  html {\n    background-color: white;\n    color: black;\n  }\n}\n","css","",[38,69,70,78,84,90,96,102,108,115,121,126,132,138,143],{"__ignoreMap":67},[71,72,75],"span",{"class":73,"line":74},"line",1,[71,76,77],{},"@media (prefers-color-scheme: dark) {\n",[71,79,81],{"class":73,"line":80},2,[71,82,83],{},"  html {\n",[71,85,87],{"class":73,"line":86},3,[71,88,89],{},"    background-color: black;\n",[71,91,93],{"class":73,"line":92},4,[71,94,95],{},"    color: white;\n",[71,97,99],{"class":73,"line":98},5,[71,100,101],{},"  }\n",[71,103,105],{"class":73,"line":104},6,[71,106,107],{},"}\n",[71,109,111],{"class":73,"line":110},7,[71,112,114],{"emptyLinePlaceholder":113},true,"\n",[71,116,118],{"class":73,"line":117},8,[71,119,120],{},"@media (prefers-color-scheme: light) {\n",[71,122,124],{"class":73,"line":123},9,[71,125,83],{},[71,127,129],{"class":73,"line":128},10,[71,130,131],{},"    background-color: white;\n",[71,133,135],{"class":73,"line":134},11,[71,136,137],{},"    color: black;\n",[71,139,141],{"class":73,"line":140},12,[71,142,101],{},[71,144,146],{"class":73,"line":145},13,[71,147,107],{},[149,150,152],"h3",{"id":151},"drawback","Drawback",[11,154,155],{},"Although this works for most of the browsers like Chrome( ≥76), Safari( ≥12.1) and Firefox(≥67). Just in case you are worried about people still using older versions then you might want to implement some custom CSS and JS way described below.",[11,157,158],{},"Also, if you are still using IE, then only God can help you 😛",[27,160],{},[30,162,164],{"id":163},"using-custom-css-and-js","Using Custom CSS and JS",[11,166,167],{},"You probably have seen sites with those toggle button to switch between light and dark modes. That looks cool! Well, we are going to implement the same cool thing 😎",[11,169,170],{},"Let’s add a simple div with this toggle. You can use a button or any other element.",[11,172,173],{},[174,175],"img",{"alt":176,"src":177},"Light theme demo","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*bTEea8G-q1WPLH2kH54gnA.png",[62,179,181],{"className":64,"code":180,"language":66,"meta":67,"style":67},"\u003Cdiv class=\"switch\" id=\"theme-toggle\">\n  \u003Cdiv class=\"slider round\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[38,182,183,188,193],{"__ignoreMap":67},[71,184,185],{"class":73,"line":74},[71,186,187],{},"\u003Cdiv class=\"switch\" id=\"theme-toggle\">\n",[71,189,190],{"class":73,"line":80},[71,191,192],{},"  \u003Cdiv class=\"slider round\">\u003C\u002Fdiv>\n",[71,194,195],{"class":73,"line":86},[71,196,197],{},"\u003C\u002Fdiv>\n",[11,199,200],{},"The code above is only for the toggle. Now, let’s add some css for the light theme.",[62,202,204],{"className":64,"code":203,"language":66,"meta":67,"style":67},"\u002F* Add this in light_theme.css *\u002F\n.switch {\n  _display_: flex;\n  _height_: 36px;\n  _position_: relative;\n  _width_: 70px;\n}\n\n.slider {\n  _background-color_: #fff;\n  _border_: 1px solid #000;\n  _bottom_: 0;\n  _cursor_: pointer;\n  _left_: 0;\n  _position_: absolute;\n  _right_: 0;\n  _top_: 0;\n  _transition_: 0.4s;\n}\n\n.slider:before {\n  _background-color_: #333;\n  _border_: 1px solid #000;\n  _bottom_: 3px;\n  _content_: \"\";\n  _height_: 26px;\n  _left_: 4px;\n  _position_: absolute;\n  _transition_: 0.4s;\n  _width_: 26px;\n  _z-index_: 421;\n}\n\n.slider.round {\n  _border-radius_: 34px;\n}\n\n.slider.round:before {\n  _border-radius_: 50%;\n}\n",[38,205,206,211,216,221,226,231,236,240,244,249,254,259,264,269,275,281,287,293,299,304,309,315,321,326,332,338,344,350,355,360,366,372,377,382,388,394,399,404,410,416],{"__ignoreMap":67},[71,207,208],{"class":73,"line":74},[71,209,210],{},"\u002F* Add this in light_theme.css *\u002F\n",[71,212,213],{"class":73,"line":80},[71,214,215],{},".switch {\n",[71,217,218],{"class":73,"line":86},[71,219,220],{},"  _display_: flex;\n",[71,222,223],{"class":73,"line":92},[71,224,225],{},"  _height_: 36px;\n",[71,227,228],{"class":73,"line":98},[71,229,230],{},"  _position_: relative;\n",[71,232,233],{"class":73,"line":104},[71,234,235],{},"  _width_: 70px;\n",[71,237,238],{"class":73,"line":110},[71,239,107],{},[71,241,242],{"class":73,"line":117},[71,243,114],{"emptyLinePlaceholder":113},[71,245,246],{"class":73,"line":123},[71,247,248],{},".slider {\n",[71,250,251],{"class":73,"line":128},[71,252,253],{},"  _background-color_: #fff;\n",[71,255,256],{"class":73,"line":134},[71,257,258],{},"  _border_: 1px solid #000;\n",[71,260,261],{"class":73,"line":140},[71,262,263],{},"  _bottom_: 0;\n",[71,265,266],{"class":73,"line":145},[71,267,268],{},"  _cursor_: pointer;\n",[71,270,272],{"class":73,"line":271},14,[71,273,274],{},"  _left_: 0;\n",[71,276,278],{"class":73,"line":277},15,[71,279,280],{},"  _position_: absolute;\n",[71,282,284],{"class":73,"line":283},16,[71,285,286],{},"  _right_: 0;\n",[71,288,290],{"class":73,"line":289},17,[71,291,292],{},"  _top_: 0;\n",[71,294,296],{"class":73,"line":295},18,[71,297,298],{},"  _transition_: 0.4s;\n",[71,300,302],{"class":73,"line":301},19,[71,303,107],{},[71,305,307],{"class":73,"line":306},20,[71,308,114],{"emptyLinePlaceholder":113},[71,310,312],{"class":73,"line":311},21,[71,313,314],{},".slider:before {\n",[71,316,318],{"class":73,"line":317},22,[71,319,320],{},"  _background-color_: #333;\n",[71,322,324],{"class":73,"line":323},23,[71,325,258],{},[71,327,329],{"class":73,"line":328},24,[71,330,331],{},"  _bottom_: 3px;\n",[71,333,335],{"class":73,"line":334},25,[71,336,337],{},"  _content_: \"\";\n",[71,339,341],{"class":73,"line":340},26,[71,342,343],{},"  _height_: 26px;\n",[71,345,347],{"class":73,"line":346},27,[71,348,349],{},"  _left_: 4px;\n",[71,351,353],{"class":73,"line":352},28,[71,354,280],{},[71,356,358],{"class":73,"line":357},29,[71,359,298],{},[71,361,363],{"class":73,"line":362},30,[71,364,365],{},"  _width_: 26px;\n",[71,367,369],{"class":73,"line":368},31,[71,370,371],{},"  _z-index_: 421;\n",[71,373,375],{"class":73,"line":374},32,[71,376,107],{},[71,378,380],{"class":73,"line":379},33,[71,381,114],{"emptyLinePlaceholder":113},[71,383,385],{"class":73,"line":384},34,[71,386,387],{},".slider.round {\n",[71,389,391],{"class":73,"line":390},35,[71,392,393],{},"  _border-radius_: 34px;\n",[71,395,397],{"class":73,"line":396},36,[71,398,107],{},[71,400,402],{"class":73,"line":401},37,[71,403,114],{"emptyLinePlaceholder":113},[71,405,407],{"class":73,"line":406},38,[71,408,409],{},".slider.round:before {\n",[71,411,413],{"class":73,"line":412},39,[71,414,415],{},"  _border-radius_: 50%;\n",[71,417,419],{"class":73,"line":418},40,[71,420,107],{},[11,422,423],{},"Similarly, let’s add css for the dark theme —",[62,425,427],{"className":64,"code":426,"language":66,"meta":67,"style":67},"\u002F* Add this in dark_theme.css *\u002F\n.switch {\n  _display_: flex;\n  _height_: 36px;\n  _position_: relative;\n  _width_: 70px;\n}\n\n.slider {\n  _background-color_: #fff;\n  _border_: 1px solid #000;\n  _bottom_: 0;\n  _cursor_: pointer;\n  _left_: 0;\n  _position_: absolute;\n  _right_: 0;\n  _top_: 0;\n  _transition_: 0.4s;\n}\n\n.slider:before {\n  _background-color_: #333;\n  _border_: 1px solid #000;\n  _bottom_: 3px;\n  _content_: \"\";\n  _height_: 26px;\n  _right_: 4px;\n  _position_: absolute;\n  _transition_: 0.4s;\n  _width_: 26px;\n  _z-index_: 421;\n}\n\n.slider.round {\n  _border-radius_: 34px;\n}\n\n.slider.round:before {\n  _border-radius_: 50%;\n}\n",[38,428,429,434,438,442,446,450,454,458,462,466,470,474,478,482,486,490,494,498,502,506,510,514,518,522,526,530,534,539,543,547,551,555,559,563,567,571,575,579,583,587],{"__ignoreMap":67},[71,430,431],{"class":73,"line":74},[71,432,433],{},"\u002F* Add this in dark_theme.css *\u002F\n",[71,435,436],{"class":73,"line":80},[71,437,215],{},[71,439,440],{"class":73,"line":86},[71,441,220],{},[71,443,444],{"class":73,"line":92},[71,445,225],{},[71,447,448],{"class":73,"line":98},[71,449,230],{},[71,451,452],{"class":73,"line":104},[71,453,235],{},[71,455,456],{"class":73,"line":110},[71,457,107],{},[71,459,460],{"class":73,"line":117},[71,461,114],{"emptyLinePlaceholder":113},[71,463,464],{"class":73,"line":123},[71,465,248],{},[71,467,468],{"class":73,"line":128},[71,469,253],{},[71,471,472],{"class":73,"line":134},[71,473,258],{},[71,475,476],{"class":73,"line":140},[71,477,263],{},[71,479,480],{"class":73,"line":145},[71,481,268],{},[71,483,484],{"class":73,"line":271},[71,485,274],{},[71,487,488],{"class":73,"line":277},[71,489,280],{},[71,491,492],{"class":73,"line":283},[71,493,286],{},[71,495,496],{"class":73,"line":289},[71,497,292],{},[71,499,500],{"class":73,"line":295},[71,501,298],{},[71,503,504],{"class":73,"line":301},[71,505,107],{},[71,507,508],{"class":73,"line":306},[71,509,114],{"emptyLinePlaceholder":113},[71,511,512],{"class":73,"line":311},[71,513,314],{},[71,515,516],{"class":73,"line":317},[71,517,320],{},[71,519,520],{"class":73,"line":323},[71,521,258],{},[71,523,524],{"class":73,"line":328},[71,525,331],{},[71,527,528],{"class":73,"line":334},[71,529,337],{},[71,531,532],{"class":73,"line":340},[71,533,343],{},[71,535,536],{"class":73,"line":346},[71,537,538],{},"  _right_: 4px;\n",[71,540,541],{"class":73,"line":352},[71,542,280],{},[71,544,545],{"class":73,"line":357},[71,546,298],{},[71,548,549],{"class":73,"line":362},[71,550,365],{},[71,552,553],{"class":73,"line":368},[71,554,371],{},[71,556,557],{"class":73,"line":374},[71,558,107],{},[71,560,561],{"class":73,"line":379},[71,562,114],{"emptyLinePlaceholder":113},[71,564,565],{"class":73,"line":384},[71,566,387],{},[71,568,569],{"class":73,"line":390},[71,570,393],{},[71,572,573],{"class":73,"line":396},[71,574,107],{},[71,576,577],{"class":73,"line":401},[71,578,114],{"emptyLinePlaceholder":113},[71,580,581],{"class":73,"line":406},[71,582,409],{},[71,584,585],{"class":73,"line":412},[71,586,415],{},[71,588,589],{"class":73,"line":418},[71,590,107],{},[11,592,593],{},"Once, we have this css added. Don’t forget to include them in your html.",[62,595,597],{"className":64,"code":596,"language":66,"meta":67,"style":67},"\u002F* Include in your html *\u002F\n\u003Clink\n  id=\"theme\"\n  rel=\"stylesheet\"\n  type=\"text\u002Fcss\"\n  href=\"css\u002Flight_theme.css\"\n\u002F>\n",[38,598,599,604,609,614,619,624,629],{"__ignoreMap":67},[71,600,601],{"class":73,"line":74},[71,602,603],{},"\u002F* Include in your html *\u002F\n",[71,605,606],{"class":73,"line":80},[71,607,608],{},"\u003Clink\n",[71,610,611],{"class":73,"line":86},[71,612,613],{},"  id=\"theme\"\n",[71,615,616],{"class":73,"line":92},[71,617,618],{},"  rel=\"stylesheet\"\n",[71,620,621],{"class":73,"line":98},[71,622,623],{},"  type=\"text\u002Fcss\"\n",[71,625,626],{"class":73,"line":104},[71,627,628],{},"  href=\"css\u002Flight_theme.css\"\n",[71,630,631],{"class":73,"line":110},[71,632,633],{},"\u002F>\n",[11,635,636,637,640],{},"We don’t need to add ",[38,638,639],{},"dark_theme.css"," since we will add it via custom JS.",[11,642,643],{},"You should be able to see a working light theme and a toggle. But, the theme doesn’t change!!",[11,645,646,647,650],{},"Let’s make that toggle work now! Add javascript to load custom css file based on the theme mode selected. We use ",[38,648,649],{},"localstorage"," to save user preferences for the theme. We don’t want him to click toggle again and again.",[62,652,656],{"className":653,"code":654,"language":655,"meta":67,"style":67},"language-javascript shiki shiki-themes github-light github-dark","document.addEventListener(\"DOMContentLoaded\", () _=>_ {\n  _const_ themeStylesheet = document.getElementById(\"theme\");\n  _const_ storedTheme = localStorage.getItem(\"theme\");\n  if (storedTheme) {\n    themeStylesheet.href = storedTheme;\n  }\n  _const_ themeToggle = document.getElementById(\"theme-toggle\");\n  themeToggle.addEventListener(\"click\", () _=>_ {\n\n  \u002F\u002F if it's light -> go dark\n\n  if (themeStylesheet.href.includes(\"light\")) {\n    themeStylesheet.href = window.location.origin + \"\u002F\u003Cfilepath-to>\u002Fdark_theme.css\";\n  } else {\n    \u002F\u002F if it's dark -> go light\n    themeStylesheet.href = window.location.origin + \"\u002F\u003Cfilepath-to>\u002Flight_theme.css\";\n  }\n\n    \u002F\u002F save the preference to localStorage\n    localStorage.setItem(\"theme\", themeStylesheet.href);\n    reloadCss()\n  });\n});\n","javascript",[38,657,658,689,711,730,744,754,758,776,792,796,802,806,819,837,842,847,862,866,870,875,885,893,898],{"__ignoreMap":67},[71,659,660,664,668,671,675,678,682,686],{"class":73,"line":74},[71,661,663],{"class":662},"sVt8B","document.",[71,665,667],{"class":666},"sScJk","addEventListener",[71,669,670],{"class":662},"(",[71,672,674],{"class":673},"sZZnC","\"DOMContentLoaded\"",[71,676,677],{"class":662},", () ",[71,679,681],{"class":680},"s4XuR","_",[71,683,685],{"class":684},"szBVR","=>",[71,687,688],{"class":662},"_ {\n",[71,690,691,694,697,700,703,705,708],{"class":73,"line":80},[71,692,693],{"class":662},"  _const_ themeStylesheet ",[71,695,696],{"class":684},"=",[71,698,699],{"class":662}," document.",[71,701,702],{"class":666},"getElementById",[71,704,670],{"class":662},[71,706,707],{"class":673},"\"theme\"",[71,709,710],{"class":662},");\n",[71,712,713,716,718,721,724,726,728],{"class":73,"line":86},[71,714,715],{"class":662},"  _const_ storedTheme ",[71,717,696],{"class":684},[71,719,720],{"class":662}," localStorage.",[71,722,723],{"class":666},"getItem",[71,725,670],{"class":662},[71,727,707],{"class":673},[71,729,710],{"class":662},[71,731,732,735,738,741],{"class":73,"line":92},[71,733,734],{"class":666},"  if",[71,736,737],{"class":662}," (",[71,739,740],{"class":680},"storedTheme",[71,742,743],{"class":662},") {\n",[71,745,746,749,751],{"class":73,"line":98},[71,747,748],{"class":662},"    themeStylesheet.href ",[71,750,696],{"class":684},[71,752,753],{"class":662}," storedTheme;\n",[71,755,756],{"class":73,"line":104},[71,757,101],{"class":662},[71,759,760,763,765,767,769,771,774],{"class":73,"line":110},[71,761,762],{"class":662},"  _const_ themeToggle ",[71,764,696],{"class":684},[71,766,699],{"class":662},[71,768,702],{"class":666},[71,770,670],{"class":662},[71,772,773],{"class":673},"\"theme-toggle\"",[71,775,710],{"class":662},[71,777,778,781,784,786,788,790],{"class":73,"line":117},[71,779,780],{"class":662},"  themeToggle.addEventListener(",[71,782,783],{"class":673},"\"click\"",[71,785,677],{"class":662},[71,787,681],{"class":680},[71,789,685],{"class":684},[71,791,688],{"class":662},[71,793,794],{"class":73,"line":123},[71,795,114],{"emptyLinePlaceholder":113},[71,797,798],{"class":73,"line":128},[71,799,801],{"class":800},"sJ8bj","  \u002F\u002F if it's light -> go dark\n",[71,803,804],{"class":73,"line":134},[71,805,114],{"emptyLinePlaceholder":113},[71,807,808,810,813,816],{"class":73,"line":140},[71,809,734],{"class":666},[71,811,812],{"class":662}," (themeStylesheet.href.includes(",[71,814,815],{"class":673},"\"light\"",[71,817,818],{"class":662},")) {\n",[71,820,821,823,825,828,831,834],{"class":73,"line":145},[71,822,748],{"class":662},[71,824,696],{"class":684},[71,826,827],{"class":662}," window.location.origin ",[71,829,830],{"class":684},"+",[71,832,833],{"class":673}," \"\u002F\u003Cfilepath-to>\u002Fdark_theme.css\"",[71,835,836],{"class":662},";\n",[71,838,839],{"class":73,"line":271},[71,840,841],{"class":662},"  } else {\n",[71,843,844],{"class":73,"line":277},[71,845,846],{"class":800},"    \u002F\u002F if it's dark -> go light\n",[71,848,849,851,853,855,857,860],{"class":73,"line":283},[71,850,748],{"class":662},[71,852,696],{"class":684},[71,854,827],{"class":662},[71,856,830],{"class":684},[71,858,859],{"class":673}," \"\u002F\u003Cfilepath-to>\u002Flight_theme.css\"",[71,861,836],{"class":662},[71,863,864],{"class":73,"line":289},[71,865,101],{"class":662},[71,867,868],{"class":73,"line":295},[71,869,114],{"emptyLinePlaceholder":113},[71,871,872],{"class":73,"line":301},[71,873,874],{"class":800},"    \u002F\u002F save the preference to localStorage\n",[71,876,877,880,882],{"class":73,"line":306},[71,878,879],{"class":662},"    localStorage.setItem(",[71,881,707],{"class":673},[71,883,884],{"class":662},", themeStylesheet.href);\n",[71,886,887,890],{"class":73,"line":311},[71,888,889],{"class":666},"    reloadCss",[71,891,892],{"class":662},"()\n",[71,894,895],{"class":73,"line":317},[71,896,897],{"class":662},"  });\n",[71,899,900],{"class":73,"line":323},[71,901,902],{"class":662},"});\n",[11,904,905,906,909,910],{},"I use a ",[38,907,908],{},"reloadCss()"," to refresh css files without actual page reload. You can also refresh the page with ",[38,911,912],{},"window.location.reload()",[11,914,915,917],{},[17,916,152],{}," — This method basically iterates over all CSS links.",[62,919,921],{"className":653,"code":920,"language":655,"meta":67,"style":67},"_function_ reloadCss() {\n _var_ links = document.getElementsByTagName(\"link\");\n for (_var_ cl in links) {\n _var_ link = links[cl];\n if (link.rel === \"stylesheet\")\n link.href += \"\";\n }\n}\n",[38,922,923,934,953,967,977,994,1007,1012],{"__ignoreMap":67},[71,924,925,928,931],{"class":73,"line":74},[71,926,927],{"class":662},"_function_ ",[71,929,930],{"class":666},"reloadCss",[71,932,933],{"class":662},"() {\n",[71,935,936,939,941,943,946,948,951],{"class":73,"line":80},[71,937,938],{"class":662}," _var_ links ",[71,940,696],{"class":684},[71,942,699],{"class":662},[71,944,945],{"class":666},"getElementsByTagName",[71,947,670],{"class":662},[71,949,950],{"class":673},"\"link\"",[71,952,710],{"class":662},[71,954,955,958,961,964],{"class":73,"line":86},[71,956,957],{"class":684}," for",[71,959,960],{"class":662}," (_var_ cl ",[71,962,963],{"class":684},"in",[71,965,966],{"class":662}," links) {\n",[71,968,969,972,974],{"class":73,"line":92},[71,970,971],{"class":662}," _var_ link ",[71,973,696],{"class":684},[71,975,976],{"class":662}," links[cl];\n",[71,978,979,982,985,988,991],{"class":73,"line":98},[71,980,981],{"class":684}," if",[71,983,984],{"class":662}," (link.rel ",[71,986,987],{"class":684},"===",[71,989,990],{"class":673}," \"stylesheet\"",[71,992,993],{"class":662},")\n",[71,995,996,999,1002,1005],{"class":73,"line":104},[71,997,998],{"class":662}," link.href ",[71,1000,1001],{"class":684},"+=",[71,1003,1004],{"class":673}," \"\"",[71,1006,836],{"class":662},[71,1008,1009],{"class":73,"line":110},[71,1010,1011],{"class":662}," }\n",[71,1013,1014],{"class":73,"line":117},[71,1015,107],{"class":662},[27,1017],{},[30,1019,1021],{"id":1020},"result","Result",[11,1023,1024],{},[174,1025],{"alt":1026,"src":1027},"Screen recording of a journal website toggling between light and dark mode","https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F1600\u002F1*XRpnRqy4TotkeTh14KBvQQ.gif",[11,1029,1030,1033],{},[17,1031,1032],{},"PS",": If you use frameworks like React, Vuejs then there are lot more and better ways to implement this.",[27,1035],{},[30,1037,1039],{"id":1038},"resources","Resources",[1041,1042,1043,1050,1056],"ul",{},[1044,1045,1046],"li",{},[43,1047,1048],{"href":1048,"rel":1049},"https:\u002F\u002Fflaviocopes.com\u002Fdark-mode\u002F",[47],[1044,1051,1052],{},[43,1053,1054],{"href":1054,"rel":1055},"https:\u002F\u002Fwww.developerdrive.com\u002Fcss-dark-mode\u002F",[47],[1044,1057,1058],{},[43,1059,1060],{"href":1060,"rel":1061},"https:\u002F\u002Fcss-tricks.com\u002Fdark-modes-with-css\u002F",[47],[11,1063,1064],{},"Time to add beautiful dark mode to your websites 🚀",[11,1066,1067],{},"Show your implementations in comments 👇",[11,1069,1070,1071,1076],{},"Liked the article? Consider ",[43,1072,1075],{"href":1073,"rel":1074},"https:\u002F\u002Fwww.buymeacoffee.com\u002FchHAzigTb",[47],"supporting me"," ☕️",[27,1078],{},[11,1080,1081],{},"I hope you learned something new. Feel free to suggest improvements ✔️",[11,1083,1084,1085,1090],{},"I share regular updates and resources on ",[43,1086,1089],{"href":1087,"rel":1088},"https:\u002F\u002Ftwitter.com\u002Fmkfeuhrer",[47],"Twitter",". Let's connect!",[11,1092,1093],{},[17,1094,1095],{},"Keep exploring 🔎 Keep learning 🚀",[1097,1098,1099],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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":67,"searchDepth":80,"depth":80,"links":1101},[1102,1105,1106,1107],{"id":32,"depth":80,"text":33,"children":1103},[1104],{"id":151,"depth":86,"text":152},{"id":163,"depth":80,"text":164},{"id":1020,"depth":80,"text":1021},{"id":1038,"depth":80,"text":1039},[1109,1110],"Javascript","Web","Dark mode is ❤️️ Add it to your websites with little CSS and JS",false,"md","blog\u002Fdark-mode\u002Fdark-mode-card.webp","dark mode toggle, add dark mode to website, add dark mode javascript, implement dark mode blog",{},"dark-mode","\u002Fblog\u002Fdark-mode",{"title":5,"description":1111},"blog\u002Fdark-mode","2020-07-04","Z3V7alVYvc7OokctiehshLsTkf4hchsL3zMT6Wkgs1w",[1124,1132,1139,1147,1155,1162,1169,1171,1177,1183,1189,1195,1201,1210,1216,1223,1229,1235,1241,1247,1253,1259,1265,1271,1278,1285,1291,1297,1303,1309,1315,1321,1327,1333,1339,1345,1351,1357,1363,1370,1376,1382,1388,1395,1401,1407,1414,1421,1427,1434,1440,1447,1453,1460,1466,1472,1478,1484,1490,1496,1502,1508,1514,1520,1526,1532,1539,1545,1552,1558,1564,1570,1577,1583],{"path":1125,"title":1126,"description":1127,"categories":1128,"draft":113,"year":1131,"series":6},"\u002Fblog\u002Fai-assisted-workstation","Building an AI-Assisted Personal Workstation","How I built a personal AI workstation: markdown knowledge base, portable agent skills, handoff-driven sessions. What worked, what broke, what I would change.",[1129,1130],"Productivity","Programming","2026-08-26",{"path":1133,"title":1134,"description":1135,"categories":1136,"draft":1112,"year":1138,"series":6},"\u002Fblog\u002Faws-s3-golang","Uploading images to AWS S3 in Golang","In this tutorial I cover how to upload, fetch and manage other operations for objects on AWS S3 in Golang",[1137,1130],"Golang","2020-01-12",{"path":1140,"title":1141,"description":1142,"categories":1143,"draft":1112,"year":1146,"series":6},"\u002Fblog\u002Fbooks-for-engineers","Best Books for Software Engineers","Best Books to help you build you software engineering career - ranging from fundamentats, interview prep to productivity.",[1144,1145],"Books","Life","2021-12-26",{"path":1148,"title":1149,"description":1150,"categories":1151,"draft":1112,"year":1154,"series":6},"\u002Fblog\u002Fbuilding-acrons","Building Acrons 🚀","Building Acrons, a one-stop tool to decode everyday acronyms like DIY, FOMO, and BRB without losing your flow.",[1152,1110,1153],"Side Projects","Tools","2020-05-26",{"path":1156,"title":1157,"description":1158,"categories":1159,"draft":1112,"year":1161,"series":6},"\u002Fblog\u002Fcap-theorem","CAP Theorem Explained","Learn the concept and misconceptions around popular CAP theorem in system design.",[1160,1130],"System Design","2021-07-26",{"path":1163,"title":1164,"description":1165,"categories":1166,"draft":1112,"year":1168,"series":6},"\u002Fblog\u002Fcode-reviews","Code Review Checklist","Why code reviews matter, and best practices that catch bugs early and keep code quality high before merge.",[1167],"Engineering Principles","2020-07-20",{"path":1118,"title":5,"description":1111,"categories":1170,"draft":1112,"year":1121,"series":6},[1109,1110],{"path":1172,"title":1173,"description":1174,"categories":1175,"draft":1112,"year":1176,"series":6},"\u002Fblog\u002Fdate-time-golang","Working with Date and Time in Go","Learn how to use time in Golang - Multiple formats, locations and using date.",[1137,1130],"2020-10-09",{"path":1178,"title":1179,"description":1180,"categories":1181,"draft":1112,"year":1182,"series":6},"\u002Fblog\u002Fdefer-in-golang","Understanding Defer In Golang","Learn about defer keyword in golang and how it can help you avoid panics due to bugs.",[1137,1130],"2021-05-05",{"path":1184,"title":1185,"description":1186,"categories":1187,"draft":1112,"year":1188,"series":6},"\u002Fblog\u002Fenums-golang","Implementing Enums in Golang","Enums are a way to defined set of constant values. Learn how to implement enums in Go using iota with examples.",[1137,1130],"2021-12-18",{"path":1190,"title":1191,"description":1192,"categories":1193,"draft":1112,"year":1194,"series":6},"\u002Fblog\u002Fenvironment-variable-golang","Guide to Environment variables in Go","Learn what are environment variables and how to use them in Go",[1137,1130],"2020-08-14",{"path":1196,"title":1197,"description":1198,"categories":1199,"draft":1112,"year":1200,"series":6},"\u002Fblog\u002Ferror-handling-golang","Handle errors the right way — Golang","How to handle errors in golang to make your life easy",[1137,1130],"2020-01-30",{"path":1202,"title":1203,"description":1204,"categories":1205,"draft":1112,"year":1131,"series":1208},"\u002Fblog\u002Ffile-attack-field-guide","How File-Based Attacks Land: A Detection Engineer's Field Guide","A practical taxonomy of how malware and phishing arrive as files, why classic controls miss them, and how detection should think.",[1206,1207],"Security","Systems",{"name":1209,"part":74},"File Attack Deep Dives",{"path":1211,"title":1212,"description":1213,"categories":1214,"draft":1112,"year":1215,"series":6},"\u002Fblog\u002Ffile-upload-golang","Uploading Files in Golang with Multipart Request","Learn how to upload files from your client to server as a multipart request in Golang.",[1137,1130],"2021-03-13",{"path":1217,"title":1218,"description":1219,"categories":1220,"draft":1112,"year":1222,"series":6},"\u002Fblog\u002Fgit-branch","Git Branch 101","Branching is a new path of development that makes it a lot easier to build features. Learn why and how to use branching in git.",[1221,1130],"Git","2022-03-20",{"path":1224,"title":1225,"description":1226,"categories":1227,"draft":1112,"year":1228,"series":6},"\u002Fblog\u002Fgit-pull-request-template","Guide to Pull Request Templates","Improve collaboration and code reviews with pull request templates. Blog include PR template and how to create one on github\u002Fgitlab",[1221,1130],"2023-08-24",{"path":1230,"title":1231,"description":1232,"categories":1233,"draft":1112,"year":1234,"series":6},"\u002Fblog\u002Fgit-remove-sensitive-info","Securing Git: Remove Sensitive Information","Protect your code from security breaches by using BFG tool to remove sensitive information from Git history. Learn how to do it in this comprehensive guide.",[1221,1130],"2023-10-16",{"path":1236,"title":1237,"description":1238,"categories":1239,"draft":1112,"year":1240,"series":6},"\u002Fblog\u002Fgit-tags-explained","Git tags : Explained","What Git tags are, why and when to use them, and how to start tagging releases in your own projects.",[1221,1130],"2020-06-18",{"path":1242,"title":1243,"description":1244,"categories":1245,"draft":1112,"year":1246,"series":6},"\u002Fblog\u002Fgo-dependency-injection","Dependency Injection in Go using Wire","Learn about dependency injection, its benefits and how to implement it in Go services using wire",[1137,1130],"2022-11-26",{"path":1248,"title":1249,"description":1250,"categories":1251,"draft":1112,"year":1252,"series":6},"\u002Fblog\u002Fgo-generics","Introduction to Generics in Go","Learn about generics in Golang, it's benefits and how to implement it in applications.",[1137,1130],"2022-11-27",{"path":1254,"title":1255,"description":1256,"categories":1257,"draft":1112,"year":1258,"series":6},"\u002Fblog\u002Fgo-in-memory-cache","Building In-Memory Cache in Go","Learn about in-memory caching in Golang, it's benefits and how to implement it with and without generics with a TTL(expiry).",[1137,1130],"2024-03-28",{"path":1260,"title":1261,"description":1262,"categories":1263,"draft":1112,"year":1264,"series":6},"\u002Fblog\u002Fgo-makefile","Ultimate Makefile for Golang","Boost your productivity and save time with ultimate Makefile for Golang projects.",[1137,1130],"2024-06-10",{"path":1266,"title":1267,"description":1268,"categories":1269,"draft":1112,"year":1270,"series":6},"\u002Fblog\u002Fgo-middleware","Mastering Middlewares in Golang","Learn about middlewares, their use cases and how to implement them in Golang applications",[1137,1130],"2022-03-13",{"path":1272,"title":1273,"description":1274,"categories":1275,"draft":1112,"year":1277,"series":6},"\u002Fblog\u002Fgo-naming-conventions","Naming Conventions in Golang","Why naming conventions matter in Go, with best practices and practical examples for clear, readable, maintainable code.",[1137,1130,1276],"Code Quality","2023-05-19",{"path":1279,"title":1280,"description":1281,"categories":1282,"draft":1112,"year":1284,"series":6},"\u002Fblog\u002Fgo-with-redis","Go with Redis","A practical introduction to using Redis with Golang to make your applications faster with in-memory data storage.",[1137,1283,1130],"Database","2020-05-03",{"path":1286,"title":1287,"description":1288,"categories":1289,"draft":1112,"year":1290,"series":6},"\u002Fblog\u002Fgolang-maps","Learn Maps in Golang (with examples)","A complete guide to maps in Golang: creating maps, adding and removing items, iterating, and how map equality works.",[1137,1130],"2020-09-10",{"path":1292,"title":1293,"description":1294,"categories":1295,"draft":1112,"year":1296,"series":6},"\u002Fblog\u002Fguide-to-cdn","Guide to Content Delivery Network","CDN is one of the backbone of modern world internet infrastructure. Learn about Content Delivery Network, it's working, types and benefits.",[1160,1130],"2022-01-23",{"path":1298,"title":1299,"description":1300,"categories":1301,"draft":1112,"year":1302,"series":6},"\u002Fblog\u002Fguide-to-rule-engines","Guide to Rule Engines","Rule Engines help in solving changing business requirements with ease. Learn all about Rule engines, it's working, benefits and how to implement one in Golang",[1137,1130],"2022-09-12",{"path":1304,"title":1305,"description":1306,"categories":1307,"draft":1112,"year":1308,"series":6},"\u002Fblog\u002Fhexagonal-architecture","Guide to Hexagonal Architecture","Learn how to design efficient application with hexagonal architecture with practical example",[1160,1130],"2020-12-13",{"path":1310,"title":1311,"description":1312,"categories":1313,"draft":1112,"year":1314,"series":6},"\u002Fblog\u002Fhttp-status-codes","Learn HTTP Status Codes","A tour of HTTP response status codes, what each class means, and when to use which code in your applications.",[1110,1130],"2020-07-30",{"path":1316,"title":1317,"description":1318,"categories":1319,"draft":1112,"year":1320,"series":6},"\u002Fblog\u002Fintroduction-to-goroutines","Introduction to Goroutines","Understand the basics of concurrency and learn how to work with Goroutines in golang.",[1137,1130],"2021-04-10",{"path":1322,"title":1323,"description":1324,"categories":1325,"draft":1112,"year":1326,"series":6},"\u002Fblog\u002Fjson-in-postgres-with-golang","Storing JSON in Postgres with Golang","Learn how to store JSON objects in Postgres and how to implement it in Golang.",[1130,1283,1137],"2021-02-13",{"path":1328,"title":1329,"description":1330,"categories":1331,"draft":1112,"year":1332,"series":6},"\u002Fblog\u002Fjson-web-token","Complete Guide to JWT","JSON Web Tokens are a very compact way to carry information. Learn about JWTs in depth, from its structure to when to use it.",[1130,1110],"2021-11-20",{"path":1334,"title":1335,"description":1336,"categories":1337,"draft":1112,"year":1338,"series":6},"\u002Fblog\u002Flearn-to-say-no","Learning to say No","Learn why it's important to say 'NO'. How it helps in increasing productivity and explore strategies for saying No",[1145,1144],"2022-04-09",{"path":1340,"title":1341,"description":1342,"categories":1343,"draft":1112,"year":1344,"series":6},"\u002Fblog\u002Flearn-unlearn-relearn","Learn - Unlearn - Relearn","Unlearning things to learn new is the way to grow. Discover how to do that!",[1129,1145],"2020-09-25",{"path":1346,"title":1347,"description":1348,"categories":1349,"draft":1112,"year":1350,"series":6},"\u002Fblog\u002Flinting-in-golang","Introduction to Linting in Go","Introduction to improving code quality using linting. Learn how to add linting in your Go projects.",[1137,1130],"2021-07-07",{"path":1352,"title":1353,"description":1354,"categories":1355,"draft":1112,"year":1356,"series":6},"\u002Fblog\u002Fload-balancing","Load Balancing 101","Complete guide on load balancers explaining the internal working and how does it help in making applications efficient.",[1160,1130],"2021-05-29",{"path":1358,"title":1359,"description":1360,"categories":1361,"draft":1112,"year":1362,"series":6},"\u002Fblog\u002Fmaking-decisions-the-right-way","Making Decisions: The right way","Decisions are hard! Learn how to make the right decisions always",[1129,1145],"2020-06-07",{"path":1364,"title":1365,"description":1366,"categories":1367,"draft":1112,"year":1369,"series":6},"\u002Fblog\u002Fmanage-logs-with-logrotate","Using Logrotate to manage logs","Learn how to use logrotate system utility to manage logs with example",[1368,1130],"Linux","2020-09-08",{"path":1371,"title":1372,"description":1373,"categories":1374,"draft":1112,"year":1375,"series":6},"\u002Fblog\u002Fmarshal-structs-golang","Marshal structs the right way: Golang","Why Golang marshals empty structs into your JSON instead of null, and how to marshal structs the right way.",[1137,1130],"2020-03-31",{"path":1377,"title":1378,"description":1379,"categories":1380,"draft":1112,"year":1381,"series":6},"\u002Fblog\u002Fnotes-almanack-naval","Book Notes : Almanack of Naval Ravikant","My notes\u002Fhighlights from Almanack of Naval Ravikant book by Eric Jorgenson",[1144,1145],"2020-10-17",{"path":1383,"title":1384,"description":1385,"categories":1386,"draft":1112,"year":1387,"series":6},"\u002Fblog\u002Fnotes-anything-you-want","Book Notes : Anything you want","My notes\u002Fhighlights from Anything you want book by Derek Sivers",[1144,1145],"2021-09-25",{"path":1389,"title":1390,"description":1391,"categories":1392,"draft":1112,"year":1394,"series":6},"\u002Fblog\u002Fnotes-getting-real","Book Notes : Getting Real","My notes and highlights from Getting Real by Jason Fried and David Heinemeier Hansson on building web applications.",[1144,1393],"Startups","2020-11-03",{"path":1396,"title":1397,"description":1398,"categories":1399,"draft":1112,"year":1400,"series":6},"\u002Fblog\u002Fnotes-hell-yeah-or-no","Book Notes : Hell Yeah or No","My notes\u002Fhighlights from Hell Yeah or No book by Derek Sivers",[1144,1145],"2020-09-16",{"path":1402,"title":1403,"description":1404,"categories":1405,"draft":1112,"year":1406,"series":6},"\u002Fblog\u002Fnotes-how-to-be-a-capitalist","Book Notes : How to Be a Capitalist Without Any Capital","My notes\u002Fhighlights from How to Be a Capitalist Without Any Capital by Nathan Latka",[1144,1393],"2020-01-07",{"path":1408,"title":1409,"description":1410,"categories":1411,"draft":1112,"year":1413,"series":6},"\u002Fblog\u002Fnotes-lean-b2b","Book Notes : Lean B2B","My notes and highlights from Lean B2B by Étienne Garbugli on assessing markets, building MVPs, and selling to businesses.",[1144,1412],"Entrepreneurship","2022-07-02",{"path":1415,"title":1416,"description":1417,"categories":1418,"draft":1112,"year":1420,"series":6},"\u002Fblog\u002Fnotes-lets-talk-money","Book Notes : Let's Talk Money","My notes and highlights from Let's Talk Money by Monica Halan on managing personal finances and savings.",[1144,1419],"Personal Finance","2021-02-26",{"path":1422,"title":1423,"description":1424,"categories":1425,"draft":1112,"year":1426,"series":6},"\u002Fblog\u002Fnotes-obviously-awesome","Book Notes : Obviously Awesome","My notes and highlights from Obviously Awesome by April Dunford on product positioning and marketing strategy.",[1144,1393],"2020-04-26",{"path":1428,"title":1429,"description":1430,"categories":1431,"draft":1112,"year":1433,"series":6},"\u002Fblog\u002Fnotes-refactoring-ui","Book Notes: Refactoring UI","My notes and highlights from Refactoring UI by Adam Wathan and Steve Schoger, full of practical design tips for engineers.",[1144,1432],"Design","2020-05-09",{"path":1435,"title":1436,"description":1437,"categories":1438,"draft":1112,"year":1439,"series":6},"\u002Fblog\u002Fnotes-rework","Book Notes: Rework","My notes and highlights from Rework by Jason Fried and David Heinemeier Hansson on a better way to succeed in business.",[1144,1393],"2021-04-14",{"path":1441,"title":1442,"description":1443,"categories":1444,"draft":1112,"year":1446,"series":6},"\u002Fblog\u002Fone-on-one-meetings","Guide to Effective 1:1 Meetings","One on One meetings are important for your personal & professional growth. Learn how to master 1:1s with your manager and peers.",[1445,1129],"Career","2023-03-05",{"path":1448,"title":1449,"description":1450,"categories":1451,"draft":1112,"year":1452,"series":6},"\u002Fblog\u002Fpersonal-okrs","Personal OKRs for Success","Why one should set personal OKRs and how to achieve success with them",[1129,1145],"2020-06-27",{"path":1454,"title":1455,"description":1456,"categories":1457,"draft":1112,"year":1459,"series":6},"\u002Fblog\u002Fpoker-tips","Poker Tips: Johns Hopkins Poker Class","Notes from Johns Hopkins poker course. This guide will help you improve in Poker and win some large pots.",[1145,1458],"Poker","2020-06-13",{"path":1461,"title":1462,"description":1463,"categories":1464,"draft":1112,"year":1465,"series":6},"\u002Fblog\u002Fpomodoro","Get work done: The Pomo Way","Learn to focus and get productive by following the Pomodoro Technique",[1129],"2020-10-24",{"path":1467,"title":1468,"description":1469,"categories":1470,"draft":1112,"year":1471,"series":6},"\u002Fblog\u002Fpostgres-constraints","Postgres Constraints","Constraints are line of defense for database. Explore various types of constrainsts in postgres",[1283,1130],"2020-11-07",{"path":1473,"title":1474,"description":1475,"categories":1476,"draft":1112,"year":1477,"series":6},"\u002Fblog\u002Fppf-explained","PPF Explained","Learn basics about Public Provident Fund and why you should invest",[1145,1419],"2020-12-24",{"path":1479,"title":1480,"description":1481,"categories":1482,"draft":1112,"year":1483,"series":6},"\u002Fblog\u002Fproductivity-chrome-extensions","Boost Productivity with Chrome Extensions","Utitizing chrome extensions to boost your productivity!",[1129,1153,1110],"2020-04-24",{"path":1485,"title":1486,"description":1487,"categories":1488,"draft":1112,"year":1489,"series":6},"\u002Fblog\u002Fproductivity-in-vscode","Improve your productivity with VS Code","Key VS Code features like the integrated terminal, shortcuts, and extensions that improved my everyday productivity.",[1129,1130],"2020-03-12",{"path":1491,"title":1492,"description":1493,"categories":1494,"draft":1112,"year":1495,"series":6},"\u002Fblog\u002Freading-101","Improving Reading 101","Why reading matters, how to build a reading habit, and what to read next - from my own journey into books.",[1144,1145],"2020-04-04",{"path":1497,"title":1498,"description":1499,"categories":1500,"draft":1112,"year":1501,"series":6},"\u002Fblog\u002Freverse-proxy","Understanding Reverse Proxy","Learn about reverse proxy, how it is different from forward proxy and explore advantages of using it in system design.",[1160,1130],"2021-10-03",{"path":1503,"title":1504,"description":1505,"categories":1506,"draft":1112,"year":1507,"series":6},"\u002Fblog\u002Frunning-periodic-background-task-golang","Running periodic background tasks in Golang","How to run periodic background tasks in Golang by combining cron-style scheduling with background execution.",[1137,1130],"2019-11-21",{"path":1509,"title":1510,"description":1511,"categories":1512,"draft":1112,"year":1513,"series":6},"\u002Fblog\u002Fsessions-in-golang","Sessions using Golang and Redis","How cookies and sessions work, and how to implement persistent login sessions in Golang using Redis.",[1137,1283,1130],"2020-02-25",{"path":1515,"title":1516,"description":1517,"categories":1518,"draft":1112,"year":1519,"series":6},"\u002Fblog\u002Fsolid-dry-kiss-yagni","Solid Dry Kiss Yagni","An introduction to the SOLID, DRY, KISS, and YAGNI principles and how they help you write cleaner, robust code.",[1167],"2020-07-17",{"path":1521,"title":1522,"description":1523,"categories":1524,"draft":1112,"year":1525,"series":6},"\u002Fblog\u002Fstack-in-golang","Implement Stack in Golang","Learn how to implement stack data structure in Golang (Full code)",[1137,1130],"2020-09-14",{"path":1527,"title":1528,"description":1529,"categories":1530,"draft":1112,"year":1531,"series":6},"\u002Fblog\u002Fstart-oss-today","Start your Open Source journey today","Start your OSS journey with intro to GIT. Participate in Hacktoberfest!",[1221,1130],"2020-09-19",{"path":1533,"title":1534,"description":1535,"categories":1536,"draft":1112,"year":1538,"series":6},"\u002Fblog\u002Fsticky-social-bar","Sticky social share component in HTML","Learn how to build a social media sharing component in HTML and add it to your website.",[1130,1537],"Frontend","2021-02-05",{"path":1540,"title":1541,"description":1542,"categories":1543,"draft":1112,"year":1544,"series":6},"\u002Fblog\u002Fterm-insurance","Term insurance Simplified","Everything you need to know before you buy a term insurance.",[1145,1419],"2020-11-29",{"path":1546,"title":1547,"description":1548,"categories":1549,"draft":1112,"year":1551,"series":6},"\u002Fblog\u002Fterminal-output-with-redirection","Handling terminal outputs with Redirection","Learn how to handle terminal outputs with Redirection and saving it to files",[1368,1550,1130],"Terminal","2020-09-06",{"path":1553,"title":1554,"description":1555,"categories":1556,"draft":1112,"year":1557,"series":6},"\u002Fblog\u002Fthink-and-grow-rich","Book Notes: Think and Grow Rich","My notes and highlights from Think and Grow Rich by Napoleon Hill, covering its process for building wealth.",[1144,1145],"2020-05-19",{"path":1559,"title":1560,"description":1561,"categories":1562,"draft":1112,"year":1563,"series":6},"\u002Fblog\u002Ftransactions-postgres-golang","Transactions on Postgres with Golang","Performing Postgres database operations in Golang with GORM, from basic queries to full transaction support.",[1137,1283,1130],"2020-03-18",{"path":1565,"title":1566,"description":1567,"categories":1568,"draft":1112,"year":1569,"series":6},"\u002Fblog\u002Fwaitgroups-in-golang","WaitGroups in Golang","Learn about WaitGroups in golang and how to use them to perform concurrent operations without blocking the main thread.",[1137,1130],"2022-05-31",{"path":1571,"title":1572,"description":1573,"categories":1574,"draft":1112,"year":1576,"series":6},"\u002Fblog\u002Fwhat-i-use","What I Use: Products and Softwares","List of what I use in my day to day life ranging from terminal, editors, softwares, devices to accessories",[1145,1575],"Tech","2024-06-01",{"path":1578,"title":1579,"description":1580,"categories":1581,"draft":1112,"year":1582,"series":6},"\u002Fblog\u002Fyear-in-review-2020","Year in Review: 2020","It's a wrap! 2020 was a crazy year, See how my year went!",[1145],"2020-12-31",{"path":1584,"title":1585,"description":1586,"categories":1587,"draft":1112,"year":1588,"series":6},"\u002Fblog\u002Fyear-in-review-2021","Year in Review: 2021","It's a wrap! 2021 was a mixed bag, full of ups and downs. Key Goal for 2022: Start now!",[1145],"2021-12-31",1788350657742]