[{"data":1,"prerenderedAt":759},["ShallowReactive",2],{"navigation":3,"/blog/06-ember-vue-typescript":50,"/blog/06-ember-vue-typescript-surround":754},[4],{"title":5,"path":6,"stem":7,"children":8,"page":49},"Blog","/blog","blog",[9,13,17,21,25,29,33,37,41,45],{"title":10,"path":11,"stem":12},"Finally","/blog/01-welcome-first-post","blog/01-welcome-first-post",{"title":14,"path":15,"stem":16},"I Love Flutter and Dart!","/blog/02-flutter-and-dart","blog/02-flutter-and-dart",{"title":18,"path":19,"stem":20},"First Flutter App","/blog/03-first-flutter-app","blog/03-first-flutter-app",{"title":22,"path":23,"stem":24},"A Project Idea - Working with GPX Data","/blog/04-gpx-project-idea","blog/04-gpx-project-idea",{"title":26,"path":27,"stem":28},"Update on GPX Project","/blog/05-gpx-electron-app","blog/05-gpx-electron-app",{"title":30,"path":31,"stem":32},"Ember, Electron, Vue, and TypeScript!","/blog/06-ember-vue-typescript","blog/06-ember-vue-typescript",{"title":34,"path":35,"stem":36},"Building a Date Picker","/blog/07-building-datepicker","blog/07-building-datepicker",{"title":38,"path":39,"stem":40},"A quick update","/blog/08-quick-update","blog/08-quick-update",{"title":42,"path":43,"stem":44},"Claude Code and More","/blog/09-claude-code-and-more","blog/09-claude-code-and-more",{"title":46,"path":47,"stem":48},"Claude Code and Bringing My Science Background and Programming Skills Together","/blog/10-bringing-science-and-programming-together","blog/10-bringing-science-and-programming-together",false,{"id":51,"title":30,"body":52,"date":746,"description":747,"extension":748,"image":749,"meta":750,"minRead":155,"navigation":751,"path":31,"seo":752,"stem":32,"__hash__":753},"blog/blog/06-ember-vue-typescript.md",{"type":53,"value":54,"toc":738},"minimark",[55,60,64,68,85,89,104,109,112,115,724,727,731,734],[56,57,59],"h2",{"id":58},"new-job","New Job",[61,62,63],"p",{},"I started a new job in October. I am glad I took the leap, as it has been quite\na learning experience. However, I am not sure if this is the right long-term fit\nfor me.",[56,65,67],{"id":66},"ember-is-different","Ember is ..... different",[61,69,70,71,78,79,84],{},"In my new job, I am responsible for upgrading a large cross-platform desktop app\nmade with ",[72,73,77],"a",{"href":74,"rel":75},"https://emberjs.com",[76],"nofollow","Ember"," and ",[72,80,83],{"href":81,"rel":82},"https://www.electron.org",[76],"Electron",".\nThe app is over 10 years old, and has a lot of long since deprecated code. While\nI am officially upgrading the app from version 3.x to version 4.1, it is much\nmore like upgrading form 2.x to 4.1. To top things off, apparently one of the\nprevious devs had a fear of ES6.",[56,86,88],{"id":87},"keeping-my-vue-skills-sharp-and-picking-up-typescript","Keeping my Vue skills sharp, and picking up TypeScript",[61,90,91,92,97,98,103],{},"I love working with Vue, and I hope to eventually end up in a position where I'm\nworking with it every day for my job. I don't want to lose the skills I have in\nVue, so I am rebuilding my GPX app with Vue 3 and Electron. I also thought it\nwould be a good chance to really give\n",[72,93,96],{"href":94,"rel":95},"https://www.typescriptlang.org/",[76],"TypeScript"," a go. After working with Dart, I\nreally started to appreciate statically typed code. I've done a bit of\nTypeScript work in the past, but not much. Since I already have the logic worked\nout for the GPX app, it presented an excellent opportunity to use TypeScript. I\nalso added ",[72,99,102],{"href":100,"rel":101},"https://getbootstrap.com/",[76],"Bootstrap"," for styling.",[105,106,108],"h3",{"id":107},"getting-started","Getting started",[61,110,111],{},"I haven't done much on the app so far. I'm just getting used to TypeScript.",[61,113,114],{},"One challenge I have tackled, however, is building an interface for the large\nJSON object that is imported:",[116,117,122],"pre",{"className":118,"code":119,"language":120,"meta":121,"style":121},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// types/index.ts\nexport interface RootObject {\n    gpx: {\n        $: {\n            creator: string;\n            version: string;\n            xmlns: string;\n            'xmlns:gpxtpx': string;\n            'xmlns:gpxx': string;\n            'xmlns:xsi': string;\n            'xsi:schemaLocation': string;\n        };\n        metadata: [\n            {\n                name: string[];\n                copyright: {\n                    $: {\n                        author: string;\n                    };\n                    year: string[];\n                    license: string[];\n                };\n                link: {\n                    $: {\n                        href: string;\n                    };\n                    text: string[];\n                };\n                time: Date[];\n            },\n        ];\n        trk: {\n            name: string[];\n            link: {\n                $: {\n                    href: string;\n                };\n                text: string[];\n            };\n            trkseg: {\n                trkpt: {\n                    $: {\n                        lat: string;\n                        lon: string;\n                    };\n                    ele: string[];\n                    time: Date[];\n                    extensions: {\n                        'gpxtpx:TrackPointExtension': {\n                            'gpxtpx:hr': string[];\n                        };\n                    };\n                };\n            };\n        };\n    };\n}\n","ts","",[123,124,125,134,153,165,175,189,201,213,232,248,264,280,286,298,304,319,329,339,351,357,371,385,391,401,410,422,427,441,446,461,467,475,485,499,509,519,531,536,550,556,566,576,585,597,609,614,628,642,652,667,686,692,697,702,707,712,718],"code",{"__ignoreMap":121},[126,127,130],"span",{"class":128,"line":129},"line",1,[126,131,133],{"class":132},"sHwdD","// types/index.ts\n",[126,135,137,141,145,149],{"class":128,"line":136},2,[126,138,140],{"class":139},"s7zQu","export",[126,142,144],{"class":143},"spNyl"," interface",[126,146,148],{"class":147},"sBMFI"," RootObject",[126,150,152],{"class":151},"sMK4o"," {\n",[126,154,156,160,163],{"class":128,"line":155},3,[126,157,159],{"class":158},"swJcz","    gpx",[126,161,162],{"class":151},":",[126,164,152],{"class":151},[126,166,168,171,173],{"class":128,"line":167},4,[126,169,170],{"class":158},"        $",[126,172,162],{"class":151},[126,174,152],{"class":151},[126,176,178,181,183,186],{"class":128,"line":177},5,[126,179,180],{"class":158},"            creator",[126,182,162],{"class":151},[126,184,185],{"class":147}," string",[126,187,188],{"class":151},";\n",[126,190,192,195,197,199],{"class":128,"line":191},6,[126,193,194],{"class":158},"            version",[126,196,162],{"class":151},[126,198,185],{"class":147},[126,200,188],{"class":151},[126,202,204,207,209,211],{"class":128,"line":203},7,[126,205,206],{"class":158},"            xmlns",[126,208,162],{"class":151},[126,210,185],{"class":147},[126,212,188],{"class":151},[126,214,216,219,223,226,228,230],{"class":128,"line":215},8,[126,217,218],{"class":151},"            '",[126,220,222],{"class":221},"sfazB","xmlns:gpxtpx",[126,224,225],{"class":151},"'",[126,227,162],{"class":151},[126,229,185],{"class":147},[126,231,188],{"class":151},[126,233,235,237,240,242,244,246],{"class":128,"line":234},9,[126,236,218],{"class":151},[126,238,239],{"class":221},"xmlns:gpxx",[126,241,225],{"class":151},[126,243,162],{"class":151},[126,245,185],{"class":147},[126,247,188],{"class":151},[126,249,251,253,256,258,260,262],{"class":128,"line":250},10,[126,252,218],{"class":151},[126,254,255],{"class":221},"xmlns:xsi",[126,257,225],{"class":151},[126,259,162],{"class":151},[126,261,185],{"class":147},[126,263,188],{"class":151},[126,265,267,269,272,274,276,278],{"class":128,"line":266},11,[126,268,218],{"class":151},[126,270,271],{"class":221},"xsi:schemaLocation",[126,273,225],{"class":151},[126,275,162],{"class":151},[126,277,185],{"class":147},[126,279,188],{"class":151},[126,281,283],{"class":128,"line":282},12,[126,284,285],{"class":151},"        };\n",[126,287,289,292,294],{"class":128,"line":288},13,[126,290,291],{"class":158},"        metadata",[126,293,162],{"class":151},[126,295,297],{"class":296},"sTEyZ"," [\n",[126,299,301],{"class":128,"line":300},14,[126,302,303],{"class":151},"            {\n",[126,305,307,310,312,314,317],{"class":128,"line":306},15,[126,308,309],{"class":158},"                name",[126,311,162],{"class":151},[126,313,185],{"class":147},[126,315,316],{"class":296},"[]",[126,318,188],{"class":151},[126,320,322,325,327],{"class":128,"line":321},16,[126,323,324],{"class":158},"                copyright",[126,326,162],{"class":151},[126,328,152],{"class":151},[126,330,332,335,337],{"class":128,"line":331},17,[126,333,334],{"class":158},"                    $",[126,336,162],{"class":151},[126,338,152],{"class":151},[126,340,342,345,347,349],{"class":128,"line":341},18,[126,343,344],{"class":158},"                        author",[126,346,162],{"class":151},[126,348,185],{"class":147},[126,350,188],{"class":151},[126,352,354],{"class":128,"line":353},19,[126,355,356],{"class":151},"                    };\n",[126,358,360,363,365,367,369],{"class":128,"line":359},20,[126,361,362],{"class":158},"                    year",[126,364,162],{"class":151},[126,366,185],{"class":147},[126,368,316],{"class":296},[126,370,188],{"class":151},[126,372,374,377,379,381,383],{"class":128,"line":373},21,[126,375,376],{"class":158},"                    license",[126,378,162],{"class":151},[126,380,185],{"class":147},[126,382,316],{"class":296},[126,384,188],{"class":151},[126,386,388],{"class":128,"line":387},22,[126,389,390],{"class":151},"                };\n",[126,392,394,397,399],{"class":128,"line":393},23,[126,395,396],{"class":158},"                link",[126,398,162],{"class":151},[126,400,152],{"class":151},[126,402,404,406,408],{"class":128,"line":403},24,[126,405,334],{"class":158},[126,407,162],{"class":151},[126,409,152],{"class":151},[126,411,413,416,418,420],{"class":128,"line":412},25,[126,414,415],{"class":158},"                        href",[126,417,162],{"class":151},[126,419,185],{"class":147},[126,421,188],{"class":151},[126,423,425],{"class":128,"line":424},26,[126,426,356],{"class":151},[126,428,430,433,435,437,439],{"class":128,"line":429},27,[126,431,432],{"class":158},"                    text",[126,434,162],{"class":151},[126,436,185],{"class":147},[126,438,316],{"class":296},[126,440,188],{"class":151},[126,442,444],{"class":128,"line":443},28,[126,445,390],{"class":151},[126,447,449,452,454,457,459],{"class":128,"line":448},29,[126,450,451],{"class":158},"                time",[126,453,162],{"class":151},[126,455,456],{"class":147}," Date",[126,458,316],{"class":296},[126,460,188],{"class":151},[126,462,464],{"class":128,"line":463},30,[126,465,466],{"class":151},"            },\n",[126,468,470,473],{"class":128,"line":469},31,[126,471,472],{"class":296},"        ]",[126,474,188],{"class":151},[126,476,478,481,483],{"class":128,"line":477},32,[126,479,480],{"class":158},"        trk",[126,482,162],{"class":151},[126,484,152],{"class":151},[126,486,488,491,493,495,497],{"class":128,"line":487},33,[126,489,490],{"class":158},"            name",[126,492,162],{"class":151},[126,494,185],{"class":147},[126,496,316],{"class":296},[126,498,188],{"class":151},[126,500,502,505,507],{"class":128,"line":501},34,[126,503,504],{"class":158},"            link",[126,506,162],{"class":151},[126,508,152],{"class":151},[126,510,512,515,517],{"class":128,"line":511},35,[126,513,514],{"class":158},"                $",[126,516,162],{"class":151},[126,518,152],{"class":151},[126,520,522,525,527,529],{"class":128,"line":521},36,[126,523,524],{"class":158},"                    href",[126,526,162],{"class":151},[126,528,185],{"class":147},[126,530,188],{"class":151},[126,532,534],{"class":128,"line":533},37,[126,535,390],{"class":151},[126,537,539,542,544,546,548],{"class":128,"line":538},38,[126,540,541],{"class":158},"                text",[126,543,162],{"class":151},[126,545,185],{"class":147},[126,547,316],{"class":296},[126,549,188],{"class":151},[126,551,553],{"class":128,"line":552},39,[126,554,555],{"class":151},"            };\n",[126,557,559,562,564],{"class":128,"line":558},40,[126,560,561],{"class":158},"            trkseg",[126,563,162],{"class":151},[126,565,152],{"class":151},[126,567,569,572,574],{"class":128,"line":568},41,[126,570,571],{"class":158},"                trkpt",[126,573,162],{"class":151},[126,575,152],{"class":151},[126,577,579,581,583],{"class":128,"line":578},42,[126,580,334],{"class":158},[126,582,162],{"class":151},[126,584,152],{"class":151},[126,586,588,591,593,595],{"class":128,"line":587},43,[126,589,590],{"class":158},"                        lat",[126,592,162],{"class":151},[126,594,185],{"class":147},[126,596,188],{"class":151},[126,598,600,603,605,607],{"class":128,"line":599},44,[126,601,602],{"class":158},"                        lon",[126,604,162],{"class":151},[126,606,185],{"class":147},[126,608,188],{"class":151},[126,610,612],{"class":128,"line":611},45,[126,613,356],{"class":151},[126,615,617,620,622,624,626],{"class":128,"line":616},46,[126,618,619],{"class":158},"                    ele",[126,621,162],{"class":151},[126,623,185],{"class":147},[126,625,316],{"class":296},[126,627,188],{"class":151},[126,629,631,634,636,638,640],{"class":128,"line":630},47,[126,632,633],{"class":158},"                    time",[126,635,162],{"class":151},[126,637,456],{"class":147},[126,639,316],{"class":296},[126,641,188],{"class":151},[126,643,645,648,650],{"class":128,"line":644},48,[126,646,647],{"class":158},"                    extensions",[126,649,162],{"class":151},[126,651,152],{"class":151},[126,653,655,658,661,663,665],{"class":128,"line":654},49,[126,656,657],{"class":151},"                        '",[126,659,660],{"class":221},"gpxtpx:TrackPointExtension",[126,662,225],{"class":151},[126,664,162],{"class":151},[126,666,152],{"class":151},[126,668,670,673,676,678,680,682,684],{"class":128,"line":669},50,[126,671,672],{"class":151},"                            '",[126,674,675],{"class":221},"gpxtpx:hr",[126,677,225],{"class":151},[126,679,162],{"class":151},[126,681,185],{"class":147},[126,683,316],{"class":296},[126,685,188],{"class":151},[126,687,689],{"class":128,"line":688},51,[126,690,691],{"class":151},"                        };\n",[126,693,695],{"class":128,"line":694},52,[126,696,356],{"class":151},[126,698,700],{"class":128,"line":699},53,[126,701,390],{"class":151},[126,703,705],{"class":128,"line":704},54,[126,706,555],{"class":151},[126,708,710],{"class":128,"line":709},55,[126,711,285],{"class":151},[126,713,715],{"class":128,"line":714},56,[126,716,717],{"class":151},"    };\n",[126,719,721],{"class":128,"line":720},57,[126,722,723],{"class":151},"}\n",[61,725,726],{},"This took some work, but I really think it helped my understanding of\nTypeScript.",[56,728,730],{"id":729},"up-next","Up Next",[61,732,733],{},"I will keep at it with Ember. I'm trying to reserve judgement on it, but it is\ndifficult not to compare it to Vue. Vue just seems so much more intuitive. In\nthe meantime, I'll keep working on the GPX app in my spare time and improving my\nTypeScript skills.",[735,736,737],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":121,"searchDepth":136,"depth":136,"links":739},[740,741,742,745],{"id":58,"depth":136,"text":59},{"id":66,"depth":136,"text":67},{"id":87,"depth":136,"text":88,"children":743},[744],{"id":107,"depth":155,"text":108},{"id":729,"depth":136,"text":730},"2022-01-13T00:00:00.000Z","Learning Ember for work, rebuilding GPX app with Vue and TypeScript","md","https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=1631&auto=format&fit=crop",{},true,{"title":30,"description":747},"TbrlV5qLjd_brSKOoytgmK5V8tmF_Ny4FfKvPP6f5dU",[755,757],{"title":26,"path":27,"stem":28,"description":756,"children":-1},"Building an Electron App",{"title":34,"path":35,"stem":36,"description":758,"children":-1},"Continuing to work on my rebuild of the GPX app, I decided to build my own datepicker using Vue 3, Bootstrap 5, and TypeScript",1772990059429]