[{"data":1,"prerenderedAt":2715},["ShallowReactive",2],{"search-articles":3,"git-articles":2553},[4,218,411,576,835,1845,2068,2177,2416],{"id":5,"title":6,"archived":7,"body":8,"date":201,"description":202,"extension":87,"hide_toc":7,"meta":203,"navigation":106,"ogImage":209,"path":210,"published":106,"seo":211,"slug":212,"stem":213,"tags":214,"updated_at":209,"__hash__":217},"article\u002Farticles\u002F2025-02-04-new-blog-2024.md","New Blog!",false,{"type":9,"value":10,"toc":194},"minimark",[11,15,27,32,35,39,50,53,57,60,63,66,70,73,76,79,82,125,128,136,139,145,172,180,184,187,190],[12,13,14],"p",{},"After not touching my blog for a couple years, I finally decided on a stack and began to rebuild it. I wanted to outline my journey and tools that got me here.",[16,17,18,21],"blockquote",{},[12,19,20],{},"Programmers will rewrite their entire blog 10 times before writing a single post.",[12,22,23],{},[24,25,26],"cite",{},"Some twitter post I saw once",[28,29,31],"h2",{"id":30},"jekyll-2017-2020","Jekyll 2017 - 2020",[12,33,34],{},"The original version of my blog was built using Jekyll and Github pages. It was forked from another blog and I really didn't do much styling with it. To be honest, it mostly seemed like magic to me because I never learned Ruby or understood how the templating engine worked. I had no complaints though, It just worked! Jekyll was a great stack and being able to host it for free without ads was great for a blog I didn't write much on.",[28,36,38],{"id":37},"gatsby-2020-2024","Gatsby 2020 - 2024",[12,40,41,42,49],{},"In the summer of 2020, I taught myself React and Gatsby by building my blog. This became a great introduction to static site generators. After being a full stack PHP developer for 3 years, the Dev Experience of Gatsby was a breath of fresh air. I followed a few tutorials from ",[43,44,48],"a",{"href":45,"rel":46},"https:\u002F\u002Fjoshwcomeau.com",[47],"nofollow","Josh Comeau"," and I had my blog deployed by the end of the week. It was a fun time despite the world being on fire.",[12,51,52],{},"Unfortunately, I didn't keep up with the blog. I didn't use React professionally or in any side projects, so solving problems in Gatsby took longer than I wanted. It became harder and harder to fill my brain with programming knowledge that was only useful for one thing. Not to mention Gatsby was starting to become very slow when building my site and would randomly break because some package updated. All of that plus life changes, I didn't have the energy to keep posting or maintaining the blog.",[28,54,56],{"id":55},"eleventy-2022","Eleventy 2022",[12,58,59],{},"After a year of not doing much with my personal site, I decided I wanted to write it in a simpler stack, something I was more familiar with. Nothing is more simple than vanilla JS.",[12,61,62],{},"Around this time, I kept hearing about Eleventy on podcasts. I decided to give it a look and was impressed by how simple it was. Everything is just JS, no magic. That turned out however to be a bad thing. One thing Gatsby had is a swarm of plugins for every problem you could think of. 11ty had a number of plugins too, but you would have to really dig into the config and code if you wanted to replicate a similar dev experience as Gatsby.",[12,64,65],{},"I never ended up finishing the blog in 11ty. That doesn't mean there is anything wrong with 11ty, it’s a great framework for certain use cases. For me, I wanted something that is hackable but also simple when I just want to write a post. 11ty just required too much work to get it to where I wanted it to be.",[28,67,69],{"id":68},"nuxt-2024-current","Nuxt 2024 - Current",[12,71,72],{},"Queue to 2024 - 2025, you are most likely reading this post on a site built with Nuxt. After doing a bit of research, I found Nuxt which is similar to NextJS but written for Vue. Nuxt is pretty cool, its got a lot of DevX features like Gatsby does but its all in Vue. In about a day and a half, I had my blog set up with all of the posts from my old site.",[12,74,75],{},"Vue has been my goto framework professionally for the last 5 years. So learning Nuxt is not too difficult.",[12,77,78],{},"This does not mean I will stick with Nuxt forever. It has its own set of problems. It’s not without its flaws.  But being able to use Vue make its easy for me to write custom components that I can reuse in any future stack I use.",[12,80,81],{},"Plus it supports MDX so putting components in my markdown is as easy as",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-md shiki shiki-themes ayu-mirage ayu-mirage ayu-mirage","::callout{title=\"Very Important Callout\" type=\"warning\"}\n\nCallouts are cool\n\n::\n\n","md","",[90,91,92,101,108,114,119],"code",{"__ignoreMap":88},[93,94,97],"span",{"class":95,"line":96},"line",1,[93,98,100],{"class":99},"sfujN","::callout{title=\"Very Important Callout\" type=\"warning\"}\n",[93,102,104],{"class":95,"line":103},2,[93,105,107],{"emptyLinePlaceholder":106},true,"\n",[93,109,111],{"class":95,"line":110},3,[93,112,113],{"class":99},"Callouts are cool\n",[93,115,117],{"class":95,"line":116},4,[93,118,107],{"emptyLinePlaceholder":106},[93,120,122],{"class":95,"line":121},5,[93,123,124],{"class":99},"::\n",[12,126,127],{},"And it will render the component I made",[129,130,133],"callout",{"title":131,"type":132},"Very Important Callout","info",[12,134,135],{},"Callouts are cool",[12,137,138],{},"Overall, I am happy with the stack I have chosen. I am excited to write more posts and share my knowledge.",[12,140,141],{},[142,143,144],"strong",{},"My current stack is:",[146,147,148,163,166,169],"ul",{},[149,150,151,152],"li",{},"Nuxt 3\n",[146,153,154,157,160],{},[149,155,156],{},"Nuxt Content",[149,158,159],{},"Nuxt Image",[149,161,162],{},"Nuxt SEO",[149,164,165],{},"TailwindCSS",[149,167,168],{},"Coolify for hosting",[149,170,171],{},"Markdown",[12,173,174,175],{},"Also, I decided to fully open source my blog. You can find the code on ",[43,176,179],{"href":177,"rel":178},"https:\u002F\u002Fgithub.com\u002FGeorgeNance\u002Fblog24",[47],"Github",[28,181,183],{"id":182},"conclusion","Conclusion",[12,185,186],{},"Nothing says \"I want to write a blog post\" like rewriting your entire blog. I am happy with the stack I have chosen. I am excited to write more posts and share my knowledge with the world.",[12,188,189],{},"Expect more posts soon! 📓",[191,192,193],"style",{},"html pre.shiki code .sfujN, html code.shiki .sfujN{--shiki-default:#CCCAC2;--shiki-dark:#CCCAC2;--shiki-sepia:#CCCAC2}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":88,"searchDepth":103,"depth":103,"links":195},[196,197,198,199,200],{"id":30,"depth":103,"text":31},{"id":37,"depth":103,"text":38},{"id":55,"depth":103,"text":56},{"id":68,"depth":103,"text":69},{"id":182,"depth":103,"text":183},"2025-02-04","New stack, who dis?",{"readingTime":204},{"text":205,"minutes":206,"time":207,"words":208},"4 min read",3.675,220500,735,null,"\u002Farticles\u002F2025-02-04-new-blog-2024",{"title":6,"description":202},"new-blog-2025","articles\u002F2025-02-04-new-blog-2024",[215,216],"personal","nuxt","QiZZDhaR0D268DoEoCwAOutAhW-43WJNr_d1_kXhoKY",{"id":219,"title":220,"archived":7,"body":221,"date":396,"description":397,"extension":87,"hide_toc":7,"meta":398,"navigation":106,"ogImage":209,"path":404,"published":106,"seo":405,"slug":406,"stem":407,"tags":408,"updated_at":209,"__hash__":410},"article\u002Farticles\u002Fuseful-function-killing-process-port.md","A useful shell command for killing processes by port",{"type":9,"value":222,"toc":394},[223,226,258,261,269,272,283,357,360,391],[12,224,225],{},"Hey everyone, I want to share with you a commandline function that helps quickly kill processes by their port. Some of the servers I start up love to stay running in the background after I closed them. So I often get errors that say something like:",[83,227,231],{"className":228,"code":229,"language":230,"meta":88,"style":88},"language-bash shiki shiki-themes ayu-mirage ayu-mirage ayu-mirage","error: [Errno 48] Address already in use\n","bash",[90,232,233],{"__ignoreMap":88},[93,234,235,239,242,246,249,252,255],{"class":95,"line":96},[93,236,238],{"class":237},"sKo5S","error:",[93,240,241],{"class":99}," [Errno ",[93,243,245],{"class":244},"sU2D5","48]",[93,247,248],{"class":244}," Address",[93,250,251],{"class":244}," already",[93,253,254],{"class":244}," in",[93,256,257],{"class":244}," use\n",[12,259,260],{},"or",[83,262,267],{"className":263,"code":265,"language":266},[264],"language-text","Failed to listen on localhost:8000 (reason: Address already in use)\n","text",[90,268,265],{"__ignoreMap":88},[12,270,271],{},"Here is a function to quickly kill any rogue processes on a certain port",[12,273,274,275,278,279,282],{},"To use this, just add it to ",[90,276,277],{},"~\u002F.bashrc"," or ",[90,280,281],{},"~\u002F.zshrc"," file:",[83,284,286],{"className":228,"code":285,"language":230,"meta":88,"style":88},"# Kills a process running on a specified tcp port\nkillport() {\n  echo \"Killing process on port: $1\";\n  kill -9 $(lsof -t -i:$1 -sTCP:LISTEN)\n}\n",[90,287,288,294,303,323,352],{"__ignoreMap":88},[93,289,290],{"class":95,"line":96},[93,291,293],{"class":292},"ssZEJ","# Kills a process running on a specified tcp port\n",[93,295,296,300],{"class":95,"line":103},[93,297,299],{"class":298},"s-wx2","killport",[93,301,302],{"class":99},"() {\n",[93,304,305,309,312,316,319],{"class":95,"line":110},[93,306,308],{"class":307},"sIRaB","  echo",[93,310,311],{"class":244}," \"Killing process on port: ",[93,313,315],{"class":314},"sOmUT","$1",[93,317,318],{"class":244},"\"",[93,320,322],{"class":321},"slyWJ",";\n",[93,324,325,328,332,335,338,341,344,346,349],{"class":95,"line":116},[93,326,327],{"class":307},"  kill",[93,329,331],{"class":330},"sLJkx"," -9",[93,333,334],{"class":99}," $(",[93,336,337],{"class":237},"lsof",[93,339,340],{"class":330}," -t",[93,342,343],{"class":330}," -i:",[93,345,315],{"class":314},[93,347,348],{"class":330}," -sTCP:LISTEN",[93,350,351],{"class":99},")\n",[93,353,354],{"class":95,"line":121},[93,355,356],{"class":99},"}\n",[12,358,359],{},"Reload your terminal and now you call kill any port you need access to",[83,361,363],{"className":228,"code":362,"language":230,"meta":88,"style":88},"> killport 9000\nKilling process on port: 8000\n",[90,364,365,374],{"__ignoreMap":88},[93,366,367,371],{"class":95,"line":96},[93,368,370],{"class":369},"syWhD",">",[93,372,373],{"class":99}," killport 9000\n",[93,375,376,379,382,385,388],{"class":95,"line":103},[93,377,378],{"class":237},"Killing",[93,380,381],{"class":244}," process",[93,383,384],{"class":244}," on",[93,386,387],{"class":244}," port:",[93,389,390],{"class":314}," 8000\n",[191,392,393],{},"html pre.shiki code .sKo5S, html code.shiki .sKo5S{--shiki-default:#73D0FF;--shiki-dark:#73D0FF;--shiki-sepia:#73D0FF}html pre.shiki code .sfujN, html code.shiki .sfujN{--shiki-default:#CCCAC2;--shiki-dark:#CCCAC2;--shiki-sepia:#CCCAC2}html pre.shiki code .sU2D5, html code.shiki .sU2D5{--shiki-default:#D5FF80;--shiki-dark:#D5FF80;--shiki-sepia:#D5FF80}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .ssZEJ, html code.shiki .ssZEJ{--shiki-default:#6E7C8F;--shiki-default-font-style:italic;--shiki-dark:#6E7C8F;--shiki-dark-font-style:italic;--shiki-sepia:#6E7C8F;--shiki-sepia-font-style:italic}html pre.shiki code .s-wx2, html code.shiki .s-wx2{--shiki-default:#FFCD66;--shiki-dark:#FFCD66;--shiki-sepia:#FFCD66}html pre.shiki code .sIRaB, html code.shiki .sIRaB{--shiki-default:#F28779;--shiki-dark:#F28779;--shiki-sepia:#F28779}html pre.shiki code .sOmUT, html code.shiki .sOmUT{--shiki-default:#DFBFFF;--shiki-dark:#DFBFFF;--shiki-sepia:#DFBFFF}html pre.shiki code .slyWJ, html code.shiki .slyWJ{--shiki-default:#CCCAC2B3;--shiki-dark:#CCCAC2B3;--shiki-sepia:#CCCAC2B3}html pre.shiki code .sLJkx, html code.shiki .sLJkx{--shiki-default:#95E6CB;--shiki-dark:#95E6CB;--shiki-sepia:#95E6CB}html pre.shiki code .syWhD, html code.shiki .syWhD{--shiki-default:#F29E74;--shiki-dark:#F29E74;--shiki-sepia:#F29E74}",{"title":88,"searchDepth":103,"depth":103,"links":395},[],"2024-02-01","Heres a cool command",{"readingTime":399},{"text":400,"minutes":401,"time":402,"words":403},"1 min read",0.63,37800,126,"\u002Farticles\u002Fuseful-function-killing-process-port",{"title":220,"description":397},"useful-function-killing-process-port","articles\u002Fuseful-function-killing-process-port",[409],"productivity","F7XVmCTMgaeOiaFnrGODKe7WOat-0FJF8NxAraEI7_4",{"id":412,"title":413,"archived":7,"body":414,"date":559,"description":560,"extension":87,"hide_toc":106,"meta":561,"navigation":106,"ogImage":567,"path":568,"published":106,"seo":569,"slug":570,"stem":571,"tags":572,"updated_at":209,"__hash__":575},"article\u002Farticles\u002Fapps-i-use.md","The Apps I Use",{"type":9,"value":415,"toc":552},[416,425,428,436,447,450,453,461,464,472,475,481,490,493,496,502,505,508,516,521,524,532,538,541,544,547,549],[129,417,418],{},[12,419,420,421],{},"This list is a bit outdated, I recommend looking at ",[43,422,424],{"href":423},"\u002Fbag","my updated list",[12,426,427],{},"Staying productive in a digital world can be hard without the right tools. I have assembled a list of great apps that I use everyday that make my life easier.",[28,429,431],{"id":430},"bear",[43,432,435],{"href":433,"rel":434},"https:\u002F\u002Fbear.app",[47],"Bear",[12,437,438,439,442],{},"Bear is a note taking app that brilliantly simple.",[440,441],"br",{},[443,444],"img",{"alt":445,"src":446},"Bear notes","\u002Fimg\u002Farticles\u002Fbear.png",[12,448,449],{},"Where it thrives is its ability to use anywhere in your note and sort them into collections.",[12,451,452],{},"What makes Bear one of my favorite note taking applications is the fact that it's all markdown under the hood. Which means if I wanted to export all my notes out of Bear, I can with ease. I like that I own my data. My ADHD brain needs something flexible like this to stay organized.",[12,454,455,456],{},"I have been trying to take more notes lately and to build up my ",[43,457,460],{"href":458,"rel":459},"https:\u002F\u002Ffortelabs.co\u002Fblog\u002Fbasboverview\u002F",[47],"second brain.",[12,462,463],{},"Bear is an excellent value at only $15 a year.  That gets you a mobile app and a desktop app. The developers behind Bear are also working a major rewrite to make a web version as well.",[28,465,467],{"id":466},"obsidian",[43,468,471],{"href":469,"rel":470},"https:\u002F\u002Fobsidian.md",[47],"Obsidian",[12,473,474],{},"Obsidian is the newest player in my arsenal. It is a research note taking app created during the Covid-19 lockdown as a fun project. quickly evolved into quite a hit.",[12,476,477],{},[443,478],{"alt":479,"src":480},"Obsidian Markdown Editor","\u002Fimg\u002Farticles\u002Fobsidian.png",[12,482,483,484,489],{},"What makes Obsidian different ? Its based off of the ",[43,485,488],{"href":486,"rel":487},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FZettelkasten",[47],"zettelkasten"," system.  Which is a system of taking notes and linking them together with certain phrases or words.",[12,491,492],{},"I will be the first to tell you I am no expert at this system but I love the idea of having my own database of knowledge.",[12,494,495],{},"Obsidian comes into play because they support backlinks in notes. Which is a way to connect 2 markdown files to each other. Obsidian also has this cool feature to see how your notes connect.",[12,497,498],{},[443,499],{"alt":500,"src":501},"Obsidian Graph View","\u002Fimg\u002Farticles\u002Fobsidian-2.png",[12,503,504],{},"It has become one of my favorite apps and has tons of features like a daily notes. The app uses CSS for custom themes so it's a breeze to make it look how you want.",[12,506,507],{},"Right now I am using it alongside Bear to import notes that I want to move to a more permanent solution.",[28,509,511],{"id":510},"todoist",[43,512,515],{"href":513,"rel":514},"https:\u002F\u002Ftodoist.com\u002Fr\u002Fgeorgenancejr_ujvbmr",[47],"Todoist",[12,517,518],{},[443,519],{"alt":515,"src":520},"\u002Fimg\u002Farticles\u002Ftodoist.png",[12,522,523],{},"Todoist is a new one for me. For a long time I opposed this kinda of \"subscription todo app\", but it has been very beneficial in helping get my life together.  The neat thing about about Todoist is projects and the ability to separate many tasks.",[28,525,527],{"id":526},"figma",[43,528,531],{"href":529,"rel":530},"https:\u002F\u002Fwww.figma.com",[47],"Figma",[12,533,534],{},[443,535],{"alt":536,"src":537},"Figma with logo for georgenance.com","\u002Fimg\u002Farticles\u002Ffigma.png",[12,539,540],{},"Figma is a blast to work with for creating icons or UI mockups .",[12,542,543],{},"The fact that is free blows my mind.  I have started to work on my own icon-set in it. My logo was also created in it. It's a joy to use.",[12,545,546],{},"Plus it has the ability to collaborate easily with real time editing.",[28,548,183],{"id":182},[12,550,551],{},"These are just a few apps I use. I plan to write more about the other ones I love.",{"title":88,"searchDepth":103,"depth":103,"links":553},[554,555,556,557,558],{"id":430,"depth":103,"text":435},{"id":466,"depth":103,"text":471},{"id":510,"depth":103,"text":515},{"id":526,"depth":103,"text":531},{"id":182,"depth":103,"text":183},"2020-11-28","I have assembled a list of great apps that I use everyday that make my life easier",{"readingTime":562},{"text":563,"minutes":564,"time":565,"words":566},"3 min read",2.285,137100,457,"\u002Fimg\u002Farticles\u002Fapps-i-use.jpg","\u002Farticles\u002Fapps-i-use",{"title":413,"description":560},"apps-i-use","articles\u002Fapps-i-use",[409,573,574],"tools","adhd","r8K5sCMpsp8pllDuOpsklLat2zXUqfwXDzMCXjeLQgk",{"id":577,"title":578,"archived":7,"body":579,"date":820,"description":821,"extension":87,"hide_toc":7,"meta":822,"navigation":106,"ogImage":827,"path":828,"published":106,"seo":829,"slug":830,"stem":831,"tags":832,"updated_at":209,"__hash__":834},"article\u002Farticles\u002Fwrite-more-css.md","7 Reasons you SHOULD write CSS",{"type":9,"value":580,"toc":810},[581,590,593,597,606,609,613,622,746,750,753,759,763,770,779,783,786,790,793,797,800,804,807],[12,582,583,584,589],{},"This article is in response to this ",[43,585,588],{"href":586,"rel":587},"https:\u002F\u002Fdev.to\u002Fworkflo30292556\u002F10-reasons-why-you-should-stop-writing-css-203c",[47],"post"," on DEV.",[12,591,592],{},"I believe that preprocessors like SASS, LESS, or Stylus are becoming more and more irrelevant as CSS becomes more powerful.",[28,594,596],{"id":595},"_1-postcss","1. PostCSS",[12,598,599,600,605],{},"I am going to start this list with ",[43,601,604],{"href":602,"rel":603},"https:\u002F\u002FpostCSS.org",[47],"PostCSS",". Some people will be gritting their teeth right now saying that is cheating. And they may be right in a sense. But at its core, PostCSS brings the features of future CSS to your code now. The language is still CSS.",[12,607,608],{},"PostCSS bring upcoming features such as selectors, functions, and automatically adding vendor prefixes to your code.",[28,610,612],{"id":611},"_2-css-supports-variables","2. CSS supports variables",[12,614,615,616,621],{},"CSS added support for ",[43,617,620],{"href":618,"rel":619},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FUsing_CSS_custom_properties",[47],"custom variables"," and every modern browser supports it. The beauty of CSS variables is that you can dynamically change the variable values without needing to recompile. My site uses CSS variables for dark mode. If you haven’t tried it, Click the moon icon in the top right.",[83,623,627],{"className":624,"code":625,"language":626,"meta":88,"style":88},"language-CSS shiki shiki-themes ayu-mirage ayu-mirage ayu-mirage",":root {\n  --color-primary: #399ee6;\n  --color-text: #222;\n  --b-radius: 8px;\n}\n\nbutton{\n    background-color: var(--color-primary);\n    color: var(--color-text);\n    border-radius: var(--b-radius)\n}\n\n","CSS",[90,628,629,637,650,662,678,682,687,696,713,728,741],{"__ignoreMap":88},[93,630,631,634],{"class":95,"line":96},[93,632,633],{"class":330},":root",[93,635,636],{"class":99}," {\n",[93,638,639,642,645,648],{"class":95,"line":103},[93,640,641],{"class":99},"  --color-primary",[93,643,644],{"class":321},":",[93,646,647],{"class":330}," #399ee6",[93,649,322],{"class":321},[93,651,652,655,657,660],{"class":95,"line":110},[93,653,654],{"class":99},"  --color-text",[93,656,644],{"class":321},[93,658,659],{"class":330}," #222",[93,661,322],{"class":321},[93,663,664,667,669,672,676],{"class":95,"line":116},[93,665,666],{"class":99},"  --b-radius",[93,668,644],{"class":321},[93,670,671],{"class":314}," 8",[93,673,675],{"class":674},"siXJH","px",[93,677,322],{"class":321},[93,679,680],{"class":95,"line":121},[93,681,356],{"class":99},[93,683,685],{"class":95,"line":684},6,[93,686,107],{"emptyLinePlaceholder":106},[93,688,690,693],{"class":95,"line":689},7,[93,691,692],{"class":237},"button",[93,694,695],{"class":99},"{\n",[93,697,699,703,705,708,711],{"class":95,"line":698},8,[93,700,702],{"class":701},"sDabC","    background-color",[93,704,644],{"class":321},[93,706,707],{"class":307}," var",[93,709,710],{"class":99},"(--color-primary)",[93,712,322],{"class":321},[93,714,716,719,721,723,726],{"class":95,"line":715},9,[93,717,718],{"class":701},"    color",[93,720,644],{"class":321},[93,722,707],{"class":307},[93,724,725],{"class":99},"(--color-text)",[93,727,322],{"class":321},[93,729,731,734,736,738],{"class":95,"line":730},10,[93,732,733],{"class":701},"    border-radius",[93,735,644],{"class":321},[93,737,707],{"class":307},[93,739,740],{"class":99},"(--b-radius)\n",[93,742,744],{"class":95,"line":743},11,[93,745,356],{"class":99},[28,747,749],{"id":748},"_3-css-supports-imports","3. CSS supports imports.",[12,751,752],{},"For the longest time you would have one giant CSS file for everything, but modern CSS allows you to import CSS files. I have began to separate my CSS files to help keep my code more organized.",[12,754,755],{},[443,756],{"alt":757,"src":758},"Screenshot of code showing CSS variables ","\u002Fimg\u002Farticles\u002Fcss-vars.png",[28,760,762],{"id":761},"_4-calculations-are-here-and-they-work-beautifully","4. Calculations are here and they work beautifully.",[12,764,765,766,769],{},"With ",[90,767,768],{},"calc"," you can do much more then you ever could before. It allows you to add, subtract, multiply, and divide in CSS. You can even do calculation using different data types such as percents and pixels.",[83,771,773],{"className":624,"code":772,"language":626,"meta":88,"style":88},"width: calc(100% - 30px);\n",[90,774,775],{"__ignoreMap":88},[93,776,777],{"class":95,"line":96},[93,778,772],{"class":99},[28,780,782],{"id":781},"_5-flexbox-and-css-grid-have-changed-the-game","5. Flexbox and CSS grid have changed the game",[12,784,785],{},"Flexbox and CSS Grid have made designing for the web an absolute treat.  A basic bootstrap grid system can be created with a few lines of code. You no longer need to use a framework to create a responsive website.",[28,787,789],{"id":788},"_6-its-the-standard-to-style-the-web","6. It’s the standard to style the web.",[12,791,792],{},"The fundamentals of writing CSS syntax hasn’t changed much. You can rest assured that if you learn CSS, you will always know how to style the web. CSS has over 20 years of experience behind it. It won't be going away anytime soon.",[28,794,796],{"id":795},"_7-never-compile","7. Never compile",[12,798,799],{},"You can edit your CSS file from anywhere and in any text editor with ever needing to compile. You don't have to worry about syntax errors preventing your code from rendering. This adds the flexibility to write CSS directly from the web console.",[28,801,803],{"id":802},"wrap-up","Wrap up",[12,805,806],{},"I highly recommend writing more vanilla CSS. Modern CSS has come a long way since the days of using tables for everything. You can create modern, efficient, and responsive websites without needing to compile any code.",[191,808,809],{},"html pre.shiki code .sLJkx, html code.shiki .sLJkx{--shiki-default:#95E6CB;--shiki-dark:#95E6CB;--shiki-sepia:#95E6CB}html pre.shiki code .sfujN, html code.shiki .sfujN{--shiki-default:#CCCAC2;--shiki-dark:#CCCAC2;--shiki-sepia:#CCCAC2}html pre.shiki code .slyWJ, html code.shiki .slyWJ{--shiki-default:#CCCAC2B3;--shiki-dark:#CCCAC2B3;--shiki-sepia:#CCCAC2B3}html pre.shiki code .sOmUT, html code.shiki .sOmUT{--shiki-default:#DFBFFF;--shiki-dark:#DFBFFF;--shiki-sepia:#DFBFFF}html pre.shiki code .siXJH, html code.shiki .siXJH{--shiki-default:#FFA659;--shiki-dark:#FFA659;--shiki-sepia:#FFA659}html pre.shiki code .sKo5S, html code.shiki .sKo5S{--shiki-default:#73D0FF;--shiki-dark:#73D0FF;--shiki-sepia:#73D0FF}html pre.shiki code .sDabC, html code.shiki .sDabC{--shiki-default:#5CCFE6;--shiki-dark:#5CCFE6;--shiki-sepia:#5CCFE6}html pre.shiki code .sIRaB, html code.shiki .sIRaB{--shiki-default:#F28779;--shiki-dark:#F28779;--shiki-sepia:#F28779}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":88,"searchDepth":103,"depth":103,"links":811},[812,813,814,815,816,817,818,819],{"id":595,"depth":103,"text":596},{"id":611,"depth":103,"text":612},{"id":748,"depth":103,"text":749},{"id":761,"depth":103,"text":762},{"id":781,"depth":103,"text":782},{"id":788,"depth":103,"text":789},{"id":795,"depth":103,"text":796},{"id":802,"depth":103,"text":803},"2020-10-30","SASS, LESS, and Stylus are becoming more irrelevant as CSS becomes more powerful.",{"readingTime":823},{"text":563,"minutes":824,"time":825,"words":826},2.12,127200,424,"\u002Farticles\u002Fwrite-more-css\u002Fcover.png","\u002Farticles\u002Fwrite-more-css",{"title":578,"description":821},"write-more-css","articles\u002Fwrite-more-css",[833],"css","ZM7Tkn7F8wOtraRdx-_ln-OEbJlfN0jqvwsGX3NqvaU",{"id":836,"title":837,"archived":7,"body":838,"date":1829,"description":1830,"extension":87,"hide_toc":7,"meta":1831,"navigation":106,"ogImage":1836,"path":1837,"published":106,"seo":1838,"slug":1839,"stem":1840,"tags":1841,"updated_at":209,"__hash__":1844},"article\u002Farticles\u002Fdont-use-frontmatter-markdown-files-gatsby.md","Don’t use frontmatter to seperate your markdown files in GatsbyJS - Use the file system",{"type":9,"value":839,"toc":1817},[840,844,852,855,860,863,866,917,924,928,939,942,945,950,956,959,963,970,980,984,987,993,996,1179,1182,1186,1192,1208,1217,1227,1233,1236,1239,1412,1416,1427,1623,1633,1636,1644,1650,1657,1661,1664,1781,1784,1787,1792,1805,1814],[28,841,843],{"id":842},"introduction","Introduction",[12,845,846,847],{},"I have a link to the code I used for this tutorial on ",[43,848,851],{"href":849,"rel":850},"https:\u002F\u002Fgithub.com\u002FGeorgeNance\u002Fseperating-markdown-by-folder-example",[47],"github",[12,853,854],{},"I am going to walk you through how to seperate your markdown files in Gatsby in a way that makes more sense then a frontmatter field.",[856,857,859],"h3",{"id":858},"how-splitting-up-markdown-is-normally-done","How splitting up markdown is normally done",[12,861,862],{},"For the longest time I had to use solutions like front matter fields to specify the difference between posts and pages types",[12,864,865],{},"Before I learned you could tell GraphQL to know the which markdown file was a page or post. My front matter would look something like this:",[83,867,871],{"className":868,"code":869,"language":870,"meta":88,"style":88},"language-markdown shiki shiki-themes ayu-mirage ayu-mirage ayu-mirage","---\ntitle: 'How to be productive as a programmer with ADHD'\ndate: '2020-06-19'\npublished: true\ntags: ['adhd', 'productivity']\ncoverImage: cover.jpg\ntype: article\ndescription: Being productive while having ADHD can sometimes feel like a colossal task.\n---\n","markdown",[90,872,873,878,883,888,893,898,903,908,913],{"__ignoreMap":88},[93,874,875],{"class":95,"line":96},[93,876,877],{},"---\n",[93,879,880],{"class":95,"line":103},[93,881,882],{},"title: 'How to be productive as a programmer with ADHD'\n",[93,884,885],{"class":95,"line":110},[93,886,887],{},"date: '2020-06-19'\n",[93,889,890],{"class":95,"line":116},[93,891,892],{},"published: true\n",[93,894,895],{"class":95,"line":121},[93,896,897],{},"tags: ['adhd', 'productivity']\n",[93,899,900],{"class":95,"line":684},[93,901,902],{},"coverImage: cover.jpg\n",[93,904,905],{"class":95,"line":689},[93,906,907],{},"type: article\n",[93,909,910],{"class":95,"line":698},[93,911,912],{},"description: Being productive while having ADHD can sometimes feel like a colossal task.\n",[93,914,915],{"class":95,"line":715},[93,916,877],{},[12,918,919,920,923],{},"I would use ",[90,921,922],{},"type: article"," so I could filter out only posts or articles.",[856,925,927],{"id":926},"why-its-bad","Why its bad",[146,929,930,933,936],{},[149,931,932],{},"Adds extra syntax to every markdown file",[149,934,935],{},"It can easily become error prone",[149,937,938],{},"File Systems were designed for this task.",[12,940,941],{},"I wanted to simplify how my blog generated articles so I could focus on creating content and not figuring out why a post was missing.",[12,943,944],{},"And I already had a folder structure like this:",[12,946,947],{},[443,948],{"alt":88,"src":949},"\u002Fimg\u002Farticles\u002Fmy-folder-structure.png",[12,951,952],{},[953,954,955],"em",{},"Wouldn’t it be nice if GatsbyJS knew if a markdown file was a page or blog post based on the folder it's in?",[12,957,958],{},"That makes more sense to me.",[28,960,962],{"id":961},"prerequisites","Prerequisites",[12,964,965,966,969],{},"You need to have ",[90,967,968],{},"gatsby-source-filesystem"," installed.",[12,971,972,973,278,976,979],{},"If you are using ",[90,974,975],{},"gatsby-transform-remark",[90,977,978],{},"gatsby-plugin-mdx"," you will already have this installed. 👍",[28,981,983],{"id":982},"step-1-create-the-folder-structure","Step 1 - Create the folder structure",[12,985,986],{},"Create the folder structure you want to use.",[12,988,989,990],{},"I like to separate my posts from my code so I put mine at the root level like this\n",[90,991,992],{},"project-folder\u002Fcontent",[12,994,995],{},"This is the folder structure I will use",[83,997,999],{"className":228,"code":998,"language":230,"meta":88,"style":88},"\n📂 content\n├── 📂 blog\n│  ├── 📂 hello-world\n│  │  ├── 📄 index.md\n│  │  └── 🖼 salty_egg.jpg\n│  ├── 📂 my-second-post\n│  │  └── 📄 index.md\n│  └── 📂 new-beginnings\n│     └── 📄 index.md\n└── 📂 pages\n   ├── 📂 about\n   │  ├── 📄 index.md\n   │  └── 🖼 profile-pic.jpg\n   └── 📂 now\n      └── 📄 now.md\n\n",[90,1000,1001,1005,1013,1024,1037,1052,1067,1078,1090,1101,1112,1122,1133,1145,1157,1168],{"__ignoreMap":88},[93,1002,1003],{"class":95,"line":96},[93,1004,107],{"emptyLinePlaceholder":106},[93,1006,1007,1010],{"class":95,"line":103},[93,1008,1009],{"class":237},"📂",[93,1011,1012],{"class":244}," content\n",[93,1014,1015,1018,1021],{"class":95,"line":110},[93,1016,1017],{"class":237},"├──",[93,1019,1020],{"class":244}," 📂",[93,1022,1023],{"class":244}," blog\n",[93,1025,1026,1029,1032,1034],{"class":95,"line":116},[93,1027,1028],{"class":237},"│",[93,1030,1031],{"class":244},"  ├──",[93,1033,1020],{"class":244},[93,1035,1036],{"class":244}," hello-world\n",[93,1038,1039,1041,1044,1046,1049],{"class":95,"line":121},[93,1040,1028],{"class":237},[93,1042,1043],{"class":244},"  │",[93,1045,1031],{"class":244},[93,1047,1048],{"class":244}," 📄",[93,1050,1051],{"class":244}," index.md\n",[93,1053,1054,1056,1058,1061,1064],{"class":95,"line":684},[93,1055,1028],{"class":237},[93,1057,1043],{"class":244},[93,1059,1060],{"class":244},"  └──",[93,1062,1063],{"class":244}," 🖼",[93,1065,1066],{"class":244}," salty_egg.jpg\n",[93,1068,1069,1071,1073,1075],{"class":95,"line":689},[93,1070,1028],{"class":237},[93,1072,1031],{"class":244},[93,1074,1020],{"class":244},[93,1076,1077],{"class":244}," my-second-post\n",[93,1079,1080,1082,1084,1086,1088],{"class":95,"line":698},[93,1081,1028],{"class":237},[93,1083,1043],{"class":244},[93,1085,1060],{"class":244},[93,1087,1048],{"class":244},[93,1089,1051],{"class":244},[93,1091,1092,1094,1096,1098],{"class":95,"line":715},[93,1093,1028],{"class":237},[93,1095,1060],{"class":244},[93,1097,1020],{"class":244},[93,1099,1100],{"class":244}," new-beginnings\n",[93,1102,1103,1105,1108,1110],{"class":95,"line":730},[93,1104,1028],{"class":237},[93,1106,1107],{"class":244},"     └──",[93,1109,1048],{"class":244},[93,1111,1051],{"class":244},[93,1113,1114,1117,1119],{"class":95,"line":743},[93,1115,1116],{"class":237},"└──",[93,1118,1020],{"class":244},[93,1120,1121],{"class":244}," pages\n",[93,1123,1125,1128,1130],{"class":95,"line":1124},12,[93,1126,1127],{"class":237},"   ├──",[93,1129,1020],{"class":244},[93,1131,1132],{"class":244}," about\n",[93,1134,1136,1139,1141,1143],{"class":95,"line":1135},13,[93,1137,1138],{"class":237},"   │",[93,1140,1031],{"class":244},[93,1142,1048],{"class":244},[93,1144,1051],{"class":244},[93,1146,1148,1150,1152,1154],{"class":95,"line":1147},14,[93,1149,1138],{"class":237},[93,1151,1060],{"class":244},[93,1153,1063],{"class":244},[93,1155,1156],{"class":244}," profile-pic.jpg\n",[93,1158,1160,1163,1165],{"class":95,"line":1159},15,[93,1161,1162],{"class":237},"   └──",[93,1164,1020],{"class":244},[93,1166,1167],{"class":244}," now\n",[93,1169,1171,1174,1176],{"class":95,"line":1170},16,[93,1172,1173],{"class":237},"      └──",[93,1175,1048],{"class":244},[93,1177,1178],{"class":244}," now.md\n",[12,1180,1181],{},"Each page or blog post has its own folder. This makes it easy to keep images or files it needs organized.",[28,1183,1185],{"id":1184},"step-2-set-up-the-file-system-in-gatsby","Step 2 - Set up the file system in Gatsby",[12,1187,1188,1189,1191],{},"Install ",[90,1190,968],{}," if you don’t have it",[83,1193,1195],{"className":228,"code":1194,"language":230,"meta":88,"style":88},"yarn add gatsby-source-filesystem\n",[90,1196,1197],{"__ignoreMap":88},[93,1198,1199,1202,1205],{"class":95,"line":96},[93,1200,1201],{"class":237},"yarn",[93,1203,1204],{"class":244}," add",[93,1206,1207],{"class":244}," gatsby-source-filesystem\n",[12,1209,1210,1211,1216],{},"We are going to be using the ",[43,1212,1215],{"href":1213,"rel":1214},"https:\u002F\u002Fwww.gatsbyjs.com\u002Fplugins\u002Fgatsby-source-filesystem\u002F",[47],"Gatsby Source File System"," to separate our folders.",[12,1218,1219,1220,1222,1223,1226],{},"To do this, first add ",[90,1221,968],{}," as a plugin to ",[90,1224,1225],{},"gatsby.config.js"," . You might already have this added.",[12,1228,1229,1232],{},[142,1230,1231],{},"For each type of content you want separated add a new gatsby source filesystem object"," with the name and path.",[12,1234,1235],{},"In our case, we want to separate posts and pages, so we need 2 sections.",[12,1237,1238],{},"It should look something like this:",[83,1240,1244],{"className":1241,"code":1242,"language":1243,"meta":88,"style":88},"language-js shiki shiki-themes ayu-mirage ayu-mirage ayu-mirage","\n  plugins: [\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        path: `${__dirname}\u002Fcontent\u002Fblog`,\n        name: `blog`,\n      },\n    },\n    {\n      resolve: `gatsby-source-filesystem`,\n      options: {\n        path: `${__dirname}\u002Fcontent\u002Fpages`,\n        name: `page`,\n      },\n    },\n    ...\n}\n","js",[90,1245,1246,1250,1260,1265,1278,1287,1311,1323,1330,1337,1341,1351,1359,1378,1389,1395,1401,1407],{"__ignoreMap":88},[93,1247,1248],{"class":95,"line":96},[93,1249,107],{"emptyLinePlaceholder":106},[93,1251,1252,1255,1257],{"class":95,"line":103},[93,1253,1254],{"class":237},"  plugins",[93,1256,644],{"class":321},[93,1258,1259],{"class":99}," [\n",[93,1261,1262],{"class":95,"line":110},[93,1263,1264],{"class":99},"    {\n",[93,1266,1267,1270,1272,1275],{"class":95,"line":116},[93,1268,1269],{"class":99},"      resolve",[93,1271,644],{"class":321},[93,1273,1274],{"class":244}," `gatsby-source-filesystem`",[93,1276,1277],{"class":321},",\n",[93,1279,1280,1283,1285],{"class":95,"line":121},[93,1281,1282],{"class":99},"      options",[93,1284,644],{"class":321},[93,1286,636],{"class":99},[93,1288,1289,1292,1294,1297,1300,1303,1306,1309],{"class":95,"line":684},[93,1290,1291],{"class":99},"        path",[93,1293,644],{"class":321},[93,1295,1296],{"class":244}," `",[93,1298,1299],{"class":674},"${",[93,1301,1302],{"class":99},"__dirname",[93,1304,1305],{"class":674},"}",[93,1307,1308],{"class":244},"\u002Fcontent\u002Fblog`",[93,1310,1277],{"class":321},[93,1312,1313,1316,1318,1321],{"class":95,"line":689},[93,1314,1315],{"class":99},"        name",[93,1317,644],{"class":321},[93,1319,1320],{"class":244}," `blog`",[93,1322,1277],{"class":321},[93,1324,1325,1328],{"class":95,"line":698},[93,1326,1327],{"class":99},"      }",[93,1329,1277],{"class":321},[93,1331,1332,1335],{"class":95,"line":715},[93,1333,1334],{"class":99},"    }",[93,1336,1277],{"class":321},[93,1338,1339],{"class":95,"line":730},[93,1340,1264],{"class":99},[93,1342,1343,1345,1347,1349],{"class":95,"line":743},[93,1344,1269],{"class":99},[93,1346,644],{"class":321},[93,1348,1274],{"class":244},[93,1350,1277],{"class":321},[93,1352,1353,1355,1357],{"class":95,"line":1124},[93,1354,1282],{"class":99},[93,1356,644],{"class":321},[93,1358,636],{"class":99},[93,1360,1361,1363,1365,1367,1369,1371,1373,1376],{"class":95,"line":1135},[93,1362,1291],{"class":99},[93,1364,644],{"class":321},[93,1366,1296],{"class":244},[93,1368,1299],{"class":674},[93,1370,1302],{"class":99},[93,1372,1305],{"class":674},[93,1374,1375],{"class":244},"\u002Fcontent\u002Fpages`",[93,1377,1277],{"class":321},[93,1379,1380,1382,1384,1387],{"class":95,"line":1147},[93,1381,1315],{"class":99},[93,1383,644],{"class":321},[93,1385,1386],{"class":244}," `page`",[93,1388,1277],{"class":321},[93,1390,1391,1393],{"class":95,"line":1159},[93,1392,1327],{"class":99},[93,1394,1277],{"class":321},[93,1396,1397,1399],{"class":95,"line":1170},[93,1398,1334],{"class":99},[93,1400,1277],{"class":321},[93,1402,1404],{"class":95,"line":1403},17,[93,1405,1406],{"class":369},"    ...\n",[93,1408,1410],{"class":95,"line":1409},18,[93,1411,356],{"class":99},[28,1413,1415],{"id":1414},"step-3-update-gatsby-config","Step 3 - Update Gatsby config",[12,1417,1418,1419,1422,1423,1426],{},"In ",[90,1420,1421],{},"gatsby-node.js"," add this code to ",[90,1424,1425],{},"onCreateNode",".",[83,1428,1430],{"className":1241,"code":1429,"language":1243,"meta":88,"style":88},"exports.onCreateNode = ({ node, getNode, actions }) => {\n  const { createNodeField } = actions;\n\n  if (node.internal.type === `MarkdownRemark`) {\n    const parent = getNode(node.parent);\n\n    let collection = parent.sourceInstanceName;\n\n    createNodeField({\n      node,\n      name: 'collection',\n      value: collection,\n    });\n  }\n};\n",[90,1431,1432,1469,1485,1489,1516,1538,1542,1562,1566,1574,1581,1593,1605,1612,1617],{"__ignoreMap":88},[93,1433,1434,1437,1439,1441,1444,1447,1450,1453,1456,1458,1461,1464,1467],{"class":95,"line":96},[93,1435,1436],{"class":701},"exports",[93,1438,1426],{"class":369},[93,1440,1425],{"class":298},[93,1442,1443],{"class":369}," =",[93,1445,1446],{"class":99}," (",[93,1448,1449],{"class":314},"{ node",[93,1451,1452],{"class":321},",",[93,1454,1455],{"class":314}," getNode",[93,1457,1452],{"class":321},[93,1459,1460],{"class":314}," actions }",[93,1462,1463],{"class":99},") ",[93,1465,1466],{"class":674},"=>",[93,1468,636],{"class":99},[93,1470,1471,1474,1477,1480,1483],{"class":95,"line":103},[93,1472,1473],{"class":674},"  const",[93,1475,1476],{"class":99}," { createNodeField } ",[93,1478,1479],{"class":369},"=",[93,1481,1482],{"class":99}," actions",[93,1484,322],{"class":321},[93,1486,1487],{"class":95,"line":110},[93,1488,107],{"emptyLinePlaceholder":106},[93,1490,1491,1494,1497,1499,1502,1504,1507,1510,1513],{"class":95,"line":116},[93,1492,1493],{"class":674},"  if",[93,1495,1496],{"class":99}," (node",[93,1498,1426],{"class":369},[93,1500,1501],{"class":99},"internal",[93,1503,1426],{"class":369},[93,1505,1506],{"class":99},"type ",[93,1508,1509],{"class":369},"===",[93,1511,1512],{"class":244}," `MarkdownRemark`",[93,1514,1515],{"class":99},") {\n",[93,1517,1518,1521,1524,1526,1528,1531,1533,1536],{"class":95,"line":121},[93,1519,1520],{"class":674},"    const",[93,1522,1523],{"class":99}," parent ",[93,1525,1479],{"class":369},[93,1527,1455],{"class":298},[93,1529,1530],{"class":99},"(node",[93,1532,1426],{"class":369},[93,1534,1535],{"class":99},"parent)",[93,1537,322],{"class":321},[93,1539,1540],{"class":95,"line":684},[93,1541,107],{"emptyLinePlaceholder":106},[93,1543,1544,1547,1550,1552,1555,1557,1560],{"class":95,"line":689},[93,1545,1546],{"class":674},"    let",[93,1548,1549],{"class":99}," collection ",[93,1551,1479],{"class":369},[93,1553,1554],{"class":99}," parent",[93,1556,1426],{"class":369},[93,1558,1559],{"class":99},"sourceInstanceName",[93,1561,322],{"class":321},[93,1563,1564],{"class":95,"line":698},[93,1565,107],{"emptyLinePlaceholder":106},[93,1567,1568,1571],{"class":95,"line":715},[93,1569,1570],{"class":298},"    createNodeField",[93,1572,1573],{"class":99},"({\n",[93,1575,1576,1579],{"class":95,"line":730},[93,1577,1578],{"class":99},"      node",[93,1580,1277],{"class":321},[93,1582,1583,1586,1588,1591],{"class":95,"line":743},[93,1584,1585],{"class":99},"      name",[93,1587,644],{"class":321},[93,1589,1590],{"class":244}," 'collection'",[93,1592,1277],{"class":321},[93,1594,1595,1598,1600,1603],{"class":95,"line":1124},[93,1596,1597],{"class":99},"      value",[93,1599,644],{"class":321},[93,1601,1602],{"class":99}," collection",[93,1604,1277],{"class":321},[93,1606,1607,1610],{"class":95,"line":1135},[93,1608,1609],{"class":99},"    })",[93,1611,322],{"class":321},[93,1613,1614],{"class":95,"line":1147},[93,1615,1616],{"class":99},"  }\n",[93,1618,1619,1621],{"class":95,"line":1159},[93,1620,1305],{"class":99},[93,1622,322],{"class":321},[12,1624,1625,1626,1629,1630],{},"If you are using MDX, just swap out ",[90,1627,1628],{},"MarkdownRemark"," for ",[90,1631,1632],{},"Mdx",[12,1634,1635],{},"First off, we make sure that the node we are editing is a markdown file, we are grabbing the parent node so we can access some additional information.",[12,1637,1638,1640,1641,1643],{},[90,1639,1559],{}," is the field we set on ",[90,1642,968],{}," in the last step.",[12,1645,1646,1649],{},[90,1647,1648],{},"allMarkdownRemark"," alone does not have this field for us to use so we have to get it from the parent.",[12,1651,1652,1653,1656],{},"Then you add a ",[90,1654,1655],{},"field"," to the markdown node for the collection it belongs to.",[28,1658,1660],{"id":1659},"step-4-let-the-separating-begin","Step 4 - Let the separating begin",[12,1662,1663],{},"We can now pass a filter to gatsby to let it know what collection we want to access. Hooray! No more frontmatter types",[83,1665,1669],{"className":1666,"code":1667,"language":1668,"meta":88,"style":88},"language-graphql shiki shiki-themes ayu-mirage ayu-mirage ayu-mirage","query {\n  allMarkdownRemark(\n    sort: { fields: [frontmatter___date], order: DESC }\n    filter: { fields: { collection: { eq: \"blog\" } } }\n  ) {\n    edges {\n      node {\n        id\n        fields {\n          slug\n        }\n        frontmatter {\n          title\n          date\n          slug\n          date(formatString: \"MMMM DD, YYYY\")\n        }\n        excerpt(pruneLength: 280)\n      }\n    }\n  }\n}\n","graphql",[90,1670,1671,1676,1681,1686,1691,1696,1701,1706,1711,1716,1721,1726,1731,1736,1741,1745,1750,1754,1759,1765,1771,1776],{"__ignoreMap":88},[93,1672,1673],{"class":95,"line":96},[93,1674,1675],{},"query {\n",[93,1677,1678],{"class":95,"line":103},[93,1679,1680],{},"  allMarkdownRemark(\n",[93,1682,1683],{"class":95,"line":110},[93,1684,1685],{},"    sort: { fields: [frontmatter___date], order: DESC }\n",[93,1687,1688],{"class":95,"line":116},[93,1689,1690],{},"    filter: { fields: { collection: { eq: \"blog\" } } }\n",[93,1692,1693],{"class":95,"line":121},[93,1694,1695],{},"  ) {\n",[93,1697,1698],{"class":95,"line":684},[93,1699,1700],{},"    edges {\n",[93,1702,1703],{"class":95,"line":689},[93,1704,1705],{},"      node {\n",[93,1707,1708],{"class":95,"line":698},[93,1709,1710],{},"        id\n",[93,1712,1713],{"class":95,"line":715},[93,1714,1715],{},"        fields {\n",[93,1717,1718],{"class":95,"line":730},[93,1719,1720],{},"          slug\n",[93,1722,1723],{"class":95,"line":743},[93,1724,1725],{},"        }\n",[93,1727,1728],{"class":95,"line":1124},[93,1729,1730],{},"        frontmatter {\n",[93,1732,1733],{"class":95,"line":1135},[93,1734,1735],{},"          title\n",[93,1737,1738],{"class":95,"line":1147},[93,1739,1740],{},"          date\n",[93,1742,1743],{"class":95,"line":1159},[93,1744,1720],{},[93,1746,1747],{"class":95,"line":1170},[93,1748,1749],{},"          date(formatString: \"MMMM DD, YYYY\")\n",[93,1751,1752],{"class":95,"line":1403},[93,1753,1725],{},[93,1755,1756],{"class":95,"line":1409},[93,1757,1758],{},"        excerpt(pruneLength: 280)\n",[93,1760,1762],{"class":95,"line":1761},19,[93,1763,1764],{},"      }\n",[93,1766,1768],{"class":95,"line":1767},20,[93,1769,1770],{},"    }\n",[93,1772,1774],{"class":95,"line":1773},21,[93,1775,1616],{},[93,1777,1779],{"class":95,"line":1778},22,[93,1780,356],{},[28,1782,1783],{"id":802},"Wrap Up",[12,1785,1786],{},"Thanks for stopping by! This was a quick tutorial I made to solve an issue I was having with GatsbyJS. This article is a part of my \"write one blog post a month\" challenge.",[12,1788,846,1789],{},[43,1790,851],{"href":849,"rel":1791},[47],[12,1793,1794,1795,1800,1801,1426],{},"If you would like to see more tutorials like this, let me know on ",[43,1796,1799],{"href":1797,"rel":1798},"http:\u002F\u002Ftwitter.com\u002Fgeonance",[47],"twitter"," or by subscribing to my ",[43,1802,1804],{"href":1803},"\u002Fsubscribe","newletter",[12,1806,1807,1808,1813],{},"Also I recommmend checking out ",[43,1809,1812],{"href":1810,"rel":1811},"https:\u002F\u002Fjoshwcomeau.com\u002F",[47],"Josh W Comeau"," if you want more Gatsby goodness. His tutorial on darkmode inspired me to add it to my site",[191,1815,1816],{},"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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sKo5S, html code.shiki .sKo5S{--shiki-default:#73D0FF;--shiki-dark:#73D0FF;--shiki-sepia:#73D0FF}html pre.shiki code .sU2D5, html code.shiki .sU2D5{--shiki-default:#D5FF80;--shiki-dark:#D5FF80;--shiki-sepia:#D5FF80}html pre.shiki code .slyWJ, html code.shiki .slyWJ{--shiki-default:#CCCAC2B3;--shiki-dark:#CCCAC2B3;--shiki-sepia:#CCCAC2B3}html pre.shiki code .sfujN, html code.shiki .sfujN{--shiki-default:#CCCAC2;--shiki-dark:#CCCAC2;--shiki-sepia:#CCCAC2}html pre.shiki code .siXJH, html code.shiki .siXJH{--shiki-default:#FFA659;--shiki-dark:#FFA659;--shiki-sepia:#FFA659}html pre.shiki code .syWhD, html code.shiki .syWhD{--shiki-default:#F29E74;--shiki-dark:#F29E74;--shiki-sepia:#F29E74}html pre.shiki code .sDabC, html code.shiki .sDabC{--shiki-default:#5CCFE6;--shiki-dark:#5CCFE6;--shiki-sepia:#5CCFE6}html pre.shiki code .s-wx2, html code.shiki .s-wx2{--shiki-default:#FFCD66;--shiki-dark:#FFCD66;--shiki-sepia:#FFCD66}html pre.shiki code .sOmUT, html code.shiki .sOmUT{--shiki-default:#DFBFFF;--shiki-dark:#DFBFFF;--shiki-sepia:#DFBFFF}",{"title":88,"searchDepth":103,"depth":103,"links":1818},[1819,1823,1824,1825,1826,1827,1828],{"id":842,"depth":103,"text":843,"children":1820},[1821,1822],{"id":858,"depth":110,"text":859},{"id":926,"depth":110,"text":927},{"id":961,"depth":103,"text":962},{"id":982,"depth":103,"text":983},{"id":1184,"depth":103,"text":1185},{"id":1414,"depth":103,"text":1415},{"id":1659,"depth":103,"text":1660},{"id":802,"depth":103,"text":1783},"2020-08-27","I am going to walk you through how to seperate your markdown files in Gatsby in a way that more sense then a frontmatter field",{"readingTime":1832},{"text":205,"minutes":1833,"time":1834,"words":1835},3.73,223800,746,"\u002Farticles\u002Fdont-use-frontmatter-markdown-files\u002Fcover.jpg","\u002Farticles\u002Fdont-use-frontmatter-markdown-files-gatsby",{"title":837,"description":1830},"dont-use-frontmatter-markdown-files-gatsby","articles\u002Fdont-use-frontmatter-markdown-files-gatsby",[1842,1843],"gatsby","tips","GYAFsaBkTocVguo_0rC5JXx22NzHKtLVhTIbXbvzjNo",{"id":1846,"title":1847,"archived":7,"body":1848,"date":2051,"description":2052,"extension":87,"hide_toc":7,"meta":2053,"navigation":106,"ogImage":2059,"path":2060,"published":106,"seo":2061,"slug":2062,"stem":2063,"tags":2064,"updated_at":209,"__hash__":2067},"article\u002Farticles\u002Fopen-letter-new-programmers.md","An Open Letter to New Programmers",{"type":9,"value":1849,"toc":2043},[1850,1853,1856,1859,1863,1870,1876,1880,1888,1894,1897,1905,1912,1915,1922,1926,1929,1939,1942,1945,1949,1952,1959,1966,1969,1973,1980,1983,1986,1990,1993],[12,1851,1852],{},"Dear weary novice programmer,",[12,1854,1855],{},"Do not give up. I promise it will all make sense soon. Learning to program is not an exercise of remembering commands but the ability to change how you think. Learning to program is bigger then having the ability to write computer programs. It will teach you how to live a more optimal life.",[12,1857,1858],{},"I am going to share with you some advice I would have given myself when I first started.",[28,1860,1862],{"id":1861},"everyone-feels-like-they-are-faking-it","Everyone feels like they are faking it.",[12,1864,1865],{},[443,1866],{"alt":1867,"src":1868,"title":1869},"woman in gray shirt sitting on bench in front of MacBook","\u002Fimg\u002Farticles\u002Ffaking-it.jpg","Photo by Christin Hume",[12,1871,1872,1873,1426],{},"I know that you think that this way over your head. But I promise it will take time to get used to. Not a single soul born knows how to code. In the same sense, no one is born knowing how to walk. Only persistance will give you the results you want. Do not compare yourself or your code to others. ",[142,1874,1875],{},"This is the quickest way to hating your work",[28,1877,1879],{"id":1878},"you-must-write-garbage-code-first","You must write garbage code first",[12,1881,1882,1883,1887],{},"The worst thing you can do is take on a massive project in the beginning. When I was a wee lad, I loved the movie the Social Network. The movie revolved around Mark Zuckerberg starting Facebook from his college dorm room. I would get so inspired after watching that I would proclaim to my friends, “I”m going to build the next Facebook!”. Then I would open up my ",[1884,1885,1886],"del",{},"pirated"," copy of Adobe DreamWeaver and pretend to know was doing.",[12,1889,1890],{},[443,1891],{"alt":1892,"src":1893},"People from the Social Network   movie staring at computer","https:\u002F\u002Fmedia1.tenor.com\u002Fimages\u002Fcedc741cbcef0b97cc652ad9cb29d0ad\u002Ftenor.gif?itemid=13969571",[12,1895,1896],{},"At the time, I did not know much html. And the only css I knew was how to the change the color of text. But I was going to write the next Facebook.",[1898,1899,1901,1902,1426],"h4",{"id":1900},"spoiler-alert-i-didnt-write-the-next-facebook","Spoiler Alert: ",[953,1903,1904],{},"I didn’t write the next Facebook",[12,1906,1907,1908,1911],{},"The truth is, Facebook was ",[142,1909,1910],{},"not"," Zuckerberg’s first website. He was already an experienced programmer by the time he started Facebook. And no one talks about the projects he made before he got to Harvard. That’s an important thing to remember, your first projects are going to suck and no one but you will want to use them. And that’s okay!",[12,1913,1914],{},"In the game development community, there is a common piece of advice given to beginners. “Don’t write an MMO as your first game”. It's not surprising that aspiring gamedevs come into the field wanting to create the games they enjoy playing. This advice is not meant to be discouraging. What said is that you have to crawl before you can walk. If you dediate yourself to a huge project early on, you will become overwhelmed and burn out.",[12,1916,1917,1918,1921],{},"But if you accept that your first works will suck, you will grow and learn what you can do. The faster you get past the sucky bits, the faster you get to the ",[953,1919,1920],{},"not so bad"," parts.",[28,1923,1925],{"id":1924},"programming-is-a-change-in-mindset","Programming is a change in mindset",[12,1927,1928],{},"Learning to program is not about learning how to use the latest Javascript libraries. Its not about learning how binary works (Though that’s not a bad path). Its not even about learning a language . Learning to program is an entire shifting of the way you think.",[12,1930,1931,1935],{},[443,1932],{"alt":1933,"src":1934},"The Matrix","https:\u002F\u002Fmedia1.tenor.com\u002Fimages\u002F5505bcb204761c1f9c979a085d5fd4ec\u002Ftenor.gif?itemid=8390287",[1936,1937,1938],"small",{},"\nAt a certain point, you don't even see what normal people see looking at code\n",[12,1940,1941],{},"Here’s the thing about computers. Computers are purely logical. A computer will do what it's told. A computer knows only the information its given. If your program is not doing something you want, this means you need to step through how the computer is interpreting what's being told.",[12,1943,1944],{},"This can be a foreign concept for some. You have to think like a computer. People who tend to be better at math pick up programming a bit quicker. For me, I am not naturally good at math, so this took me a long time to grasp.",[28,1946,1948],{"id":1947},"experienced-programmers-question-their-expertise-all-of-the-time","Experienced programmers question their expertise all of the time",[12,1950,1951],{},"To this day I still question if I am an imposter and I have been programming for over 10 years. At my new job, they are using a framework I was not familiar with. I had a difficult time trying to understand the way the framework wants me to use it. No matter how many languages or framework you learn, you will always have moments like these.",[12,1953,1954],{},[443,1955],{"alt":1956,"src":1957,"title":1958},"white rabbit plush beside macbook photo","\u002Fimg\u002Farticles\u002Fquestion-cat.jpg","Photo by Outer Digit",[12,1960,1961,1962,1965],{},"There is always a period of time where you are typing code you don't fully understand. Then there will be an \"aha!\" moment where it all makes sense. This is called the ",[953,1963,1964],{},"click",". Sometime it takes weeks or months to get there. We all have to go through it. You are not dumb, it just has not clicked for you yet.",[12,1967,1968],{},"Programming is more about the ability to love learning than it is about remembering what you have learned. If you hate learning new things, you will have a hard time in this field. But if you love learning, you will find this very rewarding .",[28,1970,1972],{"id":1971},"the-click-will-come","The click will come",[12,1974,1975],{},[443,1976],{"alt":1977,"src":1978,"title":1979},"man wearing headphones while looking at MacBook","\u002Fimg\u002Farticles\u002Fconclusion.jpg","Photo by Miguelangel Miquelena",[12,1981,1982],{},"You are not alone if has not come yet. It all comes back to shifting your way of thinking. And that takes time. For a long time I wrote code without knowing what it did.",[12,1984,1985],{},"This is something that you must trust to come. You can not fight it or skip any steps.",[28,1987,1989],{"id":1988},"what-you-can-do","What you can do",[12,1991,1992],{},"Do not dispair, if you can accept that time will improve your skills, there is action you can take.",[146,1994,1995,1998,2001,2027,2040],{},[149,1996,1997],{},"Set aside some time everyday to program.",[149,1999,2000],{},"Try to make a project that will help you.",[149,2002,2003,2004],{},"Look through these lists and try to complete a project on your own.",[146,2005,2006,2013,2020],{},[149,2007,2008],{},[43,2009,2012],{"href":2010,"rel":2011},"https:\u002F\u002Fgithub.com\u002Fkaran\u002FProjects",[47],"Mega Project List",[149,2014,2015],{},[43,2016,2019],{"href":2017,"rel":2018},"https:\u002F\u002Fgithub.com\u002Ftuvtran\u002Fproject-based-learning",[47],"Project Based Learning",[149,2021,2022],{},[43,2023,2026],{"href":2024,"rel":2025},"https:\u002F\u002Fgithub.com\u002Fjorgegonzalez\u002Fbeginner-projects",[47],"Beginner Projects",[149,2028,2029,2030,278,2035],{},"Keep learning. Don't stop watching tutorials or taking classes. Ask questions on ",[43,2031,2034],{"href":2032,"rel":2033},"https:\u002F\u002Fdev.to",[47],"Dev.to",[43,2036,2039],{"href":2037,"rel":2038},"https:\u002F\u002Freddit.com\u002Fr\u002Flearnprogramming",[47],"\u002Fr\u002Flearnprogramming",[149,2041,2042],{},"If you know someone else who is struggling with programming, please send them this article.",{"title":88,"searchDepth":103,"depth":103,"links":2044},[2045,2046,2047,2048,2049,2050],{"id":1861,"depth":103,"text":1862},{"id":1878,"depth":103,"text":1879},{"id":1924,"depth":103,"text":1925},{"id":1947,"depth":103,"text":1948},{"id":1971,"depth":103,"text":1972},{"id":1988,"depth":103,"text":1989},"2020-07-31","Programming is more about the ability to love learning than it is about remembering what you have learned",{"readingTime":2054},{"text":2055,"minutes":2056,"time":2057,"words":2058},"5 min read",4.58,274800,916,"\u002Fimg\u002Farticles\u002Fopen-letter-new-programmers.jpg","\u002Farticles\u002Fopen-letter-new-programmers",{"title":1847,"description":2052},"open-letter-new-programmers","articles\u002Fopen-letter-new-programmers",[2065,2066],"novice","essay","V9kpA9IEfz5LsZHgjIZTFNoiJY9JJDEfrMvZ6VyNmd8",{"id":2069,"title":2070,"archived":7,"body":2071,"date":2162,"description":2163,"extension":87,"hide_toc":7,"meta":2164,"navigation":106,"ogImage":209,"path":2170,"published":106,"seo":2171,"slug":2172,"stem":2173,"tags":2174,"updated_at":209,"__hash__":2176},"article\u002Farticles\u002Fnifty-vscode-tricks.md","Nifty VScode Tricks",{"type":9,"value":2072,"toc":2157},[2073,2077,2080,2086,2099,2103,2109,2112,2117,2123,2126,2130,2137,2143],[28,2074,2076],{"id":2075},"change-color-picker-mode","Change Color Picker mode",[12,2078,2079],{},"I have begun to move most of my colors on my website to using HSL and needed an easy way to select colors. I discovered that by clicking on the status bar in the color picker, you can change the color format. At the moment it supports RGB, Hex, and HSL.",[12,2081,2082],{},[443,2083],{"alt":2084,"src":2085},"Color Picker","\u002Fimg\u002Farticles\u002Fvscode-color-picker.gif",[129,2087,2089],{"title":2088},"Side note about alpha",[12,2090,2091],{},[953,2092,2093,2094],{},"You won't be able to use this method with colors that have an alpha value. See this ",[43,2095,2098],{"href":2096,"rel":2097},"https:\u002F\u002Fgithub.com\u002FMicrosoft\u002Fvscode\u002Fissues\u002F31644",[47],"issue",[28,2100,2102],{"id":2101},"auto-format-the-document-on-save","Auto format the document on save",[12,2104,2105,2106,1426],{},"I hate unformatted code. It's hard to read, takes long to debug, and as someone who is a bit of a perfectionist, it irks my soul. But alas, VSCode to the rescue again. Deep in the settings, you can your code formatted ",[953,2107,2108],{},"automagically✨",[12,2110,2111],{},"This setting is in:",[12,2113,2114],{},[90,2115,2116],{},"Settings > Text Editor > Formatting",[12,2118,2119],{},[443,2120],{"alt":2121,"src":2122},"Picture of Auto-Format setting in VsCode","\u002Fimg\u002Farticles\u002Fautoformat.png",[12,2124,2125],{},"There's also a setting to format on paste! Great for keeping those Stack Overflow snippets formatted the same as the rest of your code.",[28,2127,2129],{"id":2128},"linting-your-grammer","Linting your grammer",[12,2131,2132,2133,2136],{},"Okay, this one isn't built into vscode, but it's an amazing plugin I discovered. As a developer ",[953,2134,2135],{},"trying"," to get better at writing, this one has been useful. I'm using it right now to write this blog post.",[12,2138,2139],{},[443,2140],{"alt":2141,"src":2142},"Picture of Write Good Linter in VsCode","\u002Fimg\u002Farticles\u002Flint-grammar.png",[12,2144,2145,2146,2151,2152,2156],{},"Its called ",[43,2147,2150],{"href":2148,"rel":2149},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=travisthetechie.write-good-linter",[47],"Write Good Linter"," and you can think of it as the Hemingway editor built into vscode. After installing it, the plugin will detect any unnecessary grammar and put a little ",[2153,2154,2155],"u",{},"squiggle"," under words that need adjusted.",{"title":88,"searchDepth":103,"depth":103,"links":2158},[2159,2160,2161],{"id":2075,"depth":103,"text":2076},{"id":2101,"depth":103,"text":2102},{"id":2128,"depth":103,"text":2129},"2020-05-21","Some vscode tricks I have learned that have helped me a ton",{"readingTime":2165},{"text":2166,"minutes":2167,"time":2168,"words":2169},"2 min read",1.1,66000,220,"\u002Farticles\u002Fnifty-vscode-tricks",{"title":2070,"description":2163},"nifty-vscode-tricks","articles\u002Fnifty-vscode-tricks",[2175],"vscode","yO2-exF_Pw4P24sHB74tw6HADDPoA3KUwtkfrGBPGTM",{"id":2178,"title":2179,"archived":7,"body":2180,"date":2402,"description":2403,"extension":87,"hide_toc":7,"meta":2404,"navigation":106,"ogImage":2409,"path":2410,"published":106,"seo":2411,"slug":2412,"stem":2413,"tags":2414,"updated_at":209,"__hash__":2415},"article\u002Farticles\u002Fdelete-untracked-files-git.md","Deleting untracked files from git",{"type":9,"value":2181,"toc":2397},[2182,2186,2189,2275,2278,2283,2287,2293,2299,2308,2312,2321,2337,2343,2346,2360,2369,2373,2379,2385,2391,2394],[28,2183,2185],{"id":2184},"the-problem","The problem:",[12,2187,2188],{},"Have you ever tried to pull down some new changes and come across this error?",[83,2190,2192],{"className":228,"code":2191,"language":230,"meta":88,"style":88},"error: The following untracked working tree files would be overwritten by merge:\n    resources\u002Fviews\u002FuntrackedFolder\u002FuntrackedFile.blade.php\n    resources\u002Fviews\u002FuntrackedFolder\u002FanotherUntrackedFile.blade.php\nPlease move or remove them before you can merge.\nAborting\n",[90,2193,2194,2231,2236,2241,2270],{"__ignoreMap":88},[93,2195,2196,2198,2201,2204,2207,2210,2213,2216,2219,2222,2225,2228],{"class":95,"line":96},[93,2197,238],{"class":237},[93,2199,2200],{"class":244}," The",[93,2202,2203],{"class":244}," following",[93,2205,2206],{"class":244}," untracked",[93,2208,2209],{"class":244}," working",[93,2211,2212],{"class":244}," tree",[93,2214,2215],{"class":244}," files",[93,2217,2218],{"class":244}," would",[93,2220,2221],{"class":244}," be",[93,2223,2224],{"class":244}," overwritten",[93,2226,2227],{"class":244}," by",[93,2229,2230],{"class":244}," merge:\n",[93,2232,2233],{"class":95,"line":103},[93,2234,2235],{"class":237},"    resources\u002Fviews\u002FuntrackedFolder\u002FuntrackedFile.blade.php\n",[93,2237,2238],{"class":95,"line":110},[93,2239,2240],{"class":237},"    resources\u002Fviews\u002FuntrackedFolder\u002FanotherUntrackedFile.blade.php\n",[93,2242,2243,2246,2249,2252,2255,2258,2261,2264,2267],{"class":95,"line":116},[93,2244,2245],{"class":237},"Please",[93,2247,2248],{"class":244}," move",[93,2250,2251],{"class":244}," or",[93,2253,2254],{"class":244}," remove",[93,2256,2257],{"class":244}," them",[93,2259,2260],{"class":244}," before",[93,2262,2263],{"class":244}," you",[93,2265,2266],{"class":244}," can",[93,2268,2269],{"class":244}," merge.\n",[93,2271,2272],{"class":95,"line":121},[93,2273,2274],{"class":237},"Aborting\n",[12,2276,2277],{},"Untracked files huh? Okay, that doesn't sound too difficult. You should be able to run",[12,2279,2280],{},[90,2281,2282],{},"git reset --hard",[1898,2284,2286],{"id":2285},"but-wait","But wait",[12,2288,2289,2290],{},"They are still there! ",[953,2291,2292],{},"What gives !?",[12,2294,2295],{},[443,2296],{"alt":2297,"src":2298},"wait what","https:\u002F\u002Fmedia.giphy.com\u002Fmedia\u002FIMuqnp96sdhyE\u002Fgiphy.gif",[12,2300,2301,2302,2304,2305],{},"The reason is because ",[90,2303,2282],{}," ",[142,2306,2307],{},"only removes files that are already a part of the repo",[28,2309,2311],{"id":2310},"solution","Solution",[12,2313,2314,2315,2320],{},"From the ",[43,2316,2319],{"href":2317,"rel":2318},"https:\u002F\u002Fgit-scm.com\u002Fdocs\u002Fgit-clean",[47],"git docs",", we will find this command:",[83,2322,2324],{"className":228,"code":2323,"language":230,"meta":88,"style":88},"git clean -n\n",[90,2325,2326],{"__ignoreMap":88},[93,2327,2328,2331,2334],{"class":95,"line":96},[93,2329,2330],{"class":237},"git",[93,2332,2333],{"class":244}," clean",[93,2335,2336],{"class":330}," -n\n",[12,2338,2339,2342],{},[90,2340,2341],{},"-n"," this flag will show you what files will be removed.",[12,2344,2345],{},"You should use this flag first to determine what is going to be removed.",[83,2347,2349],{"className":228,"code":2348,"language":230,"meta":88,"style":88},"git clean -f\n",[90,2350,2351],{"__ignoreMap":88},[93,2352,2353,2355,2357],{"class":95,"line":96},[93,2354,2330],{"class":237},[93,2356,2333],{"class":244},[93,2358,2359],{"class":330}," -f\n",[12,2361,2362,2365,2366,1426],{},[90,2363,2364],{},"-f"," this flag means it will delete the files ",[142,2367,2368],{},"permanently",[28,2370,2372],{"id":2371},"other-useful-commands","Other useful commands",[12,2374,2375,2378],{},[90,2376,2377],{},"git clean -fd"," will also delete folders",[12,2380,2381,2384],{},[90,2382,2383],{},"git clean -fX"," removes ignored files",[12,2386,2387,2390],{},[90,2388,2389],{},"git clean -fx"," removes both ignored and non-ignored files",[12,2392,2393],{},"There you go, you should have a clean repository that has the changes committed before.",[191,2395,2396],{},"html pre.shiki code .sKo5S, html code.shiki .sKo5S{--shiki-default:#73D0FF;--shiki-dark:#73D0FF;--shiki-sepia:#73D0FF}html pre.shiki code .sU2D5, html code.shiki .sU2D5{--shiki-default:#D5FF80;--shiki-dark:#D5FF80;--shiki-sepia:#D5FF80}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 .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html pre.shiki code .sLJkx, html code.shiki .sLJkx{--shiki-default:#95E6CB;--shiki-dark:#95E6CB;--shiki-sepia:#95E6CB}",{"title":88,"searchDepth":103,"depth":103,"links":2398},[2399,2400,2401],{"id":2184,"depth":103,"text":2185},{"id":2310,"depth":103,"text":2311},{"id":2371,"depth":103,"text":2372},"2019-09-05","If you want to remove untracked files from your repo, git reset wont work",{"readingTime":2405},{"text":400,"minutes":2406,"time":2407,"words":2408},0.735,44100,147,"\u002Farticles\u002Fdelete-untracked-files-git\u002Fcover.png","\u002Farticles\u002Fdelete-untracked-files-git",{"title":2179,"description":2403},"delete-untracked-files-git","articles\u002Fdelete-untracked-files-git",[2330],"7etqGeh27BGt17oLXaqDB294qT7AAccoeoPCeMiZNoU",{"id":2417,"title":2418,"archived":106,"body":2419,"date":2539,"description":2432,"extension":87,"hide_toc":7,"meta":2540,"navigation":106,"ogImage":209,"path":2545,"published":106,"seo":2546,"slug":2547,"stem":2548,"tags":2549,"updated_at":2551,"__hash__":2552},"article\u002Farticles\u002Fdeadlines-are-important.md","Deadlines are important",{"type":9,"value":2420,"toc":2535},[2421,2427,2436,2439,2446,2452,2461,2464,2473,2492,2501,2516,2521],[12,2422,2423],{},[443,2424],{"alt":2425,"src":2426},"Dead Lines","https:\u002F\u002Fi.imgur.com\u002FcECxC8A.jpg",[16,2428,2429,2433],{},[856,2430,2432],{"id":2431},"the-ultimate-inspiration-is-the-deadline","The ultimate inspiration is the deadline.",[12,2434,2435],{},"-Nolan Bushnell, Atari",[12,2437,2438],{},"When I think of deadlines, I think of late nights staying up working on school essays the night before it was due. Me and deadlines have always had a discomforting relationship. I was a bit of a slacker and I would always wait until the last moment to get something done. But what if deadlines are actually very useful, especially for an independent game developer?",[12,2440,2441,2442,2445],{},"One of the major appeals of indie game development is that you don't have anyone to answer to. This is the best part of being independent. But this is a double-edged sword. As we develop a game, we may start to get a lot of \"",[953,2443,2444],{},"I will need to work on that later\""," moments. Perhaps, we don't feel comfortable writing a new animation system for our game yet. Or what we need to work on isn't very fun to work on. It is very easy to get sucked into working on fun and interesting features only. It can get so bad, that we create new features to add instead of working on what needs done. So we just keep pushing back the boring stuff like a school assignment on a friday night. Until one day, we need to get it done and it is so overwhelming that we start to lose interest in the project.",[1898,2447,2449],{"id":2448},"does-this-sound-like-you-at-all",[142,2450,2451],{},"Does this sound like you at all?",[12,2453,2454,2455,2460],{},"In the game industry, deadlines are not always seen as a good thing. Larger video game companies often have very strict deadlines and will force their workers into crunch time to meet them. ",[43,2456,2459],{"href":2457,"rel":2458},"https:\u002F\u002Fwww.theguardian.com\u002Ftechnology\u002F2015\u002Ffeb\u002F18\u002Fcrunched-games-industry-exploiting-workforce-ea-spouse-software",[47],"Video game companies ruining lives with crunch time is still a very real thing."," Crunch is what happens when smaller deadlines are not met. It forces developers to do a lot of work near the end, instead of evenly distributing it. This is usually the result of poor time management. By simply using a system of smaller deadlines instead of one hard deadline, work can be done without the need for crunch. It is like your teachers tell you, write a little bit of your essay every day instead of waiting until the last few days. When you work for yourself, you have to answer to yourself.",[12,2462,2463],{},"The truth is, deadlines are very useful. It requires us to manage our time and resources to get a task done. Feature creep can be a problem if not managed. By placing a deadline on something, you learn to manage your time better. It is a promise you made to yourself to get something done. A deadline may be exactly what is needed if you feel that your game has not made much progress.",[16,2465,2466,2470],{},[856,2467,2469],{"id":2468},"deadlines-refine-the-mind-they-remove-variables-like-exotic-materials-and-processes-that-take-too-long-the-closer-the-deadline-the-more-likely-youll-start-thinking-waaay-outside-the-box","Deadlines refine the mind. They remove variables like exotic materials and processes that take too long. The closer the deadline, the more likely you'll start thinking waaay outside the box.",[12,2471,2472],{},"Adam Savage, Mythbusters",[12,2474,2475,2476,2481,2482,2487,2488,2491],{},"Last month I started using a program called ",[43,2477,2480],{"href":2478,"rel":2479},"https:\u002F\u002Fhacknplan.com\u002F",[47],"HacknPlan",". It is planning tool web application that helps game developers manage their tasks. It is a bit similar to ",[43,2483,2486],{"href":2484,"rel":2485},"https:\u002F\u002Ftrello.com",[47],"Trello",". But it is more engineered toward game developers and comes with many useful out of the box features for them. One feature that has improved my workflow is ",[953,2489,2490],{},"milestones",". A milestone is a set of tasks you want to get done by a certain date. I sat down one day and just laid out all of the features I wanted to get done in the next month. It turned out to be successful and I worked tirelessly to crank out those extra features before the milestone ended. It felt like I was really making progress by completing smaller tasks. Anything that may take too long, I push to the next month and raised the priority. I would work the highest priority tasks first then move down to lower priority tasks. So even if I missed the deadline for a feature, I would have to get it done before I could work on the other features. By splitting up what I did into tasks, it was easier to see if an idea I came up with would work with my vision of the game.",[12,2493,2494,2498],{},[443,2495],{"alt":2496,"src":2497},"My completed tasks","https:\u002F\u002Fi.imgur.com\u002F2qgfXNf.png",[953,2499,2500],{},"Working a full-time job did not leave me a lot of time for tasks, but I got most of them done",[12,2502,2503,2504,2507,2508,2511,2512,2515],{},"So this is my challenge to you. If you are having issues with getting things done, If you find yourself abandoning projects because you are overwhelmed, or if your game still does not have its main mechanic implemented, then try a ",[953,2505,2506],{},"deadline",". Use a website like ",[43,2509,2480],{"href":2478,"rel":2510},[47],", ",[43,2513,2486],{"href":2484,"rel":2514},[47],", or even just a notepad and arrange your tasks you want to get done this month. Then break it down to what you want to get done each week. Stick to this system and you will see results.",[12,2517,2518],{},[142,2519,2520],{},"Treat your time and skills like they are your business.",[12,2522,2523,2528,2529,2534],{},[43,2524,2527],{"href":2525,"rel":2526},"https:\u002F\u002Fwww.ted.com\u002Ftalks\u002Ftim_urban_inside_the_mind_of_a_master_procrastinator",[47],"Here is a great TED talk on this subject."," Thanks to ",[43,2530,2533],{"href":2531,"rel":2532},"https:\u002F\u002Fwww.reddit.com\u002Fuser\u002FOoozuz",[47],"Ooozuz"," for recommending it.",{"title":88,"searchDepth":103,"depth":103,"links":2536},[2537,2538],{"id":2431,"depth":110,"text":2432},{"id":2468,"depth":110,"text":2469},"2017-03-07",{"readingTime":2541},{"text":2055,"minutes":2542,"time":2543,"words":2544},4.075,244500,815,"\u002Farticles\u002Fdeadlines-are-important",{"title":2418,"description":2432},"deadlines-are-important","articles\u002Fdeadlines-are-important",[2550,409],"gamedev","2020-08-13","duQh3yHh8kgcMXosWWsEGFa8f8vbm_69vmHEf2kjG0g",[2554],{"id":2178,"title":2179,"archived":7,"body":2555,"date":2402,"description":2403,"extension":87,"hide_toc":7,"meta":2711,"navigation":106,"ogImage":2409,"path":2410,"published":106,"seo":2713,"slug":2412,"stem":2413,"tags":2714,"updated_at":209,"__hash__":2415},{"type":9,"value":2556,"toc":2706},[2557,2559,2561,2623,2625,2629,2631,2635,2639,2645,2647,2652,2664,2668,2670,2682,2688,2690,2694,2698,2702,2704],[28,2558,2185],{"id":2184},[12,2560,2188],{},[83,2562,2563],{"className":228,"code":2191,"language":230,"meta":88,"style":88},[90,2564,2565,2591,2595,2599,2619],{"__ignoreMap":88},[93,2566,2567,2569,2571,2573,2575,2577,2579,2581,2583,2585,2587,2589],{"class":95,"line":96},[93,2568,238],{"class":237},[93,2570,2200],{"class":244},[93,2572,2203],{"class":244},[93,2574,2206],{"class":244},[93,2576,2209],{"class":244},[93,2578,2212],{"class":244},[93,2580,2215],{"class":244},[93,2582,2218],{"class":244},[93,2584,2221],{"class":244},[93,2586,2224],{"class":244},[93,2588,2227],{"class":244},[93,2590,2230],{"class":244},[93,2592,2593],{"class":95,"line":103},[93,2594,2235],{"class":237},[93,2596,2597],{"class":95,"line":110},[93,2598,2240],{"class":237},[93,2600,2601,2603,2605,2607,2609,2611,2613,2615,2617],{"class":95,"line":116},[93,2602,2245],{"class":237},[93,2604,2248],{"class":244},[93,2606,2251],{"class":244},[93,2608,2254],{"class":244},[93,2610,2257],{"class":244},[93,2612,2260],{"class":244},[93,2614,2263],{"class":244},[93,2616,2266],{"class":244},[93,2618,2269],{"class":244},[93,2620,2621],{"class":95,"line":121},[93,2622,2274],{"class":237},[12,2624,2277],{},[12,2626,2627],{},[90,2628,2282],{},[1898,2630,2286],{"id":2285},[12,2632,2289,2633],{},[953,2634,2292],{},[12,2636,2637],{},[443,2638],{"alt":2297,"src":2298},[12,2640,2301,2641,2304,2643],{},[90,2642,2282],{},[142,2644,2307],{},[28,2646,2311],{"id":2310},[12,2648,2314,2649,2320],{},[43,2650,2319],{"href":2317,"rel":2651},[47],[83,2653,2654],{"className":228,"code":2323,"language":230,"meta":88,"style":88},[90,2655,2656],{"__ignoreMap":88},[93,2657,2658,2660,2662],{"class":95,"line":96},[93,2659,2330],{"class":237},[93,2661,2333],{"class":244},[93,2663,2336],{"class":330},[12,2665,2666,2342],{},[90,2667,2341],{},[12,2669,2345],{},[83,2671,2672],{"className":228,"code":2348,"language":230,"meta":88,"style":88},[90,2673,2674],{"__ignoreMap":88},[93,2675,2676,2678,2680],{"class":95,"line":96},[93,2677,2330],{"class":237},[93,2679,2333],{"class":244},[93,2681,2359],{"class":330},[12,2683,2684,2365,2686,1426],{},[90,2685,2364],{},[142,2687,2368],{},[28,2689,2372],{"id":2371},[12,2691,2692,2378],{},[90,2693,2377],{},[12,2695,2696,2384],{},[90,2697,2383],{},[12,2699,2700,2390],{},[90,2701,2389],{},[12,2703,2393],{},[191,2705,2396],{},{"title":88,"searchDepth":103,"depth":103,"links":2707},[2708,2709,2710],{"id":2184,"depth":103,"text":2185},{"id":2310,"depth":103,"text":2311},{"id":2371,"depth":103,"text":2372},{"readingTime":2712},{"text":400,"minutes":2406,"time":2407,"words":2408},{"title":2179,"description":2403},[2330],1792645180366]