[{"data":1,"prerenderedAt":230},["ShallowReactive",2],{"/projects/you-tz":3,"/projects/you-tz-surround":215},{"id":4,"title":5,"additionalTags":6,"body":7,"description":17,"excerpt":187,"extension":188,"featured":189,"hero":18,"meta":190,"name":193,"navigation":189,"openSource":194,"path":195,"projectDate":196,"projectFolder":197,"seo":198,"sitemap":199,"status":203,"stem":204,"subtitle":205,"tags":206,"thumbnail":213,"__hash__":214},"projects/projects/7.you-tz.md","You Tz",[],{"type":8,"value":9,"toc":175},"minimark",[10,14,19,24,33,38,41,44,48,51,67,77,81,103,107,124,128],[11,12],"stats-table",{":stats":13},"[{\"label\": \"year\", \"value\": \"2026\"}, {\"label\": \"URL\", \"value\": \"https://you-tz.com\", \"url\": \"www.you-tz.com/now\"}]",[15,16],"full-img",{"alt":17,"src":18},"A tool to help developers visualize date parsing across timezones and popular JavaScript date libraries.","/projects/you-tz/hero.webp",[20,21,23],"h2",{"id":22},"overview","Overview",[25,26,29],"div",{"className":27},[28],"callout",[30,31,32],"p",{},"you‑tz is a lightweight, web‑based debugging tool that instantly shows how popular JavaScript date libraries interpret the same ISO‑8601 string.\nBy juxtaposing library outputs and visualizing the moment on a world map, it turns a time‑zone ambiguity into an eye‑opening, shareable snapshot.\nThe project was architected with AI‑assisted planning (OpenCode + Ollama models), yielding a consistent Vue 3 + Pinia component structure that can be replicated for any new library quickly.",[34,35,37],"h3",{"id":36},"challenge","Challenge",[30,39,40],{},"Front‑end developers repeatedly hit a subtle bug: an ISO‑8601 timestamp without a time‑zone suffix (2026‑05‑08T15:42:51.714709) is parsed as local time, while the same string with a Z is treated as UTC.",[30,42,43],{},"The difference can be several hours, depending on the user’s location.\nLibraries (Moment, date‑fns, Luxon, Day.js, vanilla JS) handle the ambiguity inconsistently.\nDebugging this requires manual inspection of each library’s output, which is time‑consuming and error‑prone.",[34,45,47],{"id":46},"solution","Solution",[30,49,50],{},"I built you‑tz, a small, web‑based debugging aid that visualizes how different JavaScript date libraries interpret a given ISO string.",[52,53,54,58,61,64],"ol",{},[55,56,57],"li",{},"Cross‑library comparison – A side‑by‑side table shows each library’s parsed value, relative‑time output, and any offset applied.",[55,59,60],{},"World‑map visualization – Using MapLibre, the tool plots the timestamp on a map, marking time‑zones by GMT offset and labeling them with their IANA names.",[55,62,63],{},"AI‑assisted architecture –\nBefore coding, I used OpenCode/ChatGPT to sketch the Vue 3 + Pinia architecture, composables, routing, and UI layout.\nThe AI generated a consistent component pattern (LibMoment.vue, LibDateFns.vue, etc.) that could be replicated for new libraries or features.\nIt also auto‑wired new support for Vanilla JS and the upcoming Temporal API, saving hours of boilerplate work.",[55,65,66],{},"Shareability – The URL encodes the ISO string and selected libraries, enabling instant sharing of a debugging session.",[30,68,69],{},[70,71],"img",{"alt":72,"className":73,"src":75,"width":76},"Screenshot",[74],"w-full","/projects/you-tz/now.png",640,[20,78,80],{"id":79},"whats-next","What's Next",[82,83,84,91,97],"ul",{},[55,85,86,90],{},[87,88,89],"strong",{},"More date libraries"," — Still highly experimental the Temporal API is on track to becoming the defacto replacement for using the standard Date API.",[55,92,93,96],{},[87,94,95],{},"Expanded library comparisons"," — I want to add more categories to the comparison tables. For example how different libraries handle date manipulation, like checking greater than or less than.",[55,98,99,102],{},[87,100,101],{},"i18n"," - I'd like to add internationalization to make this tool more accessible.",[20,104,106],{"id":105},"try-it","Try It",[30,108,109,110,117,118,123],{},"The project is currently live at ",[111,112,116],"a",{"href":113,"rel":114},"https://you-tz.com",[115],"nofollow","www.you-tz.com",". Paste any ISO string, quickly sanity-check it against the most popular Date libraries, and share the result with your team. You can also use ",[111,119,122],{"href":120,"rel":121},"https://you-tz.com/now",[115],"you-tz.com/now"," to use the current time as a starting snapshot.",[20,125,127],{"id":126},"technologies-utilized","Technologies Utilized",[129,130,131,141],"table",{},[132,133,134],"thead",{},[135,136,137],"tr",{},[138,139,140],"th",{},"Frontend",[142,143,144,150,155,160,165,170],"tbody",{},[135,145,146],{},[147,148,149],"td",{},"Vue 3",[135,151,152],{},[147,153,154],{},"Tailwind",[135,156,157],{},[147,158,159],{},"TypeScript",[135,161,162],{},[147,163,164],{},"MapLibre",[135,166,167],{},[147,168,169],{},"Pinia w/ persisted state",[135,171,172],{},[147,173,174],{},"Vite+",{"title":176,"searchDepth":177,"depth":177,"links":178},"",2,[179,184,185,186],{"id":22,"depth":177,"text":23,"children":180},[181,183],{"id":36,"depth":182,"text":37},3,{"id":46,"depth":182,"text":47},{"id":79,"depth":177,"text":80},{"id":105,"depth":177,"text":106},{"id":126,"depth":177,"text":127},null,"md",true,{"items":191},[192],"/projects/you-tz/home-dark.jpg","You-TZ",false,"/projects/you-tz","2026-05-27T00:00:00.000Z","you-tz",{"description":17},{"loc":195,"lastmod":200,"changefreq":201,"priority":202},"2026-05-27","monthly",0.8,"draft","projects/7.you-tz","Timezones = fun",[207,208,209,210,211,212,154,159],"Vue","AI","Tooling","Moment","date-fns","Luxon","/projects/you-tz/thumb.webp","tueK5tUo7bsS4JFaa-61Z9MmyGlOIsPyCrgaBdj5O8I",[216,187],{"title":217,"path":218,"stem":219,"name":217,"description":220,"subtitle":221,"thumbnail":222,"tags":223,"children":-1},"Sushi Stacks","/projects/sushi-stacks","projects/6.sushi-stacks","A fun app made for conveyor-belt sushi lovers.","Web Development + Hybrid App development","/projects/sushi/thumb.webp",[224,225,226,227,228,229],"AngularJS","Graphic Design","Firebase","Hybrid App","Cordova","jQuery",1784827426516]