[{"data":1,"prerenderedAt":5821},["ShallowReactive",2],{"navigation":3,"blog-page":50,"blogs":61},[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":52,"body":53,"description":54,"extension":55,"links":56,"meta":57,"navigation":58,"path":6,"seo":59,"stem":7,"__hash__":60},"pages/blog.yml","Latest Articles",{"title":52,"description":54},"Some of my recent thoughts on design, development, and the tech industry.","yml",null,{},true,{"title":52,"description":54},"6J59snw_jGqoVqlEOH9klnsREEddTrr5viwslhC95ms",[62,260,332,394,3101,3735,5250,5616,5652,5738],{"id":63,"title":46,"body":64,"date":252,"description":253,"extension":254,"image":255,"meta":256,"minRead":257,"navigation":58,"path":47,"seo":258,"stem":48,"__hash__":259},"blog/blog/10-bringing-science-and-programming-together.md",{"type":65,"value":66,"toc":239},"minimark",[67,72,76,79,84,89,92,95,99,102,104,108,114,117,122,125,127,131,134,136,140,143,145,149,153,156,158,162,165,167,171,174,187,190,192,196,199,202,207,210,220,223,231,234,236],[68,69,71],"h2",{"id":70},"using-claude-code-to-create-my-own-personal-tutorials","Using Claude Code to Create My Own Personal Tutorials",[73,74,75],"p",{},"I've really settled into a routine with Claude Code at work. The increased pace of development is phenomenal.\nI can't believe how much my day-to-day work has changed. I was previously very skeptical of the \"10X Developer\"\nconcept, but I have to admit I am a total convert.",[73,77,78],{},"It has significantly changed what my typical workday looks like. Here are some of the ways I am using it",[80,81,83],"h3",{"id":82},"at-work","At Work:",[85,86,88],"h4",{"id":87},"faster-development-most-of-my-vue-code-is-now-written-by-claude","Faster Development: Most of my Vue code is now written by Claude.",[73,90,91],{},"There are two primary projects that I work on. They use similar tech stacks (Vue, PrimeVue, C#), and I am the lead front\nend developer on both. Since I have years of experience with Vue, I can focus on the more complex aspects of the projects.\nI have used Claude enough that I can prompt it to write components and edit large amounts of code. I always review the code\nmyself, and I still find small issues here and there. But the majority of the code is spot-on. I am especially comfortable\ndoing this with Vue since I am very experienced with it.",[93,94],"hr",{},[85,96,98],{"id":97},"working-throughout-the-stack-it-allows-me-to-do-more-c-development-and-occasional-sql-updates","Working throughout the stack: It allows me to do more C# development and occasional SQL updates.",[73,100,101],{},"I have some C# experience, but I don't use it that often as we have C# engineers on both teams. However, with Claude I am\nmuch more comfortable making changes here and there. With our setup, Claude has access to the stored procedures and therefore\nhas an understanding of the full stack. Often the issue is simply something missing in the backend that is already provided\nby the stored procedure. Claude allows me to quickly fix these issues. I always review the code myself and then make sure\nour C# engineer reviews it too, but it is a huge time saver and avoids a lot of back-and-forth that would otherwise be required.",[93,103],{},[85,105,107],{"id":106},"test-development-with-vitest-and-playwright-this-is-a-game-changer","Test development with Vitest and Playwright: This is a game-changer!",[73,109,110],{},[111,112,113],"em",{},"Vitest",[73,115,116],{},"I started with Vitest to write unit tests for my Vue components. I have written a bit of unit testing before, and Vitest\nsyntax is very similar to Jest and incredibly easy to learn. Claude is not only able to write unit tests efficiently, but\nClaude's access to the entire codebase means it has an understanding of the entire stack. Claude writes tests for\nedge cases I would not have thought of, or at least would not have taken the time to build if writing them myself.",[73,118,119],{},[111,120,121],{},"Playwright",[73,123,124],{},"I had not used Playwright for end-to-end testing before. I had primarily used Selenium for this. Playwright is a great\ntool with an intuitive API. Claude made setup and configuration easy. One project already had a list of ~500 test descriptions\nthat had previously been done mostly manually, and with a few written in Selenium. I spent a couple of weeks with Claude and was\nable to replace all ~160 Selenium tests and add ~100 new tests! The best part is that I have a very high degree of confidence\nin the tests Claude wrote. This didn't happen by accident. I assigned Claude a group of tests to write and provided strict\nrules such as \"The test is the standard. Do not modify test requirements to make it pass\", among other things. I would\nallow Claude to write the tests, run them, fix, and repeat until they were all passing (often while I was working on something else!).\nOnce complete, I would watch each test run in the Playwright UI and review the test code. If anything was wrong, I would\nprovide feedback to Claude and iterate. Some tests took a lot of back-and-forth with Claude, while others were perfect on\nthe first try. The process not only saved me time, it also revealed several bugs in my code.",[93,126],{},[85,128,130],{"id":129},"cleaner-code-keeping-the-code-clean-and-consistent","Cleaner Code: Keeping the code clean and consistent",[73,132,133],{},"One issue I used to deal with, particularly in a rapidly growing project, is that the code is not always consistent.\nInevitably, I would find things that I could have done better, discover a new way to do something, or even a minor version\nupdate in Vue or css provides a new way to do something. The issue before is the time needed to update all of the areas\nin the app that used the 'old way'. Claude makes this process incredibly easy - and is very accurate at doing it. This has\nmade our code much more consistent and easier to maintain.",[93,135],{},[85,137,139],{"id":138},"design-importing-figma-designs-is-fast-and-easy","Design: Importing Figma designs is fast and easy",[73,141,142],{},"We have a great designer on the team, and she uses Figma for all of our designs. Fortunately, she is also very interested\nin incorporating Claude into her workflow. Using the Figma plugin, she can export designs to me that I can integrate into\nthe app. Recently she made a new set of designs for buttons, pills, and other elements. Claude was able to quickly import\nthese designs and make the necessary changes. I think we have only touched the surface on what we can do in this segment\nof the workflow and I'm looking forward to more.",[93,144],{},[80,146,148],{"id":147},"at-home","At Home:",[85,150,152],{"id":151},"brainstorming-generating-ideas-for-personal-projects","Brainstorming: Generating ideas for personal projects",[73,154,155],{},"Using the regular Claude app, I have been able to explore ideas for personal projects. Since I can provide Claude with\nmy educational and work background, areas of expertise, and interests, I can get ideas specifically tailored to my needs.\nNow I have a long list of ideas that I can work on!",[93,157],{},[85,159,161],{"id":160},"learning-new-languages-improving-my-python-skills-dramatically","Learning New Languages: Improving my Python skills dramatically",[73,163,164],{},"I have used Python here and there over the years, but I have never been at a point where I would feel comfortable calling\nmyself a Python programmer. Claude has been a great resource for me to learn Python and improve my skills. I have done this by\ncreating a series of tutorials that I have been working on.",[93,166],{},[85,168,170],{"id":169},"building-my-own-projects-creating-custom-tutorials-to-build-the-apps-i-need","Building My Own Projects: Creating custom tutorials to build the apps I need",[73,172,173],{},"After planning out the full stack of an app I want to build, I use Claude to create a Claude Code prompt. This prompt tells\nClaude what I want to build, and to create a step-by-step tutorial for me to follow. My instructions to Claude are very\nspecific:",[175,176,177,181,184],"ul",{},[178,179,180],"li",{},"Break the project down into a series of small steps",[178,182,183],{},"Provide a description of a given step, but do not provide code. Highlight any 'gotchas' that I may need to be aware of,\nand provide tips and links to documentation as necessary",[178,185,186],{},"When I finish a step, review my code and provide feedback",[73,188,189],{},"Using this process, I built a wonderful personal app that I use every day. It is a desktop app built with Tauri, FastAPI,\nand Vue. It has a task list with calendar, including repeating tasks. It has a section for tracking running, including importing\n.gpx files and providing statistics. It has a workout section and tracker. This allows me to create exercises, build workouts\nbased on those exercises, and track my progress. Lastly, it has a notes/outliner section that allows me to write collapsible\noutlines similar to Workflowy. I may even make this available for download as a desktop app at some point.",[93,191],{},[68,193,195],{"id":194},"bringing-my-science-background-and-programming-skills-together","Bringing My Science Background and Programming Skills Together",[73,197,198],{},"Here is the part I am really excited about. I've been so focused on growing my programming skills since moving to programming\nfull-time in 2018, I haven't had the time to really focus on my science background. Now I am finally getting around to\nbringing these two together. This is one reason I have been focused on building my Python skills. I already have solid\nfront-end skills, and Python is a great addition because it both allows me to build APIs and it is used for data science.\nUsing Claude Code, I can create tutorials that will help me learn Python and build my own projects. Rather than simply \"vibe-coding\",\nI can fully understand the full stack of the project.",[73,200,201],{},"I have two projects completely planned out that I will be working on in the coming months. I will be posting about them here\nas they come to life. In the meantime, here is some basic info the projects:",[73,203,204],{},[111,205,206],{},"New Zealand Focus",[73,208,209],{},"I have been fascinated with the wildlife and conservation of New Zealand for years. When I started coming up with project\nideas, I thought why not build something with a NZ focus? These projects allow me to combine my background in science and\nprogramming to create something that is both useful and fun.",[80,211,213],{"id":212},"kaitiakitrack",[214,215,219],"a",{"href":216,"rel":217},"https://kaitiakitrack.co.nz/",[218],"nofollow","KaitiakiTrack",[73,221,222],{},"A web platform for New Zealand community conservation groups to coordinate volunteers, log species observations and planting\nactivities, and track their restoration impact over time. Built for the non-technical volunteers as an alternative to\nmanaging everything through spreadsheets and email chains.",[80,224,226],{"id":225},"paddockiq",[214,227,230],{"href":228,"rel":229},"https://paddockiq.co.nz/",[218],"PaddockIQ",[73,232,233],{},"A pasture and soil health monitoring platform that ingests real-time sensor data from IoT hardware, performs time-series\nanalysis on soil moisture and temperature trends, and surfaces agronomic insights through an interactive dashboard. Built on\na Raspberry Pi sensor layer posting to a FastAPI backend, with a Vue frontend for visualization.",[93,235],{},[73,237,238],{},"Well that may be my longest post yet! I can't wait to post more as the projects come to life.",{"title":240,"searchDepth":241,"depth":241,"links":242},"",2,[243,248],{"id":70,"depth":241,"text":71,"children":244},[245,247],{"id":82,"depth":246,"text":83},3,{"id":147,"depth":246,"text":148},{"id":194,"depth":241,"text":195,"children":249},[250,251],{"id":212,"depth":246,"text":219},{"id":225,"depth":246,"text":230},"2026-03-08T00:00:00.000Z","Building projects that will help unite my science and programming backgrounds","md","/blog/10/tree.png",{},5,{"title":46,"description":253},"K1nd5I2ZkJQ-fLMg90HlbP5ulDKJN7WlK5ggNqRJl94",{"id":261,"title":42,"body":262,"date":326,"description":327,"extension":254,"image":328,"meta":329,"minRead":241,"navigation":58,"path":43,"seo":330,"stem":44,"__hash__":331},"blog/blog/09-claude-code-and-more.md",{"type":65,"value":263,"toc":320},[264,268,277,284,287,290,305,313,317],[68,265,267],{"id":266},"status-update","Status Update",[73,269,270,271,276],{},"I have been at Cadre5 for 3 1/2 years now. In addition to the three projects I\nhad been working on, I started on a new project in late 2024. I've been working\nalmost entirely on it since. The front end includes Vue, of course, but rather\nthan Quasar, we are using ",[214,272,275],{"href":273,"rel":274},"https://primevue.org/",[218],"PrimeVue",". I must say, I am a\nbig fan! This is also the first project I've used Tailwind on. Now I see why it\nis so popular. The combination of PrimeVue and Tailwind makes for a perfect\ncombination of customization and the ease of using a framework.",[68,278,280,281],{"id":279},"claude-code-and-rebuilding-furchesdev","Claude Code and Rebuilding ",[111,282,283],{},"furches.dev",[73,285,286],{},"We are beginning to use Claude Code in some projects, so I have been spending\nsome time learning it. I thought a perfect opportunity would be to rebuild this\nsite!",[73,288,289],{},"I decided to stay with Nuxt for several reasons:",[291,292,293,296,299,302],"ol",{},[178,294,295],{},"I enjoy working with it!",[178,297,298],{},"I get to use Vue every day at work. The only time I've used Nuxt has been on\npersonal projects, such as this site.",[178,300,301],{},"Nuxt Content Module is wonderful! I love writing my posts in Markdown, as\nwell as the ease of updating my blog.",[178,303,304],{},"I wanted to try out NuxtUI.",[73,306,307,308,312],{},"While I realize I am only beginning to learn what Claude Code can do, it was\npretty impressive for my small project. Nuxt UI has lots of great templates\n(",[214,309,310],{"href":310,"rel":311},"https://ui.nuxt.com/templates",[218],"). I chose the Portfolio template and got it up\nand running. Next, I set up Claude Code. My first command was to simply see if\nClaude could bring in all of my information and blog posts from my old app. It\ndid an incredible job! After that, all I needed to do was a little of my own\ncustomization, as well as removing some sections that weren't needed. I probably\nspent no more than three hours on the entire thing!",[68,314,316],{"id":315},"up-next","Up Next",[73,318,319],{},"Now that I've gotten a chance to use Claude Code, I'm super excited to dig deeper. I didn't even use any customization, so I'm really looking forward to seeing just how powerful of a programming partner Claude can be.",{"title":240,"searchDepth":241,"depth":241,"links":321},[322,323,325],{"id":266,"depth":241,"text":267},{"id":279,"depth":241,"text":324},"Claude Code and Rebuilding furches.dev",{"id":315,"depth":241,"text":316},"2025-10-17T00:00:00.000Z","Staying very busy!","/blog/9/claude2.png",{},{"title":42,"description":327},"jq8DPXhyii_2NfLb-9zp5_L6zUGNsQDLUQ0URXKa3_Y",{"id":333,"title":38,"body":334,"date":388,"description":389,"extension":254,"image":390,"meta":391,"minRead":241,"navigation":58,"path":39,"seo":392,"stem":40,"__hash__":393},"blog/blog/08-quick-update.md",{"type":65,"value":335,"toc":378},[336,340,343,347,350,354,357,361,364,368,371,375],[68,337,339],{"id":338},"a-lot-has-changed","A Lot has Changed",[73,341,342],{},"Shortly after my last post, I started a new job with the company I had been\neyeing since the day I switched careers. It has not disappointed! I am working\nwith great people and learning a lot. I can't share any details about the work,\nbut I can share some of the skills that I have been working on.",[80,344,346],{"id":345},"leveling-up-my-css","Leveling Up My CSS",[73,348,349],{},"The first several months I worked on upgrading an existing app. It was built in\nAngularJS and used plain CSS throughout the app. Creating complex designs in\nplain CSS (and eventually SCSS) was a challenge that I enjoyed. It was nice to\ncreate designs that, only a few months earlier, I would have thought were\nimpossible for me.",[80,351,353],{"id":352},"d3","D3",[73,355,356],{},"The app was heavy in data visualization, so I had the opportunity to learn\nD3.js. I only had very basic experience with it previously, but now I feel like\nmy skills are pretty solid, especially when combining it with Vue.",[80,358,360],{"id":359},"project-management","Project Management",[73,362,363],{},"I have been the Technical Lead on three projects now. Learning to manage\npriorities, provide timelines, and meeting with clients has been a great\nexperience.",[68,365,367],{"id":366},"personal-projects","Personal Projects",[73,369,370],{},"I haven't had as much time for personal projects, but I did (finally) manage to\nupgrade this site with the latest Nuxt and Vue. I also threw in Quasar, since I\nhave enjoyed working with it so much.",[80,372,374],{"id":373},"go","Go",[73,376,377],{},"I have been learning Go in my spare time. I have a couple of small projects that\nI will eventually share on here. I am working on rewriting my GPX app in Go.\nI've also been working with serverless functions, and may combine those here to\nshow off my work.",{"title":240,"searchDepth":241,"depth":241,"links":379},[380,385],{"id":338,"depth":241,"text":339,"children":381},[382,383,384],{"id":345,"depth":246,"text":346},{"id":352,"depth":246,"text":353},{"id":359,"depth":246,"text":360},{"id":366,"depth":241,"text":367,"children":386},[387],{"id":373,"depth":246,"text":374},"2024-08-25T00:00:00.000Z","A lot has happened since my last post","https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1472&auto=format&fit=crop",{},{"title":38,"description":389},"aSpgF1vaJjkDj7v4eFNA-RUiUInWg8tGVNX1lbVt7i4",{"id":395,"title":34,"body":396,"date":3095,"description":3096,"extension":254,"image":3097,"meta":3098,"minRead":509,"navigation":58,"path":35,"seo":3099,"stem":36,"__hash__":3100},"blog/blog/07-building-datepicker.md",{"type":65,"value":397,"toc":3077},[398,406,410,413,417,426,430,433,437,440,538,542,1196,1200,1270,1274,1277,1377,1381,1384,1447,1451,1454,1460,1648,1652,1669,2023,2027,2030,2033,2371,2375,2767,2771,3063,3067,3070,3073],[73,399,400,401],{},"Final Code on GitHub:\n",[214,402,405],{"href":403,"rel":404},"https://github.com/MSF42/VueDatePicker",[218],"github.com/MSF42/VueDatePicker",[68,407,409],{"id":408},"gpx-app","GPX App",[73,411,412],{},"The GPX app is coming along quite well. I've learned a lot about TypeScript and\nworking with dates in JavaScript. My next blog post will be an update on that.\nFor now, I just want to talk about the datepicker I built.",[68,414,416],{"id":415},"datepickers","Datepickers",[73,418,419,420,425],{},"There are a lot of datepickers to choose from out there. When I needed one for\nthis app, I tried three or four from the vast selection on\n",[214,421,424],{"href":422,"rel":423},"https://www.npmjs.org",[218],"npm",". Out of the few that were aesthetically pleasing,\nputting them to use required more effort than I cared to expend. So, I decided\nto build my own! I thought it would be a nice learning opportunity. Developers\noften complain about working with dates in JavaScript, so I thought this would\nbe a great chance to get into it.",[68,427,429],{"id":428},"problem-solving","Problem Solving",[73,431,432],{},"First, the basics:",[80,434,436],{"id":435},"getting-and-emitting-date","Getting and Emitting Date",[73,438,439],{},"I needed the datepicker to be a reusable component, of course. So I set it up to\nreceive the date from the parent and emit the chosen date back to the parent.",[441,442,446],"pre",{"className":443,"code":444,"language":445,"meta":240,"style":240},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  props: {\n    date: {\n      required: true,\n      type: Date,\n    },\n  },\n  emits: [\"selected-date\"],\n","js",[447,448,449,465,474,488,502,507,513],"code",{"__ignoreMap":240},[450,451,454,458,462],"span",{"class":452,"line":453},"line",1,[450,455,457],{"class":456},"sBMFI","  props",[450,459,461],{"class":460},"sMK4o",":",[450,463,464],{"class":460}," {\n",[450,466,467,470,472],{"class":452,"line":241},[450,468,469],{"class":456},"    date",[450,471,461],{"class":460},[450,473,464],{"class":460},[450,475,476,479,481,485],{"class":452,"line":246},[450,477,478],{"class":456},"      required",[450,480,461],{"class":460},[450,482,484],{"class":483},"sfNiH"," true",[450,486,487],{"class":460},",\n",[450,489,491,494,496,500],{"class":452,"line":490},4,[450,492,493],{"class":456},"      type",[450,495,461],{"class":460},[450,497,499],{"class":498},"sTEyZ"," Date",[450,501,487],{"class":460},[450,503,504],{"class":452,"line":257},[450,505,506],{"class":460},"    },\n",[450,508,510],{"class":452,"line":509},6,[450,511,512],{"class":460},"  },\n",[450,514,516,519,521,524,527,531,533,536],{"class":452,"line":515},7,[450,517,518],{"class":456},"  emits",[450,520,461],{"class":460},[450,522,523],{"class":498}," [",[450,525,526],{"class":460},"\"",[450,528,530],{"class":529},"sfazB","selected-date",[450,532,526],{"class":460},[450,534,535],{"class":498},"]",[450,537,487],{"class":460},[80,539,541],{"id":540},"basic-info","Basic Info",[441,543,545],{"className":443,"code":544,"language":445,"meta":240,"style":240},"const { date } = toRefs(props);\n\n// GET THE YEAR, MONTH, AND DAY FOR DROPDOWN DISPLAY\nconst dateYear = computed(() => {\n  return date.value.getFullYear();\n});\n// A NUMBER VERSION OF THE MONTH TO WORK WITH\nconst dateMonthInt = computed(() => {\n  return date.value.getMonth();\n});\n// A STRING VERSION OF THE MONTH TO DISPLAY\nconst dateMonthStr = computed(() => {\n  let month = months[dateMonthInt.value];\n  return month.length === 4\n    ? month\n    : months[dateMonthInt.value].slice(0, 3);\n});\n// ADD A \"0\" IF THE DATE IS LESS THAN 10\nconst dateDate = computed(() => {\n  return ((date.value.getDate() \u003C 10 ? \"0\" : \"\") +\n    date.value.getDate()) as unknown as number;\n});\n\n// MONTH AND DAY LISTS\nconst months = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\",\n];\nconst days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thur\", \"Fri\", \"Sat\"];\n",[447,546,547,575,580,586,610,635,644,649,669,689,698,704,724,752,771,780,818,827,833,853,904,934,943,948,954,967,980,992,1004,1016,1028,1040,1052,1064,1076,1088,1100,1112,1119],{"__ignoreMap":240},[450,548,549,553,556,559,562,565,569,572],{"class":452,"line":453},[450,550,552],{"class":551},"spNyl","const",[450,554,555],{"class":460}," {",[450,557,558],{"class":498}," date ",[450,560,561],{"class":460},"}",[450,563,564],{"class":460}," =",[450,566,568],{"class":567},"s2Zo4"," toRefs",[450,570,571],{"class":498},"(props)",[450,573,574],{"class":460},";\n",[450,576,577],{"class":452,"line":241},[450,578,579],{"emptyLinePlaceholder":58},"\n",[450,581,582],{"class":452,"line":246},[450,583,585],{"class":584},"sHwdD","// GET THE YEAR, MONTH, AND DAY FOR DROPDOWN DISPLAY\n",[450,587,588,590,593,596,599,602,605,608],{"class":452,"line":490},[450,589,552],{"class":551},[450,591,592],{"class":498}," dateYear ",[450,594,595],{"class":460},"=",[450,597,598],{"class":567}," computed",[450,600,601],{"class":498},"(",[450,603,604],{"class":460},"()",[450,606,607],{"class":551}," =>",[450,609,464],{"class":460},[450,611,612,616,619,622,625,627,630,633],{"class":452,"line":257},[450,613,615],{"class":614},"s7zQu","  return",[450,617,618],{"class":498}," date",[450,620,621],{"class":460},".",[450,623,624],{"class":498},"value",[450,626,621],{"class":460},[450,628,629],{"class":567},"getFullYear",[450,631,604],{"class":632},"swJcz",[450,634,574],{"class":460},[450,636,637,639,642],{"class":452,"line":509},[450,638,561],{"class":460},[450,640,641],{"class":498},")",[450,643,574],{"class":460},[450,645,646],{"class":452,"line":515},[450,647,648],{"class":584},"// A NUMBER VERSION OF THE MONTH TO WORK WITH\n",[450,650,652,654,657,659,661,663,665,667],{"class":452,"line":651},8,[450,653,552],{"class":551},[450,655,656],{"class":498}," dateMonthInt ",[450,658,595],{"class":460},[450,660,598],{"class":567},[450,662,601],{"class":498},[450,664,604],{"class":460},[450,666,607],{"class":551},[450,668,464],{"class":460},[450,670,672,674,676,678,680,682,685,687],{"class":452,"line":671},9,[450,673,615],{"class":614},[450,675,618],{"class":498},[450,677,621],{"class":460},[450,679,624],{"class":498},[450,681,621],{"class":460},[450,683,684],{"class":567},"getMonth",[450,686,604],{"class":632},[450,688,574],{"class":460},[450,690,692,694,696],{"class":452,"line":691},10,[450,693,561],{"class":460},[450,695,641],{"class":498},[450,697,574],{"class":460},[450,699,701],{"class":452,"line":700},11,[450,702,703],{"class":584},"// A STRING VERSION OF THE MONTH TO DISPLAY\n",[450,705,707,709,712,714,716,718,720,722],{"class":452,"line":706},12,[450,708,552],{"class":551},[450,710,711],{"class":498}," dateMonthStr ",[450,713,595],{"class":460},[450,715,598],{"class":567},[450,717,601],{"class":498},[450,719,604],{"class":460},[450,721,607],{"class":551},[450,723,464],{"class":460},[450,725,727,730,733,735,738,741,744,746,748,750],{"class":452,"line":726},13,[450,728,729],{"class":551},"  let",[450,731,732],{"class":498}," month",[450,734,564],{"class":460},[450,736,737],{"class":498}," months",[450,739,740],{"class":632},"[",[450,742,743],{"class":498},"dateMonthInt",[450,745,621],{"class":460},[450,747,624],{"class":498},[450,749,535],{"class":632},[450,751,574],{"class":460},[450,753,755,757,759,761,764,767],{"class":452,"line":754},14,[450,756,615],{"class":614},[450,758,732],{"class":498},[450,760,621],{"class":460},[450,762,763],{"class":498},"length",[450,765,766],{"class":460}," ===",[450,768,770],{"class":769},"sbssI"," 4\n",[450,772,774,777],{"class":452,"line":773},15,[450,775,776],{"class":460},"    ?",[450,778,779],{"class":498}," month\n",[450,781,783,786,788,790,792,794,796,798,800,803,805,808,811,814,816],{"class":452,"line":782},16,[450,784,785],{"class":460},"    :",[450,787,737],{"class":498},[450,789,740],{"class":632},[450,791,743],{"class":498},[450,793,621],{"class":460},[450,795,624],{"class":498},[450,797,535],{"class":632},[450,799,621],{"class":460},[450,801,802],{"class":567},"slice",[450,804,601],{"class":632},[450,806,807],{"class":769},"0",[450,809,810],{"class":460},",",[450,812,813],{"class":769}," 3",[450,815,641],{"class":632},[450,817,574],{"class":460},[450,819,821,823,825],{"class":452,"line":820},17,[450,822,561],{"class":460},[450,824,641],{"class":498},[450,826,574],{"class":460},[450,828,830],{"class":452,"line":829},18,[450,831,832],{"class":584},"// ADD A \"0\" IF THE DATE IS LESS THAN 10\n",[450,834,836,838,841,843,845,847,849,851],{"class":452,"line":835},19,[450,837,552],{"class":551},[450,839,840],{"class":498}," dateDate ",[450,842,595],{"class":460},[450,844,598],{"class":567},[450,846,601],{"class":498},[450,848,604],{"class":460},[450,850,607],{"class":551},[450,852,464],{"class":460},[450,854,856,858,861,864,866,868,870,873,876,879,882,885,888,890,892,895,898,901],{"class":452,"line":855},20,[450,857,615],{"class":614},[450,859,860],{"class":632}," ((",[450,862,863],{"class":498},"date",[450,865,621],{"class":460},[450,867,624],{"class":498},[450,869,621],{"class":460},[450,871,872],{"class":567},"getDate",[450,874,875],{"class":632},"() ",[450,877,878],{"class":460},"\u003C",[450,880,881],{"class":769}," 10",[450,883,884],{"class":460}," ?",[450,886,887],{"class":460}," \"",[450,889,807],{"class":529},[450,891,526],{"class":460},[450,893,894],{"class":460}," :",[450,896,897],{"class":460}," \"\"",[450,899,900],{"class":632},") ",[450,902,903],{"class":460},"+\n",[450,905,907,909,911,913,915,917,920,923,926,929,932],{"class":452,"line":906},21,[450,908,469],{"class":498},[450,910,621],{"class":460},[450,912,624],{"class":498},[450,914,621],{"class":460},[450,916,872],{"class":567},[450,918,919],{"class":632},"()) ",[450,921,922],{"class":614},"as",[450,924,925],{"class":456}," unknown",[450,927,928],{"class":614}," as",[450,930,931],{"class":456}," number",[450,933,574],{"class":460},[450,935,937,939,941],{"class":452,"line":936},22,[450,938,561],{"class":460},[450,940,641],{"class":498},[450,942,574],{"class":460},[450,944,946],{"class":452,"line":945},23,[450,947,579],{"emptyLinePlaceholder":58},[450,949,951],{"class":452,"line":950},24,[450,952,953],{"class":584},"// MONTH AND DAY LISTS\n",[450,955,957,959,962,964],{"class":452,"line":956},25,[450,958,552],{"class":551},[450,960,961],{"class":498}," months ",[450,963,595],{"class":460},[450,965,966],{"class":498}," [\n",[450,968,970,973,976,978],{"class":452,"line":969},26,[450,971,972],{"class":460},"  \"",[450,974,975],{"class":529},"January",[450,977,526],{"class":460},[450,979,487],{"class":460},[450,981,983,985,988,990],{"class":452,"line":982},27,[450,984,972],{"class":460},[450,986,987],{"class":529},"February",[450,989,526],{"class":460},[450,991,487],{"class":460},[450,993,995,997,1000,1002],{"class":452,"line":994},28,[450,996,972],{"class":460},[450,998,999],{"class":529},"March",[450,1001,526],{"class":460},[450,1003,487],{"class":460},[450,1005,1007,1009,1012,1014],{"class":452,"line":1006},29,[450,1008,972],{"class":460},[450,1010,1011],{"class":529},"April",[450,1013,526],{"class":460},[450,1015,487],{"class":460},[450,1017,1019,1021,1024,1026],{"class":452,"line":1018},30,[450,1020,972],{"class":460},[450,1022,1023],{"class":529},"May",[450,1025,526],{"class":460},[450,1027,487],{"class":460},[450,1029,1031,1033,1036,1038],{"class":452,"line":1030},31,[450,1032,972],{"class":460},[450,1034,1035],{"class":529},"June",[450,1037,526],{"class":460},[450,1039,487],{"class":460},[450,1041,1043,1045,1048,1050],{"class":452,"line":1042},32,[450,1044,972],{"class":460},[450,1046,1047],{"class":529},"July",[450,1049,526],{"class":460},[450,1051,487],{"class":460},[450,1053,1055,1057,1060,1062],{"class":452,"line":1054},33,[450,1056,972],{"class":460},[450,1058,1059],{"class":529},"August",[450,1061,526],{"class":460},[450,1063,487],{"class":460},[450,1065,1067,1069,1072,1074],{"class":452,"line":1066},34,[450,1068,972],{"class":460},[450,1070,1071],{"class":529},"September",[450,1073,526],{"class":460},[450,1075,487],{"class":460},[450,1077,1079,1081,1084,1086],{"class":452,"line":1078},35,[450,1080,972],{"class":460},[450,1082,1083],{"class":529},"October",[450,1085,526],{"class":460},[450,1087,487],{"class":460},[450,1089,1091,1093,1096,1098],{"class":452,"line":1090},36,[450,1092,972],{"class":460},[450,1094,1095],{"class":529},"November",[450,1097,526],{"class":460},[450,1099,487],{"class":460},[450,1101,1103,1105,1108,1110],{"class":452,"line":1102},37,[450,1104,972],{"class":460},[450,1106,1107],{"class":529},"December",[450,1109,526],{"class":460},[450,1111,487],{"class":460},[450,1113,1115,1117],{"class":452,"line":1114},38,[450,1116,535],{"class":498},[450,1118,574],{"class":460},[450,1120,1122,1124,1127,1129,1131,1133,1136,1138,1140,1142,1145,1147,1149,1151,1154,1156,1158,1160,1163,1165,1167,1169,1172,1174,1176,1178,1181,1183,1185,1187,1190,1192,1194],{"class":452,"line":1121},39,[450,1123,552],{"class":551},[450,1125,1126],{"class":498}," days ",[450,1128,595],{"class":460},[450,1130,523],{"class":498},[450,1132,526],{"class":460},[450,1134,1135],{"class":529},"Sun",[450,1137,526],{"class":460},[450,1139,810],{"class":460},[450,1141,887],{"class":460},[450,1143,1144],{"class":529},"Mon",[450,1146,526],{"class":460},[450,1148,810],{"class":460},[450,1150,887],{"class":460},[450,1152,1153],{"class":529},"Tue",[450,1155,526],{"class":460},[450,1157,810],{"class":460},[450,1159,887],{"class":460},[450,1161,1162],{"class":529},"Wed",[450,1164,526],{"class":460},[450,1166,810],{"class":460},[450,1168,887],{"class":460},[450,1170,1171],{"class":529},"Thur",[450,1173,526],{"class":460},[450,1175,810],{"class":460},[450,1177,887],{"class":460},[450,1179,1180],{"class":529},"Fri",[450,1182,526],{"class":460},[450,1184,810],{"class":460},[450,1186,887],{"class":460},[450,1188,1189],{"class":529},"Sat",[450,1191,526],{"class":460},[450,1193,535],{"class":498},[450,1195,574],{"class":460},[80,1197,1199],{"id":1198},"toggle-calendar","Toggle Calendar",[441,1201,1203],{"className":443,"code":1202,"language":445,"meta":240,"style":240},"const showDate = ref(false);\nconst toggleDateView = () => {\n    showDate.value = !showDate.value;\n};\n",[447,1204,1205,1226,1242,1265],{"__ignoreMap":240},[450,1206,1207,1209,1212,1214,1217,1219,1222,1224],{"class":452,"line":453},[450,1208,552],{"class":551},[450,1210,1211],{"class":498}," showDate ",[450,1213,595],{"class":460},[450,1215,1216],{"class":567}," ref",[450,1218,601],{"class":498},[450,1220,1221],{"class":483},"false",[450,1223,641],{"class":498},[450,1225,574],{"class":460},[450,1227,1228,1230,1233,1235,1238,1240],{"class":452,"line":241},[450,1229,552],{"class":551},[450,1231,1232],{"class":498}," toggleDateView ",[450,1234,595],{"class":460},[450,1236,1237],{"class":460}," ()",[450,1239,607],{"class":551},[450,1241,464],{"class":460},[450,1243,1244,1247,1249,1251,1253,1256,1259,1261,1263],{"class":452,"line":246},[450,1245,1246],{"class":498},"    showDate",[450,1248,621],{"class":460},[450,1250,624],{"class":498},[450,1252,564],{"class":460},[450,1254,1255],{"class":460}," !",[450,1257,1258],{"class":498},"showDate",[450,1260,621],{"class":460},[450,1262,624],{"class":498},[450,1264,574],{"class":460},[450,1266,1267],{"class":452,"line":490},[450,1268,1269],{"class":460},"};\n",[80,1271,1273],{"id":1272},"emit-the-chosen-date","Emit the Chosen Date",[73,1275,1276],{},"Letting the parent know the date has been chosen:",[441,1278,1280],{"className":443,"code":1279,"language":445,"meta":240,"style":240},"const dateChosen = (row: number, col: number) => {\n  let newdate = monthArray.value[row][col]\n  context.emit('selected-date', newdate)\n}\n",[447,1281,1282,1317,1346,1372],{"__ignoreMap":240},[450,1283,1284,1286,1289,1291,1294,1298,1300,1302,1304,1307,1309,1311,1313,1315],{"class":452,"line":453},[450,1285,552],{"class":551},[450,1287,1288],{"class":498}," dateChosen ",[450,1290,595],{"class":460},[450,1292,1293],{"class":460}," (",[450,1295,1297],{"class":1296},"sHdIc","row",[450,1299,461],{"class":460},[450,1301,931],{"class":456},[450,1303,810],{"class":460},[450,1305,1306],{"class":1296}," col",[450,1308,461],{"class":460},[450,1310,931],{"class":456},[450,1312,641],{"class":460},[450,1314,607],{"class":551},[450,1316,464],{"class":460},[450,1318,1319,1321,1324,1326,1329,1331,1333,1335,1337,1340,1343],{"class":452,"line":241},[450,1320,729],{"class":551},[450,1322,1323],{"class":498}," newdate",[450,1325,564],{"class":460},[450,1327,1328],{"class":498}," monthArray",[450,1330,621],{"class":460},[450,1332,624],{"class":498},[450,1334,740],{"class":632},[450,1336,1297],{"class":498},[450,1338,1339],{"class":632},"][",[450,1341,1342],{"class":498},"col",[450,1344,1345],{"class":632},"]\n",[450,1347,1348,1351,1353,1356,1358,1361,1363,1365,1367,1369],{"class":452,"line":246},[450,1349,1350],{"class":498},"  context",[450,1352,621],{"class":460},[450,1354,1355],{"class":567},"emit",[450,1357,601],{"class":632},[450,1359,1360],{"class":460},"'",[450,1362,530],{"class":529},[450,1364,1360],{"class":460},[450,1366,810],{"class":460},[450,1368,1323],{"class":498},[450,1370,1371],{"class":632},")\n",[450,1373,1374],{"class":452,"line":490},[450,1375,1376],{"class":460},"}\n",[80,1378,1380],{"id":1379},"time-zone-offset","Time Zone Offset",[73,1382,1383],{},"If I don't use a timezone offset, the chosen date and displayed date can get out\nof sync. Adding this offset effectively sets the time for each day to midnight.",[441,1385,1387],{"className":443,"code":1386,"language":445,"meta":240,"style":240},"// add this to all new dates (milliseconds)\nconst tzOffset = computed(() => {\n    return date.value.getTimezoneOffset() * 1000;\n});\n",[447,1388,1389,1394,1413,1439],{"__ignoreMap":240},[450,1390,1391],{"class":452,"line":453},[450,1392,1393],{"class":584},"// add this to all new dates (milliseconds)\n",[450,1395,1396,1398,1401,1403,1405,1407,1409,1411],{"class":452,"line":241},[450,1397,552],{"class":551},[450,1399,1400],{"class":498}," tzOffset ",[450,1402,595],{"class":460},[450,1404,598],{"class":567},[450,1406,601],{"class":498},[450,1408,604],{"class":460},[450,1410,607],{"class":551},[450,1412,464],{"class":460},[450,1414,1415,1418,1420,1422,1424,1426,1429,1431,1434,1437],{"class":452,"line":246},[450,1416,1417],{"class":614},"    return",[450,1419,618],{"class":498},[450,1421,621],{"class":460},[450,1423,624],{"class":498},[450,1425,621],{"class":460},[450,1427,1428],{"class":567},"getTimezoneOffset",[450,1430,875],{"class":632},[450,1432,1433],{"class":460},"*",[450,1435,1436],{"class":769}," 1000",[450,1438,574],{"class":460},[450,1440,1441,1443,1445],{"class":452,"line":490},[450,1442,561],{"class":460},[450,1444,641],{"class":498},[450,1446,574],{"class":460},[80,1448,1450],{"id":1449},"month-length-and-first-day-of-month","Month Length and First Day of Month",[73,1452,1453],{},"Since JavaScript will return February 1 if you pass in January 32, this creates\na handy way to calculate the length of a month: Simply subtract the date value\nfrom 32.",[73,1455,1456,1457],{},"Example: January 32 will return February 1, so ",[447,1458,1459],{},"32 - 1 = 31",[441,1461,1463],{"className":443,"code":1462,"language":445,"meta":240,"style":240},"const getMonthLength = computed(() => {\n    return 32 - new Date(dateYear.value, dateMonthInt.value, 32).getDate();\n});\n\n// GET THE FIRST DAY OF THE MONTH\nconst getMonthFirstDay = computed(() => {\n    let weekStartsOnSun = new Date(dateYear.value, dateMonthInt.value).getDay();\n    return weekStartsOnSun === 0 ? 6 : weekStartsOnSun - 1;\n    // I subtracted 1 so the week could start on Monday\n});\n",[447,1464,1465,1484,1531,1539,1543,1548,1567,1608,1635,1640],{"__ignoreMap":240},[450,1466,1467,1469,1472,1474,1476,1478,1480,1482],{"class":452,"line":453},[450,1468,552],{"class":551},[450,1470,1471],{"class":498}," getMonthLength ",[450,1473,595],{"class":460},[450,1475,598],{"class":567},[450,1477,601],{"class":498},[450,1479,604],{"class":460},[450,1481,607],{"class":551},[450,1483,464],{"class":460},[450,1485,1486,1488,1491,1494,1497,1499,1501,1504,1506,1508,1510,1513,1515,1517,1519,1521,1523,1525,1527,1529],{"class":452,"line":241},[450,1487,1417],{"class":614},[450,1489,1490],{"class":769}," 32",[450,1492,1493],{"class":460}," -",[450,1495,1496],{"class":460}," new",[450,1498,499],{"class":567},[450,1500,601],{"class":632},[450,1502,1503],{"class":498},"dateYear",[450,1505,621],{"class":460},[450,1507,624],{"class":498},[450,1509,810],{"class":460},[450,1511,1512],{"class":498}," dateMonthInt",[450,1514,621],{"class":460},[450,1516,624],{"class":498},[450,1518,810],{"class":460},[450,1520,1490],{"class":769},[450,1522,641],{"class":632},[450,1524,621],{"class":460},[450,1526,872],{"class":567},[450,1528,604],{"class":632},[450,1530,574],{"class":460},[450,1532,1533,1535,1537],{"class":452,"line":246},[450,1534,561],{"class":460},[450,1536,641],{"class":498},[450,1538,574],{"class":460},[450,1540,1541],{"class":452,"line":490},[450,1542,579],{"emptyLinePlaceholder":58},[450,1544,1545],{"class":452,"line":257},[450,1546,1547],{"class":584},"// GET THE FIRST DAY OF THE MONTH\n",[450,1549,1550,1552,1555,1557,1559,1561,1563,1565],{"class":452,"line":509},[450,1551,552],{"class":551},[450,1553,1554],{"class":498}," getMonthFirstDay ",[450,1556,595],{"class":460},[450,1558,598],{"class":567},[450,1560,601],{"class":498},[450,1562,604],{"class":460},[450,1564,607],{"class":551},[450,1566,464],{"class":460},[450,1568,1569,1572,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1604,1606],{"class":452,"line":515},[450,1570,1571],{"class":551},"    let",[450,1573,1574],{"class":498}," weekStartsOnSun",[450,1576,564],{"class":460},[450,1578,1496],{"class":460},[450,1580,499],{"class":567},[450,1582,601],{"class":632},[450,1584,1503],{"class":498},[450,1586,621],{"class":460},[450,1588,624],{"class":498},[450,1590,810],{"class":460},[450,1592,1512],{"class":498},[450,1594,621],{"class":460},[450,1596,624],{"class":498},[450,1598,641],{"class":632},[450,1600,621],{"class":460},[450,1602,1603],{"class":567},"getDay",[450,1605,604],{"class":632},[450,1607,574],{"class":460},[450,1609,1610,1612,1614,1616,1619,1621,1624,1626,1628,1630,1633],{"class":452,"line":651},[450,1611,1417],{"class":614},[450,1613,1574],{"class":498},[450,1615,766],{"class":460},[450,1617,1618],{"class":769}," 0",[450,1620,884],{"class":460},[450,1622,1623],{"class":769}," 6",[450,1625,894],{"class":460},[450,1627,1574],{"class":498},[450,1629,1493],{"class":460},[450,1631,1632],{"class":769}," 1",[450,1634,574],{"class":460},[450,1636,1637],{"class":452,"line":671},[450,1638,1639],{"class":584},"    // I subtracted 1 so the week could start on Monday\n",[450,1641,1642,1644,1646],{"class":452,"line":691},[450,1643,561],{"class":460},[450,1645,641],{"class":498},[450,1647,574],{"class":460},[80,1649,1651],{"id":1650},"month-array-this-was-a-bit-tricky","Month Array (this was a bit tricky)",[291,1653,1654,1657,1660,1663,1666],{},[178,1655,1656],{},"I created an array of 42 dates, since some months will need to display six\nweeks.",[178,1658,1659],{},"I took the first day of the month and subtracted the 'day' value in order to\nfind out what date needed to be in the first square. For example, if February\n1 is a Thursday, the 'day' value for Thursday is 3. The first column (Monday)\nwill start on February 1st - 3, or January 29.",[178,1661,1662],{},"I used 86400000 to account for the number of milliseconds in a day.",[178,1664,1665],{},"I added a day for each item in the array.",[178,1667,1668],{},"Finally, I returned six slices of the array, representing each week. This\nresults in an array of six arrays (i.e. 'weeks').",[441,1670,1672],{"className":443,"code":1671,"language":445,"meta":240,"style":240},"const monthArray = computed(() => {\n    let tempArray = [];\n    let firstDay = new Date(dateYear.value, dateMonthInt.value);\n    for (let i = 0; i \u003C 42; i++) {\n        tempArray.push(\n            new Date(\n                firstDay.getTime() +\n                    i * 86400000 +\n                    tzOffset.value -\n                    getMonthFirstDay.value * 86400000,\n            ),\n        );\n    }\n    return [\n        tempArray.slice(0, 7),\n        tempArray.slice(7, 14),\n        tempArray.slice(14, 21),\n        tempArray.slice(21, 28),\n        tempArray.slice(28, 35),\n        tempArray.slice(35),\n    ];\n});\n",[447,1673,1674,1693,1707,1740,1780,1793,1802,1816,1830,1842,1857,1864,1871,1876,1882,1903,1925,1947,1969,1991,2008,2015],{"__ignoreMap":240},[450,1675,1676,1678,1681,1683,1685,1687,1689,1691],{"class":452,"line":453},[450,1677,552],{"class":551},[450,1679,1680],{"class":498}," monthArray ",[450,1682,595],{"class":460},[450,1684,598],{"class":567},[450,1686,601],{"class":498},[450,1688,604],{"class":460},[450,1690,607],{"class":551},[450,1692,464],{"class":460},[450,1694,1695,1697,1700,1702,1705],{"class":452,"line":241},[450,1696,1571],{"class":551},[450,1698,1699],{"class":498}," tempArray",[450,1701,564],{"class":460},[450,1703,1704],{"class":632}," []",[450,1706,574],{"class":460},[450,1708,1709,1711,1714,1716,1718,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738],{"class":452,"line":246},[450,1710,1571],{"class":551},[450,1712,1713],{"class":498}," firstDay",[450,1715,564],{"class":460},[450,1717,1496],{"class":460},[450,1719,499],{"class":567},[450,1721,601],{"class":632},[450,1723,1503],{"class":498},[450,1725,621],{"class":460},[450,1727,624],{"class":498},[450,1729,810],{"class":460},[450,1731,1512],{"class":498},[450,1733,621],{"class":460},[450,1735,624],{"class":498},[450,1737,641],{"class":632},[450,1739,574],{"class":460},[450,1741,1742,1745,1747,1750,1753,1755,1757,1760,1762,1765,1768,1770,1772,1775,1777],{"class":452,"line":490},[450,1743,1744],{"class":614},"    for",[450,1746,1293],{"class":632},[450,1748,1749],{"class":551},"let",[450,1751,1752],{"class":498}," i",[450,1754,564],{"class":460},[450,1756,1618],{"class":769},[450,1758,1759],{"class":460},";",[450,1761,1752],{"class":498},[450,1763,1764],{"class":460}," \u003C",[450,1766,1767],{"class":769}," 42",[450,1769,1759],{"class":460},[450,1771,1752],{"class":498},[450,1773,1774],{"class":460},"++",[450,1776,900],{"class":632},[450,1778,1779],{"class":460},"{\n",[450,1781,1782,1785,1787,1790],{"class":452,"line":257},[450,1783,1784],{"class":498},"        tempArray",[450,1786,621],{"class":460},[450,1788,1789],{"class":567},"push",[450,1791,1792],{"class":632},"(\n",[450,1794,1795,1798,1800],{"class":452,"line":509},[450,1796,1797],{"class":460},"            new",[450,1799,499],{"class":567},[450,1801,1792],{"class":632},[450,1803,1804,1807,1809,1812,1814],{"class":452,"line":515},[450,1805,1806],{"class":498},"                firstDay",[450,1808,621],{"class":460},[450,1810,1811],{"class":567},"getTime",[450,1813,875],{"class":632},[450,1815,903],{"class":460},[450,1817,1818,1821,1824,1827],{"class":452,"line":651},[450,1819,1820],{"class":498},"                    i",[450,1822,1823],{"class":460}," *",[450,1825,1826],{"class":769}," 86400000",[450,1828,1829],{"class":460}," +\n",[450,1831,1832,1835,1837,1839],{"class":452,"line":671},[450,1833,1834],{"class":498},"                    tzOffset",[450,1836,621],{"class":460},[450,1838,624],{"class":498},[450,1840,1841],{"class":460}," -\n",[450,1843,1844,1847,1849,1851,1853,1855],{"class":452,"line":691},[450,1845,1846],{"class":498},"                    getMonthFirstDay",[450,1848,621],{"class":460},[450,1850,624],{"class":498},[450,1852,1823],{"class":460},[450,1854,1826],{"class":769},[450,1856,487],{"class":460},[450,1858,1859,1862],{"class":452,"line":700},[450,1860,1861],{"class":632},"            )",[450,1863,487],{"class":460},[450,1865,1866,1869],{"class":452,"line":706},[450,1867,1868],{"class":632},"        )",[450,1870,574],{"class":460},[450,1872,1873],{"class":452,"line":726},[450,1874,1875],{"class":460},"    }\n",[450,1877,1878,1880],{"class":452,"line":754},[450,1879,1417],{"class":614},[450,1881,966],{"class":632},[450,1883,1884,1886,1888,1890,1892,1894,1896,1899,1901],{"class":452,"line":773},[450,1885,1784],{"class":498},[450,1887,621],{"class":460},[450,1889,802],{"class":567},[450,1891,601],{"class":632},[450,1893,807],{"class":769},[450,1895,810],{"class":460},[450,1897,1898],{"class":769}," 7",[450,1900,641],{"class":632},[450,1902,487],{"class":460},[450,1904,1905,1907,1909,1911,1913,1916,1918,1921,1923],{"class":452,"line":782},[450,1906,1784],{"class":498},[450,1908,621],{"class":460},[450,1910,802],{"class":567},[450,1912,601],{"class":632},[450,1914,1915],{"class":769},"7",[450,1917,810],{"class":460},[450,1919,1920],{"class":769}," 14",[450,1922,641],{"class":632},[450,1924,487],{"class":460},[450,1926,1927,1929,1931,1933,1935,1938,1940,1943,1945],{"class":452,"line":820},[450,1928,1784],{"class":498},[450,1930,621],{"class":460},[450,1932,802],{"class":567},[450,1934,601],{"class":632},[450,1936,1937],{"class":769},"14",[450,1939,810],{"class":460},[450,1941,1942],{"class":769}," 21",[450,1944,641],{"class":632},[450,1946,487],{"class":460},[450,1948,1949,1951,1953,1955,1957,1960,1962,1965,1967],{"class":452,"line":829},[450,1950,1784],{"class":498},[450,1952,621],{"class":460},[450,1954,802],{"class":567},[450,1956,601],{"class":632},[450,1958,1959],{"class":769},"21",[450,1961,810],{"class":460},[450,1963,1964],{"class":769}," 28",[450,1966,641],{"class":632},[450,1968,487],{"class":460},[450,1970,1971,1973,1975,1977,1979,1982,1984,1987,1989],{"class":452,"line":835},[450,1972,1784],{"class":498},[450,1974,621],{"class":460},[450,1976,802],{"class":567},[450,1978,601],{"class":632},[450,1980,1981],{"class":769},"28",[450,1983,810],{"class":460},[450,1985,1986],{"class":769}," 35",[450,1988,641],{"class":632},[450,1990,487],{"class":460},[450,1992,1993,1995,1997,1999,2001,2004,2006],{"class":452,"line":855},[450,1994,1784],{"class":498},[450,1996,621],{"class":460},[450,1998,802],{"class":567},[450,2000,601],{"class":632},[450,2002,2003],{"class":769},"35",[450,2005,641],{"class":632},[450,2007,487],{"class":460},[450,2009,2010,2013],{"class":452,"line":906},[450,2011,2012],{"class":632},"    ]",[450,2014,574],{"class":460},[450,2016,2017,2019,2021],{"class":452,"line":936},[450,2018,561],{"class":460},[450,2020,641],{"class":498},[450,2022,574],{"class":460},[80,2024,2026],{"id":2025},"advancing-the-calendar","Advancing the Calendar",[73,2028,2029],{},"I made a single function to move forward/backward by one month or year. If\nmoving back one month, \"0\" is passed in for the year (no change) and \"-1\" is\npassed in for the month.",[73,2031,2032],{},"One issue I didn't think about initially - if the selected date is January 31,\nfor example, and the user advanced one month, the calendar advanced to March 3\n(i.e. \"February 31\"). Therefore I had to set up a month length check. Now this\nexample will result in advancing to February 28 (or 29).",[441,2034,2036],{"className":443,"code":2035,"language":445,"meta":240,"style":240},"const dateChange = (year: number, month: number) => {\n  let tempdate\n  // CHECK LENGTH OF THE MONTH WE ARE ADVANCING TO\n  let newMonthLength =\n    32 - new Date(dateYear.value, dateMonthInt.value + month, 32).getDate()\n  if (year === 0 && dateDate.value > newMonthLength) {\n    tempdate = new Date(\n      new Date(\n        dateYear.value,\n        dateMonthInt.value + month,\n        newMonthLength\n      ).getTime() + tzOffset.value\n    )\n  } else {\n    tempdate = new Date(\n      new Date(\n        dateYear.value + year,\n        dateMonthInt.value + month,\n        dateDate.value\n      ).getTime() + tzOffset.value\n    )\n  }\n  context.emit('selected-date', tempdate)\n}\n",[447,2037,2038,2070,2077,2082,2092,2137,2169,2182,2191,2202,2217,2222,2244,2249,2259,2271,2279,2294,2308,2317,2335,2339,2344,2367],{"__ignoreMap":240},[450,2039,2040,2042,2045,2047,2049,2052,2054,2056,2058,2060,2062,2064,2066,2068],{"class":452,"line":453},[450,2041,552],{"class":551},[450,2043,2044],{"class":498}," dateChange ",[450,2046,595],{"class":460},[450,2048,1293],{"class":460},[450,2050,2051],{"class":1296},"year",[450,2053,461],{"class":460},[450,2055,931],{"class":456},[450,2057,810],{"class":460},[450,2059,732],{"class":1296},[450,2061,461],{"class":460},[450,2063,931],{"class":456},[450,2065,641],{"class":460},[450,2067,607],{"class":551},[450,2069,464],{"class":460},[450,2071,2072,2074],{"class":452,"line":241},[450,2073,729],{"class":551},[450,2075,2076],{"class":498}," tempdate\n",[450,2078,2079],{"class":452,"line":246},[450,2080,2081],{"class":584},"  // CHECK LENGTH OF THE MONTH WE ARE ADVANCING TO\n",[450,2083,2084,2086,2089],{"class":452,"line":490},[450,2085,729],{"class":551},[450,2087,2088],{"class":498}," newMonthLength",[450,2090,2091],{"class":460}," =\n",[450,2093,2094,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117,2119,2122,2124,2126,2128,2130,2132,2134],{"class":452,"line":257},[450,2095,2096],{"class":769},"    32",[450,2098,1493],{"class":460},[450,2100,1496],{"class":460},[450,2102,499],{"class":567},[450,2104,601],{"class":632},[450,2106,1503],{"class":498},[450,2108,621],{"class":460},[450,2110,624],{"class":498},[450,2112,810],{"class":460},[450,2114,1512],{"class":498},[450,2116,621],{"class":460},[450,2118,624],{"class":498},[450,2120,2121],{"class":460}," +",[450,2123,732],{"class":498},[450,2125,810],{"class":460},[450,2127,1490],{"class":769},[450,2129,641],{"class":632},[450,2131,621],{"class":460},[450,2133,872],{"class":567},[450,2135,2136],{"class":632},"()\n",[450,2138,2139,2142,2144,2146,2148,2150,2153,2156,2158,2160,2163,2165,2167],{"class":452,"line":509},[450,2140,2141],{"class":614},"  if",[450,2143,1293],{"class":632},[450,2145,2051],{"class":498},[450,2147,766],{"class":460},[450,2149,1618],{"class":769},[450,2151,2152],{"class":460}," &&",[450,2154,2155],{"class":498}," dateDate",[450,2157,621],{"class":460},[450,2159,624],{"class":498},[450,2161,2162],{"class":460}," >",[450,2164,2088],{"class":498},[450,2166,900],{"class":632},[450,2168,1779],{"class":460},[450,2170,2171,2174,2176,2178,2180],{"class":452,"line":515},[450,2172,2173],{"class":498},"    tempdate",[450,2175,564],{"class":460},[450,2177,1496],{"class":460},[450,2179,499],{"class":567},[450,2181,1792],{"class":632},[450,2183,2184,2187,2189],{"class":452,"line":651},[450,2185,2186],{"class":460},"      new",[450,2188,499],{"class":567},[450,2190,1792],{"class":632},[450,2192,2193,2196,2198,2200],{"class":452,"line":671},[450,2194,2195],{"class":498},"        dateYear",[450,2197,621],{"class":460},[450,2199,624],{"class":498},[450,2201,487],{"class":460},[450,2203,2204,2207,2209,2211,2213,2215],{"class":452,"line":691},[450,2205,2206],{"class":498},"        dateMonthInt",[450,2208,621],{"class":460},[450,2210,624],{"class":498},[450,2212,2121],{"class":460},[450,2214,732],{"class":498},[450,2216,487],{"class":460},[450,2218,2219],{"class":452,"line":700},[450,2220,2221],{"class":498},"        newMonthLength\n",[450,2223,2224,2227,2229,2231,2233,2236,2239,2241],{"class":452,"line":706},[450,2225,2226],{"class":632},"      )",[450,2228,621],{"class":460},[450,2230,1811],{"class":567},[450,2232,875],{"class":632},[450,2234,2235],{"class":460},"+",[450,2237,2238],{"class":498}," tzOffset",[450,2240,621],{"class":460},[450,2242,2243],{"class":498},"value\n",[450,2245,2246],{"class":452,"line":726},[450,2247,2248],{"class":632},"    )\n",[450,2250,2251,2254,2257],{"class":452,"line":754},[450,2252,2253],{"class":460},"  }",[450,2255,2256],{"class":614}," else",[450,2258,464],{"class":460},[450,2260,2261,2263,2265,2267,2269],{"class":452,"line":773},[450,2262,2173],{"class":498},[450,2264,564],{"class":460},[450,2266,1496],{"class":460},[450,2268,499],{"class":567},[450,2270,1792],{"class":632},[450,2272,2273,2275,2277],{"class":452,"line":782},[450,2274,2186],{"class":460},[450,2276,499],{"class":567},[450,2278,1792],{"class":632},[450,2280,2281,2283,2285,2287,2289,2292],{"class":452,"line":820},[450,2282,2195],{"class":498},[450,2284,621],{"class":460},[450,2286,624],{"class":498},[450,2288,2121],{"class":460},[450,2290,2291],{"class":498}," year",[450,2293,487],{"class":460},[450,2295,2296,2298,2300,2302,2304,2306],{"class":452,"line":829},[450,2297,2206],{"class":498},[450,2299,621],{"class":460},[450,2301,624],{"class":498},[450,2303,2121],{"class":460},[450,2305,732],{"class":498},[450,2307,487],{"class":460},[450,2309,2310,2313,2315],{"class":452,"line":835},[450,2311,2312],{"class":498},"        dateDate",[450,2314,621],{"class":460},[450,2316,2243],{"class":498},[450,2318,2319,2321,2323,2325,2327,2329,2331,2333],{"class":452,"line":855},[450,2320,2226],{"class":632},[450,2322,621],{"class":460},[450,2324,1811],{"class":567},[450,2326,875],{"class":632},[450,2328,2235],{"class":460},[450,2330,2238],{"class":498},[450,2332,621],{"class":460},[450,2334,2243],{"class":498},[450,2336,2337],{"class":452,"line":906},[450,2338,2248],{"class":632},[450,2340,2341],{"class":452,"line":936},[450,2342,2343],{"class":460},"  }\n",[450,2345,2346,2348,2350,2352,2354,2356,2358,2360,2362,2365],{"class":452,"line":945},[450,2347,1350],{"class":498},[450,2349,621],{"class":460},[450,2351,1355],{"class":567},[450,2353,601],{"class":632},[450,2355,1360],{"class":460},[450,2357,530],{"class":529},[450,2359,1360],{"class":460},[450,2361,810],{"class":460},[450,2363,2364],{"class":498}," tempdate",[450,2366,1371],{"class":632},[450,2368,2369],{"class":452,"line":950},[450,2370,1376],{"class":460},[68,2372,2374],{"id":2373},"highlighting-dates","Highlighting Dates",[441,2376,2378],{"className":443,"code":2377,"language":445,"meta":240,"style":240},"// HIGHLIGHT THE SELECTED DATE IN RED\nconst isSelectedDate = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getDate() === date2.getDate()\n    ? 'bg-red-500 text-bold text-gray-200'\n    : ''\n}\n\n// HIGHLIGHT TODAY'S DATE IN BLUE\nconst isCurrentDate = (date: Date) => {\n  let today = new Date(Date.now())\n  return date.getFullYear() === today.getFullYear() &&\n    date.getMonth() === today.getMonth() &&\n    date.getDate() === today.getDate()\n    ? 'bg-blue-500 text-bold text-gray-200'\n    : ''\n}\n\n// MAKE DAYS OF CURRENTLY VIEWED MONTH BOLD, MAKE OTHERS LIGHTER\nconst isNotCurrentMonth = (date1: Date, date2: Date) => {\n  return date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth()\n    ? 'text-bold'\n    : 'text-gray-500'\n}\n",[447,2379,2380,2385,2418,2445,2468,2488,2501,2508,2512,2516,2521,2544,2570,2594,2616,2636,2647,2653,2657,2661,2666,2697,2721,2741,2752,2763],{"__ignoreMap":240},[450,2381,2382],{"class":452,"line":453},[450,2383,2384],{"class":584},"// HIGHLIGHT THE SELECTED DATE IN RED\n",[450,2386,2387,2389,2392,2394,2396,2399,2401,2403,2405,2408,2410,2412,2414,2416],{"class":452,"line":241},[450,2388,552],{"class":551},[450,2390,2391],{"class":498}," isSelectedDate ",[450,2393,595],{"class":460},[450,2395,1293],{"class":460},[450,2397,2398],{"class":1296},"date1",[450,2400,461],{"class":460},[450,2402,499],{"class":456},[450,2404,810],{"class":460},[450,2406,2407],{"class":1296}," date2",[450,2409,461],{"class":460},[450,2411,499],{"class":456},[450,2413,641],{"class":460},[450,2415,607],{"class":551},[450,2417,464],{"class":460},[450,2419,2420,2422,2425,2427,2429,2431,2434,2436,2438,2440,2442],{"class":452,"line":246},[450,2421,615],{"class":614},[450,2423,2424],{"class":498}," date1",[450,2426,621],{"class":460},[450,2428,629],{"class":567},[450,2430,875],{"class":632},[450,2432,2433],{"class":460},"===",[450,2435,2407],{"class":498},[450,2437,621],{"class":460},[450,2439,629],{"class":567},[450,2441,875],{"class":632},[450,2443,2444],{"class":460},"&&\n",[450,2446,2447,2450,2452,2454,2456,2458,2460,2462,2464,2466],{"class":452,"line":490},[450,2448,2449],{"class":498},"    date1",[450,2451,621],{"class":460},[450,2453,684],{"class":567},[450,2455,875],{"class":632},[450,2457,2433],{"class":460},[450,2459,2407],{"class":498},[450,2461,621],{"class":460},[450,2463,684],{"class":567},[450,2465,875],{"class":632},[450,2467,2444],{"class":460},[450,2469,2470,2472,2474,2476,2478,2480,2482,2484,2486],{"class":452,"line":257},[450,2471,2449],{"class":498},[450,2473,621],{"class":460},[450,2475,872],{"class":567},[450,2477,875],{"class":632},[450,2479,2433],{"class":460},[450,2481,2407],{"class":498},[450,2483,621],{"class":460},[450,2485,872],{"class":567},[450,2487,2136],{"class":632},[450,2489,2490,2492,2495,2498],{"class":452,"line":509},[450,2491,776],{"class":460},[450,2493,2494],{"class":460}," '",[450,2496,2497],{"class":529},"bg-red-500 text-bold text-gray-200",[450,2499,2500],{"class":460},"'\n",[450,2502,2503,2505],{"class":452,"line":515},[450,2504,785],{"class":460},[450,2506,2507],{"class":460}," ''\n",[450,2509,2510],{"class":452,"line":651},[450,2511,1376],{"class":460},[450,2513,2514],{"class":452,"line":671},[450,2515,579],{"emptyLinePlaceholder":58},[450,2517,2518],{"class":452,"line":691},[450,2519,2520],{"class":584},"// HIGHLIGHT TODAY'S DATE IN BLUE\n",[450,2522,2523,2525,2528,2530,2532,2534,2536,2538,2540,2542],{"class":452,"line":700},[450,2524,552],{"class":551},[450,2526,2527],{"class":498}," isCurrentDate ",[450,2529,595],{"class":460},[450,2531,1293],{"class":460},[450,2533,863],{"class":1296},[450,2535,461],{"class":460},[450,2537,499],{"class":456},[450,2539,641],{"class":460},[450,2541,607],{"class":551},[450,2543,464],{"class":460},[450,2545,2546,2548,2551,2553,2555,2557,2559,2562,2564,2567],{"class":452,"line":706},[450,2547,729],{"class":551},[450,2549,2550],{"class":498}," today",[450,2552,564],{"class":460},[450,2554,1496],{"class":460},[450,2556,499],{"class":567},[450,2558,601],{"class":632},[450,2560,2561],{"class":498},"Date",[450,2563,621],{"class":460},[450,2565,2566],{"class":567},"now",[450,2568,2569],{"class":632},"())\n",[450,2571,2572,2574,2576,2578,2580,2582,2584,2586,2588,2590,2592],{"class":452,"line":726},[450,2573,615],{"class":614},[450,2575,618],{"class":498},[450,2577,621],{"class":460},[450,2579,629],{"class":567},[450,2581,875],{"class":632},[450,2583,2433],{"class":460},[450,2585,2550],{"class":498},[450,2587,621],{"class":460},[450,2589,629],{"class":567},[450,2591,875],{"class":632},[450,2593,2444],{"class":460},[450,2595,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614],{"class":452,"line":754},[450,2597,469],{"class":498},[450,2599,621],{"class":460},[450,2601,684],{"class":567},[450,2603,875],{"class":632},[450,2605,2433],{"class":460},[450,2607,2550],{"class":498},[450,2609,621],{"class":460},[450,2611,684],{"class":567},[450,2613,875],{"class":632},[450,2615,2444],{"class":460},[450,2617,2618,2620,2622,2624,2626,2628,2630,2632,2634],{"class":452,"line":773},[450,2619,469],{"class":498},[450,2621,621],{"class":460},[450,2623,872],{"class":567},[450,2625,875],{"class":632},[450,2627,2433],{"class":460},[450,2629,2550],{"class":498},[450,2631,621],{"class":460},[450,2633,872],{"class":567},[450,2635,2136],{"class":632},[450,2637,2638,2640,2642,2645],{"class":452,"line":782},[450,2639,776],{"class":460},[450,2641,2494],{"class":460},[450,2643,2644],{"class":529},"bg-blue-500 text-bold text-gray-200",[450,2646,2500],{"class":460},[450,2648,2649,2651],{"class":452,"line":820},[450,2650,785],{"class":460},[450,2652,2507],{"class":460},[450,2654,2655],{"class":452,"line":829},[450,2656,1376],{"class":460},[450,2658,2659],{"class":452,"line":835},[450,2660,579],{"emptyLinePlaceholder":58},[450,2662,2663],{"class":452,"line":855},[450,2664,2665],{"class":584},"// MAKE DAYS OF CURRENTLY VIEWED MONTH BOLD, MAKE OTHERS LIGHTER\n",[450,2667,2668,2670,2673,2675,2677,2679,2681,2683,2685,2687,2689,2691,2693,2695],{"class":452,"line":906},[450,2669,552],{"class":551},[450,2671,2672],{"class":498}," isNotCurrentMonth ",[450,2674,595],{"class":460},[450,2676,1293],{"class":460},[450,2678,2398],{"class":1296},[450,2680,461],{"class":460},[450,2682,499],{"class":456},[450,2684,810],{"class":460},[450,2686,2407],{"class":1296},[450,2688,461],{"class":460},[450,2690,499],{"class":456},[450,2692,641],{"class":460},[450,2694,607],{"class":551},[450,2696,464],{"class":460},[450,2698,2699,2701,2703,2705,2707,2709,2711,2713,2715,2717,2719],{"class":452,"line":936},[450,2700,615],{"class":614},[450,2702,2424],{"class":498},[450,2704,621],{"class":460},[450,2706,629],{"class":567},[450,2708,875],{"class":632},[450,2710,2433],{"class":460},[450,2712,2407],{"class":498},[450,2714,621],{"class":460},[450,2716,629],{"class":567},[450,2718,875],{"class":632},[450,2720,2444],{"class":460},[450,2722,2723,2725,2727,2729,2731,2733,2735,2737,2739],{"class":452,"line":945},[450,2724,2449],{"class":498},[450,2726,621],{"class":460},[450,2728,684],{"class":567},[450,2730,875],{"class":632},[450,2732,2433],{"class":460},[450,2734,2407],{"class":498},[450,2736,621],{"class":460},[450,2738,684],{"class":567},[450,2740,2136],{"class":632},[450,2742,2743,2745,2747,2750],{"class":452,"line":950},[450,2744,776],{"class":460},[450,2746,2494],{"class":460},[450,2748,2749],{"class":529},"text-bold",[450,2751,2500],{"class":460},[450,2753,2754,2756,2758,2761],{"class":452,"line":956},[450,2755,785],{"class":460},[450,2757,2494],{"class":460},[450,2759,2760],{"class":529},"text-gray-500",[450,2762,2500],{"class":460},[450,2764,2765],{"class":452,"line":969},[450,2766,1376],{"class":460},[80,2768,2770],{"id":2769},"lastly-a-directive-to-highlight-on-hover","Lastly, a Directive to Highlight on Hover",[441,2772,2774],{"className":443,"code":2773,"language":445,"meta":240,"style":240},"directives: {\n  hover: {\n    beforeMount(el, binding) {\n      const { value = [] } = binding;\n      el.addEventListener(\"mouseenter\", () => {\n        el.classList.add(...value);\n      });\n      el.addEventListener(\"mouseleave\", () => {\n        el.classList.remove(...value);\n      });\n    },\n    unmounted(el, binding) {\n      el.removeEventListener(\"mouseenter\", binding);\n      el.removeEventListener(\"mouseleave\", binding);\n    },\n  },\n},\n////// and in the element above\nv-hover=\"['bg-blue-700', 'text-gray-300']\"\n",[447,2775,2776,2785,2794,2813,2836,2863,2889,2898,2923,2946,2954,2958,2975,3000,3024,3028,3032,3037,3042],{"__ignoreMap":240},[450,2777,2778,2781,2783],{"class":452,"line":453},[450,2779,2780],{"class":456},"directives",[450,2782,461],{"class":460},[450,2784,464],{"class":460},[450,2786,2787,2790,2792],{"class":452,"line":241},[450,2788,2789],{"class":456},"  hover",[450,2791,461],{"class":460},[450,2793,464],{"class":460},[450,2795,2796,2799,2801,2804,2806,2809,2811],{"class":452,"line":246},[450,2797,2798],{"class":567},"    beforeMount",[450,2800,601],{"class":632},[450,2802,2803],{"class":498},"el",[450,2805,810],{"class":460},[450,2807,2808],{"class":498}," binding",[450,2810,900],{"class":632},[450,2812,1779],{"class":460},[450,2814,2815,2818,2820,2823,2825,2828,2830,2832,2834],{"class":452,"line":490},[450,2816,2817],{"class":551},"      const",[450,2819,555],{"class":460},[450,2821,2822],{"class":498}," value",[450,2824,564],{"class":460},[450,2826,2827],{"class":632}," [] ",[450,2829,561],{"class":460},[450,2831,564],{"class":460},[450,2833,2808],{"class":498},[450,2835,574],{"class":460},[450,2837,2838,2841,2843,2846,2848,2850,2853,2855,2857,2859,2861],{"class":452,"line":257},[450,2839,2840],{"class":498},"      el",[450,2842,621],{"class":460},[450,2844,2845],{"class":567},"addEventListener",[450,2847,601],{"class":632},[450,2849,526],{"class":460},[450,2851,2852],{"class":529},"mouseenter",[450,2854,526],{"class":460},[450,2856,810],{"class":460},[450,2858,1237],{"class":460},[450,2860,607],{"class":551},[450,2862,464],{"class":460},[450,2864,2865,2868,2870,2873,2875,2878,2880,2883,2885,2887],{"class":452,"line":509},[450,2866,2867],{"class":498},"        el",[450,2869,621],{"class":460},[450,2871,2872],{"class":498},"classList",[450,2874,621],{"class":460},[450,2876,2877],{"class":567},"add",[450,2879,601],{"class":632},[450,2881,2882],{"class":460},"...",[450,2884,624],{"class":498},[450,2886,641],{"class":632},[450,2888,574],{"class":460},[450,2890,2891,2894,2896],{"class":452,"line":515},[450,2892,2893],{"class":460},"      }",[450,2895,641],{"class":632},[450,2897,574],{"class":460},[450,2899,2900,2902,2904,2906,2908,2910,2913,2915,2917,2919,2921],{"class":452,"line":651},[450,2901,2840],{"class":498},[450,2903,621],{"class":460},[450,2905,2845],{"class":567},[450,2907,601],{"class":632},[450,2909,526],{"class":460},[450,2911,2912],{"class":529},"mouseleave",[450,2914,526],{"class":460},[450,2916,810],{"class":460},[450,2918,1237],{"class":460},[450,2920,607],{"class":551},[450,2922,464],{"class":460},[450,2924,2925,2927,2929,2931,2933,2936,2938,2940,2942,2944],{"class":452,"line":671},[450,2926,2867],{"class":498},[450,2928,621],{"class":460},[450,2930,2872],{"class":498},[450,2932,621],{"class":460},[450,2934,2935],{"class":567},"remove",[450,2937,601],{"class":632},[450,2939,2882],{"class":460},[450,2941,624],{"class":498},[450,2943,641],{"class":632},[450,2945,574],{"class":460},[450,2947,2948,2950,2952],{"class":452,"line":691},[450,2949,2893],{"class":460},[450,2951,641],{"class":632},[450,2953,574],{"class":460},[450,2955,2956],{"class":452,"line":700},[450,2957,506],{"class":460},[450,2959,2960,2963,2965,2967,2969,2971,2973],{"class":452,"line":706},[450,2961,2962],{"class":567},"    unmounted",[450,2964,601],{"class":632},[450,2966,2803],{"class":498},[450,2968,810],{"class":460},[450,2970,2808],{"class":498},[450,2972,900],{"class":632},[450,2974,1779],{"class":460},[450,2976,2977,2979,2981,2984,2986,2988,2990,2992,2994,2996,2998],{"class":452,"line":726},[450,2978,2840],{"class":498},[450,2980,621],{"class":460},[450,2982,2983],{"class":567},"removeEventListener",[450,2985,601],{"class":632},[450,2987,526],{"class":460},[450,2989,2852],{"class":529},[450,2991,526],{"class":460},[450,2993,810],{"class":460},[450,2995,2808],{"class":498},[450,2997,641],{"class":632},[450,2999,574],{"class":460},[450,3001,3002,3004,3006,3008,3010,3012,3014,3016,3018,3020,3022],{"class":452,"line":754},[450,3003,2840],{"class":498},[450,3005,621],{"class":460},[450,3007,2983],{"class":567},[450,3009,601],{"class":632},[450,3011,526],{"class":460},[450,3013,2912],{"class":529},[450,3015,526],{"class":460},[450,3017,810],{"class":460},[450,3019,2808],{"class":498},[450,3021,641],{"class":632},[450,3023,574],{"class":460},[450,3025,3026],{"class":452,"line":773},[450,3027,506],{"class":460},[450,3029,3030],{"class":452,"line":782},[450,3031,512],{"class":460},[450,3033,3034],{"class":452,"line":820},[450,3035,3036],{"class":460},"},\n",[450,3038,3039],{"class":452,"line":829},[450,3040,3041],{"class":584},"////// and in the element above\n",[450,3043,3044,3047,3050,3053,3055,3057,3060],{"class":452,"line":835},[450,3045,3046],{"class":498},"v",[450,3048,3049],{"class":460},"-",[450,3051,3052],{"class":498},"hover",[450,3054,595],{"class":460},[450,3056,526],{"class":460},[450,3058,3059],{"class":529},"['bg-blue-700', 'text-gray-300']",[450,3061,3062],{"class":460},"\"\n",[80,3064,3066],{"id":3065},"summary","Summary",[73,3068,3069],{},"I really enjoyed this little challenge! It was great practice in several areas -\ndirectives, JavaScript date functions, and TypeScript.",[73,3071,3072],{},"Perhaps someone else will find a use for my datepicker!",[3074,3075,3076],"style",{},"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":240,"searchDepth":241,"depth":241,"links":3078},[3079,3080,3081,3091],{"id":408,"depth":241,"text":409},{"id":415,"depth":241,"text":416},{"id":428,"depth":241,"text":429,"children":3082},[3083,3084,3085,3086,3087,3088,3089,3090],{"id":435,"depth":246,"text":436},{"id":540,"depth":246,"text":541},{"id":1198,"depth":246,"text":1199},{"id":1272,"depth":246,"text":1273},{"id":1379,"depth":246,"text":1380},{"id":1449,"depth":246,"text":1450},{"id":1650,"depth":246,"text":1651},{"id":2025,"depth":246,"text":2026},{"id":2373,"depth":241,"text":2374,"children":3092},[3093,3094],{"id":2769,"depth":246,"text":2770},{"id":3065,"depth":246,"text":3066},"2022-01-25T00:00:00.000Z","Continuing to work on my rebuild of the GPX app, I decided to build my own datepicker using Vue 3, Bootstrap 5, and TypeScript","https://images.unsplash.com/photo-1506784926709-22f1ec395907?q=80&w=1468&auto=format&fit=crop",{},{"title":34,"description":3096},"siXa01R8eP4OZqBVI2J98defDaedpYcleuBa407XUyY",{"id":3102,"title":30,"body":3103,"date":3729,"description":3730,"extension":254,"image":3731,"meta":3732,"minRead":246,"navigation":58,"path":31,"seo":3733,"stem":32,"__hash__":3734},"blog/blog/06-ember-vue-typescript.md",{"type":65,"value":3104,"toc":3721},[3105,3109,3112,3116,3131,3135,3150,3154,3157,3160,3710,3713,3715,3718],[68,3106,3108],{"id":3107},"new-job","New Job",[73,3110,3111],{},"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.",[68,3113,3115],{"id":3114},"ember-is-different","Ember is ..... different",[73,3117,3118,3119,3124,3125,3130],{},"In my new job, I am responsible for upgrading a large cross-platform desktop app\nmade with ",[214,3120,3123],{"href":3121,"rel":3122},"https://emberjs.com",[218],"Ember"," and ",[214,3126,3129],{"href":3127,"rel":3128},"https://www.electron.org",[218],"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.",[68,3132,3134],{"id":3133},"keeping-my-vue-skills-sharp-and-picking-up-typescript","Keeping my Vue skills sharp, and picking up TypeScript",[73,3136,3137,3138,3143,3144,3149],{},"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",[214,3139,3142],{"href":3140,"rel":3141},"https://www.typescriptlang.org/",[218],"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 ",[214,3145,3148],{"href":3146,"rel":3147},"https://getbootstrap.com/",[218],"Bootstrap"," for styling.",[80,3151,3153],{"id":3152},"getting-started","Getting started",[73,3155,3156],{},"I haven't done much on the app so far. I'm just getting used to TypeScript.",[73,3158,3159],{},"One challenge I have tackled, however, is building an interface for the large\nJSON object that is imported:",[441,3161,3165],{"className":3162,"code":3163,"language":3164,"meta":240,"style":240},"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",[447,3166,3167,3172,3185,3194,3203,3215,3226,3237,3253,3268,3283,3298,3303,3312,3317,3331,3340,3349,3360,3365,3378,3391,3396,3405,3413,3424,3428,3441,3445,3458,3463,3470,3479,3492,3501,3510,3521,3525,3538,3543,3553,3563,3572,3584,3596,3601,3615,3629,3639,3654,3673,3679,3684,3689,3694,3699,3705],{"__ignoreMap":240},[450,3168,3169],{"class":452,"line":453},[450,3170,3171],{"class":584},"// types/index.ts\n",[450,3173,3174,3177,3180,3183],{"class":452,"line":241},[450,3175,3176],{"class":614},"export",[450,3178,3179],{"class":551}," interface",[450,3181,3182],{"class":456}," RootObject",[450,3184,464],{"class":460},[450,3186,3187,3190,3192],{"class":452,"line":246},[450,3188,3189],{"class":632},"    gpx",[450,3191,461],{"class":460},[450,3193,464],{"class":460},[450,3195,3196,3199,3201],{"class":452,"line":490},[450,3197,3198],{"class":632},"        $",[450,3200,461],{"class":460},[450,3202,464],{"class":460},[450,3204,3205,3208,3210,3213],{"class":452,"line":257},[450,3206,3207],{"class":632},"            creator",[450,3209,461],{"class":460},[450,3211,3212],{"class":456}," string",[450,3214,574],{"class":460},[450,3216,3217,3220,3222,3224],{"class":452,"line":509},[450,3218,3219],{"class":632},"            version",[450,3221,461],{"class":460},[450,3223,3212],{"class":456},[450,3225,574],{"class":460},[450,3227,3228,3231,3233,3235],{"class":452,"line":515},[450,3229,3230],{"class":632},"            xmlns",[450,3232,461],{"class":460},[450,3234,3212],{"class":456},[450,3236,574],{"class":460},[450,3238,3239,3242,3245,3247,3249,3251],{"class":452,"line":651},[450,3240,3241],{"class":460},"            '",[450,3243,3244],{"class":529},"xmlns:gpxtpx",[450,3246,1360],{"class":460},[450,3248,461],{"class":460},[450,3250,3212],{"class":456},[450,3252,574],{"class":460},[450,3254,3255,3257,3260,3262,3264,3266],{"class":452,"line":671},[450,3256,3241],{"class":460},[450,3258,3259],{"class":529},"xmlns:gpxx",[450,3261,1360],{"class":460},[450,3263,461],{"class":460},[450,3265,3212],{"class":456},[450,3267,574],{"class":460},[450,3269,3270,3272,3275,3277,3279,3281],{"class":452,"line":691},[450,3271,3241],{"class":460},[450,3273,3274],{"class":529},"xmlns:xsi",[450,3276,1360],{"class":460},[450,3278,461],{"class":460},[450,3280,3212],{"class":456},[450,3282,574],{"class":460},[450,3284,3285,3287,3290,3292,3294,3296],{"class":452,"line":700},[450,3286,3241],{"class":460},[450,3288,3289],{"class":529},"xsi:schemaLocation",[450,3291,1360],{"class":460},[450,3293,461],{"class":460},[450,3295,3212],{"class":456},[450,3297,574],{"class":460},[450,3299,3300],{"class":452,"line":706},[450,3301,3302],{"class":460},"        };\n",[450,3304,3305,3308,3310],{"class":452,"line":726},[450,3306,3307],{"class":632},"        metadata",[450,3309,461],{"class":460},[450,3311,966],{"class":498},[450,3313,3314],{"class":452,"line":754},[450,3315,3316],{"class":460},"            {\n",[450,3318,3319,3322,3324,3326,3329],{"class":452,"line":773},[450,3320,3321],{"class":632},"                name",[450,3323,461],{"class":460},[450,3325,3212],{"class":456},[450,3327,3328],{"class":498},"[]",[450,3330,574],{"class":460},[450,3332,3333,3336,3338],{"class":452,"line":782},[450,3334,3335],{"class":632},"                copyright",[450,3337,461],{"class":460},[450,3339,464],{"class":460},[450,3341,3342,3345,3347],{"class":452,"line":820},[450,3343,3344],{"class":632},"                    $",[450,3346,461],{"class":460},[450,3348,464],{"class":460},[450,3350,3351,3354,3356,3358],{"class":452,"line":829},[450,3352,3353],{"class":632},"                        author",[450,3355,461],{"class":460},[450,3357,3212],{"class":456},[450,3359,574],{"class":460},[450,3361,3362],{"class":452,"line":835},[450,3363,3364],{"class":460},"                    };\n",[450,3366,3367,3370,3372,3374,3376],{"class":452,"line":855},[450,3368,3369],{"class":632},"                    year",[450,3371,461],{"class":460},[450,3373,3212],{"class":456},[450,3375,3328],{"class":498},[450,3377,574],{"class":460},[450,3379,3380,3383,3385,3387,3389],{"class":452,"line":906},[450,3381,3382],{"class":632},"                    license",[450,3384,461],{"class":460},[450,3386,3212],{"class":456},[450,3388,3328],{"class":498},[450,3390,574],{"class":460},[450,3392,3393],{"class":452,"line":936},[450,3394,3395],{"class":460},"                };\n",[450,3397,3398,3401,3403],{"class":452,"line":945},[450,3399,3400],{"class":632},"                link",[450,3402,461],{"class":460},[450,3404,464],{"class":460},[450,3406,3407,3409,3411],{"class":452,"line":950},[450,3408,3344],{"class":632},[450,3410,461],{"class":460},[450,3412,464],{"class":460},[450,3414,3415,3418,3420,3422],{"class":452,"line":956},[450,3416,3417],{"class":632},"                        href",[450,3419,461],{"class":460},[450,3421,3212],{"class":456},[450,3423,574],{"class":460},[450,3425,3426],{"class":452,"line":969},[450,3427,3364],{"class":460},[450,3429,3430,3433,3435,3437,3439],{"class":452,"line":982},[450,3431,3432],{"class":632},"                    text",[450,3434,461],{"class":460},[450,3436,3212],{"class":456},[450,3438,3328],{"class":498},[450,3440,574],{"class":460},[450,3442,3443],{"class":452,"line":994},[450,3444,3395],{"class":460},[450,3446,3447,3450,3452,3454,3456],{"class":452,"line":1006},[450,3448,3449],{"class":632},"                time",[450,3451,461],{"class":460},[450,3453,499],{"class":456},[450,3455,3328],{"class":498},[450,3457,574],{"class":460},[450,3459,3460],{"class":452,"line":1018},[450,3461,3462],{"class":460},"            },\n",[450,3464,3465,3468],{"class":452,"line":1030},[450,3466,3467],{"class":498},"        ]",[450,3469,574],{"class":460},[450,3471,3472,3475,3477],{"class":452,"line":1042},[450,3473,3474],{"class":632},"        trk",[450,3476,461],{"class":460},[450,3478,464],{"class":460},[450,3480,3481,3484,3486,3488,3490],{"class":452,"line":1054},[450,3482,3483],{"class":632},"            name",[450,3485,461],{"class":460},[450,3487,3212],{"class":456},[450,3489,3328],{"class":498},[450,3491,574],{"class":460},[450,3493,3494,3497,3499],{"class":452,"line":1066},[450,3495,3496],{"class":632},"            link",[450,3498,461],{"class":460},[450,3500,464],{"class":460},[450,3502,3503,3506,3508],{"class":452,"line":1078},[450,3504,3505],{"class":632},"                $",[450,3507,461],{"class":460},[450,3509,464],{"class":460},[450,3511,3512,3515,3517,3519],{"class":452,"line":1090},[450,3513,3514],{"class":632},"                    href",[450,3516,461],{"class":460},[450,3518,3212],{"class":456},[450,3520,574],{"class":460},[450,3522,3523],{"class":452,"line":1102},[450,3524,3395],{"class":460},[450,3526,3527,3530,3532,3534,3536],{"class":452,"line":1114},[450,3528,3529],{"class":632},"                text",[450,3531,461],{"class":460},[450,3533,3212],{"class":456},[450,3535,3328],{"class":498},[450,3537,574],{"class":460},[450,3539,3540],{"class":452,"line":1121},[450,3541,3542],{"class":460},"            };\n",[450,3544,3546,3549,3551],{"class":452,"line":3545},40,[450,3547,3548],{"class":632},"            trkseg",[450,3550,461],{"class":460},[450,3552,464],{"class":460},[450,3554,3556,3559,3561],{"class":452,"line":3555},41,[450,3557,3558],{"class":632},"                trkpt",[450,3560,461],{"class":460},[450,3562,464],{"class":460},[450,3564,3566,3568,3570],{"class":452,"line":3565},42,[450,3567,3344],{"class":632},[450,3569,461],{"class":460},[450,3571,464],{"class":460},[450,3573,3575,3578,3580,3582],{"class":452,"line":3574},43,[450,3576,3577],{"class":632},"                        lat",[450,3579,461],{"class":460},[450,3581,3212],{"class":456},[450,3583,574],{"class":460},[450,3585,3587,3590,3592,3594],{"class":452,"line":3586},44,[450,3588,3589],{"class":632},"                        lon",[450,3591,461],{"class":460},[450,3593,3212],{"class":456},[450,3595,574],{"class":460},[450,3597,3599],{"class":452,"line":3598},45,[450,3600,3364],{"class":460},[450,3602,3604,3607,3609,3611,3613],{"class":452,"line":3603},46,[450,3605,3606],{"class":632},"                    ele",[450,3608,461],{"class":460},[450,3610,3212],{"class":456},[450,3612,3328],{"class":498},[450,3614,574],{"class":460},[450,3616,3618,3621,3623,3625,3627],{"class":452,"line":3617},47,[450,3619,3620],{"class":632},"                    time",[450,3622,461],{"class":460},[450,3624,499],{"class":456},[450,3626,3328],{"class":498},[450,3628,574],{"class":460},[450,3630,3632,3635,3637],{"class":452,"line":3631},48,[450,3633,3634],{"class":632},"                    extensions",[450,3636,461],{"class":460},[450,3638,464],{"class":460},[450,3640,3642,3645,3648,3650,3652],{"class":452,"line":3641},49,[450,3643,3644],{"class":460},"                        '",[450,3646,3647],{"class":529},"gpxtpx:TrackPointExtension",[450,3649,1360],{"class":460},[450,3651,461],{"class":460},[450,3653,464],{"class":460},[450,3655,3657,3660,3663,3665,3667,3669,3671],{"class":452,"line":3656},50,[450,3658,3659],{"class":460},"                            '",[450,3661,3662],{"class":529},"gpxtpx:hr",[450,3664,1360],{"class":460},[450,3666,461],{"class":460},[450,3668,3212],{"class":456},[450,3670,3328],{"class":498},[450,3672,574],{"class":460},[450,3674,3676],{"class":452,"line":3675},51,[450,3677,3678],{"class":460},"                        };\n",[450,3680,3682],{"class":452,"line":3681},52,[450,3683,3364],{"class":460},[450,3685,3687],{"class":452,"line":3686},53,[450,3688,3395],{"class":460},[450,3690,3692],{"class":452,"line":3691},54,[450,3693,3542],{"class":460},[450,3695,3697],{"class":452,"line":3696},55,[450,3698,3302],{"class":460},[450,3700,3702],{"class":452,"line":3701},56,[450,3703,3704],{"class":460},"    };\n",[450,3706,3708],{"class":452,"line":3707},57,[450,3709,1376],{"class":460},[73,3711,3712],{},"This took some work, but I really think it helped my understanding of\nTypeScript.",[68,3714,316],{"id":315},[73,3716,3717],{},"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.",[3074,3719,3720],{},"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":240,"searchDepth":241,"depth":241,"links":3722},[3723,3724,3725,3728],{"id":3107,"depth":241,"text":3108},{"id":3114,"depth":241,"text":3115},{"id":3133,"depth":241,"text":3134,"children":3726},[3727],{"id":3152,"depth":246,"text":3153},{"id":315,"depth":241,"text":316},"2022-01-13T00:00:00.000Z","Learning Ember for work, rebuilding GPX app with Vue and TypeScript","https://images.unsplash.com/photo-1587620962725-abab7fe55159?q=80&w=1631&auto=format&fit=crop",{},{"title":30,"description":3730},"TbrlV5qLjd_brSKOoytgmK5V8tmF_Ny4FfKvPP6f5dU",{"id":3736,"title":26,"body":3737,"date":5244,"description":5245,"extension":254,"image":5246,"meta":5247,"minRead":257,"navigation":58,"path":27,"seo":5248,"stem":28,"__hash__":5249},"blog/blog/05-gpx-electron-app.md",{"type":65,"value":3738,"toc":5236},[3739,3742,3746,3754,3758,3767,3776,3780,3787,3814,3817,4095,4098,4587,4594,4666,4669,5210,5213,5216,5220,5223,5227,5230,5233],[73,3740,3741],{},"Brushing up on my Vanilla JS skills and building an Electron app",[68,3743,3745],{"id":3744},"who-needs-vue","Who Needs Vue?",[73,3747,3748,3749,3753],{},"I decided that building this app would be an excellent chance to brush up on my\nVanilla JavaScript skills. I've also been wanting to give\n",[214,3750,3129],{"href":3751,"rel":3752},"https://electronjs.org",[218]," a go. The Electron documentation is nice, and\nit has been a fun process.",[80,3755,3757],{"id":3756},"ejs-and-bulma","EJS and Bulma",[73,3759,3760,3761,3766],{},"While I didn't want to use Vue, I did decide to use ",[214,3762,3765],{"href":3763,"rel":3764},"https://ejs.co/",[218],"EJS"," to\nmake it easier split up my pages into components and reuse my banner and\nnavigation. I'm still keeping all of my logic in my JS files, rather than taking\nfull advantage of EJS features. I realize this can technically be done in plain\nJS, but it gets to be a bit clunky. On a related note - I'm amazed that in 2021\nthere still isn't an easy way to do this in plain HTML, CSS, and JavaScript.\nEvery solution I've found involves adding a framework or writing a bunch of HTML\ninside a JavaScript function or file.",[73,3768,3769,3770,3775],{},"For my styling I decided to use ",[214,3771,3774],{"href":3772,"rel":3773},"https://bulma.io/",[218],"Bulma",". Bulma was a nice\nfit, because it simply provides CSS classes and nothing else. I wanted to write\nall of the JS myself, and didn't want something bulky like Bootstrap.",[68,3777,3779],{"id":3778},"uploading-and-processing-gpx-files","Uploading and Processing GPX Files",[73,3781,3782,3783,3786],{},"The first step was to get data from a GPX file. In my\n",[214,3784,3785],{"href":23},"last post"," I described the basic total distance and\ntotal time calculations. In addition to these, I wanted to get the following\ninformation:",[175,3788,3789,3792,3811],{},[178,3790,3791],{},"pace",[178,3793,3794,3795],{},"segement calculations for 1 km, 1 mile, 5 km, 10 km, 10 miles, half marathon,\nand full marathon\n",[175,3796,3797,3800,3803,3805,3808],{},[178,3798,3799],{},"distance",[178,3801,3802],{},"time",[178,3804,3791],{},[178,3806,3807],{},"starting point",[178,3809,3810],{},"ending point",[178,3812,3813],{},"real language starting location (not just lat/lon)",[73,3815,3816],{},"First, I got the basic information and set up a set of arrays to track the time\nand distance.",[441,3818,3820],{"className":443,"code":3819,"language":445,"meta":240,"style":240},"const eventTime = gpxFileData.gpx.metadata[0].time[0];\nconst trkpts = gpxFileData.gpx.trk[0].trkseg[0].trkpt;\nconst trkptLength = trkpts.length;\nconst startTime = new Date(trkpts[0].time[0]);\nconst finishTime = new Date(trkpts[trkptLength - 1].time[0]);\nconst totalTime = (finishTime - startTime) / 1000;\nconst timeArray = [];\nconst totalTimeArray = [];\nconst latLongArray = [];\nconst distanceArray = [];\nlet totalDistance = 0;\nconst totalDistanceArray = [];\nlet timeCounter = 0;\n",[447,3821,3822,3859,3899,3917,3948,3980,4004,4017,4030,4043,4056,4069,4082],{"__ignoreMap":240},[450,3823,3824,3826,3829,3831,3834,3836,3839,3841,3844,3846,3848,3850,3853,3855,3857],{"class":452,"line":453},[450,3825,552],{"class":551},[450,3827,3828],{"class":498}," eventTime ",[450,3830,595],{"class":460},[450,3832,3833],{"class":498}," gpxFileData",[450,3835,621],{"class":460},[450,3837,3838],{"class":498},"gpx",[450,3840,621],{"class":460},[450,3842,3843],{"class":498},"metadata[",[450,3845,807],{"class":769},[450,3847,535],{"class":498},[450,3849,621],{"class":460},[450,3851,3852],{"class":498},"time[",[450,3854,807],{"class":769},[450,3856,535],{"class":498},[450,3858,574],{"class":460},[450,3860,3861,3863,3866,3868,3870,3872,3874,3876,3879,3881,3883,3885,3888,3890,3892,3894,3897],{"class":452,"line":241},[450,3862,552],{"class":551},[450,3864,3865],{"class":498}," trkpts ",[450,3867,595],{"class":460},[450,3869,3833],{"class":498},[450,3871,621],{"class":460},[450,3873,3838],{"class":498},[450,3875,621],{"class":460},[450,3877,3878],{"class":498},"trk[",[450,3880,807],{"class":769},[450,3882,535],{"class":498},[450,3884,621],{"class":460},[450,3886,3887],{"class":498},"trkseg[",[450,3889,807],{"class":769},[450,3891,535],{"class":498},[450,3893,621],{"class":460},[450,3895,3896],{"class":498},"trkpt",[450,3898,574],{"class":460},[450,3900,3901,3903,3906,3908,3911,3913,3915],{"class":452,"line":246},[450,3902,552],{"class":551},[450,3904,3905],{"class":498}," trkptLength ",[450,3907,595],{"class":460},[450,3909,3910],{"class":498}," trkpts",[450,3912,621],{"class":460},[450,3914,763],{"class":498},[450,3916,574],{"class":460},[450,3918,3919,3921,3924,3926,3928,3930,3933,3935,3937,3939,3941,3943,3946],{"class":452,"line":490},[450,3920,552],{"class":551},[450,3922,3923],{"class":498}," startTime ",[450,3925,595],{"class":460},[450,3927,1496],{"class":460},[450,3929,499],{"class":567},[450,3931,3932],{"class":498},"(trkpts[",[450,3934,807],{"class":769},[450,3936,535],{"class":498},[450,3938,621],{"class":460},[450,3940,3852],{"class":498},[450,3942,807],{"class":769},[450,3944,3945],{"class":498},"])",[450,3947,574],{"class":460},[450,3949,3950,3952,3955,3957,3959,3961,3964,3966,3968,3970,3972,3974,3976,3978],{"class":452,"line":257},[450,3951,552],{"class":551},[450,3953,3954],{"class":498}," finishTime ",[450,3956,595],{"class":460},[450,3958,1496],{"class":460},[450,3960,499],{"class":567},[450,3962,3963],{"class":498},"(trkpts[trkptLength ",[450,3965,3049],{"class":460},[450,3967,1632],{"class":769},[450,3969,535],{"class":498},[450,3971,621],{"class":460},[450,3973,3852],{"class":498},[450,3975,807],{"class":769},[450,3977,3945],{"class":498},[450,3979,574],{"class":460},[450,3981,3982,3984,3987,3989,3992,3994,3997,4000,4002],{"class":452,"line":509},[450,3983,552],{"class":551},[450,3985,3986],{"class":498}," totalTime ",[450,3988,595],{"class":460},[450,3990,3991],{"class":498}," (finishTime ",[450,3993,3049],{"class":460},[450,3995,3996],{"class":498}," startTime) ",[450,3998,3999],{"class":460},"/",[450,4001,1436],{"class":769},[450,4003,574],{"class":460},[450,4005,4006,4008,4011,4013,4015],{"class":452,"line":515},[450,4007,552],{"class":551},[450,4009,4010],{"class":498}," timeArray ",[450,4012,595],{"class":460},[450,4014,1704],{"class":498},[450,4016,574],{"class":460},[450,4018,4019,4021,4024,4026,4028],{"class":452,"line":651},[450,4020,552],{"class":551},[450,4022,4023],{"class":498}," totalTimeArray ",[450,4025,595],{"class":460},[450,4027,1704],{"class":498},[450,4029,574],{"class":460},[450,4031,4032,4034,4037,4039,4041],{"class":452,"line":671},[450,4033,552],{"class":551},[450,4035,4036],{"class":498}," latLongArray ",[450,4038,595],{"class":460},[450,4040,1704],{"class":498},[450,4042,574],{"class":460},[450,4044,4045,4047,4050,4052,4054],{"class":452,"line":691},[450,4046,552],{"class":551},[450,4048,4049],{"class":498}," distanceArray ",[450,4051,595],{"class":460},[450,4053,1704],{"class":498},[450,4055,574],{"class":460},[450,4057,4058,4060,4063,4065,4067],{"class":452,"line":700},[450,4059,1749],{"class":551},[450,4061,4062],{"class":498}," totalDistance ",[450,4064,595],{"class":460},[450,4066,1618],{"class":769},[450,4068,574],{"class":460},[450,4070,4071,4073,4076,4078,4080],{"class":452,"line":706},[450,4072,552],{"class":551},[450,4074,4075],{"class":498}," totalDistanceArray ",[450,4077,595],{"class":460},[450,4079,1704],{"class":498},[450,4081,574],{"class":460},[450,4083,4084,4086,4089,4091,4093],{"class":452,"line":726},[450,4085,1749],{"class":551},[450,4087,4088],{"class":498}," timeCounter ",[450,4090,595],{"class":460},[450,4092,1618],{"class":769},[450,4094,574],{"class":460},[73,4096,4097],{},"Then I processed the GPX data and built the arrays",[441,4099,4101],{"className":443,"code":4100,"language":445,"meta":240,"style":240},"// build time and total time arrays\nfor (let i = 1; i \u003C trkptLength; i++) {\n    let segmentTime =\n        new Date(trkpts[i].time[0]) - new Date(trkpts[i - 1].time[0]);\n    timeArray.push(segmentTime);\n    timeCounter += segmentTime;\n    totalTimeArray.push(timeCounter);\n}\n\n// loop through trackpoints\nfor (let i = 1; i \u003C trkptLength; i++) {\n    let lat1 = trkpts[i - 1].$.lat;\n    let lon1 = trkpts[i - 1].$.lon;\n    let lat2 = trkpts[i].$.lat;\n    let lon2 = trkpts[i].$.lon;\n    let segmentDistance = distance(lat1, lon1, lat2, lon2);\n\n    // distanceArray includes distance for each segment\n    distanceArray.push(segmentDistance);\n\n    // totalDistanceArray includes running total\n    totalDistance += segmentDistance;\n    totalDistanceArray.push(totalDistance);\n\n    // latLongArray includes pairs of coordinates\n    latLongArray.push([trkpts[0].$.lat, trkpts[0].$.lon]);\n}\n",[447,4102,4103,4108,4143,4152,4214,4232,4244,4262,4266,4270,4275,4307,4340,4372,4399,4426,4459,4463,4468,4486,4490,4495,4506,4524,4528,4533,4583],{"__ignoreMap":240},[450,4104,4105],{"class":452,"line":453},[450,4106,4107],{"class":584},"// build time and total time arrays\n",[450,4109,4110,4113,4115,4117,4120,4122,4124,4126,4128,4130,4133,4135,4137,4139,4141],{"class":452,"line":241},[450,4111,4112],{"class":614},"for",[450,4114,1293],{"class":498},[450,4116,1749],{"class":551},[450,4118,4119],{"class":498}," i ",[450,4121,595],{"class":460},[450,4123,1632],{"class":769},[450,4125,1759],{"class":460},[450,4127,4119],{"class":498},[450,4129,878],{"class":460},[450,4131,4132],{"class":498}," trkptLength",[450,4134,1759],{"class":460},[450,4136,1752],{"class":498},[450,4138,1774],{"class":460},[450,4140,900],{"class":498},[450,4142,1779],{"class":460},[450,4144,4145,4147,4150],{"class":452,"line":246},[450,4146,1571],{"class":551},[450,4148,4149],{"class":498}," segmentTime",[450,4151,2091],{"class":460},[450,4153,4154,4157,4159,4161,4164,4166,4169,4171,4173,4175,4177,4179,4182,4184,4186,4188,4190,4192,4194,4196,4198,4200,4202,4204,4206,4208,4210,4212],{"class":452,"line":490},[450,4155,4156],{"class":460},"        new",[450,4158,499],{"class":567},[450,4160,601],{"class":632},[450,4162,4163],{"class":498},"trkpts",[450,4165,740],{"class":632},[450,4167,4168],{"class":498},"i",[450,4170,535],{"class":632},[450,4172,621],{"class":460},[450,4174,3802],{"class":498},[450,4176,740],{"class":632},[450,4178,807],{"class":769},[450,4180,4181],{"class":632},"]) ",[450,4183,3049],{"class":460},[450,4185,1496],{"class":460},[450,4187,499],{"class":567},[450,4189,601],{"class":632},[450,4191,4163],{"class":498},[450,4193,740],{"class":632},[450,4195,4168],{"class":498},[450,4197,1493],{"class":460},[450,4199,1632],{"class":769},[450,4201,535],{"class":632},[450,4203,621],{"class":460},[450,4205,3802],{"class":498},[450,4207,740],{"class":632},[450,4209,807],{"class":769},[450,4211,3945],{"class":632},[450,4213,574],{"class":460},[450,4215,4216,4219,4221,4223,4225,4228,4230],{"class":452,"line":257},[450,4217,4218],{"class":498},"    timeArray",[450,4220,621],{"class":460},[450,4222,1789],{"class":567},[450,4224,601],{"class":632},[450,4226,4227],{"class":498},"segmentTime",[450,4229,641],{"class":632},[450,4231,574],{"class":460},[450,4233,4234,4237,4240,4242],{"class":452,"line":509},[450,4235,4236],{"class":498},"    timeCounter",[450,4238,4239],{"class":460}," +=",[450,4241,4149],{"class":498},[450,4243,574],{"class":460},[450,4245,4246,4249,4251,4253,4255,4258,4260],{"class":452,"line":515},[450,4247,4248],{"class":498},"    totalTimeArray",[450,4250,621],{"class":460},[450,4252,1789],{"class":567},[450,4254,601],{"class":632},[450,4256,4257],{"class":498},"timeCounter",[450,4259,641],{"class":632},[450,4261,574],{"class":460},[450,4263,4264],{"class":452,"line":651},[450,4265,1376],{"class":460},[450,4267,4268],{"class":452,"line":671},[450,4269,579],{"emptyLinePlaceholder":58},[450,4271,4272],{"class":452,"line":691},[450,4273,4274],{"class":584},"// loop through trackpoints\n",[450,4276,4277,4279,4281,4283,4285,4287,4289,4291,4293,4295,4297,4299,4301,4303,4305],{"class":452,"line":700},[450,4278,4112],{"class":614},[450,4280,1293],{"class":498},[450,4282,1749],{"class":551},[450,4284,4119],{"class":498},[450,4286,595],{"class":460},[450,4288,1632],{"class":769},[450,4290,1759],{"class":460},[450,4292,4119],{"class":498},[450,4294,878],{"class":460},[450,4296,4132],{"class":498},[450,4298,1759],{"class":460},[450,4300,1752],{"class":498},[450,4302,1774],{"class":460},[450,4304,900],{"class":498},[450,4306,1779],{"class":460},[450,4308,4309,4311,4314,4316,4318,4320,4322,4324,4326,4328,4330,4333,4335,4338],{"class":452,"line":706},[450,4310,1571],{"class":551},[450,4312,4313],{"class":498}," lat1",[450,4315,564],{"class":460},[450,4317,3910],{"class":498},[450,4319,740],{"class":632},[450,4321,4168],{"class":498},[450,4323,1493],{"class":460},[450,4325,1632],{"class":769},[450,4327,535],{"class":632},[450,4329,621],{"class":460},[450,4331,4332],{"class":498},"$",[450,4334,621],{"class":460},[450,4336,4337],{"class":498},"lat",[450,4339,574],{"class":460},[450,4341,4342,4344,4347,4349,4351,4353,4355,4357,4359,4361,4363,4365,4367,4370],{"class":452,"line":726},[450,4343,1571],{"class":551},[450,4345,4346],{"class":498}," lon1",[450,4348,564],{"class":460},[450,4350,3910],{"class":498},[450,4352,740],{"class":632},[450,4354,4168],{"class":498},[450,4356,1493],{"class":460},[450,4358,1632],{"class":769},[450,4360,535],{"class":632},[450,4362,621],{"class":460},[450,4364,4332],{"class":498},[450,4366,621],{"class":460},[450,4368,4369],{"class":498},"lon",[450,4371,574],{"class":460},[450,4373,4374,4376,4379,4381,4383,4385,4387,4389,4391,4393,4395,4397],{"class":452,"line":754},[450,4375,1571],{"class":551},[450,4377,4378],{"class":498}," lat2",[450,4380,564],{"class":460},[450,4382,3910],{"class":498},[450,4384,740],{"class":632},[450,4386,4168],{"class":498},[450,4388,535],{"class":632},[450,4390,621],{"class":460},[450,4392,4332],{"class":498},[450,4394,621],{"class":460},[450,4396,4337],{"class":498},[450,4398,574],{"class":460},[450,4400,4401,4403,4406,4408,4410,4412,4414,4416,4418,4420,4422,4424],{"class":452,"line":773},[450,4402,1571],{"class":551},[450,4404,4405],{"class":498}," lon2",[450,4407,564],{"class":460},[450,4409,3910],{"class":498},[450,4411,740],{"class":632},[450,4413,4168],{"class":498},[450,4415,535],{"class":632},[450,4417,621],{"class":460},[450,4419,4332],{"class":498},[450,4421,621],{"class":460},[450,4423,4369],{"class":498},[450,4425,574],{"class":460},[450,4427,4428,4430,4433,4435,4438,4440,4443,4445,4447,4449,4451,4453,4455,4457],{"class":452,"line":782},[450,4429,1571],{"class":551},[450,4431,4432],{"class":498}," segmentDistance",[450,4434,564],{"class":460},[450,4436,4437],{"class":567}," distance",[450,4439,601],{"class":632},[450,4441,4442],{"class":498},"lat1",[450,4444,810],{"class":460},[450,4446,4346],{"class":498},[450,4448,810],{"class":460},[450,4450,4378],{"class":498},[450,4452,810],{"class":460},[450,4454,4405],{"class":498},[450,4456,641],{"class":632},[450,4458,574],{"class":460},[450,4460,4461],{"class":452,"line":820},[450,4462,579],{"emptyLinePlaceholder":58},[450,4464,4465],{"class":452,"line":829},[450,4466,4467],{"class":584},"    // distanceArray includes distance for each segment\n",[450,4469,4470,4473,4475,4477,4479,4482,4484],{"class":452,"line":835},[450,4471,4472],{"class":498},"    distanceArray",[450,4474,621],{"class":460},[450,4476,1789],{"class":567},[450,4478,601],{"class":632},[450,4480,4481],{"class":498},"segmentDistance",[450,4483,641],{"class":632},[450,4485,574],{"class":460},[450,4487,4488],{"class":452,"line":855},[450,4489,579],{"emptyLinePlaceholder":58},[450,4491,4492],{"class":452,"line":906},[450,4493,4494],{"class":584},"    // totalDistanceArray includes running total\n",[450,4496,4497,4500,4502,4504],{"class":452,"line":936},[450,4498,4499],{"class":498},"    totalDistance",[450,4501,4239],{"class":460},[450,4503,4432],{"class":498},[450,4505,574],{"class":460},[450,4507,4508,4511,4513,4515,4517,4520,4522],{"class":452,"line":945},[450,4509,4510],{"class":498},"    totalDistanceArray",[450,4512,621],{"class":460},[450,4514,1789],{"class":567},[450,4516,601],{"class":632},[450,4518,4519],{"class":498},"totalDistance",[450,4521,641],{"class":632},[450,4523,574],{"class":460},[450,4525,4526],{"class":452,"line":950},[450,4527,579],{"emptyLinePlaceholder":58},[450,4529,4530],{"class":452,"line":956},[450,4531,4532],{"class":584},"    // latLongArray includes pairs of coordinates\n",[450,4534,4535,4538,4540,4542,4545,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579,4581],{"class":452,"line":969},[450,4536,4537],{"class":498},"    latLongArray",[450,4539,621],{"class":460},[450,4541,1789],{"class":567},[450,4543,4544],{"class":632},"([",[450,4546,4163],{"class":498},[450,4548,740],{"class":632},[450,4550,807],{"class":769},[450,4552,535],{"class":632},[450,4554,621],{"class":460},[450,4556,4332],{"class":498},[450,4558,621],{"class":460},[450,4560,4337],{"class":498},[450,4562,810],{"class":460},[450,4564,3910],{"class":498},[450,4566,740],{"class":632},[450,4568,807],{"class":769},[450,4570,535],{"class":632},[450,4572,621],{"class":460},[450,4574,4332],{"class":498},[450,4576,621],{"class":460},[450,4578,4369],{"class":498},[450,4580,3945],{"class":632},[450,4582,574],{"class":460},[450,4584,4585],{"class":452,"line":982},[450,4586,1376],{"class":460},[73,4588,4589,4590,4593],{},"Next I used the initial coordinates for my ",[447,4591,4592],{},"location"," information",[441,4595,4597],{"className":443,"code":4596,"language":445,"meta":240,"style":240},"// add the initial coordinates\nlatLongArray.push([trkpts[0].$.lat, trkpts[0].$.lon]);\nlet startingLocation = latLongArray[0];\n",[447,4598,4599,4604,4648],{"__ignoreMap":240},[450,4600,4601],{"class":452,"line":453},[450,4602,4603],{"class":584},"// add the initial coordinates\n",[450,4605,4606,4609,4611,4613,4616,4618,4620,4622,4624,4626,4628,4630,4633,4635,4637,4639,4641,4643,4646],{"class":452,"line":241},[450,4607,4608],{"class":498},"latLongArray",[450,4610,621],{"class":460},[450,4612,1789],{"class":567},[450,4614,4615],{"class":498},"([trkpts[",[450,4617,807],{"class":769},[450,4619,535],{"class":498},[450,4621,621],{"class":460},[450,4623,4332],{"class":498},[450,4625,621],{"class":460},[450,4627,4337],{"class":498},[450,4629,810],{"class":460},[450,4631,4632],{"class":498}," trkpts[",[450,4634,807],{"class":769},[450,4636,535],{"class":498},[450,4638,621],{"class":460},[450,4640,4332],{"class":498},[450,4642,621],{"class":460},[450,4644,4645],{"class":498},"lon])",[450,4647,574],{"class":460},[450,4649,4650,4652,4655,4657,4660,4662,4664],{"class":452,"line":246},[450,4651,1749],{"class":551},[450,4653,4654],{"class":498}," startingLocation ",[450,4656,595],{"class":460},[450,4658,4659],{"class":498}," latLongArray[",[450,4661,807],{"class":769},[450,4663,535],{"class":498},[450,4665,574],{"class":460},[73,4667,4668],{},"Finally, I built a function that would create a sliding window of a given length\n(1 km, 5 km, etc) and look for the fastest segment:",[441,4670,4672],{"className":443,"code":4671,"language":445,"meta":240,"style":240},"const getFastestSegmentData = (segmentName, distanceMin, distanceMax) => {\n    let fastestSegmentData = { rawTime: 9999999999 };\n    let trackPointValues = parseInt(distanceMin * 50); // skip points \u003C\u003C\u003C desired length\n    for (let i = 0; i \u003C trkptLength; i++) {\n        for (let j = i + trackPointValues; j \u003C trkptLength; j++) {\n            let distanceSeg = totalDistanceArray[j] - totalDistanceArray[i];\n            if (distanceSeg > distanceMin && distanceSeg \u003C distanceMax) {\n                let timeSeg = totalTimeArray[j] - totalTimeArray[i];\n                let newPace = timeSeg / distanceSeg;\n                if (newPace \u003C fastestSegmentData.rawTime) {\n                    fastestSegmentData = {\n                        segmentMin: segmentName,\n                        startTime: totalTimeArray[i] / 1000,\n                        endTime: totalTimeArray[j] / 1000,\n                        startPoint: totalDistanceArray[i],\n                        endPoint: totalDistanceArray[j],\n                        time: timeSeg / 1000,\n                        pace: newPace / 1000,\n                        distance: distanceSeg.toFixed(3),\n                        timeArray: totalTimeArray.slice(i, j + 1),\n                        distanceArray: totalDistanceArray.slice(i, j + 1),\n                        rawTime: newPace,\n                    };\n                }\n            }\n        }\n    }\n    return fastestSegmentData;\n};\n",[447,4673,4674,4704,4726,4755,4787,4825,4858,4884,4915,4933,4956,4965,4977,4998,5019,5036,5053,5068,5083,5106,5135,5164,5175,5179,5184,5189,5194,5198,5206],{"__ignoreMap":240},[450,4675,4676,4678,4681,4683,4685,4688,4690,4693,4695,4698,4700,4702],{"class":452,"line":453},[450,4677,552],{"class":551},[450,4679,4680],{"class":498}," getFastestSegmentData ",[450,4682,595],{"class":460},[450,4684,1293],{"class":460},[450,4686,4687],{"class":1296},"segmentName",[450,4689,810],{"class":460},[450,4691,4692],{"class":1296}," distanceMin",[450,4694,810],{"class":460},[450,4696,4697],{"class":1296}," distanceMax",[450,4699,641],{"class":460},[450,4701,607],{"class":551},[450,4703,464],{"class":460},[450,4705,4706,4708,4711,4713,4715,4718,4720,4723],{"class":452,"line":241},[450,4707,1571],{"class":551},[450,4709,4710],{"class":498}," fastestSegmentData",[450,4712,564],{"class":460},[450,4714,555],{"class":460},[450,4716,4717],{"class":632}," rawTime",[450,4719,461],{"class":460},[450,4721,4722],{"class":769}," 9999999999",[450,4724,4725],{"class":460}," };\n",[450,4727,4728,4730,4733,4735,4738,4740,4743,4745,4748,4750,4752],{"class":452,"line":246},[450,4729,1571],{"class":551},[450,4731,4732],{"class":498}," trackPointValues",[450,4734,564],{"class":460},[450,4736,4737],{"class":567}," parseInt",[450,4739,601],{"class":632},[450,4741,4742],{"class":498},"distanceMin",[450,4744,1823],{"class":460},[450,4746,4747],{"class":769}," 50",[450,4749,641],{"class":632},[450,4751,1759],{"class":460},[450,4753,4754],{"class":584}," // skip points \u003C\u003C\u003C desired length\n",[450,4756,4757,4759,4761,4763,4765,4767,4769,4771,4773,4775,4777,4779,4781,4783,4785],{"class":452,"line":490},[450,4758,1744],{"class":614},[450,4760,1293],{"class":632},[450,4762,1749],{"class":551},[450,4764,1752],{"class":498},[450,4766,564],{"class":460},[450,4768,1618],{"class":769},[450,4770,1759],{"class":460},[450,4772,1752],{"class":498},[450,4774,1764],{"class":460},[450,4776,4132],{"class":498},[450,4778,1759],{"class":460},[450,4780,1752],{"class":498},[450,4782,1774],{"class":460},[450,4784,900],{"class":632},[450,4786,1779],{"class":460},[450,4788,4789,4792,4794,4796,4799,4801,4803,4805,4807,4809,4811,4813,4815,4817,4819,4821,4823],{"class":452,"line":257},[450,4790,4791],{"class":614},"        for",[450,4793,1293],{"class":632},[450,4795,1749],{"class":551},[450,4797,4798],{"class":498}," j",[450,4800,564],{"class":460},[450,4802,1752],{"class":498},[450,4804,2121],{"class":460},[450,4806,4732],{"class":498},[450,4808,1759],{"class":460},[450,4810,4798],{"class":498},[450,4812,1764],{"class":460},[450,4814,4132],{"class":498},[450,4816,1759],{"class":460},[450,4818,4798],{"class":498},[450,4820,1774],{"class":460},[450,4822,900],{"class":632},[450,4824,1779],{"class":460},[450,4826,4827,4830,4833,4835,4838,4840,4843,4846,4848,4850,4852,4854,4856],{"class":452,"line":509},[450,4828,4829],{"class":551},"            let",[450,4831,4832],{"class":498}," distanceSeg",[450,4834,564],{"class":460},[450,4836,4837],{"class":498}," totalDistanceArray",[450,4839,740],{"class":632},[450,4841,4842],{"class":498},"j",[450,4844,4845],{"class":632},"] ",[450,4847,3049],{"class":460},[450,4849,4837],{"class":498},[450,4851,740],{"class":632},[450,4853,4168],{"class":498},[450,4855,535],{"class":632},[450,4857,574],{"class":460},[450,4859,4860,4863,4865,4868,4870,4872,4874,4876,4878,4880,4882],{"class":452,"line":515},[450,4861,4862],{"class":614},"            if",[450,4864,1293],{"class":632},[450,4866,4867],{"class":498},"distanceSeg",[450,4869,2162],{"class":460},[450,4871,4692],{"class":498},[450,4873,2152],{"class":460},[450,4875,4832],{"class":498},[450,4877,1764],{"class":460},[450,4879,4697],{"class":498},[450,4881,900],{"class":632},[450,4883,1779],{"class":460},[450,4885,4886,4889,4892,4894,4897,4899,4901,4903,4905,4907,4909,4911,4913],{"class":452,"line":651},[450,4887,4888],{"class":551},"                let",[450,4890,4891],{"class":498}," timeSeg",[450,4893,564],{"class":460},[450,4895,4896],{"class":498}," totalTimeArray",[450,4898,740],{"class":632},[450,4900,4842],{"class":498},[450,4902,4845],{"class":632},[450,4904,3049],{"class":460},[450,4906,4896],{"class":498},[450,4908,740],{"class":632},[450,4910,4168],{"class":498},[450,4912,535],{"class":632},[450,4914,574],{"class":460},[450,4916,4917,4919,4922,4924,4926,4929,4931],{"class":452,"line":671},[450,4918,4888],{"class":551},[450,4920,4921],{"class":498}," newPace",[450,4923,564],{"class":460},[450,4925,4891],{"class":498},[450,4927,4928],{"class":460}," /",[450,4930,4832],{"class":498},[450,4932,574],{"class":460},[450,4934,4935,4938,4940,4943,4945,4947,4949,4952,4954],{"class":452,"line":691},[450,4936,4937],{"class":614},"                if",[450,4939,1293],{"class":632},[450,4941,4942],{"class":498},"newPace",[450,4944,1764],{"class":460},[450,4946,4710],{"class":498},[450,4948,621],{"class":460},[450,4950,4951],{"class":498},"rawTime",[450,4953,900],{"class":632},[450,4955,1779],{"class":460},[450,4957,4958,4961,4963],{"class":452,"line":700},[450,4959,4960],{"class":498},"                    fastestSegmentData",[450,4962,564],{"class":460},[450,4964,464],{"class":460},[450,4966,4967,4970,4972,4975],{"class":452,"line":706},[450,4968,4969],{"class":632},"                        segmentMin",[450,4971,461],{"class":460},[450,4973,4974],{"class":498}," segmentName",[450,4976,487],{"class":460},[450,4978,4979,4982,4984,4986,4988,4990,4992,4994,4996],{"class":452,"line":726},[450,4980,4981],{"class":632},"                        startTime",[450,4983,461],{"class":460},[450,4985,4896],{"class":498},[450,4987,740],{"class":632},[450,4989,4168],{"class":498},[450,4991,4845],{"class":632},[450,4993,3999],{"class":460},[450,4995,1436],{"class":769},[450,4997,487],{"class":460},[450,4999,5000,5003,5005,5007,5009,5011,5013,5015,5017],{"class":452,"line":754},[450,5001,5002],{"class":632},"                        endTime",[450,5004,461],{"class":460},[450,5006,4896],{"class":498},[450,5008,740],{"class":632},[450,5010,4842],{"class":498},[450,5012,4845],{"class":632},[450,5014,3999],{"class":460},[450,5016,1436],{"class":769},[450,5018,487],{"class":460},[450,5020,5021,5024,5026,5028,5030,5032,5034],{"class":452,"line":773},[450,5022,5023],{"class":632},"                        startPoint",[450,5025,461],{"class":460},[450,5027,4837],{"class":498},[450,5029,740],{"class":632},[450,5031,4168],{"class":498},[450,5033,535],{"class":632},[450,5035,487],{"class":460},[450,5037,5038,5041,5043,5045,5047,5049,5051],{"class":452,"line":782},[450,5039,5040],{"class":632},"                        endPoint",[450,5042,461],{"class":460},[450,5044,4837],{"class":498},[450,5046,740],{"class":632},[450,5048,4842],{"class":498},[450,5050,535],{"class":632},[450,5052,487],{"class":460},[450,5054,5055,5058,5060,5062,5064,5066],{"class":452,"line":820},[450,5056,5057],{"class":632},"                        time",[450,5059,461],{"class":460},[450,5061,4891],{"class":498},[450,5063,4928],{"class":460},[450,5065,1436],{"class":769},[450,5067,487],{"class":460},[450,5069,5070,5073,5075,5077,5079,5081],{"class":452,"line":829},[450,5071,5072],{"class":632},"                        pace",[450,5074,461],{"class":460},[450,5076,4921],{"class":498},[450,5078,4928],{"class":460},[450,5080,1436],{"class":769},[450,5082,487],{"class":460},[450,5084,5085,5088,5090,5092,5094,5097,5099,5102,5104],{"class":452,"line":835},[450,5086,5087],{"class":632},"                        distance",[450,5089,461],{"class":460},[450,5091,4832],{"class":498},[450,5093,621],{"class":460},[450,5095,5096],{"class":567},"toFixed",[450,5098,601],{"class":632},[450,5100,5101],{"class":769},"3",[450,5103,641],{"class":632},[450,5105,487],{"class":460},[450,5107,5108,5111,5113,5115,5117,5119,5121,5123,5125,5127,5129,5131,5133],{"class":452,"line":855},[450,5109,5110],{"class":632},"                        timeArray",[450,5112,461],{"class":460},[450,5114,4896],{"class":498},[450,5116,621],{"class":460},[450,5118,802],{"class":567},[450,5120,601],{"class":632},[450,5122,4168],{"class":498},[450,5124,810],{"class":460},[450,5126,4798],{"class":498},[450,5128,2121],{"class":460},[450,5130,1632],{"class":769},[450,5132,641],{"class":632},[450,5134,487],{"class":460},[450,5136,5137,5140,5142,5144,5146,5148,5150,5152,5154,5156,5158,5160,5162],{"class":452,"line":906},[450,5138,5139],{"class":632},"                        distanceArray",[450,5141,461],{"class":460},[450,5143,4837],{"class":498},[450,5145,621],{"class":460},[450,5147,802],{"class":567},[450,5149,601],{"class":632},[450,5151,4168],{"class":498},[450,5153,810],{"class":460},[450,5155,4798],{"class":498},[450,5157,2121],{"class":460},[450,5159,1632],{"class":769},[450,5161,641],{"class":632},[450,5163,487],{"class":460},[450,5165,5166,5169,5171,5173],{"class":452,"line":936},[450,5167,5168],{"class":632},"                        rawTime",[450,5170,461],{"class":460},[450,5172,4921],{"class":498},[450,5174,487],{"class":460},[450,5176,5177],{"class":452,"line":945},[450,5178,3364],{"class":460},[450,5180,5181],{"class":452,"line":950},[450,5182,5183],{"class":460},"                }\n",[450,5185,5186],{"class":452,"line":956},[450,5187,5188],{"class":460},"            }\n",[450,5190,5191],{"class":452,"line":969},[450,5192,5193],{"class":460},"        }\n",[450,5195,5196],{"class":452,"line":982},[450,5197,1875],{"class":460},[450,5199,5200,5202,5204],{"class":452,"line":994},[450,5201,1417],{"class":614},[450,5203,4710],{"class":498},[450,5205,574],{"class":460},[450,5207,5208],{"class":452,"line":1006},[450,5209,1269],{"class":460},[73,5211,5212],{},"I added a call to the PositionStack API to get a string of the starting\nlocation, then added this to each event.",[73,5214,5215],{},"I then added the ability to add data to a SQLite database. I intially went with\nFirebase when I was considering a web version of the app. After I settled on\nElectron, I thought a local SQLite database would be better.",[68,5217,5219],{"id":5218},"accessing-data","Accessing Data",[73,5221,5222],{},"So far I've added functionality for searching the database based on event type\n(run, walk, or mix), starting and ending dates, and a total distance range.",[68,5224,5226],{"id":5225},"whats-next","What's Next?",[73,5228,5229],{},"It's been fun working with Electron! I know I didn't cover much of the actual\nElectron work here, but honestly that is because it is so easy. I'm sure I'll\nget deeper into Electron settings as I go, but so far it has been quite easy and\nstraightforward.",[73,5231,5232],{},"In the meantime, I'm still working on Flutter and Dart, and I still plan on\ndoing more with that in the future. I'm a huge fan of Flutter, but I think\ncontinuing my JavaScript related work and improving my C# skills are best for\nnow.",[3074,5234,5235],{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":240,"searchDepth":241,"depth":241,"links":5237},[5238,5241,5242,5243],{"id":3744,"depth":241,"text":3745,"children":5239},[5240],{"id":3756,"depth":246,"text":3757},{"id":3778,"depth":241,"text":3779},{"id":5218,"depth":241,"text":5219},{"id":5225,"depth":241,"text":5226},"2021-08-07T00:00:00.000Z","Building an Electron App","https://images.unsplash.com/photo-1555066931-4365d14bab8c?q=80&w=1470&auto=format&fit=crop",{},{"title":26,"description":5245},"1hrTWmUElB2VN-ELjYbtxvSxRRbQNS7ApFC6JTNbrFM",{"id":5251,"title":22,"body":5252,"date":5610,"description":5611,"extension":254,"image":5612,"meta":5613,"minRead":246,"navigation":58,"path":23,"seo":5614,"stem":24,"__hash__":5615},"blog/blog/04-gpx-project-idea.md",{"type":65,"value":5253,"toc":5602},[5254,5257,5261,5264,5268,5276,5280,5283,5346,5350,5359,5591,5594,5596,5599],[73,5255,5256],{},"An app I loved has gone, but I'm using it as inspiration for a personal project.",[68,5258,5260],{"id":5259},"first-an-update-on-flutter","First, an update on Flutter",[73,5262,5263],{},"I've continued working with Flutter and Dart in my spare time. I've really\nenjoyed it, and I still hope to get the RoundsLogging app rebuilt in Flutter at\nsome point. State management is one aspect of Flutter that isn't quite as\nstraightforward as Vue. Unlike Vue, where Vuex is the standard for state\nmanagement, Flutter has several options, none of which seem quite as easy to\nwork with as Vuex. I've been working with Provider. I also plan on having a look\nat BLoC. Once I've worked that out, I can move forward with the app.",[68,5265,5267],{"id":5266},"endomondo","Endomondo",[73,5269,5270,5271,5275],{},"I used ",[214,5272,5267],{"href":5273,"rel":5274},"https://en.wikipedia.org/wiki/Endomondo",[218]," for about ten years.\nIt was my favorite running app, and, in my opinion, had far better features than\nany other app available. Even apps available now, in 2021, lack many of the\nfeatures available on Endomondo back in 2012. I'm a data junkie, and I loved the\nvariety of stats offered in Endomondo. Since I can't find these features in any\nexisting apps, I plan on writing the code to extract and calculate the stats\nmyself.",[80,5277,5279],{"id":5278},"gpx-files","GPX Files",[73,5281,5282],{},"Most running apps store data in GPX files, which are essentially XML files that\nstore tracking data. In addition to basic info such as time and date, the bulk\nof the file consists of a series of trackpoints made up of coordinates,\nelevation, and a timestamp. The data is collected every 2-3 seconds for the\nduration of the run.",[441,5284,5288],{"className":5285,"code":5286,"language":5287,"meta":240,"style":240},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctrkpt lat=\"36.844810485839844\" lon=\"-75.98933410644531\">\n  \u003Cele>5.199999809265137\u003C/ele>\n  \u003Ctime>2010-10-30T12:02:07.000Z\u003C/time>\n\u003C/trkpt>\n\u003Ctrkpt lat=\"36.84482955932617\" lon=\"-75.9892578125\">\n  \u003Cele>5.199999809265137\u003C/ele>\n  \u003Ctime>2010-10-30T12:02:10.000Z\u003C/time>\n\u003C/trkpt>\n\u003Ctrkpt lat=\"36.844844818115234\" lon=\"-75.98918151855469\">\n  \u003Cele>5.199999809265137\u003C/ele>\n  \u003Ctime>2010-10-30T12:02:13.000Z\u003C/time>\n\u003C/trkpt>\n","xml",[447,5289,5290,5295,5300,5305,5310,5315,5319,5324,5328,5333,5337,5342],{"__ignoreMap":240},[450,5291,5292],{"class":452,"line":453},[450,5293,5294],{},"\u003Ctrkpt lat=\"36.844810485839844\" lon=\"-75.98933410644531\">\n",[450,5296,5297],{"class":452,"line":241},[450,5298,5299],{},"  \u003Cele>5.199999809265137\u003C/ele>\n",[450,5301,5302],{"class":452,"line":246},[450,5303,5304],{},"  \u003Ctime>2010-10-30T12:02:07.000Z\u003C/time>\n",[450,5306,5307],{"class":452,"line":490},[450,5308,5309],{},"\u003C/trkpt>\n",[450,5311,5312],{"class":452,"line":257},[450,5313,5314],{},"\u003Ctrkpt lat=\"36.84482955932617\" lon=\"-75.9892578125\">\n",[450,5316,5317],{"class":452,"line":509},[450,5318,5299],{},[450,5320,5321],{"class":452,"line":515},[450,5322,5323],{},"  \u003Ctime>2010-10-30T12:02:10.000Z\u003C/time>\n",[450,5325,5326],{"class":452,"line":651},[450,5327,5309],{},[450,5329,5330],{"class":452,"line":671},[450,5331,5332],{},"\u003Ctrkpt lat=\"36.844844818115234\" lon=\"-75.98918151855469\">\n",[450,5334,5335],{"class":452,"line":691},[450,5336,5299],{},[450,5338,5339],{"class":452,"line":700},[450,5340,5341],{},"  \u003Ctime>2010-10-30T12:02:13.000Z\u003C/time>\n",[450,5343,5344],{"class":452,"line":706},[450,5345,5309],{},[80,5347,5349],{"id":5348},"calculating-distance","Calculating Distance",[73,5351,5352,5353,5358],{},"Thanks to\n",[214,5354,5357],{"href":5355,"rel":5356},"https://stackoverflow.com/a/21623206/8075360",[218],"this Stack Overflow post"," I was\nable to accurately calculate distance between points.",[441,5360,5362],{"className":443,"code":5361,"language":445,"meta":240,"style":240},"const distance = (lat1, lon1, lat2, lon2) => {\n    var p = 0.017453292519943295; // Math.PI / 180\n    var c = Math.cos;\n    var a =\n        0.5 -\n        c((lat2 - lat1) * p) / 2 +\n        (c(lat1 * p) * c(lat2 * p) * (1 - c((lon2 - lon1) * p))) / 2;\n\n    return 12742 * Math.asin(Math.sqrt(a)); // 2 * R; R = 6371 km\n};\n",[447,5363,5364,5395,5413,5432,5441,5448,5478,5545,5549,5587],{"__ignoreMap":240},[450,5365,5366,5368,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389,5391,5393],{"class":452,"line":453},[450,5367,552],{"class":551},[450,5369,5370],{"class":498}," distance ",[450,5372,595],{"class":460},[450,5374,1293],{"class":460},[450,5376,4442],{"class":1296},[450,5378,810],{"class":460},[450,5380,4346],{"class":1296},[450,5382,810],{"class":460},[450,5384,4378],{"class":1296},[450,5386,810],{"class":460},[450,5388,4405],{"class":1296},[450,5390,641],{"class":460},[450,5392,607],{"class":551},[450,5394,464],{"class":460},[450,5396,5397,5400,5403,5405,5408,5410],{"class":452,"line":241},[450,5398,5399],{"class":551},"    var",[450,5401,5402],{"class":498}," p",[450,5404,564],{"class":460},[450,5406,5407],{"class":769}," 0.017453292519943295",[450,5409,1759],{"class":460},[450,5411,5412],{"class":584}," // Math.PI / 180\n",[450,5414,5415,5417,5420,5422,5425,5427,5430],{"class":452,"line":246},[450,5416,5399],{"class":551},[450,5418,5419],{"class":498}," c",[450,5421,564],{"class":460},[450,5423,5424],{"class":498}," Math",[450,5426,621],{"class":460},[450,5428,5429],{"class":498},"cos",[450,5431,574],{"class":460},[450,5433,5434,5436,5439],{"class":452,"line":490},[450,5435,5399],{"class":551},[450,5437,5438],{"class":498}," a",[450,5440,2091],{"class":460},[450,5442,5443,5446],{"class":452,"line":257},[450,5444,5445],{"class":769},"        0.5",[450,5447,1841],{"class":460},[450,5449,5450,5453,5456,5459,5461,5463,5465,5467,5469,5471,5473,5476],{"class":452,"line":509},[450,5451,5452],{"class":567},"        c",[450,5454,5455],{"class":632},"((",[450,5457,5458],{"class":498},"lat2",[450,5460,1493],{"class":460},[450,5462,4313],{"class":498},[450,5464,900],{"class":632},[450,5466,1433],{"class":460},[450,5468,5402],{"class":498},[450,5470,900],{"class":632},[450,5472,3999],{"class":460},[450,5474,5475],{"class":769}," 2",[450,5477,1829],{"class":460},[450,5479,5480,5483,5486,5488,5490,5492,5494,5496,5498,5500,5502,5504,5506,5508,5510,5512,5514,5517,5519,5521,5523,5526,5528,5530,5532,5534,5536,5539,5541,5543],{"class":452,"line":515},[450,5481,5482],{"class":632},"        (",[450,5484,5485],{"class":567},"c",[450,5487,601],{"class":632},[450,5489,4442],{"class":498},[450,5491,1823],{"class":460},[450,5493,5402],{"class":498},[450,5495,900],{"class":632},[450,5497,1433],{"class":460},[450,5499,5419],{"class":567},[450,5501,601],{"class":632},[450,5503,5458],{"class":498},[450,5505,1823],{"class":460},[450,5507,5402],{"class":498},[450,5509,900],{"class":632},[450,5511,1433],{"class":460},[450,5513,1293],{"class":632},[450,5515,5516],{"class":769},"1",[450,5518,1493],{"class":460},[450,5520,5419],{"class":567},[450,5522,5455],{"class":632},[450,5524,5525],{"class":498},"lon2",[450,5527,1493],{"class":460},[450,5529,4346],{"class":498},[450,5531,900],{"class":632},[450,5533,1433],{"class":460},[450,5535,5402],{"class":498},[450,5537,5538],{"class":632},"))) ",[450,5540,3999],{"class":460},[450,5542,5475],{"class":769},[450,5544,574],{"class":460},[450,5546,5547],{"class":452,"line":651},[450,5548,579],{"emptyLinePlaceholder":58},[450,5550,5551,5553,5556,5558,5560,5562,5565,5567,5570,5572,5575,5577,5579,5582,5584],{"class":452,"line":671},[450,5552,1417],{"class":614},[450,5554,5555],{"class":769}," 12742",[450,5557,1823],{"class":460},[450,5559,5424],{"class":498},[450,5561,621],{"class":460},[450,5563,5564],{"class":567},"asin",[450,5566,601],{"class":632},[450,5568,5569],{"class":498},"Math",[450,5571,621],{"class":460},[450,5573,5574],{"class":567},"sqrt",[450,5576,601],{"class":632},[450,5578,214],{"class":498},[450,5580,5581],{"class":632},"))",[450,5583,1759],{"class":460},[450,5585,5586],{"class":584}," // 2 * R; R = 6371 km\n",[450,5588,5589],{"class":452,"line":691},[450,5590,1269],{"class":460},[73,5592,5593],{},"Now I'm able to submit a GPX file and calculate the total distance and time.\nIt's pretty simple so far, but it works.",[80,5595,316],{"id":315},[73,5597,5598],{},"Next, I want to allow calculation of other stats that used to be covered by\nEndomondo, such as best 1 km, 1 mi, 5 km, etc. Eventually I'd like to include a\nway to show these segments on a map.",[3074,5600,5601],{},"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);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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}",{"title":240,"searchDepth":241,"depth":241,"links":5603},[5604,5605],{"id":5259,"depth":241,"text":5260},{"id":5266,"depth":241,"text":5267,"children":5606},[5607,5608,5609],{"id":5278,"depth":246,"text":5279},{"id":5348,"depth":246,"text":5349},{"id":315,"depth":246,"text":316},"2021-07-11T00:00:00.000Z","Missing Endomondo and a Project Idea","https://images.unsplash.com/photo-1486218119243-13883505764c?q=80&w=1472&auto=format&fit=crop",{},{"title":22,"description":5611},"z95pJw5uU44mBbz5rtKPyXssRSN7h9JLXlgWZe8qePY",{"id":5617,"title":18,"body":5618,"date":5646,"description":5647,"extension":254,"image":5648,"meta":5649,"minRead":453,"navigation":58,"path":19,"seo":5650,"stem":20,"__hash__":5651},"blog/blog/03-first-flutter-app.md",{"type":65,"value":5619,"toc":5641},[5620,5623,5627,5630,5633,5636,5638],[73,5621,5622],{},"It's simple, but I've published my first personal app in the Google Play Store!",[68,5624,5626],{"id":5625},"flutter-is-awesome","Flutter is awesome",[73,5628,5629],{},"I can't believe what a breeze it has been getting started with Flutter. I have a\nfew ideas for apps I would like to build, so I started with the simplest - a\nPassword Generator. I'm sure there are nearly as many password generators as\nthere are to-do lists, but the process has be a great learning experience. The\npost-develpment process of building the final app bundle and getting it into the\nPlay Store has been great practice.",[68,5631,5632],{"id":5632},"s10s",[73,5634,5635],{},"I decided to call my store \"s10s\", as in the shortened version of Steve furcheS,\nmuch like AccessibilitY (a11y) and InternationalizatioN (i18n). That may change,\nbut it is the most original thing I can think of right now. I'm sure I'll think\nof something better before the IPO 😀",[68,5637,316],{"id":315},[73,5639,5640],{},"With my background in science, I have a couple of ideas for more specialized\napps. I hope to have something new to show off in the coming months!",{"title":240,"searchDepth":241,"depth":241,"links":5642},[5643,5644,5645],{"id":5625,"depth":241,"text":5626},{"id":5632,"depth":241,"text":5632},{"id":315,"depth":241,"text":316},"2021-05-07T00:00:00.000Z","It's a start!","/PasswordGenerator.png",{},{"title":18,"description":5647},"kWPjGOQ5qBqYioJkvZsKL0taGToww5O_oUWpQaaMt1U",{"id":5653,"title":14,"body":5654,"date":5732,"description":5733,"extension":254,"image":5734,"meta":5735,"minRead":246,"navigation":58,"path":15,"seo":5736,"stem":16,"__hash__":5737},"blog/blog/02-flutter-and-dart.md",{"type":65,"value":5655,"toc":5726},[5656,5659,5663,5666,5670,5677,5700,5704,5719,5723],[73,5657,5658],{},"Finally getting around to another post",[68,5660,5662],{"id":5661},"and-im-baaaaack","... and I'm baaaaack",[73,5664,5665],{},"After getting through a nasty bout of Covid around the new year, it has been a\nbusy few months. I've spent some time upgrading the Roundslogging Mobile app to\nthe latest versions of Vue, Vuex, and Quasar. I really enjoy Quasar, and the\ndocumentation is excellent. However, there are some aspects with app development\nthat I have issues with.",[68,5667,5669],{"id":5668},"quasar","Quasar",[73,5671,5672,5676],{},[214,5673,5669],{"href":5674,"rel":5675},"https://next.quasar.dev/",[218]," is excellent in many ways. It allows me to\nwrite for mobile while still writing Vue and JavaScript, both of which I feel\ncomfortable with and enjoy. There are some issues, however, that have led me to\nlook at other options:",[291,5678,5679,5682,5697],{},[178,5680,5681],{},"The general app look. This one is hard to put a finger on, but I feel like\nthe app often looks like a website compressed to mobile size, instead of\nsomething built for mobile.",[178,5683,5684,5685,5690,5691,5696],{},"Connecting to phone APIs. Quasar uses ",[214,5686,5689],{"href":5687,"rel":5688},"https://cordova.apache.org/",[218],"Cordova","\nor ",[214,5692,5695],{"href":5693,"rel":5694},"https://capacitorjs.com/",[218],"Capacitor"," to connect to native phone APIs. I\nfind myself running into trouble and spending a lot of time working out\nseemingly small issues (such as copying text to the clipboard).",[178,5698,5699],{},"Debugging. While the Quasar docs are great, and Vue DevTools are awesome when\nI'm testing in the browser, I often find that digging around to find errors\ncan be a pain. Is it an error in my JavaScript or Vue? My Quasar? A Cordova\nplugin?",[68,5701,5703],{"id":5702},"flutter-and-dart","Flutter and Dart",[73,5705,5706,5707,5712,5713,5718],{},"I recently (finally) decided to give ",[214,5708,5711],{"href":5709,"rel":5710},"https://www.flutter.dev",[218],"Flutter"," a go. I\nsigned up for several courses on ",[214,5714,5717],{"href":5715,"rel":5716},"https://www.udemy.com",[218],"Udemy"," and I've been\nmoving through them quickly. I'll share thoughts on some of these courses in a\npost later on. Flutter is a blast! I haven't had this much fun coding in a\nwhile - and I say that as someone that thoroughly enjoys their job. Logic in\nFlutter feels comfortable because it seems so familiar in many ways. The basic\nstructure is similar to JavaScript, which is my strongest programming language.\nIt is strongly typed and has other features that remind me of C#, which I've\nused quite a bit as well. Designing the app layout is very intuitive. You can\nreally tell it was made for mobile, rather than incorporating mobile as an\nafterthought.",[68,5720,5722],{"id":5721},"moving-forward","Moving forward",[73,5724,5725],{},"My original plan was to just try and learn some Flutter on the side for fun or a\nhobby project. Now that I've gotten a taste of it though, I think I may be able\nto rewrite the Roundslogging app in Flutter before the next big update!",{"title":240,"searchDepth":241,"depth":241,"links":5727},[5728,5729,5730,5731],{"id":5661,"depth":241,"text":5662},{"id":5668,"depth":241,"text":5669},{"id":5702,"depth":241,"text":5703},{"id":5721,"depth":241,"text":5722},"2021-05-06T00:00:00.000Z","I finally gave Flutter a try, and I love it!","https://images.unsplash.com/photo-1617040619263-41c5a9ca7521?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",{},{"title":14,"description":5733},"cRkpgTtxfQ0IUIkFnZl16jByncBp3yvePFMQoxBVpII",{"id":5739,"title":10,"body":5740,"date":5815,"description":5816,"extension":254,"image":5817,"meta":5818,"minRead":241,"navigation":58,"path":11,"seo":5819,"stem":12,"__hash__":5820},"blog/blog/01-welcome-first-post.md",{"type":65,"value":5741,"toc":5810},[5742,5747,5750,5754,5757,5761,5764,5775,5779,5790,5800],[5743,5744,5746],"h1",{"id":5745},"welcome-to-my-first-blog-post","Welcome to my first blog post",[73,5748,5749],{},"I've finally gotten around to getting my site together and making my first blog\npost, complete with a generic motivational image from unsplash, so you know I'm\nserious.",[68,5751,5753],{"id":5752},"about-me","About Me",[73,5755,5756],{},"I'll be adding my full work bio to the home page soon. The quick summary is: I\nspent a lot of time in public health, science, and education. Now I'm a full\nstack developer (always hesitant to call myself that... I'll probably have a\nblog post on that) at a small company in Knoxville, Tennessee.",[68,5758,5760],{"id":5759},"post-topics","Post Topics",[73,5762,5763],{},"I will primarily be posting on these topics:",[291,5765,5766,5769,5772],{},[178,5767,5768],{},"Coding - Most of my posts will be on my experiences coding, new tools that I\nam using, and problems I run into (and hopefully their solutions).",[178,5770,5771],{},"Botany or wildlife pics - I was a botanist in my former career, and I still\nspend a lot of my spare time outdoors, so I may post some pictures from that\nnow and then.",[178,5773,5774],{},"Thoughts on higher education - Since I spent so much time there, I am likely\nto have a few posts about what it is like to work in academia.",[68,5776,5778],{"id":5777},"where-else-to-find-me","Where Else to Find Me",[73,5780,5781,5789],{},[5782,5783,5784,461],"strong",{},[214,5785,5788],{"href":5786,"rel":5787},"https://github.com/stevefurches",[218],"Github"," I use Github a lot, but there\nisn't much to show off there, since most of my repos are private. I hope to\ncontribute to some open source projects soon though.",[73,5791,5792,5799],{},[5782,5793,5794,461],{},[214,5795,5798],{"href":5796,"rel":5797},"https://www.linkedin.com/in/stevefurches/",[218],"LinkedIn"," I check LinkedIn\nfairly often and I try to keep my information up-to-date. I'll accept just about\nany connection request, except from recruiters.",[73,5801,5802,5809],{},[5782,5803,5804,461],{},[214,5805,5808],{"href":5806,"rel":5807},"https://scholar.google.com/citations?user=Me0UB18AAAAJ&hl=en&authuser=1",[218],"Google Scholar","\nAlthough I no longer write and publish scientific research, you can find my work\non Google Scholar. There you will find links to my publications.",{"title":240,"searchDepth":241,"depth":241,"links":5811},[5812,5813,5814],{"id":5752,"depth":241,"text":5753},{"id":5759,"depth":241,"text":5760},{"id":5777,"depth":241,"text":5778},"2020-12-15T00:00:00.000Z","After trying several options, I decided to use Nuxt.js for my site and blog","https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=800&q=60",{},{"title":10,"description":5816},"-d1XQIhIhEm2MsTBCKtgriphLwkZvpMKEebuhtFIHTo",1772990059117]