[{"data":1,"prerenderedAt":12213},["ShallowReactive",2],{"blog-articles":3},[4,481,1062,1778,4747,5168,10811,11094,11217,11597,11971],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":10,"img":11,"alt":12,"author":13,"tags":16,"date":20,"body":21,"_type":475,"_id":476,"_source":477,"_file":478,"_stem":479,"_extension":480},"\u002Farticles\u002Fsong-lyrics","articles",false,"","Favourite Song Lyrics","Songs are good until you learn the lyrics - in which they become great","https:\u002F\u002Ft3.ftcdn.net\u002Fjpg\u002F02\u002F74\u002F25\u002F68\u002F360_F_274256881_WSeCn3Iw8yFIU8T6z71aDjXHfAdtc5iy.jpg","Music",{"name":14,"img":15},"Zhehai Zhang","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1533636721434-0e2d61030955?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",[17,18,19],"music","lyrics","song","2023-10-10",{"type":22,"children":23,"toc":457},"root",[24,29,36,41,46,51,56,61,75,99,109,132,142,155,165,183,193,201,211,244,254,262,272,304,314,322,332,355,365,373,383,406,416,439,449],{"type":25,"tag":26,"props":27,"children":28},"element","style",{},[],{"type":25,"tag":30,"props":31,"children":32},"p",{},[33],{"type":34,"value":35},"text","Have you ever listened to a song and thought, \"Wow, I really like this song!\".\nYou might like it for the flow, the instruments, the beat, the lyrics, or even the artist.\nRegardless of why you found the song interesting,\nit eventually makes its way into your playlist where you listen to it quite often.",{"type":25,"tag":30,"props":37,"children":38},{},[39],{"type":34,"value":40},"One thing I found incredibly interesting after talking to people about their music tastes is the way they listen to music. From everyone I've talked to, there are two types of people:",{"type":25,"tag":30,"props":42,"children":43},{},[44],{"type":34,"value":45},"People who listen to song lyrics, and those who don't. Coming from the side that listens to song lyrics, I find it important to be able to at least understand some parts of the song. Knowing what the artist is singing about adds flavour to a dish, similar to how Michelin Star restaurants give detail into the food they serve to you. Even if the lyrics have no particular meaning to me, I find comfort in being able to sing to parts of the song without butchering it up.",{"type":25,"tag":30,"props":47,"children":48},{},[49],{"type":34,"value":50},"I also do see the other side, knowing the lyrics does not diminish the value of music. Some songs are great and even if the lyrics are repetitive or \"bad\", it doesn't matter because it doesn't really matter in the end.",{"type":25,"tag":30,"props":52,"children":53},{},[54],{"type":34,"value":55},"Anyways, I'm writing this post becuase I want to record song lyrics that I find lyrically and musically amazing. Something about the way it's presented resonates with me - and I would like to share it with my readers. Hope you enjoy!",{"type":25,"tag":30,"props":57,"children":58},{},[59],{"type":34,"value":60},"In no particular order whatesover:",{"type":25,"tag":62,"props":63,"children":65},"h3",{"id":64},"年少有為-ronghao-li",[66,73],{"type":25,"tag":67,"props":68,"children":72},"a",{"href":69,"ariaHidden":70,"tabIndex":71},"#%E5%B9%B4%E5%B0%91%E6%9C%89%E7%82%BA---ronghao-li","true",-1,[],{"type":34,"value":74},"年少有為 - Ronghao Li",{"type":25,"tag":76,"props":77,"children":78},"blockquote",{},[79,84,89,94],{"type":25,"tag":30,"props":80,"children":81},{},[82],{"type":34,"value":83},"假如我年少有為不自卑",{"type":25,"tag":30,"props":85,"children":86},{},[87],{"type":34,"value":88},"懂得什麼是珍貴",{"type":25,"tag":30,"props":90,"children":91},{},[92],{"type":34,"value":93},"那些美夢",{"type":25,"tag":30,"props":95,"children":96},{},[97],{"type":34,"value":98},"沒给妳 我一生有愧",{"type":25,"tag":62,"props":100,"children":102},{"id":101},"smile-arden-jones",[103,107],{"type":25,"tag":67,"props":104,"children":106},{"href":105,"ariaHidden":70,"tabIndex":71},"#smile---arden-jones",[],{"type":34,"value":108},"SMILE - Arden Jones",{"type":25,"tag":76,"props":110,"children":111},{},[112,117,122,127],{"type":25,"tag":30,"props":113,"children":114},{},[115],{"type":34,"value":116},"I swear I been walking for miles",{"type":25,"tag":30,"props":118,"children":119},{},[120],{"type":34,"value":121},"If it was real life I'd be freezing",{"type":25,"tag":30,"props":123,"children":124},{},[125],{"type":34,"value":126},"I said if I'ma give up, I'ma do it in style",{"type":25,"tag":30,"props":128,"children":129},{},[130],{"type":34,"value":131},"But so far I haven't found a reason",{"type":25,"tag":62,"props":133,"children":135},{"id":134},"纸上风雅-零一九零贰",[136,140],{"type":25,"tag":67,"props":137,"children":139},{"href":138,"ariaHidden":70,"tabIndex":71},"#%E7%BA%B8%E4%B8%8A%E9%A3%8E%E9%9B%85---%E9%9B%B6%E4%B8%80%E4%B9%9D%E9%9B%B6%E8%B4%B0",[],{"type":34,"value":141},"纸上风雅 - 零一九零贰",{"type":25,"tag":76,"props":143,"children":144},{},[145,150],{"type":25,"tag":30,"props":146,"children":147},{},[148],{"type":34,"value":149},"我提笔蘸风雅",{"type":25,"tag":30,"props":151,"children":152},{},[153],{"type":34,"value":154},"落笔江山如画",{"type":25,"tag":62,"props":156,"children":158},{"id":157},"luv-me-a-little-illenium-nina-nesbitt",[159,163],{"type":25,"tag":67,"props":160,"children":162},{"href":161,"ariaHidden":70,"tabIndex":71},"#luv-me-a-little---illenium-nina-nesbitt",[],{"type":34,"value":164},"Luv me a Little - ILLENIUM, Nina Nesbitt",{"type":25,"tag":76,"props":166,"children":167},{},[168,173,178],{"type":25,"tag":30,"props":169,"children":170},{},[171],{"type":34,"value":172},"So please just say somethin' different",{"type":25,"tag":30,"props":174,"children":175},{},[176],{"type":34,"value":177},"Say, \"We're not finished yet\"",{"type":25,"tag":30,"props":179,"children":180},{},[181],{"type":34,"value":182},"Tell me I'm weighin' on your mind",{"type":25,"tag":62,"props":184,"children":186},{"id":185},"oz-yama",[187,191],{"type":25,"tag":67,"props":188,"children":190},{"href":189,"ariaHidden":70,"tabIndex":71},"#oz---yama",[],{"type":34,"value":192},"Oz. - Yama",{"type":25,"tag":76,"props":194,"children":195},{},[196],{"type":25,"tag":30,"props":197,"children":198},{},[199],{"type":34,"value":200},"ひとりぼっちにはさせないよ",{"type":25,"tag":62,"props":202,"children":204},{"id":203},"mon-eldorado-yannick-noah",[205,209],{"type":25,"tag":67,"props":206,"children":208},{"href":207,"ariaHidden":70,"tabIndex":71},"#mon-eldorado---yannick-noah",[],{"type":34,"value":210},"Mon Eldorado - Yannick Noah",{"type":25,"tag":76,"props":212,"children":213},{},[214,219,224,229,234,239],{"type":25,"tag":30,"props":215,"children":216},{},[217],{"type":34,"value":218},"Du soleil comme s'il en pleuvait",{"type":25,"tag":30,"props":220,"children":221},{},[222],{"type":34,"value":223},"Le cœur en été",{"type":25,"tag":30,"props":225,"children":226},{},[227],{"type":34,"value":228},"Et la vie avec toi",{"type":25,"tag":30,"props":230,"children":231},{},[232],{"type":34,"value":233},"Du soleil, mon eldorado",{"type":25,"tag":30,"props":235,"children":236},{},[237],{"type":34,"value":238},"Au creux de ta peau",{"type":25,"tag":30,"props":240,"children":241},{},[242],{"type":34,"value":243},"Et la vie coulera comme ça",{"type":25,"tag":62,"props":245,"children":247},{"id":246},"dlwlrma-iu",[248,252],{"type":25,"tag":67,"props":249,"children":251},{"href":250,"ariaHidden":70,"tabIndex":71},"#dlwlrma---iu",[],{"type":34,"value":253},"dlwlrma - IU",{"type":25,"tag":76,"props":255,"children":256},{},[257],{"type":25,"tag":30,"props":258,"children":259},{},[260],{"type":34,"value":261},"이 하루 이 지금 우리 눈부셔 아름다워",{"type":25,"tag":62,"props":263,"children":265},{"id":264},"april-showers-proleter",[266,270],{"type":25,"tag":67,"props":267,"children":269},{"href":268,"ariaHidden":70,"tabIndex":71},"#april-showers---proleter",[],{"type":34,"value":271},"April Showers - Proleter",{"type":25,"tag":76,"props":273,"children":274},{},[275,280,285,290,294,299],{"type":25,"tag":30,"props":276,"children":277},{},[278],{"type":34,"value":279},"March winds and April showers",{"type":25,"tag":30,"props":281,"children":282},{},[283],{"type":34,"value":284},"Make way for sweet May flowers",{"type":25,"tag":30,"props":286,"children":287},{},[288],{"type":34,"value":289},"And then comes June, a moon and you",{"type":25,"tag":30,"props":291,"children":292},{},[293],{"type":34,"value":279},{"type":25,"tag":30,"props":295,"children":296},{},[297],{"type":34,"value":298},"Romance will soon be ours",{"type":25,"tag":30,"props":300,"children":301},{},[302],{"type":34,"value":303},"An outdoor paradise for two",{"type":25,"tag":62,"props":305,"children":307},{"id":306},"backburner-niki",[308,312],{"type":25,"tag":67,"props":309,"children":311},{"href":310,"ariaHidden":70,"tabIndex":71},"#backburner---niki",[],{"type":34,"value":313},"Backburner - NIKI",{"type":25,"tag":76,"props":315,"children":316},{},[317],{"type":25,"tag":30,"props":318,"children":319},{},[320],{"type":34,"value":321},"Maybe life's less romantic when I don't wanna die",{"type":25,"tag":62,"props":323,"children":325},{"id":324},"蘭亭序-jay-chou",[326,330],{"type":25,"tag":67,"props":327,"children":329},{"href":328,"ariaHidden":70,"tabIndex":71},"#%E8%98%AD%E4%BA%AD%E5%BA%8F---jay-chou",[],{"type":34,"value":331},"蘭亭序 - Jay Chou",{"type":25,"tag":76,"props":333,"children":334},{},[335,340,345,350],{"type":25,"tag":30,"props":336,"children":337},{},[338],{"type":34,"value":339},"无关风月 我题序等你回",{"type":25,"tag":30,"props":341,"children":342},{},[343],{"type":34,"value":344},"悬笔一绝 那岸边浪千叠",{"type":25,"tag":30,"props":346,"children":347},{},[348],{"type":34,"value":349},"情字何解 怎落笔都不对",{"type":25,"tag":30,"props":351,"children":352},{},[353],{"type":34,"value":354},"而我独缺 你一生的了解",{"type":25,"tag":62,"props":356,"children":358},{"id":357},"love-story-bol4",[359,363],{"type":25,"tag":67,"props":360,"children":362},{"href":361,"ariaHidden":70,"tabIndex":71},"#love-story---bol4",[],{"type":34,"value":364},"Love Story - BOL4",{"type":25,"tag":76,"props":366,"children":367},{},[368],{"type":25,"tag":30,"props":369,"children":370},{},[371],{"type":34,"value":372},"밤하늘의 별이 쏟아질",{"type":25,"tag":62,"props":374,"children":376},{"id":375},"elle-me-dit-mika",[377,381],{"type":25,"tag":67,"props":378,"children":380},{"href":379,"ariaHidden":70,"tabIndex":71},"#elle-me-dit---mika",[],{"type":34,"value":382},"Elle me dit - Mika",{"type":25,"tag":76,"props":384,"children":385},{},[386,391,396,401],{"type":25,"tag":30,"props":387,"children":388},{},[389],{"type":34,"value":390},"Elle me dit c'est ta vie",{"type":25,"tag":30,"props":392,"children":393},{},[394],{"type":34,"value":395},"Fais c'que tu veux, tant pis",{"type":25,"tag":30,"props":397,"children":398},{},[399],{"type":34,"value":400},"Un jour tu comprendras",{"type":25,"tag":30,"props":402,"children":403},{},[404],{"type":34,"value":405},"Un jour tu t'en voudras",{"type":25,"tag":62,"props":407,"children":409},{"id":408},"sdp-interlude-extended-travis-scott",[410,414],{"type":25,"tag":67,"props":411,"children":413},{"href":412,"ariaHidden":70,"tabIndex":71},"#sdp-interlude-extended---travis-scott",[],{"type":34,"value":415},"SDP Interlude (Extended) - Travis Scott",{"type":25,"tag":76,"props":417,"children":418},{},[419,424,429,434],{"type":25,"tag":30,"props":420,"children":421},{},[422],{"type":34,"value":423},"You taste good like soul food",{"type":25,"tag":30,"props":425,"children":426},{},[427],{"type":34,"value":428},"Parked up outside in the old school",{"type":25,"tag":30,"props":430,"children":431},{},[432],{"type":34,"value":433},"The new me back with the old you",{"type":25,"tag":30,"props":435,"children":436},{},[437],{"type":34,"value":438},"A dog always find his way back home and it's so true",{"type":25,"tag":62,"props":440,"children":442},{"id":441},"drown-milet",[443,447],{"type":25,"tag":67,"props":444,"children":446},{"href":445,"ariaHidden":70,"tabIndex":71},"#drown---milet",[],{"type":34,"value":448},"Drown - Milet",{"type":25,"tag":76,"props":450,"children":451},{},[452],{"type":25,"tag":30,"props":453,"children":454},{},[455],{"type":34,"value":456},"失うものはもう何もない",{"title":8,"searchDepth":458,"depth":458,"links":459},2,[460,462,463,464,465,466,467,468,469,470,471,472,473,474],{"id":64,"depth":461,"text":74},3,{"id":101,"depth":461,"text":108},{"id":134,"depth":461,"text":141},{"id":157,"depth":461,"text":164},{"id":185,"depth":461,"text":192},{"id":203,"depth":461,"text":210},{"id":246,"depth":461,"text":253},{"id":264,"depth":461,"text":271},{"id":306,"depth":461,"text":313},{"id":324,"depth":461,"text":331},{"id":357,"depth":461,"text":364},{"id":375,"depth":461,"text":382},{"id":408,"depth":461,"text":415},{"id":441,"depth":461,"text":448},"markdown","content:articles:song-lyrics.md","content","articles\u002Fsong-lyrics.md","articles\u002Fsong-lyrics","md",{"_path":482,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":483,"description":484,"img":485,"alt":486,"author":487,"tags":488,"date":494,"body":495,"_type":475,"_id":1059,"_source":477,"_file":1060,"_stem":1061,"_extension":480},"\u002Farticles\u002Fserver-tips","VPS Tips and Tricks","Some tips that will improve your experience in setting up a vps","https:\u002F\u002Fwww.global-dms.com\u002Fwp-content\u002Fuploads\u002F2022\u002F04\u002Fvps-hosting-534x321.png","VPS",{"name":14,"img":15},[489,490,491,492,493],"vps","github","ssh","permissions","web","2022-01-29",{"type":22,"children":496,"toc":1047},[497,500,505,516,530,623,636,646,657,667,677,704,738,748,794,804,809,833,842,847,917,930,951,959,980,985,995,1008,1016,1029,1042],{"type":25,"tag":26,"props":498,"children":499},{},[],{"type":25,"tag":30,"props":501,"children":502},{},[503],{"type":34,"value":504},"I realized that sometimes my brain isn't large enough to contain all my knowledge.\nSo I decided to keep a list of some useful things I keep using over and over again.",{"type":25,"tag":506,"props":507,"children":509},"h2",{"id":508},"varwww",[510,514],{"type":25,"tag":67,"props":511,"children":513},{"href":512,"ariaHidden":70,"tabIndex":71},"#varwww",[],{"type":34,"value":515},"\u002Fvar\u002Fwww",{"type":25,"tag":30,"props":517,"children":518},{},[519,521,528],{"type":34,"value":520},"You do not want to make the whole folder accessible since\nthose aren't good practices. The best way is to use the ",{"type":25,"tag":522,"props":523,"children":525},"code",{"className":524},[],[526],{"type":34,"value":527},"www-data",{"type":34,"value":529}," group.",{"type":25,"tag":531,"props":532,"children":536},"pre",{"code":533,"language":534,"meta":8,"className":535,"style":8},"sudo mkdir ${folder name}\nsudo chown -R ${user}:www-data ${folder name}\n","bash","language-bash shiki shiki-themes material-theme-palenight",[537],{"type":25,"tag":522,"props":538,"children":539},{"__ignoreMap":8},[540,575],{"type":25,"tag":541,"props":542,"children":545},"span",{"class":543,"line":544},"line",1,[546,552,558,564,570],{"type":25,"tag":541,"props":547,"children":549},{"style":548},"--shiki-default:#FFCB6B",[550],{"type":34,"value":551},"sudo",{"type":25,"tag":541,"props":553,"children":555},{"style":554},"--shiki-default:#C3E88D",[556],{"type":34,"value":557}," mkdir",{"type":25,"tag":541,"props":559,"children":561},{"style":560},"--shiki-default:#89DDFF",[562],{"type":34,"value":563}," ${",{"type":25,"tag":541,"props":565,"children":567},{"style":566},"--shiki-default:#BABED8",[568],{"type":34,"value":569},"folder name",{"type":25,"tag":541,"props":571,"children":572},{"style":560},[573],{"type":34,"value":574},"}\n",{"type":25,"tag":541,"props":576,"children":577},{"class":543,"line":458},[578,582,587,592,596,601,606,611,615,619],{"type":25,"tag":541,"props":579,"children":580},{"style":548},[581],{"type":34,"value":551},{"type":25,"tag":541,"props":583,"children":584},{"style":554},[585],{"type":34,"value":586}," chown",{"type":25,"tag":541,"props":588,"children":589},{"style":554},[590],{"type":34,"value":591}," -R",{"type":25,"tag":541,"props":593,"children":594},{"style":560},[595],{"type":34,"value":563},{"type":25,"tag":541,"props":597,"children":598},{"style":566},[599],{"type":34,"value":600},"user",{"type":25,"tag":541,"props":602,"children":603},{"style":560},[604],{"type":34,"value":605},"}",{"type":25,"tag":541,"props":607,"children":608},{"style":554},[609],{"type":34,"value":610},":www-data",{"type":25,"tag":541,"props":612,"children":613},{"style":560},[614],{"type":34,"value":563},{"type":25,"tag":541,"props":616,"children":617},{"style":566},[618],{"type":34,"value":569},{"type":25,"tag":541,"props":620,"children":621},{"style":560},[622],{"type":34,"value":574},{"type":25,"tag":30,"props":624,"children":625},{},[626,628,634],{"type":34,"value":627},"Now I can use ",{"type":25,"tag":522,"props":629,"children":631},{"className":630},[],[632],{"type":34,"value":633},"git clone",{"type":34,"value":635}," without using sudo.",{"type":25,"tag":506,"props":637,"children":639},{"id":638},"pm2",[640,644],{"type":25,"tag":67,"props":641,"children":643},{"href":642,"ariaHidden":70,"tabIndex":71},"#pm2",[],{"type":34,"value":645},"PM2",{"type":25,"tag":30,"props":647,"children":648},{},[649,651],{"type":34,"value":650},"For Node.js apps, simply do ",{"type":25,"tag":522,"props":652,"children":654},{"className":653},[],[655],{"type":34,"value":656},"pm2 start name.js --name \"Name\"",{"type":25,"tag":506,"props":658,"children":660},{"id":659},"nginx",[661,665],{"type":25,"tag":67,"props":662,"children":664},{"href":663,"ariaHidden":70,"tabIndex":71},"#nginx",[],{"type":34,"value":666},"Nginx",{"type":25,"tag":62,"props":668,"children":670},{"id":669},"making-configs",[671,675],{"type":25,"tag":67,"props":672,"children":674},{"href":673,"ariaHidden":70,"tabIndex":71},"#making-configs",[],{"type":34,"value":676},"Making configs",{"type":25,"tag":30,"props":678,"children":679},{},[680,682,688,690,696,698],{"type":34,"value":681},"Good practice is to make the configs in ",{"type":25,"tag":522,"props":683,"children":685},{"className":684},[],[686],{"type":34,"value":687},"sites-available",{"type":34,"value":689}," and\ncreate a symlink to ",{"type":25,"tag":522,"props":691,"children":693},{"className":692},[],[694],{"type":34,"value":695},"sites-enabled",{"type":34,"value":697},". ",{"type":25,"tag":699,"props":700,"children":701},"strong",{},[702],{"type":34,"value":703},"Make sure it is the absolute path",{"type":25,"tag":531,"props":705,"children":707},{"code":706,"language":534,"meta":8,"className":535,"style":8},"sudo ln -s source_file link_file\n",[708],{"type":25,"tag":522,"props":709,"children":710},{"__ignoreMap":8},[711],{"type":25,"tag":541,"props":712,"children":713},{"class":543,"line":544},[714,718,723,728,733],{"type":25,"tag":541,"props":715,"children":716},{"style":548},[717],{"type":34,"value":551},{"type":25,"tag":541,"props":719,"children":720},{"style":554},[721],{"type":34,"value":722}," ln",{"type":25,"tag":541,"props":724,"children":725},{"style":554},[726],{"type":34,"value":727}," -s",{"type":25,"tag":541,"props":729,"children":730},{"style":554},[731],{"type":34,"value":732}," source_file",{"type":25,"tag":541,"props":734,"children":735},{"style":554},[736],{"type":34,"value":737}," link_file\n",{"type":25,"tag":62,"props":739,"children":741},{"id":740},"syntax-check-and-reload",[742,746],{"type":25,"tag":67,"props":743,"children":745},{"href":744,"ariaHidden":70,"tabIndex":71},"#syntax-check-and-reload",[],{"type":34,"value":747},"Syntax check and reload",{"type":25,"tag":531,"props":749,"children":751},{"code":750,"language":534,"meta":8,"className":535,"style":8},"sudo nginx -t\nsudo systemctl reload nginx\n",[752],{"type":25,"tag":522,"props":753,"children":754},{"__ignoreMap":8},[755,772],{"type":25,"tag":541,"props":756,"children":757},{"class":543,"line":544},[758,762,767],{"type":25,"tag":541,"props":759,"children":760},{"style":548},[761],{"type":34,"value":551},{"type":25,"tag":541,"props":763,"children":764},{"style":554},[765],{"type":34,"value":766}," nginx",{"type":25,"tag":541,"props":768,"children":769},{"style":554},[770],{"type":34,"value":771}," -t\n",{"type":25,"tag":541,"props":773,"children":774},{"class":543,"line":458},[775,779,784,789],{"type":25,"tag":541,"props":776,"children":777},{"style":548},[778],{"type":34,"value":551},{"type":25,"tag":541,"props":780,"children":781},{"style":554},[782],{"type":34,"value":783}," systemctl",{"type":25,"tag":541,"props":785,"children":786},{"style":554},[787],{"type":34,"value":788}," reload",{"type":25,"tag":541,"props":790,"children":791},{"style":554},[792],{"type":34,"value":793}," nginx\n",{"type":25,"tag":506,"props":795,"children":797},{"id":796},"docker",[798,802],{"type":25,"tag":67,"props":799,"children":801},{"href":800,"ariaHidden":70,"tabIndex":71},"#docker",[],{"type":34,"value":803},"Docker",{"type":25,"tag":30,"props":805,"children":806},{},[807],{"type":34,"value":808},"For going into docker files with bash, do",{"type":25,"tag":531,"props":810,"children":812},{"code":811,"language":534,"meta":8,"className":535,"style":8},"docker exec-it [container] \u002Fbin\u002Fbash\n",[813],{"type":25,"tag":522,"props":814,"children":815},{"__ignoreMap":8},[816],{"type":25,"tag":541,"props":817,"children":818},{"class":543,"line":544},[819,823,828],{"type":25,"tag":541,"props":820,"children":821},{"style":548},[822],{"type":34,"value":796},{"type":25,"tag":541,"props":824,"children":825},{"style":554},[826],{"type":34,"value":827}," exec-it",{"type":25,"tag":541,"props":829,"children":830},{"style":566},[831],{"type":34,"value":832}," [container] \u002Fbin\u002Fbash\n",{"type":25,"tag":506,"props":834,"children":835},{"id":491},[836,840],{"type":25,"tag":67,"props":837,"children":839},{"href":838,"ariaHidden":70,"tabIndex":71},"#ssh",[],{"type":34,"value":841},"SSH",{"type":25,"tag":30,"props":843,"children":844},{},[845],{"type":34,"value":846},"SSH keys are a useful way to prevent single sign in passwords that\ncould be predicted.\nOn your local machine:",{"type":25,"tag":531,"props":848,"children":850},{"code":849,"language":534,"meta":8,"className":535,"style":8},"cd ~\u002F.ssh\nssh-keygen -t rsa -b 4096 -C \"your@email.here\"\n",[851],{"type":25,"tag":522,"props":852,"children":853},{"__ignoreMap":8},[854,868],{"type":25,"tag":541,"props":855,"children":856},{"class":543,"line":544},[857,863],{"type":25,"tag":541,"props":858,"children":860},{"style":859},"--shiki-default:#82AAFF",[861],{"type":34,"value":862},"cd",{"type":25,"tag":541,"props":864,"children":865},{"style":554},[866],{"type":34,"value":867}," ~\u002F.ssh\n",{"type":25,"tag":541,"props":869,"children":870},{"class":543,"line":458},[871,876,881,886,891,897,902,907,912],{"type":25,"tag":541,"props":872,"children":873},{"style":548},[874],{"type":34,"value":875},"ssh-keygen",{"type":25,"tag":541,"props":877,"children":878},{"style":554},[879],{"type":34,"value":880}," -t",{"type":25,"tag":541,"props":882,"children":883},{"style":554},[884],{"type":34,"value":885}," rsa",{"type":25,"tag":541,"props":887,"children":888},{"style":554},[889],{"type":34,"value":890}," -b",{"type":25,"tag":541,"props":892,"children":894},{"style":893},"--shiki-default:#F78C6C",[895],{"type":34,"value":896}," 4096",{"type":25,"tag":541,"props":898,"children":899},{"style":554},[900],{"type":34,"value":901}," -C",{"type":25,"tag":541,"props":903,"children":904},{"style":560},[905],{"type":34,"value":906}," \"",{"type":25,"tag":541,"props":908,"children":909},{"style":554},[910],{"type":34,"value":911},"your@email.here",{"type":25,"tag":541,"props":913,"children":914},{"style":560},[915],{"type":34,"value":916},"\"\n",{"type":25,"tag":30,"props":918,"children":919},{},[920,922,928],{"type":34,"value":921},"There's no need to input a password, although you can choose to name your key something different. Note that the command above generates 2 files: a file with the name you created, and another file with the name you created plus ",{"type":25,"tag":522,"props":923,"children":925},{"className":924},[],[926],{"type":34,"value":927},".pub",{"type":34,"value":929},". You can think of a public key as the lock to your door - you need to copy that to your server, and the other file is known as the private key, the key you need to safeguard on your local machine.",{"type":25,"tag":30,"props":931,"children":932},{},[933,935,941,943,949],{"type":34,"value":934},"To make it so that the server knows how to use your public key, on your server you need to copy it to ",{"type":25,"tag":522,"props":936,"children":938},{"className":937},[],[939],{"type":34,"value":940},"~\u002F.ssh\u002Fauthorized_keys",{"type":34,"value":942},". You could just ",{"type":25,"tag":522,"props":944,"children":946},{"className":945},[],[947],{"type":34,"value":948},"scp",{"type":34,"value":950}," or copy and paste the contents in directly, but the easiest way is to use an in built command:",{"type":25,"tag":531,"props":952,"children":954},{"code":953},"ssh-copy-id -i ~\u002F.ssh\u002Fname_of_file.pub user@host\n",[955],{"type":25,"tag":522,"props":956,"children":957},{"__ignoreMap":8},[958],{"type":34,"value":953},{"type":25,"tag":30,"props":960,"children":961},{},[962,964,970,972,978],{"type":34,"value":963},"Why use the command from the openssh package? For instance, if you don't have the ",{"type":25,"tag":522,"props":965,"children":967},{"className":966},[],[968],{"type":34,"value":969},".ssh",{"type":34,"value":971}," folder or the ",{"type":25,"tag":522,"props":973,"children":975},{"className":974},[],[976],{"type":34,"value":977},"authorized_keys",{"type":34,"value":979}," file, it creates it all for you, hassle free.",{"type":25,"tag":30,"props":981,"children":982},{},[983],{"type":34,"value":984},"Now that that is done, you should be able to ssh into your server without a password.",{"type":25,"tag":62,"props":986,"children":988},{"id":987},"ssh-configs",[989,993],{"type":25,"tag":67,"props":990,"children":992},{"href":991,"ariaHidden":70,"tabIndex":71},"#ssh-configs",[],{"type":34,"value":994},"SSH configs",{"type":25,"tag":30,"props":996,"children":997},{},[998,1000,1006],{"type":34,"value":999},"This is really useful if you don't want to type out the domain or server ip whenever you ssh. To make a config file, ",{"type":25,"tag":522,"props":1001,"children":1003},{"className":1002},[],[1004],{"type":34,"value":1005},"vim ~\u002F.ssh\u002Fconfig",{"type":34,"value":1007},", and add this:",{"type":25,"tag":531,"props":1009,"children":1011},{"code":1010},"Host ${server_name}\nUser ${user}\nIdentityFile ${~\u002F.ssh\u002Fpublic_key_file}\nHostName ~{url or ip address}\n",[1012],{"type":25,"tag":522,"props":1013,"children":1014},{"__ignoreMap":8},[1015],{"type":34,"value":1010},{"type":25,"tag":30,"props":1017,"children":1018},{},[1019,1021,1027],{"type":34,"value":1020},"Note that the ",{"type":25,"tag":522,"props":1022,"children":1024},{"className":1023},[],[1025],{"type":34,"value":1026},"${}",{"type":34,"value":1028}," is for you to substitute your own things.",{"type":25,"tag":30,"props":1030,"children":1031},{},[1032,1034,1040],{"type":34,"value":1033},"This way, just call ",{"type":25,"tag":522,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":34,"value":1039},"ssh server_name",{"type":34,"value":1041}," and you're good to go.",{"type":25,"tag":26,"props":1043,"children":1044},{},[1045],{"type":34,"value":1046},"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);}",{"title":8,"searchDepth":458,"depth":458,"links":1048},[1049,1050,1051,1055,1056],{"id":508,"depth":458,"text":515},{"id":638,"depth":458,"text":645},{"id":659,"depth":458,"text":666,"children":1052},[1053,1054],{"id":669,"depth":461,"text":676},{"id":740,"depth":461,"text":747},{"id":796,"depth":458,"text":803},{"id":491,"depth":458,"text":841,"children":1057},[1058],{"id":987,"depth":461,"text":994},"content:articles:server-tips.md","articles\u002Fserver-tips.md","articles\u002Fserver-tips",{"_path":1063,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1064,"description":1065,"img":1066,"alt":1067,"author":1068,"tags":1069,"date":1073,"body":1074,"_type":475,"_id":1775,"_source":477,"_file":1776,"_stem":1777,"_extension":480},"\u002Farticles\u002Fcontinuous-deployment","How to setup continuous delivery","Learn how to setup CD of a website on a VPS using Github Actions","https:\u002F\u002Fgithub.blog\u002Fwp-content\u002Fuploads\u002F2019\u002F08\u002FDL-V2-LinkedIn_FB.png","Github Actions",{"name":14,"img":15},[490,1070,1071,1072],"continuousdelivery","react","website","2021-11-07",{"type":22,"children":1075,"toc":1769},[1076,1079,1089,1094,1113,1123,1128,1159,1169,1174,1254,1259,1278,1291,1333,1343,1364,1732,1760,1765],{"type":25,"tag":26,"props":1077,"children":1078},{},[],{"type":25,"tag":506,"props":1080,"children":1082},{"id":1081},"setup",[1083,1087],{"type":25,"tag":67,"props":1084,"children":1086},{"href":1085,"ariaHidden":70,"tabIndex":71},"#setup",[],{"type":34,"value":1088},"Setup",{"type":25,"tag":30,"props":1090,"children":1091},{},[1092],{"type":34,"value":1093},"Make sure to have",{"type":25,"tag":1095,"props":1096,"children":1097},"ul",{},[1098,1104,1109],{"type":25,"tag":1099,"props":1100,"children":1101},"li",{},[1102],{"type":34,"value":1103},"GitHub account",{"type":25,"tag":1099,"props":1105,"children":1106},{},[1107],{"type":34,"value":1108},"Github repo",{"type":25,"tag":1099,"props":1110,"children":1111},{},[1112],{"type":34,"value":486},{"type":25,"tag":506,"props":1114,"children":1116},{"id":1115},"what-will-we-get-at-the-end",[1117,1121],{"type":25,"tag":67,"props":1118,"children":1120},{"href":1119,"ariaHidden":70,"tabIndex":71},"#what-will-we-get-at-the-end",[],{"type":34,"value":1122},"What will we get at the end?",{"type":25,"tag":30,"props":1124,"children":1125},{},[1126],{"type":34,"value":1127},"Our end goal is to be able to push to a repository, and then on the VPS side:",{"type":25,"tag":1129,"props":1130,"children":1131},"ol",{},[1132,1137,1142,1154],{"type":25,"tag":1099,"props":1133,"children":1134},{},[1135],{"type":34,"value":1136},"Pull from the repository",{"type":25,"tag":1099,"props":1138,"children":1139},{},[1140],{"type":34,"value":1141},"Run the installation requirements",{"type":25,"tag":1099,"props":1143,"children":1144},{},[1145,1147,1152],{"type":34,"value":1146},"Reload things that are serving it (",{"type":25,"tag":522,"props":1148,"children":1150},{"className":1149},[],[1151],{"type":34,"value":638},{"type":34,"value":1153}," in my case)",{"type":25,"tag":1099,"props":1155,"children":1156},{},[1157],{"type":34,"value":1158},"Step back and relax as your website auto deploys!",{"type":25,"tag":506,"props":1160,"children":1162},{"id":1161},"configuring-the-github-repository",[1163,1167],{"type":25,"tag":67,"props":1164,"children":1166},{"href":1165,"ariaHidden":70,"tabIndex":71},"#configuring-the-github-repository",[],{"type":34,"value":1168},"Configuring the GitHub repository",{"type":25,"tag":30,"props":1170,"children":1171},{},[1172],{"type":34,"value":1173},"In order to run actions on the vps, GitHub needs access. Hence, we'll create an ssh key for it.",{"type":25,"tag":531,"props":1175,"children":1177},{"className":535,"code":1176,"language":534,"meta":8,"style":8},"cd ~\u002F.ssh\nssh-keygen -t rsa -b 4096 -C \"your@email.here\"\ncat ~\u002F.ssh\u002Fid_rsa.pub >> ~\u002F.ssh\u002Fauthorized_keys\n",[1178],{"type":25,"tag":522,"props":1179,"children":1180},{"__ignoreMap":8},[1181,1192,1231],{"type":25,"tag":541,"props":1182,"children":1183},{"class":543,"line":544},[1184,1188],{"type":25,"tag":541,"props":1185,"children":1186},{"style":859},[1187],{"type":34,"value":862},{"type":25,"tag":541,"props":1189,"children":1190},{"style":554},[1191],{"type":34,"value":867},{"type":25,"tag":541,"props":1193,"children":1194},{"class":543,"line":458},[1195,1199,1203,1207,1211,1215,1219,1223,1227],{"type":25,"tag":541,"props":1196,"children":1197},{"style":548},[1198],{"type":34,"value":875},{"type":25,"tag":541,"props":1200,"children":1201},{"style":554},[1202],{"type":34,"value":880},{"type":25,"tag":541,"props":1204,"children":1205},{"style":554},[1206],{"type":34,"value":885},{"type":25,"tag":541,"props":1208,"children":1209},{"style":554},[1210],{"type":34,"value":890},{"type":25,"tag":541,"props":1212,"children":1213},{"style":893},[1214],{"type":34,"value":896},{"type":25,"tag":541,"props":1216,"children":1217},{"style":554},[1218],{"type":34,"value":901},{"type":25,"tag":541,"props":1220,"children":1221},{"style":560},[1222],{"type":34,"value":906},{"type":25,"tag":541,"props":1224,"children":1225},{"style":554},[1226],{"type":34,"value":911},{"type":25,"tag":541,"props":1228,"children":1229},{"style":560},[1230],{"type":34,"value":916},{"type":25,"tag":541,"props":1232,"children":1233},{"class":543,"line":461},[1234,1239,1244,1249],{"type":25,"tag":541,"props":1235,"children":1236},{"style":548},[1237],{"type":34,"value":1238},"cat",{"type":25,"tag":541,"props":1240,"children":1241},{"style":554},[1242],{"type":34,"value":1243}," ~\u002F.ssh\u002Fid_rsa.pub",{"type":25,"tag":541,"props":1245,"children":1246},{"style":560},[1247],{"type":34,"value":1248}," >>",{"type":25,"tag":541,"props":1250,"children":1251},{"style":554},[1252],{"type":34,"value":1253}," ~\u002F.ssh\u002Fauthorized_keys\n",{"type":25,"tag":30,"props":1255,"children":1256},{},[1257],{"type":34,"value":1258},"Copy the private key by displaying it:",{"type":25,"tag":531,"props":1260,"children":1262},{"className":535,"code":1261,"language":534,"meta":8,"style":8},"cat ~\u002F.ssh\u002Fid_rsa\n",[1263],{"type":25,"tag":522,"props":1264,"children":1265},{"__ignoreMap":8},[1266],{"type":25,"tag":541,"props":1267,"children":1268},{"class":543,"line":544},[1269,1273],{"type":25,"tag":541,"props":1270,"children":1271},{"style":548},[1272],{"type":34,"value":1238},{"type":25,"tag":541,"props":1274,"children":1275},{"style":554},[1276],{"type":34,"value":1277}," ~\u002F.ssh\u002Fid_rsa\n",{"type":25,"tag":30,"props":1279,"children":1280},{},[1281,1283,1289],{"type":34,"value":1282},"Now head over to your GitHub repository, under ",{"type":25,"tag":522,"props":1284,"children":1286},{"className":1285},[],[1287],{"type":34,"value":1288},"Settings -> Secrets -> New repository secret",{"type":34,"value":1290},"\nwe will create 4 secrets:",{"type":25,"tag":531,"props":1292,"children":1296},{"className":1293,"code":1294,"language":1295,"meta":8,"style":8},"language-env shiki shiki-themes material-theme-palenight","HOST: hostname\u002Fip address of vps\nUSERNAME: username to ssh into vps\nSSHKEY: the private key you copied earlier\nPORT: 22\n","env",[1297],{"type":25,"tag":522,"props":1298,"children":1299},{"__ignoreMap":8},[1300,1308,1316,1324],{"type":25,"tag":541,"props":1301,"children":1302},{"class":543,"line":544},[1303],{"type":25,"tag":541,"props":1304,"children":1305},{},[1306],{"type":34,"value":1307},"HOST: hostname\u002Fip address of vps\n",{"type":25,"tag":541,"props":1309,"children":1310},{"class":543,"line":458},[1311],{"type":25,"tag":541,"props":1312,"children":1313},{},[1314],{"type":34,"value":1315},"USERNAME: username to ssh into vps\n",{"type":25,"tag":541,"props":1317,"children":1318},{"class":543,"line":461},[1319],{"type":25,"tag":541,"props":1320,"children":1321},{},[1322],{"type":34,"value":1323},"SSHKEY: the private key you copied earlier\n",{"type":25,"tag":541,"props":1325,"children":1327},{"class":543,"line":1326},4,[1328],{"type":25,"tag":541,"props":1329,"children":1330},{},[1331],{"type":34,"value":1332},"PORT: 22\n",{"type":25,"tag":506,"props":1334,"children":1336},{"id":1335},"configuring-the-github-action",[1337,1341],{"type":25,"tag":67,"props":1338,"children":1340},{"href":1339,"ariaHidden":70,"tabIndex":71},"#configuring-the-github-action",[],{"type":34,"value":1342},"Configuring the GitHub Action",{"type":25,"tag":30,"props":1344,"children":1345},{},[1346,1348,1354,1356,1362],{"type":34,"value":1347},"Under your repo, create a ",{"type":25,"tag":522,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":34,"value":1353},".github\u002Fworkflows",{"type":34,"value":1355}," folder and create a ",{"type":25,"tag":522,"props":1357,"children":1359},{"className":1358},[],[1360],{"type":34,"value":1361},"deploy.yaml",{"type":34,"value":1363}," with the contents below:",{"type":25,"tag":531,"props":1365,"children":1369},{"className":1366,"code":1367,"language":1368,"meta":8,"style":8},"language-yaml shiki shiki-themes material-theme-palenight","name: Deploy Frontend\non:\n  push:\n    branches: [master]\njobs:\n  deploy-frontend-job:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions\u002Fcheckout@v2\n\n      - name: Pull from GitHub repo\n        uses: appleboy\u002Fssh-action@master\n        with:\n          host: ${{ secrets.HOST }}\n          USERNAME: ${{ secrets.USERNAME }}\n          PORT: ${{ secrets.PORT }}\n          KEY: ${{ secrets.SSHKEY }}\n          script: |\n            cd \u002Fvar\u002Fwww\u002Fpersonalwebsite\n            git pull\n            npm install\n            npm run build\n            pm2 reload 0\n","yaml",[1370],{"type":25,"tag":522,"props":1371,"children":1372},{"__ignoreMap":8},[1373,1392,1406,1418,1445,1458,1471,1489,1499,1512,1535,1543,1565,1583,1596,1614,1632,1650,1668,1687,1696,1705,1714,1723],{"type":25,"tag":541,"props":1374,"children":1375},{"class":543,"line":544},[1376,1382,1387],{"type":25,"tag":541,"props":1377,"children":1379},{"style":1378},"--shiki-default:#F07178",[1380],{"type":34,"value":1381},"name",{"type":25,"tag":541,"props":1383,"children":1384},{"style":560},[1385],{"type":34,"value":1386},":",{"type":25,"tag":541,"props":1388,"children":1389},{"style":554},[1390],{"type":34,"value":1391}," Deploy Frontend\n",{"type":25,"tag":541,"props":1393,"children":1394},{"class":543,"line":458},[1395,1401],{"type":25,"tag":541,"props":1396,"children":1398},{"style":1397},"--shiki-default:#FF9CAC",[1399],{"type":34,"value":1400},"on",{"type":25,"tag":541,"props":1402,"children":1403},{"style":560},[1404],{"type":34,"value":1405},":\n",{"type":25,"tag":541,"props":1407,"children":1408},{"class":543,"line":461},[1409,1414],{"type":25,"tag":541,"props":1410,"children":1411},{"style":1378},[1412],{"type":34,"value":1413},"  push",{"type":25,"tag":541,"props":1415,"children":1416},{"style":560},[1417],{"type":34,"value":1405},{"type":25,"tag":541,"props":1419,"children":1420},{"class":543,"line":1326},[1421,1426,1430,1435,1440],{"type":25,"tag":541,"props":1422,"children":1423},{"style":1378},[1424],{"type":34,"value":1425},"    branches",{"type":25,"tag":541,"props":1427,"children":1428},{"style":560},[1429],{"type":34,"value":1386},{"type":25,"tag":541,"props":1431,"children":1432},{"style":560},[1433],{"type":34,"value":1434}," [",{"type":25,"tag":541,"props":1436,"children":1437},{"style":554},[1438],{"type":34,"value":1439},"master",{"type":25,"tag":541,"props":1441,"children":1442},{"style":560},[1443],{"type":34,"value":1444},"]\n",{"type":25,"tag":541,"props":1446,"children":1448},{"class":543,"line":1447},5,[1449,1454],{"type":25,"tag":541,"props":1450,"children":1451},{"style":1378},[1452],{"type":34,"value":1453},"jobs",{"type":25,"tag":541,"props":1455,"children":1456},{"style":560},[1457],{"type":34,"value":1405},{"type":25,"tag":541,"props":1459,"children":1461},{"class":543,"line":1460},6,[1462,1467],{"type":25,"tag":541,"props":1463,"children":1464},{"style":1378},[1465],{"type":34,"value":1466},"  deploy-frontend-job",{"type":25,"tag":541,"props":1468,"children":1469},{"style":560},[1470],{"type":34,"value":1405},{"type":25,"tag":541,"props":1472,"children":1474},{"class":543,"line":1473},7,[1475,1480,1484],{"type":25,"tag":541,"props":1476,"children":1477},{"style":1378},[1478],{"type":34,"value":1479},"    runs-on",{"type":25,"tag":541,"props":1481,"children":1482},{"style":560},[1483],{"type":34,"value":1386},{"type":25,"tag":541,"props":1485,"children":1486},{"style":554},[1487],{"type":34,"value":1488}," ubuntu-latest\n",{"type":25,"tag":541,"props":1490,"children":1492},{"class":543,"line":1491},8,[1493],{"type":25,"tag":541,"props":1494,"children":1496},{"emptyLinePlaceholder":1495},true,[1497],{"type":34,"value":1498},"\n",{"type":25,"tag":541,"props":1500,"children":1502},{"class":543,"line":1501},9,[1503,1508],{"type":25,"tag":541,"props":1504,"children":1505},{"style":1378},[1506],{"type":34,"value":1507},"    steps",{"type":25,"tag":541,"props":1509,"children":1510},{"style":560},[1511],{"type":34,"value":1405},{"type":25,"tag":541,"props":1513,"children":1515},{"class":543,"line":1514},10,[1516,1521,1526,1530],{"type":25,"tag":541,"props":1517,"children":1518},{"style":560},[1519],{"type":34,"value":1520},"      -",{"type":25,"tag":541,"props":1522,"children":1523},{"style":1378},[1524],{"type":34,"value":1525}," uses",{"type":25,"tag":541,"props":1527,"children":1528},{"style":560},[1529],{"type":34,"value":1386},{"type":25,"tag":541,"props":1531,"children":1532},{"style":554},[1533],{"type":34,"value":1534}," actions\u002Fcheckout@v2\n",{"type":25,"tag":541,"props":1536,"children":1538},{"class":543,"line":1537},11,[1539],{"type":25,"tag":541,"props":1540,"children":1541},{"emptyLinePlaceholder":1495},[1542],{"type":34,"value":1498},{"type":25,"tag":541,"props":1544,"children":1546},{"class":543,"line":1545},12,[1547,1551,1556,1560],{"type":25,"tag":541,"props":1548,"children":1549},{"style":560},[1550],{"type":34,"value":1520},{"type":25,"tag":541,"props":1552,"children":1553},{"style":1378},[1554],{"type":34,"value":1555}," name",{"type":25,"tag":541,"props":1557,"children":1558},{"style":560},[1559],{"type":34,"value":1386},{"type":25,"tag":541,"props":1561,"children":1562},{"style":554},[1563],{"type":34,"value":1564}," Pull from GitHub repo\n",{"type":25,"tag":541,"props":1566,"children":1568},{"class":543,"line":1567},13,[1569,1574,1578],{"type":25,"tag":541,"props":1570,"children":1571},{"style":1378},[1572],{"type":34,"value":1573},"        uses",{"type":25,"tag":541,"props":1575,"children":1576},{"style":560},[1577],{"type":34,"value":1386},{"type":25,"tag":541,"props":1579,"children":1580},{"style":554},[1581],{"type":34,"value":1582}," appleboy\u002Fssh-action@master\n",{"type":25,"tag":541,"props":1584,"children":1586},{"class":543,"line":1585},14,[1587,1592],{"type":25,"tag":541,"props":1588,"children":1589},{"style":1378},[1590],{"type":34,"value":1591},"        with",{"type":25,"tag":541,"props":1593,"children":1594},{"style":560},[1595],{"type":34,"value":1405},{"type":25,"tag":541,"props":1597,"children":1599},{"class":543,"line":1598},15,[1600,1605,1609],{"type":25,"tag":541,"props":1601,"children":1602},{"style":1378},[1603],{"type":34,"value":1604},"          host",{"type":25,"tag":541,"props":1606,"children":1607},{"style":560},[1608],{"type":34,"value":1386},{"type":25,"tag":541,"props":1610,"children":1611},{"style":554},[1612],{"type":34,"value":1613}," ${{ secrets.HOST }}\n",{"type":25,"tag":541,"props":1615,"children":1617},{"class":543,"line":1616},16,[1618,1623,1627],{"type":25,"tag":541,"props":1619,"children":1620},{"style":1378},[1621],{"type":34,"value":1622},"          USERNAME",{"type":25,"tag":541,"props":1624,"children":1625},{"style":560},[1626],{"type":34,"value":1386},{"type":25,"tag":541,"props":1628,"children":1629},{"style":554},[1630],{"type":34,"value":1631}," ${{ secrets.USERNAME }}\n",{"type":25,"tag":541,"props":1633,"children":1635},{"class":543,"line":1634},17,[1636,1641,1645],{"type":25,"tag":541,"props":1637,"children":1638},{"style":1378},[1639],{"type":34,"value":1640},"          PORT",{"type":25,"tag":541,"props":1642,"children":1643},{"style":560},[1644],{"type":34,"value":1386},{"type":25,"tag":541,"props":1646,"children":1647},{"style":554},[1648],{"type":34,"value":1649}," ${{ secrets.PORT }}\n",{"type":25,"tag":541,"props":1651,"children":1653},{"class":543,"line":1652},18,[1654,1659,1663],{"type":25,"tag":541,"props":1655,"children":1656},{"style":1378},[1657],{"type":34,"value":1658},"          KEY",{"type":25,"tag":541,"props":1660,"children":1661},{"style":560},[1662],{"type":34,"value":1386},{"type":25,"tag":541,"props":1664,"children":1665},{"style":554},[1666],{"type":34,"value":1667}," ${{ secrets.SSHKEY }}\n",{"type":25,"tag":541,"props":1669,"children":1671},{"class":543,"line":1670},19,[1672,1677,1681],{"type":25,"tag":541,"props":1673,"children":1674},{"style":1378},[1675],{"type":34,"value":1676},"          script",{"type":25,"tag":541,"props":1678,"children":1679},{"style":560},[1680],{"type":34,"value":1386},{"type":25,"tag":541,"props":1682,"children":1684},{"style":1683},"--shiki-default:#89DDFF;--shiki-default-font-style:italic",[1685],{"type":34,"value":1686}," |\n",{"type":25,"tag":541,"props":1688,"children":1690},{"class":543,"line":1689},20,[1691],{"type":25,"tag":541,"props":1692,"children":1693},{"style":554},[1694],{"type":34,"value":1695},"            cd \u002Fvar\u002Fwww\u002Fpersonalwebsite\n",{"type":25,"tag":541,"props":1697,"children":1699},{"class":543,"line":1698},21,[1700],{"type":25,"tag":541,"props":1701,"children":1702},{"style":554},[1703],{"type":34,"value":1704},"            git pull\n",{"type":25,"tag":541,"props":1706,"children":1708},{"class":543,"line":1707},22,[1709],{"type":25,"tag":541,"props":1710,"children":1711},{"style":554},[1712],{"type":34,"value":1713},"            npm install\n",{"type":25,"tag":541,"props":1715,"children":1717},{"class":543,"line":1716},23,[1718],{"type":25,"tag":541,"props":1719,"children":1720},{"style":554},[1721],{"type":34,"value":1722},"            npm run build\n",{"type":25,"tag":541,"props":1724,"children":1726},{"class":543,"line":1725},24,[1727],{"type":25,"tag":541,"props":1728,"children":1729},{"style":554},[1730],{"type":34,"value":1731},"            pm2 reload 0\n",{"type":25,"tag":30,"props":1733,"children":1734},{},[1735,1737,1742,1744,1750,1752,1758],{"type":34,"value":1736},"We only want pushes that go to the ",{"type":25,"tag":522,"props":1738,"children":1740},{"className":1739},[],[1741],{"type":34,"value":1439},{"type":34,"value":1743}," branch, and this runs the ",{"type":25,"tag":522,"props":1745,"children":1747},{"className":1746},[],[1748],{"type":34,"value":1749},"deploy-frontend-job",{"type":34,"value":1751}," job.\nNote that you can do whatever branch you want.\nWe are calling a ",{"type":25,"tag":522,"props":1753,"children":1755},{"className":1754},[],[1756],{"type":34,"value":1757},"ssh-action",{"type":34,"value":1759},", which runs the script in the vps once we have logged on.",{"type":25,"tag":30,"props":1761,"children":1762},{},[1763],{"type":34,"value":1764},"I am going to the directory, pulling from GitHub, installing packages, and then reloading pm2, which I'm using to serve.",{"type":25,"tag":26,"props":1766,"children":1767},{},[1768],{"type":34,"value":1046},{"title":8,"searchDepth":458,"depth":458,"links":1770},[1771,1772,1773,1774],{"id":1081,"depth":458,"text":1088},{"id":1115,"depth":458,"text":1122},{"id":1161,"depth":458,"text":1168},{"id":1335,"depth":458,"text":1342},"content:articles:continuous-deployment.md","articles\u002Fcontinuous-deployment.md","articles\u002Fcontinuous-deployment",{"_path":1779,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":1780,"description":1781,"img":1782,"alt":1783,"author":1784,"tags":1785,"date":1788,"body":1789,"_type":475,"_id":4744,"_source":477,"_file":4745,"_stem":4746,"_extension":480},"\u002Farticles\u002Fblock-websites","Chrome extensions and cron jobs","Make a chrome extension that blocks websites at a certain time of the day.","https:\u002F\u002Fwww.fossmint.com\u002Fwp-content\u002Fuploads\u002F2019\u002F06\u002FBest-Chrome-Extensions-for-Productivity.png","Chrome Extension",{"name":14,"img":15},[1786,1787],"chrome","cron","2021-10-04",{"type":22,"children":1790,"toc":4736},[1791,1794,1807,1817,1822,1827,1839,2486,2491,2523,2533,2560,2570,2593,2598,2609,2799,2804,2814,3113,3123,3362,3372,3384,4349,4368,4373,4378,4535,4540,4550,4555,4560,4580,4585,4670,4675,4703,4708,4718,4732],{"type":25,"tag":26,"props":1792,"children":1793},{},[],{"type":25,"tag":30,"props":1795,"children":1796},{},[1797,1799,1805],{"type":34,"value":1798},"Ever since online learning, I realized how distracting the world wide web can be.\nRanging from online games like diep.io to social media, it can all be very distracting. You might work for 30 minutes only to get lost on ",{"type":25,"tag":67,"props":1800,"children":1802},{"href":1801},"tiktok.com",[1803],{"type":34,"value":1804},"Tiktok",{"type":34,"value":1806}," for hours.\nHence, I decided to create a chrome extension to help my friends and my siblings focus on their work. But, how do I get them to use it? Easy, by disguising it as another chrome extension.",{"type":25,"tag":506,"props":1808,"children":1810},{"id":1809},"building-the-chrome-extension",[1811,1815],{"type":25,"tag":67,"props":1812,"children":1814},{"href":1813,"ariaHidden":70,"tabIndex":71},"#building-the-chrome-extension",[],{"type":34,"value":1816},"Building the chrome extension",{"type":25,"tag":30,"props":1818,"children":1819},{},[1820],{"type":34,"value":1821},"We'll be using Manifest V3, which is the newest way to create chrome extensions. V2 has less strict configurations, would would be better for our sneaky work, but it is getting discontinued soon, so no server script loading unfortunately. 😅",{"type":25,"tag":30,"props":1823,"children":1824},{},[1825],{"type":34,"value":1826},"We will be impersonating a Unity Extension. Similar to how the React Dev tools or Vue Dev tools light up when you're on a page, we'll be doing that too!",{"type":25,"tag":30,"props":1828,"children":1829},{},[1830,1832,1838],{"type":34,"value":1831},"First, we'll need the ",{"type":25,"tag":522,"props":1833,"children":1835},{"className":1834},[],[1836],{"type":34,"value":1837},"manifest.json",{"type":34,"value":1386},{"type":25,"tag":531,"props":1840,"children":1844},{"className":1841,"code":1842,"language":1843,"meta":8,"style":8},"language-json shiki shiki-themes material-theme-palenight","{\n  \"name\": \"Unity Extension\",\n  \"description\": \"WegGL Debugger for Unity Applications\",\n  \"version\": \"1.12\",\n  \"manifest_version\": 3,\n  \"background\": {\n    \"service_worker\": \"background.js\"\n  },\n  \"permissions\": [\"activeTab\", \"storage\", \"tabs\"],\n  \"action\": {\n    \"default_popup\": \"popup.html\",\n    \"default_icon\": {\n      \"128\": \"unityfaded.png\"\n    }\n  },\n  \"icons\": {\n    \"128\": \"unity.png\"\n  },\n  \"content_scripts\": [{\n    \"js\": [\"content.js\"],\n    \"matches\": [\"\u003Call_urls>\"],\n    \"all_frames\": true\n  }]\n}\n","json",[1845],{"type":25,"tag":522,"props":1846,"children":1847},{"__ignoreMap":8},[1848,1856,1896,1933,1970,1999,2024,2058,2066,2142,2166,2203,2227,2261,2269,2276,2300,2332,2339,2364,2405,2446,2471,2479],{"type":25,"tag":541,"props":1849,"children":1850},{"class":543,"line":544},[1851],{"type":25,"tag":541,"props":1852,"children":1853},{"style":560},[1854],{"type":34,"value":1855},"{\n",{"type":25,"tag":541,"props":1857,"children":1858},{"class":543,"line":458},[1859,1864,1869,1874,1878,1882,1887,1891],{"type":25,"tag":541,"props":1860,"children":1861},{"style":560},[1862],{"type":34,"value":1863},"  \"",{"type":25,"tag":541,"props":1865,"children":1867},{"style":1866},"--shiki-default:#C792EA",[1868],{"type":34,"value":1381},{"type":25,"tag":541,"props":1870,"children":1871},{"style":560},[1872],{"type":34,"value":1873},"\"",{"type":25,"tag":541,"props":1875,"children":1876},{"style":560},[1877],{"type":34,"value":1386},{"type":25,"tag":541,"props":1879,"children":1880},{"style":560},[1881],{"type":34,"value":906},{"type":25,"tag":541,"props":1883,"children":1884},{"style":554},[1885],{"type":34,"value":1886},"Unity Extension",{"type":25,"tag":541,"props":1888,"children":1889},{"style":560},[1890],{"type":34,"value":1873},{"type":25,"tag":541,"props":1892,"children":1893},{"style":560},[1894],{"type":34,"value":1895},",\n",{"type":25,"tag":541,"props":1897,"children":1898},{"class":543,"line":461},[1899,1903,1908,1912,1916,1920,1925,1929],{"type":25,"tag":541,"props":1900,"children":1901},{"style":560},[1902],{"type":34,"value":1863},{"type":25,"tag":541,"props":1904,"children":1905},{"style":1866},[1906],{"type":34,"value":1907},"description",{"type":25,"tag":541,"props":1909,"children":1910},{"style":560},[1911],{"type":34,"value":1873},{"type":25,"tag":541,"props":1913,"children":1914},{"style":560},[1915],{"type":34,"value":1386},{"type":25,"tag":541,"props":1917,"children":1918},{"style":560},[1919],{"type":34,"value":906},{"type":25,"tag":541,"props":1921,"children":1922},{"style":554},[1923],{"type":34,"value":1924},"WegGL Debugger for Unity Applications",{"type":25,"tag":541,"props":1926,"children":1927},{"style":560},[1928],{"type":34,"value":1873},{"type":25,"tag":541,"props":1930,"children":1931},{"style":560},[1932],{"type":34,"value":1895},{"type":25,"tag":541,"props":1934,"children":1935},{"class":543,"line":1326},[1936,1940,1945,1949,1953,1957,1962,1966],{"type":25,"tag":541,"props":1937,"children":1938},{"style":560},[1939],{"type":34,"value":1863},{"type":25,"tag":541,"props":1941,"children":1942},{"style":1866},[1943],{"type":34,"value":1944},"version",{"type":25,"tag":541,"props":1946,"children":1947},{"style":560},[1948],{"type":34,"value":1873},{"type":25,"tag":541,"props":1950,"children":1951},{"style":560},[1952],{"type":34,"value":1386},{"type":25,"tag":541,"props":1954,"children":1955},{"style":560},[1956],{"type":34,"value":906},{"type":25,"tag":541,"props":1958,"children":1959},{"style":554},[1960],{"type":34,"value":1961},"1.12",{"type":25,"tag":541,"props":1963,"children":1964},{"style":560},[1965],{"type":34,"value":1873},{"type":25,"tag":541,"props":1967,"children":1968},{"style":560},[1969],{"type":34,"value":1895},{"type":25,"tag":541,"props":1971,"children":1972},{"class":543,"line":1447},[1973,1977,1982,1986,1990,1995],{"type":25,"tag":541,"props":1974,"children":1975},{"style":560},[1976],{"type":34,"value":1863},{"type":25,"tag":541,"props":1978,"children":1979},{"style":1866},[1980],{"type":34,"value":1981},"manifest_version",{"type":25,"tag":541,"props":1983,"children":1984},{"style":560},[1985],{"type":34,"value":1873},{"type":25,"tag":541,"props":1987,"children":1988},{"style":560},[1989],{"type":34,"value":1386},{"type":25,"tag":541,"props":1991,"children":1992},{"style":893},[1993],{"type":34,"value":1994}," 3",{"type":25,"tag":541,"props":1996,"children":1997},{"style":560},[1998],{"type":34,"value":1895},{"type":25,"tag":541,"props":2000,"children":2001},{"class":543,"line":1460},[2002,2006,2011,2015,2019],{"type":25,"tag":541,"props":2003,"children":2004},{"style":560},[2005],{"type":34,"value":1863},{"type":25,"tag":541,"props":2007,"children":2008},{"style":1866},[2009],{"type":34,"value":2010},"background",{"type":25,"tag":541,"props":2012,"children":2013},{"style":560},[2014],{"type":34,"value":1873},{"type":25,"tag":541,"props":2016,"children":2017},{"style":560},[2018],{"type":34,"value":1386},{"type":25,"tag":541,"props":2020,"children":2021},{"style":560},[2022],{"type":34,"value":2023}," {\n",{"type":25,"tag":541,"props":2025,"children":2026},{"class":543,"line":1473},[2027,2032,2037,2041,2045,2049,2054],{"type":25,"tag":541,"props":2028,"children":2029},{"style":560},[2030],{"type":34,"value":2031},"    \"",{"type":25,"tag":541,"props":2033,"children":2034},{"style":548},[2035],{"type":34,"value":2036},"service_worker",{"type":25,"tag":541,"props":2038,"children":2039},{"style":560},[2040],{"type":34,"value":1873},{"type":25,"tag":541,"props":2042,"children":2043},{"style":560},[2044],{"type":34,"value":1386},{"type":25,"tag":541,"props":2046,"children":2047},{"style":560},[2048],{"type":34,"value":906},{"type":25,"tag":541,"props":2050,"children":2051},{"style":554},[2052],{"type":34,"value":2053},"background.js",{"type":25,"tag":541,"props":2055,"children":2056},{"style":560},[2057],{"type":34,"value":916},{"type":25,"tag":541,"props":2059,"children":2060},{"class":543,"line":1491},[2061],{"type":25,"tag":541,"props":2062,"children":2063},{"style":560},[2064],{"type":34,"value":2065},"  },\n",{"type":25,"tag":541,"props":2067,"children":2068},{"class":543,"line":1501},[2069,2073,2077,2081,2085,2089,2093,2098,2102,2107,2111,2116,2120,2124,2128,2133,2137],{"type":25,"tag":541,"props":2070,"children":2071},{"style":560},[2072],{"type":34,"value":1863},{"type":25,"tag":541,"props":2074,"children":2075},{"style":1866},[2076],{"type":34,"value":492},{"type":25,"tag":541,"props":2078,"children":2079},{"style":560},[2080],{"type":34,"value":1873},{"type":25,"tag":541,"props":2082,"children":2083},{"style":560},[2084],{"type":34,"value":1386},{"type":25,"tag":541,"props":2086,"children":2087},{"style":560},[2088],{"type":34,"value":1434},{"type":25,"tag":541,"props":2090,"children":2091},{"style":560},[2092],{"type":34,"value":1873},{"type":25,"tag":541,"props":2094,"children":2095},{"style":554},[2096],{"type":34,"value":2097},"activeTab",{"type":25,"tag":541,"props":2099,"children":2100},{"style":560},[2101],{"type":34,"value":1873},{"type":25,"tag":541,"props":2103,"children":2104},{"style":560},[2105],{"type":34,"value":2106},",",{"type":25,"tag":541,"props":2108,"children":2109},{"style":560},[2110],{"type":34,"value":906},{"type":25,"tag":541,"props":2112,"children":2113},{"style":554},[2114],{"type":34,"value":2115},"storage",{"type":25,"tag":541,"props":2117,"children":2118},{"style":560},[2119],{"type":34,"value":1873},{"type":25,"tag":541,"props":2121,"children":2122},{"style":560},[2123],{"type":34,"value":2106},{"type":25,"tag":541,"props":2125,"children":2126},{"style":560},[2127],{"type":34,"value":906},{"type":25,"tag":541,"props":2129,"children":2130},{"style":554},[2131],{"type":34,"value":2132},"tabs",{"type":25,"tag":541,"props":2134,"children":2135},{"style":560},[2136],{"type":34,"value":1873},{"type":25,"tag":541,"props":2138,"children":2139},{"style":560},[2140],{"type":34,"value":2141},"],\n",{"type":25,"tag":541,"props":2143,"children":2144},{"class":543,"line":1514},[2145,2149,2154,2158,2162],{"type":25,"tag":541,"props":2146,"children":2147},{"style":560},[2148],{"type":34,"value":1863},{"type":25,"tag":541,"props":2150,"children":2151},{"style":1866},[2152],{"type":34,"value":2153},"action",{"type":25,"tag":541,"props":2155,"children":2156},{"style":560},[2157],{"type":34,"value":1873},{"type":25,"tag":541,"props":2159,"children":2160},{"style":560},[2161],{"type":34,"value":1386},{"type":25,"tag":541,"props":2163,"children":2164},{"style":560},[2165],{"type":34,"value":2023},{"type":25,"tag":541,"props":2167,"children":2168},{"class":543,"line":1537},[2169,2173,2178,2182,2186,2190,2195,2199],{"type":25,"tag":541,"props":2170,"children":2171},{"style":560},[2172],{"type":34,"value":2031},{"type":25,"tag":541,"props":2174,"children":2175},{"style":548},[2176],{"type":34,"value":2177},"default_popup",{"type":25,"tag":541,"props":2179,"children":2180},{"style":560},[2181],{"type":34,"value":1873},{"type":25,"tag":541,"props":2183,"children":2184},{"style":560},[2185],{"type":34,"value":1386},{"type":25,"tag":541,"props":2187,"children":2188},{"style":560},[2189],{"type":34,"value":906},{"type":25,"tag":541,"props":2191,"children":2192},{"style":554},[2193],{"type":34,"value":2194},"popup.html",{"type":25,"tag":541,"props":2196,"children":2197},{"style":560},[2198],{"type":34,"value":1873},{"type":25,"tag":541,"props":2200,"children":2201},{"style":560},[2202],{"type":34,"value":1895},{"type":25,"tag":541,"props":2204,"children":2205},{"class":543,"line":1545},[2206,2210,2215,2219,2223],{"type":25,"tag":541,"props":2207,"children":2208},{"style":560},[2209],{"type":34,"value":2031},{"type":25,"tag":541,"props":2211,"children":2212},{"style":548},[2213],{"type":34,"value":2214},"default_icon",{"type":25,"tag":541,"props":2216,"children":2217},{"style":560},[2218],{"type":34,"value":1873},{"type":25,"tag":541,"props":2220,"children":2221},{"style":560},[2222],{"type":34,"value":1386},{"type":25,"tag":541,"props":2224,"children":2225},{"style":560},[2226],{"type":34,"value":2023},{"type":25,"tag":541,"props":2228,"children":2229},{"class":543,"line":1567},[2230,2235,2240,2244,2248,2252,2257],{"type":25,"tag":541,"props":2231,"children":2232},{"style":560},[2233],{"type":34,"value":2234},"      \"",{"type":25,"tag":541,"props":2236,"children":2237},{"style":893},[2238],{"type":34,"value":2239},"128",{"type":25,"tag":541,"props":2241,"children":2242},{"style":560},[2243],{"type":34,"value":1873},{"type":25,"tag":541,"props":2245,"children":2246},{"style":560},[2247],{"type":34,"value":1386},{"type":25,"tag":541,"props":2249,"children":2250},{"style":560},[2251],{"type":34,"value":906},{"type":25,"tag":541,"props":2253,"children":2254},{"style":554},[2255],{"type":34,"value":2256},"unityfaded.png",{"type":25,"tag":541,"props":2258,"children":2259},{"style":560},[2260],{"type":34,"value":916},{"type":25,"tag":541,"props":2262,"children":2263},{"class":543,"line":1585},[2264],{"type":25,"tag":541,"props":2265,"children":2266},{"style":560},[2267],{"type":34,"value":2268},"    }\n",{"type":25,"tag":541,"props":2270,"children":2271},{"class":543,"line":1598},[2272],{"type":25,"tag":541,"props":2273,"children":2274},{"style":560},[2275],{"type":34,"value":2065},{"type":25,"tag":541,"props":2277,"children":2278},{"class":543,"line":1616},[2279,2283,2288,2292,2296],{"type":25,"tag":541,"props":2280,"children":2281},{"style":560},[2282],{"type":34,"value":1863},{"type":25,"tag":541,"props":2284,"children":2285},{"style":1866},[2286],{"type":34,"value":2287},"icons",{"type":25,"tag":541,"props":2289,"children":2290},{"style":560},[2291],{"type":34,"value":1873},{"type":25,"tag":541,"props":2293,"children":2294},{"style":560},[2295],{"type":34,"value":1386},{"type":25,"tag":541,"props":2297,"children":2298},{"style":560},[2299],{"type":34,"value":2023},{"type":25,"tag":541,"props":2301,"children":2302},{"class":543,"line":1634},[2303,2307,2311,2315,2319,2323,2328],{"type":25,"tag":541,"props":2304,"children":2305},{"style":560},[2306],{"type":34,"value":2031},{"type":25,"tag":541,"props":2308,"children":2309},{"style":548},[2310],{"type":34,"value":2239},{"type":25,"tag":541,"props":2312,"children":2313},{"style":560},[2314],{"type":34,"value":1873},{"type":25,"tag":541,"props":2316,"children":2317},{"style":560},[2318],{"type":34,"value":1386},{"type":25,"tag":541,"props":2320,"children":2321},{"style":560},[2322],{"type":34,"value":906},{"type":25,"tag":541,"props":2324,"children":2325},{"style":554},[2326],{"type":34,"value":2327},"unity.png",{"type":25,"tag":541,"props":2329,"children":2330},{"style":560},[2331],{"type":34,"value":916},{"type":25,"tag":541,"props":2333,"children":2334},{"class":543,"line":1652},[2335],{"type":25,"tag":541,"props":2336,"children":2337},{"style":560},[2338],{"type":34,"value":2065},{"type":25,"tag":541,"props":2340,"children":2341},{"class":543,"line":1670},[2342,2346,2351,2355,2359],{"type":25,"tag":541,"props":2343,"children":2344},{"style":560},[2345],{"type":34,"value":1863},{"type":25,"tag":541,"props":2347,"children":2348},{"style":1866},[2349],{"type":34,"value":2350},"content_scripts",{"type":25,"tag":541,"props":2352,"children":2353},{"style":560},[2354],{"type":34,"value":1873},{"type":25,"tag":541,"props":2356,"children":2357},{"style":560},[2358],{"type":34,"value":1386},{"type":25,"tag":541,"props":2360,"children":2361},{"style":560},[2362],{"type":34,"value":2363}," [{\n",{"type":25,"tag":541,"props":2365,"children":2366},{"class":543,"line":1689},[2367,2371,2376,2380,2384,2388,2392,2397,2401],{"type":25,"tag":541,"props":2368,"children":2369},{"style":560},[2370],{"type":34,"value":2031},{"type":25,"tag":541,"props":2372,"children":2373},{"style":548},[2374],{"type":34,"value":2375},"js",{"type":25,"tag":541,"props":2377,"children":2378},{"style":560},[2379],{"type":34,"value":1873},{"type":25,"tag":541,"props":2381,"children":2382},{"style":560},[2383],{"type":34,"value":1386},{"type":25,"tag":541,"props":2385,"children":2386},{"style":560},[2387],{"type":34,"value":1434},{"type":25,"tag":541,"props":2389,"children":2390},{"style":560},[2391],{"type":34,"value":1873},{"type":25,"tag":541,"props":2393,"children":2394},{"style":554},[2395],{"type":34,"value":2396},"content.js",{"type":25,"tag":541,"props":2398,"children":2399},{"style":560},[2400],{"type":34,"value":1873},{"type":25,"tag":541,"props":2402,"children":2403},{"style":560},[2404],{"type":34,"value":2141},{"type":25,"tag":541,"props":2406,"children":2407},{"class":543,"line":1698},[2408,2412,2417,2421,2425,2429,2433,2438,2442],{"type":25,"tag":541,"props":2409,"children":2410},{"style":560},[2411],{"type":34,"value":2031},{"type":25,"tag":541,"props":2413,"children":2414},{"style":548},[2415],{"type":34,"value":2416},"matches",{"type":25,"tag":541,"props":2418,"children":2419},{"style":560},[2420],{"type":34,"value":1873},{"type":25,"tag":541,"props":2422,"children":2423},{"style":560},[2424],{"type":34,"value":1386},{"type":25,"tag":541,"props":2426,"children":2427},{"style":560},[2428],{"type":34,"value":1434},{"type":25,"tag":541,"props":2430,"children":2431},{"style":560},[2432],{"type":34,"value":1873},{"type":25,"tag":541,"props":2434,"children":2435},{"style":554},[2436],{"type":34,"value":2437},"\u003Call_urls>",{"type":25,"tag":541,"props":2439,"children":2440},{"style":560},[2441],{"type":34,"value":1873},{"type":25,"tag":541,"props":2443,"children":2444},{"style":560},[2445],{"type":34,"value":2141},{"type":25,"tag":541,"props":2447,"children":2448},{"class":543,"line":1707},[2449,2453,2458,2462,2466],{"type":25,"tag":541,"props":2450,"children":2451},{"style":560},[2452],{"type":34,"value":2031},{"type":25,"tag":541,"props":2454,"children":2455},{"style":548},[2456],{"type":34,"value":2457},"all_frames",{"type":25,"tag":541,"props":2459,"children":2460},{"style":560},[2461],{"type":34,"value":1873},{"type":25,"tag":541,"props":2463,"children":2464},{"style":560},[2465],{"type":34,"value":1386},{"type":25,"tag":541,"props":2467,"children":2468},{"style":560},[2469],{"type":34,"value":2470}," true\n",{"type":25,"tag":541,"props":2472,"children":2473},{"class":543,"line":1716},[2474],{"type":25,"tag":541,"props":2475,"children":2476},{"style":560},[2477],{"type":34,"value":2478},"  }]\n",{"type":25,"tag":541,"props":2480,"children":2481},{"class":543,"line":1725},[2482],{"type":25,"tag":541,"props":2483,"children":2484},{"style":560},[2485],{"type":34,"value":574},{"type":25,"tag":30,"props":2487,"children":2488},{},[2489],{"type":34,"value":2490},"A few noteworthy things in this manifest:",{"type":25,"tag":1129,"props":2492,"children":2493},{},[2494,2513,2518],{"type":25,"tag":1099,"props":2495,"children":2496},{},[2497,2499,2504,2506,2511],{"type":34,"value":2498},"We have two icon files, the normal ",{"type":25,"tag":522,"props":2500,"children":2502},{"className":2501},[],[2503],{"type":34,"value":2327},{"type":34,"value":2505}," and the\n",{"type":25,"tag":522,"props":2507,"children":2509},{"className":2508},[],[2510],{"type":34,"value":2256},{"type":34,"value":2512}," to show that Unity is present in the website.",{"type":25,"tag":1099,"props":2514,"children":2515},{},[2516],{"type":34,"value":2517},"We require all the permissions in order to set the unity icon individually in each tab, as well as to be able to communicate the fact that Unity has been detected.",{"type":25,"tag":1099,"props":2519,"children":2520},{},[2521],{"type":34,"value":2522},"We need to match all urls so that this script is run on all websites.",{"type":25,"tag":62,"props":2524,"children":2526},{"id":2525},"building-the-logic",[2527,2531],{"type":25,"tag":67,"props":2528,"children":2530},{"href":2529,"ariaHidden":70,"tabIndex":71},"#building-the-logic",[],{"type":34,"value":2532},"Building the logic",{"type":25,"tag":30,"props":2534,"children":2535},{},[2536,2538,2543,2545,2550,2552,2558],{"type":34,"value":2537},"Every chrome extension has 3 main parts: ",{"type":25,"tag":522,"props":2539,"children":2541},{"className":2540},[],[2542],{"type":34,"value":2053},{"type":34,"value":2544},", ",{"type":25,"tag":522,"props":2546,"children":2548},{"className":2547},[],[2549],{"type":34,"value":2396},{"type":34,"value":2551},", and ",{"type":25,"tag":522,"props":2553,"children":2555},{"className":2554},[],[2556],{"type":34,"value":2557},"popup.js",{"type":34,"value":2559},".",{"type":25,"tag":30,"props":2561,"children":2562},{},[2563,2568],{"type":25,"tag":522,"props":2564,"children":2566},{"className":2565},[],[2567],{"type":34,"value":2053},{"type":34,"value":2569}," sounds like it's being run in the background, which is correct. It is run whenever these events happen:",{"type":25,"tag":1095,"props":2571,"children":2572},{},[2573,2578,2583,2588],{"type":25,"tag":1099,"props":2574,"children":2575},{},[2576],{"type":34,"value":2577},"The extension is first installed or updated to a new version.",{"type":25,"tag":1099,"props":2579,"children":2580},{},[2581],{"type":34,"value":2582},"The background page was listening for an event, and the event is dispatched.",{"type":25,"tag":1099,"props":2584,"children":2585},{},[2586],{"type":34,"value":2587},"A content script or other extension sends a message.",{"type":25,"tag":1099,"props":2589,"children":2590},{},[2591],{"type":34,"value":2592},"Another view in the extension, such as a popup, calls runtime.getBackgroundPage",{"type":25,"tag":30,"props":2594,"children":2595},{},[2596],{"type":34,"value":2597},"Hence, it's not being run constantly, it's only being run when required.",{"type":25,"tag":30,"props":2599,"children":2600},{},[2601,2603,2608],{"type":34,"value":2602},"This is ",{"type":25,"tag":522,"props":2604,"children":2606},{"className":2605},[],[2607],{"type":34,"value":2053},{"type":34,"value":1386},{"type":25,"tag":531,"props":2610,"children":2614},{"className":2611,"code":2612,"language":2613,"meta":8,"style":8},"language-JavaScript shiki shiki-themes material-theme-palenight","\u002F\u002F background.js\n\n\nchrome.runtime.onInstalled.addListener(() => {\n  chrome.storage.sync.set({ unity: false });\n});\n\nchrome.runtime.onMessage.addListener(\n  function(request, sender, sendResponse) {\n    chrome.storage.sync.get(\"unity\", ({ unity }) => {\n      if (unity) {\n        chrome.tabs.query({active:true, currentWindow: true}, ([tab]) => {\n          chrome.action.setIcon({ \n            path: { 128: \"unity.png\" },\n            tabId: tab.id\n          })\n        })\n      }\n    })\n    sendResponse({farewell: \"unity\"})\n    return true;\n  }\n);\n","JavaScript",[2615],{"type":25,"tag":522,"props":2616,"children":2617},{"__ignoreMap":8},[2618,2626,2633,2640,2648,2656,2664,2671,2679,2687,2695,2703,2711,2719,2727,2735,2743,2751,2759,2767,2775,2783,2791],{"type":25,"tag":541,"props":2619,"children":2620},{"class":543,"line":544},[2621],{"type":25,"tag":541,"props":2622,"children":2623},{},[2624],{"type":34,"value":2625},"\u002F\u002F background.js\n",{"type":25,"tag":541,"props":2627,"children":2628},{"class":543,"line":458},[2629],{"type":25,"tag":541,"props":2630,"children":2631},{"emptyLinePlaceholder":1495},[2632],{"type":34,"value":1498},{"type":25,"tag":541,"props":2634,"children":2635},{"class":543,"line":461},[2636],{"type":25,"tag":541,"props":2637,"children":2638},{"emptyLinePlaceholder":1495},[2639],{"type":34,"value":1498},{"type":25,"tag":541,"props":2641,"children":2642},{"class":543,"line":1326},[2643],{"type":25,"tag":541,"props":2644,"children":2645},{},[2646],{"type":34,"value":2647},"chrome.runtime.onInstalled.addListener(() => {\n",{"type":25,"tag":541,"props":2649,"children":2650},{"class":543,"line":1447},[2651],{"type":25,"tag":541,"props":2652,"children":2653},{},[2654],{"type":34,"value":2655},"  chrome.storage.sync.set({ unity: false });\n",{"type":25,"tag":541,"props":2657,"children":2658},{"class":543,"line":1460},[2659],{"type":25,"tag":541,"props":2660,"children":2661},{},[2662],{"type":34,"value":2663},"});\n",{"type":25,"tag":541,"props":2665,"children":2666},{"class":543,"line":1473},[2667],{"type":25,"tag":541,"props":2668,"children":2669},{"emptyLinePlaceholder":1495},[2670],{"type":34,"value":1498},{"type":25,"tag":541,"props":2672,"children":2673},{"class":543,"line":1491},[2674],{"type":25,"tag":541,"props":2675,"children":2676},{},[2677],{"type":34,"value":2678},"chrome.runtime.onMessage.addListener(\n",{"type":25,"tag":541,"props":2680,"children":2681},{"class":543,"line":1501},[2682],{"type":25,"tag":541,"props":2683,"children":2684},{},[2685],{"type":34,"value":2686},"  function(request, sender, sendResponse) {\n",{"type":25,"tag":541,"props":2688,"children":2689},{"class":543,"line":1514},[2690],{"type":25,"tag":541,"props":2691,"children":2692},{},[2693],{"type":34,"value":2694},"    chrome.storage.sync.get(\"unity\", ({ unity }) => {\n",{"type":25,"tag":541,"props":2696,"children":2697},{"class":543,"line":1537},[2698],{"type":25,"tag":541,"props":2699,"children":2700},{},[2701],{"type":34,"value":2702},"      if (unity) {\n",{"type":25,"tag":541,"props":2704,"children":2705},{"class":543,"line":1545},[2706],{"type":25,"tag":541,"props":2707,"children":2708},{},[2709],{"type":34,"value":2710},"        chrome.tabs.query({active:true, currentWindow: true}, ([tab]) => {\n",{"type":25,"tag":541,"props":2712,"children":2713},{"class":543,"line":1567},[2714],{"type":25,"tag":541,"props":2715,"children":2716},{},[2717],{"type":34,"value":2718},"          chrome.action.setIcon({ \n",{"type":25,"tag":541,"props":2720,"children":2721},{"class":543,"line":1585},[2722],{"type":25,"tag":541,"props":2723,"children":2724},{},[2725],{"type":34,"value":2726},"            path: { 128: \"unity.png\" },\n",{"type":25,"tag":541,"props":2728,"children":2729},{"class":543,"line":1598},[2730],{"type":25,"tag":541,"props":2731,"children":2732},{},[2733],{"type":34,"value":2734},"            tabId: tab.id\n",{"type":25,"tag":541,"props":2736,"children":2737},{"class":543,"line":1616},[2738],{"type":25,"tag":541,"props":2739,"children":2740},{},[2741],{"type":34,"value":2742},"          })\n",{"type":25,"tag":541,"props":2744,"children":2745},{"class":543,"line":1634},[2746],{"type":25,"tag":541,"props":2747,"children":2748},{},[2749],{"type":34,"value":2750},"        })\n",{"type":25,"tag":541,"props":2752,"children":2753},{"class":543,"line":1652},[2754],{"type":25,"tag":541,"props":2755,"children":2756},{},[2757],{"type":34,"value":2758},"      }\n",{"type":25,"tag":541,"props":2760,"children":2761},{"class":543,"line":1670},[2762],{"type":25,"tag":541,"props":2763,"children":2764},{},[2765],{"type":34,"value":2766},"    })\n",{"type":25,"tag":541,"props":2768,"children":2769},{"class":543,"line":1689},[2770],{"type":25,"tag":541,"props":2771,"children":2772},{},[2773],{"type":34,"value":2774},"    sendResponse({farewell: \"unity\"})\n",{"type":25,"tag":541,"props":2776,"children":2777},{"class":543,"line":1698},[2778],{"type":25,"tag":541,"props":2779,"children":2780},{},[2781],{"type":34,"value":2782},"    return true;\n",{"type":25,"tag":541,"props":2784,"children":2785},{"class":543,"line":1707},[2786],{"type":25,"tag":541,"props":2787,"children":2788},{},[2789],{"type":34,"value":2790},"  }\n",{"type":25,"tag":541,"props":2792,"children":2793},{"class":543,"line":1716},[2794],{"type":25,"tag":541,"props":2795,"children":2796},{},[2797],{"type":34,"value":2798},");\n",{"type":25,"tag":30,"props":2800,"children":2801},{},[2802],{"type":34,"value":2803},"I am essentially storing a flag for unity, and only if it's true, then I set the extension icon to the non faded version.",{"type":25,"tag":30,"props":2805,"children":2806},{},[2807,2809],{"type":34,"value":2808},"Now we display the contents of the extension when you click on it in ",{"type":25,"tag":522,"props":2810,"children":2812},{"className":2811},[],[2813],{"type":34,"value":2194},{"type":25,"tag":531,"props":2815,"children":2819},{"className":2816,"code":2817,"language":2818,"meta":8,"style":8},"language-html shiki shiki-themes material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n    \u003Clink rel=\"stylesheet\" href=\"popup.css\">\n    \n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch3 id=\"unityDisplay\">This page doesn't appear to be using Unity WebGL.\u003C\u002Fh3>\n    \u003Cscript src=\"popup.js\">\u003C\u002Fscript>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[2820],{"type":25,"tag":522,"props":2821,"children":2822},{"__ignoreMap":8},[2823,2846,2862,2879,2941,2949,2965,2981,3037,3083,3098],{"type":25,"tag":541,"props":2824,"children":2825},{"class":543,"line":544},[2826,2831,2836,2841],{"type":25,"tag":541,"props":2827,"children":2828},{"style":560},[2829],{"type":34,"value":2830},"\u003C!",{"type":25,"tag":541,"props":2832,"children":2833},{"style":1378},[2834],{"type":34,"value":2835},"DOCTYPE",{"type":25,"tag":541,"props":2837,"children":2838},{"style":1866},[2839],{"type":34,"value":2840}," html",{"type":25,"tag":541,"props":2842,"children":2843},{"style":560},[2844],{"type":34,"value":2845},">\n",{"type":25,"tag":541,"props":2847,"children":2848},{"class":543,"line":458},[2849,2854,2858],{"type":25,"tag":541,"props":2850,"children":2851},{"style":560},[2852],{"type":34,"value":2853},"\u003C",{"type":25,"tag":541,"props":2855,"children":2856},{"style":1378},[2857],{"type":34,"value":2818},{"type":25,"tag":541,"props":2859,"children":2860},{"style":560},[2861],{"type":34,"value":2845},{"type":25,"tag":541,"props":2863,"children":2864},{"class":543,"line":461},[2865,2870,2875],{"type":25,"tag":541,"props":2866,"children":2867},{"style":560},[2868],{"type":34,"value":2869},"  \u003C",{"type":25,"tag":541,"props":2871,"children":2872},{"style":1378},[2873],{"type":34,"value":2874},"head",{"type":25,"tag":541,"props":2876,"children":2877},{"style":560},[2878],{"type":34,"value":2845},{"type":25,"tag":541,"props":2880,"children":2881},{"class":543,"line":1326},[2882,2887,2892,2897,2902,2906,2911,2915,2920,2924,2928,2933,2937],{"type":25,"tag":541,"props":2883,"children":2884},{"style":560},[2885],{"type":34,"value":2886},"    \u003C",{"type":25,"tag":541,"props":2888,"children":2889},{"style":1378},[2890],{"type":34,"value":2891},"link",{"type":25,"tag":541,"props":2893,"children":2894},{"style":1866},[2895],{"type":34,"value":2896}," rel",{"type":25,"tag":541,"props":2898,"children":2899},{"style":560},[2900],{"type":34,"value":2901},"=",{"type":25,"tag":541,"props":2903,"children":2904},{"style":560},[2905],{"type":34,"value":1873},{"type":25,"tag":541,"props":2907,"children":2908},{"style":554},[2909],{"type":34,"value":2910},"stylesheet",{"type":25,"tag":541,"props":2912,"children":2913},{"style":560},[2914],{"type":34,"value":1873},{"type":25,"tag":541,"props":2916,"children":2917},{"style":1866},[2918],{"type":34,"value":2919}," href",{"type":25,"tag":541,"props":2921,"children":2922},{"style":560},[2923],{"type":34,"value":2901},{"type":25,"tag":541,"props":2925,"children":2926},{"style":560},[2927],{"type":34,"value":1873},{"type":25,"tag":541,"props":2929,"children":2930},{"style":554},[2931],{"type":34,"value":2932},"popup.css",{"type":25,"tag":541,"props":2934,"children":2935},{"style":560},[2936],{"type":34,"value":1873},{"type":25,"tag":541,"props":2938,"children":2939},{"style":560},[2940],{"type":34,"value":2845},{"type":25,"tag":541,"props":2942,"children":2943},{"class":543,"line":1447},[2944],{"type":25,"tag":541,"props":2945,"children":2946},{"style":566},[2947],{"type":34,"value":2948},"    \n",{"type":25,"tag":541,"props":2950,"children":2951},{"class":543,"line":1460},[2952,2957,2961],{"type":25,"tag":541,"props":2953,"children":2954},{"style":560},[2955],{"type":34,"value":2956},"  \u003C\u002F",{"type":25,"tag":541,"props":2958,"children":2959},{"style":1378},[2960],{"type":34,"value":2874},{"type":25,"tag":541,"props":2962,"children":2963},{"style":560},[2964],{"type":34,"value":2845},{"type":25,"tag":541,"props":2966,"children":2967},{"class":543,"line":1473},[2968,2972,2977],{"type":25,"tag":541,"props":2969,"children":2970},{"style":560},[2971],{"type":34,"value":2869},{"type":25,"tag":541,"props":2973,"children":2974},{"style":1378},[2975],{"type":34,"value":2976},"body",{"type":25,"tag":541,"props":2978,"children":2979},{"style":560},[2980],{"type":34,"value":2845},{"type":25,"tag":541,"props":2982,"children":2983},{"class":543,"line":1491},[2984,2988,2992,2997,3001,3005,3010,3014,3019,3024,3029,3033],{"type":25,"tag":541,"props":2985,"children":2986},{"style":560},[2987],{"type":34,"value":2886},{"type":25,"tag":541,"props":2989,"children":2990},{"style":1378},[2991],{"type":34,"value":62},{"type":25,"tag":541,"props":2993,"children":2994},{"style":1866},[2995],{"type":34,"value":2996}," id",{"type":25,"tag":541,"props":2998,"children":2999},{"style":560},[3000],{"type":34,"value":2901},{"type":25,"tag":541,"props":3002,"children":3003},{"style":560},[3004],{"type":34,"value":1873},{"type":25,"tag":541,"props":3006,"children":3007},{"style":554},[3008],{"type":34,"value":3009},"unityDisplay",{"type":25,"tag":541,"props":3011,"children":3012},{"style":560},[3013],{"type":34,"value":1873},{"type":25,"tag":541,"props":3015,"children":3016},{"style":560},[3017],{"type":34,"value":3018},">",{"type":25,"tag":541,"props":3020,"children":3021},{"style":566},[3022],{"type":34,"value":3023},"This page doesn't appear to be using Unity WebGL.",{"type":25,"tag":541,"props":3025,"children":3026},{"style":560},[3027],{"type":34,"value":3028},"\u003C\u002F",{"type":25,"tag":541,"props":3030,"children":3031},{"style":1378},[3032],{"type":34,"value":62},{"type":25,"tag":541,"props":3034,"children":3035},{"style":560},[3036],{"type":34,"value":2845},{"type":25,"tag":541,"props":3038,"children":3039},{"class":543,"line":1501},[3040,3044,3049,3054,3058,3062,3066,3070,3075,3079],{"type":25,"tag":541,"props":3041,"children":3042},{"style":560},[3043],{"type":34,"value":2886},{"type":25,"tag":541,"props":3045,"children":3046},{"style":1378},[3047],{"type":34,"value":3048},"script",{"type":25,"tag":541,"props":3050,"children":3051},{"style":1866},[3052],{"type":34,"value":3053}," src",{"type":25,"tag":541,"props":3055,"children":3056},{"style":560},[3057],{"type":34,"value":2901},{"type":25,"tag":541,"props":3059,"children":3060},{"style":560},[3061],{"type":34,"value":1873},{"type":25,"tag":541,"props":3063,"children":3064},{"style":554},[3065],{"type":34,"value":2557},{"type":25,"tag":541,"props":3067,"children":3068},{"style":560},[3069],{"type":34,"value":1873},{"type":25,"tag":541,"props":3071,"children":3072},{"style":560},[3073],{"type":34,"value":3074},">\u003C\u002F",{"type":25,"tag":541,"props":3076,"children":3077},{"style":1378},[3078],{"type":34,"value":3048},{"type":25,"tag":541,"props":3080,"children":3081},{"style":560},[3082],{"type":34,"value":2845},{"type":25,"tag":541,"props":3084,"children":3085},{"class":543,"line":1514},[3086,3090,3094],{"type":25,"tag":541,"props":3087,"children":3088},{"style":560},[3089],{"type":34,"value":2956},{"type":25,"tag":541,"props":3091,"children":3092},{"style":1378},[3093],{"type":34,"value":2976},{"type":25,"tag":541,"props":3095,"children":3096},{"style":560},[3097],{"type":34,"value":2845},{"type":25,"tag":541,"props":3099,"children":3100},{"class":543,"line":1537},[3101,3105,3109],{"type":25,"tag":541,"props":3102,"children":3103},{"style":560},[3104],{"type":34,"value":3028},{"type":25,"tag":541,"props":3106,"children":3107},{"style":1378},[3108],{"type":34,"value":2818},{"type":25,"tag":541,"props":3110,"children":3111},{"style":560},[3112],{"type":34,"value":2845},{"type":25,"tag":30,"props":3114,"children":3115},{},[3116,3118],{"type":34,"value":3117},"To make it dynamic, we add in ",{"type":25,"tag":522,"props":3119,"children":3121},{"className":3120},[],[3122],{"type":34,"value":2557},{"type":25,"tag":531,"props":3124,"children":3127},{"className":3125,"code":3126,"language":2375,"meta":8,"style":8},"language-js shiki shiki-themes material-theme-palenight","let display = document.getElementById(\"unityDisplay\")\n\nchrome.storage.sync.get(\"unity\", ({ unity }) => {\n  if (unity) {\n    display.innerHTML = \"This page is using the production build of Unity WebGL.\"\n\n  }\n}); \n",[3128],{"type":25,"tag":522,"props":3129,"children":3130},{"__ignoreMap":8},[3131,3184,3191,3270,3296,3331,3338,3345],{"type":25,"tag":541,"props":3132,"children":3133},{"class":543,"line":544},[3134,3139,3144,3148,3153,3157,3162,3167,3171,3175,3179],{"type":25,"tag":541,"props":3135,"children":3136},{"style":1866},[3137],{"type":34,"value":3138},"let",{"type":25,"tag":541,"props":3140,"children":3141},{"style":566},[3142],{"type":34,"value":3143}," display ",{"type":25,"tag":541,"props":3145,"children":3146},{"style":560},[3147],{"type":34,"value":2901},{"type":25,"tag":541,"props":3149,"children":3150},{"style":566},[3151],{"type":34,"value":3152}," document",{"type":25,"tag":541,"props":3154,"children":3155},{"style":560},[3156],{"type":34,"value":2559},{"type":25,"tag":541,"props":3158,"children":3159},{"style":859},[3160],{"type":34,"value":3161},"getElementById",{"type":25,"tag":541,"props":3163,"children":3164},{"style":566},[3165],{"type":34,"value":3166},"(",{"type":25,"tag":541,"props":3168,"children":3169},{"style":560},[3170],{"type":34,"value":1873},{"type":25,"tag":541,"props":3172,"children":3173},{"style":554},[3174],{"type":34,"value":3009},{"type":25,"tag":541,"props":3176,"children":3177},{"style":560},[3178],{"type":34,"value":1873},{"type":25,"tag":541,"props":3180,"children":3181},{"style":566},[3182],{"type":34,"value":3183},")\n",{"type":25,"tag":541,"props":3185,"children":3186},{"class":543,"line":458},[3187],{"type":25,"tag":541,"props":3188,"children":3189},{"emptyLinePlaceholder":1495},[3190],{"type":34,"value":1498},{"type":25,"tag":541,"props":3192,"children":3193},{"class":543,"line":461},[3194,3198,3202,3206,3210,3215,3219,3224,3228,3232,3237,3241,3245,3250,3256,3261,3266],{"type":25,"tag":541,"props":3195,"children":3196},{"style":566},[3197],{"type":34,"value":1786},{"type":25,"tag":541,"props":3199,"children":3200},{"style":560},[3201],{"type":34,"value":2559},{"type":25,"tag":541,"props":3203,"children":3204},{"style":566},[3205],{"type":34,"value":2115},{"type":25,"tag":541,"props":3207,"children":3208},{"style":560},[3209],{"type":34,"value":2559},{"type":25,"tag":541,"props":3211,"children":3212},{"style":566},[3213],{"type":34,"value":3214},"sync",{"type":25,"tag":541,"props":3216,"children":3217},{"style":560},[3218],{"type":34,"value":2559},{"type":25,"tag":541,"props":3220,"children":3221},{"style":859},[3222],{"type":34,"value":3223},"get",{"type":25,"tag":541,"props":3225,"children":3226},{"style":566},[3227],{"type":34,"value":3166},{"type":25,"tag":541,"props":3229,"children":3230},{"style":560},[3231],{"type":34,"value":1873},{"type":25,"tag":541,"props":3233,"children":3234},{"style":554},[3235],{"type":34,"value":3236},"unity",{"type":25,"tag":541,"props":3238,"children":3239},{"style":560},[3240],{"type":34,"value":1873},{"type":25,"tag":541,"props":3242,"children":3243},{"style":560},[3244],{"type":34,"value":2106},{"type":25,"tag":541,"props":3246,"children":3247},{"style":560},[3248],{"type":34,"value":3249}," ({",{"type":25,"tag":541,"props":3251,"children":3253},{"style":3252},"--shiki-default:#BABED8;--shiki-default-font-style:italic",[3254],{"type":34,"value":3255}," unity",{"type":25,"tag":541,"props":3257,"children":3258},{"style":560},[3259],{"type":34,"value":3260}," })",{"type":25,"tag":541,"props":3262,"children":3263},{"style":1866},[3264],{"type":34,"value":3265}," =>",{"type":25,"tag":541,"props":3267,"children":3268},{"style":560},[3269],{"type":34,"value":2023},{"type":25,"tag":541,"props":3271,"children":3272},{"class":543,"line":1326},[3273,3278,3283,3287,3292],{"type":25,"tag":541,"props":3274,"children":3275},{"style":1683},[3276],{"type":34,"value":3277},"  if",{"type":25,"tag":541,"props":3279,"children":3280},{"style":1378},[3281],{"type":34,"value":3282}," (",{"type":25,"tag":541,"props":3284,"children":3285},{"style":566},[3286],{"type":34,"value":3236},{"type":25,"tag":541,"props":3288,"children":3289},{"style":1378},[3290],{"type":34,"value":3291},") ",{"type":25,"tag":541,"props":3293,"children":3294},{"style":560},[3295],{"type":34,"value":1855},{"type":25,"tag":541,"props":3297,"children":3298},{"class":543,"line":1447},[3299,3304,3308,3313,3318,3322,3327],{"type":25,"tag":541,"props":3300,"children":3301},{"style":566},[3302],{"type":34,"value":3303},"    display",{"type":25,"tag":541,"props":3305,"children":3306},{"style":560},[3307],{"type":34,"value":2559},{"type":25,"tag":541,"props":3309,"children":3310},{"style":566},[3311],{"type":34,"value":3312},"innerHTML",{"type":25,"tag":541,"props":3314,"children":3315},{"style":560},[3316],{"type":34,"value":3317}," =",{"type":25,"tag":541,"props":3319,"children":3320},{"style":560},[3321],{"type":34,"value":906},{"type":25,"tag":541,"props":3323,"children":3324},{"style":554},[3325],{"type":34,"value":3326},"This page is using the production build of Unity WebGL.",{"type":25,"tag":541,"props":3328,"children":3329},{"style":560},[3330],{"type":34,"value":916},{"type":25,"tag":541,"props":3332,"children":3333},{"class":543,"line":1460},[3334],{"type":25,"tag":541,"props":3335,"children":3336},{"emptyLinePlaceholder":1495},[3337],{"type":34,"value":1498},{"type":25,"tag":541,"props":3339,"children":3340},{"class":543,"line":1473},[3341],{"type":25,"tag":541,"props":3342,"children":3343},{"style":560},[3344],{"type":34,"value":2790},{"type":25,"tag":541,"props":3346,"children":3347},{"class":543,"line":1491},[3348,3352,3357],{"type":25,"tag":541,"props":3349,"children":3350},{"style":560},[3351],{"type":34,"value":605},{"type":25,"tag":541,"props":3353,"children":3354},{"style":566},[3355],{"type":34,"value":3356},")",{"type":25,"tag":541,"props":3358,"children":3359},{"style":560},[3360],{"type":34,"value":3361},";\n",{"type":25,"tag":62,"props":3363,"children":3365},{"id":3364},"website-blocking",[3366,3370],{"type":25,"tag":67,"props":3367,"children":3369},{"href":3368,"ariaHidden":70,"tabIndex":71},"#website-blocking",[],{"type":34,"value":3371},"Website Blocking",{"type":25,"tag":30,"props":3373,"children":3374},{},[3375,3377,3382],{"type":34,"value":3376},"Lastly, we have ",{"type":25,"tag":522,"props":3378,"children":3380},{"className":3379},[],[3381],{"type":34,"value":2396},{"type":34,"value":3383},", which is run whenever the page is loaded.\nThis is where we perform a chunk of our blocking website logic and unity detection:",{"type":25,"tag":531,"props":3385,"children":3387},{"className":3125,"code":3386,"language":2375,"meta":8,"style":8},"var htmlString = document.body.innerText;\n\n\nif (document.body.innerHTML.includes(\"Unity\")){\n  chrome.storage.sync.set({ unity : true });\n} else {\n  chrome.storage.sync.set({ unity : false });\n}\nchrome.runtime.sendMessage({greeting: \"hello\"}, function(response) {\n  console.log(response.farewell);\n});\n\n\nlet llist;\n\nfetch('https:\u002F\u002Ffiles.zhehaizhang.com\u002Fkeyword-blocker\u002Fblacklist.json').then(function(response){\n    return response.json();\n}).then(function(obj) {\n    llist = obj;\n    for (const link in llist) {\n      console.log(location.href)\n      if (location.href.includes(link) && !location.href.includes(\"404\")) {\n        location.replace(link+\"\u002F\"+llist[link]);\n      }\n\n    }\n}).catch(function(error){\n    console.error()\n});\n\n",[3388],{"type":25,"tag":522,"props":3389,"children":3390},{"__ignoreMap":8},[3391,3433,3440,3447,3511,3580,3596,3660,3667,3749,3791,3806,3813,3820,3836,3843,3904,3934,3978,3999,4038,4076,4176,4246,4253,4261,4269,4311,4333],{"type":25,"tag":541,"props":3392,"children":3393},{"class":543,"line":544},[3394,3399,3404,3408,3412,3416,3420,3424,3429],{"type":25,"tag":541,"props":3395,"children":3396},{"style":1866},[3397],{"type":34,"value":3398},"var",{"type":25,"tag":541,"props":3400,"children":3401},{"style":566},[3402],{"type":34,"value":3403}," htmlString ",{"type":25,"tag":541,"props":3405,"children":3406},{"style":560},[3407],{"type":34,"value":2901},{"type":25,"tag":541,"props":3409,"children":3410},{"style":566},[3411],{"type":34,"value":3152},{"type":25,"tag":541,"props":3413,"children":3414},{"style":560},[3415],{"type":34,"value":2559},{"type":25,"tag":541,"props":3417,"children":3418},{"style":566},[3419],{"type":34,"value":2976},{"type":25,"tag":541,"props":3421,"children":3422},{"style":560},[3423],{"type":34,"value":2559},{"type":25,"tag":541,"props":3425,"children":3426},{"style":566},[3427],{"type":34,"value":3428},"innerText",{"type":25,"tag":541,"props":3430,"children":3431},{"style":560},[3432],{"type":34,"value":3361},{"type":25,"tag":541,"props":3434,"children":3435},{"class":543,"line":458},[3436],{"type":25,"tag":541,"props":3437,"children":3438},{"emptyLinePlaceholder":1495},[3439],{"type":34,"value":1498},{"type":25,"tag":541,"props":3441,"children":3442},{"class":543,"line":461},[3443],{"type":25,"tag":541,"props":3444,"children":3445},{"emptyLinePlaceholder":1495},[3446],{"type":34,"value":1498},{"type":25,"tag":541,"props":3448,"children":3449},{"class":543,"line":1326},[3450,3455,3460,3464,3468,3472,3476,3480,3485,3489,3493,3498,3502,3507],{"type":25,"tag":541,"props":3451,"children":3452},{"style":1683},[3453],{"type":34,"value":3454},"if",{"type":25,"tag":541,"props":3456,"children":3457},{"style":566},[3458],{"type":34,"value":3459}," (document",{"type":25,"tag":541,"props":3461,"children":3462},{"style":560},[3463],{"type":34,"value":2559},{"type":25,"tag":541,"props":3465,"children":3466},{"style":566},[3467],{"type":34,"value":2976},{"type":25,"tag":541,"props":3469,"children":3470},{"style":560},[3471],{"type":34,"value":2559},{"type":25,"tag":541,"props":3473,"children":3474},{"style":566},[3475],{"type":34,"value":3312},{"type":25,"tag":541,"props":3477,"children":3478},{"style":560},[3479],{"type":34,"value":2559},{"type":25,"tag":541,"props":3481,"children":3482},{"style":859},[3483],{"type":34,"value":3484},"includes",{"type":25,"tag":541,"props":3486,"children":3487},{"style":566},[3488],{"type":34,"value":3166},{"type":25,"tag":541,"props":3490,"children":3491},{"style":560},[3492],{"type":34,"value":1873},{"type":25,"tag":541,"props":3494,"children":3495},{"style":554},[3496],{"type":34,"value":3497},"Unity",{"type":25,"tag":541,"props":3499,"children":3500},{"style":560},[3501],{"type":34,"value":1873},{"type":25,"tag":541,"props":3503,"children":3504},{"style":566},[3505],{"type":34,"value":3506},"))",{"type":25,"tag":541,"props":3508,"children":3509},{"style":560},[3510],{"type":34,"value":1855},{"type":25,"tag":541,"props":3512,"children":3513},{"class":543,"line":1447},[3514,3519,3523,3527,3531,3535,3539,3544,3548,3553,3558,3562,3567,3572,3576],{"type":25,"tag":541,"props":3515,"children":3516},{"style":566},[3517],{"type":34,"value":3518},"  chrome",{"type":25,"tag":541,"props":3520,"children":3521},{"style":560},[3522],{"type":34,"value":2559},{"type":25,"tag":541,"props":3524,"children":3525},{"style":566},[3526],{"type":34,"value":2115},{"type":25,"tag":541,"props":3528,"children":3529},{"style":560},[3530],{"type":34,"value":2559},{"type":25,"tag":541,"props":3532,"children":3533},{"style":566},[3534],{"type":34,"value":3214},{"type":25,"tag":541,"props":3536,"children":3537},{"style":560},[3538],{"type":34,"value":2559},{"type":25,"tag":541,"props":3540,"children":3541},{"style":859},[3542],{"type":34,"value":3543},"set",{"type":25,"tag":541,"props":3545,"children":3546},{"style":1378},[3547],{"type":34,"value":3166},{"type":25,"tag":541,"props":3549,"children":3550},{"style":560},[3551],{"type":34,"value":3552},"{",{"type":25,"tag":541,"props":3554,"children":3555},{"style":1378},[3556],{"type":34,"value":3557}," unity ",{"type":25,"tag":541,"props":3559,"children":3560},{"style":560},[3561],{"type":34,"value":1386},{"type":25,"tag":541,"props":3563,"children":3564},{"style":1397},[3565],{"type":34,"value":3566}," true",{"type":25,"tag":541,"props":3568,"children":3569},{"style":560},[3570],{"type":34,"value":3571}," }",{"type":25,"tag":541,"props":3573,"children":3574},{"style":1378},[3575],{"type":34,"value":3356},{"type":25,"tag":541,"props":3577,"children":3578},{"style":560},[3579],{"type":34,"value":3361},{"type":25,"tag":541,"props":3581,"children":3582},{"class":543,"line":1460},[3583,3587,3592],{"type":25,"tag":541,"props":3584,"children":3585},{"style":560},[3586],{"type":34,"value":605},{"type":25,"tag":541,"props":3588,"children":3589},{"style":1683},[3590],{"type":34,"value":3591}," else",{"type":25,"tag":541,"props":3593,"children":3594},{"style":560},[3595],{"type":34,"value":2023},{"type":25,"tag":541,"props":3597,"children":3598},{"class":543,"line":1473},[3599,3603,3607,3611,3615,3619,3623,3627,3631,3635,3639,3643,3648,3652,3656],{"type":25,"tag":541,"props":3600,"children":3601},{"style":566},[3602],{"type":34,"value":3518},{"type":25,"tag":541,"props":3604,"children":3605},{"style":560},[3606],{"type":34,"value":2559},{"type":25,"tag":541,"props":3608,"children":3609},{"style":566},[3610],{"type":34,"value":2115},{"type":25,"tag":541,"props":3612,"children":3613},{"style":560},[3614],{"type":34,"value":2559},{"type":25,"tag":541,"props":3616,"children":3617},{"style":566},[3618],{"type":34,"value":3214},{"type":25,"tag":541,"props":3620,"children":3621},{"style":560},[3622],{"type":34,"value":2559},{"type":25,"tag":541,"props":3624,"children":3625},{"style":859},[3626],{"type":34,"value":3543},{"type":25,"tag":541,"props":3628,"children":3629},{"style":1378},[3630],{"type":34,"value":3166},{"type":25,"tag":541,"props":3632,"children":3633},{"style":560},[3634],{"type":34,"value":3552},{"type":25,"tag":541,"props":3636,"children":3637},{"style":1378},[3638],{"type":34,"value":3557},{"type":25,"tag":541,"props":3640,"children":3641},{"style":560},[3642],{"type":34,"value":1386},{"type":25,"tag":541,"props":3644,"children":3645},{"style":1397},[3646],{"type":34,"value":3647}," false",{"type":25,"tag":541,"props":3649,"children":3650},{"style":560},[3651],{"type":34,"value":3571},{"type":25,"tag":541,"props":3653,"children":3654},{"style":1378},[3655],{"type":34,"value":3356},{"type":25,"tag":541,"props":3657,"children":3658},{"style":560},[3659],{"type":34,"value":3361},{"type":25,"tag":541,"props":3661,"children":3662},{"class":543,"line":1491},[3663],{"type":25,"tag":541,"props":3664,"children":3665},{"style":560},[3666],{"type":34,"value":574},{"type":25,"tag":541,"props":3668,"children":3669},{"class":543,"line":1501},[3670,3674,3678,3683,3687,3692,3696,3700,3705,3709,3713,3718,3722,3727,3732,3736,3741,3745],{"type":25,"tag":541,"props":3671,"children":3672},{"style":566},[3673],{"type":34,"value":1786},{"type":25,"tag":541,"props":3675,"children":3676},{"style":560},[3677],{"type":34,"value":2559},{"type":25,"tag":541,"props":3679,"children":3680},{"style":566},[3681],{"type":34,"value":3682},"runtime",{"type":25,"tag":541,"props":3684,"children":3685},{"style":560},[3686],{"type":34,"value":2559},{"type":25,"tag":541,"props":3688,"children":3689},{"style":859},[3690],{"type":34,"value":3691},"sendMessage",{"type":25,"tag":541,"props":3693,"children":3694},{"style":566},[3695],{"type":34,"value":3166},{"type":25,"tag":541,"props":3697,"children":3698},{"style":560},[3699],{"type":34,"value":3552},{"type":25,"tag":541,"props":3701,"children":3702},{"style":1378},[3703],{"type":34,"value":3704},"greeting",{"type":25,"tag":541,"props":3706,"children":3707},{"style":560},[3708],{"type":34,"value":1386},{"type":25,"tag":541,"props":3710,"children":3711},{"style":560},[3712],{"type":34,"value":906},{"type":25,"tag":541,"props":3714,"children":3715},{"style":554},[3716],{"type":34,"value":3717},"hello",{"type":25,"tag":541,"props":3719,"children":3720},{"style":560},[3721],{"type":34,"value":1873},{"type":25,"tag":541,"props":3723,"children":3724},{"style":560},[3725],{"type":34,"value":3726},"},",{"type":25,"tag":541,"props":3728,"children":3729},{"style":1866},[3730],{"type":34,"value":3731}," function",{"type":25,"tag":541,"props":3733,"children":3734},{"style":560},[3735],{"type":34,"value":3166},{"type":25,"tag":541,"props":3737,"children":3738},{"style":3252},[3739],{"type":34,"value":3740},"response",{"type":25,"tag":541,"props":3742,"children":3743},{"style":560},[3744],{"type":34,"value":3356},{"type":25,"tag":541,"props":3746,"children":3747},{"style":560},[3748],{"type":34,"value":2023},{"type":25,"tag":541,"props":3750,"children":3751},{"class":543,"line":1514},[3752,3757,3761,3766,3770,3774,3778,3783,3787],{"type":25,"tag":541,"props":3753,"children":3754},{"style":566},[3755],{"type":34,"value":3756},"  console",{"type":25,"tag":541,"props":3758,"children":3759},{"style":560},[3760],{"type":34,"value":2559},{"type":25,"tag":541,"props":3762,"children":3763},{"style":859},[3764],{"type":34,"value":3765},"log",{"type":25,"tag":541,"props":3767,"children":3768},{"style":1378},[3769],{"type":34,"value":3166},{"type":25,"tag":541,"props":3771,"children":3772},{"style":566},[3773],{"type":34,"value":3740},{"type":25,"tag":541,"props":3775,"children":3776},{"style":560},[3777],{"type":34,"value":2559},{"type":25,"tag":541,"props":3779,"children":3780},{"style":566},[3781],{"type":34,"value":3782},"farewell",{"type":25,"tag":541,"props":3784,"children":3785},{"style":1378},[3786],{"type":34,"value":3356},{"type":25,"tag":541,"props":3788,"children":3789},{"style":560},[3790],{"type":34,"value":3361},{"type":25,"tag":541,"props":3792,"children":3793},{"class":543,"line":1537},[3794,3798,3802],{"type":25,"tag":541,"props":3795,"children":3796},{"style":560},[3797],{"type":34,"value":605},{"type":25,"tag":541,"props":3799,"children":3800},{"style":566},[3801],{"type":34,"value":3356},{"type":25,"tag":541,"props":3803,"children":3804},{"style":560},[3805],{"type":34,"value":3361},{"type":25,"tag":541,"props":3807,"children":3808},{"class":543,"line":1545},[3809],{"type":25,"tag":541,"props":3810,"children":3811},{"emptyLinePlaceholder":1495},[3812],{"type":34,"value":1498},{"type":25,"tag":541,"props":3814,"children":3815},{"class":543,"line":1567},[3816],{"type":25,"tag":541,"props":3817,"children":3818},{"emptyLinePlaceholder":1495},[3819],{"type":34,"value":1498},{"type":25,"tag":541,"props":3821,"children":3822},{"class":543,"line":1585},[3823,3827,3832],{"type":25,"tag":541,"props":3824,"children":3825},{"style":1866},[3826],{"type":34,"value":3138},{"type":25,"tag":541,"props":3828,"children":3829},{"style":566},[3830],{"type":34,"value":3831}," llist",{"type":25,"tag":541,"props":3833,"children":3834},{"style":560},[3835],{"type":34,"value":3361},{"type":25,"tag":541,"props":3837,"children":3838},{"class":543,"line":1598},[3839],{"type":25,"tag":541,"props":3840,"children":3841},{"emptyLinePlaceholder":1495},[3842],{"type":34,"value":1498},{"type":25,"tag":541,"props":3844,"children":3845},{"class":543,"line":1616},[3846,3851,3855,3860,3865,3869,3873,3877,3882,3886,3891,3895,3899],{"type":25,"tag":541,"props":3847,"children":3848},{"style":859},[3849],{"type":34,"value":3850},"fetch",{"type":25,"tag":541,"props":3852,"children":3853},{"style":566},[3854],{"type":34,"value":3166},{"type":25,"tag":541,"props":3856,"children":3857},{"style":560},[3858],{"type":34,"value":3859},"'",{"type":25,"tag":541,"props":3861,"children":3862},{"style":554},[3863],{"type":34,"value":3864},"https:\u002F\u002Ffiles.zhehaizhang.com\u002Fkeyword-blocker\u002Fblacklist.json",{"type":25,"tag":541,"props":3866,"children":3867},{"style":560},[3868],{"type":34,"value":3859},{"type":25,"tag":541,"props":3870,"children":3871},{"style":566},[3872],{"type":34,"value":3356},{"type":25,"tag":541,"props":3874,"children":3875},{"style":560},[3876],{"type":34,"value":2559},{"type":25,"tag":541,"props":3878,"children":3879},{"style":859},[3880],{"type":34,"value":3881},"then",{"type":25,"tag":541,"props":3883,"children":3884},{"style":566},[3885],{"type":34,"value":3166},{"type":25,"tag":541,"props":3887,"children":3888},{"style":1866},[3889],{"type":34,"value":3890},"function",{"type":25,"tag":541,"props":3892,"children":3893},{"style":560},[3894],{"type":34,"value":3166},{"type":25,"tag":541,"props":3896,"children":3897},{"style":3252},[3898],{"type":34,"value":3740},{"type":25,"tag":541,"props":3900,"children":3901},{"style":560},[3902],{"type":34,"value":3903},"){\n",{"type":25,"tag":541,"props":3905,"children":3906},{"class":543,"line":1634},[3907,3912,3917,3921,3925,3930],{"type":25,"tag":541,"props":3908,"children":3909},{"style":1683},[3910],{"type":34,"value":3911},"    return",{"type":25,"tag":541,"props":3913,"children":3914},{"style":566},[3915],{"type":34,"value":3916}," response",{"type":25,"tag":541,"props":3918,"children":3919},{"style":560},[3920],{"type":34,"value":2559},{"type":25,"tag":541,"props":3922,"children":3923},{"style":859},[3924],{"type":34,"value":1843},{"type":25,"tag":541,"props":3926,"children":3927},{"style":1378},[3928],{"type":34,"value":3929},"()",{"type":25,"tag":541,"props":3931,"children":3932},{"style":560},[3933],{"type":34,"value":3361},{"type":25,"tag":541,"props":3935,"children":3936},{"class":543,"line":1652},[3937,3941,3945,3949,3953,3957,3961,3965,3970,3974],{"type":25,"tag":541,"props":3938,"children":3939},{"style":560},[3940],{"type":34,"value":605},{"type":25,"tag":541,"props":3942,"children":3943},{"style":566},[3944],{"type":34,"value":3356},{"type":25,"tag":541,"props":3946,"children":3947},{"style":560},[3948],{"type":34,"value":2559},{"type":25,"tag":541,"props":3950,"children":3951},{"style":859},[3952],{"type":34,"value":3881},{"type":25,"tag":541,"props":3954,"children":3955},{"style":566},[3956],{"type":34,"value":3166},{"type":25,"tag":541,"props":3958,"children":3959},{"style":1866},[3960],{"type":34,"value":3890},{"type":25,"tag":541,"props":3962,"children":3963},{"style":560},[3964],{"type":34,"value":3166},{"type":25,"tag":541,"props":3966,"children":3967},{"style":3252},[3968],{"type":34,"value":3969},"obj",{"type":25,"tag":541,"props":3971,"children":3972},{"style":560},[3973],{"type":34,"value":3356},{"type":25,"tag":541,"props":3975,"children":3976},{"style":560},[3977],{"type":34,"value":2023},{"type":25,"tag":541,"props":3979,"children":3980},{"class":543,"line":1670},[3981,3986,3990,3995],{"type":25,"tag":541,"props":3982,"children":3983},{"style":566},[3984],{"type":34,"value":3985},"    llist",{"type":25,"tag":541,"props":3987,"children":3988},{"style":560},[3989],{"type":34,"value":3317},{"type":25,"tag":541,"props":3991,"children":3992},{"style":566},[3993],{"type":34,"value":3994}," obj",{"type":25,"tag":541,"props":3996,"children":3997},{"style":560},[3998],{"type":34,"value":3361},{"type":25,"tag":541,"props":4000,"children":4001},{"class":543,"line":1689},[4002,4007,4011,4016,4021,4026,4030,4034],{"type":25,"tag":541,"props":4003,"children":4004},{"style":1683},[4005],{"type":34,"value":4006},"    for",{"type":25,"tag":541,"props":4008,"children":4009},{"style":1378},[4010],{"type":34,"value":3282},{"type":25,"tag":541,"props":4012,"children":4013},{"style":1866},[4014],{"type":34,"value":4015},"const",{"type":25,"tag":541,"props":4017,"children":4018},{"style":566},[4019],{"type":34,"value":4020}," link",{"type":25,"tag":541,"props":4022,"children":4023},{"style":560},[4024],{"type":34,"value":4025}," in",{"type":25,"tag":541,"props":4027,"children":4028},{"style":566},[4029],{"type":34,"value":3831},{"type":25,"tag":541,"props":4031,"children":4032},{"style":1378},[4033],{"type":34,"value":3291},{"type":25,"tag":541,"props":4035,"children":4036},{"style":560},[4037],{"type":34,"value":1855},{"type":25,"tag":541,"props":4039,"children":4040},{"class":543,"line":1698},[4041,4046,4050,4054,4058,4063,4067,4072],{"type":25,"tag":541,"props":4042,"children":4043},{"style":566},[4044],{"type":34,"value":4045},"      console",{"type":25,"tag":541,"props":4047,"children":4048},{"style":560},[4049],{"type":34,"value":2559},{"type":25,"tag":541,"props":4051,"children":4052},{"style":859},[4053],{"type":34,"value":3765},{"type":25,"tag":541,"props":4055,"children":4056},{"style":1378},[4057],{"type":34,"value":3166},{"type":25,"tag":541,"props":4059,"children":4060},{"style":566},[4061],{"type":34,"value":4062},"location",{"type":25,"tag":541,"props":4064,"children":4065},{"style":560},[4066],{"type":34,"value":2559},{"type":25,"tag":541,"props":4068,"children":4069},{"style":566},[4070],{"type":34,"value":4071},"href",{"type":25,"tag":541,"props":4073,"children":4074},{"style":1378},[4075],{"type":34,"value":3183},{"type":25,"tag":541,"props":4077,"children":4078},{"class":543,"line":1707},[4079,4084,4088,4092,4096,4100,4104,4108,4112,4116,4120,4125,4130,4134,4138,4142,4146,4150,4154,4158,4163,4167,4172],{"type":25,"tag":541,"props":4080,"children":4081},{"style":1683},[4082],{"type":34,"value":4083},"      if",{"type":25,"tag":541,"props":4085,"children":4086},{"style":1378},[4087],{"type":34,"value":3282},{"type":25,"tag":541,"props":4089,"children":4090},{"style":566},[4091],{"type":34,"value":4062},{"type":25,"tag":541,"props":4093,"children":4094},{"style":560},[4095],{"type":34,"value":2559},{"type":25,"tag":541,"props":4097,"children":4098},{"style":566},[4099],{"type":34,"value":4071},{"type":25,"tag":541,"props":4101,"children":4102},{"style":560},[4103],{"type":34,"value":2559},{"type":25,"tag":541,"props":4105,"children":4106},{"style":859},[4107],{"type":34,"value":3484},{"type":25,"tag":541,"props":4109,"children":4110},{"style":1378},[4111],{"type":34,"value":3166},{"type":25,"tag":541,"props":4113,"children":4114},{"style":566},[4115],{"type":34,"value":2891},{"type":25,"tag":541,"props":4117,"children":4118},{"style":1378},[4119],{"type":34,"value":3291},{"type":25,"tag":541,"props":4121,"children":4122},{"style":560},[4123],{"type":34,"value":4124},"&&",{"type":25,"tag":541,"props":4126,"children":4127},{"style":560},[4128],{"type":34,"value":4129}," !",{"type":25,"tag":541,"props":4131,"children":4132},{"style":566},[4133],{"type":34,"value":4062},{"type":25,"tag":541,"props":4135,"children":4136},{"style":560},[4137],{"type":34,"value":2559},{"type":25,"tag":541,"props":4139,"children":4140},{"style":566},[4141],{"type":34,"value":4071},{"type":25,"tag":541,"props":4143,"children":4144},{"style":560},[4145],{"type":34,"value":2559},{"type":25,"tag":541,"props":4147,"children":4148},{"style":859},[4149],{"type":34,"value":3484},{"type":25,"tag":541,"props":4151,"children":4152},{"style":1378},[4153],{"type":34,"value":3166},{"type":25,"tag":541,"props":4155,"children":4156},{"style":560},[4157],{"type":34,"value":1873},{"type":25,"tag":541,"props":4159,"children":4160},{"style":554},[4161],{"type":34,"value":4162},"404",{"type":25,"tag":541,"props":4164,"children":4165},{"style":560},[4166],{"type":34,"value":1873},{"type":25,"tag":541,"props":4168,"children":4169},{"style":1378},[4170],{"type":34,"value":4171},")) ",{"type":25,"tag":541,"props":4173,"children":4174},{"style":560},[4175],{"type":34,"value":1855},{"type":25,"tag":541,"props":4177,"children":4178},{"class":543,"line":1716},[4179,4184,4188,4193,4197,4201,4206,4210,4215,4219,4223,4228,4233,4237,4242],{"type":25,"tag":541,"props":4180,"children":4181},{"style":566},[4182],{"type":34,"value":4183},"        location",{"type":25,"tag":541,"props":4185,"children":4186},{"style":560},[4187],{"type":34,"value":2559},{"type":25,"tag":541,"props":4189,"children":4190},{"style":859},[4191],{"type":34,"value":4192},"replace",{"type":25,"tag":541,"props":4194,"children":4195},{"style":1378},[4196],{"type":34,"value":3166},{"type":25,"tag":541,"props":4198,"children":4199},{"style":566},[4200],{"type":34,"value":2891},{"type":25,"tag":541,"props":4202,"children":4203},{"style":560},[4204],{"type":34,"value":4205},"+",{"type":25,"tag":541,"props":4207,"children":4208},{"style":560},[4209],{"type":34,"value":1873},{"type":25,"tag":541,"props":4211,"children":4212},{"style":554},[4213],{"type":34,"value":4214},"\u002F",{"type":25,"tag":541,"props":4216,"children":4217},{"style":560},[4218],{"type":34,"value":1873},{"type":25,"tag":541,"props":4220,"children":4221},{"style":560},[4222],{"type":34,"value":4205},{"type":25,"tag":541,"props":4224,"children":4225},{"style":566},[4226],{"type":34,"value":4227},"llist",{"type":25,"tag":541,"props":4229,"children":4230},{"style":1378},[4231],{"type":34,"value":4232},"[",{"type":25,"tag":541,"props":4234,"children":4235},{"style":566},[4236],{"type":34,"value":2891},{"type":25,"tag":541,"props":4238,"children":4239},{"style":1378},[4240],{"type":34,"value":4241},"])",{"type":25,"tag":541,"props":4243,"children":4244},{"style":560},[4245],{"type":34,"value":3361},{"type":25,"tag":541,"props":4247,"children":4248},{"class":543,"line":1725},[4249],{"type":25,"tag":541,"props":4250,"children":4251},{"style":560},[4252],{"type":34,"value":2758},{"type":25,"tag":541,"props":4254,"children":4256},{"class":543,"line":4255},25,[4257],{"type":25,"tag":541,"props":4258,"children":4259},{"emptyLinePlaceholder":1495},[4260],{"type":34,"value":1498},{"type":25,"tag":541,"props":4262,"children":4264},{"class":543,"line":4263},26,[4265],{"type":25,"tag":541,"props":4266,"children":4267},{"style":560},[4268],{"type":34,"value":2268},{"type":25,"tag":541,"props":4270,"children":4272},{"class":543,"line":4271},27,[4273,4277,4281,4285,4290,4294,4298,4302,4307],{"type":25,"tag":541,"props":4274,"children":4275},{"style":560},[4276],{"type":34,"value":605},{"type":25,"tag":541,"props":4278,"children":4279},{"style":566},[4280],{"type":34,"value":3356},{"type":25,"tag":541,"props":4282,"children":4283},{"style":560},[4284],{"type":34,"value":2559},{"type":25,"tag":541,"props":4286,"children":4287},{"style":859},[4288],{"type":34,"value":4289},"catch",{"type":25,"tag":541,"props":4291,"children":4292},{"style":566},[4293],{"type":34,"value":3166},{"type":25,"tag":541,"props":4295,"children":4296},{"style":1866},[4297],{"type":34,"value":3890},{"type":25,"tag":541,"props":4299,"children":4300},{"style":560},[4301],{"type":34,"value":3166},{"type":25,"tag":541,"props":4303,"children":4304},{"style":3252},[4305],{"type":34,"value":4306},"error",{"type":25,"tag":541,"props":4308,"children":4309},{"style":560},[4310],{"type":34,"value":3903},{"type":25,"tag":541,"props":4312,"children":4314},{"class":543,"line":4313},28,[4315,4320,4324,4328],{"type":25,"tag":541,"props":4316,"children":4317},{"style":566},[4318],{"type":34,"value":4319},"    console",{"type":25,"tag":541,"props":4321,"children":4322},{"style":560},[4323],{"type":34,"value":2559},{"type":25,"tag":541,"props":4325,"children":4326},{"style":859},[4327],{"type":34,"value":4306},{"type":25,"tag":541,"props":4329,"children":4330},{"style":1378},[4331],{"type":34,"value":4332},"()\n",{"type":25,"tag":541,"props":4334,"children":4336},{"class":543,"line":4335},29,[4337,4341,4345],{"type":25,"tag":541,"props":4338,"children":4339},{"style":560},[4340],{"type":34,"value":605},{"type":25,"tag":541,"props":4342,"children":4343},{"style":566},[4344],{"type":34,"value":3356},{"type":25,"tag":541,"props":4346,"children":4347},{"style":560},[4348],{"type":34,"value":3361},{"type":25,"tag":30,"props":4350,"children":4351},{},[4352,4354,4359,4361,4366],{"type":34,"value":4353},"To check for unity, I simply look for the string Unity inside the html. If it's detected,\nthen I set the unity flag to true. I do this by sending an event to ",{"type":25,"tag":522,"props":4355,"children":4357},{"className":4356},[],[4358],{"type":34,"value":2053},{"type":34,"value":4360},", using the ",{"type":25,"tag":522,"props":4362,"children":4364},{"className":4363},[],[4365],{"type":34,"value":3691},{"type":34,"value":4367}," listener.",{"type":25,"tag":30,"props":4369,"children":4370},{},[4371],{"type":34,"value":4372},"For blocking websites, I fetch a json object which will contain the websites I want to block and what url I want to redirect it to. This way, I can continuously add\u002Fremove websites that I want to block without changing the actual chrome extension every single time.",{"type":25,"tag":30,"props":4374,"children":4375},{},[4376],{"type":34,"value":4377},"This is an example of a json object I use:",{"type":25,"tag":531,"props":4379,"children":4381},{"className":1841,"code":4380,"language":1843,"meta":8,"style":8},"{\n  woomy-arras.io: \"404\",\n  diep.io: \"404\",\n  arras.io: \"404\",\n  youtube.com: \"404\",\n  zombs.io: \"404\"\n}\n",[4382],{"type":25,"tag":522,"props":4383,"children":4384},{"__ignoreMap":8},[4385,4392,4420,4448,4476,4504,4528],{"type":25,"tag":541,"props":4386,"children":4387},{"class":543,"line":544},[4388],{"type":25,"tag":541,"props":4389,"children":4390},{"style":560},[4391],{"type":34,"value":1855},{"type":25,"tag":541,"props":4393,"children":4394},{"class":543,"line":458},[4395,4400,4404,4408,4412,4416],{"type":25,"tag":541,"props":4396,"children":4397},{"style":566},[4398],{"type":34,"value":4399},"  woomy-arras.io",{"type":25,"tag":541,"props":4401,"children":4402},{"style":560},[4403],{"type":34,"value":1386},{"type":25,"tag":541,"props":4405,"children":4406},{"style":560},[4407],{"type":34,"value":906},{"type":25,"tag":541,"props":4409,"children":4410},{"style":554},[4411],{"type":34,"value":4162},{"type":25,"tag":541,"props":4413,"children":4414},{"style":560},[4415],{"type":34,"value":1873},{"type":25,"tag":541,"props":4417,"children":4418},{"style":560},[4419],{"type":34,"value":1895},{"type":25,"tag":541,"props":4421,"children":4422},{"class":543,"line":461},[4423,4428,4432,4436,4440,4444],{"type":25,"tag":541,"props":4424,"children":4425},{"style":566},[4426],{"type":34,"value":4427},"  diep.io",{"type":25,"tag":541,"props":4429,"children":4430},{"style":560},[4431],{"type":34,"value":1386},{"type":25,"tag":541,"props":4433,"children":4434},{"style":560},[4435],{"type":34,"value":906},{"type":25,"tag":541,"props":4437,"children":4438},{"style":554},[4439],{"type":34,"value":4162},{"type":25,"tag":541,"props":4441,"children":4442},{"style":560},[4443],{"type":34,"value":1873},{"type":25,"tag":541,"props":4445,"children":4446},{"style":560},[4447],{"type":34,"value":1895},{"type":25,"tag":541,"props":4449,"children":4450},{"class":543,"line":1326},[4451,4456,4460,4464,4468,4472],{"type":25,"tag":541,"props":4452,"children":4453},{"style":566},[4454],{"type":34,"value":4455},"  arras.io",{"type":25,"tag":541,"props":4457,"children":4458},{"style":560},[4459],{"type":34,"value":1386},{"type":25,"tag":541,"props":4461,"children":4462},{"style":560},[4463],{"type":34,"value":906},{"type":25,"tag":541,"props":4465,"children":4466},{"style":554},[4467],{"type":34,"value":4162},{"type":25,"tag":541,"props":4469,"children":4470},{"style":560},[4471],{"type":34,"value":1873},{"type":25,"tag":541,"props":4473,"children":4474},{"style":560},[4475],{"type":34,"value":1895},{"type":25,"tag":541,"props":4477,"children":4478},{"class":543,"line":1447},[4479,4484,4488,4492,4496,4500],{"type":25,"tag":541,"props":4480,"children":4481},{"style":566},[4482],{"type":34,"value":4483},"  youtube.com",{"type":25,"tag":541,"props":4485,"children":4486},{"style":560},[4487],{"type":34,"value":1386},{"type":25,"tag":541,"props":4489,"children":4490},{"style":560},[4491],{"type":34,"value":906},{"type":25,"tag":541,"props":4493,"children":4494},{"style":554},[4495],{"type":34,"value":4162},{"type":25,"tag":541,"props":4497,"children":4498},{"style":560},[4499],{"type":34,"value":1873},{"type":25,"tag":541,"props":4501,"children":4502},{"style":560},[4503],{"type":34,"value":1895},{"type":25,"tag":541,"props":4505,"children":4506},{"class":543,"line":1460},[4507,4512,4516,4520,4524],{"type":25,"tag":541,"props":4508,"children":4509},{"style":566},[4510],{"type":34,"value":4511},"  zombs.io",{"type":25,"tag":541,"props":4513,"children":4514},{"style":560},[4515],{"type":34,"value":1386},{"type":25,"tag":541,"props":4517,"children":4518},{"style":560},[4519],{"type":34,"value":906},{"type":25,"tag":541,"props":4521,"children":4522},{"style":554},[4523],{"type":34,"value":4162},{"type":25,"tag":541,"props":4525,"children":4526},{"style":560},[4527],{"type":34,"value":916},{"type":25,"tag":541,"props":4529,"children":4530},{"class":543,"line":1473},[4531],{"type":25,"tag":541,"props":4532,"children":4533},{"style":560},[4534],{"type":34,"value":574},{"type":25,"tag":30,"props":4536,"children":4537},{},[4538],{"type":34,"value":4539},"That's it for the extension portion! To add it to your Chrome browser, you must enable developer options in the extension settings page, and click load unpacked, in which you will load the folder you created everything in. Since the extension will stop working if you remove the folder or change its location, I suggest moving it into a folder that the user won't be suspicious about, and make sure that it's hidden from viewing.",{"type":25,"tag":506,"props":4541,"children":4543},{"id":4542},"how-would-i-make-this-even-more-dynamic",[4544,4548],{"type":25,"tag":67,"props":4545,"children":4547},{"href":4546,"ariaHidden":70,"tabIndex":71},"#how-would-i-make-this-even-more-dynamic",[],{"type":34,"value":4549},"How would I make this even more dynamic?",{"type":25,"tag":30,"props":4551,"children":4552},{},[4553],{"type":34,"value":4554},"Say you want to restrict certain websites during work time, but after your work is done, you would like to be able to go on those sites again. Well this is where cron jobs come in! I have my file hosted on my own VPS, so if you're hosting it, then it's very easy to set up:",{"type":25,"tag":30,"props":4556,"children":4557},{},[4558],{"type":34,"value":4559},"To make a cron job, do",{"type":25,"tag":531,"props":4561,"children":4563},{"className":535,"code":4562,"language":534,"meta":8,"style":8},"crontab -e\n",[4564],{"type":25,"tag":522,"props":4565,"children":4566},{"__ignoreMap":8},[4567],{"type":25,"tag":541,"props":4568,"children":4569},{"class":543,"line":544},[4570,4575],{"type":25,"tag":541,"props":4571,"children":4572},{"style":548},[4573],{"type":34,"value":4574},"crontab",{"type":25,"tag":541,"props":4576,"children":4577},{"style":554},[4578],{"type":34,"value":4579}," -e\n",{"type":25,"tag":30,"props":4581,"children":4582},{},[4583],{"type":34,"value":4584},"This is where we will be adding our own cron job. I will add one for enabling the blacklist,\nand another one for disabling the blacklist.",{"type":25,"tag":531,"props":4586,"children":4588},{"className":535,"code":4587,"language":534,"meta":8,"style":8},"0 9 * * * cp path\u002Fto\u002Factualfile.json path\u002Fto\u002Fblacklist.json\n0 18 * * * cp path\u002Fto\u002Femptyfile.json path\u002Fto\u002Fblacklist.json\n",[4589],{"type":25,"tag":522,"props":4590,"children":4591},{"__ignoreMap":8},[4592,4633],{"type":25,"tag":541,"props":4593,"children":4594},{"class":543,"line":544},[4595,4600,4605,4610,4614,4618,4623,4628],{"type":25,"tag":541,"props":4596,"children":4597},{"style":548},[4598],{"type":34,"value":4599},"0",{"type":25,"tag":541,"props":4601,"children":4602},{"style":893},[4603],{"type":34,"value":4604}," 9",{"type":25,"tag":541,"props":4606,"children":4607},{"style":566},[4608],{"type":34,"value":4609}," *",{"type":25,"tag":541,"props":4611,"children":4612},{"style":566},[4613],{"type":34,"value":4609},{"type":25,"tag":541,"props":4615,"children":4616},{"style":566},[4617],{"type":34,"value":4609},{"type":25,"tag":541,"props":4619,"children":4620},{"style":554},[4621],{"type":34,"value":4622}," cp",{"type":25,"tag":541,"props":4624,"children":4625},{"style":554},[4626],{"type":34,"value":4627}," path\u002Fto\u002Factualfile.json",{"type":25,"tag":541,"props":4629,"children":4630},{"style":554},[4631],{"type":34,"value":4632}," path\u002Fto\u002Fblacklist.json\n",{"type":25,"tag":541,"props":4634,"children":4635},{"class":543,"line":458},[4636,4640,4645,4649,4653,4657,4661,4666],{"type":25,"tag":541,"props":4637,"children":4638},{"style":548},[4639],{"type":34,"value":4599},{"type":25,"tag":541,"props":4641,"children":4642},{"style":893},[4643],{"type":34,"value":4644}," 18",{"type":25,"tag":541,"props":4646,"children":4647},{"style":566},[4648],{"type":34,"value":4609},{"type":25,"tag":541,"props":4650,"children":4651},{"style":566},[4652],{"type":34,"value":4609},{"type":25,"tag":541,"props":4654,"children":4655},{"style":566},[4656],{"type":34,"value":4609},{"type":25,"tag":541,"props":4658,"children":4659},{"style":554},[4660],{"type":34,"value":4622},{"type":25,"tag":541,"props":4662,"children":4663},{"style":554},[4664],{"type":34,"value":4665}," path\u002Fto\u002Femptyfile.json",{"type":25,"tag":541,"props":4667,"children":4668},{"style":554},[4669],{"type":34,"value":4632},{"type":25,"tag":30,"props":4671,"children":4672},{},[4673],{"type":34,"value":4674},"The first 5 numbers represent",{"type":25,"tag":1129,"props":4676,"children":4677},{},[4678,4683,4688,4693,4698],{"type":25,"tag":1099,"props":4679,"children":4680},{},[4681],{"type":34,"value":4682},"minute",{"type":25,"tag":1099,"props":4684,"children":4685},{},[4686],{"type":34,"value":4687},"hour",{"type":25,"tag":1099,"props":4689,"children":4690},{},[4691],{"type":34,"value":4692},"day of month",{"type":25,"tag":1099,"props":4694,"children":4695},{},[4696],{"type":34,"value":4697},"month",{"type":25,"tag":1099,"props":4699,"children":4700},{},[4701],{"type":34,"value":4702},"day of week",{"type":25,"tag":30,"props":4704,"children":4705},{},[4706],{"type":34,"value":4707},"Use the star if it does not matter to you.\nAs seen, I am copying the file that stores my blacklist to the blacklist file that is being fetched, at 9 in the morning, and I'm subbing it with an empty file when it's 6pm.",{"type":25,"tag":506,"props":4709,"children":4711},{"id":4710},"source-code",[4712,4716],{"type":25,"tag":67,"props":4713,"children":4715},{"href":4714,"ariaHidden":70,"tabIndex":71},"#source-code",[],{"type":34,"value":4717},"Source code",{"type":25,"tag":30,"props":4719,"children":4720},{},[4721,4723,4731],{"type":34,"value":4722},"I have it on ",{"type":25,"tag":67,"props":4724,"children":4728},{"href":4725,"rel":4726},"https:\u002F\u002Fgithub.com\u002Ffairnightzz\u002Fblock-websites",[4727],"nofollow",[4729],{"type":34,"value":4730},"Github",{"type":34,"value":2559},{"type":25,"tag":26,"props":4733,"children":4734},{},[4735],{"type":34,"value":1046},{"title":8,"searchDepth":458,"depth":458,"links":4737},[4738,4742,4743],{"id":1809,"depth":458,"text":1816,"children":4739},[4740,4741],{"id":2525,"depth":461,"text":2532},{"id":3364,"depth":461,"text":3371},{"id":4542,"depth":458,"text":4549},{"id":4710,"depth":458,"text":4717},"content:articles:block-websites.md","articles\u002Fblock-websites.md","articles\u002Fblock-websites",{"_path":4748,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":4749,"description":4750,"img":4751,"alt":4752,"author":4753,"tags":4754,"date":4757,"body":4758,"_type":475,"_id":5165,"_source":477,"_file":5166,"_stem":5167,"_extension":480},"\u002Farticles\u002Fshang-chi-movie-review","Shang Chi Movie Review","One small step for Marvel, one giant leap for Asian representation in American movies.","https:\u002F\u002Fimages.squarespace-cdn.com\u002Fcontent\u002Fv1\u002F59d7e2c7e45a7c0ce235bb55\u002F1629630384950-VWKC0QFWL4T5A5F4CU62\u002FFilm-Review-Marvel-Shang-Chi.jpg","Shang Chi Movie",{"name":14,"img":15},[4755,4756],"movie","shangchi","2021-09-10",{"type":22,"children":4759,"toc":5151},[4760,4763,4772,4785,4790,4800,4805,4815,4825,4861,4869,4888,4900,4908,4913,4921,4933,4943,4955,4963,4968,4978,5000,5005,5013,5023,5033,5038,5048,5053,5061,5066,5076,5083,5088,5095,5105,5110,5118,5128,5133,5141],{"type":25,"tag":26,"props":4761,"children":4762},{},[],{"type":25,"tag":506,"props":4764,"children":4766},{"id":4765},"shang-chi-movie-review",[4767,4771],{"type":25,"tag":67,"props":4768,"children":4770},{"href":4769,"ariaHidden":70,"tabIndex":71},"#shang-chi-movie-review",[],{"type":34,"value":4749},{"type":25,"tag":30,"props":4773,"children":4774},{},[4775,4777,4783],{"type":34,"value":4776},"As an avid fan of the Marvel Cinematic Universe, I love a good superhero movie. ",{"type":25,"tag":4778,"props":4779,"children":4780},"em",{},[4781],{"type":34,"value":4782},"Especially",{"type":34,"value":4784}," when it comes to tear jerking scenes, deep origin stories, and of course, hot-headed action, I'm always at the edge of my seat, wanting more. I only recently started posting more in my blog, in an effort record interesting moments in my life and learn how to write things based on intuition. This movie particularly, is an important milestone for Asian representation in Marvel films, which I find to be monumental in the pursuit of diversity and culture, which is part of the reason I'm writing a review for it in the first place. Without further ado, let's get started!",{"type":25,"tag":4786,"props":4787,"children":4789},"img",{"src":4788},"https:\u002F\u002Fhips.hearstapps.com\u002Fhmg-prod.s3.amazonaws.com\u002Fimages\u002Fshang-chi-1629920077.jpeg",[],{"type":25,"tag":62,"props":4791,"children":4793},{"id":4792},"how-this-review-is-structured",[4794,4798],{"type":25,"tag":67,"props":4795,"children":4797},{"href":4796,"ariaHidden":70,"tabIndex":71},"#how-this-review-is-structured",[],{"type":34,"value":4799},"How this review is structured",{"type":25,"tag":30,"props":4801,"children":4802},{},[4803],{"type":34,"value":4804},"I've never really written any reviews before, so I decided to borrow a guide off of a website which listed 8 important factors that make a movie \"good\". (link website later). I will be giving each factor a rating out of 10. Without further ado, let's get started!",{"type":25,"tag":30,"props":4806,"children":4807},{},[4808,4813],{"type":25,"tag":699,"props":4809,"children":4810},{},[4811],{"type":34,"value":4812},"WARNING",{"type":34,"value":4814},": There will be a lot of spoilers.",{"type":25,"tag":506,"props":4816,"children":4818},{"id":4817},"_1-plot-910",[4819,4823],{"type":25,"tag":67,"props":4820,"children":4822},{"href":4821,"ariaHidden":70,"tabIndex":71},"#1-plot-910",[],{"type":34,"value":4824},"1. Plot: 9\u002F10",{"type":25,"tag":30,"props":4826,"children":4827},{},[4828,4830,4835,4836,4841,4842,4847,4848,4853,4854,4859],{"type":34,"value":4829},"Initially, I thought the plot was pretty generic, but that's just how it is for any Marvel origin story - the main character is living a normal life until a 1 dimensional bad guy comes out of nowhere with the goal of destroying Earth. Now, they have to use their newly gained skills to defeat the enemy. This doesn't seem familiar to you? Just to name a few - ",{"type":25,"tag":4778,"props":4831,"children":4832},{},[4833],{"type":34,"value":4834},"Doctor Strange",{"type":34,"value":2544},{"type":25,"tag":4778,"props":4837,"children":4838},{},[4839],{"type":34,"value":4840},"Captain America",{"type":34,"value":2544},{"type":25,"tag":4778,"props":4843,"children":4844},{},[4845],{"type":34,"value":4846},"Captain Marvel",{"type":34,"value":2544},{"type":25,"tag":4778,"props":4849,"children":4850},{},[4851],{"type":34,"value":4852},"Thor",{"type":34,"value":2544},{"type":25,"tag":4778,"props":4855,"children":4856},{},[4857],{"type":34,"value":4858},"Ant-Man",{"type":34,"value":4860},"; I think you get the point by now. It's not even their fault either, that's just how villains are, it's the easiest way to show a hero's journey - by defeating a bad guy who can pose a lot of damage if left unchecked.",{"type":25,"tag":30,"props":4862,"children":4863},{},[4864],{"type":25,"tag":4786,"props":4865,"children":4868},{"alt":4866,"src":4867},"Shang Chi and Iron Man","https:\u002F\u002Fimages.indianexpress.com\u002F2021\u002F08\u002Fshang-chi-iron-man-1200.jpg",[],{"type":25,"tag":30,"props":4870,"children":4871},{},[4872,4874,4879,4881,4886],{"type":34,"value":4873},"However as always, there are certain origin story movies that break the mold - ",{"type":25,"tag":4778,"props":4875,"children":4876},{},[4877],{"type":34,"value":4878},"Iron Man",{"type":34,"value":4880}," for instance. The main enemy wasn't Obadiah Stane, it was his company's ideals and how he fought to change his company and himself (his personality wasn't the best). In ",{"type":25,"tag":4778,"props":4882,"children":4883},{},[4884],{"type":34,"value":4885},"Black Panther",{"type":34,"value":4887},", the main antagonist was Michael B. Jordan and his goal to rule Wakanda, which started due to a mistake T'Challa's father made, forced T'Challa to take lead and resolve his will for the throne.",{"type":25,"tag":30,"props":4889,"children":4890},{},[4891,4893,4898],{"type":34,"value":4892},"In ",{"type":25,"tag":4778,"props":4894,"children":4895},{},[4896],{"type":34,"value":4897},"Shang Chi and the Ten Rings",{"type":34,"value":4899},", the movie starts off by introducing Tony Leung, the dad. Using the mystical 10 rings, he conquered many lands and countries for 1000 years. How'd he live for so long, the rings, of course. Eventually, he discovered a woman who lived in a mysterious forest - where the two fell in love. Slowly but surely, he stopped his reckless behaviour in order to start a family, where they had Shang Chi and Xialing. For unknown reasons not revealed yet, Shang Chi's mother dies, and his father (the Mandarin) falls into grief for a long period of time. He trains Shang Chi to be plenty strong - being trained at a young age in martial arts, he learnt everything ranging from using weapons, to torture, and how to kill a man. At a certain point, Shang Chi is fed up with everything and leaves to America to live a normal life as a valet driver.",{"type":25,"tag":30,"props":4901,"children":4902},{},[4903],{"type":25,"tag":4786,"props":4904,"children":4907},{"alt":4905,"src":4906},"Shang Chi and Katy as valet drivers","https:\u002F\u002Fwww.gannett-cdn.com\u002Fpresto\u002F2021\u002F08\u002F20\u002FUSAT\u002Fd83b6e08-513b-4bba-b2e9-1a69e8a6b585-SBT-31998.jpg?width=660&height=440&fit=crop&format=pjpg&auto=webp",[],{"type":25,"tag":30,"props":4909,"children":4910},{},[4911],{"type":34,"value":4912},"Eventually, he gets recalled back to China by his dad, where he reunites with his long lost sister, only to learn that their dad found a way to save their mother, who is supposedly locked up in the village she grew up in. Here, the obvious antagonist is the village, and they must rescue their mother. However, it's quickly pointed out that the father is being delusional and there is a larger enemy at play here. It turns out that there are soul sucking creatures trapped in a different dimension, and the village is preventing it from being opened. The dad was being influenced by those creatures because they can sense that the 10 rings are strong enough to break them out.",{"type":25,"tag":30,"props":4914,"children":4915},{},[4916],{"type":25,"tag":4786,"props":4917,"children":4920},{"alt":4918,"src":4919},"Mandarin using the 10 rings","https:\u002F\u002Fgeekculture.co\u002Fwp-content\u002Fuploads\u002F2021\u002F08\u002Fshang-chi-post-credits.jpg",[],{"type":25,"tag":30,"props":4922,"children":4923},{},[4924,4926,4931],{"type":34,"value":4925},"Although this part of the plot was textbook generic, the movie never focused too much on the soul sucking creatures the movie is mainly about rediscovering his identity. Similar to ",{"type":25,"tag":4778,"props":4927,"children":4928},{},[4929],{"type":34,"value":4930},"Guardians of the Galaxy",{"type":34,"value":4932}," where a out-of-place team rediscovers what it means to work together for a goal, Shang Chi learns to accept who he truly is, as his aunt tell him \"You are a product of both your mother and father\", which unlocks his true potential as he isn't trying to run away or hide anymore. This eventually sets up to Shang Chi taking possession of the rings the same way his mother did to his father on their first encounter in the forest, which brings it back full circle, meaning Shang Chi is using martial arts from both his mother and father, which in turn means he has rediscovered himself.",{"type":25,"tag":506,"props":4934,"children":4936},{"id":4935},"_2-attraction-610",[4937,4941],{"type":25,"tag":67,"props":4938,"children":4940},{"href":4939,"ariaHidden":70,"tabIndex":71},"#2-attraction-610",[],{"type":34,"value":4942},"2. Attraction: 6\u002F10",{"type":25,"tag":30,"props":4944,"children":4945},{},[4946,4948,4953],{"type":34,"value":4947},"If this wasn't a movie that had a significant amount of Asian representation, I most likely would've waited for the ",{"type":25,"tag":699,"props":4949,"children":4950},{},[4951],{"type":34,"value":4952},"cough cough",{"type":34,"value":4954}," digital version to be released on Disney+. I would have never gone to a theater during COVID times to risk my health and safety. In my opinion, although the trailer showed clips of the bus scene and him jumping to the other half of the bus, it certainly did not feel as cool as when Black Panther literally ran up the side of a BUILDING, latched onto the car, and jammed his vibranium protected hand into the car wheel. That was badass.",{"type":25,"tag":30,"props":4956,"children":4957},{},[4958],{"type":25,"tag":4786,"props":4959,"children":4962},{"alt":4960,"src":4961},"Shang Chi Bus Scene","https:\u002F\u002Fstatic0.gamerantimages.com\u002Fwordpress\u002Fwp-content\u002Fuploads\u002F2021\u002F09\u002FShang-Chi-and-the-Legend-of-the-Ten-Rings-Marvel-Studios-Action.jpg",[],{"type":25,"tag":30,"props":4964,"children":4965},{},[4966],{"type":34,"value":4967},"Although the bus scene in Shang Chi is definitely cool in its own aspect, it felt underwhelming due to past Marvel movies. Past Marvel heroes have literally folded planets and manipulated the fabric of reality, and here we have a man jumping to a bus. It doesn't feel as appealing and large scale because the stakes aren't as huge. Of course, once you watched the movie, you'll appreciate many other aspects!",{"type":25,"tag":506,"props":4969,"children":4971},{"id":4970},"_3-theme-1010",[4972,4976],{"type":25,"tag":67,"props":4973,"children":4975},{"href":4974,"ariaHidden":70,"tabIndex":71},"#3-theme-1010",[],{"type":34,"value":4977},"3. Theme: 10\u002F10",{"type":25,"tag":30,"props":4979,"children":4980},{},[4981,4983,4988,4989,4993,4994,4998],{"type":34,"value":4982},"Family. As Don Toretto says, it's a very important concept. Although this has been explored many times in\nmovies such as ",{"type":25,"tag":4778,"props":4984,"children":4985},{},[4986],{"type":34,"value":4987},"Black Widow",{"type":34,"value":2544},{"type":25,"tag":4778,"props":4990,"children":4991},{},[4992],{"type":34,"value":4930},{"type":34,"value":2551},{"type":25,"tag":4778,"props":4995,"children":4996},{},[4997],{"type":34,"value":4852},{"type":34,"value":4999},", none of them felt as raw as Shang Chi.\nEspecially in Chinese culture, family is considered to provide people with a sense of identity and a strong network of support. Mainly understood through Confucian thought, the role you played in the family, such as husband, wife, elder brother, younger sister, were all clearly defined. Although today the roles are not strict as they were back in the day, children are still expected to obey their parents and honour their elders (filial piety). For example, children who sent their elderly parents to a care facility are considered shameful, since they are supposed to care for them as they age.",{"type":25,"tag":30,"props":5001,"children":5002},{},[5003],{"type":34,"value":5004},"In Shang Chi, the whole family is fragmented. The son and daughter escaped to America, while the father, who may seem like a cookie cutter bad guy, was only trying to put the pieces of their family back together - by reuniting everyone so they could live like they did in the past. This not only shows in Shang Chi's family, but also the village. When the village recognizes Shang Chi and Xialing, they treat each other as if they were all family.",{"type":25,"tag":30,"props":5006,"children":5007},{},[5008],{"type":25,"tag":4786,"props":5009,"children":5012},{"alt":5010,"src":5011},"Shang Chi, Katy, and Xialing at the Village","https:\u002F\u002Fwww.gannett-cdn.com\u002Fpresto\u002F2021\u002F08\u002F31\u002FUSAT\u002F78fab86a-43d4-4581-887e-fbd590d572f2-TLT7160_cmp_rsp_v0006.1073_R_C.jpg?width=660&height=277&fit=crop&format=pjpg&auto=webp",[],{"type":25,"tag":506,"props":5014,"children":5016},{"id":5015},"_4-acting-910",[5017,5021],{"type":25,"tag":67,"props":5018,"children":5020},{"href":5019,"ariaHidden":70,"tabIndex":71},"#4-acting-910",[],{"type":34,"value":5022},"4. Acting: 9\u002F10",{"type":25,"tag":30,"props":5024,"children":5025},{},[5026,5028],{"type":34,"value":5027},"The acting by the Mandarin and Leiko was phenomenal. The scenes where Leiko interacted with Xialing and Shang Chi really developed the familial bond, while the Mandarin established a divide in the family after Leiko died. Every actor did a great job, but I have a bone to pick with Shang Chi.\n",{"type":25,"tag":4786,"props":5029,"children":5032},{"alt":5030,"src":5031},"Shang Chi Movie Poster","https:\u002F\u002Fcdn.vox-cdn.com\u002Fthumbor\u002FQorNdtND2JYmwqupoO3VW8uyNJU=\u002F1400x1400\u002Ffilters:format(jpeg)\u002Fcdn.vox-cdn.com\u002Fuploads\u002Fchorus_asset\u002Ffile\u002F22455479\u002FSTB_Teaser_1_Sht_v4_lg.jpg",[],{"type":25,"tag":30,"props":5034,"children":5035},{},[5036],{"type":34,"value":5037},"Take this photo of Shang Chi - it looks like he's trying to hold in a fart! Some scenes I just couldn't help laughing whenever he made that face. It might've just been the poster actually, because now that I think about it, his facial expressions weren't even that bad.",{"type":25,"tag":506,"props":5039,"children":5041},{"id":5040},"_5-dialogue-810",[5042,5046],{"type":25,"tag":67,"props":5043,"children":5045},{"href":5044,"ariaHidden":70,"tabIndex":71},"#5-dialogue-810",[],{"type":34,"value":5047},"5. Dialogue: 8\u002F10",{"type":25,"tag":30,"props":5049,"children":5050},{},[5051],{"type":34,"value":5052},"Let's get this out of the way. It may just be me getting old, but some of the jokes\u002Fremarks made by Katy were so cringe. Whenever there was a really tense situation like going to meet his sister for the first time in years, meeting his dad, or meeting the village, she would just talk and crack jokes that just felt completely out of context. I get that Marvel is trying to make funny scenes, but it just felt so awkward, I wanted to crawl in a hole. On the other hand, the fake Mandarin was great - I don't know how to explain it, but he made me (and most members of the audience) laugh. I also liked the subtle humour or whatever it's called, where the village elder originally didn't want Katy to fight because she wasn't ready, but when the soul eaters came, he completely disregarded his words earlier and said that she should fight.",{"type":25,"tag":30,"props":5054,"children":5055},{},[5056],{"type":25,"tag":4786,"props":5057,"children":5060},{"alt":5058,"src":5059},"Wenwu","https:\u002F\u002Fnerdreactor.com\u002Fwp-content\u002Fuploads\u002F2021\u002F09\u002Ftony_leung_as_wenwu___the_mandarin.jpg",[],{"type":25,"tag":30,"props":5062,"children":5063},{},[5064],{"type":34,"value":5065},"One thing I loved the most about the movie was the dialogue. Being someone immigrated to China when they were 1 year old, although I can't write or speak very well in mandarin, I can understand it pretty well (thanks Mom and Dad!). With Shang Chi being one of the first Marvel movies to have half chinese dialogue, I have to say it was really well done. I almost feel bad for those who can't understand mandarin, because so much good dialogue was lost in translation to subtitles. One of the best lines by the Mandarin - \"小子，你对我说话尊重一点。我吃的盐比你吃的饭多\" was translated to \"Kid, show some respect when you talk to me. I've eaten more salt than you've eaten rice in your entire life.\" As pointed out by some people on Twitter, a more lyrical and poetic translation would've been \"I have eaten more salt than you have eaten rice\". Just to give some context, the Mandarin said this to Guangbo, a man in the village who seemed significantly older than him. This is because having lived 1000 years more than Guangbo, Guangbo should have respected him as an elder, not the other way around.",{"type":25,"tag":506,"props":5067,"children":5069},{"id":5068},"_6-cinematography-910",[5070,5074],{"type":25,"tag":67,"props":5071,"children":5073},{"href":5072,"ariaHidden":70,"tabIndex":71},"#6-cinematography-910",[],{"type":34,"value":5075},"6. Cinematography: 9\u002F10",{"type":25,"tag":30,"props":5077,"children":5078},{},[5079],{"type":25,"tag":4786,"props":5080,"children":5082},{"src":5081},"..\u002F..\u002Fblog\u002Fbamboo.webp",[],{"type":25,"tag":30,"props":5084,"children":5085},{},[5086],{"type":34,"value":5087},"I'm no expert, but the camera work was awesome. The bamboo building scene in particular paid homage to a similar Rush hour scene starrring Jackie Chan. Another thing I loved was how many of the fight scenes were continuous shots. This shows how much work the actors put in practicing realistic fights and well planned choreography.",{"type":25,"tag":30,"props":5089,"children":5090},{},[5091],{"type":25,"tag":4786,"props":5092,"children":5094},{"src":5093},"..\u002F..\u002Fblog\u002Fjackie.webp",[],{"type":25,"tag":506,"props":5096,"children":5098},{"id":5097},"_7-editing-and-effects-1010",[5099,5103],{"type":25,"tag":67,"props":5100,"children":5102},{"href":5101,"ariaHidden":70,"tabIndex":71},"#7-editing-and-effects-1010",[],{"type":34,"value":5104},"7. Editing and Effects: 10\u002F10",{"type":25,"tag":30,"props":5106,"children":5107},{},[5108],{"type":34,"value":5109},"As usual, Marvel did a great job with the effects. I have to say though, they really outdid themselves with the rings. The way the Mandarin uses the rings, coupled by the way it vibrates, spins, and flies, it felt so cool. It's like the Iron Man suit, where you don't know what kind of fancy gadgets Tony Stark has incorporated in because of it's overwhelming utility and possibility.",{"type":25,"tag":30,"props":5111,"children":5112},{},[5113],{"type":25,"tag":4786,"props":5114,"children":5117},{"alt":5115,"src":5116},"Mandaring using the rings","https:\u002F\u002Fstatic0.srcdn.com\u002Fwordpress\u002Fwp-content\u002Fuploads\u002F2021\u002F08\u002FWenwu-using-Ten-Rings-in-Shang-Chi.jpg",[],{"type":25,"tag":506,"props":5119,"children":5121},{"id":5120},"_8-sound-and-music-1010",[5122,5126],{"type":25,"tag":67,"props":5123,"children":5125},{"href":5124,"ariaHidden":70,"tabIndex":71},"#8-sound-and-music-1010",[],{"type":34,"value":5127},"8. Sound and Music: 10\u002F10",{"type":25,"tag":30,"props":5129,"children":5130},{},[5131],{"type":34,"value":5132},"I'm not going to lie, the music slapped. Other than the Avengers main soundtrack, the rest are lost in the records of history. Excluding the Guardians of the Galaxy, of course, where James Gunn revitalized a lot of popular songs back in the day, no other Marvel movie has gotten this level of marketing for the soundtracks of its films. Being a big fan of 88rising, (a music label primarily for Asian American artists), I loved how close Marvel and 88rising worked in collaboration to make such bangers. So if you're ever interested in listening, here it is:",{"type":25,"tag":5134,"props":5135,"children":5140},"iframe",{"src":5136,"width":5137,"height":5138,"frameBorder":4599,"allowTransparency":70,"allow":5139},"https:\u002F\u002Fopen.spotify.com\u002Fembed\u002Falbum\u002F2kAqjStKcwlDD59H0llhGC","100%",380,"encrypted-media",[],{"type":25,"tag":506,"props":5142,"children":5144},{"id":5143},"overall-score-8910",[5145,5149],{"type":25,"tag":67,"props":5146,"children":5148},{"href":5147,"ariaHidden":70,"tabIndex":71},"#overall-score-8910",[],{"type":34,"value":5150},"Overall Score: 8.9\u002F10",{"title":8,"searchDepth":458,"depth":458,"links":5152},[5153,5156,5157,5158,5159,5160,5161,5162,5163,5164],{"id":4765,"depth":458,"text":4749,"children":5154},[5155],{"id":4792,"depth":461,"text":4799},{"id":4817,"depth":458,"text":4824},{"id":4935,"depth":458,"text":4942},{"id":4970,"depth":458,"text":4977},{"id":5015,"depth":458,"text":5022},{"id":5040,"depth":458,"text":5047},{"id":5068,"depth":458,"text":5075},{"id":5097,"depth":458,"text":5104},{"id":5120,"depth":458,"text":5127},{"id":5143,"depth":458,"text":5150},"content:articles:shang-chi-movie-review.md","articles\u002Fshang-chi-movie-review.md","articles\u002Fshang-chi-movie-review",{"_path":5169,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":5170,"description":5171,"img":5172,"alt":5173,"author":5174,"tags":5175,"date":5177,"body":5178,"_type":475,"_id":10808,"_source":477,"_file":10809,"_stem":10810,"_extension":480},"\u002Farticles\u002Fweb-dev-fundamentals","Building a TODO Webapp","Build a simple todo list and learn about APIs!","https:\u002F\u002Fplay-lh.googleusercontent.com\u002FHUuQc4Zpl6x7fUyX-jFMmcuUbW77REw4UKl5rfhHfP4VY6ctBU1w1I_RZWsXaojFgIo","TODO List",{"name":14,"img":15},[493,5176],"api","2021-07-09",{"type":22,"children":5179,"toc":10795},[5180,5190,5199,5218,5230,5235,5252,5262,5419,5438,5451,5456,5466,5489,5499,5528,5536,5541,5664,5669,5682,5687,5700,5879,5884,5894,5915,6376,6394,6432,7219,7224,7243,7261,7272,7284,7569,7598,7608,7621,7665,7676,7832,7844,7854,7872,7891,7904,7917,8264,8269,8280,8306,8325,8360,8407,8601,8612,8617,8627,8632,9053,9058,9071,9081,9103,9117,9170,9182,9192,9204,9224,9236,9631,9650,9655,9682,9687,9733,9738,9790,9795,9804,9809,9821,10076,10089,10109,10122,10134,10468,10473,10478,10786,10791],{"type":25,"tag":30,"props":5181,"children":5182},{},[5183,5185],{"type":34,"value":5184},"Before we get started, let's do a quick recap of a previous concept: ",{"type":25,"tag":699,"props":5186,"children":5187},{},[5188],{"type":34,"value":5189},"Web Requests and APIs",{"type":25,"tag":506,"props":5191,"children":5193},{"id":5192},"web-requests-and-apis",[5194,5198],{"type":25,"tag":67,"props":5195,"children":5197},{"href":5196,"ariaHidden":70,"tabIndex":71},"#web-requests-and-apis",[],{"type":34,"value":5189},{"type":25,"tag":30,"props":5200,"children":5201},{},[5202,5204,5209,5211,5216],{"type":34,"value":5203},"An ",{"type":25,"tag":699,"props":5205,"children":5206},{},[5207],{"type":34,"value":5208},"API",{"type":34,"value":5210}," is like a container of information. It holds a ton of information in which ",{"type":25,"tag":4778,"props":5212,"children":5213},{},[5214],{"type":34,"value":5215},"we",{"type":34,"value":5217},", the users, can access based on our choosing. For example, a weather api could hold information on the weather forecast for this upcoming week, or a book api could give you information on, well, a book.",{"type":25,"tag":30,"props":5219,"children":5220},{},[5221,5223,5228],{"type":34,"value":5222},"So, how do we access the information the API is holding? We can do this through something called requests. Whenever you open a web page or download a file, you are makaing a ",{"type":25,"tag":699,"props":5224,"children":5225},{},[5226],{"type":34,"value":5227},"web request",{"type":34,"value":5229}," through HTTP. Note however, that not all web requests receive information, you can send information too!",{"type":25,"tag":30,"props":5231,"children":5232},{},[5233],{"type":34,"value":5234},"There are many types of web requests, but the two most basic web requests are the GET and POST requests.",{"type":25,"tag":30,"props":5236,"children":5237},{},[5238,5243,5245,5250],{"type":25,"tag":699,"props":5239,"children":5240},{},[5241],{"type":34,"value":5242},"GET",{"type":34,"value":5244}," Requests mainly retrieve information, while ",{"type":25,"tag":699,"props":5246,"children":5247},{},[5248],{"type":34,"value":5249},"POST",{"type":34,"value":5251}," requests mainly send information. Note that there are many other types of web requests out there, but the only ones we have to pay attention to today are GET, POST, and DELETE requests (it should be pretty obvious what a DELETE request does).",{"type":25,"tag":30,"props":5253,"children":5254},{},[5255,5260],{"type":25,"tag":699,"props":5256,"children":5257},{},[5258],{"type":34,"value":5259},"JSON",{"type":34,"value":5261}," is a common way to format information in web requests. Take a look at this example:",{"type":25,"tag":531,"props":5263,"children":5265},{"code":5264,"language":1843,"meta":8,"className":1841,"style":8},"JSON_Object = {\n  \"name\": \"Mark\",\n  \"grade\": \"9\",\n  \"interests\": [\"soccer\", \"coding\"]\n}\n",[5266],{"type":25,"tag":522,"props":5267,"children":5268},{"__ignoreMap":8},[5269,5281,5317,5354,5412],{"type":25,"tag":541,"props":5270,"children":5271},{"class":543,"line":544},[5272,5277],{"type":25,"tag":541,"props":5273,"children":5274},{"style":566},[5275],{"type":34,"value":5276},"JSON_Object = ",{"type":25,"tag":541,"props":5278,"children":5279},{"style":560},[5280],{"type":34,"value":1855},{"type":25,"tag":541,"props":5282,"children":5283},{"class":543,"line":458},[5284,5288,5292,5296,5300,5304,5309,5313],{"type":25,"tag":541,"props":5285,"children":5286},{"style":560},[5287],{"type":34,"value":1863},{"type":25,"tag":541,"props":5289,"children":5290},{"style":1866},[5291],{"type":34,"value":1381},{"type":25,"tag":541,"props":5293,"children":5294},{"style":560},[5295],{"type":34,"value":1873},{"type":25,"tag":541,"props":5297,"children":5298},{"style":560},[5299],{"type":34,"value":1386},{"type":25,"tag":541,"props":5301,"children":5302},{"style":560},[5303],{"type":34,"value":906},{"type":25,"tag":541,"props":5305,"children":5306},{"style":554},[5307],{"type":34,"value":5308},"Mark",{"type":25,"tag":541,"props":5310,"children":5311},{"style":560},[5312],{"type":34,"value":1873},{"type":25,"tag":541,"props":5314,"children":5315},{"style":560},[5316],{"type":34,"value":1895},{"type":25,"tag":541,"props":5318,"children":5319},{"class":543,"line":461},[5320,5324,5329,5333,5337,5341,5346,5350],{"type":25,"tag":541,"props":5321,"children":5322},{"style":560},[5323],{"type":34,"value":1863},{"type":25,"tag":541,"props":5325,"children":5326},{"style":1866},[5327],{"type":34,"value":5328},"grade",{"type":25,"tag":541,"props":5330,"children":5331},{"style":560},[5332],{"type":34,"value":1873},{"type":25,"tag":541,"props":5334,"children":5335},{"style":560},[5336],{"type":34,"value":1386},{"type":25,"tag":541,"props":5338,"children":5339},{"style":560},[5340],{"type":34,"value":906},{"type":25,"tag":541,"props":5342,"children":5343},{"style":554},[5344],{"type":34,"value":5345},"9",{"type":25,"tag":541,"props":5347,"children":5348},{"style":560},[5349],{"type":34,"value":1873},{"type":25,"tag":541,"props":5351,"children":5352},{"style":560},[5353],{"type":34,"value":1895},{"type":25,"tag":541,"props":5355,"children":5356},{"class":543,"line":1326},[5357,5361,5366,5370,5374,5378,5382,5387,5391,5395,5399,5404,5408],{"type":25,"tag":541,"props":5358,"children":5359},{"style":560},[5360],{"type":34,"value":1863},{"type":25,"tag":541,"props":5362,"children":5363},{"style":1866},[5364],{"type":34,"value":5365},"interests",{"type":25,"tag":541,"props":5367,"children":5368},{"style":560},[5369],{"type":34,"value":1873},{"type":25,"tag":541,"props":5371,"children":5372},{"style":560},[5373],{"type":34,"value":1386},{"type":25,"tag":541,"props":5375,"children":5376},{"style":560},[5377],{"type":34,"value":1434},{"type":25,"tag":541,"props":5379,"children":5380},{"style":560},[5381],{"type":34,"value":1873},{"type":25,"tag":541,"props":5383,"children":5384},{"style":554},[5385],{"type":34,"value":5386},"soccer",{"type":25,"tag":541,"props":5388,"children":5389},{"style":560},[5390],{"type":34,"value":1873},{"type":25,"tag":541,"props":5392,"children":5393},{"style":560},[5394],{"type":34,"value":2106},{"type":25,"tag":541,"props":5396,"children":5397},{"style":560},[5398],{"type":34,"value":906},{"type":25,"tag":541,"props":5400,"children":5401},{"style":554},[5402],{"type":34,"value":5403},"coding",{"type":25,"tag":541,"props":5405,"children":5406},{"style":560},[5407],{"type":34,"value":1873},{"type":25,"tag":541,"props":5409,"children":5410},{"style":560},[5411],{"type":34,"value":1444},{"type":25,"tag":541,"props":5413,"children":5414},{"class":543,"line":1447},[5415],{"type":25,"tag":541,"props":5416,"children":5417},{"style":560},[5418],{"type":34,"value":574},{"type":25,"tag":30,"props":5420,"children":5421},{},[5422,5424,5430,5432,5437],{"type":34,"value":5423},"This behaves similar to a dictionary, so say if we wanted to access the first element inside interests, we would do ",{"type":25,"tag":522,"props":5425,"children":5427},{"className":5426},[],[5428],{"type":34,"value":5429},"JSON_Object.interests[0]",{"type":34,"value":5431}," which would give us ",{"type":25,"tag":522,"props":5433,"children":5435},{"className":5434},[],[5436],{"type":34,"value":5386},{"type":34,"value":2559},{"type":25,"tag":30,"props":5439,"children":5440},{},[5441,5443,5450],{"type":34,"value":5442},"This is enough of a recap. If there is anything that's unclear, the full lesson for Web Requests and APIs is available ",{"type":25,"tag":67,"props":5444,"children":5447},{"href":5445,"rel":5446},"https:\u002F\u002Fdocs.google.com\u002Fdocument\u002Fd\u002F19U4sAToTJldBK3TBQkOBMEiKa8n6wFA3tfXkgEVTKV4\u002Fedit",[4727],[5448],{"type":34,"value":5449},"here",{"type":34,"value":2559},{"type":25,"tag":30,"props":5452,"children":5453},{},[5454],{"type":34,"value":5455},"In this workshop, we will be utilizing a todo-list api so we can make our own todo-list!",{"type":25,"tag":62,"props":5457,"children":5459},{"id":5458},"preliminary-steps",[5460,5464],{"type":25,"tag":67,"props":5461,"children":5463},{"href":5462,"ariaHidden":70,"tabIndex":71},"#preliminary-steps",[],{"type":34,"value":5465},"Preliminary Steps",{"type":25,"tag":30,"props":5467,"children":5468},{},[5469,5471,5478,5480,5487],{"type":34,"value":5470},"In order to code this out, either use ",{"type":25,"tag":67,"props":5472,"children":5475},{"href":5473,"rel":5474},"https:\u002F\u002Fcodepen.io",[4727],[5476],{"type":34,"value":5477},"Codepen",{"type":34,"value":5479},", or do it locally on your computer! If you're doing it locally, it's recommended to use a code editor such as ",{"type":25,"tag":67,"props":5481,"children":5484},{"href":5482,"rel":5483},"https:\u002F\u002Fcode.visualstudio.com\u002F",[4727],[5485],{"type":34,"value":5486},"VSCode",{"type":34,"value":5488},". It'll make your workflow much easier!",{"type":25,"tag":62,"props":5490,"children":5492},{"id":5491},"setting-up-the-html-and-css",[5493,5497],{"type":25,"tag":67,"props":5494,"children":5496},{"href":5495,"ariaHidden":70,"tabIndex":71},"#setting-up-the-html-and-css",[],{"type":34,"value":5498},"Setting up the HTML and CSS",{"type":25,"tag":30,"props":5500,"children":5501},{},[5502,5504,5510,5512,5518,5520,5526],{"type":34,"value":5503},"We start off with the basic html file, ",{"type":25,"tag":522,"props":5505,"children":5507},{"className":5506},[],[5508],{"type":34,"value":5509},"index.html",{"type":34,"value":5511},". We also create a CSS file called ",{"type":25,"tag":522,"props":5513,"children":5515},{"className":5514},[],[5516],{"type":34,"value":5517},"index.css",{"type":34,"value":5519}," for all of our styling needs. For Codepen users, using the default HTML and CSS windows are good enough. Since we'll need to send requests to an API you will see later, I will also make a file called ",{"type":25,"tag":522,"props":5521,"children":5523},{"className":5522},[],[5524],{"type":34,"value":5525},"app.js",{"type":34,"value":5527},". For those coding locally, I have my files structured in this manner:",{"type":25,"tag":531,"props":5529,"children":5531},{"code":5530},"index.html\napp.js\nstylesheets\n| index.css\n",[5532],{"type":25,"tag":522,"props":5533,"children":5534},{"__ignoreMap":8},[5535],{"type":34,"value":5530},{"type":25,"tag":30,"props":5537,"children":5538},{},[5539],{"type":34,"value":5540},"We start by writing the basic boilerplate code:",{"type":25,"tag":531,"props":5542,"children":5544},{"code":5543,"language":2818,"meta":8,"className":2816,"style":8},"\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n  \u003C\u002Fhead>\n\n  \u003Cbody>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[5545],{"type":25,"tag":522,"props":5546,"children":5547},{"__ignoreMap":8},[5548,5567,5582,5597,5612,5619,5634,5649],{"type":25,"tag":541,"props":5549,"children":5550},{"class":543,"line":544},[5551,5555,5559,5563],{"type":25,"tag":541,"props":5552,"children":5553},{"style":560},[5554],{"type":34,"value":2830},{"type":25,"tag":541,"props":5556,"children":5557},{"style":1378},[5558],{"type":34,"value":2835},{"type":25,"tag":541,"props":5560,"children":5561},{"style":1866},[5562],{"type":34,"value":2840},{"type":25,"tag":541,"props":5564,"children":5565},{"style":560},[5566],{"type":34,"value":2845},{"type":25,"tag":541,"props":5568,"children":5569},{"class":543,"line":458},[5570,5574,5578],{"type":25,"tag":541,"props":5571,"children":5572},{"style":560},[5573],{"type":34,"value":2853},{"type":25,"tag":541,"props":5575,"children":5576},{"style":1378},[5577],{"type":34,"value":2818},{"type":25,"tag":541,"props":5579,"children":5580},{"style":560},[5581],{"type":34,"value":2845},{"type":25,"tag":541,"props":5583,"children":5584},{"class":543,"line":461},[5585,5589,5593],{"type":25,"tag":541,"props":5586,"children":5587},{"style":560},[5588],{"type":34,"value":2869},{"type":25,"tag":541,"props":5590,"children":5591},{"style":1378},[5592],{"type":34,"value":2874},{"type":25,"tag":541,"props":5594,"children":5595},{"style":560},[5596],{"type":34,"value":2845},{"type":25,"tag":541,"props":5598,"children":5599},{"class":543,"line":1326},[5600,5604,5608],{"type":25,"tag":541,"props":5601,"children":5602},{"style":560},[5603],{"type":34,"value":2956},{"type":25,"tag":541,"props":5605,"children":5606},{"style":1378},[5607],{"type":34,"value":2874},{"type":25,"tag":541,"props":5609,"children":5610},{"style":560},[5611],{"type":34,"value":2845},{"type":25,"tag":541,"props":5613,"children":5614},{"class":543,"line":1447},[5615],{"type":25,"tag":541,"props":5616,"children":5617},{"emptyLinePlaceholder":1495},[5618],{"type":34,"value":1498},{"type":25,"tag":541,"props":5620,"children":5621},{"class":543,"line":1460},[5622,5626,5630],{"type":25,"tag":541,"props":5623,"children":5624},{"style":560},[5625],{"type":34,"value":2869},{"type":25,"tag":541,"props":5627,"children":5628},{"style":1378},[5629],{"type":34,"value":2976},{"type":25,"tag":541,"props":5631,"children":5632},{"style":560},[5633],{"type":34,"value":2845},{"type":25,"tag":541,"props":5635,"children":5636},{"class":543,"line":1473},[5637,5641,5645],{"type":25,"tag":541,"props":5638,"children":5639},{"style":560},[5640],{"type":34,"value":2956},{"type":25,"tag":541,"props":5642,"children":5643},{"style":1378},[5644],{"type":34,"value":2976},{"type":25,"tag":541,"props":5646,"children":5647},{"style":560},[5648],{"type":34,"value":2845},{"type":25,"tag":541,"props":5650,"children":5651},{"class":543,"line":1491},[5652,5656,5660],{"type":25,"tag":541,"props":5653,"children":5654},{"style":560},[5655],{"type":34,"value":3028},{"type":25,"tag":541,"props":5657,"children":5658},{"style":1378},[5659],{"type":34,"value":2818},{"type":25,"tag":541,"props":5661,"children":5662},{"style":560},[5663],{"type":34,"value":2845},{"type":25,"tag":30,"props":5665,"children":5666},{},[5667],{"type":34,"value":5668},"Since we're making a Todolist webapp, the two greatest features we need are",{"type":25,"tag":1129,"props":5670,"children":5671},{},[5672,5677],{"type":25,"tag":1099,"props":5673,"children":5674},{},[5675],{"type":34,"value":5676},"Creating Tasks",{"type":25,"tag":1099,"props":5678,"children":5679},{},[5680],{"type":34,"value":5681},"Clearing Tasks",{"type":25,"tag":30,"props":5683,"children":5684},{},[5685],{"type":34,"value":5686},"Keeping this in mind, the first thing we have to do is link the CSS and JavaScript to the HTML.\nYou do not have to do this in Codepen, but locally, or practically, you should otherwise the your webpage will have no clue on how how to communicate with the other files.",{"type":25,"tag":30,"props":5688,"children":5689},{},[5690,5692,5698],{"type":34,"value":5691},"In the ",{"type":25,"tag":522,"props":5693,"children":5695},{"className":5694},[],[5696],{"type":34,"value":5697},"\u003Chead>",{"type":34,"value":5699}," section, add",{"type":25,"tag":531,"props":5701,"children":5703},{"code":5702,"language":2818,"meta":8,"className":2816,"style":8},"    \u003Clink rel=\"stylesheet\" href=\"stylesheets\u002Findex.css\">\n    \u003Cscript src=\"app.js\">\u003C\u002Fscript>\n    \u003Cnoscript>You need to enable JavaScript to use the ToDo List!\u003C\u002Fnoscript>\n    \u003Ctitle>\n      Todo List\n    \u003C\u002Ftitle>\n",[5704],{"type":25,"tag":522,"props":5705,"children":5706},{"__ignoreMap":8},[5707,5763,5806,5839,5855,5863],{"type":25,"tag":541,"props":5708,"children":5709},{"class":543,"line":544},[5710,5714,5718,5722,5726,5730,5734,5738,5742,5746,5750,5755,5759],{"type":25,"tag":541,"props":5711,"children":5712},{"style":560},[5713],{"type":34,"value":2886},{"type":25,"tag":541,"props":5715,"children":5716},{"style":1378},[5717],{"type":34,"value":2891},{"type":25,"tag":541,"props":5719,"children":5720},{"style":1866},[5721],{"type":34,"value":2896},{"type":25,"tag":541,"props":5723,"children":5724},{"style":560},[5725],{"type":34,"value":2901},{"type":25,"tag":541,"props":5727,"children":5728},{"style":560},[5729],{"type":34,"value":1873},{"type":25,"tag":541,"props":5731,"children":5732},{"style":554},[5733],{"type":34,"value":2910},{"type":25,"tag":541,"props":5735,"children":5736},{"style":560},[5737],{"type":34,"value":1873},{"type":25,"tag":541,"props":5739,"children":5740},{"style":1866},[5741],{"type":34,"value":2919},{"type":25,"tag":541,"props":5743,"children":5744},{"style":560},[5745],{"type":34,"value":2901},{"type":25,"tag":541,"props":5747,"children":5748},{"style":560},[5749],{"type":34,"value":1873},{"type":25,"tag":541,"props":5751,"children":5752},{"style":554},[5753],{"type":34,"value":5754},"stylesheets\u002Findex.css",{"type":25,"tag":541,"props":5756,"children":5757},{"style":560},[5758],{"type":34,"value":1873},{"type":25,"tag":541,"props":5760,"children":5761},{"style":560},[5762],{"type":34,"value":2845},{"type":25,"tag":541,"props":5764,"children":5765},{"class":543,"line":458},[5766,5770,5774,5778,5782,5786,5790,5794,5798,5802],{"type":25,"tag":541,"props":5767,"children":5768},{"style":560},[5769],{"type":34,"value":2886},{"type":25,"tag":541,"props":5771,"children":5772},{"style":1378},[5773],{"type":34,"value":3048},{"type":25,"tag":541,"props":5775,"children":5776},{"style":1866},[5777],{"type":34,"value":3053},{"type":25,"tag":541,"props":5779,"children":5780},{"style":560},[5781],{"type":34,"value":2901},{"type":25,"tag":541,"props":5783,"children":5784},{"style":560},[5785],{"type":34,"value":1873},{"type":25,"tag":541,"props":5787,"children":5788},{"style":554},[5789],{"type":34,"value":5525},{"type":25,"tag":541,"props":5791,"children":5792},{"style":560},[5793],{"type":34,"value":1873},{"type":25,"tag":541,"props":5795,"children":5796},{"style":560},[5797],{"type":34,"value":3074},{"type":25,"tag":541,"props":5799,"children":5800},{"style":1378},[5801],{"type":34,"value":3048},{"type":25,"tag":541,"props":5803,"children":5804},{"style":560},[5805],{"type":34,"value":2845},{"type":25,"tag":541,"props":5807,"children":5808},{"class":543,"line":461},[5809,5813,5818,5822,5827,5831,5835],{"type":25,"tag":541,"props":5810,"children":5811},{"style":560},[5812],{"type":34,"value":2886},{"type":25,"tag":541,"props":5814,"children":5815},{"style":1378},[5816],{"type":34,"value":5817},"noscript",{"type":25,"tag":541,"props":5819,"children":5820},{"style":560},[5821],{"type":34,"value":3018},{"type":25,"tag":541,"props":5823,"children":5824},{"style":566},[5825],{"type":34,"value":5826},"You need to enable JavaScript to use the ToDo List!",{"type":25,"tag":541,"props":5828,"children":5829},{"style":560},[5830],{"type":34,"value":3028},{"type":25,"tag":541,"props":5832,"children":5833},{"style":1378},[5834],{"type":34,"value":5817},{"type":25,"tag":541,"props":5836,"children":5837},{"style":560},[5838],{"type":34,"value":2845},{"type":25,"tag":541,"props":5840,"children":5841},{"class":543,"line":1326},[5842,5846,5851],{"type":25,"tag":541,"props":5843,"children":5844},{"style":560},[5845],{"type":34,"value":2886},{"type":25,"tag":541,"props":5847,"children":5848},{"style":1378},[5849],{"type":34,"value":5850},"title",{"type":25,"tag":541,"props":5852,"children":5853},{"style":560},[5854],{"type":34,"value":2845},{"type":25,"tag":541,"props":5856,"children":5857},{"class":543,"line":1447},[5858],{"type":25,"tag":541,"props":5859,"children":5860},{"style":566},[5861],{"type":34,"value":5862},"      Todo List\n",{"type":25,"tag":541,"props":5864,"children":5865},{"class":543,"line":1460},[5866,5871,5875],{"type":25,"tag":541,"props":5867,"children":5868},{"style":560},[5869],{"type":34,"value":5870},"    \u003C\u002F",{"type":25,"tag":541,"props":5872,"children":5873},{"style":1378},[5874],{"type":34,"value":5850},{"type":25,"tag":541,"props":5876,"children":5877},{"style":560},[5878],{"type":34,"value":2845},{"type":25,"tag":30,"props":5880,"children":5881},{},[5882],{"type":34,"value":5883},"The first link is to get the css connected, and the script is for the JavaScript. For the fun of it, I added in a no script, so it'll let the user know that they need JavaScript in order for this to work. I also added a title (which shows up on the tab). Now what do I mean by tab? For local users, simply open up the file location of where you made the index.html in a web browser like Edge or Chrome. Note that you won't see anything right now because we aren't displaying anything yet.",{"type":25,"tag":62,"props":5885,"children":5887},{"id":5886},"adding-some-substance",[5888,5892],{"type":25,"tag":67,"props":5889,"children":5891},{"href":5890,"ariaHidden":70,"tabIndex":71},"#adding-some-substance",[],{"type":34,"value":5893},"Adding some \"substance\"",{"type":25,"tag":30,"props":5895,"children":5896},{},[5897,5899,5905,5907,5913],{"type":34,"value":5898},"Let's add some content to the ",{"type":25,"tag":522,"props":5900,"children":5902},{"className":5901},[],[5903],{"type":34,"value":5904},"\u003Cbody>",{"type":34,"value":5906}," section. I would like the tasks to show up on the left side, while I have the option to add tasks on the right. To do this, I'm going to make a ",{"type":25,"tag":522,"props":5908,"children":5910},{"className":5909},[],[5911],{"type":34,"value":5912},"\u003Cdiv>",{"type":34,"value":5914}," which holds the list, and the form to create the list:",{"type":25,"tag":531,"props":5916,"children":5918},{"code":5917,"language":2818,"meta":8,"className":2816,"style":8},"    \u003Cdiv id=\"main-container\">\n      \u003Cdiv>\n        \u003Ch1>TODO List\u003C\u002Fh1>\n        \u003Cdiv id=\"contents\">\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n     \u003Cform class=\"form-container\">\n        \u003Ch1>Add Task\u003C\u002Fh1>\n        \u003Ctextarea name=\"task_contents\" id=\"task_contents\" cols=\"50\" rows=\"10\">\u003C\u002Ftextarea>\n        \u003Cbutton type='submit' onclick=\"\" class=\"btn\">Add\u003C\u002Fbutton>\n      \u003C\u002Fform>\n    \u003C\u002Fdiv>\n",[5919],{"type":25,"tag":522,"props":5920,"children":5921},{"__ignoreMap":8},[5922,5959,5975,6008,6044,6060,6076,6115,6147,6256,6346,6361],{"type":25,"tag":541,"props":5923,"children":5924},{"class":543,"line":544},[5925,5929,5934,5938,5942,5946,5951,5955],{"type":25,"tag":541,"props":5926,"children":5927},{"style":560},[5928],{"type":34,"value":2886},{"type":25,"tag":541,"props":5930,"children":5931},{"style":1378},[5932],{"type":34,"value":5933},"div",{"type":25,"tag":541,"props":5935,"children":5936},{"style":1866},[5937],{"type":34,"value":2996},{"type":25,"tag":541,"props":5939,"children":5940},{"style":560},[5941],{"type":34,"value":2901},{"type":25,"tag":541,"props":5943,"children":5944},{"style":560},[5945],{"type":34,"value":1873},{"type":25,"tag":541,"props":5947,"children":5948},{"style":554},[5949],{"type":34,"value":5950},"main-container",{"type":25,"tag":541,"props":5952,"children":5953},{"style":560},[5954],{"type":34,"value":1873},{"type":25,"tag":541,"props":5956,"children":5957},{"style":560},[5958],{"type":34,"value":2845},{"type":25,"tag":541,"props":5960,"children":5961},{"class":543,"line":458},[5962,5967,5971],{"type":25,"tag":541,"props":5963,"children":5964},{"style":560},[5965],{"type":34,"value":5966},"      \u003C",{"type":25,"tag":541,"props":5968,"children":5969},{"style":1378},[5970],{"type":34,"value":5933},{"type":25,"tag":541,"props":5972,"children":5973},{"style":560},[5974],{"type":34,"value":2845},{"type":25,"tag":541,"props":5976,"children":5977},{"class":543,"line":461},[5978,5983,5988,5992,5996,6000,6004],{"type":25,"tag":541,"props":5979,"children":5980},{"style":560},[5981],{"type":34,"value":5982},"        \u003C",{"type":25,"tag":541,"props":5984,"children":5985},{"style":1378},[5986],{"type":34,"value":5987},"h1",{"type":25,"tag":541,"props":5989,"children":5990},{"style":560},[5991],{"type":34,"value":3018},{"type":25,"tag":541,"props":5993,"children":5994},{"style":566},[5995],{"type":34,"value":5173},{"type":25,"tag":541,"props":5997,"children":5998},{"style":560},[5999],{"type":34,"value":3028},{"type":25,"tag":541,"props":6001,"children":6002},{"style":1378},[6003],{"type":34,"value":5987},{"type":25,"tag":541,"props":6005,"children":6006},{"style":560},[6007],{"type":34,"value":2845},{"type":25,"tag":541,"props":6009,"children":6010},{"class":543,"line":1326},[6011,6015,6019,6023,6027,6031,6036,6040],{"type":25,"tag":541,"props":6012,"children":6013},{"style":560},[6014],{"type":34,"value":5982},{"type":25,"tag":541,"props":6016,"children":6017},{"style":1378},[6018],{"type":34,"value":5933},{"type":25,"tag":541,"props":6020,"children":6021},{"style":1866},[6022],{"type":34,"value":2996},{"type":25,"tag":541,"props":6024,"children":6025},{"style":560},[6026],{"type":34,"value":2901},{"type":25,"tag":541,"props":6028,"children":6029},{"style":560},[6030],{"type":34,"value":1873},{"type":25,"tag":541,"props":6032,"children":6033},{"style":554},[6034],{"type":34,"value":6035},"contents",{"type":25,"tag":541,"props":6037,"children":6038},{"style":560},[6039],{"type":34,"value":1873},{"type":25,"tag":541,"props":6041,"children":6042},{"style":560},[6043],{"type":34,"value":2845},{"type":25,"tag":541,"props":6045,"children":6046},{"class":543,"line":1447},[6047,6052,6056],{"type":25,"tag":541,"props":6048,"children":6049},{"style":560},[6050],{"type":34,"value":6051},"        \u003C\u002F",{"type":25,"tag":541,"props":6053,"children":6054},{"style":1378},[6055],{"type":34,"value":5933},{"type":25,"tag":541,"props":6057,"children":6058},{"style":560},[6059],{"type":34,"value":2845},{"type":25,"tag":541,"props":6061,"children":6062},{"class":543,"line":1460},[6063,6068,6072],{"type":25,"tag":541,"props":6064,"children":6065},{"style":560},[6066],{"type":34,"value":6067},"      \u003C\u002F",{"type":25,"tag":541,"props":6069,"children":6070},{"style":1378},[6071],{"type":34,"value":5933},{"type":25,"tag":541,"props":6073,"children":6074},{"style":560},[6075],{"type":34,"value":2845},{"type":25,"tag":541,"props":6077,"children":6078},{"class":543,"line":1473},[6079,6084,6089,6094,6098,6102,6107,6111],{"type":25,"tag":541,"props":6080,"children":6081},{"style":560},[6082],{"type":34,"value":6083},"     \u003C",{"type":25,"tag":541,"props":6085,"children":6086},{"style":1378},[6087],{"type":34,"value":6088},"form",{"type":25,"tag":541,"props":6090,"children":6091},{"style":1866},[6092],{"type":34,"value":6093}," class",{"type":25,"tag":541,"props":6095,"children":6096},{"style":560},[6097],{"type":34,"value":2901},{"type":25,"tag":541,"props":6099,"children":6100},{"style":560},[6101],{"type":34,"value":1873},{"type":25,"tag":541,"props":6103,"children":6104},{"style":554},[6105],{"type":34,"value":6106},"form-container",{"type":25,"tag":541,"props":6108,"children":6109},{"style":560},[6110],{"type":34,"value":1873},{"type":25,"tag":541,"props":6112,"children":6113},{"style":560},[6114],{"type":34,"value":2845},{"type":25,"tag":541,"props":6116,"children":6117},{"class":543,"line":1491},[6118,6122,6126,6130,6135,6139,6143],{"type":25,"tag":541,"props":6119,"children":6120},{"style":560},[6121],{"type":34,"value":5982},{"type":25,"tag":541,"props":6123,"children":6124},{"style":1378},[6125],{"type":34,"value":5987},{"type":25,"tag":541,"props":6127,"children":6128},{"style":560},[6129],{"type":34,"value":3018},{"type":25,"tag":541,"props":6131,"children":6132},{"style":566},[6133],{"type":34,"value":6134},"Add Task",{"type":25,"tag":541,"props":6136,"children":6137},{"style":560},[6138],{"type":34,"value":3028},{"type":25,"tag":541,"props":6140,"children":6141},{"style":1378},[6142],{"type":34,"value":5987},{"type":25,"tag":541,"props":6144,"children":6145},{"style":560},[6146],{"type":34,"value":2845},{"type":25,"tag":541,"props":6148,"children":6149},{"class":543,"line":1501},[6150,6154,6159,6163,6167,6171,6176,6180,6184,6188,6192,6196,6200,6205,6209,6213,6218,6222,6227,6231,6235,6240,6244,6248,6252],{"type":25,"tag":541,"props":6151,"children":6152},{"style":560},[6153],{"type":34,"value":5982},{"type":25,"tag":541,"props":6155,"children":6156},{"style":1378},[6157],{"type":34,"value":6158},"textarea",{"type":25,"tag":541,"props":6160,"children":6161},{"style":1866},[6162],{"type":34,"value":1555},{"type":25,"tag":541,"props":6164,"children":6165},{"style":560},[6166],{"type":34,"value":2901},{"type":25,"tag":541,"props":6168,"children":6169},{"style":560},[6170],{"type":34,"value":1873},{"type":25,"tag":541,"props":6172,"children":6173},{"style":554},[6174],{"type":34,"value":6175},"task_contents",{"type":25,"tag":541,"props":6177,"children":6178},{"style":560},[6179],{"type":34,"value":1873},{"type":25,"tag":541,"props":6181,"children":6182},{"style":1866},[6183],{"type":34,"value":2996},{"type":25,"tag":541,"props":6185,"children":6186},{"style":560},[6187],{"type":34,"value":2901},{"type":25,"tag":541,"props":6189,"children":6190},{"style":560},[6191],{"type":34,"value":1873},{"type":25,"tag":541,"props":6193,"children":6194},{"style":554},[6195],{"type":34,"value":6175},{"type":25,"tag":541,"props":6197,"children":6198},{"style":560},[6199],{"type":34,"value":1873},{"type":25,"tag":541,"props":6201,"children":6202},{"style":1866},[6203],{"type":34,"value":6204}," cols",{"type":25,"tag":541,"props":6206,"children":6207},{"style":560},[6208],{"type":34,"value":2901},{"type":25,"tag":541,"props":6210,"children":6211},{"style":560},[6212],{"type":34,"value":1873},{"type":25,"tag":541,"props":6214,"children":6215},{"style":554},[6216],{"type":34,"value":6217},"50",{"type":25,"tag":541,"props":6219,"children":6220},{"style":560},[6221],{"type":34,"value":1873},{"type":25,"tag":541,"props":6223,"children":6224},{"style":1866},[6225],{"type":34,"value":6226}," rows",{"type":25,"tag":541,"props":6228,"children":6229},{"style":560},[6230],{"type":34,"value":2901},{"type":25,"tag":541,"props":6232,"children":6233},{"style":560},[6234],{"type":34,"value":1873},{"type":25,"tag":541,"props":6236,"children":6237},{"style":554},[6238],{"type":34,"value":6239},"10",{"type":25,"tag":541,"props":6241,"children":6242},{"style":560},[6243],{"type":34,"value":1873},{"type":25,"tag":541,"props":6245,"children":6246},{"style":560},[6247],{"type":34,"value":3074},{"type":25,"tag":541,"props":6249,"children":6250},{"style":1378},[6251],{"type":34,"value":6158},{"type":25,"tag":541,"props":6253,"children":6254},{"style":560},[6255],{"type":34,"value":2845},{"type":25,"tag":541,"props":6257,"children":6258},{"class":543,"line":1514},[6259,6263,6268,6273,6277,6281,6286,6290,6295,6299,6304,6308,6312,6316,6321,6325,6329,6334,6338,6342],{"type":25,"tag":541,"props":6260,"children":6261},{"style":560},[6262],{"type":34,"value":5982},{"type":25,"tag":541,"props":6264,"children":6265},{"style":1378},[6266],{"type":34,"value":6267},"button",{"type":25,"tag":541,"props":6269,"children":6270},{"style":1866},[6271],{"type":34,"value":6272}," type",{"type":25,"tag":541,"props":6274,"children":6275},{"style":560},[6276],{"type":34,"value":2901},{"type":25,"tag":541,"props":6278,"children":6279},{"style":560},[6280],{"type":34,"value":3859},{"type":25,"tag":541,"props":6282,"children":6283},{"style":554},[6284],{"type":34,"value":6285},"submit",{"type":25,"tag":541,"props":6287,"children":6288},{"style":560},[6289],{"type":34,"value":3859},{"type":25,"tag":541,"props":6291,"children":6292},{"style":1866},[6293],{"type":34,"value":6294}," onclick",{"type":25,"tag":541,"props":6296,"children":6297},{"style":560},[6298],{"type":34,"value":2901},{"type":25,"tag":541,"props":6300,"children":6301},{"style":560},[6302],{"type":34,"value":6303},"\"\"",{"type":25,"tag":541,"props":6305,"children":6306},{"style":1866},[6307],{"type":34,"value":6093},{"type":25,"tag":541,"props":6309,"children":6310},{"style":560},[6311],{"type":34,"value":2901},{"type":25,"tag":541,"props":6313,"children":6314},{"style":560},[6315],{"type":34,"value":1873},{"type":25,"tag":541,"props":6317,"children":6318},{"style":554},[6319],{"type":34,"value":6320},"btn",{"type":25,"tag":541,"props":6322,"children":6323},{"style":560},[6324],{"type":34,"value":1873},{"type":25,"tag":541,"props":6326,"children":6327},{"style":560},[6328],{"type":34,"value":3018},{"type":25,"tag":541,"props":6330,"children":6331},{"style":566},[6332],{"type":34,"value":6333},"Add",{"type":25,"tag":541,"props":6335,"children":6336},{"style":560},[6337],{"type":34,"value":3028},{"type":25,"tag":541,"props":6339,"children":6340},{"style":1378},[6341],{"type":34,"value":6267},{"type":25,"tag":541,"props":6343,"children":6344},{"style":560},[6345],{"type":34,"value":2845},{"type":25,"tag":541,"props":6347,"children":6348},{"class":543,"line":1537},[6349,6353,6357],{"type":25,"tag":541,"props":6350,"children":6351},{"style":560},[6352],{"type":34,"value":6067},{"type":25,"tag":541,"props":6354,"children":6355},{"style":1378},[6356],{"type":34,"value":6088},{"type":25,"tag":541,"props":6358,"children":6359},{"style":560},[6360],{"type":34,"value":2845},{"type":25,"tag":541,"props":6362,"children":6363},{"class":543,"line":1545},[6364,6368,6372],{"type":25,"tag":541,"props":6365,"children":6366},{"style":560},[6367],{"type":34,"value":5870},{"type":25,"tag":541,"props":6369,"children":6370},{"style":1378},[6371],{"type":34,"value":5933},{"type":25,"tag":541,"props":6373,"children":6374},{"style":560},[6375],{"type":34,"value":2845},{"type":25,"tag":30,"props":6377,"children":6378},{},[6379,6381,6386,6388,6392],{"type":34,"value":6380},"The ",{"type":25,"tag":522,"props":6382,"children":6384},{"className":6383},[],[6385],{"type":34,"value":5912},{"type":34,"value":6387}," with id ",{"type":25,"tag":699,"props":6389,"children":6390},{},[6391],{"type":34,"value":6035},{"type":34,"value":6393}," will contain the list of tasks, while the form will be our method in adding new tasks.",{"type":25,"tag":30,"props":6395,"children":6396},{},[6397,6399,6404,6406,6411,6413,6418,6419,6424,6426,6431],{"type":34,"value":6398},"Note that I have id ",{"type":25,"tag":522,"props":6400,"children":6402},{"className":6401},[],[6403],{"type":34,"value":5950},{"type":34,"value":6405}," and ",{"type":25,"tag":522,"props":6407,"children":6409},{"className":6408},[],[6410],{"type":34,"value":6035},{"type":34,"value":6412},", classes ",{"type":25,"tag":522,"props":6414,"children":6416},{"className":6415},[],[6417],{"type":34,"value":6106},{"type":34,"value":6405},{"type":25,"tag":522,"props":6420,"children":6422},{"className":6421},[],[6423],{"type":34,"value":6320},{"type":34,"value":6425},", so let's add some CSS in ",{"type":25,"tag":522,"props":6427,"children":6429},{"className":6428},[],[6430],{"type":34,"value":5517},{"type":34,"value":2559},{"type":25,"tag":531,"props":6433,"children":6437},{"code":6434,"language":6435,"meta":8,"className":6436,"style":8},"html {\n  background-color: #1D1D1E;\n  color: white;\n  font-family: lato, arial;\n}\n\n#main-container {\n  display: flex;\n  justify-content: space-around;\n  flex-direction: row;\n}\n\n#contents {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n}\n\n.btn:hover {\n  opacity: 1;\n}\n\n.form-container {\n  padding: 10px;\n}\n.form-container input[type=text], .form-container textarea {\n  width: 90%;\n  padding: 15px;\n  margin: 5px 0 22px 0;\n  border: none;\n}\n.form-container .btn {\n  background-color: #04AA6D;\n  padding: 16px 20px;\n  border: none;\n  cursor: pointer;\n  width: 100%;\n  margin-bottom:10px;\n  opacity: 0.8;\n  color: white;\n}\n","css","language-css shiki shiki-themes material-theme-palenight",[6438],{"type":25,"tag":522,"props":6439,"children":6440},{"__ignoreMap":8},[6441,6452,6479,6500,6530,6537,6544,6560,6581,6602,6623,6630,6637,6652,6671,6691,6711,6731,6738,6745,6769,6790,6797,6804,6819,6840,6847,6903,6924,6944,6980,7002,7010,7034,7059,7085,7105,7127,7148,7170,7191,7211],{"type":25,"tag":541,"props":6442,"children":6443},{"class":543,"line":544},[6444,6448],{"type":25,"tag":541,"props":6445,"children":6446},{"style":548},[6447],{"type":34,"value":2818},{"type":25,"tag":541,"props":6449,"children":6450},{"style":560},[6451],{"type":34,"value":2023},{"type":25,"tag":541,"props":6453,"children":6454},{"class":543,"line":458},[6455,6461,6465,6470,6475],{"type":25,"tag":541,"props":6456,"children":6458},{"style":6457},"--shiki-default:#B2CCD6",[6459],{"type":34,"value":6460},"  background-color",{"type":25,"tag":541,"props":6462,"children":6463},{"style":560},[6464],{"type":34,"value":1386},{"type":25,"tag":541,"props":6466,"children":6467},{"style":560},[6468],{"type":34,"value":6469}," #",{"type":25,"tag":541,"props":6471,"children":6472},{"style":566},[6473],{"type":34,"value":6474},"1D1D1E",{"type":25,"tag":541,"props":6476,"children":6477},{"style":560},[6478],{"type":34,"value":3361},{"type":25,"tag":541,"props":6480,"children":6481},{"class":543,"line":461},[6482,6487,6491,6496],{"type":25,"tag":541,"props":6483,"children":6484},{"style":6457},[6485],{"type":34,"value":6486},"  color",{"type":25,"tag":541,"props":6488,"children":6489},{"style":560},[6490],{"type":34,"value":1386},{"type":25,"tag":541,"props":6492,"children":6493},{"style":566},[6494],{"type":34,"value":6495}," white",{"type":25,"tag":541,"props":6497,"children":6498},{"style":560},[6499],{"type":34,"value":3361},{"type":25,"tag":541,"props":6501,"children":6502},{"class":543,"line":1326},[6503,6508,6512,6517,6521,6526],{"type":25,"tag":541,"props":6504,"children":6505},{"style":6457},[6506],{"type":34,"value":6507},"  font-family",{"type":25,"tag":541,"props":6509,"children":6510},{"style":560},[6511],{"type":34,"value":1386},{"type":25,"tag":541,"props":6513,"children":6514},{"style":566},[6515],{"type":34,"value":6516}," lato",{"type":25,"tag":541,"props":6518,"children":6519},{"style":560},[6520],{"type":34,"value":2106},{"type":25,"tag":541,"props":6522,"children":6523},{"style":566},[6524],{"type":34,"value":6525}," arial",{"type":25,"tag":541,"props":6527,"children":6528},{"style":560},[6529],{"type":34,"value":3361},{"type":25,"tag":541,"props":6531,"children":6532},{"class":543,"line":1447},[6533],{"type":25,"tag":541,"props":6534,"children":6535},{"style":560},[6536],{"type":34,"value":574},{"type":25,"tag":541,"props":6538,"children":6539},{"class":543,"line":1460},[6540],{"type":25,"tag":541,"props":6541,"children":6542},{"emptyLinePlaceholder":1495},[6543],{"type":34,"value":1498},{"type":25,"tag":541,"props":6545,"children":6546},{"class":543,"line":1473},[6547,6552,6556],{"type":25,"tag":541,"props":6548,"children":6549},{"style":560},[6550],{"type":34,"value":6551},"#",{"type":25,"tag":541,"props":6553,"children":6554},{"style":893},[6555],{"type":34,"value":5950},{"type":25,"tag":541,"props":6557,"children":6558},{"style":560},[6559],{"type":34,"value":2023},{"type":25,"tag":541,"props":6561,"children":6562},{"class":543,"line":1491},[6563,6568,6572,6577],{"type":25,"tag":541,"props":6564,"children":6565},{"style":6457},[6566],{"type":34,"value":6567},"  display",{"type":25,"tag":541,"props":6569,"children":6570},{"style":560},[6571],{"type":34,"value":1386},{"type":25,"tag":541,"props":6573,"children":6574},{"style":566},[6575],{"type":34,"value":6576}," flex",{"type":25,"tag":541,"props":6578,"children":6579},{"style":560},[6580],{"type":34,"value":3361},{"type":25,"tag":541,"props":6582,"children":6583},{"class":543,"line":1501},[6584,6589,6593,6598],{"type":25,"tag":541,"props":6585,"children":6586},{"style":6457},[6587],{"type":34,"value":6588},"  justify-content",{"type":25,"tag":541,"props":6590,"children":6591},{"style":560},[6592],{"type":34,"value":1386},{"type":25,"tag":541,"props":6594,"children":6595},{"style":566},[6596],{"type":34,"value":6597}," space-around",{"type":25,"tag":541,"props":6599,"children":6600},{"style":560},[6601],{"type":34,"value":3361},{"type":25,"tag":541,"props":6603,"children":6604},{"class":543,"line":1514},[6605,6610,6614,6619],{"type":25,"tag":541,"props":6606,"children":6607},{"style":6457},[6608],{"type":34,"value":6609},"  flex-direction",{"type":25,"tag":541,"props":6611,"children":6612},{"style":560},[6613],{"type":34,"value":1386},{"type":25,"tag":541,"props":6615,"children":6616},{"style":566},[6617],{"type":34,"value":6618}," row",{"type":25,"tag":541,"props":6620,"children":6621},{"style":560},[6622],{"type":34,"value":3361},{"type":25,"tag":541,"props":6624,"children":6625},{"class":543,"line":1537},[6626],{"type":25,"tag":541,"props":6627,"children":6628},{"style":560},[6629],{"type":34,"value":574},{"type":25,"tag":541,"props":6631,"children":6632},{"class":543,"line":1545},[6633],{"type":25,"tag":541,"props":6634,"children":6635},{"emptyLinePlaceholder":1495},[6636],{"type":34,"value":1498},{"type":25,"tag":541,"props":6638,"children":6639},{"class":543,"line":1567},[6640,6644,6648],{"type":25,"tag":541,"props":6641,"children":6642},{"style":560},[6643],{"type":34,"value":6551},{"type":25,"tag":541,"props":6645,"children":6646},{"style":893},[6647],{"type":34,"value":6035},{"type":25,"tag":541,"props":6649,"children":6650},{"style":560},[6651],{"type":34,"value":2023},{"type":25,"tag":541,"props":6653,"children":6654},{"class":543,"line":1585},[6655,6659,6663,6667],{"type":25,"tag":541,"props":6656,"children":6657},{"style":6457},[6658],{"type":34,"value":6567},{"type":25,"tag":541,"props":6660,"children":6661},{"style":560},[6662],{"type":34,"value":1386},{"type":25,"tag":541,"props":6664,"children":6665},{"style":566},[6666],{"type":34,"value":6576},{"type":25,"tag":541,"props":6668,"children":6669},{"style":560},[6670],{"type":34,"value":3361},{"type":25,"tag":541,"props":6672,"children":6673},{"class":543,"line":1598},[6674,6678,6682,6687],{"type":25,"tag":541,"props":6675,"children":6676},{"style":6457},[6677],{"type":34,"value":6588},{"type":25,"tag":541,"props":6679,"children":6680},{"style":560},[6681],{"type":34,"value":1386},{"type":25,"tag":541,"props":6683,"children":6684},{"style":566},[6685],{"type":34,"value":6686}," center",{"type":25,"tag":541,"props":6688,"children":6689},{"style":560},[6690],{"type":34,"value":3361},{"type":25,"tag":541,"props":6692,"children":6693},{"class":543,"line":1616},[6694,6699,6703,6707],{"type":25,"tag":541,"props":6695,"children":6696},{"style":6457},[6697],{"type":34,"value":6698},"  align-items",{"type":25,"tag":541,"props":6700,"children":6701},{"style":560},[6702],{"type":34,"value":1386},{"type":25,"tag":541,"props":6704,"children":6705},{"style":566},[6706],{"type":34,"value":6686},{"type":25,"tag":541,"props":6708,"children":6709},{"style":560},[6710],{"type":34,"value":3361},{"type":25,"tag":541,"props":6712,"children":6713},{"class":543,"line":1634},[6714,6718,6722,6727],{"type":25,"tag":541,"props":6715,"children":6716},{"style":6457},[6717],{"type":34,"value":6609},{"type":25,"tag":541,"props":6719,"children":6720},{"style":560},[6721],{"type":34,"value":1386},{"type":25,"tag":541,"props":6723,"children":6724},{"style":566},[6725],{"type":34,"value":6726}," column",{"type":25,"tag":541,"props":6728,"children":6729},{"style":560},[6730],{"type":34,"value":3361},{"type":25,"tag":541,"props":6732,"children":6733},{"class":543,"line":1652},[6734],{"type":25,"tag":541,"props":6735,"children":6736},{"style":560},[6737],{"type":34,"value":574},{"type":25,"tag":541,"props":6739,"children":6740},{"class":543,"line":1670},[6741],{"type":25,"tag":541,"props":6742,"children":6743},{"emptyLinePlaceholder":1495},[6744],{"type":34,"value":1498},{"type":25,"tag":541,"props":6746,"children":6747},{"class":543,"line":1689},[6748,6752,6756,6760,6765],{"type":25,"tag":541,"props":6749,"children":6750},{"style":560},[6751],{"type":34,"value":2559},{"type":25,"tag":541,"props":6753,"children":6754},{"style":548},[6755],{"type":34,"value":6320},{"type":25,"tag":541,"props":6757,"children":6758},{"style":560},[6759],{"type":34,"value":1386},{"type":25,"tag":541,"props":6761,"children":6762},{"style":1866},[6763],{"type":34,"value":6764},"hover",{"type":25,"tag":541,"props":6766,"children":6767},{"style":560},[6768],{"type":34,"value":2023},{"type":25,"tag":541,"props":6770,"children":6771},{"class":543,"line":1698},[6772,6777,6781,6786],{"type":25,"tag":541,"props":6773,"children":6774},{"style":6457},[6775],{"type":34,"value":6776},"  opacity",{"type":25,"tag":541,"props":6778,"children":6779},{"style":560},[6780],{"type":34,"value":1386},{"type":25,"tag":541,"props":6782,"children":6783},{"style":893},[6784],{"type":34,"value":6785}," 1",{"type":25,"tag":541,"props":6787,"children":6788},{"style":560},[6789],{"type":34,"value":3361},{"type":25,"tag":541,"props":6791,"children":6792},{"class":543,"line":1707},[6793],{"type":25,"tag":541,"props":6794,"children":6795},{"style":560},[6796],{"type":34,"value":574},{"type":25,"tag":541,"props":6798,"children":6799},{"class":543,"line":1716},[6800],{"type":25,"tag":541,"props":6801,"children":6802},{"emptyLinePlaceholder":1495},[6803],{"type":34,"value":1498},{"type":25,"tag":541,"props":6805,"children":6806},{"class":543,"line":1725},[6807,6811,6815],{"type":25,"tag":541,"props":6808,"children":6809},{"style":560},[6810],{"type":34,"value":2559},{"type":25,"tag":541,"props":6812,"children":6813},{"style":548},[6814],{"type":34,"value":6106},{"type":25,"tag":541,"props":6816,"children":6817},{"style":560},[6818],{"type":34,"value":2023},{"type":25,"tag":541,"props":6820,"children":6821},{"class":543,"line":4255},[6822,6827,6831,6836],{"type":25,"tag":541,"props":6823,"children":6824},{"style":6457},[6825],{"type":34,"value":6826},"  padding",{"type":25,"tag":541,"props":6828,"children":6829},{"style":560},[6830],{"type":34,"value":1386},{"type":25,"tag":541,"props":6832,"children":6833},{"style":893},[6834],{"type":34,"value":6835}," 10px",{"type":25,"tag":541,"props":6837,"children":6838},{"style":560},[6839],{"type":34,"value":3361},{"type":25,"tag":541,"props":6841,"children":6842},{"class":543,"line":4263},[6843],{"type":25,"tag":541,"props":6844,"children":6845},{"style":560},[6846],{"type":34,"value":574},{"type":25,"tag":541,"props":6848,"children":6849},{"class":543,"line":4271},[6850,6854,6858,6863,6867,6872,6876,6880,6885,6890,6894,6899],{"type":25,"tag":541,"props":6851,"children":6852},{"style":560},[6853],{"type":34,"value":2559},{"type":25,"tag":541,"props":6855,"children":6856},{"style":548},[6857],{"type":34,"value":6106},{"type":25,"tag":541,"props":6859,"children":6860},{"style":548},[6861],{"type":34,"value":6862}," input",{"type":25,"tag":541,"props":6864,"children":6865},{"style":560},[6866],{"type":34,"value":4232},{"type":25,"tag":541,"props":6868,"children":6869},{"style":1866},[6870],{"type":34,"value":6871},"type",{"type":25,"tag":541,"props":6873,"children":6874},{"style":560},[6875],{"type":34,"value":2901},{"type":25,"tag":541,"props":6877,"children":6878},{"style":554},[6879],{"type":34,"value":34},{"type":25,"tag":541,"props":6881,"children":6882},{"style":560},[6883],{"type":34,"value":6884},"],",{"type":25,"tag":541,"props":6886,"children":6887},{"style":560},[6888],{"type":34,"value":6889}," .",{"type":25,"tag":541,"props":6891,"children":6892},{"style":548},[6893],{"type":34,"value":6106},{"type":25,"tag":541,"props":6895,"children":6896},{"style":548},[6897],{"type":34,"value":6898}," textarea",{"type":25,"tag":541,"props":6900,"children":6901},{"style":560},[6902],{"type":34,"value":2023},{"type":25,"tag":541,"props":6904,"children":6905},{"class":543,"line":4313},[6906,6911,6915,6920],{"type":25,"tag":541,"props":6907,"children":6908},{"style":6457},[6909],{"type":34,"value":6910},"  width",{"type":25,"tag":541,"props":6912,"children":6913},{"style":560},[6914],{"type":34,"value":1386},{"type":25,"tag":541,"props":6916,"children":6917},{"style":893},[6918],{"type":34,"value":6919}," 90%",{"type":25,"tag":541,"props":6921,"children":6922},{"style":560},[6923],{"type":34,"value":3361},{"type":25,"tag":541,"props":6925,"children":6926},{"class":543,"line":4335},[6927,6931,6935,6940],{"type":25,"tag":541,"props":6928,"children":6929},{"style":6457},[6930],{"type":34,"value":6826},{"type":25,"tag":541,"props":6932,"children":6933},{"style":560},[6934],{"type":34,"value":1386},{"type":25,"tag":541,"props":6936,"children":6937},{"style":893},[6938],{"type":34,"value":6939}," 15px",{"type":25,"tag":541,"props":6941,"children":6942},{"style":560},[6943],{"type":34,"value":3361},{"type":25,"tag":541,"props":6945,"children":6947},{"class":543,"line":6946},30,[6948,6953,6957,6962,6967,6972,6976],{"type":25,"tag":541,"props":6949,"children":6950},{"style":6457},[6951],{"type":34,"value":6952},"  margin",{"type":25,"tag":541,"props":6954,"children":6955},{"style":560},[6956],{"type":34,"value":1386},{"type":25,"tag":541,"props":6958,"children":6959},{"style":893},[6960],{"type":34,"value":6961}," 5px",{"type":25,"tag":541,"props":6963,"children":6964},{"style":893},[6965],{"type":34,"value":6966}," 0",{"type":25,"tag":541,"props":6968,"children":6969},{"style":893},[6970],{"type":34,"value":6971}," 22px",{"type":25,"tag":541,"props":6973,"children":6974},{"style":893},[6975],{"type":34,"value":6966},{"type":25,"tag":541,"props":6977,"children":6978},{"style":560},[6979],{"type":34,"value":3361},{"type":25,"tag":541,"props":6981,"children":6983},{"class":543,"line":6982},31,[6984,6989,6993,6998],{"type":25,"tag":541,"props":6985,"children":6986},{"style":6457},[6987],{"type":34,"value":6988},"  border",{"type":25,"tag":541,"props":6990,"children":6991},{"style":560},[6992],{"type":34,"value":1386},{"type":25,"tag":541,"props":6994,"children":6995},{"style":566},[6996],{"type":34,"value":6997}," none",{"type":25,"tag":541,"props":6999,"children":7000},{"style":560},[7001],{"type":34,"value":3361},{"type":25,"tag":541,"props":7003,"children":7005},{"class":543,"line":7004},32,[7006],{"type":25,"tag":541,"props":7007,"children":7008},{"style":560},[7009],{"type":34,"value":574},{"type":25,"tag":541,"props":7011,"children":7013},{"class":543,"line":7012},33,[7014,7018,7022,7026,7030],{"type":25,"tag":541,"props":7015,"children":7016},{"style":560},[7017],{"type":34,"value":2559},{"type":25,"tag":541,"props":7019,"children":7020},{"style":548},[7021],{"type":34,"value":6106},{"type":25,"tag":541,"props":7023,"children":7024},{"style":560},[7025],{"type":34,"value":6889},{"type":25,"tag":541,"props":7027,"children":7028},{"style":548},[7029],{"type":34,"value":6320},{"type":25,"tag":541,"props":7031,"children":7032},{"style":560},[7033],{"type":34,"value":2023},{"type":25,"tag":541,"props":7035,"children":7037},{"class":543,"line":7036},34,[7038,7042,7046,7050,7055],{"type":25,"tag":541,"props":7039,"children":7040},{"style":6457},[7041],{"type":34,"value":6460},{"type":25,"tag":541,"props":7043,"children":7044},{"style":560},[7045],{"type":34,"value":1386},{"type":25,"tag":541,"props":7047,"children":7048},{"style":560},[7049],{"type":34,"value":6469},{"type":25,"tag":541,"props":7051,"children":7052},{"style":566},[7053],{"type":34,"value":7054},"04AA6D",{"type":25,"tag":541,"props":7056,"children":7057},{"style":560},[7058],{"type":34,"value":3361},{"type":25,"tag":541,"props":7060,"children":7062},{"class":543,"line":7061},35,[7063,7067,7071,7076,7081],{"type":25,"tag":541,"props":7064,"children":7065},{"style":6457},[7066],{"type":34,"value":6826},{"type":25,"tag":541,"props":7068,"children":7069},{"style":560},[7070],{"type":34,"value":1386},{"type":25,"tag":541,"props":7072,"children":7073},{"style":893},[7074],{"type":34,"value":7075}," 16px",{"type":25,"tag":541,"props":7077,"children":7078},{"style":893},[7079],{"type":34,"value":7080}," 20px",{"type":25,"tag":541,"props":7082,"children":7083},{"style":560},[7084],{"type":34,"value":3361},{"type":25,"tag":541,"props":7086,"children":7088},{"class":543,"line":7087},36,[7089,7093,7097,7101],{"type":25,"tag":541,"props":7090,"children":7091},{"style":6457},[7092],{"type":34,"value":6988},{"type":25,"tag":541,"props":7094,"children":7095},{"style":560},[7096],{"type":34,"value":1386},{"type":25,"tag":541,"props":7098,"children":7099},{"style":566},[7100],{"type":34,"value":6997},{"type":25,"tag":541,"props":7102,"children":7103},{"style":560},[7104],{"type":34,"value":3361},{"type":25,"tag":541,"props":7106,"children":7108},{"class":543,"line":7107},37,[7109,7114,7118,7123],{"type":25,"tag":541,"props":7110,"children":7111},{"style":6457},[7112],{"type":34,"value":7113},"  cursor",{"type":25,"tag":541,"props":7115,"children":7116},{"style":560},[7117],{"type":34,"value":1386},{"type":25,"tag":541,"props":7119,"children":7120},{"style":566},[7121],{"type":34,"value":7122}," pointer",{"type":25,"tag":541,"props":7124,"children":7125},{"style":560},[7126],{"type":34,"value":3361},{"type":25,"tag":541,"props":7128,"children":7130},{"class":543,"line":7129},38,[7131,7135,7139,7144],{"type":25,"tag":541,"props":7132,"children":7133},{"style":6457},[7134],{"type":34,"value":6910},{"type":25,"tag":541,"props":7136,"children":7137},{"style":560},[7138],{"type":34,"value":1386},{"type":25,"tag":541,"props":7140,"children":7141},{"style":893},[7142],{"type":34,"value":7143}," 100%",{"type":25,"tag":541,"props":7145,"children":7146},{"style":560},[7147],{"type":34,"value":3361},{"type":25,"tag":541,"props":7149,"children":7151},{"class":543,"line":7150},39,[7152,7157,7161,7166],{"type":25,"tag":541,"props":7153,"children":7154},{"style":6457},[7155],{"type":34,"value":7156},"  margin-bottom",{"type":25,"tag":541,"props":7158,"children":7159},{"style":560},[7160],{"type":34,"value":1386},{"type":25,"tag":541,"props":7162,"children":7163},{"style":893},[7164],{"type":34,"value":7165},"10px",{"type":25,"tag":541,"props":7167,"children":7168},{"style":560},[7169],{"type":34,"value":3361},{"type":25,"tag":541,"props":7171,"children":7173},{"class":543,"line":7172},40,[7174,7178,7182,7187],{"type":25,"tag":541,"props":7175,"children":7176},{"style":6457},[7177],{"type":34,"value":6776},{"type":25,"tag":541,"props":7179,"children":7180},{"style":560},[7181],{"type":34,"value":1386},{"type":25,"tag":541,"props":7183,"children":7184},{"style":893},[7185],{"type":34,"value":7186}," 0.8",{"type":25,"tag":541,"props":7188,"children":7189},{"style":560},[7190],{"type":34,"value":3361},{"type":25,"tag":541,"props":7192,"children":7194},{"class":543,"line":7193},41,[7195,7199,7203,7207],{"type":25,"tag":541,"props":7196,"children":7197},{"style":6457},[7198],{"type":34,"value":6486},{"type":25,"tag":541,"props":7200,"children":7201},{"style":560},[7202],{"type":34,"value":1386},{"type":25,"tag":541,"props":7204,"children":7205},{"style":566},[7206],{"type":34,"value":6495},{"type":25,"tag":541,"props":7208,"children":7209},{"style":560},[7210],{"type":34,"value":3361},{"type":25,"tag":541,"props":7212,"children":7214},{"class":543,"line":7213},42,[7215],{"type":25,"tag":541,"props":7216,"children":7217},{"style":560},[7218],{"type":34,"value":574},{"type":25,"tag":30,"props":7220,"children":7221},{},[7222],{"type":34,"value":7223},"Even though it's pretty basic CSS, there are some notable things to talk in here.",{"type":25,"tag":30,"props":7225,"children":7226},{},[7227,7233,7235,7241],{"type":25,"tag":522,"props":7228,"children":7230},{"className":7229},[],[7231],{"type":34,"value":7232},"display: flex;",{"type":34,"value":7234}," helps us arrange content in an easy manner, take a look at (",{"type":25,"tag":67,"props":7236,"children":7239},{"href":7237,"rel":7238},"https:\u002F\u002Fwww.w3schools.com\u002Fcss\u002Fcss3_flexbox.asp",[4727],[7240],{"type":34,"value":7237},{"type":34,"value":7242},") to learn more about flex boxes.",{"type":25,"tag":30,"props":7244,"children":7245},{},[7246,7252,7253,7259],{"type":25,"tag":522,"props":7247,"children":7249},{"className":7248},[],[7250],{"type":34,"value":7251},"justify-content",{"type":34,"value":6405},{"type":25,"tag":522,"props":7254,"children":7256},{"className":7255},[],[7257],{"type":34,"value":7258},"align-items",{"type":34,"value":7260}," are also MVPs because they're your go tos when trying to center things. If you're ever having trouble, those are your best bet.",{"type":25,"tag":30,"props":7262,"children":7263},{},[7264,7270],{"type":25,"tag":522,"props":7265,"children":7267},{"className":7266},[],[7268],{"type":34,"value":7269},".btn:hover",{"type":34,"value":7271}," activates only when your cursor is hovering over the element containing it.",{"type":25,"tag":30,"props":7273,"children":7274},{},[7275,7277,7282],{"type":34,"value":7276},"If we wanted a static web page, we would basically be done. All that's left is to add the list of tasks to do in the ",{"type":25,"tag":522,"props":7278,"children":7280},{"className":7279},[],[7281],{"type":34,"value":477},{"type":34,"value":7283}," section, and you're done:",{"type":25,"tag":531,"props":7285,"children":7287},{"code":7286,"language":2818,"meta":8,"className":2816,"style":8},"\u003Cul>\n  \u003Cli>\n    \u003Cp>Wash the dishes\u003C\u002Fp>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cp>Sweep the leaves\u003C\u002Fp>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cp>Jog in the morning\u003C\u002Fp>\n  \u003C\u002Fli>\n  \u003Cli>\n    \u003Cp>Finish homework\u003C\u002Fp>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n",[7288],{"type":25,"tag":522,"props":7289,"children":7290},{"__ignoreMap":8},[7291,7306,7321,7353,7368,7383,7415,7430,7445,7477,7492,7507,7539,7554],{"type":25,"tag":541,"props":7292,"children":7293},{"class":543,"line":544},[7294,7298,7302],{"type":25,"tag":541,"props":7295,"children":7296},{"style":560},[7297],{"type":34,"value":2853},{"type":25,"tag":541,"props":7299,"children":7300},{"style":1378},[7301],{"type":34,"value":1095},{"type":25,"tag":541,"props":7303,"children":7304},{"style":560},[7305],{"type":34,"value":2845},{"type":25,"tag":541,"props":7307,"children":7308},{"class":543,"line":458},[7309,7313,7317],{"type":25,"tag":541,"props":7310,"children":7311},{"style":560},[7312],{"type":34,"value":2869},{"type":25,"tag":541,"props":7314,"children":7315},{"style":1378},[7316],{"type":34,"value":1099},{"type":25,"tag":541,"props":7318,"children":7319},{"style":560},[7320],{"type":34,"value":2845},{"type":25,"tag":541,"props":7322,"children":7323},{"class":543,"line":461},[7324,7328,7332,7336,7341,7345,7349],{"type":25,"tag":541,"props":7325,"children":7326},{"style":560},[7327],{"type":34,"value":2886},{"type":25,"tag":541,"props":7329,"children":7330},{"style":1378},[7331],{"type":34,"value":30},{"type":25,"tag":541,"props":7333,"children":7334},{"style":560},[7335],{"type":34,"value":3018},{"type":25,"tag":541,"props":7337,"children":7338},{"style":566},[7339],{"type":34,"value":7340},"Wash the dishes",{"type":25,"tag":541,"props":7342,"children":7343},{"style":560},[7344],{"type":34,"value":3028},{"type":25,"tag":541,"props":7346,"children":7347},{"style":1378},[7348],{"type":34,"value":30},{"type":25,"tag":541,"props":7350,"children":7351},{"style":560},[7352],{"type":34,"value":2845},{"type":25,"tag":541,"props":7354,"children":7355},{"class":543,"line":1326},[7356,7360,7364],{"type":25,"tag":541,"props":7357,"children":7358},{"style":560},[7359],{"type":34,"value":2956},{"type":25,"tag":541,"props":7361,"children":7362},{"style":1378},[7363],{"type":34,"value":1099},{"type":25,"tag":541,"props":7365,"children":7366},{"style":560},[7367],{"type":34,"value":2845},{"type":25,"tag":541,"props":7369,"children":7370},{"class":543,"line":1447},[7371,7375,7379],{"type":25,"tag":541,"props":7372,"children":7373},{"style":560},[7374],{"type":34,"value":2869},{"type":25,"tag":541,"props":7376,"children":7377},{"style":1378},[7378],{"type":34,"value":1099},{"type":25,"tag":541,"props":7380,"children":7381},{"style":560},[7382],{"type":34,"value":2845},{"type":25,"tag":541,"props":7384,"children":7385},{"class":543,"line":1460},[7386,7390,7394,7398,7403,7407,7411],{"type":25,"tag":541,"props":7387,"children":7388},{"style":560},[7389],{"type":34,"value":2886},{"type":25,"tag":541,"props":7391,"children":7392},{"style":1378},[7393],{"type":34,"value":30},{"type":25,"tag":541,"props":7395,"children":7396},{"style":560},[7397],{"type":34,"value":3018},{"type":25,"tag":541,"props":7399,"children":7400},{"style":566},[7401],{"type":34,"value":7402},"Sweep the leaves",{"type":25,"tag":541,"props":7404,"children":7405},{"style":560},[7406],{"type":34,"value":3028},{"type":25,"tag":541,"props":7408,"children":7409},{"style":1378},[7410],{"type":34,"value":30},{"type":25,"tag":541,"props":7412,"children":7413},{"style":560},[7414],{"type":34,"value":2845},{"type":25,"tag":541,"props":7416,"children":7417},{"class":543,"line":1473},[7418,7422,7426],{"type":25,"tag":541,"props":7419,"children":7420},{"style":560},[7421],{"type":34,"value":2956},{"type":25,"tag":541,"props":7423,"children":7424},{"style":1378},[7425],{"type":34,"value":1099},{"type":25,"tag":541,"props":7427,"children":7428},{"style":560},[7429],{"type":34,"value":2845},{"type":25,"tag":541,"props":7431,"children":7432},{"class":543,"line":1491},[7433,7437,7441],{"type":25,"tag":541,"props":7434,"children":7435},{"style":560},[7436],{"type":34,"value":2869},{"type":25,"tag":541,"props":7438,"children":7439},{"style":1378},[7440],{"type":34,"value":1099},{"type":25,"tag":541,"props":7442,"children":7443},{"style":560},[7444],{"type":34,"value":2845},{"type":25,"tag":541,"props":7446,"children":7447},{"class":543,"line":1501},[7448,7452,7456,7460,7465,7469,7473],{"type":25,"tag":541,"props":7449,"children":7450},{"style":560},[7451],{"type":34,"value":2886},{"type":25,"tag":541,"props":7453,"children":7454},{"style":1378},[7455],{"type":34,"value":30},{"type":25,"tag":541,"props":7457,"children":7458},{"style":560},[7459],{"type":34,"value":3018},{"type":25,"tag":541,"props":7461,"children":7462},{"style":566},[7463],{"type":34,"value":7464},"Jog in the morning",{"type":25,"tag":541,"props":7466,"children":7467},{"style":560},[7468],{"type":34,"value":3028},{"type":25,"tag":541,"props":7470,"children":7471},{"style":1378},[7472],{"type":34,"value":30},{"type":25,"tag":541,"props":7474,"children":7475},{"style":560},[7476],{"type":34,"value":2845},{"type":25,"tag":541,"props":7478,"children":7479},{"class":543,"line":1514},[7480,7484,7488],{"type":25,"tag":541,"props":7481,"children":7482},{"style":560},[7483],{"type":34,"value":2956},{"type":25,"tag":541,"props":7485,"children":7486},{"style":1378},[7487],{"type":34,"value":1099},{"type":25,"tag":541,"props":7489,"children":7490},{"style":560},[7491],{"type":34,"value":2845},{"type":25,"tag":541,"props":7493,"children":7494},{"class":543,"line":1537},[7495,7499,7503],{"type":25,"tag":541,"props":7496,"children":7497},{"style":560},[7498],{"type":34,"value":2869},{"type":25,"tag":541,"props":7500,"children":7501},{"style":1378},[7502],{"type":34,"value":1099},{"type":25,"tag":541,"props":7504,"children":7505},{"style":560},[7506],{"type":34,"value":2845},{"type":25,"tag":541,"props":7508,"children":7509},{"class":543,"line":1545},[7510,7514,7518,7522,7527,7531,7535],{"type":25,"tag":541,"props":7511,"children":7512},{"style":560},[7513],{"type":34,"value":2886},{"type":25,"tag":541,"props":7515,"children":7516},{"style":1378},[7517],{"type":34,"value":30},{"type":25,"tag":541,"props":7519,"children":7520},{"style":560},[7521],{"type":34,"value":3018},{"type":25,"tag":541,"props":7523,"children":7524},{"style":566},[7525],{"type":34,"value":7526},"Finish homework",{"type":25,"tag":541,"props":7528,"children":7529},{"style":560},[7530],{"type":34,"value":3028},{"type":25,"tag":541,"props":7532,"children":7533},{"style":1378},[7534],{"type":34,"value":30},{"type":25,"tag":541,"props":7536,"children":7537},{"style":560},[7538],{"type":34,"value":2845},{"type":25,"tag":541,"props":7540,"children":7541},{"class":543,"line":1567},[7542,7546,7550],{"type":25,"tag":541,"props":7543,"children":7544},{"style":560},[7545],{"type":34,"value":2956},{"type":25,"tag":541,"props":7547,"children":7548},{"style":1378},[7549],{"type":34,"value":1099},{"type":25,"tag":541,"props":7551,"children":7552},{"style":560},[7553],{"type":34,"value":2845},{"type":25,"tag":541,"props":7555,"children":7556},{"class":543,"line":1585},[7557,7561,7565],{"type":25,"tag":541,"props":7558,"children":7559},{"style":560},[7560],{"type":34,"value":3028},{"type":25,"tag":541,"props":7562,"children":7563},{"style":1378},[7564],{"type":34,"value":1095},{"type":25,"tag":541,"props":7566,"children":7567},{"style":560},[7568],{"type":34,"value":2845},{"type":25,"tag":30,"props":7570,"children":7571},{},[7572,7574,7580,7582,7588,7590,7596],{"type":34,"value":7573},"There are some elements that are unfamiliar here. ",{"type":25,"tag":522,"props":7575,"children":7577},{"className":7576},[],[7578],{"type":34,"value":7579},"\u003Cul>",{"type":34,"value":7581}," stands for unordered list, and you use it when you want to display a list of items. You can also use ",{"type":25,"tag":522,"props":7583,"children":7585},{"className":7584},[],[7586],{"type":34,"value":7587},"\u003Col>",{"type":34,"value":7589}," for ordered lists. To make a list item, use the section ",{"type":25,"tag":522,"props":7591,"children":7593},{"className":7592},[],[7594],{"type":34,"value":7595},"\u003Cli>",{"type":34,"value":7597},". Whatever is inside that section is considered part of that list item.",{"type":25,"tag":62,"props":7599,"children":7601},{"id":7600},"making-it-dynamic",[7602,7606],{"type":25,"tag":67,"props":7603,"children":7605},{"href":7604,"ariaHidden":70,"tabIndex":71},"#making-it-dynamic",[],{"type":34,"value":7607},"Making it dynamic",{"type":25,"tag":30,"props":7609,"children":7610},{},[7611,7613,7619],{"type":34,"value":7612},"Since this needs to be dynamic, we'll use JavaScript to send web requests. Get rid of the code in ",{"type":25,"tag":522,"props":7614,"children":7616},{"className":7615},[],[7617],{"type":34,"value":7618},"\u003Ccontent>",{"type":34,"value":7620}," and instead, add a script:",{"type":25,"tag":531,"props":7622,"children":7624},{"code":7623,"language":2818,"meta":8,"className":2816,"style":8},"          \u003Cscript>load_list()\u003C\u002Fscript>\n",[7625],{"type":25,"tag":522,"props":7626,"children":7627},{"__ignoreMap":8},[7628],{"type":25,"tag":541,"props":7629,"children":7630},{"class":543,"line":544},[7631,7636,7640,7644,7649,7653,7657,7661],{"type":25,"tag":541,"props":7632,"children":7633},{"style":560},[7634],{"type":34,"value":7635},"          \u003C",{"type":25,"tag":541,"props":7637,"children":7638},{"style":1378},[7639],{"type":34,"value":3048},{"type":25,"tag":541,"props":7641,"children":7642},{"style":560},[7643],{"type":34,"value":3018},{"type":25,"tag":541,"props":7645,"children":7646},{"style":859},[7647],{"type":34,"value":7648},"load_list",{"type":25,"tag":541,"props":7650,"children":7651},{"style":566},[7652],{"type":34,"value":3929},{"type":25,"tag":541,"props":7654,"children":7655},{"style":560},[7656],{"type":34,"value":3028},{"type":25,"tag":541,"props":7658,"children":7659},{"style":1378},[7660],{"type":34,"value":3048},{"type":25,"tag":541,"props":7662,"children":7663},{"style":560},[7664],{"type":34,"value":2845},{"type":25,"tag":30,"props":7666,"children":7667},{},[7668,7670,7675],{"type":34,"value":7669},"We add that function in ",{"type":25,"tag":522,"props":7671,"children":7673},{"className":7672},[],[7674],{"type":34,"value":5525},{"type":34,"value":1386},{"type":25,"tag":531,"props":7677,"children":7681},{"code":7678,"language":7679,"meta":8,"className":7680,"style":8},"function load_list() {\n  let html = '\u003Cul>';\n  html+= '\u003C\u002Ful>'\n\n  document.getElementById('contents').innerHTML = html\n}\n","javascript","language-javascript shiki shiki-themes material-theme-palenight",[7682],{"type":25,"tag":522,"props":7683,"children":7684},{"__ignoreMap":8},[7685,7705,7738,7765,7772,7825],{"type":25,"tag":541,"props":7686,"children":7687},{"class":543,"line":544},[7688,7692,7697,7701],{"type":25,"tag":541,"props":7689,"children":7690},{"style":1866},[7691],{"type":34,"value":3890},{"type":25,"tag":541,"props":7693,"children":7694},{"style":859},[7695],{"type":34,"value":7696}," load_list",{"type":25,"tag":541,"props":7698,"children":7699},{"style":560},[7700],{"type":34,"value":3929},{"type":25,"tag":541,"props":7702,"children":7703},{"style":560},[7704],{"type":34,"value":2023},{"type":25,"tag":541,"props":7706,"children":7707},{"class":543,"line":458},[7708,7713,7717,7721,7726,7730,7734],{"type":25,"tag":541,"props":7709,"children":7710},{"style":1866},[7711],{"type":34,"value":7712},"  let",{"type":25,"tag":541,"props":7714,"children":7715},{"style":566},[7716],{"type":34,"value":2840},{"type":25,"tag":541,"props":7718,"children":7719},{"style":560},[7720],{"type":34,"value":3317},{"type":25,"tag":541,"props":7722,"children":7723},{"style":560},[7724],{"type":34,"value":7725}," '",{"type":25,"tag":541,"props":7727,"children":7728},{"style":554},[7729],{"type":34,"value":7579},{"type":25,"tag":541,"props":7731,"children":7732},{"style":560},[7733],{"type":34,"value":3859},{"type":25,"tag":541,"props":7735,"children":7736},{"style":560},[7737],{"type":34,"value":3361},{"type":25,"tag":541,"props":7739,"children":7740},{"class":543,"line":461},[7741,7746,7751,7755,7760],{"type":25,"tag":541,"props":7742,"children":7743},{"style":566},[7744],{"type":34,"value":7745},"  html",{"type":25,"tag":541,"props":7747,"children":7748},{"style":560},[7749],{"type":34,"value":7750},"+=",{"type":25,"tag":541,"props":7752,"children":7753},{"style":560},[7754],{"type":34,"value":7725},{"type":25,"tag":541,"props":7756,"children":7757},{"style":554},[7758],{"type":34,"value":7759},"\u003C\u002Ful>",{"type":25,"tag":541,"props":7761,"children":7762},{"style":560},[7763],{"type":34,"value":7764},"'\n",{"type":25,"tag":541,"props":7766,"children":7767},{"class":543,"line":1326},[7768],{"type":25,"tag":541,"props":7769,"children":7770},{"emptyLinePlaceholder":1495},[7771],{"type":34,"value":1498},{"type":25,"tag":541,"props":7773,"children":7774},{"class":543,"line":1447},[7775,7780,7784,7788,7792,7796,7800,7804,7808,7812,7816,7820],{"type":25,"tag":541,"props":7776,"children":7777},{"style":566},[7778],{"type":34,"value":7779},"  document",{"type":25,"tag":541,"props":7781,"children":7782},{"style":560},[7783],{"type":34,"value":2559},{"type":25,"tag":541,"props":7785,"children":7786},{"style":859},[7787],{"type":34,"value":3161},{"type":25,"tag":541,"props":7789,"children":7790},{"style":1378},[7791],{"type":34,"value":3166},{"type":25,"tag":541,"props":7793,"children":7794},{"style":560},[7795],{"type":34,"value":3859},{"type":25,"tag":541,"props":7797,"children":7798},{"style":554},[7799],{"type":34,"value":6035},{"type":25,"tag":541,"props":7801,"children":7802},{"style":560},[7803],{"type":34,"value":3859},{"type":25,"tag":541,"props":7805,"children":7806},{"style":1378},[7807],{"type":34,"value":3356},{"type":25,"tag":541,"props":7809,"children":7810},{"style":560},[7811],{"type":34,"value":2559},{"type":25,"tag":541,"props":7813,"children":7814},{"style":566},[7815],{"type":34,"value":3312},{"type":25,"tag":541,"props":7817,"children":7818},{"style":560},[7819],{"type":34,"value":3317},{"type":25,"tag":541,"props":7821,"children":7822},{"style":566},[7823],{"type":34,"value":7824}," html\n",{"type":25,"tag":541,"props":7826,"children":7827},{"class":543,"line":1460},[7828],{"type":25,"tag":541,"props":7829,"children":7830},{"style":560},[7831],{"type":34,"value":574},{"type":25,"tag":30,"props":7833,"children":7834},{},[7835,7837,7842],{"type":34,"value":7836},"What does this function do? It makes an unordered list, and we overwrite the element that has the id ",{"type":25,"tag":522,"props":7838,"children":7840},{"className":7839},[],[7841],{"type":34,"value":6035},{"type":34,"value":7843}," to contain the html we defined, which in this case is an unordered list.",{"type":25,"tag":62,"props":7845,"children":7847},{"id":7846},"reading-the-api",[7848,7852],{"type":25,"tag":67,"props":7849,"children":7851},{"href":7850,"ariaHidden":70,"tabIndex":71},"#reading-the-api",[],{"type":34,"value":7853},"Reading the API",{"type":25,"tag":30,"props":7855,"children":7856},{},[7857,7859,7863,7865,7870],{"type":34,"value":7858},"Now, we actually need to get the information. Instead of using Python, we'll be using ",{"type":25,"tag":699,"props":7860,"children":7861},{},[7862],{"type":34,"value":3850},{"type":34,"value":7864},", a built in function of JavaScript. Similar to how we sent web requests in ",{"type":25,"tag":67,"props":7866,"children":7868},{"href":5445,"rel":7867},[4727],[7869],{"type":34,"value":5449},{"type":34,"value":7871},", we can send different types of requests, modify header and body content, and choose which URL we are trying to send it to.",{"type":25,"tag":30,"props":7873,"children":7874},{},[7875,7877,7882,7884,7890],{"type":34,"value":7876},"However, before anything, we should take a look at this ToDoList API, and its ",{"type":25,"tag":699,"props":7878,"children":7879},{},[7880],{"type":34,"value":7881},"documentation",{"type":34,"value":7883},", which can be found in this repository under ",{"type":25,"tag":522,"props":7885,"children":7887},{"className":7886},[],[7888],{"type":34,"value":7889},"ToDo Documentation.md",{"type":34,"value":2559},{"type":25,"tag":30,"props":7892,"children":7893},{},[7894,7896,7902],{"type":34,"value":7895},"The first thing we will do is have ",{"type":25,"tag":522,"props":7897,"children":7899},{"className":7898},[],[7900],{"type":34,"value":7901},"load_list()",{"type":34,"value":7903}," send a request. Since this is a GET request, we do not need a body, we just need to send the request with the right header information. Why? Because this API doesn't allow requests from everyone. Only those with a special access code will be able to send and receive proper requests.",{"type":25,"tag":30,"props":7905,"children":7906},{},[7907,7909,7915],{"type":34,"value":7908},"I will make a new function called ",{"type":25,"tag":522,"props":7910,"children":7912},{"className":7911},[],[7913],{"type":34,"value":7914},"getTasks()",{"type":34,"value":7916}," to perform this operation:",{"type":25,"tag":531,"props":7918,"children":7920},{"code":7919,"language":7679,"meta":8,"className":7680,"style":8},"async function getTasks() {\n  const URL = 'https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fget\u002F[username]'\n  const Params = {\n    headers: {\n      'x-access-token': '[SECRET_TOKEN]',\n      'Content-Type': 'application\u002Fjson'\n    },\n    method: 'GET'\n  }\n  return await fetch(URL, Params)\n    .then(res => res.json())\n    .catch(err => console.log(err))\n}\n",[7921],{"type":25,"tag":522,"props":7922,"children":7923},{"__ignoreMap":8},[7924,7949,7979,7999,8015,8053,8086,8094,8118,8125,8164,8207,8257],{"type":25,"tag":541,"props":7925,"children":7926},{"class":543,"line":544},[7927,7932,7936,7941,7945],{"type":25,"tag":541,"props":7928,"children":7929},{"style":1866},[7930],{"type":34,"value":7931},"async",{"type":25,"tag":541,"props":7933,"children":7934},{"style":1866},[7935],{"type":34,"value":3731},{"type":25,"tag":541,"props":7937,"children":7938},{"style":859},[7939],{"type":34,"value":7940}," getTasks",{"type":25,"tag":541,"props":7942,"children":7943},{"style":560},[7944],{"type":34,"value":3929},{"type":25,"tag":541,"props":7946,"children":7947},{"style":560},[7948],{"type":34,"value":2023},{"type":25,"tag":541,"props":7950,"children":7951},{"class":543,"line":458},[7952,7957,7962,7966,7970,7975],{"type":25,"tag":541,"props":7953,"children":7954},{"style":1866},[7955],{"type":34,"value":7956},"  const",{"type":25,"tag":541,"props":7958,"children":7959},{"style":566},[7960],{"type":34,"value":7961}," URL",{"type":25,"tag":541,"props":7963,"children":7964},{"style":560},[7965],{"type":34,"value":3317},{"type":25,"tag":541,"props":7967,"children":7968},{"style":560},[7969],{"type":34,"value":7725},{"type":25,"tag":541,"props":7971,"children":7972},{"style":554},[7973],{"type":34,"value":7974},"https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fget\u002F[username]",{"type":25,"tag":541,"props":7976,"children":7977},{"style":560},[7978],{"type":34,"value":7764},{"type":25,"tag":541,"props":7980,"children":7981},{"class":543,"line":461},[7982,7986,7991,7995],{"type":25,"tag":541,"props":7983,"children":7984},{"style":1866},[7985],{"type":34,"value":7956},{"type":25,"tag":541,"props":7987,"children":7988},{"style":566},[7989],{"type":34,"value":7990}," Params",{"type":25,"tag":541,"props":7992,"children":7993},{"style":560},[7994],{"type":34,"value":3317},{"type":25,"tag":541,"props":7996,"children":7997},{"style":560},[7998],{"type":34,"value":2023},{"type":25,"tag":541,"props":8000,"children":8001},{"class":543,"line":1326},[8002,8007,8011],{"type":25,"tag":541,"props":8003,"children":8004},{"style":1378},[8005],{"type":34,"value":8006},"    headers",{"type":25,"tag":541,"props":8008,"children":8009},{"style":560},[8010],{"type":34,"value":1386},{"type":25,"tag":541,"props":8012,"children":8013},{"style":560},[8014],{"type":34,"value":2023},{"type":25,"tag":541,"props":8016,"children":8017},{"class":543,"line":1447},[8018,8023,8028,8032,8036,8040,8045,8049],{"type":25,"tag":541,"props":8019,"children":8020},{"style":560},[8021],{"type":34,"value":8022},"      '",{"type":25,"tag":541,"props":8024,"children":8025},{"style":1378},[8026],{"type":34,"value":8027},"x-access-token",{"type":25,"tag":541,"props":8029,"children":8030},{"style":560},[8031],{"type":34,"value":3859},{"type":25,"tag":541,"props":8033,"children":8034},{"style":560},[8035],{"type":34,"value":1386},{"type":25,"tag":541,"props":8037,"children":8038},{"style":560},[8039],{"type":34,"value":7725},{"type":25,"tag":541,"props":8041,"children":8042},{"style":554},[8043],{"type":34,"value":8044},"[SECRET_TOKEN]",{"type":25,"tag":541,"props":8046,"children":8047},{"style":560},[8048],{"type":34,"value":3859},{"type":25,"tag":541,"props":8050,"children":8051},{"style":560},[8052],{"type":34,"value":1895},{"type":25,"tag":541,"props":8054,"children":8055},{"class":543,"line":1460},[8056,8060,8065,8069,8073,8077,8082],{"type":25,"tag":541,"props":8057,"children":8058},{"style":560},[8059],{"type":34,"value":8022},{"type":25,"tag":541,"props":8061,"children":8062},{"style":1378},[8063],{"type":34,"value":8064},"Content-Type",{"type":25,"tag":541,"props":8066,"children":8067},{"style":560},[8068],{"type":34,"value":3859},{"type":25,"tag":541,"props":8070,"children":8071},{"style":560},[8072],{"type":34,"value":1386},{"type":25,"tag":541,"props":8074,"children":8075},{"style":560},[8076],{"type":34,"value":7725},{"type":25,"tag":541,"props":8078,"children":8079},{"style":554},[8080],{"type":34,"value":8081},"application\u002Fjson",{"type":25,"tag":541,"props":8083,"children":8084},{"style":560},[8085],{"type":34,"value":7764},{"type":25,"tag":541,"props":8087,"children":8088},{"class":543,"line":1473},[8089],{"type":25,"tag":541,"props":8090,"children":8091},{"style":560},[8092],{"type":34,"value":8093},"    },\n",{"type":25,"tag":541,"props":8095,"children":8096},{"class":543,"line":1491},[8097,8102,8106,8110,8114],{"type":25,"tag":541,"props":8098,"children":8099},{"style":1378},[8100],{"type":34,"value":8101},"    method",{"type":25,"tag":541,"props":8103,"children":8104},{"style":560},[8105],{"type":34,"value":1386},{"type":25,"tag":541,"props":8107,"children":8108},{"style":560},[8109],{"type":34,"value":7725},{"type":25,"tag":541,"props":8111,"children":8112},{"style":554},[8113],{"type":34,"value":5242},{"type":25,"tag":541,"props":8115,"children":8116},{"style":560},[8117],{"type":34,"value":7764},{"type":25,"tag":541,"props":8119,"children":8120},{"class":543,"line":1501},[8121],{"type":25,"tag":541,"props":8122,"children":8123},{"style":560},[8124],{"type":34,"value":2790},{"type":25,"tag":541,"props":8126,"children":8127},{"class":543,"line":1514},[8128,8133,8138,8143,8147,8152,8156,8160],{"type":25,"tag":541,"props":8129,"children":8130},{"style":1683},[8131],{"type":34,"value":8132},"  return",{"type":25,"tag":541,"props":8134,"children":8135},{"style":1683},[8136],{"type":34,"value":8137}," await",{"type":25,"tag":541,"props":8139,"children":8140},{"style":859},[8141],{"type":34,"value":8142}," fetch",{"type":25,"tag":541,"props":8144,"children":8145},{"style":1378},[8146],{"type":34,"value":3166},{"type":25,"tag":541,"props":8148,"children":8149},{"style":566},[8150],{"type":34,"value":8151},"URL",{"type":25,"tag":541,"props":8153,"children":8154},{"style":560},[8155],{"type":34,"value":2106},{"type":25,"tag":541,"props":8157,"children":8158},{"style":566},[8159],{"type":34,"value":7990},{"type":25,"tag":541,"props":8161,"children":8162},{"style":1378},[8163],{"type":34,"value":3183},{"type":25,"tag":541,"props":8165,"children":8166},{"class":543,"line":1537},[8167,8172,8176,8180,8185,8189,8194,8198,8202],{"type":25,"tag":541,"props":8168,"children":8169},{"style":560},[8170],{"type":34,"value":8171},"    .",{"type":25,"tag":541,"props":8173,"children":8174},{"style":859},[8175],{"type":34,"value":3881},{"type":25,"tag":541,"props":8177,"children":8178},{"style":1378},[8179],{"type":34,"value":3166},{"type":25,"tag":541,"props":8181,"children":8182},{"style":3252},[8183],{"type":34,"value":8184},"res",{"type":25,"tag":541,"props":8186,"children":8187},{"style":1866},[8188],{"type":34,"value":3265},{"type":25,"tag":541,"props":8190,"children":8191},{"style":566},[8192],{"type":34,"value":8193}," res",{"type":25,"tag":541,"props":8195,"children":8196},{"style":560},[8197],{"type":34,"value":2559},{"type":25,"tag":541,"props":8199,"children":8200},{"style":859},[8201],{"type":34,"value":1843},{"type":25,"tag":541,"props":8203,"children":8204},{"style":1378},[8205],{"type":34,"value":8206},"())\n",{"type":25,"tag":541,"props":8208,"children":8209},{"class":543,"line":1545},[8210,8214,8218,8222,8227,8231,8236,8240,8244,8248,8252],{"type":25,"tag":541,"props":8211,"children":8212},{"style":560},[8213],{"type":34,"value":8171},{"type":25,"tag":541,"props":8215,"children":8216},{"style":859},[8217],{"type":34,"value":4289},{"type":25,"tag":541,"props":8219,"children":8220},{"style":1378},[8221],{"type":34,"value":3166},{"type":25,"tag":541,"props":8223,"children":8224},{"style":3252},[8225],{"type":34,"value":8226},"err",{"type":25,"tag":541,"props":8228,"children":8229},{"style":1866},[8230],{"type":34,"value":3265},{"type":25,"tag":541,"props":8232,"children":8233},{"style":566},[8234],{"type":34,"value":8235}," console",{"type":25,"tag":541,"props":8237,"children":8238},{"style":560},[8239],{"type":34,"value":2559},{"type":25,"tag":541,"props":8241,"children":8242},{"style":859},[8243],{"type":34,"value":3765},{"type":25,"tag":541,"props":8245,"children":8246},{"style":1378},[8247],{"type":34,"value":3166},{"type":25,"tag":541,"props":8249,"children":8250},{"style":566},[8251],{"type":34,"value":8226},{"type":25,"tag":541,"props":8253,"children":8254},{"style":1378},[8255],{"type":34,"value":8256},"))\n",{"type":25,"tag":541,"props":8258,"children":8259},{"class":543,"line":1567},[8260],{"type":25,"tag":541,"props":8261,"children":8262},{"style":560},[8263],{"type":34,"value":574},{"type":25,"tag":30,"props":8265,"children":8266},{},[8267],{"type":34,"value":8268},"You will get a username from the Discord Bot _____, and the x-access-token will also be provided at the time of the workshop. Note that I include the content type, because we want the API to recognize that our request may contain JSON (not in the get request, but for the other endpoints).",{"type":25,"tag":8270,"props":8271,"children":8273},"h4",{"id":8272},"promises",[8274,8278],{"type":25,"tag":67,"props":8275,"children":8277},{"href":8276,"ariaHidden":70,"tabIndex":71},"#promises",[],{"type":34,"value":8279},"Promises",{"type":25,"tag":30,"props":8281,"children":8282},{},[8283,8285,8291,8292,8297,8298,8304],{"type":34,"value":8284},"What is the ",{"type":25,"tag":522,"props":8286,"children":8288},{"className":8287},[],[8289],{"type":34,"value":8290},"await",{"type":34,"value":2544},{"type":25,"tag":522,"props":8293,"children":8295},{"className":8294},[],[8296],{"type":34,"value":7931},{"type":34,"value":2551},{"type":25,"tag":522,"props":8299,"children":8301},{"className":8300},[],[8302],{"type":34,"value":8303},".then",{"type":34,"value":8305}," syntax used for?",{"type":25,"tag":30,"props":8307,"children":8308},{},[8309,8311,8316,8318,8323],{"type":34,"value":8310},"When we are sending requests to APIs, we don't get our information instantaneously. We have to wait for the API to receive our request, and then wait for it to send a response back. Sometimes, ",{"type":25,"tag":522,"props":8312,"children":8314},{"className":8313},[],[8315],{"type":34,"value":3850},{"type":34,"value":8317}," may be too fast and you might not get the response you are looking for. By using ",{"type":25,"tag":522,"props":8319,"children":8321},{"className":8320},[],[8322],{"type":34,"value":8290},{"type":34,"value":8324},", we are essentially \"waiting\" until the fetch request has been fulfilled.",{"type":25,"tag":30,"props":8326,"children":8327},{},[8328,8330,8335,8337,8343,8345,8351,8353,8358],{"type":34,"value":8329},"So what is a Promise? In fact, ",{"type":25,"tag":522,"props":8331,"children":8333},{"className":8332},[],[8334],{"type":34,"value":3850},{"type":34,"value":8336}," returns a Promise object, which represents the eventual completion of an asynchronous operation and its resulting value. We use the ",{"type":25,"tag":522,"props":8338,"children":8340},{"className":8339},[],[8341],{"type":34,"value":8342},".then()",{"type":34,"value":8344}," syntax to handle what comes after when the operation is completed, and ",{"type":25,"tag":522,"props":8346,"children":8348},{"className":8347},[],[8349],{"type":34,"value":8350},".catch()",{"type":34,"value":8352}," for if the Promise failed (e.g the request didn't go through)\nSince requests are asynchronous, that is the reason why we must add ",{"type":25,"tag":522,"props":8354,"children":8356},{"className":8355},[],[8357],{"type":34,"value":7931},{"type":34,"value":8359}," in front of the function.",{"type":25,"tag":30,"props":8361,"children":8362},{},[8363,8365,8370,8372,8377,8379,8384,8386,8391,8393,8398,8400,8405],{"type":34,"value":8364},"Now that we have ",{"type":25,"tag":522,"props":8366,"children":8368},{"className":8367},[],[8369],{"type":34,"value":7914},{"type":34,"value":8371},", we can call that inside our function ",{"type":25,"tag":522,"props":8373,"children":8375},{"className":8374},[],[8376],{"type":34,"value":7901},{"type":34,"value":8378},". But recall that ",{"type":25,"tag":522,"props":8380,"children":8382},{"className":8381},[],[8383],{"type":34,"value":7914},{"type":34,"value":8385}," is an asynchronous function, so we need to put ",{"type":25,"tag":522,"props":8387,"children":8389},{"className":8388},[],[8390],{"type":34,"value":8290},{"type":34,"value":8392}," in front of the function, as well as ",{"type":25,"tag":522,"props":8394,"children":8396},{"className":8395},[],[8397],{"type":34,"value":7931},{"type":34,"value":8399}," in front of ",{"type":25,"tag":522,"props":8401,"children":8403},{"className":8402},[],[8404],{"type":34,"value":7901},{"type":34,"value":8406}," like so:",{"type":25,"tag":531,"props":8408,"children":8410},{"code":8409,"language":7679,"meta":8,"className":7680,"style":8},"async function load_list() {\n  let html = '\u003Cul>';\n\n  const response = await getTasks();\n\n  html+= '\u003C\u002Ful>'\n\n  document.getElementById('contents').innerHTML = html\n}\n",[8411],{"type":25,"tag":522,"props":8412,"children":8413},{"__ignoreMap":8},[8414,8437,8468,8475,8506,8513,8536,8543,8594],{"type":25,"tag":541,"props":8415,"children":8416},{"class":543,"line":544},[8417,8421,8425,8429,8433],{"type":25,"tag":541,"props":8418,"children":8419},{"style":1866},[8420],{"type":34,"value":7931},{"type":25,"tag":541,"props":8422,"children":8423},{"style":1866},[8424],{"type":34,"value":3731},{"type":25,"tag":541,"props":8426,"children":8427},{"style":859},[8428],{"type":34,"value":7696},{"type":25,"tag":541,"props":8430,"children":8431},{"style":560},[8432],{"type":34,"value":3929},{"type":25,"tag":541,"props":8434,"children":8435},{"style":560},[8436],{"type":34,"value":2023},{"type":25,"tag":541,"props":8438,"children":8439},{"class":543,"line":458},[8440,8444,8448,8452,8456,8460,8464],{"type":25,"tag":541,"props":8441,"children":8442},{"style":1866},[8443],{"type":34,"value":7712},{"type":25,"tag":541,"props":8445,"children":8446},{"style":566},[8447],{"type":34,"value":2840},{"type":25,"tag":541,"props":8449,"children":8450},{"style":560},[8451],{"type":34,"value":3317},{"type":25,"tag":541,"props":8453,"children":8454},{"style":560},[8455],{"type":34,"value":7725},{"type":25,"tag":541,"props":8457,"children":8458},{"style":554},[8459],{"type":34,"value":7579},{"type":25,"tag":541,"props":8461,"children":8462},{"style":560},[8463],{"type":34,"value":3859},{"type":25,"tag":541,"props":8465,"children":8466},{"style":560},[8467],{"type":34,"value":3361},{"type":25,"tag":541,"props":8469,"children":8470},{"class":543,"line":461},[8471],{"type":25,"tag":541,"props":8472,"children":8473},{"emptyLinePlaceholder":1495},[8474],{"type":34,"value":1498},{"type":25,"tag":541,"props":8476,"children":8477},{"class":543,"line":1326},[8478,8482,8486,8490,8494,8498,8502],{"type":25,"tag":541,"props":8479,"children":8480},{"style":1866},[8481],{"type":34,"value":7956},{"type":25,"tag":541,"props":8483,"children":8484},{"style":566},[8485],{"type":34,"value":3916},{"type":25,"tag":541,"props":8487,"children":8488},{"style":560},[8489],{"type":34,"value":3317},{"type":25,"tag":541,"props":8491,"children":8492},{"style":1683},[8493],{"type":34,"value":8137},{"type":25,"tag":541,"props":8495,"children":8496},{"style":859},[8497],{"type":34,"value":7940},{"type":25,"tag":541,"props":8499,"children":8500},{"style":1378},[8501],{"type":34,"value":3929},{"type":25,"tag":541,"props":8503,"children":8504},{"style":560},[8505],{"type":34,"value":3361},{"type":25,"tag":541,"props":8507,"children":8508},{"class":543,"line":1447},[8509],{"type":25,"tag":541,"props":8510,"children":8511},{"emptyLinePlaceholder":1495},[8512],{"type":34,"value":1498},{"type":25,"tag":541,"props":8514,"children":8515},{"class":543,"line":1460},[8516,8520,8524,8528,8532],{"type":25,"tag":541,"props":8517,"children":8518},{"style":566},[8519],{"type":34,"value":7745},{"type":25,"tag":541,"props":8521,"children":8522},{"style":560},[8523],{"type":34,"value":7750},{"type":25,"tag":541,"props":8525,"children":8526},{"style":560},[8527],{"type":34,"value":7725},{"type":25,"tag":541,"props":8529,"children":8530},{"style":554},[8531],{"type":34,"value":7759},{"type":25,"tag":541,"props":8533,"children":8534},{"style":560},[8535],{"type":34,"value":7764},{"type":25,"tag":541,"props":8537,"children":8538},{"class":543,"line":1473},[8539],{"type":25,"tag":541,"props":8540,"children":8541},{"emptyLinePlaceholder":1495},[8542],{"type":34,"value":1498},{"type":25,"tag":541,"props":8544,"children":8545},{"class":543,"line":1491},[8546,8550,8554,8558,8562,8566,8570,8574,8578,8582,8586,8590],{"type":25,"tag":541,"props":8547,"children":8548},{"style":566},[8549],{"type":34,"value":7779},{"type":25,"tag":541,"props":8551,"children":8552},{"style":560},[8553],{"type":34,"value":2559},{"type":25,"tag":541,"props":8555,"children":8556},{"style":859},[8557],{"type":34,"value":3161},{"type":25,"tag":541,"props":8559,"children":8560},{"style":1378},[8561],{"type":34,"value":3166},{"type":25,"tag":541,"props":8563,"children":8564},{"style":560},[8565],{"type":34,"value":3859},{"type":25,"tag":541,"props":8567,"children":8568},{"style":554},[8569],{"type":34,"value":6035},{"type":25,"tag":541,"props":8571,"children":8572},{"style":560},[8573],{"type":34,"value":3859},{"type":25,"tag":541,"props":8575,"children":8576},{"style":1378},[8577],{"type":34,"value":3356},{"type":25,"tag":541,"props":8579,"children":8580},{"style":560},[8581],{"type":34,"value":2559},{"type":25,"tag":541,"props":8583,"children":8584},{"style":566},[8585],{"type":34,"value":3312},{"type":25,"tag":541,"props":8587,"children":8588},{"style":560},[8589],{"type":34,"value":3317},{"type":25,"tag":541,"props":8591,"children":8592},{"style":566},[8593],{"type":34,"value":7824},{"type":25,"tag":541,"props":8595,"children":8596},{"class":543,"line":1501},[8597],{"type":25,"tag":541,"props":8598,"children":8599},{"style":560},[8600],{"type":34,"value":574},{"type":25,"tag":30,"props":8602,"children":8603},{},[8604,8606],{"type":34,"value":8605},"Test it out to make sure that it's working by using JavaScript's print:\n",{"type":25,"tag":522,"props":8607,"children":8609},{"className":8608},[],[8610],{"type":34,"value":8611},"console.log(response)",{"type":25,"tag":30,"props":8613,"children":8614},{},[8615],{"type":34,"value":8616},"You should see an empty list, because you have yet to put any tasks in yet! If you get a message like 'Auth failed' or anything, then there is most likely something wrong with your post request. Did you include the secret x-access-token?",{"type":25,"tag":62,"props":8618,"children":8620},{"id":8619},"displaying-content",[8621,8625],{"type":25,"tag":67,"props":8622,"children":8624},{"href":8623,"ariaHidden":70,"tabIndex":71},"#displaying-content",[],{"type":34,"value":8626},"Displaying Content",{"type":25,"tag":30,"props":8628,"children":8629},{},[8630],{"type":34,"value":8631},"I want to display what response contains. According to the API Documentation, they return it as a list of JSON objects. I will take advantage of JavaScript's for loop to automate this task:",{"type":25,"tag":531,"props":8633,"children":8635},{"code":8634,"language":7679,"meta":8,"className":7680,"style":8},"async function load_list() {\n  let html = '\u003Cul>';\n\n  const response = await getTasks();\n\n\n  for (var i = 0; i \u003C response.length; i++) {\n    html+= '\u003Cli> \u003Ch2> ID:' + response[i].taskid + '\u003C\u002Fh2> \u003Cp>' + response[i].contents + ` \u003C\u002Fp> \n            \u003C\u002Fli>`\n  }\n\n  html+= '\u003C\u002Ful>'\n\n  document.getElementById('contents').innerHTML = html\n}\n",[8636],{"type":25,"tag":522,"props":8637,"children":8638},{"__ignoreMap":8},[8639,8662,8693,8700,8731,8738,8745,8822,8938,8951,8958,8965,8988,8995,9046],{"type":25,"tag":541,"props":8640,"children":8641},{"class":543,"line":544},[8642,8646,8650,8654,8658],{"type":25,"tag":541,"props":8643,"children":8644},{"style":1866},[8645],{"type":34,"value":7931},{"type":25,"tag":541,"props":8647,"children":8648},{"style":1866},[8649],{"type":34,"value":3731},{"type":25,"tag":541,"props":8651,"children":8652},{"style":859},[8653],{"type":34,"value":7696},{"type":25,"tag":541,"props":8655,"children":8656},{"style":560},[8657],{"type":34,"value":3929},{"type":25,"tag":541,"props":8659,"children":8660},{"style":560},[8661],{"type":34,"value":2023},{"type":25,"tag":541,"props":8663,"children":8664},{"class":543,"line":458},[8665,8669,8673,8677,8681,8685,8689],{"type":25,"tag":541,"props":8666,"children":8667},{"style":1866},[8668],{"type":34,"value":7712},{"type":25,"tag":541,"props":8670,"children":8671},{"style":566},[8672],{"type":34,"value":2840},{"type":25,"tag":541,"props":8674,"children":8675},{"style":560},[8676],{"type":34,"value":3317},{"type":25,"tag":541,"props":8678,"children":8679},{"style":560},[8680],{"type":34,"value":7725},{"type":25,"tag":541,"props":8682,"children":8683},{"style":554},[8684],{"type":34,"value":7579},{"type":25,"tag":541,"props":8686,"children":8687},{"style":560},[8688],{"type":34,"value":3859},{"type":25,"tag":541,"props":8690,"children":8691},{"style":560},[8692],{"type":34,"value":3361},{"type":25,"tag":541,"props":8694,"children":8695},{"class":543,"line":461},[8696],{"type":25,"tag":541,"props":8697,"children":8698},{"emptyLinePlaceholder":1495},[8699],{"type":34,"value":1498},{"type":25,"tag":541,"props":8701,"children":8702},{"class":543,"line":1326},[8703,8707,8711,8715,8719,8723,8727],{"type":25,"tag":541,"props":8704,"children":8705},{"style":1866},[8706],{"type":34,"value":7956},{"type":25,"tag":541,"props":8708,"children":8709},{"style":566},[8710],{"type":34,"value":3916},{"type":25,"tag":541,"props":8712,"children":8713},{"style":560},[8714],{"type":34,"value":3317},{"type":25,"tag":541,"props":8716,"children":8717},{"style":1683},[8718],{"type":34,"value":8137},{"type":25,"tag":541,"props":8720,"children":8721},{"style":859},[8722],{"type":34,"value":7940},{"type":25,"tag":541,"props":8724,"children":8725},{"style":1378},[8726],{"type":34,"value":3929},{"type":25,"tag":541,"props":8728,"children":8729},{"style":560},[8730],{"type":34,"value":3361},{"type":25,"tag":541,"props":8732,"children":8733},{"class":543,"line":1447},[8734],{"type":25,"tag":541,"props":8735,"children":8736},{"emptyLinePlaceholder":1495},[8737],{"type":34,"value":1498},{"type":25,"tag":541,"props":8739,"children":8740},{"class":543,"line":1460},[8741],{"type":25,"tag":541,"props":8742,"children":8743},{"emptyLinePlaceholder":1495},[8744],{"type":34,"value":1498},{"type":25,"tag":541,"props":8746,"children":8747},{"class":543,"line":1473},[8748,8753,8757,8761,8766,8770,8774,8779,8783,8788,8792,8796,8801,8805,8809,8814,8818],{"type":25,"tag":541,"props":8749,"children":8750},{"style":1683},[8751],{"type":34,"value":8752},"  for",{"type":25,"tag":541,"props":8754,"children":8755},{"style":1378},[8756],{"type":34,"value":3282},{"type":25,"tag":541,"props":8758,"children":8759},{"style":1866},[8760],{"type":34,"value":3398},{"type":25,"tag":541,"props":8762,"children":8763},{"style":566},[8764],{"type":34,"value":8765}," i",{"type":25,"tag":541,"props":8767,"children":8768},{"style":560},[8769],{"type":34,"value":3317},{"type":25,"tag":541,"props":8771,"children":8772},{"style":893},[8773],{"type":34,"value":6966},{"type":25,"tag":541,"props":8775,"children":8776},{"style":560},[8777],{"type":34,"value":8778},";",{"type":25,"tag":541,"props":8780,"children":8781},{"style":566},[8782],{"type":34,"value":8765},{"type":25,"tag":541,"props":8784,"children":8785},{"style":560},[8786],{"type":34,"value":8787}," \u003C",{"type":25,"tag":541,"props":8789,"children":8790},{"style":566},[8791],{"type":34,"value":3916},{"type":25,"tag":541,"props":8793,"children":8794},{"style":560},[8795],{"type":34,"value":2559},{"type":25,"tag":541,"props":8797,"children":8798},{"style":566},[8799],{"type":34,"value":8800},"length",{"type":25,"tag":541,"props":8802,"children":8803},{"style":560},[8804],{"type":34,"value":8778},{"type":25,"tag":541,"props":8806,"children":8807},{"style":566},[8808],{"type":34,"value":8765},{"type":25,"tag":541,"props":8810,"children":8811},{"style":560},[8812],{"type":34,"value":8813},"++",{"type":25,"tag":541,"props":8815,"children":8816},{"style":1378},[8817],{"type":34,"value":3291},{"type":25,"tag":541,"props":8819,"children":8820},{"style":560},[8821],{"type":34,"value":1855},{"type":25,"tag":541,"props":8823,"children":8824},{"class":543,"line":1491},[8825,8830,8834,8838,8843,8847,8852,8856,8860,8865,8870,8874,8879,8883,8887,8892,8896,8900,8904,8908,8912,8916,8920,8924,8928,8933],{"type":25,"tag":541,"props":8826,"children":8827},{"style":566},[8828],{"type":34,"value":8829},"    html",{"type":25,"tag":541,"props":8831,"children":8832},{"style":560},[8833],{"type":34,"value":7750},{"type":25,"tag":541,"props":8835,"children":8836},{"style":560},[8837],{"type":34,"value":7725},{"type":25,"tag":541,"props":8839,"children":8840},{"style":554},[8841],{"type":34,"value":8842},"\u003Cli> \u003Ch2> ID:",{"type":25,"tag":541,"props":8844,"children":8845},{"style":560},[8846],{"type":34,"value":3859},{"type":25,"tag":541,"props":8848,"children":8849},{"style":560},[8850],{"type":34,"value":8851}," +",{"type":25,"tag":541,"props":8853,"children":8854},{"style":566},[8855],{"type":34,"value":3916},{"type":25,"tag":541,"props":8857,"children":8858},{"style":1378},[8859],{"type":34,"value":4232},{"type":25,"tag":541,"props":8861,"children":8862},{"style":566},[8863],{"type":34,"value":8864},"i",{"type":25,"tag":541,"props":8866,"children":8867},{"style":1378},[8868],{"type":34,"value":8869},"]",{"type":25,"tag":541,"props":8871,"children":8872},{"style":560},[8873],{"type":34,"value":2559},{"type":25,"tag":541,"props":8875,"children":8876},{"style":566},[8877],{"type":34,"value":8878},"taskid",{"type":25,"tag":541,"props":8880,"children":8881},{"style":560},[8882],{"type":34,"value":8851},{"type":25,"tag":541,"props":8884,"children":8885},{"style":560},[8886],{"type":34,"value":7725},{"type":25,"tag":541,"props":8888,"children":8889},{"style":554},[8890],{"type":34,"value":8891},"\u003C\u002Fh2> \u003Cp>",{"type":25,"tag":541,"props":8893,"children":8894},{"style":560},[8895],{"type":34,"value":3859},{"type":25,"tag":541,"props":8897,"children":8898},{"style":560},[8899],{"type":34,"value":8851},{"type":25,"tag":541,"props":8901,"children":8902},{"style":566},[8903],{"type":34,"value":3916},{"type":25,"tag":541,"props":8905,"children":8906},{"style":1378},[8907],{"type":34,"value":4232},{"type":25,"tag":541,"props":8909,"children":8910},{"style":566},[8911],{"type":34,"value":8864},{"type":25,"tag":541,"props":8913,"children":8914},{"style":1378},[8915],{"type":34,"value":8869},{"type":25,"tag":541,"props":8917,"children":8918},{"style":560},[8919],{"type":34,"value":2559},{"type":25,"tag":541,"props":8921,"children":8922},{"style":566},[8923],{"type":34,"value":6035},{"type":25,"tag":541,"props":8925,"children":8926},{"style":560},[8927],{"type":34,"value":8851},{"type":25,"tag":541,"props":8929,"children":8930},{"style":560},[8931],{"type":34,"value":8932}," `",{"type":25,"tag":541,"props":8934,"children":8935},{"style":554},[8936],{"type":34,"value":8937}," \u003C\u002Fp> \n",{"type":25,"tag":541,"props":8939,"children":8940},{"class":543,"line":1501},[8941,8946],{"type":25,"tag":541,"props":8942,"children":8943},{"style":554},[8944],{"type":34,"value":8945},"            \u003C\u002Fli>",{"type":25,"tag":541,"props":8947,"children":8948},{"style":560},[8949],{"type":34,"value":8950},"`\n",{"type":25,"tag":541,"props":8952,"children":8953},{"class":543,"line":1514},[8954],{"type":25,"tag":541,"props":8955,"children":8956},{"style":560},[8957],{"type":34,"value":2790},{"type":25,"tag":541,"props":8959,"children":8960},{"class":543,"line":1537},[8961],{"type":25,"tag":541,"props":8962,"children":8963},{"emptyLinePlaceholder":1495},[8964],{"type":34,"value":1498},{"type":25,"tag":541,"props":8966,"children":8967},{"class":543,"line":1545},[8968,8972,8976,8980,8984],{"type":25,"tag":541,"props":8969,"children":8970},{"style":566},[8971],{"type":34,"value":7745},{"type":25,"tag":541,"props":8973,"children":8974},{"style":560},[8975],{"type":34,"value":7750},{"type":25,"tag":541,"props":8977,"children":8978},{"style":560},[8979],{"type":34,"value":7725},{"type":25,"tag":541,"props":8981,"children":8982},{"style":554},[8983],{"type":34,"value":7759},{"type":25,"tag":541,"props":8985,"children":8986},{"style":560},[8987],{"type":34,"value":7764},{"type":25,"tag":541,"props":8989,"children":8990},{"class":543,"line":1567},[8991],{"type":25,"tag":541,"props":8992,"children":8993},{"emptyLinePlaceholder":1495},[8994],{"type":34,"value":1498},{"type":25,"tag":541,"props":8996,"children":8997},{"class":543,"line":1585},[8998,9002,9006,9010,9014,9018,9022,9026,9030,9034,9038,9042],{"type":25,"tag":541,"props":8999,"children":9000},{"style":566},[9001],{"type":34,"value":7779},{"type":25,"tag":541,"props":9003,"children":9004},{"style":560},[9005],{"type":34,"value":2559},{"type":25,"tag":541,"props":9007,"children":9008},{"style":859},[9009],{"type":34,"value":3161},{"type":25,"tag":541,"props":9011,"children":9012},{"style":1378},[9013],{"type":34,"value":3166},{"type":25,"tag":541,"props":9015,"children":9016},{"style":560},[9017],{"type":34,"value":3859},{"type":25,"tag":541,"props":9019,"children":9020},{"style":554},[9021],{"type":34,"value":6035},{"type":25,"tag":541,"props":9023,"children":9024},{"style":560},[9025],{"type":34,"value":3859},{"type":25,"tag":541,"props":9027,"children":9028},{"style":1378},[9029],{"type":34,"value":3356},{"type":25,"tag":541,"props":9031,"children":9032},{"style":560},[9033],{"type":34,"value":2559},{"type":25,"tag":541,"props":9035,"children":9036},{"style":566},[9037],{"type":34,"value":3312},{"type":25,"tag":541,"props":9039,"children":9040},{"style":560},[9041],{"type":34,"value":3317},{"type":25,"tag":541,"props":9043,"children":9044},{"style":566},[9045],{"type":34,"value":7824},{"type":25,"tag":541,"props":9047,"children":9048},{"class":543,"line":1598},[9049],{"type":25,"tag":541,"props":9050,"children":9051},{"style":560},[9052],{"type":34,"value":574},{"type":25,"tag":30,"props":9054,"children":9055},{},[9056],{"type":34,"value":9057},"See how I put a list item tag around every item, and displayed the taskid using a header and the contents with a paragraph tag.",{"type":25,"tag":30,"props":9059,"children":9060},{},[9061,9063,9069],{"type":34,"value":9062},"Another thing to note is that one of the strings I used ",{"type":25,"tag":522,"props":9064,"children":9066},{"className":9065},[],[9067],{"type":34,"value":9068},"` `",{"type":34,"value":9070}," (backtick). This is mainly used for multiline strings, and string formatting, which I will be showing in a bit.",{"type":25,"tag":62,"props":9072,"children":9074},{"id":9073},"sending-requests-through-a-third-party",[9075,9079],{"type":25,"tag":67,"props":9076,"children":9078},{"href":9077,"ariaHidden":70,"tabIndex":71},"#sending-requests-through-a-third-party",[],{"type":34,"value":9080},"Sending Requests through a third party",{"type":25,"tag":30,"props":9082,"children":9083},{},[9084,9086,9093,9095,9102],{"type":34,"value":9085},"Wouldn't it be great if we could have a few tasks just so we can see it display? Now, we can either make the code for creating a task, or we can quickly use a third party program to send the request for now. For this, you can either use ",{"type":25,"tag":67,"props":9087,"children":9090},{"href":9088,"rel":9089},"https:\u002F\u002Fwww.postman.com\u002F",[4727],[9091],{"type":34,"value":9092},"Postman",{"type":34,"value":9094},", or simply use the web app ",{"type":25,"tag":67,"props":9096,"children":9099},{"href":9097,"rel":9098},"https:\u002F\u002Fhoppscotch.io\u002F",[4727],[9100],{"type":34,"value":9101},"Hoppscotch",{"type":34,"value":2559},{"type":25,"tag":30,"props":9104,"children":9105},{},[9106,9108,9115],{"type":34,"value":9107},"Since we want to get a few tasks in, looking at the documentation we see that it needs to be a post request to the URL ",{"type":25,"tag":67,"props":9109,"children":9112},{"href":9110,"rel":9111},"https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fpost\u002F%5Busername",[4727],[9113],{"type":34,"value":9114},"https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fpost\u002F[username",{"type":34,"value":9116},"]. Add the same headers you added for the get request, but this time, in the body add a JSON object like this:",{"type":25,"tag":531,"props":9118,"children":9120},{"code":9119,"language":1843,"meta":8,"className":1841,"style":8},"{\n  \"contents\": \"A task of your choice\"\n}\n",[9121],{"type":25,"tag":522,"props":9122,"children":9123},{"__ignoreMap":8},[9124,9131,9163],{"type":25,"tag":541,"props":9125,"children":9126},{"class":543,"line":544},[9127],{"type":25,"tag":541,"props":9128,"children":9129},{"style":560},[9130],{"type":34,"value":1855},{"type":25,"tag":541,"props":9132,"children":9133},{"class":543,"line":458},[9134,9138,9142,9146,9150,9154,9159],{"type":25,"tag":541,"props":9135,"children":9136},{"style":560},[9137],{"type":34,"value":1863},{"type":25,"tag":541,"props":9139,"children":9140},{"style":1866},[9141],{"type":34,"value":6035},{"type":25,"tag":541,"props":9143,"children":9144},{"style":560},[9145],{"type":34,"value":1873},{"type":25,"tag":541,"props":9147,"children":9148},{"style":560},[9149],{"type":34,"value":1386},{"type":25,"tag":541,"props":9151,"children":9152},{"style":560},[9153],{"type":34,"value":906},{"type":25,"tag":541,"props":9155,"children":9156},{"style":554},[9157],{"type":34,"value":9158},"A task of your choice",{"type":25,"tag":541,"props":9160,"children":9161},{"style":560},[9162],{"type":34,"value":916},{"type":25,"tag":541,"props":9164,"children":9165},{"class":543,"line":461},[9166],{"type":25,"tag":541,"props":9167,"children":9168},{"style":560},[9169],{"type":34,"value":574},{"type":25,"tag":30,"props":9171,"children":9172},{},[9173,9175,9180],{"type":34,"value":9174},"Hoppscotch simplifies it down for you, you just need to fill in the key as contents and the value as the task of your choice. Once done, you can send the request. You should receive some type of message saying how it's been updated. That means you have a task in the API! You can choose to add a few more by modifying the task contents and resending the request. Once that's done, go back to your ",{"type":25,"tag":522,"props":9176,"children":9178},{"className":9177},[],[9179],{"type":34,"value":5509},{"type":34,"value":9181}," and refresh the page. Then, your tasks should be displayed on the screen!",{"type":25,"tag":62,"props":9183,"children":9185},{"id":9184},"adding-a-create-task-on-the-website",[9186,9190],{"type":25,"tag":67,"props":9187,"children":9189},{"href":9188,"ariaHidden":70,"tabIndex":71},"#adding-a-create-task-on-the-website",[],{"type":34,"value":9191},"Adding a Create Task on the Website",{"type":25,"tag":30,"props":9193,"children":9194},{},[9195,9197,9202],{"type":34,"value":9196},"Let's do the same thing we did in the 3rd party app, but this time on our own website. Going back to ",{"type":25,"tag":522,"props":9198,"children":9200},{"className":9199},[],[9201],{"type":34,"value":5509},{"type":34,"value":9203},", the Add Task form is almost set up, except we need to link a function to the click.",{"type":25,"tag":30,"props":9205,"children":9206},{},[9207,9209,9215,9217,9223],{"type":34,"value":9208},"We're going to create a function called ",{"type":25,"tag":522,"props":9210,"children":9212},{"className":9211},[],[9213],{"type":34,"value":9214},"submitTask()",{"type":34,"value":9216},", so add that to ",{"type":25,"tag":522,"props":9218,"children":9220},{"className":9219},[],[9221],{"type":34,"value":9222},"onclick=\"\"",{"type":34,"value":2559},{"type":25,"tag":30,"props":9225,"children":9226},{},[9227,9229,9234],{"type":34,"value":9228},"Head over to ",{"type":25,"tag":522,"props":9230,"children":9232},{"className":9231},[],[9233],{"type":34,"value":5525},{"type":34,"value":9235},", and create an asynchronous function following the documentation of the API:",{"type":25,"tag":531,"props":9237,"children":9239},{"code":9238,"language":7679,"meta":8,"className":7680,"style":8},"async function submitTask() {\n  const URL = 'https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fpost\u002F[username]'\n  const Data = {\n    'contents': document.getElementById('task_contents').value\n  }\n  const Params = {\n    headers: {\n      'x-access-token': '[secret-token]',\n      'Content-Type': 'application\u002Fjson'\n    },\n    body: JSON.stringify(Data),\n    method: 'POST'\n  }\n  console.log(Params)\n  await fetch(URL, Params)\n}\n",[9240],{"type":25,"tag":522,"props":9241,"children":9242},{"__ignoreMap":8},[9243,9267,9295,9315,9376,9383,9402,9417,9453,9484,9491,9534,9557,9564,9592,9624],{"type":25,"tag":541,"props":9244,"children":9245},{"class":543,"line":544},[9246,9250,9254,9259,9263],{"type":25,"tag":541,"props":9247,"children":9248},{"style":1866},[9249],{"type":34,"value":7931},{"type":25,"tag":541,"props":9251,"children":9252},{"style":1866},[9253],{"type":34,"value":3731},{"type":25,"tag":541,"props":9255,"children":9256},{"style":859},[9257],{"type":34,"value":9258}," submitTask",{"type":25,"tag":541,"props":9260,"children":9261},{"style":560},[9262],{"type":34,"value":3929},{"type":25,"tag":541,"props":9264,"children":9265},{"style":560},[9266],{"type":34,"value":2023},{"type":25,"tag":541,"props":9268,"children":9269},{"class":543,"line":458},[9270,9274,9278,9282,9286,9291],{"type":25,"tag":541,"props":9271,"children":9272},{"style":1866},[9273],{"type":34,"value":7956},{"type":25,"tag":541,"props":9275,"children":9276},{"style":566},[9277],{"type":34,"value":7961},{"type":25,"tag":541,"props":9279,"children":9280},{"style":560},[9281],{"type":34,"value":3317},{"type":25,"tag":541,"props":9283,"children":9284},{"style":560},[9285],{"type":34,"value":7725},{"type":25,"tag":541,"props":9287,"children":9288},{"style":554},[9289],{"type":34,"value":9290},"https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fpost\u002F[username]",{"type":25,"tag":541,"props":9292,"children":9293},{"style":560},[9294],{"type":34,"value":7764},{"type":25,"tag":541,"props":9296,"children":9297},{"class":543,"line":461},[9298,9302,9307,9311],{"type":25,"tag":541,"props":9299,"children":9300},{"style":1866},[9301],{"type":34,"value":7956},{"type":25,"tag":541,"props":9303,"children":9304},{"style":566},[9305],{"type":34,"value":9306}," Data",{"type":25,"tag":541,"props":9308,"children":9309},{"style":560},[9310],{"type":34,"value":3317},{"type":25,"tag":541,"props":9312,"children":9313},{"style":560},[9314],{"type":34,"value":2023},{"type":25,"tag":541,"props":9316,"children":9317},{"class":543,"line":1326},[9318,9323,9327,9331,9335,9339,9343,9347,9351,9355,9359,9363,9367,9371],{"type":25,"tag":541,"props":9319,"children":9320},{"style":560},[9321],{"type":34,"value":9322},"    '",{"type":25,"tag":541,"props":9324,"children":9325},{"style":1378},[9326],{"type":34,"value":6035},{"type":25,"tag":541,"props":9328,"children":9329},{"style":560},[9330],{"type":34,"value":3859},{"type":25,"tag":541,"props":9332,"children":9333},{"style":560},[9334],{"type":34,"value":1386},{"type":25,"tag":541,"props":9336,"children":9337},{"style":566},[9338],{"type":34,"value":3152},{"type":25,"tag":541,"props":9340,"children":9341},{"style":560},[9342],{"type":34,"value":2559},{"type":25,"tag":541,"props":9344,"children":9345},{"style":859},[9346],{"type":34,"value":3161},{"type":25,"tag":541,"props":9348,"children":9349},{"style":1378},[9350],{"type":34,"value":3166},{"type":25,"tag":541,"props":9352,"children":9353},{"style":560},[9354],{"type":34,"value":3859},{"type":25,"tag":541,"props":9356,"children":9357},{"style":554},[9358],{"type":34,"value":6175},{"type":25,"tag":541,"props":9360,"children":9361},{"style":560},[9362],{"type":34,"value":3859},{"type":25,"tag":541,"props":9364,"children":9365},{"style":1378},[9366],{"type":34,"value":3356},{"type":25,"tag":541,"props":9368,"children":9369},{"style":560},[9370],{"type":34,"value":2559},{"type":25,"tag":541,"props":9372,"children":9373},{"style":566},[9374],{"type":34,"value":9375},"value\n",{"type":25,"tag":541,"props":9377,"children":9378},{"class":543,"line":1447},[9379],{"type":25,"tag":541,"props":9380,"children":9381},{"style":560},[9382],{"type":34,"value":2790},{"type":25,"tag":541,"props":9384,"children":9385},{"class":543,"line":1460},[9386,9390,9394,9398],{"type":25,"tag":541,"props":9387,"children":9388},{"style":1866},[9389],{"type":34,"value":7956},{"type":25,"tag":541,"props":9391,"children":9392},{"style":566},[9393],{"type":34,"value":7990},{"type":25,"tag":541,"props":9395,"children":9396},{"style":560},[9397],{"type":34,"value":3317},{"type":25,"tag":541,"props":9399,"children":9400},{"style":560},[9401],{"type":34,"value":2023},{"type":25,"tag":541,"props":9403,"children":9404},{"class":543,"line":1473},[9405,9409,9413],{"type":25,"tag":541,"props":9406,"children":9407},{"style":1378},[9408],{"type":34,"value":8006},{"type":25,"tag":541,"props":9410,"children":9411},{"style":560},[9412],{"type":34,"value":1386},{"type":25,"tag":541,"props":9414,"children":9415},{"style":560},[9416],{"type":34,"value":2023},{"type":25,"tag":541,"props":9418,"children":9419},{"class":543,"line":1491},[9420,9424,9428,9432,9436,9440,9445,9449],{"type":25,"tag":541,"props":9421,"children":9422},{"style":560},[9423],{"type":34,"value":8022},{"type":25,"tag":541,"props":9425,"children":9426},{"style":1378},[9427],{"type":34,"value":8027},{"type":25,"tag":541,"props":9429,"children":9430},{"style":560},[9431],{"type":34,"value":3859},{"type":25,"tag":541,"props":9433,"children":9434},{"style":560},[9435],{"type":34,"value":1386},{"type":25,"tag":541,"props":9437,"children":9438},{"style":560},[9439],{"type":34,"value":7725},{"type":25,"tag":541,"props":9441,"children":9442},{"style":554},[9443],{"type":34,"value":9444},"[secret-token]",{"type":25,"tag":541,"props":9446,"children":9447},{"style":560},[9448],{"type":34,"value":3859},{"type":25,"tag":541,"props":9450,"children":9451},{"style":560},[9452],{"type":34,"value":1895},{"type":25,"tag":541,"props":9454,"children":9455},{"class":543,"line":1501},[9456,9460,9464,9468,9472,9476,9480],{"type":25,"tag":541,"props":9457,"children":9458},{"style":560},[9459],{"type":34,"value":8022},{"type":25,"tag":541,"props":9461,"children":9462},{"style":1378},[9463],{"type":34,"value":8064},{"type":25,"tag":541,"props":9465,"children":9466},{"style":560},[9467],{"type":34,"value":3859},{"type":25,"tag":541,"props":9469,"children":9470},{"style":560},[9471],{"type":34,"value":1386},{"type":25,"tag":541,"props":9473,"children":9474},{"style":560},[9475],{"type":34,"value":7725},{"type":25,"tag":541,"props":9477,"children":9478},{"style":554},[9479],{"type":34,"value":8081},{"type":25,"tag":541,"props":9481,"children":9482},{"style":560},[9483],{"type":34,"value":7764},{"type":25,"tag":541,"props":9485,"children":9486},{"class":543,"line":1514},[9487],{"type":25,"tag":541,"props":9488,"children":9489},{"style":560},[9490],{"type":34,"value":8093},{"type":25,"tag":541,"props":9492,"children":9493},{"class":543,"line":1537},[9494,9499,9503,9508,9512,9517,9521,9526,9530],{"type":25,"tag":541,"props":9495,"children":9496},{"style":1378},[9497],{"type":34,"value":9498},"    body",{"type":25,"tag":541,"props":9500,"children":9501},{"style":560},[9502],{"type":34,"value":1386},{"type":25,"tag":541,"props":9504,"children":9505},{"style":566},[9506],{"type":34,"value":9507}," JSON",{"type":25,"tag":541,"props":9509,"children":9510},{"style":560},[9511],{"type":34,"value":2559},{"type":25,"tag":541,"props":9513,"children":9514},{"style":859},[9515],{"type":34,"value":9516},"stringify",{"type":25,"tag":541,"props":9518,"children":9519},{"style":1378},[9520],{"type":34,"value":3166},{"type":25,"tag":541,"props":9522,"children":9523},{"style":566},[9524],{"type":34,"value":9525},"Data",{"type":25,"tag":541,"props":9527,"children":9528},{"style":1378},[9529],{"type":34,"value":3356},{"type":25,"tag":541,"props":9531,"children":9532},{"style":560},[9533],{"type":34,"value":1895},{"type":25,"tag":541,"props":9535,"children":9536},{"class":543,"line":1545},[9537,9541,9545,9549,9553],{"type":25,"tag":541,"props":9538,"children":9539},{"style":1378},[9540],{"type":34,"value":8101},{"type":25,"tag":541,"props":9542,"children":9543},{"style":560},[9544],{"type":34,"value":1386},{"type":25,"tag":541,"props":9546,"children":9547},{"style":560},[9548],{"type":34,"value":7725},{"type":25,"tag":541,"props":9550,"children":9551},{"style":554},[9552],{"type":34,"value":5249},{"type":25,"tag":541,"props":9554,"children":9555},{"style":560},[9556],{"type":34,"value":7764},{"type":25,"tag":541,"props":9558,"children":9559},{"class":543,"line":1567},[9560],{"type":25,"tag":541,"props":9561,"children":9562},{"style":560},[9563],{"type":34,"value":2790},{"type":25,"tag":541,"props":9565,"children":9566},{"class":543,"line":1585},[9567,9571,9575,9579,9583,9588],{"type":25,"tag":541,"props":9568,"children":9569},{"style":566},[9570],{"type":34,"value":3756},{"type":25,"tag":541,"props":9572,"children":9573},{"style":560},[9574],{"type":34,"value":2559},{"type":25,"tag":541,"props":9576,"children":9577},{"style":859},[9578],{"type":34,"value":3765},{"type":25,"tag":541,"props":9580,"children":9581},{"style":1378},[9582],{"type":34,"value":3166},{"type":25,"tag":541,"props":9584,"children":9585},{"style":566},[9586],{"type":34,"value":9587},"Params",{"type":25,"tag":541,"props":9589,"children":9590},{"style":1378},[9591],{"type":34,"value":3183},{"type":25,"tag":541,"props":9593,"children":9594},{"class":543,"line":1598},[9595,9600,9604,9608,9612,9616,9620],{"type":25,"tag":541,"props":9596,"children":9597},{"style":1683},[9598],{"type":34,"value":9599},"  await",{"type":25,"tag":541,"props":9601,"children":9602},{"style":859},[9603],{"type":34,"value":8142},{"type":25,"tag":541,"props":9605,"children":9606},{"style":1378},[9607],{"type":34,"value":3166},{"type":25,"tag":541,"props":9609,"children":9610},{"style":566},[9611],{"type":34,"value":8151},{"type":25,"tag":541,"props":9613,"children":9614},{"style":560},[9615],{"type":34,"value":2106},{"type":25,"tag":541,"props":9617,"children":9618},{"style":566},[9619],{"type":34,"value":7990},{"type":25,"tag":541,"props":9621,"children":9622},{"style":1378},[9623],{"type":34,"value":3183},{"type":25,"tag":541,"props":9625,"children":9626},{"class":543,"line":1616},[9627],{"type":25,"tag":541,"props":9628,"children":9629},{"style":560},[9630],{"type":34,"value":574},{"type":25,"tag":30,"props":9632,"children":9633},{},[9634,9636,9642,9644,9649],{"type":34,"value":9635},"How did I get the text that we typed into the tag ",{"type":25,"tag":522,"props":9637,"children":9639},{"className":9638},[],[9640],{"type":34,"value":9641},"\u003Ctextarea>",{"type":34,"value":9643},"? Similar to how we overwrite the element at the id of content, this time I take the element's value at id ",{"type":25,"tag":522,"props":9645,"children":9647},{"className":9646},[],[9648],{"type":34,"value":6175},{"type":34,"value":2559},{"type":25,"tag":30,"props":9651,"children":9652},{},[9653],{"type":34,"value":9654},"Another cool function you may be unfamiliar with is",{"type":25,"tag":531,"props":9656,"children":9658},{"code":9657,"language":7679,"meta":8,"className":7680,"style":8},"JSON.stringify(Data)\n",[9659],{"type":25,"tag":522,"props":9660,"children":9661},{"__ignoreMap":8},[9662],{"type":25,"tag":541,"props":9663,"children":9664},{"class":543,"line":544},[9665,9669,9673,9677],{"type":25,"tag":541,"props":9666,"children":9667},{"style":566},[9668],{"type":34,"value":5259},{"type":25,"tag":541,"props":9670,"children":9671},{"style":560},[9672],{"type":34,"value":2559},{"type":25,"tag":541,"props":9674,"children":9675},{"style":859},[9676],{"type":34,"value":9516},{"type":25,"tag":541,"props":9678,"children":9679},{"style":566},[9680],{"type":34,"value":9681},"(Data)\n",{"type":25,"tag":30,"props":9683,"children":9684},{},[9685],{"type":34,"value":9686},"What this does is turn all the key and values in the JSON into strings. For example,",{"type":25,"tag":531,"props":9688,"children":9690},{"code":9689,"language":1843,"meta":8,"className":1841,"style":8},"{\n  contents: \"hi\"\n}\n",[9691],{"type":25,"tag":522,"props":9692,"children":9693},{"__ignoreMap":8},[9694,9701,9726],{"type":25,"tag":541,"props":9695,"children":9696},{"class":543,"line":544},[9697],{"type":25,"tag":541,"props":9698,"children":9699},{"style":560},[9700],{"type":34,"value":1855},{"type":25,"tag":541,"props":9702,"children":9703},{"class":543,"line":458},[9704,9709,9713,9717,9722],{"type":25,"tag":541,"props":9705,"children":9706},{"style":566},[9707],{"type":34,"value":9708},"  contents",{"type":25,"tag":541,"props":9710,"children":9711},{"style":560},[9712],{"type":34,"value":1386},{"type":25,"tag":541,"props":9714,"children":9715},{"style":560},[9716],{"type":34,"value":906},{"type":25,"tag":541,"props":9718,"children":9719},{"style":554},[9720],{"type":34,"value":9721},"hi",{"type":25,"tag":541,"props":9723,"children":9724},{"style":560},[9725],{"type":34,"value":916},{"type":25,"tag":541,"props":9727,"children":9728},{"class":543,"line":461},[9729],{"type":25,"tag":541,"props":9730,"children":9731},{"style":560},[9732],{"type":34,"value":574},{"type":25,"tag":30,"props":9734,"children":9735},{},[9736],{"type":34,"value":9737},"would be stringified into:",{"type":25,"tag":531,"props":9739,"children":9741},{"code":9740,"language":1843,"meta":8,"className":1841,"style":8},"{\n  \"contents\": \"hi\"\n}\n",[9742],{"type":25,"tag":522,"props":9743,"children":9744},{"__ignoreMap":8},[9745,9752,9783],{"type":25,"tag":541,"props":9746,"children":9747},{"class":543,"line":544},[9748],{"type":25,"tag":541,"props":9749,"children":9750},{"style":560},[9751],{"type":34,"value":1855},{"type":25,"tag":541,"props":9753,"children":9754},{"class":543,"line":458},[9755,9759,9763,9767,9771,9775,9779],{"type":25,"tag":541,"props":9756,"children":9757},{"style":560},[9758],{"type":34,"value":1863},{"type":25,"tag":541,"props":9760,"children":9761},{"style":1866},[9762],{"type":34,"value":6035},{"type":25,"tag":541,"props":9764,"children":9765},{"style":560},[9766],{"type":34,"value":1873},{"type":25,"tag":541,"props":9768,"children":9769},{"style":560},[9770],{"type":34,"value":1386},{"type":25,"tag":541,"props":9772,"children":9773},{"style":560},[9774],{"type":34,"value":906},{"type":25,"tag":541,"props":9776,"children":9777},{"style":554},[9778],{"type":34,"value":9721},{"type":25,"tag":541,"props":9780,"children":9781},{"style":560},[9782],{"type":34,"value":916},{"type":25,"tag":541,"props":9784,"children":9785},{"class":543,"line":461},[9786],{"type":25,"tag":541,"props":9787,"children":9788},{"style":560},[9789],{"type":34,"value":574},{"type":25,"tag":30,"props":9791,"children":9792},{},[9793],{"type":34,"value":9794},"Once that's done, we can now create and view tasks on our ToDo list!",{"type":25,"tag":62,"props":9796,"children":9798},{"id":9797},"clearing-tasks",[9799,9803],{"type":25,"tag":67,"props":9800,"children":9802},{"href":9801,"ariaHidden":70,"tabIndex":71},"#clearing-tasks",[],{"type":34,"value":5681},{"type":25,"tag":30,"props":9805,"children":9806},{},[9807],{"type":34,"value":9808},"Our last step is to have the ability to clear tasks once we're done. Since we need to have the ability to clear whatever task we want, we'll need to add a button for every task displayed.",{"type":25,"tag":30,"props":9810,"children":9811},{},[9812,9814,9819],{"type":34,"value":9813},"On the ",{"type":25,"tag":522,"props":9815,"children":9817},{"className":9816},[],[9818],{"type":34,"value":7901},{"type":34,"value":9820}," function, add in a button for clearing Tasks:",{"type":25,"tag":531,"props":9822,"children":9824},{"code":9823,"language":7679,"meta":8,"className":7680,"style":8},"  for (var i = 0; i \u003C response.length; i++) {\n    html+= '\u003Cli> \u003Ch2> ID:' + response[i].taskid + '\u003C\u002Fh2> \u003Cp>' + response[i].contents + ` \u003C\u002Fp> \n              \u003Cform>\n                \u003Cbutton class=\"taskButton btn\" type='submit' onclick=\"clearTask(${response[i].taskid});\"> Clear Task \u003C\u002Fbutton>\n              \u003C\u002Fform>\n            \u003C\u002Fli>`\n  }\n",[9825],{"type":25,"tag":522,"props":9826,"children":9827},{"__ignoreMap":8},[9828,9900,10007,10015,10050,10058,10069],{"type":25,"tag":541,"props":9829,"children":9830},{"class":543,"line":544},[9831,9835,9839,9843,9848,9852,9856,9860,9864,9868,9872,9876,9880,9884,9888,9892,9896],{"type":25,"tag":541,"props":9832,"children":9833},{"style":1683},[9834],{"type":34,"value":8752},{"type":25,"tag":541,"props":9836,"children":9837},{"style":566},[9838],{"type":34,"value":3282},{"type":25,"tag":541,"props":9840,"children":9841},{"style":1866},[9842],{"type":34,"value":3398},{"type":25,"tag":541,"props":9844,"children":9845},{"style":566},[9846],{"type":34,"value":9847}," i ",{"type":25,"tag":541,"props":9849,"children":9850},{"style":560},[9851],{"type":34,"value":2901},{"type":25,"tag":541,"props":9853,"children":9854},{"style":893},[9855],{"type":34,"value":6966},{"type":25,"tag":541,"props":9857,"children":9858},{"style":560},[9859],{"type":34,"value":8778},{"type":25,"tag":541,"props":9861,"children":9862},{"style":566},[9863],{"type":34,"value":9847},{"type":25,"tag":541,"props":9865,"children":9866},{"style":560},[9867],{"type":34,"value":2853},{"type":25,"tag":541,"props":9869,"children":9870},{"style":566},[9871],{"type":34,"value":3916},{"type":25,"tag":541,"props":9873,"children":9874},{"style":560},[9875],{"type":34,"value":2559},{"type":25,"tag":541,"props":9877,"children":9878},{"style":566},[9879],{"type":34,"value":8800},{"type":25,"tag":541,"props":9881,"children":9882},{"style":560},[9883],{"type":34,"value":8778},{"type":25,"tag":541,"props":9885,"children":9886},{"style":566},[9887],{"type":34,"value":8765},{"type":25,"tag":541,"props":9889,"children":9890},{"style":560},[9891],{"type":34,"value":8813},{"type":25,"tag":541,"props":9893,"children":9894},{"style":566},[9895],{"type":34,"value":3291},{"type":25,"tag":541,"props":9897,"children":9898},{"style":560},[9899],{"type":34,"value":1855},{"type":25,"tag":541,"props":9901,"children":9902},{"class":543,"line":458},[9903,9907,9911,9915,9919,9923,9927,9931,9935,9939,9943,9947,9951,9955,9959,9963,9967,9971,9975,9979,9983,9987,9991,9995,9999,10003],{"type":25,"tag":541,"props":9904,"children":9905},{"style":566},[9906],{"type":34,"value":8829},{"type":25,"tag":541,"props":9908,"children":9909},{"style":560},[9910],{"type":34,"value":7750},{"type":25,"tag":541,"props":9912,"children":9913},{"style":560},[9914],{"type":34,"value":7725},{"type":25,"tag":541,"props":9916,"children":9917},{"style":554},[9918],{"type":34,"value":8842},{"type":25,"tag":541,"props":9920,"children":9921},{"style":560},[9922],{"type":34,"value":3859},{"type":25,"tag":541,"props":9924,"children":9925},{"style":560},[9926],{"type":34,"value":8851},{"type":25,"tag":541,"props":9928,"children":9929},{"style":566},[9930],{"type":34,"value":3916},{"type":25,"tag":541,"props":9932,"children":9933},{"style":1378},[9934],{"type":34,"value":4232},{"type":25,"tag":541,"props":9936,"children":9937},{"style":566},[9938],{"type":34,"value":8864},{"type":25,"tag":541,"props":9940,"children":9941},{"style":1378},[9942],{"type":34,"value":8869},{"type":25,"tag":541,"props":9944,"children":9945},{"style":560},[9946],{"type":34,"value":2559},{"type":25,"tag":541,"props":9948,"children":9949},{"style":566},[9950],{"type":34,"value":8878},{"type":25,"tag":541,"props":9952,"children":9953},{"style":560},[9954],{"type":34,"value":8851},{"type":25,"tag":541,"props":9956,"children":9957},{"style":560},[9958],{"type":34,"value":7725},{"type":25,"tag":541,"props":9960,"children":9961},{"style":554},[9962],{"type":34,"value":8891},{"type":25,"tag":541,"props":9964,"children":9965},{"style":560},[9966],{"type":34,"value":3859},{"type":25,"tag":541,"props":9968,"children":9969},{"style":560},[9970],{"type":34,"value":8851},{"type":25,"tag":541,"props":9972,"children":9973},{"style":566},[9974],{"type":34,"value":3916},{"type":25,"tag":541,"props":9976,"children":9977},{"style":1378},[9978],{"type":34,"value":4232},{"type":25,"tag":541,"props":9980,"children":9981},{"style":566},[9982],{"type":34,"value":8864},{"type":25,"tag":541,"props":9984,"children":9985},{"style":1378},[9986],{"type":34,"value":8869},{"type":25,"tag":541,"props":9988,"children":9989},{"style":560},[9990],{"type":34,"value":2559},{"type":25,"tag":541,"props":9992,"children":9993},{"style":566},[9994],{"type":34,"value":6035},{"type":25,"tag":541,"props":9996,"children":9997},{"style":560},[9998],{"type":34,"value":8851},{"type":25,"tag":541,"props":10000,"children":10001},{"style":560},[10002],{"type":34,"value":8932},{"type":25,"tag":541,"props":10004,"children":10005},{"style":554},[10006],{"type":34,"value":8937},{"type":25,"tag":541,"props":10008,"children":10009},{"class":543,"line":461},[10010],{"type":25,"tag":541,"props":10011,"children":10012},{"style":554},[10013],{"type":34,"value":10014},"              \u003Cform>\n",{"type":25,"tag":541,"props":10016,"children":10017},{"class":543,"line":1326},[10018,10023,10028,10033,10037,10041,10045],{"type":25,"tag":541,"props":10019,"children":10020},{"style":554},[10021],{"type":34,"value":10022},"                \u003Cbutton class=\"taskButton btn\" type='submit' onclick=\"clearTask(",{"type":25,"tag":541,"props":10024,"children":10025},{"style":560},[10026],{"type":34,"value":10027},"${",{"type":25,"tag":541,"props":10029,"children":10030},{"style":566},[10031],{"type":34,"value":10032},"response[i]",{"type":25,"tag":541,"props":10034,"children":10035},{"style":560},[10036],{"type":34,"value":2559},{"type":25,"tag":541,"props":10038,"children":10039},{"style":566},[10040],{"type":34,"value":8878},{"type":25,"tag":541,"props":10042,"children":10043},{"style":560},[10044],{"type":34,"value":605},{"type":25,"tag":541,"props":10046,"children":10047},{"style":554},[10048],{"type":34,"value":10049},");\"> Clear Task \u003C\u002Fbutton>\n",{"type":25,"tag":541,"props":10051,"children":10052},{"class":543,"line":1447},[10053],{"type":25,"tag":541,"props":10054,"children":10055},{"style":554},[10056],{"type":34,"value":10057},"              \u003C\u002Fform>\n",{"type":25,"tag":541,"props":10059,"children":10060},{"class":543,"line":1460},[10061,10065],{"type":25,"tag":541,"props":10062,"children":10063},{"style":554},[10064],{"type":34,"value":8945},{"type":25,"tag":541,"props":10066,"children":10067},{"style":560},[10068],{"type":34,"value":8950},{"type":25,"tag":541,"props":10070,"children":10071},{"class":543,"line":1473},[10072],{"type":25,"tag":541,"props":10073,"children":10074},{"style":560},[10075],{"type":34,"value":2790},{"type":25,"tag":30,"props":10077,"children":10078},{},[10079,10081,10087],{"type":34,"value":10080},"We can clearly see that the next function we'll be making is ",{"type":25,"tag":522,"props":10082,"children":10084},{"className":10083},[],[10085],{"type":34,"value":10086},"clearTask(id)",{"type":34,"value":10088},". But how does the function know which task to clear? This is when string formatting comes into play. By using",{"type":25,"tag":531,"props":10090,"children":10092},{"code":10091,"language":7679,"meta":8,"className":7680,"style":8},"${}\n",[10093],{"type":25,"tag":522,"props":10094,"children":10095},{"__ignoreMap":8},[10096],{"type":25,"tag":541,"props":10097,"children":10098},{"class":543,"line":544},[10099,10104],{"type":25,"tag":541,"props":10100,"children":10101},{"style":566},[10102],{"type":34,"value":10103},"$",{"type":25,"tag":541,"props":10105,"children":10106},{"style":560},[10107],{"type":34,"value":10108},"{}\n",{"type":25,"tag":30,"props":10110,"children":10111},{},[10112,10114,10120],{"type":34,"value":10113},"I am allowed to use javascript code inside the string. So when the clear button is clicked, ",{"type":25,"tag":522,"props":10115,"children":10117},{"className":10116},[],[10118],{"type":34,"value":10119},"clearTask",{"type":34,"value":10121}," is called with the specific id of the task.",{"type":25,"tag":30,"props":10123,"children":10124},{},[10125,10127,10132],{"type":34,"value":10126},"Now, let's create the ",{"type":25,"tag":522,"props":10128,"children":10130},{"className":10129},[],[10131],{"type":34,"value":10086},{"type":34,"value":10133}," function:",{"type":25,"tag":531,"props":10135,"children":10137},{"code":10136,"language":7679,"meta":8,"className":7680,"style":8},"async function clearTask(id) {\n  const URL = 'https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fdelete\u002F[username]'\n  const Data = {\n    'id': id\n  }\n  const Params = {\n    headers: {\n      'x-access-token': '[secret token]',\n      'Content-Type': 'application\u002Fjson'\n    },\n    body: JSON.stringify(Data),\n    method: 'DELETE'\n  }\n  await fetch(URL, Params)\n}\n",[10138],{"type":25,"tag":522,"props":10139,"children":10140},{"__ignoreMap":8},[10141,10174,10202,10221,10245,10252,10271,10286,10322,10353,10360,10399,10423,10430,10461],{"type":25,"tag":541,"props":10142,"children":10143},{"class":543,"line":544},[10144,10148,10152,10157,10161,10166,10170],{"type":25,"tag":541,"props":10145,"children":10146},{"style":1866},[10147],{"type":34,"value":7931},{"type":25,"tag":541,"props":10149,"children":10150},{"style":1866},[10151],{"type":34,"value":3731},{"type":25,"tag":541,"props":10153,"children":10154},{"style":859},[10155],{"type":34,"value":10156}," clearTask",{"type":25,"tag":541,"props":10158,"children":10159},{"style":560},[10160],{"type":34,"value":3166},{"type":25,"tag":541,"props":10162,"children":10163},{"style":3252},[10164],{"type":34,"value":10165},"id",{"type":25,"tag":541,"props":10167,"children":10168},{"style":560},[10169],{"type":34,"value":3356},{"type":25,"tag":541,"props":10171,"children":10172},{"style":560},[10173],{"type":34,"value":2023},{"type":25,"tag":541,"props":10175,"children":10176},{"class":543,"line":458},[10177,10181,10185,10189,10193,10198],{"type":25,"tag":541,"props":10178,"children":10179},{"style":1866},[10180],{"type":34,"value":7956},{"type":25,"tag":541,"props":10182,"children":10183},{"style":566},[10184],{"type":34,"value":7961},{"type":25,"tag":541,"props":10186,"children":10187},{"style":560},[10188],{"type":34,"value":3317},{"type":25,"tag":541,"props":10190,"children":10191},{"style":560},[10192],{"type":34,"value":7725},{"type":25,"tag":541,"props":10194,"children":10195},{"style":554},[10196],{"type":34,"value":10197},"https:\u002F\u002F7wc.zhehaizhang.com\u002Ftask\u002Fdelete\u002F[username]",{"type":25,"tag":541,"props":10199,"children":10200},{"style":560},[10201],{"type":34,"value":7764},{"type":25,"tag":541,"props":10203,"children":10204},{"class":543,"line":461},[10205,10209,10213,10217],{"type":25,"tag":541,"props":10206,"children":10207},{"style":1866},[10208],{"type":34,"value":7956},{"type":25,"tag":541,"props":10210,"children":10211},{"style":566},[10212],{"type":34,"value":9306},{"type":25,"tag":541,"props":10214,"children":10215},{"style":560},[10216],{"type":34,"value":3317},{"type":25,"tag":541,"props":10218,"children":10219},{"style":560},[10220],{"type":34,"value":2023},{"type":25,"tag":541,"props":10222,"children":10223},{"class":543,"line":1326},[10224,10228,10232,10236,10240],{"type":25,"tag":541,"props":10225,"children":10226},{"style":560},[10227],{"type":34,"value":9322},{"type":25,"tag":541,"props":10229,"children":10230},{"style":1378},[10231],{"type":34,"value":10165},{"type":25,"tag":541,"props":10233,"children":10234},{"style":560},[10235],{"type":34,"value":3859},{"type":25,"tag":541,"props":10237,"children":10238},{"style":560},[10239],{"type":34,"value":1386},{"type":25,"tag":541,"props":10241,"children":10242},{"style":566},[10243],{"type":34,"value":10244}," id\n",{"type":25,"tag":541,"props":10246,"children":10247},{"class":543,"line":1447},[10248],{"type":25,"tag":541,"props":10249,"children":10250},{"style":560},[10251],{"type":34,"value":2790},{"type":25,"tag":541,"props":10253,"children":10254},{"class":543,"line":1460},[10255,10259,10263,10267],{"type":25,"tag":541,"props":10256,"children":10257},{"style":1866},[10258],{"type":34,"value":7956},{"type":25,"tag":541,"props":10260,"children":10261},{"style":566},[10262],{"type":34,"value":7990},{"type":25,"tag":541,"props":10264,"children":10265},{"style":560},[10266],{"type":34,"value":3317},{"type":25,"tag":541,"props":10268,"children":10269},{"style":560},[10270],{"type":34,"value":2023},{"type":25,"tag":541,"props":10272,"children":10273},{"class":543,"line":1473},[10274,10278,10282],{"type":25,"tag":541,"props":10275,"children":10276},{"style":1378},[10277],{"type":34,"value":8006},{"type":25,"tag":541,"props":10279,"children":10280},{"style":560},[10281],{"type":34,"value":1386},{"type":25,"tag":541,"props":10283,"children":10284},{"style":560},[10285],{"type":34,"value":2023},{"type":25,"tag":541,"props":10287,"children":10288},{"class":543,"line":1491},[10289,10293,10297,10301,10305,10309,10314,10318],{"type":25,"tag":541,"props":10290,"children":10291},{"style":560},[10292],{"type":34,"value":8022},{"type":25,"tag":541,"props":10294,"children":10295},{"style":1378},[10296],{"type":34,"value":8027},{"type":25,"tag":541,"props":10298,"children":10299},{"style":560},[10300],{"type":34,"value":3859},{"type":25,"tag":541,"props":10302,"children":10303},{"style":560},[10304],{"type":34,"value":1386},{"type":25,"tag":541,"props":10306,"children":10307},{"style":560},[10308],{"type":34,"value":7725},{"type":25,"tag":541,"props":10310,"children":10311},{"style":554},[10312],{"type":34,"value":10313},"[secret token]",{"type":25,"tag":541,"props":10315,"children":10316},{"style":560},[10317],{"type":34,"value":3859},{"type":25,"tag":541,"props":10319,"children":10320},{"style":560},[10321],{"type":34,"value":1895},{"type":25,"tag":541,"props":10323,"children":10324},{"class":543,"line":1501},[10325,10329,10333,10337,10341,10345,10349],{"type":25,"tag":541,"props":10326,"children":10327},{"style":560},[10328],{"type":34,"value":8022},{"type":25,"tag":541,"props":10330,"children":10331},{"style":1378},[10332],{"type":34,"value":8064},{"type":25,"tag":541,"props":10334,"children":10335},{"style":560},[10336],{"type":34,"value":3859},{"type":25,"tag":541,"props":10338,"children":10339},{"style":560},[10340],{"type":34,"value":1386},{"type":25,"tag":541,"props":10342,"children":10343},{"style":560},[10344],{"type":34,"value":7725},{"type":25,"tag":541,"props":10346,"children":10347},{"style":554},[10348],{"type":34,"value":8081},{"type":25,"tag":541,"props":10350,"children":10351},{"style":560},[10352],{"type":34,"value":7764},{"type":25,"tag":541,"props":10354,"children":10355},{"class":543,"line":1514},[10356],{"type":25,"tag":541,"props":10357,"children":10358},{"style":560},[10359],{"type":34,"value":8093},{"type":25,"tag":541,"props":10361,"children":10362},{"class":543,"line":1537},[10363,10367,10371,10375,10379,10383,10387,10391,10395],{"type":25,"tag":541,"props":10364,"children":10365},{"style":1378},[10366],{"type":34,"value":9498},{"type":25,"tag":541,"props":10368,"children":10369},{"style":560},[10370],{"type":34,"value":1386},{"type":25,"tag":541,"props":10372,"children":10373},{"style":566},[10374],{"type":34,"value":9507},{"type":25,"tag":541,"props":10376,"children":10377},{"style":560},[10378],{"type":34,"value":2559},{"type":25,"tag":541,"props":10380,"children":10381},{"style":859},[10382],{"type":34,"value":9516},{"type":25,"tag":541,"props":10384,"children":10385},{"style":1378},[10386],{"type":34,"value":3166},{"type":25,"tag":541,"props":10388,"children":10389},{"style":566},[10390],{"type":34,"value":9525},{"type":25,"tag":541,"props":10392,"children":10393},{"style":1378},[10394],{"type":34,"value":3356},{"type":25,"tag":541,"props":10396,"children":10397},{"style":560},[10398],{"type":34,"value":1895},{"type":25,"tag":541,"props":10400,"children":10401},{"class":543,"line":1545},[10402,10406,10410,10414,10419],{"type":25,"tag":541,"props":10403,"children":10404},{"style":1378},[10405],{"type":34,"value":8101},{"type":25,"tag":541,"props":10407,"children":10408},{"style":560},[10409],{"type":34,"value":1386},{"type":25,"tag":541,"props":10411,"children":10412},{"style":560},[10413],{"type":34,"value":7725},{"type":25,"tag":541,"props":10415,"children":10416},{"style":554},[10417],{"type":34,"value":10418},"DELETE",{"type":25,"tag":541,"props":10420,"children":10421},{"style":560},[10422],{"type":34,"value":7764},{"type":25,"tag":541,"props":10424,"children":10425},{"class":543,"line":1567},[10426],{"type":25,"tag":541,"props":10427,"children":10428},{"style":560},[10429],{"type":34,"value":2790},{"type":25,"tag":541,"props":10431,"children":10432},{"class":543,"line":1585},[10433,10437,10441,10445,10449,10453,10457],{"type":25,"tag":541,"props":10434,"children":10435},{"style":1683},[10436],{"type":34,"value":9599},{"type":25,"tag":541,"props":10438,"children":10439},{"style":859},[10440],{"type":34,"value":8142},{"type":25,"tag":541,"props":10442,"children":10443},{"style":1378},[10444],{"type":34,"value":3166},{"type":25,"tag":541,"props":10446,"children":10447},{"style":566},[10448],{"type":34,"value":8151},{"type":25,"tag":541,"props":10450,"children":10451},{"style":560},[10452],{"type":34,"value":2106},{"type":25,"tag":541,"props":10454,"children":10455},{"style":566},[10456],{"type":34,"value":7990},{"type":25,"tag":541,"props":10458,"children":10459},{"style":1378},[10460],{"type":34,"value":3183},{"type":25,"tag":541,"props":10462,"children":10463},{"class":543,"line":1598},[10464],{"type":25,"tag":541,"props":10465,"children":10466},{"style":560},[10467],{"type":34,"value":574},{"type":25,"tag":30,"props":10469,"children":10470},{},[10471],{"type":34,"value":10472},"We call a delete request this time, with id as the Data.",{"type":25,"tag":30,"props":10474,"children":10475},{},[10476],{"type":34,"value":10477},"Lastly, add some CSS to the button:",{"type":25,"tag":531,"props":10479,"children":10481},{"code":10480,"language":6435,"meta":8,"className":6436,"style":8},".taskButton {\n  background-color: green; \u002F* Green *\u002F\n  border: none;\n  color: white;\n  padding: 15px 32px;\n  text-align: center;\n  text-decoration: none;\n  display: inline-block;\n  font-size: 16px;\n  margin: 4px 2px;\n  cursor: pointer;\n  opacity: 0.9;\n  -webkit-transition-duration: 0.4s; \u002F* Safari *\u002F\n  transition-duration: 0.4s;\n}\n",[10482],{"type":25,"tag":522,"props":10483,"children":10484},{"__ignoreMap":8},[10485,10501,10527,10546,10565,10589,10609,10629,10649,10669,10694,10713,10733,10759,10779],{"type":25,"tag":541,"props":10486,"children":10487},{"class":543,"line":544},[10488,10492,10497],{"type":25,"tag":541,"props":10489,"children":10490},{"style":560},[10491],{"type":34,"value":2559},{"type":25,"tag":541,"props":10493,"children":10494},{"style":548},[10495],{"type":34,"value":10496},"taskButton",{"type":25,"tag":541,"props":10498,"children":10499},{"style":560},[10500],{"type":34,"value":2023},{"type":25,"tag":541,"props":10502,"children":10503},{"class":543,"line":458},[10504,10508,10512,10517,10521],{"type":25,"tag":541,"props":10505,"children":10506},{"style":6457},[10507],{"type":34,"value":6460},{"type":25,"tag":541,"props":10509,"children":10510},{"style":560},[10511],{"type":34,"value":1386},{"type":25,"tag":541,"props":10513,"children":10514},{"style":566},[10515],{"type":34,"value":10516}," green",{"type":25,"tag":541,"props":10518,"children":10519},{"style":560},[10520],{"type":34,"value":8778},{"type":25,"tag":541,"props":10522,"children":10524},{"style":10523},"--shiki-default:#676E95;--shiki-default-font-style:italic",[10525],{"type":34,"value":10526}," \u002F* Green *\u002F\n",{"type":25,"tag":541,"props":10528,"children":10529},{"class":543,"line":461},[10530,10534,10538,10542],{"type":25,"tag":541,"props":10531,"children":10532},{"style":6457},[10533],{"type":34,"value":6988},{"type":25,"tag":541,"props":10535,"children":10536},{"style":560},[10537],{"type":34,"value":1386},{"type":25,"tag":541,"props":10539,"children":10540},{"style":566},[10541],{"type":34,"value":6997},{"type":25,"tag":541,"props":10543,"children":10544},{"style":560},[10545],{"type":34,"value":3361},{"type":25,"tag":541,"props":10547,"children":10548},{"class":543,"line":1326},[10549,10553,10557,10561],{"type":25,"tag":541,"props":10550,"children":10551},{"style":6457},[10552],{"type":34,"value":6486},{"type":25,"tag":541,"props":10554,"children":10555},{"style":560},[10556],{"type":34,"value":1386},{"type":25,"tag":541,"props":10558,"children":10559},{"style":566},[10560],{"type":34,"value":6495},{"type":25,"tag":541,"props":10562,"children":10563},{"style":560},[10564],{"type":34,"value":3361},{"type":25,"tag":541,"props":10566,"children":10567},{"class":543,"line":1447},[10568,10572,10576,10580,10585],{"type":25,"tag":541,"props":10569,"children":10570},{"style":6457},[10571],{"type":34,"value":6826},{"type":25,"tag":541,"props":10573,"children":10574},{"style":560},[10575],{"type":34,"value":1386},{"type":25,"tag":541,"props":10577,"children":10578},{"style":893},[10579],{"type":34,"value":6939},{"type":25,"tag":541,"props":10581,"children":10582},{"style":893},[10583],{"type":34,"value":10584}," 32px",{"type":25,"tag":541,"props":10586,"children":10587},{"style":560},[10588],{"type":34,"value":3361},{"type":25,"tag":541,"props":10590,"children":10591},{"class":543,"line":1460},[10592,10597,10601,10605],{"type":25,"tag":541,"props":10593,"children":10594},{"style":6457},[10595],{"type":34,"value":10596},"  text-align",{"type":25,"tag":541,"props":10598,"children":10599},{"style":560},[10600],{"type":34,"value":1386},{"type":25,"tag":541,"props":10602,"children":10603},{"style":566},[10604],{"type":34,"value":6686},{"type":25,"tag":541,"props":10606,"children":10607},{"style":560},[10608],{"type":34,"value":3361},{"type":25,"tag":541,"props":10610,"children":10611},{"class":543,"line":1473},[10612,10617,10621,10625],{"type":25,"tag":541,"props":10613,"children":10614},{"style":6457},[10615],{"type":34,"value":10616},"  text-decoration",{"type":25,"tag":541,"props":10618,"children":10619},{"style":560},[10620],{"type":34,"value":1386},{"type":25,"tag":541,"props":10622,"children":10623},{"style":566},[10624],{"type":34,"value":6997},{"type":25,"tag":541,"props":10626,"children":10627},{"style":560},[10628],{"type":34,"value":3361},{"type":25,"tag":541,"props":10630,"children":10631},{"class":543,"line":1491},[10632,10636,10640,10645],{"type":25,"tag":541,"props":10633,"children":10634},{"style":6457},[10635],{"type":34,"value":6567},{"type":25,"tag":541,"props":10637,"children":10638},{"style":560},[10639],{"type":34,"value":1386},{"type":25,"tag":541,"props":10641,"children":10642},{"style":566},[10643],{"type":34,"value":10644}," inline-block",{"type":25,"tag":541,"props":10646,"children":10647},{"style":560},[10648],{"type":34,"value":3361},{"type":25,"tag":541,"props":10650,"children":10651},{"class":543,"line":1501},[10652,10657,10661,10665],{"type":25,"tag":541,"props":10653,"children":10654},{"style":6457},[10655],{"type":34,"value":10656},"  font-size",{"type":25,"tag":541,"props":10658,"children":10659},{"style":560},[10660],{"type":34,"value":1386},{"type":25,"tag":541,"props":10662,"children":10663},{"style":893},[10664],{"type":34,"value":7075},{"type":25,"tag":541,"props":10666,"children":10667},{"style":560},[10668],{"type":34,"value":3361},{"type":25,"tag":541,"props":10670,"children":10671},{"class":543,"line":1514},[10672,10676,10680,10685,10690],{"type":25,"tag":541,"props":10673,"children":10674},{"style":6457},[10675],{"type":34,"value":6952},{"type":25,"tag":541,"props":10677,"children":10678},{"style":560},[10679],{"type":34,"value":1386},{"type":25,"tag":541,"props":10681,"children":10682},{"style":893},[10683],{"type":34,"value":10684}," 4px",{"type":25,"tag":541,"props":10686,"children":10687},{"style":893},[10688],{"type":34,"value":10689}," 2px",{"type":25,"tag":541,"props":10691,"children":10692},{"style":560},[10693],{"type":34,"value":3361},{"type":25,"tag":541,"props":10695,"children":10696},{"class":543,"line":1537},[10697,10701,10705,10709],{"type":25,"tag":541,"props":10698,"children":10699},{"style":6457},[10700],{"type":34,"value":7113},{"type":25,"tag":541,"props":10702,"children":10703},{"style":560},[10704],{"type":34,"value":1386},{"type":25,"tag":541,"props":10706,"children":10707},{"style":566},[10708],{"type":34,"value":7122},{"type":25,"tag":541,"props":10710,"children":10711},{"style":560},[10712],{"type":34,"value":3361},{"type":25,"tag":541,"props":10714,"children":10715},{"class":543,"line":1545},[10716,10720,10724,10729],{"type":25,"tag":541,"props":10717,"children":10718},{"style":6457},[10719],{"type":34,"value":6776},{"type":25,"tag":541,"props":10721,"children":10722},{"style":560},[10723],{"type":34,"value":1386},{"type":25,"tag":541,"props":10725,"children":10726},{"style":893},[10727],{"type":34,"value":10728}," 0.9",{"type":25,"tag":541,"props":10730,"children":10731},{"style":560},[10732],{"type":34,"value":3361},{"type":25,"tag":541,"props":10734,"children":10735},{"class":543,"line":1567},[10736,10741,10745,10750,10754],{"type":25,"tag":541,"props":10737,"children":10738},{"style":548},[10739],{"type":34,"value":10740},"  -webkit-transition-duration",{"type":25,"tag":541,"props":10742,"children":10743},{"style":560},[10744],{"type":34,"value":1386},{"type":25,"tag":541,"props":10746,"children":10747},{"style":893},[10748],{"type":34,"value":10749}," 0.4s",{"type":25,"tag":541,"props":10751,"children":10752},{"style":560},[10753],{"type":34,"value":8778},{"type":25,"tag":541,"props":10755,"children":10756},{"style":10523},[10757],{"type":34,"value":10758}," \u002F* Safari *\u002F\n",{"type":25,"tag":541,"props":10760,"children":10761},{"class":543,"line":1585},[10762,10767,10771,10775],{"type":25,"tag":541,"props":10763,"children":10764},{"style":6457},[10765],{"type":34,"value":10766},"  transition-duration",{"type":25,"tag":541,"props":10768,"children":10769},{"style":560},[10770],{"type":34,"value":1386},{"type":25,"tag":541,"props":10772,"children":10773},{"style":893},[10774],{"type":34,"value":10749},{"type":25,"tag":541,"props":10776,"children":10777},{"style":560},[10778],{"type":34,"value":3361},{"type":25,"tag":541,"props":10780,"children":10781},{"class":543,"line":1598},[10782],{"type":25,"tag":541,"props":10783,"children":10784},{"style":560},[10785],{"type":34,"value":574},{"type":25,"tag":30,"props":10787,"children":10788},{},[10789],{"type":34,"value":10790},"Reload the page once more, and we're done!",{"type":25,"tag":26,"props":10792,"children":10793},{},[10794],{"type":34,"value":1046},{"title":8,"searchDepth":458,"depth":458,"links":10796},[10797],{"id":5192,"depth":458,"text":5189,"children":10798},[10799,10800,10801,10802,10803,10804,10805,10806,10807],{"id":5458,"depth":461,"text":5465},{"id":5491,"depth":461,"text":5498},{"id":5886,"depth":461,"text":5893},{"id":7600,"depth":461,"text":7607},{"id":7846,"depth":461,"text":7853},{"id":8619,"depth":461,"text":8626},{"id":9073,"depth":461,"text":9080},{"id":9184,"depth":461,"text":9191},{"id":9797,"depth":461,"text":5681},"content:articles:web-dev-fundamentals.md","articles\u002Fweb-dev-fundamentals.md","articles\u002Fweb-dev-fundamentals",{"_path":10812,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":10813,"description":10814,"img":10815,"alt":10816,"author":10817,"tags":10819,"date":10823,"body":10824,"_type":475,"_id":11091,"_source":477,"_file":11092,"_stem":11093,"_extension":480},"\u002Farticles\u002Fpostgresql","PostgreSQL Cheat Sheet","Are you tired of forgetting postgres commands? Well look no further!","https:\u002F\u002Fstackify.com\u002Fwp-content\u002Fuploads\u002F2018\u002F11\u002FPerformance-Tuning-PostgreSQL-3-1280x720.jpg","PostgreSQL",{"name":14,"img":10818},null,[10820,10821,10822],"postgres","db","sql","2021-05-05",{"type":22,"children":10825,"toc":11083},[10826,10835,10840,10847,10852,10881,10886,10915,10925,10940,10945,10959,10964,10978,10983,10997,11011,11021,11035,11040,11054,11059,11064,11074,11079],{"type":25,"tag":506,"props":10827,"children":10829},{"id":10828},"postgresql-cheat-sheet",[10830,10834],{"type":25,"tag":67,"props":10831,"children":10833},{"href":10832,"ariaHidden":70,"tabIndex":71},"#postgresql-cheat-sheet",[],{"type":34,"value":10813},{"type":25,"tag":30,"props":10836,"children":10837},{},[10838],{"type":34,"value":10839},"For every project I've done, I always need to search up - how on earth do I create a table again?\nHow do I get into psql? What about my root password? Every time, I end up spending an hour trying to find the\nright commands. So, look no further, for I've compiled a cheat sheet of most commands you will most likely use to get started in postgres!",{"type":25,"tag":62,"props":10841,"children":10842},{"id":1081},[10843,10846],{"type":25,"tag":67,"props":10844,"children":10845},{"href":1085,"ariaHidden":70,"tabIndex":71},[],{"type":34,"value":1088},{"type":25,"tag":30,"props":10848,"children":10849},{},[10850],{"type":34,"value":10851},"Assuming that you have postgres already installed,\nstart postgres service with",{"type":25,"tag":531,"props":10853,"children":10855},{"className":535,"code":10854,"language":534,"meta":8,"style":8},"sudo service postgresql start\n",[10856],{"type":25,"tag":522,"props":10857,"children":10858},{"__ignoreMap":8},[10859],{"type":25,"tag":541,"props":10860,"children":10861},{"class":543,"line":544},[10862,10866,10871,10876],{"type":25,"tag":541,"props":10863,"children":10864},{"style":548},[10865],{"type":34,"value":551},{"type":25,"tag":541,"props":10867,"children":10868},{"style":554},[10869],{"type":34,"value":10870}," service",{"type":25,"tag":541,"props":10872,"children":10873},{"style":554},[10874],{"type":34,"value":10875}," postgresql",{"type":25,"tag":541,"props":10877,"children":10878},{"style":554},[10879],{"type":34,"value":10880}," start\n",{"type":25,"tag":30,"props":10882,"children":10883},{},[10884],{"type":34,"value":10885},"Get into the postgresql server by",{"type":25,"tag":531,"props":10887,"children":10889},{"className":535,"code":10888,"language":534,"meta":8,"style":8},"sudo -u postgres psql\n",[10890],{"type":25,"tag":522,"props":10891,"children":10892},{"__ignoreMap":8},[10893],{"type":25,"tag":541,"props":10894,"children":10895},{"class":543,"line":544},[10896,10900,10905,10910],{"type":25,"tag":541,"props":10897,"children":10898},{"style":548},[10899],{"type":34,"value":551},{"type":25,"tag":541,"props":10901,"children":10902},{"style":554},[10903],{"type":34,"value":10904}," -u",{"type":25,"tag":541,"props":10906,"children":10907},{"style":554},[10908],{"type":34,"value":10909}," postgres",{"type":25,"tag":541,"props":10911,"children":10912},{"style":554},[10913],{"type":34,"value":10914}," psql\n",{"type":25,"tag":62,"props":10916,"children":10918},{"id":10917},"postgres-commands",[10919,10923],{"type":25,"tag":67,"props":10920,"children":10922},{"href":10921,"ariaHidden":70,"tabIndex":71},"#postgres-commands",[],{"type":34,"value":10924},"Postgres Commands",{"type":25,"tag":531,"props":10926,"children":10929},{"className":10927,"code":10928,"language":10822,"meta":8,"style":8},"language-sql shiki shiki-themes material-theme-palenight","\\l\n",[10930],{"type":25,"tag":522,"props":10931,"children":10932},{"__ignoreMap":8},[10933],{"type":25,"tag":541,"props":10934,"children":10935},{"class":543,"line":544},[10936],{"type":25,"tag":541,"props":10937,"children":10938},{},[10939],{"type":34,"value":10928},{"type":25,"tag":30,"props":10941,"children":10942},{},[10943],{"type":34,"value":10944},"Lists all databases",{"type":25,"tag":531,"props":10946,"children":10948},{"className":10927,"code":10947,"language":10822,"meta":8,"style":8},"\\c [name of database]\n",[10949],{"type":25,"tag":522,"props":10950,"children":10951},{"__ignoreMap":8},[10952],{"type":25,"tag":541,"props":10953,"children":10954},{"class":543,"line":544},[10955],{"type":25,"tag":541,"props":10956,"children":10957},{},[10958],{"type":34,"value":10947},{"type":25,"tag":30,"props":10960,"children":10961},{},[10962],{"type":34,"value":10963},"to connect to actual database",{"type":25,"tag":531,"props":10965,"children":10967},{"className":10927,"code":10966,"language":10822,"meta":8,"style":8},"\\d [name of table\u002Fnothing]\n",[10968],{"type":25,"tag":522,"props":10969,"children":10970},{"__ignoreMap":8},[10971],{"type":25,"tag":541,"props":10972,"children":10973},{"class":543,"line":544},[10974],{"type":25,"tag":541,"props":10975,"children":10976},{},[10977],{"type":34,"value":10966},{"type":25,"tag":30,"props":10979,"children":10980},{},[10981],{"type":34,"value":10982},"for a description of table\u002Ftables",{"type":25,"tag":531,"props":10984,"children":10986},{"className":10927,"code":10985,"language":10822,"meta":8,"style":8},"CREATE DATABASE [database name]\n",[10987],{"type":25,"tag":522,"props":10988,"children":10989},{"__ignoreMap":8},[10990],{"type":25,"tag":541,"props":10991,"children":10992},{"class":543,"line":544},[10993],{"type":25,"tag":541,"props":10994,"children":10995},{},[10996],{"type":34,"value":10985},{"type":25,"tag":531,"props":10998,"children":11000},{"className":10927,"code":10999,"language":10822,"meta":8,"style":8},"grant all privileges on database [database name] to [username]\n",[11001],{"type":25,"tag":522,"props":11002,"children":11003},{"__ignoreMap":8},[11004],{"type":25,"tag":541,"props":11005,"children":11006},{"class":543,"line":544},[11007],{"type":25,"tag":541,"props":11008,"children":11009},{},[11010],{"type":34,"value":10999},{"type":25,"tag":62,"props":11012,"children":11014},{"id":11013},"postgresql-database-dump",[11015,11019],{"type":25,"tag":67,"props":11016,"children":11018},{"href":11017,"ariaHidden":70,"tabIndex":71},"#postgresql-database-dump",[],{"type":34,"value":11020},"PostgreSQL database dump",{"type":25,"tag":531,"props":11022,"children":11024},{"className":10927,"code":11023,"language":10822,"meta":8,"style":8},"pg_dump [database name] -U postgres -h localhost > template\n",[11025],{"type":25,"tag":522,"props":11026,"children":11027},{"__ignoreMap":8},[11028],{"type":25,"tag":541,"props":11029,"children":11030},{"class":543,"line":544},[11031],{"type":25,"tag":541,"props":11032,"children":11033},{},[11034],{"type":34,"value":11023},{"type":25,"tag":30,"props":11036,"children":11037},{},[11038],{"type":34,"value":11039},"to backup database",{"type":25,"tag":531,"props":11041,"children":11043},{"className":10927,"code":11042,"language":10822,"meta":8,"style":8},"psql -h localhost -d [database name] -U [username] -f template\n",[11044],{"type":25,"tag":522,"props":11045,"children":11046},{"__ignoreMap":8},[11047],{"type":25,"tag":541,"props":11048,"children":11049},{"class":543,"line":544},[11050],{"type":25,"tag":541,"props":11051,"children":11052},{},[11053],{"type":34,"value":11042},{"type":25,"tag":30,"props":11055,"children":11056},{},[11057],{"type":34,"value":11058},"to add database to existing db",{"type":25,"tag":30,"props":11060,"children":11061},{},[11062],{"type":34,"value":11063},"Note: the user may not have permision, so you could alter the user if you really wanted to.",{"type":25,"tag":62,"props":11065,"children":11067},{"id":11066},"sql-commands",[11068,11072],{"type":25,"tag":67,"props":11069,"children":11071},{"href":11070,"ariaHidden":70,"tabIndex":71},"#sql-commands",[],{"type":34,"value":11073},"SQL Commands",{"type":25,"tag":30,"props":11075,"children":11076},{},[11077],{"type":34,"value":11078},"Most are searchable, but I will update this section if I realize that I'm using it a lot.",{"type":25,"tag":26,"props":11080,"children":11081},{},[11082],{"type":34,"value":1046},{"title":8,"searchDepth":458,"depth":458,"links":11084},[11085],{"id":10828,"depth":458,"text":10813,"children":11086},[11087,11088,11089,11090],{"id":1081,"depth":461,"text":1088},{"id":10917,"depth":461,"text":10924},{"id":11013,"depth":461,"text":11020},{"id":11066,"depth":461,"text":11073},"content:articles:postgresql.md","articles\u002Fpostgresql.md","articles\u002Fpostgresql",{"_path":11095,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11096,"description":11097,"img":11098,"alt":11099,"author":11100,"tags":11101,"date":11104,"body":11105,"_type":475,"_id":11214,"_source":477,"_file":11215,"_stem":11216,"_extension":480},"\u002Farticles\u002Fmartial-arts-evaluation","What Martial World does differently","Why I think Martial World is one of the best martial arts novels everyone should try at least once.","https:\u002F\u002Fcdn.novelupdates.com\u002Fimages\u002F2018\u002F04\u002FMartial-World.jpg","Martial World",{"name":14,"img":15},[11102,11103],"martial arts","novels","2021-03-23",{"type":22,"children":11106,"toc":11209},[11107,11117,11122,11127,11132,11137,11149,11154,11159,11164,11169,11179,11184,11189,11194,11199,11204],{"type":25,"tag":506,"props":11108,"children":11110},{"id":11109},"evaluation-what-martial-world-does-differently",[11111,11115],{"type":25,"tag":67,"props":11112,"children":11114},{"href":11113,"ariaHidden":70,"tabIndex":71},"#evaluation-what-martial-world-does-differently",[],{"type":34,"value":11116},"Evaluation: What Martial World does differently",{"type":25,"tag":30,"props":11118,"children":11119},{},[11120],{"type":34,"value":11121},"Imagine it is Ancient China. Amongst the billions of people living in this era, you are one of the poorest. Every day, the greatest struggle is not to get into your dream university, but how to put food onto the table for your grandparents. Wherever you go, the stink of your unwashed shirt and lack of status in the city is like a heavy anvil pressing down on you, forcing you to bow your head to corrupt officials and rich people, and your only option is to grit your teeth and endure the shame. That is, one day, you stumble upon a mysterious object by some obscure cornfield. It appears ordinary and can sell for a few bucks at your local flea market, but with some gut feeling you hold onto it. Later on, you realize that this “mysterious object” can actually teach something called martial arts, something commoners wouldn’t be able to get a hold of. With the help of the object, you are opened to a whole new aspect in life- by training in martial arts techniques, consuming pills and elixirs and undergoing tribulations, you can improve your health, increase longevity, and grow powerful enough to the point where you can split mountains with a strike of your hand. With this stroke of fortune, you are determined to become powerful enough so that no one can bully your family ever again!",{"type":25,"tag":30,"props":11123,"children":11124},{},[11125],{"type":34,"value":11126},"This is the overall premise of a martial arts novel, where the protagonist embarks on a path of martial arts to fulfil their goal. Although martial arts novels may seem fairly niche, there’s been many popular novels and films based on Chinese mythology almost everywhere: Sun Wukong was in The Journey to the West, which was published in the 16th century, while Xingtian the General, Fuxi, and Nuwa appeared in Desolate Era, which was published in the 21st century. With such a common trope, most people tend to think that new novels based on martial arts are unoriginal and repetitive, which in turn lacks potential for the appeal to grow any larger for years to come. This begs the question: with such a competitive market for this type of genre, what makes a martial arts novel worth reading? Although it may seem childish and bizarre to readers initially, the martial arts novel Martial World, successfully brings out the best of its genre through logical storytelling, elaborate character development, and by having a distinct moral standing.",{"type":25,"tag":30,"props":11128,"children":11129},{},[11130],{"type":34,"value":11131},"In any martial arts novel, the main character grows stronger through multiple tempering experiences and trials. While anyone can write a story of a protagonist beating the enemies senseless, how they go about doing it is more than meets the eye. Most martial arts novels cannot be covered easily in two or three books because of difference in power levels - to give a sense of how wide the gap is, the protagonist usually starts off as an ordinary mortal who can bench press their weight at most, and then at the end of the novel, they can be a sword-wielding god who can destroy Earth breaking a sweat. As a result of such a difference in power, the author needs to be very careful in their storytelling and plot throughout the books. What makes or breaks these novels are not the minute plot holes, but what you’d least expect: the overall goal of the protagonist. Before we take a look how Martial World avoids these pitfalls, we’ll take a look at another novel: in I Shall Seal The Heavens, Meng Hao is an ordinary scholar who failed his imperial exam three times. Out of the blue, he gets abducted into a martial arts school, where he realizes that in this world, it’s “the law of the jungle. All of my problems are because my cultivation base is too low” (Er 16). Due to how weak he is, he decides on his goal - he wants to become strong enough so he can defend himself, so that no one can look down on him ever again! While this type of goal seems reasonable at first glance, there’s actually a fallacy in this goal: while you beat the first aggressor after becoming stronger, there will always be someone stronger than you that you will have to surpass. While this type of plot is fine since readers get to see Meng Hao get stronger through fights and competitions, if the goal is centered around something that he will never achieve, readers will find the previously exciting climb to power boring and unoriginal.",{"type":25,"tag":30,"props":11133,"children":11134},{},[11135],{"type":34,"value":11136},"Contrary to I Shall Seal The Heavens, the novel Martial World is an example of a novel that has an overall goal readers can look forward to. Lin Ming is initially a humble boy who was destined to marry his first love Lan Yunyue and then live happily ever after. That is, until a powerful and influential man named Zhu Yan shatters Lin Ming’s dreams, abducting her to be his fiancée, never to be his again. Hence, Lin Ming decides to embark on a journey of harsh cultivation and trials all in order to save Lan Yunyue. As a result, the readers are able to enjoy Lin Ming’s progression through the stages of cultivation in hopes of seeing that one day he will eventually become powerful enough to save his beloved. Solely based on a goal set by Ling Ming, Martial World distinguishes itself from the rest of the herd.",{"type":25,"tag":30,"props":11138,"children":11139},{},[11140,11142,11147],{"type":34,"value":11141},"Cultivation in a martial arts world is filled with countless dangers and perils, meaning that if you make a single mistake, you could forfeit your life. While getting killed is obviously something you want to avoid, there’s something worse than death for cultivators - crippling your cultivation. After cultivators become powerful enough where they can live for thousands of years and live carefree with dozens of maids and concubines by your side, crippling their cultivation is destroying their martial arts - after being spoiled for so long, can you live your life as an ordinary mortal? If the main character in a martial arts novel wants to fulfil their goals, because of the dog eat dog world they live in, every challenge from an enemy is a life and death battle - they can never ever become crippled, they can never ever die, because then the novel would be over. As a result, many martial arts novels have one big flaw that is hard to overcome, and that’s character development. Meng Hao in I Shall Seal The Heavens is a prime example of a main character who never changes once for the better. When he initially enters the world of cultivation, Meng Hao admits that he “had no choice … but to rob some people to improve ",{"type":25,"tag":541,"props":11143,"children":11144},{},[11145],{"type":34,"value":11146},"his",{"type":34,"value":11148}," cultivation base” (Er 14) in order to grow stronger. To the readers, this seems somewhat justified since Meng Hao is doing whatever he can to survive. However, as the novel goes on, regardless of how strong he gets, Meng Hao never stops stealing from others. In fact, Meng Hao manages to benefit from everyone at least once, and even those that did not do much harm to him. His shameless behaviour of stealing from others is portrayed as a “lucky chance” to get stronger, instead of it simply being a selfish personality. You would think that his behaviour would be corrected, but it’s due to the fact that whenever an enemy picks a fight with him, he’s always the one on top. Whenever there’s a tournament, he manages to snag the first-place reward. Meng Hao never truly experiences an actual “defeat” so he will never be able to learn from his mistakes. No one would want to read about a one-dimensional character who after thousands of years cultivating, can’t even make a mature decision.",{"type":25,"tag":30,"props":11150,"children":11151},{},[11152],{"type":34,"value":11153},"On the other hand, we have Lin Ming in Martial World, who appears to be undefeated for a very good portion of the novel, and every success brings him to a higher cultivation level, up to the point where he’s able to protect the birth planet from invaders. However, one of his closest friends, Sheng Mei, ends up betraying him, essentially crippling him to a low-level martial artist who can only live for a couple of decades. This was Lin Ming’s first real defeat, and for the first few years he was simply an empty shell of a human - aimlessly wandering his home planet, just waiting for death. Eventually, Lin Ming comes to realize that “if the heavens wish to destroy me then I will destroy the heavens. If the death god wants to take me then I will cut down the death god” - and even if it means fighting one of his most trusted friends, Lin Ming will do whatever he can to save humanity from disaster. From his epiphany, at the verge of his death, Lin Ming makes one final attempt to break through, eventually surpassing his limits and ends up reclaiming a portion of his strength. Martial World taps into a new meaning the readers haven’t seen before - Lin Ming didn’t become powerful because of fate or some magic treasure, but because he is hardworking and is resolute in his decisions. Through character development, readers can connect with an ever-changing protagonist that they will come to love as the novel progresses.",{"type":25,"tag":30,"props":11155,"children":11156},{},[11157],{"type":34,"value":11158},"While martial arts novels are complete fantasy, a good martial arts novel should be able to convince readers that there is something more than just a hot-blooded adventure. Since most people read these novels because they want to project themselves as the character experiencing this journey, these protagonists should also be good role models - in the sense where they have a clear set of ethics. A common misconception people hold is that the protagonist is always the good person. Typically, it is the case, but there are situations where the moral ground gets a little dicey. For example, in True Martial World, Yi Yun is actually from modern day Earth and gets transported to the martial arts world. He ends up in a very poor state, and is treated very poorly by the village higher ups, but once he becomes one of the knights of the central city, a bodyguard of Yi Yun’s archnemesis switches sides and tries sucking up to Yi Yun by helping him beat up his enemies. While this seems like an act of redemption for what he used to do, the people that the bodyguard beat up didn’t really do enough harm that can be considered downright evil. Yi Yun doesn’t move to correct the bodyguard’s behaviour, which shows how much of a hypocrite he is - despises those who hurt him, but ignorant of those he hurts. Moreover, Yi Yun originated from the 21st century, a time where morals play a big factor, which reinforces the fact that Yi Yun truly doesn’t care about what happens around him as long as he and his family are safe, making him a shallow character who doesn't see the bigger picture. Many readers will be conflicted when reading because while they want to root for the good guy, Yi Yun isn’t particularly good, making him less appealing for readers to look forward to as he advances in his cultivation.",{"type":25,"tag":30,"props":11160,"children":11161},{},[11162],{"type":34,"value":11163},"Comparing this to Martial World, Lin Ming has set himself some standards in which he follows no matter what: “In my life, my principles have never changed. If someone gives me one foot of respect, then I shall give them 10 feet of respect. If someone punches me, then I will stab them with three sabers. Whoever dares to harm my friends and family, then I shall annihilate nine generations of their entire family” (Li, “Martial World” 703), which is a great life lesson in itself. More importantly, this gives the reader a better impression of the protagonist, where they can rest assured knowing that anyone Lin Ming kills or cripples deserves it wholeheartedly. By defining a moral stance, Martial World gives readers a sense of trust knowing that the person they’re rooting for really is doing the best they can to fulfil the goals they’re aiming for.",{"type":25,"tag":30,"props":11165,"children":11166},{},[11167],{"type":34,"value":11168},"To an outsider, martial arts novels seem like they are all about the same thing - growing overpowered, and then defeating your foes in a spectacular manner. Although this is true, the thrill you get from watching the Ling Min’s hard work pay off, the moments of despair when he loses his most loved ones, and the thoughtful lessons he manages to perceive on his journeys is what separates his story from others. At the end of the day, “fantasy and reality are polar existences of each other, and yet dependent on the other. Without fantasy, there is no point in reality. Without reality, fantasy has no meaning” (Li, “Martial World” 183), so regardless of what martial arts novel you’re reading, even if it isn’t Martial World, as long as it’s entertaining, that’s all that matters.",{"type":25,"tag":62,"props":11170,"children":11172},{"id":11171},"works-cited",[11173,11177],{"type":25,"tag":67,"props":11174,"children":11176},{"href":11175,"ariaHidden":70,"tabIndex":71},"#works-cited",[],{"type":34,"value":11178},"Works Cited:",{"type":25,"tag":30,"props":11180,"children":11181},{},[11182],{"type":34,"value":11183},"Er, Gen. I Shall Seal The Heavens. Translated by Deathblade, Qidian, 2017.",{"type":25,"tag":30,"props":11185,"children":11186},{},[11187],{"type":34,"value":11188},"Jietuo, Enci. Apotheosis - Ascension to Godhood. Translated by zzwenxue, 2019.",{"type":25,"tag":30,"props":11190,"children":11191},{},[11192],{"type":34,"value":11193},"Lǐ, Cánjiǎn. Martial World. Translated by hyorinmaru, Qidian, 2018.",{"type":25,"tag":30,"props":11195,"children":11196},{},[11197],{"type":34,"value":11198},"Lǐ, Cánjiǎn. True Martial World. Translated by CKtalon, Qidian, 2019.",{"type":25,"tag":30,"props":11200,"children":11201},{},[11202],{"type":34,"value":11203},"Wu, Cheng'en. The Journey to the West. Print, 1977.",{"type":25,"tag":30,"props":11205,"children":11206},{},[11207],{"type":34,"value":11208},"Zhu Zhi. Desolate Era. Translated by RWX, Qidian, 2017.",{"title":8,"searchDepth":458,"depth":458,"links":11210},[11211],{"id":11109,"depth":458,"text":11116,"children":11212},[11213],{"id":11171,"depth":461,"text":11178},"content:articles:martial-arts-evaluation.md","articles\u002Fmartial-arts-evaluation.md","articles\u002Fmartial-arts-evaluation",{"_path":11218,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11219,"description":11220,"img":11221,"alt":11219,"author":11222,"tags":11223,"date":11226,"body":11227,"_type":475,"_id":11594,"_source":477,"_file":11595,"_stem":11596,"_extension":480},"\u002Farticles\u002Fhack-the-north-backend","HTN Backend Challenge","Tried out GraphQL for the first time! Learn what I did.","https:\u002F\u002Fdavidwalsh.name\u002Fdemo\u002Fgraphql-intro\u002Fgraphql.png",{"name":14,"img":15},[11224,11225],"hackthenorth","Backend","2021-03-15",{"type":22,"children":11228,"toc":11587},[11229,11239,11250,11262,11269,11274,11317,11327,11332,11347,11355,11360,11368,11376,11381,11389,11397,11402,11412,11432,11442,11566,11574,11579],{"type":25,"tag":506,"props":11230,"children":11232},{"id":11231},"htn-backend-challenge",[11233,11237],{"type":25,"tag":67,"props":11234,"children":11236},{"href":11235,"ariaHidden":70,"tabIndex":71},"#htn-backend-challenge",[],{"type":34,"value":11238},"HTN-Backend-Challenge",{"type":25,"tag":30,"props":11240,"children":11241},{},[11242,11244],{"type":34,"value":11243},"This is my backend challenge.\nTest it out ",{"type":25,"tag":67,"props":11245,"children":11248},{"href":11246,"rel":11247},"https:\u002F\u002Fhtn.zhehaizhang.com\u002Fgraphql",[4727],[11249],{"type":34,"value":5449},{"type":25,"tag":30,"props":11251,"children":11252},{},[11253,11255,11260],{"type":34,"value":11254},"This is my ",{"type":25,"tag":699,"props":11256,"children":11257},{},[11258],{"type":34,"value":11259},"first time",{"type":34,"value":11261}," making a graphQL server, so I will try to document my process,\nthe challenges I encountered, and how I fixed them.",{"type":25,"tag":62,"props":11263,"children":11264},{"id":1081},[11265,11268],{"type":25,"tag":67,"props":11266,"children":11267},{"href":1085,"ariaHidden":70,"tabIndex":71},[],{"type":34,"value":1088},{"type":25,"tag":30,"props":11270,"children":11271},{},[11272],{"type":34,"value":11273},"Node Server Dependencies:",{"type":25,"tag":1129,"props":11275,"children":11276},{},[11277,11282,11287,11292,11297,11302,11307,11312],{"type":25,"tag":1099,"props":11278,"children":11279},{},[11280],{"type":34,"value":11281},"cors - this is for https connections",{"type":25,"tag":1099,"props":11283,"children":11284},{},[11285],{"type":34,"value":11286},"dotenv - this is for environment variables such as postgres credentials",{"type":25,"tag":1099,"props":11288,"children":11289},{},[11290],{"type":34,"value":11291},"eslint - detect bugs and things I'm not doing properly",{"type":25,"tag":1099,"props":11293,"children":11294},{},[11295],{"type":34,"value":11296},"express - for node server",{"type":25,"tag":1099,"props":11298,"children":11299},{},[11300],{"type":34,"value":11301},"express-graphql, graphql - for query and mutation api",{"type":25,"tag":1099,"props":11303,"children":11304},{},[11305],{"type":34,"value":11306},"morgan - for debugging (this is more for REST apis, but including it would not be so bad for seeing the requests.)",{"type":25,"tag":1099,"props":11308,"children":11309},{},[11310],{"type":34,"value":11311},"nodemon - for debugging and testing",{"type":25,"tag":1099,"props":11313,"children":11314},{},[11315],{"type":34,"value":11316},"pg-promise - for connecting to the postgres database!",{"type":25,"tag":62,"props":11318,"children":11320},{"id":11319},"postgres-database-setup",[11321,11325],{"type":25,"tag":67,"props":11322,"children":11324},{"href":11323,"ariaHidden":70,"tabIndex":71},"#postgres-database-setup",[],{"type":34,"value":11326},"Postgres Database Setup:",{"type":25,"tag":30,"props":11328,"children":11329},{},[11330],{"type":34,"value":11331},"I set up my database in consideration of the large amount of data.\nI created 3 tables:",{"type":25,"tag":1129,"props":11333,"children":11334},{},[11335],{"type":25,"tag":1099,"props":11336,"children":11337},{},[11338,11340,11345],{"type":34,"value":11339},"users - this is to store all of the user information ",{"type":25,"tag":699,"props":11341,"children":11342},{},[11343],{"type":34,"value":11344},"EXCLUDING",{"type":34,"value":11346}," skills, since there are\nmultiple skills to store.",{"type":25,"tag":531,"props":11348,"children":11350},{"code":11349},"Table \"public.users\"\nColumn  |          Type          | Collation | Nullable |                         Default\n---------+------------------------+-----------+----------+----------------------------------------------------------\nid      | integer                |           | not null | nextval('users_id_seq'::regclass)\nemail   | character varying(100) |           | not null |\nname    | character varying(100) |           | not null |\npicture | character varying(255) |           |          | 'https:\u002F\u002Fapi.zhehaizhang.com\u002Fdefault'::character varying\ncompany | character varying(100) |           | not null |\nphone   | character varying(100) |           | not null |\nIndexes:\n   \"pk_id\" PRIMARY KEY, btree (id)\n   \"uk_email\" UNIQUE CONSTRAINT, btree (email)\nReferenced by:\n   TABLE \"usertoskill\" CONSTRAINT \"fk_id\" FOREIGN KEY (id) REFERENCES users(id)\n",[11351],{"type":25,"tag":522,"props":11352,"children":11353},{"__ignoreMap":8},[11354],{"type":34,"value":11349},{"type":25,"tag":30,"props":11356,"children":11357},{},[11358],{"type":34,"value":11359},"Note that I make ID a primary key and email a unique contraint. This way, it's\npossible for a user to change their email, while keeping the same unique ID for fast and efficient queries.\nAlso notice that picture is the only column that isn't not null, because users don't usually upload their picture immediately after they create an account.\nHence, if it's null, then there will be a default picture in its place instead.",{"type":25,"tag":1129,"props":11361,"children":11362},{"start":458},[11363],{"type":25,"tag":1099,"props":11364,"children":11365},{},[11366],{"type":34,"value":11367},"skills - this table is mainly for store the skill name.",{"type":25,"tag":531,"props":11369,"children":11371},{"code":11370},"                                         Table \"public.skills\"\n   Column    |          Type          | Collation | Nullable |                 Default\n-------------+------------------------+-----------+----------+------------------------------------------\n skill_id    | integer                |           | not null | nextval('skills_skill_id_seq'::regclass)\n name        | character varying(50)  |           | not null |\n description | character varying(255) |           |          |\nIndexes:\n    \"pk_skills\" PRIMARY KEY, btree (skill_id)\n    \"uk_skillname\" UNIQUE CONSTRAINT, btree (name)\nReferenced by:\n    TABLE \"usertoskill\" CONSTRAINT \"fk_skillid\" FOREIGN KEY (skill_id) REFERENCES skills(skill_id)\n",[11372],{"type":25,"tag":522,"props":11373,"children":11374},{"__ignoreMap":8},[11375],{"type":34,"value":11370},{"type":25,"tag":30,"props":11377,"children":11378},{},[11379],{"type":34,"value":11380},"Notice that I made skill_id a primary key and skill name a unique constraint. This is for the same concept as the users table.\nI also added a nullable description for skills just in case for the frontend.",{"type":25,"tag":1129,"props":11382,"children":11383},{"start":461},[11384],{"type":25,"tag":1099,"props":11385,"children":11386},{},[11387],{"type":34,"value":11388},"usertoskill - this table is to link user's skills",{"type":25,"tag":531,"props":11390,"children":11392},{"code":11391},"             Table \"public.usertoskill\"\n  Column  |  Type   | Collation | Nullable | Default\n----------+---------+-----------+----------+---------\n id       | integer |           | not null |\n skill_id | integer |           | not null |\n rating   | integer |           |          |\nForeign-key constraints:\n    \"fk_id\" FOREIGN KEY (id) REFERENCES users(id)\n    \"fk_skillid\" FOREIGN KEY (skill_id) REFERENCES skills(skill_id)\n",[11393],{"type":25,"tag":522,"props":11394,"children":11395},{"__ignoreMap":8},[11396],{"type":34,"value":11391},{"type":25,"tag":30,"props":11398,"children":11399},{},[11400],{"type":34,"value":11401},"Notice that id and skill_id are both foreign keys in order to connect the primary keys in both skills and users.\nIn here, I relate the user id to a skill, and added an additional column for rating. I left it null because a user may not rate a skill.",{"type":25,"tag":8270,"props":11403,"children":11405},{"id":11404},"allowing-for-easy-setup",[11406,11410],{"type":25,"tag":67,"props":11407,"children":11409},{"href":11408,"ariaHidden":70,"tabIndex":71},"#allowing-for-easy-setup",[],{"type":34,"value":11411},"Allowing for easy setup:",{"type":25,"tag":30,"props":11413,"children":11414},{},[11415,11417,11423,11424,11430],{"type":34,"value":11416},"I created two files, ",{"type":25,"tag":522,"props":11418,"children":11420},{"className":11419},[],[11421],{"type":34,"value":11422},"template.sql",{"type":34,"value":6405},{"type":25,"tag":522,"props":11425,"children":11427},{"className":11426},[],[11428],{"type":34,"value":11429},"templatewithdata.sql",{"type":34,"value":11431}," to allow for people to import this database into any Postgresql database.",{"type":25,"tag":62,"props":11433,"children":11435},{"id":11434},"endpoints",[11436,11440],{"type":25,"tag":67,"props":11437,"children":11439},{"href":11438,"ariaHidden":70,"tabIndex":71},"#endpoints",[],{"type":34,"value":11441},"Endpoints",{"type":25,"tag":1095,"props":11443,"children":11444},{},[11445,11561],{"type":25,"tag":1099,"props":11446,"children":11447},{},[11448,11450,11458,11466,11470,11472,11480,11488,11491,11493,11501,11509,11512,11514,11517,11519,11527,11535,11538,11540,11548,11556,11559],{"type":34,"value":11449},"User Endpoints:",{"type":25,"tag":1095,"props":11451,"children":11452},{},[11453],{"type":25,"tag":1099,"props":11454,"children":11455},{},[11456],{"type":34,"value":11457},"All Users",{"type":25,"tag":531,"props":11459,"children":11461},{"code":11460},"query {\n  users {\n    name\n    email\n    company\n    picture\n    phone\n    skills {\n      name\n      rating\n    }\n  }\n}\n",[11462],{"type":25,"tag":522,"props":11463,"children":11464},{"__ignoreMap":8},[11465],{"type":34,"value":11460},{"type":25,"tag":11467,"props":11468,"children":11469},"br",{},[],{"type":34,"value":11471},"This endpoint returns a list of all user data from the database in JSON format.",{"type":25,"tag":1095,"props":11473,"children":11474},{},[11475],{"type":25,"tag":1099,"props":11476,"children":11477},{},[11478],{"type":34,"value":11479},"Single User Endpoint",{"type":25,"tag":531,"props":11481,"children":11483},{"code":11482},"query {\n  user(email: String) {\n    name\n    email\n    company\n    picture\n    phone\n    skills {\n      name\n      rating\n    }  \n  }\n}\n",[11484],{"type":25,"tag":522,"props":11485,"children":11486},{"__ignoreMap":8},[11487],{"type":34,"value":11482},{"type":25,"tag":11467,"props":11489,"children":11490},{},[],{"type":34,"value":11492},"By passing in an email, this endpoint returns the user data for a specific user in JSON format.",{"type":25,"tag":1095,"props":11494,"children":11495},{},[11496],{"type":25,"tag":1099,"props":11497,"children":11498},{},[11499],{"type":34,"value":11500},"Updating User Data",{"type":25,"tag":531,"props":11502,"children":11504},{"code":11503},"mutation {\n  updateUser(email: String (Required), name: String, company: String, picture: String, phone: String, skills: List({name: String, rating: Int })) {\n    name\n    email\n    company\n    picture\n    phone\n    skills {\n      name\n      rating\n    }\n  }\n}\n",[11505],{"type":25,"tag":522,"props":11506,"children":11507},{"__ignoreMap":8},[11508],{"type":34,"value":11503},{"type":25,"tag":11467,"props":11510,"children":11511},{},[],{"type":34,"value":11513},"By passing in a required email, this endpoint mutates the user data for that specific email and returns the updated user data in JSON format.",{"type":25,"tag":11467,"props":11515,"children":11516},{},[],{"type":34,"value":11518},"EXTRA FEATURES:",{"type":25,"tag":1095,"props":11520,"children":11521},{},[11522],{"type":25,"tag":1099,"props":11523,"children":11524},{},[11525],{"type":34,"value":11526},"Add User",{"type":25,"tag":531,"props":11528,"children":11530},{"code":11529},"mutation {\n  addUser(email: String (Required), name: String (Required), company: String (Required), picture: String, phone: String (Required), skills: List({name: String (Required if added), rating: Int })) {\n    name\n    email\n    company\n    pciture\n    phone\n    skills {\n      name\n      rating\n    }\n  }\n}\n",[11531],{"type":25,"tag":522,"props":11532,"children":11533},{"__ignoreMap":8},[11534],{"type":34,"value":11529},{"type":25,"tag":11467,"props":11536,"children":11537},{},[],{"type":34,"value":11539},"By passing in the required parameters, this endpoint adds a new user. If the skill has not been made before, it will add a new skill as well.",{"type":25,"tag":1095,"props":11541,"children":11542},{},[11543],{"type":25,"tag":1099,"props":11544,"children":11545},{},[11546],{"type":34,"value":11547},"Add Users",{"type":25,"tag":531,"props":11549,"children":11551},{"code":11550},"mutation {\n  addUsers(List(email: String (Required), name: String (Required), company: String (Required), picture: String, phone: String (Required), skills: List({name: String (Required if added), rating: Int }))) {\n    name\n    email\n    company\n    pciture\n    phone\n    skills {\n      name\n      rating\n    }\n  }\n}\n",[11552],{"type":25,"tag":522,"props":11553,"children":11554},{"__ignoreMap":8},[11555],{"type":34,"value":11550},{"type":25,"tag":11467,"props":11557,"children":11558},{},[],{"type":34,"value":11560},"By passing in a list of users, this endpoint adds multiple users. If the skill has not been made before, it will add a new skill as well.",{"type":25,"tag":1099,"props":11562,"children":11563},{},[11564],{"type":34,"value":11565},"Skills",{"type":25,"tag":531,"props":11567,"children":11569},{"code":11568},"query {\n  skills (min_frequency: Int, max_frequency: Int ){\n    name\n    frequency\n  }\n}\n",[11570],{"type":25,"tag":522,"props":11571,"children":11572},{"__ignoreMap":8},[11573],{"type":34,"value":11568},{"type":25,"tag":30,"props":11575,"children":11576},{},[11577],{"type":34,"value":11578},"Returns a list of skills along with their name and frequency. If a parameter is passed in,\nit will return only those skills that satisfy these requirements. You are allowed to pass in one, both, or none.",{"type":25,"tag":1095,"props":11580,"children":11581},{},[11582],{"type":25,"tag":1099,"props":11583,"children":11584},{},[11585],{"type":34,"value":11586},"REST: \u002Fuser Endpoint (Post Request)\nThere are no parameters, but calling this will insert all the template data in the sql file. This is only used for development.",{"title":8,"searchDepth":458,"depth":458,"links":11588},[11589],{"id":11231,"depth":458,"text":11238,"children":11590},[11591,11592,11593],{"id":1081,"depth":461,"text":1088},{"id":11319,"depth":461,"text":11326},{"id":11434,"depth":461,"text":11441},"content:articles:hack-the-north-backend.md","articles\u002Fhack-the-north-backend.md","articles\u002Fhack-the-north-backend",{"_path":11598,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11599,"description":11600,"img":11601,"alt":11599,"author":11602,"tags":11603,"date":11226,"body":11605,"_type":475,"_id":11968,"_source":477,"_file":11969,"_stem":11970,"_extension":480},"\u002Farticles\u002Fhack-the-north-frontend","HTN Frontend Challenge","Wrestled with persistent state, and made a nice nuxt web app!","https:\u002F\u002Fmadewithnetwork.ams3.cdn.digitaloceanspaces.com\u002Fspatie-space-production\u002F3075\u002Fnuxtjs-2.jpg",{"name":14,"img":15},[11224,11604],"frontend",{"type":22,"children":11606,"toc":11954},[11607,11617,11638,11648,11653,11682,11692,11697,11707,11712,11722,11748,11758,11763,11773,11778,11788,11800,11810,11815,11859,11864,11874,11902,11912,11935,11945,11950],{"type":25,"tag":506,"props":11608,"children":11610},{"id":11609},"htn-frontend-challenge",[11611,11615],{"type":25,"tag":67,"props":11612,"children":11614},{"href":11613,"ariaHidden":70,"tabIndex":71},"#htn-frontend-challenge",[],{"type":34,"value":11616},"HTN-Frontend-Challenge",{"type":25,"tag":30,"props":11618,"children":11619},{},[11620,11622,11628,11630,11636],{"type":34,"value":11621},"View my frontend in action ",{"type":25,"tag":67,"props":11623,"children":11626},{"href":11624,"rel":11625},"https:\u002F\u002Fhtnweb.zhehaizhang.com",[4727],[11627],{"type":34,"value":5449},{"type":34,"value":11629},"\nEmail: ",{"type":25,"tag":67,"props":11631,"children":11633},{"href":11632},"mailto:bairddixon@frolix.com",[11634],{"type":34,"value":11635},"bairddixon@frolix.com",{"type":34,"value":11637},"\nPassword: password",{"type":25,"tag":62,"props":11639,"children":11641},{"id":11640},"part-2-writeup",[11642,11646],{"type":25,"tag":67,"props":11643,"children":11645},{"href":11644,"ariaHidden":70,"tabIndex":71},"#part-2-writeup",[],{"type":34,"value":11647},"Part 2. Writeup",{"type":25,"tag":30,"props":11649,"children":11650},{},[11651],{"type":34,"value":11652},"When I first looked at the Frontend Challenge, my first thought was to use Nuxt.js for these reasons:",{"type":25,"tag":1095,"props":11654,"children":11655},{},[11656,11661,11666,11677],{"type":25,"tag":1099,"props":11657,"children":11658},{},[11659],{"type":34,"value":11660},"The Vue framework is easy to comprehend due to its code separation (html, js, and css are all separate but interconnected)",{"type":25,"tag":1099,"props":11662,"children":11663},{},[11664],{"type":34,"value":11665},"Nuxt offers server-side rendering and better SEO, allowing for better search result pings!",{"type":25,"tag":1099,"props":11667,"children":11668},{},[11669,11671],{"type":34,"value":11670},"Nuxt is very modular and allows for a wide variety of modules to be integrated easily in the ",{"type":25,"tag":522,"props":11672,"children":11674},{"className":11673},[],[11675],{"type":34,"value":11676},"nuxt.config.js",{"type":25,"tag":1099,"props":11678,"children":11679},{},[11680],{"type":34,"value":11681},"Vue and Nuxt are not managed by a large company (good depending on your taste)",{"type":25,"tag":62,"props":11683,"children":11685},{"id":11684},"es-lint",[11686,11690],{"type":25,"tag":67,"props":11687,"children":11689},{"href":11688,"ariaHidden":70,"tabIndex":71},"#es-lint",[],{"type":34,"value":11691},"ES-Lint",{"type":25,"tag":30,"props":11693,"children":11694},{},[11695],{"type":34,"value":11696},"I use ES-Lint in order to keep good coding practices, and also catch trivial errors I might unknowingly miss.\nIt really helped me speed up my development, as well as make my code as friendly as possible to other programmers.",{"type":25,"tag":62,"props":11698,"children":11700},{"id":11699},"pwa",[11701,11705],{"type":25,"tag":67,"props":11702,"children":11704},{"href":11703,"ariaHidden":70,"tabIndex":71},"#pwa",[],{"type":34,"value":11706},"PWA",{"type":25,"tag":30,"props":11708,"children":11709},{},[11710],{"type":34,"value":11711},"One of the reasons I chose Nuxt is to easily integrate PWA! My web app is for the most part mobile friendly,\nand allows for people to \"install\" it.",{"type":25,"tag":62,"props":11713,"children":11715},{"id":11714},"the-problem",[11716,11720],{"type":25,"tag":67,"props":11717,"children":11719},{"href":11718,"ariaHidden":70,"tabIndex":71},"#the-problem",[],{"type":34,"value":11721},"The Problem",{"type":25,"tag":30,"props":11723,"children":11724},{},[11725,11727,11732,11734,11739,11741,11746],{"type":34,"value":11726},"Afterwards, I needed to decide the structure and design of my web app. Since the whole goal was to efficiently\ndisplay events to public and private users, I automatically used ",{"type":25,"tag":699,"props":11728,"children":11729},{},[11730],{"type":34,"value":11731},"Vuex",{"type":34,"value":11733}," store option to store the state of my app - for example,\nthe email, or if the client is logged in.\nOne problem with SSR (server sided rendering), however, is that there's no easy way to\npersist the state after a refresh. In my previous projects, I've always solved this problem by ",{"type":25,"tag":4778,"props":11735,"children":11736},{},[11737],{"type":34,"value":11738},"not",{"type":34,"value":11740}," using SSR and storing everything in localStorage,\nbut I didn't want to shy away from this problem. This was my greatest problem, since no one really thought of how to solve it.\nAfter a lot of research, I founded a ",{"type":25,"tag":699,"props":11742,"children":11743},{},[11744],{"type":34,"value":11745},"vuex persisted state",{"type":34,"value":11747}," module, that is meant for vanilla Vue.js, but it isn't really optimized for Nuxt. The solution\nwas that whenever Nuxt detects a refresh, it assigns everything in the state to a predefined key, and then they set it into cookies. Hence, after the refresh is done,\nit will be able to take everything out of cookies and then reassign them to the state. This seems to work perfectly fine, but unfortunately after hours of debugging\nand research, I was not able to get the state to persist. Although I did not fix it, I still found the learning experience to be very valuable and I aim to develop a solution\nthat works seamlessly with Nuxt.",{"type":25,"tag":62,"props":11749,"children":11751},{"id":11750},"the-show-goes-on",[11752,11756],{"type":25,"tag":67,"props":11753,"children":11755},{"href":11754,"ariaHidden":70,"tabIndex":71},"#the-show-goes-on",[],{"type":34,"value":11757},"The Show Goes On",{"type":25,"tag":30,"props":11759,"children":11760},{},[11761],{"type":34,"value":11762},"Although I wasn't able to persist the state in my refreshes, the store still works as expected.\nHence, my problem with state refreshes did not discourage me and I continued on with development. In addition to the store, I decided to\nadd in middleware so that unauthorized users wouldn't be able to access certain routes (which I will be talking more about later)",{"type":25,"tag":62,"props":11764,"children":11766},{"id":11765},"graphql",[11767,11771],{"type":25,"tag":67,"props":11768,"children":11770},{"href":11769,"ariaHidden":70,"tabIndex":71},"#graphql",[],{"type":34,"value":11772},"GraphQL",{"type":25,"tag":30,"props":11774,"children":11775},{},[11776],{"type":34,"value":11777},"Normal people would send an HTTP request to the endpoint. However,\nI used a module (not just for the sake of it) but since it's specifically catered to\nsending GraphQL queries, it was really easy for me to send queries.",{"type":25,"tag":62,"props":11779,"children":11781},{"id":11780},"design",[11782,11786],{"type":25,"tag":67,"props":11783,"children":11785},{"href":11784,"ariaHidden":70,"tabIndex":71},"#design",[],{"type":34,"value":11787},"Design",{"type":25,"tag":30,"props":11789,"children":11790},{},[11791,11793,11798],{"type":34,"value":11792},"I didn't want to spend my ",{"type":25,"tag":4778,"props":11794,"children":11795},{},[11796],{"type":34,"value":11797},"WHOLE",{"type":34,"value":11799}," weekend designing UX and UI, so I used Vuetify, a\nmaterial Vue framework to make my development easier.",{"type":25,"tag":62,"props":11801,"children":11803},{"id":11802},"structure",[11804,11808],{"type":25,"tag":67,"props":11805,"children":11807},{"href":11806,"ariaHidden":70,"tabIndex":71},"#structure",[],{"type":34,"value":11809},"Structure",{"type":25,"tag":30,"props":11811,"children":11812},{},[11813],{"type":34,"value":11814},"I decided that I will make 4 pages:",{"type":25,"tag":1129,"props":11816,"children":11817},{},[11818,11829,11834,11847],{"type":25,"tag":1099,"props":11819,"children":11820},{},[11821,11827],{"type":25,"tag":67,"props":11822,"children":11824},{"href":11624,"rel":11823},[4727],[11825],{"type":34,"value":11826},"Home",{"type":34,"value":11828},"\nThis is the main dashboard that lists all the events and their info.",{"type":25,"tag":1099,"props":11830,"children":11831},{},[11832],{"type":34,"value":11833},"Schedule\nThinking from a client's point of view, I would like an overview of all the events. Hence, I included a calendar where users will be able to view all the events, all in one piece.",{"type":25,"tag":1099,"props":11835,"children":11836},{},[11837,11839,11845],{"type":34,"value":11838},"Profile\nThis was not required, but I found it impertinent to at least somewhat connect the frontend and backend part of the challenge.\nUsing my ",{"type":25,"tag":67,"props":11840,"children":11842},{"href":11246,"rel":11841},[4727],[11843],{"type":34,"value":11844},"backend",{"type":34,"value":11846}," api, I was able to pull a certain user's information to be displayed in this page.",{"type":25,"tag":1099,"props":11848,"children":11849},{},[11850,11857],{"type":25,"tag":67,"props":11851,"children":11854},{"href":11852,"rel":11853},"https:\u002F\u002Fhtnweb.zhehaizhang.com\u002FLogin",[4727],[11855],{"type":34,"value":11856},"Login",{"type":34,"value":11858},"\nThe user can log in and see private events.",{"type":25,"tag":30,"props":11860,"children":11861},{},[11862],{"type":34,"value":11863},"I also created a navigation bar on the left so it is easy for users to navigate throughout the app,\nas well as a light\u002Fdark mode toggle.",{"type":25,"tag":62,"props":11865,"children":11867},{"id":11866},"notable-features-im-proud-of",[11868,11872],{"type":25,"tag":67,"props":11869,"children":11871},{"href":11870,"ariaHidden":70,"tabIndex":71},"#notable-features-im-proud-of",[],{"type":34,"value":11873},"Notable Features I'm Proud Of",{"type":25,"tag":1095,"props":11875,"children":11876},{},[11877,11882,11887,11892,11897],{"type":25,"tag":1099,"props":11878,"children":11879},{},[11880],{"type":34,"value":11881},"Search: I'm able to easily search for a specific event.",{"type":25,"tag":1099,"props":11883,"children":11884},{},[11885],{"type":34,"value":11886},"Related Events: Clicking on the related events will allow you to view those events, allowing for easy navigation.",{"type":25,"tag":1099,"props":11888,"children":11889},{},[11890],{"type":34,"value":11891},"SEO: I used the twitter card meta tags, as well as generated a sitemap for good SEO.",{"type":25,"tag":1099,"props":11893,"children":11894},{},[11895],{"type":34,"value":11896},"PWA: PWA is easily integrated without any extra work.",{"type":25,"tag":1099,"props":11898,"children":11899},{},[11900],{"type":34,"value":11901},"Adaptable: The way I structured my code allows for an easy addition of extra event types, events, and additional pages.",{"type":25,"tag":62,"props":11903,"children":11905},{"id":11904},"future-improvements",[11906,11910],{"type":25,"tag":67,"props":11907,"children":11909},{"href":11908,"ariaHidden":70,"tabIndex":71},"#future-improvements",[],{"type":34,"value":11911},"Future Improvements",{"type":25,"tag":1129,"props":11913,"children":11914},{},[11915,11920,11925,11930],{"type":25,"tag":1099,"props":11916,"children":11917},{},[11918],{"type":34,"value":11919},"Due to the limited time we were given, I wasn't able to completely solve the persisted state problem.\nI was considering in starting an issue in the Github so that I would get the resources in order to solve the problem, but\ngiven the amount of time, I wasn't able to.",{"type":25,"tag":1099,"props":11921,"children":11922},{},[11923],{"type":34,"value":11924},"I would also aim to refine my schedule page (it should only display the months in which there are events), as well as be clickable\nso that users can also view events on the schedule page.",{"type":25,"tag":1099,"props":11926,"children":11927},{},[11928],{"type":34,"value":11929},"I would add better mobile breakpoints so its completely flawless on mobile.",{"type":25,"tag":1099,"props":11931,"children":11932},{},[11933],{"type":34,"value":11934},"Fully connect the frontend to the backend - I've already started the first step (profile), and using graphql api, everything will come naturally.",{"type":25,"tag":8270,"props":11936,"children":11938},{"id":11937},"conclusion",[11939,11943],{"type":25,"tag":67,"props":11940,"children":11942},{"href":11941,"ariaHidden":70,"tabIndex":71},"#conclusion",[],{"type":34,"value":11944},"Conclusion",{"type":25,"tag":30,"props":11946,"children":11947},{},[11948],{"type":34,"value":11949},"Over these past few days, I had a lot of fun creating every part of this app. Thank you for creating this challenge!\n-Sincerely,",{"type":25,"tag":30,"props":11951,"children":11952},{},[11953],{"type":34,"value":14},{"title":8,"searchDepth":458,"depth":458,"links":11955},[11956],{"id":11609,"depth":458,"text":11616,"children":11957},[11958,11959,11960,11961,11962,11963,11964,11965,11966,11967],{"id":11640,"depth":461,"text":11647},{"id":11684,"depth":461,"text":11691},{"id":11699,"depth":461,"text":11706},{"id":11714,"depth":461,"text":11721},{"id":11750,"depth":461,"text":11757},{"id":11765,"depth":461,"text":11772},{"id":11780,"depth":461,"text":11787},{"id":11802,"depth":461,"text":11809},{"id":11866,"depth":461,"text":11873},{"id":11904,"depth":461,"text":11911},"content:articles:hack-the-north-frontend.md","articles\u002Fhack-the-north-frontend.md","articles\u002Fhack-the-north-frontend",{"_path":11972,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":11973,"description":11974,"img":11975,"alt":11976,"author":11977,"tags":11978,"date":11981,"body":11982,"_type":475,"_id":12210,"_source":477,"_file":12211,"_stem":12212,"_extension":480},"\u002Farticles\u002Fmy-first-blog-post","My First Blog Post","Intro to my website and blog using cool stuff!","..\u002F..\u002Fblog\u002Fexplore\u002Ffirst.webp","my first blog post",{"name":14,"img":10818},[11979,11980],"firstblog","start","2021-02-15",{"type":22,"children":11983,"toc":12205},[11984,11994,11999,12009,12019,12056,12063,12119,12158,12168,12173,12183,12187,12197,12201],{"type":25,"tag":506,"props":11985,"children":11987},{"id":11986},"welcome-to-my-blog",[11988,11992],{"type":25,"tag":67,"props":11989,"children":11991},{"href":11990,"ariaHidden":70,"tabIndex":71},"#welcome-to-my-blog",[],{"type":34,"value":11993},"Welcome to My Blog!",{"type":25,"tag":30,"props":11995,"children":11996},{},[11997],{"type":34,"value":11998},"Hey guys, this is my first blog post of 2021. I hope to update this weekly (or maybe even daily) as long as interesting things happen in my life. I will most likely post a lot initially so it looks presentable, and then slow it down afterwards.",{"type":25,"tag":30,"props":12000,"children":12001},{},[12002,12007],{"type":25,"tag":699,"props":12003,"children":12004},{},[12005],{"type":34,"value":12006},"On another note",{"type":34,"value":12008},", I've never really used markdown on a regular basis so this is the perfect opportunity to practice:",{"type":25,"tag":8270,"props":12010,"children":12012},{"id":12011},"cool-features-i-will-be-using-in-my-blog-posts",[12013,12017],{"type":25,"tag":67,"props":12014,"children":12016},{"href":12015,"ariaHidden":70,"tabIndex":71},"#cool-features-i-will-be-using-in-my-blog-posts",[],{"type":34,"value":12018},"Cool features I will be using in my blog posts:",{"type":25,"tag":1095,"props":12020,"children":12021},{},[12022,12030,12038,12046],{"type":25,"tag":1099,"props":12023,"children":12024},{},[12025],{"type":25,"tag":699,"props":12026,"children":12027},{},[12028],{"type":34,"value":12029},"Bolded stuff",{"type":25,"tag":1099,"props":12031,"children":12032},{},[12033],{"type":25,"tag":4778,"props":12034,"children":12035},{},[12036],{"type":34,"value":12037},"Italicized stuff",{"type":25,"tag":1099,"props":12039,"children":12040},{},[12041],{"type":25,"tag":522,"props":12042,"children":12044},{"className":12043},[],[12045],{"type":34,"value":522},{"type":25,"tag":1099,"props":12047,"children":12048},{},[12049],{"type":25,"tag":67,"props":12050,"children":12053},{"href":12051,"rel":12052},"https:\u002F\u002Fzhehaizhang.com\u002Fblog",[4727],[12054],{"type":34,"value":12055},"A link",{"type":25,"tag":30,"props":12057,"children":12058},{},[12059],{"type":25,"tag":4786,"props":12060,"children":12062},{"src":12061},"..\u002F..\u002Fblog\u002Fexplore\u002Fme.webp",[],{"type":25,"tag":531,"props":12064,"children":12066},{"className":3125,"code":12065,"language":2375,"meta":8,"style":8},"export default {\n  nuxt: \"is the best\"\n}\n",[12067],{"type":25,"tag":522,"props":12068,"children":12069},{"__ignoreMap":8},[12070,12087,12112],{"type":25,"tag":541,"props":12071,"children":12072},{"class":543,"line":544},[12073,12078,12083],{"type":25,"tag":541,"props":12074,"children":12075},{"style":1683},[12076],{"type":34,"value":12077},"export",{"type":25,"tag":541,"props":12079,"children":12080},{"style":1683},[12081],{"type":34,"value":12082}," default",{"type":25,"tag":541,"props":12084,"children":12085},{"style":560},[12086],{"type":34,"value":2023},{"type":25,"tag":541,"props":12088,"children":12089},{"class":543,"line":458},[12090,12095,12099,12103,12108],{"type":25,"tag":541,"props":12091,"children":12092},{"style":1378},[12093],{"type":34,"value":12094},"  nuxt",{"type":25,"tag":541,"props":12096,"children":12097},{"style":560},[12098],{"type":34,"value":1386},{"type":25,"tag":541,"props":12100,"children":12101},{"style":560},[12102],{"type":34,"value":906},{"type":25,"tag":541,"props":12104,"children":12105},{"style":554},[12106],{"type":34,"value":12107},"is the best",{"type":25,"tag":541,"props":12109,"children":12110},{"style":560},[12111],{"type":34,"value":916},{"type":25,"tag":541,"props":12113,"children":12114},{"class":543,"line":461},[12115],{"type":25,"tag":541,"props":12116,"children":12117},{"style":560},[12118],{"type":34,"value":574},{"type":25,"tag":531,"props":12120,"children":12122},{"className":2816,"code":12121,"language":2818,"meta":8,"style":8},"\u003Cp>code styling is easy\u003C\u002Fp>\n",[12123],{"type":25,"tag":522,"props":12124,"children":12125},{"__ignoreMap":8},[12126],{"type":25,"tag":541,"props":12127,"children":12128},{"class":543,"line":544},[12129,12133,12137,12141,12146,12150,12154],{"type":25,"tag":541,"props":12130,"children":12131},{"style":560},[12132],{"type":34,"value":2853},{"type":25,"tag":541,"props":12134,"children":12135},{"style":1378},[12136],{"type":34,"value":30},{"type":25,"tag":541,"props":12138,"children":12139},{"style":560},[12140],{"type":34,"value":3018},{"type":25,"tag":541,"props":12142,"children":12143},{"style":566},[12144],{"type":34,"value":12145},"code styling is easy",{"type":25,"tag":541,"props":12147,"children":12148},{"style":560},[12149],{"type":34,"value":3028},{"type":25,"tag":541,"props":12151,"children":12152},{"style":1378},[12153],{"type":34,"value":30},{"type":25,"tag":541,"props":12155,"children":12156},{"style":560},[12157],{"type":34,"value":2845},{"type":25,"tag":8270,"props":12159,"children":12161},{"id":12160},"this-is-a-sub-heading",[12162,12166],{"type":25,"tag":67,"props":12163,"children":12165},{"href":12164,"ariaHidden":70,"tabIndex":71},"#this-is-a-sub-heading",[],{"type":34,"value":12167},"This is a sub heading",{"type":25,"tag":30,"props":12169,"children":12170},{},[12171],{"type":34,"value":12172},"This is some more info",{"type":25,"tag":8270,"props":12174,"children":12176},{"id":12175},"this-is-another-sub-heading",[12177,12181],{"type":25,"tag":67,"props":12178,"children":12180},{"href":12179,"ariaHidden":70,"tabIndex":71},"#this-is-another-sub-heading",[],{"type":34,"value":12182},"This is another sub heading",{"type":25,"tag":30,"props":12184,"children":12185},{},[12186],{"type":34,"value":12172},{"type":25,"tag":62,"props":12188,"children":12190},{"id":12189},"this-is-another-heading",[12191,12195],{"type":25,"tag":67,"props":12192,"children":12194},{"href":12193,"ariaHidden":70,"tabIndex":71},"#this-is-another-heading",[],{"type":34,"value":12196},"This is another heading",{"type":25,"tag":30,"props":12198,"children":12199},{},[12200],{"type":34,"value":12172},{"type":25,"tag":26,"props":12202,"children":12203},{},[12204],{"type":34,"value":1046},{"title":8,"searchDepth":458,"depth":458,"links":12206},[12207],{"id":11986,"depth":458,"text":11993,"children":12208},[12209],{"id":12189,"depth":461,"text":12196},"content:articles:my-first-blog-post.md","articles\u002Fmy-first-blog-post.md","articles\u002Fmy-first-blog-post",1782968733708]