{"/home":{"name":"Home","route":"/home","root":{"id":"sam_page-c-0","name":"Root","tag":"div","children":[{"id":"sam_page-c-1","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-0","children":[{"id":"sam_page-c-2","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-1","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"50px","margin":"40px 0 40px 0"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-4","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-1","children":[{"id":"sam_page-c-9","name":"Link","tag":"a","parentId":"sam_page-c-4","children":[{"id":"sam_page-c-5","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-9","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-10","name":"Link","tag":"a","parentId":"sam_page-c-4","children":[{"id":"sam_page-c-8","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-10","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-11","name":"Link","tag":"a","parentId":"sam_page-c-4","children":[{"id":"sam_page-c-7","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-11","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-12","name":"Link","tag":"a","parentId":"sam_page-c-4","children":[{"id":"sam_page-c-6","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-12","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","justify-content":"center"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-14","name":"NavMenu","tag":"div","parentId":"sam_page-c-1","children":[{"id":"sam_page-c-15","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-14","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-46","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-14","style":{"custom":{},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-86","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-14","style":{"custom":{},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","margin":"40px 0px 16px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[{"behaviorId":"global-b-navAddChildren"}]},"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnPageChange":{"name":"OnPageChange","behaviors":[{"behaviorId":"global-b-navChangeChildren"}]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]}}},{"id":"sam_page-c-16","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-1","children":[{"id":"sam_page-c-17","name":"TextBox","tag":"div","parentId":"sam_page-c-16","children":[{"id":"sam_page-c-18","name":"Text","tag":"div","content":"

Hello, my name is Sam, and this is my home page. I founded SamaTech in 2020 - our latest project is PubStudio, a website builder and hosting platform.

If you'd like to chat about PubStudio, collaborate on a project, or request contract services, you can fill out this contact form or email me here.

","parentId":"sam_page-c-17","style":{"custom":{},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"0px auto 0px auto","display":"flex","flex-direction":"row","font-size":"17px","padding":"12px 12px 10px 12px","box-shadow":"0 1px 12px 1px #8a8a8a","background-color":"#ddd","color":"#222","width":"620px"}}}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-788","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-1","children":[{"id":"sam_page-c-789","name":"TextBox","tag":"div","parentId":"sam_page-c-788","children":[{"id":"sam_page-c-791","name":"H4","tag":"h4","content":"

Selected Works

","parentId":"sam_page-c-789","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-792"]}},{"id":"sam_page-c-790","name":"Text","tag":"div","content":"

A few side projects I’ve spent time on recently. See the blog for more.

","parentId":"sam_page-c-789","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-793","name":"Grid","tag":"div","parentId":"sam_page-c-789","children":[{"id":"sam_page-c-801","name":"Link","tag":"a","parentId":"sam_page-c-793","children":[{"id":"sam_page-c-794","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-801","children":[{"id":"sam_page-c-797","name":"Link","tag":"a","content":"

image.samatech.tw

","parentId":"sam_page-c-794","style":{"custom":{"breakpoint-1":{"default":{"font-size":"15px","height":"19px"},":visited":{}}},"mixins":["sam_page-s-798"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://image.samatech.tw"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-799","name":"Text","tag":"div","content":"

Browser based image optimizer.

","parentId":"sam_page-c-794","style":{"custom":{"breakpoint-1":{"default":{"text-align":"center","margin":"8px 0px 0px 0px"}}},"mixins":["sam_page-s-800"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-796"]}}],"style":{"custom":{"breakpoint-1":{"default":{},":visited":{}}},"mixins":["sam_page-s-802"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://image.samatech.tw"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-803","name":"Link","tag":"a","parentId":"sam_page-c-793","children":[{"id":"sam_page-c-804","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-803","children":[{"id":"sam_page-c-805","name":"Link","tag":"a","content":"

color.samatech.tw

","parentId":"sam_page-c-804","style":{"custom":{"breakpoint-1":{"default":{"font-size":"15px","height":"19px"},":visited":{}}},"mixins":["sam_page-s-798"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://color.samatech.tw/"}}},{"id":"sam_page-c-806","name":"Text","tag":"div","content":"

Demo for Vue color picker component.

","parentId":"sam_page-c-804","style":{"custom":{"breakpoint-1":{"default":{"text-align":"center","margin":"8px 0px 0px 0px"}}},"mixins":["sam_page-s-800"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-796"]}}],"style":{"custom":{"breakpoint-1":{"default":{},":visited":{}}},"mixins":["sam_page-s-802"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://color.samatech.tw/"}}},{"id":"sam_page-c-807","name":"Link","tag":"a","parentId":"sam_page-c-793","children":[{"id":"sam_page-c-808","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-807","children":[{"id":"sam_page-c-811","name":"Link","tag":"a","content":"

wedding

","parentId":"sam_page-c-808","style":{"custom":{"breakpoint-1":{"default":{"font-size":"15px","height":"19px"},":visited":{}}},"mixins":["sam_page-s-798"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://wedding.sampullman.com"}}},{"id":"sam_page-c-810","name":"Text","tag":"div","content":"

Wedding info, photos, and RSVP site.

","parentId":"sam_page-c-808","style":{"custom":{"breakpoint-1":{"default":{"text-align":"center","margin":"8px 0px 0px 0px"}}},"mixins":["sam_page-s-800"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-796"]}}],"style":{"custom":{"breakpoint-1":{"default":{},":visited":{}}},"mixins":["sam_page-s-802"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://wedding.sampullman.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"min-height":"120px","margin":"12px 0px 0px 0px","display":"grid","width":"100%","column-gap":"8px","grid-template-columns":"repeat(auto-fit, minmax(160px, 1fr))","row-gap":"8px"}}}}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"0px auto 0px auto","display":"flex","font-size":"17px","padding":"12px 12px 16px 12px","box-shadow":"0 1px 12px 1px #8a8a8a","background-color":"#ddd","color":"#222","width":"620px","flex-direction":"column"}}}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","margin":"40px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-19","name":"Footer","tag":"footer","parentId":"sam_page-c-1","children":[{"id":"sam_page-c-20","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-19","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-21","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-19","children":[{"id":"sam_page-c-22","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-21","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%","margin":"0px 0px 0px 4px"}}}}},{"id":"sam_page-c-23","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-21","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"sam_page-b-813"}]}}},"public":true,"head":{}},"/contact":{"name":"Contact","route":"/contact","root":{"id":"sam_page-c-24","name":"Root","tag":"div","children":[{"id":"sam_page-c-25","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-24","children":[{"id":"sam_page-c-786","name":"Link","tag":"a","parentId":"sam_page-c-25","children":[{"id":"sam_page-c-787","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-786","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"50px"}}},"mixins":["global-s-9"]}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"40px 0 40px"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-27","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-25","children":[{"id":"sam_page-c-28","name":"Link","tag":"a","parentId":"sam_page-c-27","children":[{"id":"sam_page-c-29","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-28","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px"},":hover":{}}},"mixins":["sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-30","name":"Link","tag":"a","parentId":"sam_page-c-27","children":[{"id":"sam_page-c-31","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-30","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-32","name":"Link","tag":"a","parentId":"sam_page-c-27","children":[{"id":"sam_page-c-33","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-32","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-34","name":"Link","tag":"a","parentId":"sam_page-c-27","children":[{"id":"sam_page-c-35","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-34","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px"}}},"mixins":["sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","justify-content":"center"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-36","name":"NavMenu","tag":"div","parentId":"sam_page-c-25","children":[{"id":"sam_page-c-37","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-36","style":{"custom":{},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-47","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-36","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-87","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-36","style":{"custom":{},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","margin":"40px 0px 16px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[{"behaviorId":"global-b-navAddChildren"}]},"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnPageChange":{"name":"OnPageChange","behaviors":[{"behaviorId":"global-b-navChangeChildren"}]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]}}},{"id":"sam_page-c-38","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-25","children":[{"id":"sam_page-c-48","name":"ContactFormWrap","tag":"div","parentId":"sam_page-c-38","children":[{"id":"sam_page-c-49","name":"ContactForm","tag":"Form","parentId":"sam_page-c-48","children":[{"id":"sam_page-c-50","name":"ContactFormTitle","tag":"h2","content":"

Get in touch.

","parentId":"sam_page-c-49","style":{"custom":{"breakpoint-1":{"default":{"display":"flex","align-items":"center","justify-content":"center"}}},"mixins":["global-s-10"]}},{"id":"sam_page-c-51","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-49","children":[{"id":"sam_page-c-52","name":"Email","tag":"input","parentId":"sam_page-c-51","style":{"custom":{"breakpoint-1":{"default":{"border":"1px solid #4F4F4F","margin":"24px 0px 0px 0px","flex":"1 1 0"}},"breakpoint-3":{"default":{"margin":"24px 0px 0px 0px","width":"100%"}}},"mixins":["global-s-20"]},"inputs":{"placeholder":{"type":"string","name":"placeholder","attr":true,"default":"","is":"Email"},"name":{"type":"string","name":"name","attr":true,"default":"","is":"contact-email"}},"events":{"input":{"name":"input","eventParams":{},"behaviors":[{"behaviorId":"global-b-contactformclearerror","args":{"errorId":"sam_page-c-55"}}]}}},{"id":"sam_page-c-53","name":"Name","tag":"input","parentId":"sam_page-c-51","style":{"custom":{"breakpoint-1":{"default":{"margin":"24px 0px 0px 12px","border":"1px solid #4F4F4F","flex":"1 1 0"}},"breakpoint-3":{"default":{"margin":"24px 0px 0px 0px","width":"100%"}}},"mixins":["global-s-20"]},"inputs":{"placeholder":{"type":"string","name":"placeholder","attr":true,"default":"","is":"Name (optional)"},"name":{"type":"string","name":"name","attr":true,"default":"","is":"contact-name"}},"events":{"input":{"name":"input","eventParams":{},"behaviors":[{"behaviorId":"global-b-contactformclearerror","args":{"errorId":"sam_page-c-55"}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"85%","height":"auto"}},"breakpoint-3":{"default":{"flex-direction":"column"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-54","name":"Message","tag":"textarea","parentId":"sam_page-c-49","style":{"custom":{"breakpoint-1":{"default":{"margin":"24px 0px 0px 0px","border":" 1px solid #4F4F4F","width":"85%"}}},"mixins":["global-s-22"]},"inputs":{"placeholder":{"type":"string","name":"placeholder","attr":true,"default":"","is":"Message"},"name":{"type":"string","name":"name","attr":true,"default":"","is":"contact-message"},"rows":{"name":"rows","type":"string","default":"3","attr":true,"is":"8"}},"events":{"input":{"name":"input","eventParams":{},"behaviors":[{"behaviorId":"global-b-contactformclearerror","args":{"errorId":"sam_page-c-55"}}]}}},{"id":"sam_page-c-55","name":"ContactFormError","tag":"div","content":"Contact form error","parentId":"sam_page-c-49","style":{"custom":{"breakpoint-1":{"default":{"display":"flex","margin":"16px 0px 16px 0px","color":"${color-error}","justify-content":"center","opacity":"0","font-size":"14px","min-height":"18px","transition":"opacity 0.25s ease"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-56","name":"Submit","tag":"button","content":"

Submit

","parentId":"sam_page-c-49","children":[{"id":"sam_page-c-57","name":"ButtonText","tag":"div","content":"

Submit

","parentId":"sam_page-c-56","style":{"custom":{},"mixins":[]}},{"id":"sam_page-c-58","name":"Loading","tag":"div","parentId":"sam_page-c-56","children":[{"id":"sam_page-c-59","name":"Dot","tag":"span","parentId":"sam_page-c-58","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-loadingdot"]}},{"id":"sam_page-c-60","name":"Dot","tag":"span","parentId":"sam_page-c-58","style":{"custom":{"breakpoint-1":{"default":{"animation-delay":"0.2s","margin":"0px 0px 0px 4px"}}},"mixins":["global-s-loadingdot"]}},{"id":"sam_page-c-61","name":"Dot","tag":"span","parentId":"sam_page-c-58","style":{"custom":{"breakpoint-1":{"default":{"animation-delay":"0.4s","margin":"0px 0px 0px 4px"}}},"mixins":["global-s-loadingdot"]}}],"style":{"custom":{},"mixins":["global-s-loading"]},"state":{"hide":true},"inputs":{}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 0px","border-radius":"0px","color":"white","font-size":"18px","font-family":"${font-text}"}}},"mixins":["global-s-0"]},"inputs":{"type":{"name":"type","type":"string","default":"submit","attr":true,"is":"submit"},"disabled":{"name":"disabled","type":"boolean","default":false,"attr":true,"is":false}},"events":{},"editorEvents":{"OnSelfAdded":{"name":"SetupLoader","behaviors":[{"behaviorId":"global-b-setupLoader"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"padding":"24px 22px 24px 22px","flex-direction":"column","align-items":"center"}},"breakpoint-4":{"default":{"min-width":"100%"}}},"mixins":["global-s-2","sam_page-s-89"]},"events":{"submit":{"name":"submit","eventParams":{},"behaviors":[{"behaviorId":"global-b-contactform","args":{"tableName":"contact_requests","emailId":"sam_page-c-52","messageId":"sam_page-c-54","nameId":"sam_page-c-53","errorId":"sam_page-c-55","apiEmailField":"email","apiMessageField":"message","apiNameField":"name"}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","padding":"1px 0px 56px 0px","width":"100%","height":"auto"}},"breakpoint-4":{"default":{"display":"flex","width":"100%","margin":"0px 0px 0px 0px","background-color":"transparent"}},"breakpoint-3":{"default":{"width":"100%"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-41","name":"Footer","tag":"footer","parentId":"sam_page-c-25","children":[{"id":"sam_page-c-42","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-41","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-43","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-41","children":[{"id":"sam_page-c-44","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-43","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-45","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-43","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","color":"${text-light}"}}},"mixins":["global-s-8"]},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"text-align":"center","align-items":"center","display":"flex","justify-content":"center","margin":"auto 0px 0px 0px","padding":"64px 0px 12px 0px"}}},"mixins":["global-s-3"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/blog":{"name":"Blog","route":"/blog","root":{"id":"sam_page-c-63","name":"Root","tag":"div","children":[{"id":"sam_page-c-64","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-63","children":[{"id":"sam_page-c-562","name":"Link","tag":"a","parentId":"sam_page-c-64","children":[{"id":"sam_page-c-65","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-562","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"50px"}}},"mixins":["global-s-9"]}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"40px 0 40px"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-66","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-64","children":[{"id":"sam_page-c-67","name":"Link","tag":"a","parentId":"sam_page-c-66","children":[{"id":"sam_page-c-68","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-67","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-69","name":"Link","tag":"a","parentId":"sam_page-c-66","children":[{"id":"sam_page-c-70","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-69","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-71","name":"Link","tag":"a","parentId":"sam_page-c-66","children":[{"id":"sam_page-c-72","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-71","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-73","name":"Link","tag":"a","parentId":"sam_page-c-66","children":[{"id":"sam_page-c-74","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-73","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","justify-content":"center"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-75","name":"NavMenu","tag":"div","parentId":"sam_page-c-64","children":[{"id":"sam_page-c-76","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-75","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-77","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-75","style":{"custom":{},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-88","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-75","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","margin":"40px 0px 16px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[{"behaviorId":"global-b-navChangeChildren"}]}}},{"id":"sam_page-c-78","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-64","children":[{"id":"sam_page-c-79","name":"TextBox","tag":"div","parentId":"sam_page-c-78","children":[{"id":"sam_page-c-80","name":"Text","tag":"div","content":"

This is where I log my experiments with PubStudio, write about my travel adventures, and may eventually blog about open source frontend development, game development in Rust, and various hardware projects.

","parentId":"sam_page-c-79","style":{"custom":{},"mixins":["global-s-8"]}},{"id":"sam_page-c-90","name":"H3","tag":"h3","content":"

PubStudio Sites

","parentId":"sam_page-c-79","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px","background-color":"rgba(180,230,220,1)","padding":"6px 0px 5px 10px"}}},"mixins":["global-s-11"]}},{"id":"sam_page-c-91","name":"Days","tag":"div","parentId":"sam_page-c-79","children":[{"id":"sam_page-c-179","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-92","name":"H4","tag":"h4","content":"

Intro - A Page A Day

","parentId":"sam_page-c-179","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{"breakpoint-1":{"default":{"display":"none"},":visited":{}}},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/page-intro"}}},{"id":"sam_page-c-93","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-178","name":"H4","tag":"h4","content":"

Site 1 - Personal Page

","parentId":"sam_page-c-93","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day1"}}},{"id":"sam_page-c-560","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-561","name":"H4","tag":"h4","content":"

Site 2 - World Clocks

","parentId":"sam_page-c-560","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day2"}}},{"id":"sam_page-c-544","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-545","name":"H4","tag":"h4","content":"

Site 3 - Cheatsheet

","parentId":"sam_page-c-544","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day3"}}},{"id":"sam_page-c-546","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-547","name":"H4","tag":"h4","content":"

Site 4 - Image Optimizer

","parentId":"sam_page-c-546","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day4"}}},{"id":"sam_page-c-548","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-549","name":"H4","tag":"h4","content":"

Site 5 - Color Picker

","parentId":"sam_page-c-548","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day5"}}},{"id":"sam_page-c-550","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-551","name":"H4","tag":"h4","content":"

Site 6 - Space Game

","parentId":"sam_page-c-550","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day6"}}},{"id":"sam_page-c-552","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-553","name":"H4","tag":"h4","content":"

Site 7 - SamaTech Site

","parentId":"sam_page-c-552","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day7"}}},{"id":"sam_page-c-554","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-555","name":"H4","tag":"h4","content":"

Site 8 - Recipes

","parentId":"sam_page-c-554","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day8"}}},{"id":"sam_page-c-556","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-557","name":"H4","tag":"h4","content":"

Day 10 -

","parentId":"sam_page-c-556","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{"breakpoint-1":{"default":{"display":"none"}}},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day9"}}},{"id":"sam_page-c-558","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-559","name":"H4","tag":"h4","content":"

Day 11 -

","parentId":"sam_page-c-558","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{"breakpoint-1":{"default":{"display":"none"}}},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day10"}}},{"id":"sam_page-c-705","name":"Link","tag":"a","parentId":"sam_page-c-91","children":[{"id":"sam_page-c-706","name":"H4","tag":"h4","content":"

Day 9 - Brick Pong

","parentId":"sam_page-c-705","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-94"]}}],"style":{"custom":{},"mixins":["sam_page-s-785"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/day10"}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","padding":"0px 10px 6px 10px","flex-wrap":"wrap"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"flex-direction":"column","width":"600px"}}},"mixins":["sam_page-s-89"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-81","name":"Footer","tag":"footer","parentId":"sam_page-c-64","children":[{"id":"sam_page-c-82","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-81","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-83","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-81","children":[{"id":"sam_page-c-84","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-83","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-85","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-83","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day1":{"name":"Day1","route":"/day1","root":{"id":"sam_page-c-95","name":"Root","tag":"div","children":[{"id":"sam_page-c-96","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-95","children":[{"id":"sam_page-c-123","name":"BlogHeader","tag":"div","parentId":"sam_page-c-96","children":[{"id":"sam_page-c-564","name":"Link","tag":"a","parentId":"sam_page-c-123","children":[{"id":"sam_page-c-565","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-564","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-107","name":"NavMenu","tag":"div","parentId":"sam_page-c-123","children":[{"id":"sam_page-c-108","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-107","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-109","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-107","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-110","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-107","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[{"behaviorId":"global-b-navAddChildren"}]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[{"behaviorId":"global-b-navAddChildren"}]},"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnPageChange":{"name":"OnPageChange","behaviors":[{"behaviorId":"global-b-navChangeChildren"}]}}},{"id":"sam_page-c-98","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-123","children":[{"id":"sam_page-c-99","name":"Link","tag":"a","parentId":"sam_page-c-98","children":[{"id":"sam_page-c-100","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-99","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-101","name":"Link","tag":"a","parentId":"sam_page-c-98","children":[{"id":"sam_page-c-102","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-101","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-103","name":"Link","tag":"a","parentId":"sam_page-c-98","children":[{"id":"sam_page-c-104","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-103","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-105","name":"Link","tag":"a","parentId":"sam_page-c-98","children":[{"id":"sam_page-c-106","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-105","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-124","name":"H1","tag":"h1","content":"

Day 1 - Personal Site

","parentId":"sam_page-c-96","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-125","name":"H6","tag":"h6","content":"

July 1, 2024

","parentId":"sam_page-c-96","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-111","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-96","children":[{"id":"sam_page-c-112","name":"TextBox","tag":"div","parentId":"sam_page-c-111","children":[{"id":"sam_page-c-113","name":"Text","tag":"div","content":"

Today I’m resurrecting my personal home page. In the past, it included an intro page with a little HTML5 game, a portfolio of apps and projects I worked on in college, and a resume. The content needs a refresh, though I can reuse some of the theme and style choices.

A simple home page, contact form, and blog should be enough for now. The process of throwing together a basic static site with PubStudio isn’t too exciting, so I’ll briefly walk through my process.

","parentId":"sam_page-c-112","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-126","name":"Number List","tag":"ol","parentId":"sam_page-c-112","children":[{"id":"sam_page-c-127","name":"List Item","tag":"li","content":"

Create the site - I’m cheating a bit here by using the PubStudio admin interface to generate a site on the lowest tier plan.

","parentId":"sam_page-c-126","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-17"]}},{"id":"sam_page-c-128","name":"List Item","tag":"li","content":"

Choose a theme - Experiment with colors, and browse Google fonts. Sometimes I’ll use a tool like https://coolors.com, but this time I decided to wing it.

","parentId":"sam_page-c-126","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-129","name":"List Item","tag":"li","content":"

Lay out the home page - I like to set up the structure of the page first with some placeholders, before filling in the content. When I’m comfortable with a section, I’ll create a reusable style so it’s easy to apply elsewhere.

","parentId":"sam_page-c-126","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-130","name":"List Item","tag":"li","content":"

Contact form - There’s a builtin component for this, so cloning the home page and adding the form is quick.

","parentId":"sam_page-c-126","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-131","name":"List Item","tag":"li","content":"

Responsive design - Briefly test the site at existing breakpoints, and use devtools to view the site preview at different screen widths. Note any UI problems, and adjust accordingly

","parentId":"sam_page-c-126","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-132","name":"List Item","tag":"li","content":"

Blog - The only thing left is to build a simple blog page, and start writing!

","parentId":"sam_page-c-126","style":{"mixins":["global-s-17"],"custom":{}}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-133","name":"Text","tag":"div","content":"

The result is the site you’re looking at now - it took longer than expected because I noticed a few bugs in the site builder UI. After tracking them on the builder Github page, I fixed a couple of the more annoying ones and finished up the site.

","parentId":"sam_page-c-112","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-114","name":"Footer","tag":"footer","parentId":"sam_page-c-96","children":[{"id":"sam_page-c-115","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-114","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-116","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-114","children":[{"id":"sam_page-c-117","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-116","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-118","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-116","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/page-intro":{"name":"Intro - A Page A day","route":"/page-intro","root":{"id":"sam_page-c-134","name":"Root","tag":"div","children":[{"id":"sam_page-c-135","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-134","children":[{"id":"sam_page-c-136","name":"BlogHeader","tag":"div","parentId":"sam_page-c-135","children":[{"id":"sam_page-c-563","name":"Link","tag":"a","parentId":"sam_page-c-136","children":[{"id":"sam_page-c-137","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-563","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-138","name":"NavMenu","tag":"div","parentId":"sam_page-c-136","children":[{"id":"sam_page-c-139","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-138","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-140","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-138","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-141","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-138","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[{"behaviorId":"global-b-navAddChildren"}]},"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnPageChange":{"name":"OnPageChange","behaviors":[{"behaviorId":"global-b-navChangeChildren"}]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]}}},{"id":"sam_page-c-143","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-136","children":[{"id":"sam_page-c-144","name":"Link","tag":"a","parentId":"sam_page-c-143","children":[{"id":"sam_page-c-145","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-144","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-146","name":"Link","tag":"a","parentId":"sam_page-c-143","children":[{"id":"sam_page-c-147","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-146","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-148","name":"Link","tag":"a","parentId":"sam_page-c-143","children":[{"id":"sam_page-c-149","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-148","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-150","name":"Link","tag":"a","parentId":"sam_page-c-143","children":[{"id":"sam_page-c-151","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-150","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-152","name":"H1","tag":"h1","content":"

Intro - A Page A Day

","parentId":"sam_page-c-135","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-153","name":"H6","tag":"h6","content":"

July 1, 2024

","parentId":"sam_page-c-135","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-154","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-135","children":[{"id":"sam_page-c-155","name":"TextBox","tag":"div","parentId":"sam_page-c-154","children":[{"id":"sam_page-c-156","name":"Text","tag":"div","content":"

In the month of July, I plan to create and release one unique website per day using PubStudio, a platform I helped develop and currently maintain. There are a few purposes to this project; improve the PubStudio editor through real use, exercise my creativity and design sense, and improve my writing and communication skills.

The first few pages will be simple and mostly static, later on I’ll try to explore some more complex sites that push the limits of PubStudio’s WYSIWYG editor. The platform is capable of accepting user input, saving it to a database, and displaying it, but there are several missing pieces that need to be filled in before it works as expected.

Here is some of the functionality I aim to enable in the PubStudio editor over the next month:

","parentId":"sam_page-c-155","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-172","name":"Number List","tag":"ol","parentId":"sam_page-c-155","children":[{"id":"sam_page-c-173","name":"List Item","tag":"li","content":"

Moderated user input - provide tools for site creators to accept user input and manually approve it for display. For example, a comment section on a blog, or a review site that accepts submissions.

","parentId":"sam_page-c-172","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-174","name":"List Item","tag":"li","content":"

Dynamic pages - Currently all pages are explicitly created in the editor. Allow pages with dynamic routes that serve content from a database table. For example, a user profile page.

","parentId":"sam_page-c-172","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-175","name":"List Item","tag":"li","content":"

Inline and external videos - Add builtin components for uploading/hosting videos, and embedding YouTube videos.

","parentId":"sam_page-c-172","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-176","name":"List Item","tag":"li","content":"

External scrips - Provide a mechanism for loading external scripts when a page is opened, or a specific component appears.

","parentId":"sam_page-c-172","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-177","name":"List Item","tag":"li","content":"

Embedded WASM - Explore ways to upload and initialize WASM modules in the site.

","parentId":"sam_page-c-172","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{"breakpoint-3":{"default":{}}},"mixins":["global-s-16"]}},{"id":"sam_page-c-180","name":"DividerHorizontal","tag":"div","parentId":"sam_page-c-155","style":{"custom":{"breakpoint-1":{"default":{"width":"200px"}}},"mixins":["global-s-19"]}},{"id":"sam_page-c-171","name":"Text","tag":"div","content":"

As a software developer I rarely get the chance to express creativity, and as a result my design abilities are somewhat uninspired. I mostly either work on purely technical projects, or translate existing designs to code. By forcing myself to come up with a unique website every day, I hope to flex the right side of my brain a bit more than usual. I’m not going to learn to produce amazing graphics or beautiful animations in a month, but by forcing myself to make something visual every day, I can at least improve my sense of layout and colors.

It’s been years since I’ve had to write anything non-technical, so blogging about each site is a good way to get back into that as well.

","parentId":"sam_page-c-155","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-165","name":"Footer","tag":"footer","parentId":"sam_page-c-135","children":[{"id":"sam_page-c-166","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-165","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-167","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-165","children":[{"id":"sam_page-c-168","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-167","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-169","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-167","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day2":{"name":"Day2","route":"/day2","root":{"id":"sam_page-c-182","name":"Root","tag":"div","children":[{"id":"sam_page-c-183","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-182","children":[{"id":"sam_page-c-184","name":"BlogHeader","tag":"div","parentId":"sam_page-c-183","children":[{"id":"sam_page-c-566","name":"Link","tag":"a","parentId":"sam_page-c-184","children":[{"id":"sam_page-c-567","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-566","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-186","name":"NavMenu","tag":"div","parentId":"sam_page-c-184","children":[{"id":"sam_page-c-187","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-186","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-188","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-186","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-189","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-186","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-191","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-184","children":[{"id":"sam_page-c-192","name":"Link","tag":"a","parentId":"sam_page-c-191","children":[{"id":"sam_page-c-193","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-192","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-194","name":"Link","tag":"a","parentId":"sam_page-c-191","children":[{"id":"sam_page-c-195","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-194","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-196","name":"Link","tag":"a","parentId":"sam_page-c-191","children":[{"id":"sam_page-c-197","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-196","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-198","name":"Link","tag":"a","parentId":"sam_page-c-191","children":[{"id":"sam_page-c-199","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-198","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-200","name":"H1","tag":"h1","content":"

Day 2 - World Clocks

","parentId":"sam_page-c-183","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-201","name":"H6","tag":"h6","content":"

July 2, 2024

","parentId":"sam_page-c-183","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-351","name":"Link","tag":"a","content":"day2.pubstud.io","parentId":"sam_page-c-183","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day2.pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-202","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-183","children":[{"id":"sam_page-c-203","name":"TextBox","tag":"div","parentId":"sam_page-c-202","children":[{"id":"sam_page-c-204","name":"Text","tag":"div","content":"

It’s day 2 and I’m already stumped! Actually, I have plenty of ideas for sites I’d like to build, but it’s getting late and they’re all too complicated. I need something simple, doesn’t require updates to the PubStudio editor, but is still genuinely useful or interesting - no cop outs!

To get some inspiration I took a look at my browser history, and all the open tabs on my laptop and phone. Is there anything I use on a daily basis that could be more convenient, or at least more aesthetically pleasing? No luck with the browser history, but I noticed I always have at least one tab open for weather and time in another location/timezone.

Dealing with weather APIs seems like a hassle and it would be tough to do better than just searching “weather in X” on Google. But maybe I can do something with time - I live in Taipei, and occasionally interact with people in Vietnam, Japan, the US (east and west coast), and Switzerland. It would be nice to have a simple page that can add/remove clocks and persist when the browser is closed.

Before proceeding, I’ll do a little research to see what already exists. A cursory search shows worldtimebuddy, which does cover my requirements, but there’s a lot of extra stuff I don’t need and the layout doesn’t adjust for mobile. Another one high up on the search results is timeanddate.com, the clocks look nice and basic features are covered, but I’d like a cleaner interface and for seconds to be off by default. At this point, I have a good idea of what I want to build, so I can define my requirements.

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-220","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["sam_page-s-354"]}},{"id":"sam_page-c-221","name":"Bullet List","tag":"ul","parentId":"sam_page-c-203","children":[{"id":"sam_page-c-222","name":"List Item","tag":"li","content":"

Default to showing local time

","parentId":"sam_page-c-221","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-223","name":"List Item","tag":"li","content":"

Add clocks by city

","parentId":"sam_page-c-221","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-228","name":"List Item","tag":"li","content":"

Remove clocks

","parentId":"sam_page-c-221","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-229","name":"List Item","tag":"li","content":"

Save state to local storage

","parentId":"sam_page-c-221","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-230","name":"List Item","tag":"li","content":"

No seconds by default

","parentId":"sam_page-c-221","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-231","name":"List Item","tag":"li","content":"

Simple responsive layout

","parentId":"sam_page-c-221","style":{"mixins":["global-s-17"],"custom":{}}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-224","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-354"]}},{"id":"sam_page-c-225","name":"Bullet List","tag":"ul","parentId":"sam_page-c-203","children":[{"id":"sam_page-c-226","name":"List Item","tag":"li","content":"

Toggle seconds on/off

","parentId":"sam_page-c-225","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-227","name":"List Item","tag":"li","content":"

Share clock settings via custom URL

","parentId":"sam_page-c-225","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-232","name":"List Item","tag":"li","content":"

Multiselect with search for cities

","parentId":"sam_page-c-225","style":{"mixins":["global-s-17"],"custom":{}}},{"id":"sam_page-c-233","name":"List Item","tag":"li","content":"

Add by UTC offset with custom label

","parentId":"sam_page-c-225","style":{"mixins":["global-s-17"],"custom":{}}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-234","name":"Text","tag":"div","content":"

It’s possible that I’ve bitten off more than I can chew and will need some extra time to implement this, but I think it’s worth the effort!

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-352","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-365","name":"Link","tag":"a","content":"

https://day2.pubstud.io

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day2.pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-353","name":"Text","tag":"div","content":"

It took quite a bit longer than a day to finally get through all the “must have” features. The main issue was that I wanted a way to hide components by default, in order to display an input form after clicking an icon to add a new clock. It would have been possible to work around this with CSS opacity or display, but the render already has a built-in way to hide/show components in the DOM, and I wanted to take advantage of that. In order to do so, it was necessary to implement a new section in the component edit menu.

The result is that it’s much easier to skip rendering a component when the page loads! For example:

","parentId":"sam_page-c-203","style":{"custom":{"breakpoint-1":{"default":{"margin":"6px 0px 0px 0px"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-361","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-203","children":[{"id":"sam_page-c-355","name":"Button","tag":"button","content":"Click Me","parentId":"sam_page-c-361","children":[{"id":"sam_page-c-356","name":"ButtonText","tag":"div","content":"

Click Me!

","parentId":"sam_page-c-355","style":{"custom":{},"mixins":[]}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 0px"}}},"mixins":["global-s-0"]},"inputs":{"type":{"name":"type","type":"string","default":"submit","attr":true,"is":"submit"},"disabled":{"name":"disabled","type":"boolean","default":false,"attr":true,"is":false}},"events":{"click":{"name":"click","behaviors":[{"behaviorId":"global-b-setHidden","args":{"id":"sam_page-c-362"}},{"behaviorId":"global-b-setHidden","args":{"hide":true,"id":"sam_page-c-355"}}]}},"editorEvents":{"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]}}},{"id":"sam_page-c-362","name":"Button","tag":"button","content":"Click Me","parentId":"sam_page-c-361","children":[{"id":"sam_page-c-363","name":"ButtonText","tag":"div","content":"

Now Click Me!

","parentId":"sam_page-c-362","style":{"custom":{}}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px auto"}}},"mixins":["global-s-0"]},"state":{"hide":true},"inputs":{"type":{"name":"type","type":"string","default":"submit","attr":true,"is":"submit"},"disabled":{"name":"disabled","type":"boolean","default":false,"attr":true,"is":false}},"events":{"click":{"name":"click","behaviors":[{"behaviorId":"global-b-setHidden","args":{"id":"sam_page-c-362","hide":true}},{"behaviorId":"global-b-setHidden","args":{"id":"sam_page-c-355"}}]}},"editorEvents":{"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]}}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","height":"100px","align-items":"center","justify-content":"flex-start"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-364","name":"Text","tag":"div","content":"

I’d like to come back to this one when I have a moment, in order to implement some of the nice-to-haves. In particular, the method of adding new clocks requires the user to know the exact timestamp name, which is inconvenient.

Finally, I’d like to add an optional analog clock display for some visual flare. I’ll store the clock face image below for safekeeping.

","parentId":"sam_page-c-203","style":{"custom":{},"mixins":["global-s-8"]}},{"id":"sam_page-c-236","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-203","children":[{"id":"sam_page-c-235","name":"Svg","tag":"svg","content":"","parentId":"sam_page-c-236","style":{"custom":{"breakpoint-1":{"default":{"height":"120px","width":"120px"}}},"mixins":["global-s-15"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","padding":"16px 0px 16px 0px","justify-content":"center"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-213","name":"Footer","tag":"footer","parentId":"sam_page-c-183","children":[{"id":"sam_page-c-214","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-213","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-215","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-213","children":[{"id":"sam_page-c-216","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-215","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-217","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-215","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day4":{"name":"Day4","route":"/day4","root":{"id":"sam_page-c-237","name":"Root","tag":"div","children":[{"id":"sam_page-c-238","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-237","children":[{"id":"sam_page-c-239","name":"BlogHeader","tag":"div","parentId":"sam_page-c-238","children":[{"id":"sam_page-c-570","name":"Link","tag":"a","parentId":"sam_page-c-239","children":[{"id":"sam_page-c-571","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-570","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-241","name":"NavMenu","tag":"div","parentId":"sam_page-c-239","children":[{"id":"sam_page-c-242","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-241","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-243","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-241","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-244","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-241","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-245","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-239","children":[{"id":"sam_page-c-246","name":"Link","tag":"a","parentId":"sam_page-c-245","children":[{"id":"sam_page-c-247","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-246","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-248","name":"Link","tag":"a","parentId":"sam_page-c-245","children":[{"id":"sam_page-c-249","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-248","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-250","name":"Link","tag":"a","parentId":"sam_page-c-245","children":[{"id":"sam_page-c-251","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-250","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-252","name":"Link","tag":"a","parentId":"sam_page-c-245","children":[{"id":"sam_page-c-253","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-252","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-254","name":"H1","tag":"h1","content":"

Day 4 - Image Optimizer

","parentId":"sam_page-c-238","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-255","name":"H6","tag":"h6","content":"

July 4, 2024

","parentId":"sam_page-c-238","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-375","name":"Link","tag":"a","content":"

day4.pubstud.io

","parentId":"sam_page-c-238","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day4.pubstud.io"}}},{"id":"sam_page-c-256","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-238","children":[{"id":"sam_page-c-257","name":"TextBox","tag":"div","parentId":"sam_page-c-256","children":[{"id":"sam_page-c-258","name":"Text","tag":"div","content":"

A few months ago I evaluated options for optimizing images in the browser, and wrote a prototype in Vue that lets you drop PNGs and JPEGs in the browser and automatically optimize them according to the configured output quality. Basically, a stripped down version of squoosh.app (by Google) geared towards quickly downloading the result, rather than experimenting with optimization parameters.

My main use case is quickly reducing image size for web, and it’s also occasionally convenient for storage. On Mac, the ImageOptim app works fairly well, but it can be slow and inconvenient when you want to adjust settings.

It would also be nice to set up a build pipeline for the underlying compression programs (oxipng, mozjpeg, etc.) to make sure the WASM builds are always up to date, but that’s a project for another day.

","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-285","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-286","name":"Bullet List","tag":"ul","parentId":"sam_page-c-257","children":[{"id":"sam_page-c-287","name":"List Item","tag":"li","content":"

Optimize dropped JPG and PNG files

","parentId":"sam_page-c-286","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-292","name":"List Item","tag":"li","content":"

Simple responsive layout

","parentId":"sam_page-c-286","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-293","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-294","name":"Bullet List","tag":"ul","parentId":"sam_page-c-257","children":[{"id":"sam_page-c-370","name":"List Item","tag":"li","content":"

Output quality setting

","parentId":"sam_page-c-294","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-295","name":"List Item","tag":"li","content":"

SVG support via SVGO

","parentId":"sam_page-c-294","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-296","name":"List Item","tag":"li","content":"

Optimize entire folder/multiple files of varying types

","parentId":"sam_page-c-294","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-297","name":"List Item","tag":"li","content":"

GIF support

","parentId":"sam_page-c-294","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-298","name":"List Item","tag":"li","content":"

WebP support

","parentId":"sam_page-c-294","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-301","name":"List Item","tag":"li","content":"

Latest version of mozjpeg

","parentId":"sam_page-c-294","style":{"mixins":["global-s-17"],"custom":{}}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-371","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-372","name":"Link","tag":"a","content":"

https://day4.pubstud.io

","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day4.pubstud.io"}}},{"id":"sam_page-c-373","name":"Text","tag":"div","content":"

This site took much longer than expected, because I ran into a few issues while adding support for custom Vue components, external WASM modules, and conveniently loading external javascript. The result is a somewhat convoluted process for building a Vue component as a library project and inserting it via the editor. It works, but will need lots of refinement and instructions before it can be released as a public feature. Unfortunately I haven’t had a chance to look into any of the nice-to-haves, but hope to revisit soon.

It probably would have made more sense to make a page with a simpler custom Vue component first, but I think the effort was worth it. The best thing about adding a complex feature for a specific page is that it can then be included with no effort on any other site! For example, the image optimization widget can be embedded in this blog.

","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-374","name":"VueComponent","tag":"vue","parentId":"sam_page-c-257","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px auto 0px auto","max-width":"100%"}}}},"inputs":{"componentName":{"type":"string","name":"componentName","attr":false,"default":"","is":"Optimizer"},"oxipngWasm":{"name":"oxipngWasm","type":"string","default":"https://pub-3091ea5c0f2e49f680e2481e04871042.r2.dev/870aafc9-36e9-476a-b38c-c1aaaad9d9fe/46aa633f-d8ca-4033-a4f0-b08f22b45db9.wasm","attr":false,"is":"https://pub-3091ea5c0f2e49f680e2481e04871042.r2.dev/870aafc9-36e9-476a-b38c-c1aaaad9d9fe/46aa633f-d8ca-4033-a4f0-b08f22b45db9.wasm"},"mozjpegWasm":{"name":"mozjpegWasm","type":"string","default":"https://pub-3091ea5c0f2e49f680e2481e04871042.r2.dev/870aafc9-36e9-476a-b38c-c1aaaad9d9fe/28f79fd4-9aae-457e-b617-585cbe77d1f6.wasm","attr":false,"is":"https://pub-3091ea5c0f2e49f680e2481e04871042.r2.dev/870aafc9-36e9-476a-b38c-c1aaaad9d9fe/28f79fd4-9aae-457e-b617-585cbe77d1f6.wasm"},"workerUrl":{"name":"workerUrl","type":"string","default":"https://site-assets.pubstudioassets.com/c0f5d82a-0071-434c-97ad-a17a882f7903/84028f2a-16e0-4379-965f-1d6387d06966.js","attr":false,"is":"https://site-assets.pubstudioassets.com/c0f5d82a-0071-434c-97ad-a17a882f7903/84028f2a-16e0-4379-965f-1d6387d06966.js"}}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-276","name":"Footer","tag":"footer","parentId":"sam_page-c-238","children":[{"id":"sam_page-c-277","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-276","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-278","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-276","children":[{"id":"sam_page-c-279","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-278","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-280","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-278","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{"margin":"0"}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{"script":[{"src":"https://site-assets.pubstudioassets.com/c0f5d82a-0071-434c-97ad-a17a882f7903/75470be9-ad50-4bbc-9aaf-67b2720c0295.js","type":"module","async":"true"}]}},"/day3":{"name":"Day3","route":"/day3","root":{"id":"sam_page-c-302","name":"Root","tag":"div","children":[{"id":"sam_page-c-303","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-302","children":[{"id":"sam_page-c-304","name":"BlogHeader","tag":"div","parentId":"sam_page-c-303","children":[{"id":"sam_page-c-568","name":"Link","tag":"a","parentId":"sam_page-c-304","children":[{"id":"sam_page-c-569","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-568","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-306","name":"NavMenu","tag":"div","parentId":"sam_page-c-304","children":[{"id":"sam_page-c-307","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-306","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-308","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-306","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-309","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-306","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-314","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-304","children":[{"id":"sam_page-c-315","name":"Link","tag":"a","parentId":"sam_page-c-314","children":[{"id":"sam_page-c-316","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-315","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-317","name":"Link","tag":"a","parentId":"sam_page-c-314","children":[{"id":"sam_page-c-318","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-317","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-319","name":"Link","tag":"a","parentId":"sam_page-c-314","children":[{"id":"sam_page-c-320","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-319","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-321","name":"Link","tag":"a","parentId":"sam_page-c-314","children":[{"id":"sam_page-c-322","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-321","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-323","name":"H1","tag":"h1","content":"

Day 3 - Cheatsheet

","parentId":"sam_page-c-303","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-324","name":"H6","tag":"h6","content":"

July 3, 2024

","parentId":"sam_page-c-303","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-368","name":"Link","tag":"a","content":"

day3.pubstud.io

","parentId":"sam_page-c-303","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day3.pubstud.io"}}},{"id":"sam_page-c-325","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-303","children":[{"id":"sam_page-c-326","name":"TextBox","tag":"div","parentId":"sam_page-c-325","children":[{"id":"sam_page-c-327","name":"Text","tag":"div","content":"

Since I bit off a little more than I could chew on day 2, and am still putting the finishing touches on that site, I’ll scale it back for day 3. Originally I planned to do a simple flashcard site for language study (I’m learning Chinese and Vietnamese), but the site builder needs updates that won’t be finished for at least another few days.

Today I’ll keep it very simple with a general cheatsheet built from my notes. The content is probably only useful to me, but if all goes well the design can be turned into a PubStudio template! There are a lot of nice cheatsheets on the web to take inspiration from. The requirements are simple; it should be easy to read, separate categories into distinct sections, and look good on any screen size.

The information on this page will be my most often used development-related commands, with emphasis on the ones I have trouble memorizing. The categories are miscellaneous command line tools, curl, kubectl (Kubernetes), Docker, psql (Postgres), and ffmpeg.

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-328","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["sam_page-s-354"]}},{"id":"sam_page-c-329","name":"Bullet List","tag":"ul","parentId":"sam_page-c-326","children":[{"id":"sam_page-c-330","name":"List Item","tag":"li","content":"

Single page cheatsheet

","parentId":"sam_page-c-329","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-331","name":"List Item","tag":"li","content":"

Sections for each tool

","parentId":"sam_page-c-329","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-335","name":"List Item","tag":"li","content":"

Simple responsive layout

","parentId":"sam_page-c-329","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-336","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["sam_page-s-354"]}},{"id":"sam_page-c-337","name":"Bullet List","tag":"ul","parentId":"sam_page-c-326","children":[{"id":"sam_page-c-338","name":"List Item","tag":"li","content":"

Links to full documentation

","parentId":"sam_page-c-337","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-339","name":"List Item","tag":"li","content":"

Click to copy command

","parentId":"sam_page-c-337","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-342","name":"Text","tag":"div","content":"

Not much to do besides choose a design and get going!

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-367","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-366","name":"Link","tag":"a","content":"

https://day3.pubstud.io

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day3.pubstud.io"}}},{"id":"sam_page-c-369","name":"Text","tag":"div","content":"

This one was quick, so I was able to add a click-to-copy icon for the command line snippets. The page is very simple, but it could be useful to turn it into a PubStudio template.

The main issue was supporting a responsive layout. In order to get the different sections to flow nicely I used a vertical flex layout with max-height. This requires manually setting max width/height at different breakpoints in order to switch between 1/2/3 column layouts, which means it may be necessary to adjust if sections are added or removed.

","parentId":"sam_page-c-326","style":{"custom":{"breakpoint-1":{"default":{"margin":"6px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-345","name":"Footer","tag":"footer","parentId":"sam_page-c-303","children":[{"id":"sam_page-c-346","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-345","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-347","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-345","children":[{"id":"sam_page-c-348","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-347","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-349","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-347","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day5":{"name":"Day5","route":"/day5","root":{"id":"sam_page-c-376","name":"Root","tag":"div","children":[{"id":"sam_page-c-377","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-376","children":[{"id":"sam_page-c-378","name":"BlogHeader","tag":"div","parentId":"sam_page-c-377","children":[{"id":"sam_page-c-572","name":"Link","tag":"a","parentId":"sam_page-c-378","children":[{"id":"sam_page-c-573","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-572","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-380","name":"NavMenu","tag":"div","parentId":"sam_page-c-378","children":[{"id":"sam_page-c-381","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-380","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-382","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-380","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-383","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-380","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-384","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-378","children":[{"id":"sam_page-c-385","name":"Link","tag":"a","parentId":"sam_page-c-384","children":[{"id":"sam_page-c-386","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-385","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-387","name":"Link","tag":"a","parentId":"sam_page-c-384","children":[{"id":"sam_page-c-388","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-387","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-389","name":"Link","tag":"a","parentId":"sam_page-c-384","children":[{"id":"sam_page-c-390","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-389","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-391","name":"Link","tag":"a","parentId":"sam_page-c-384","children":[{"id":"sam_page-c-392","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-391","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-393","name":"H1","tag":"h1","content":"

Day 5 - Color Picker

","parentId":"sam_page-c-377","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-394","name":"H6","tag":"h6","content":"

July 5, 2024

","parentId":"sam_page-c-377","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-395","name":"Link","tag":"a","content":"

day5.pubstud.io

","parentId":"sam_page-c-377","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day5.pubstud.io"}}},{"id":"sam_page-c-396","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-377","children":[{"id":"sam_page-c-397","name":"TextBox","tag":"div","parentId":"sam_page-c-396","children":[{"id":"sam_page-c-398","name":"Text","tag":"div","content":"

Based on the work done on Day 4 in order to implement the image optimizer page, I have a few more ideas for pages based on custom Vue components. The first is a custom color picker implemented for the PubStudio platform. It would be great to extract the code from the platform monorepo into a standalone package.

The goal for this site is to be the demo page for the color picker widget, which will be made available as an NPM package. Most of the work will be refactoring and setting up the boilerplate for a new repository, with testing and automated releases. Luckily, most of the tedious stuff can be copied over from the image optimization repo.

A great addition would be to implement events/callbacks for custom Vue components in the builder. This would allow the demo page to include features like copying the color to the clipboard, setting the page background to the selected color, etc.

","parentId":"sam_page-c-397","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-399","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-397","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-400","name":"Bullet List","tag":"ul","parentId":"sam_page-c-397","children":[{"id":"sam_page-c-401","name":"List Item","tag":"li","content":"

Extract ColorPicker from PubStudio repo

","parentId":"sam_page-c-400","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-402","name":"List Item","tag":"li","content":"

Publish NPM package

","parentId":"sam_page-c-400","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-420","name":"List Item","tag":"li","content":"

Make demo page with picker component

","parentId":"sam_page-c-400","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-403","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-397","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-404","name":"Bullet List","tag":"ul","parentId":"sam_page-c-397","children":[{"id":"sam_page-c-405","name":"List Item","tag":"li","content":"

Implement events for custom components

","parentId":"sam_page-c-404","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-406","name":"List Item","tag":"li","content":"

Set demo page background to selected color

","parentId":"sam_page-c-404","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-407","name":"List Item","tag":"li","content":"

Button to copy color to clipboard

","parentId":"sam_page-c-404","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-411","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-397","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-412","name":"Link","tag":"a","content":"

https://day5.pubstud.io

","parentId":"sam_page-c-397","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day5.pubstud.io"}}},{"id":"sam_page-c-413","name":"Text","tag":"div","content":"

Splitting the color picker from the PubStudio monorepo went smoothly. Since I wanted to take advantage of events from the custom component in order to set the demo page background to the picker color, the entire site was implemented as a custom component.

Setting the entire site to a custom Vue component is probably not useful outside quickly deploying demos like this, but it was was an interesting exercise. Unfortunately, for that reason it can’t easily embed in this blog without looking odd.

","parentId":"sam_page-c-397","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-415","name":"Footer","tag":"footer","parentId":"sam_page-c-377","children":[{"id":"sam_page-c-416","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-415","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-417","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-415","children":[{"id":"sam_page-c-418","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-417","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-419","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-417","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day6":{"name":"Day6","route":"/day6","root":{"id":"sam_page-c-421","name":"Root","tag":"div","children":[{"id":"sam_page-c-422","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-421","children":[{"id":"sam_page-c-423","name":"BlogHeader","tag":"div","parentId":"sam_page-c-422","children":[{"id":"sam_page-c-574","name":"Link","tag":"a","parentId":"sam_page-c-423","children":[{"id":"sam_page-c-575","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-574","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-425","name":"NavMenu","tag":"div","parentId":"sam_page-c-423","children":[{"id":"sam_page-c-426","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-425","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-427","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-425","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-428","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-425","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-429","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-423","children":[{"id":"sam_page-c-430","name":"Link","tag":"a","parentId":"sam_page-c-429","children":[{"id":"sam_page-c-431","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-430","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-432","name":"Link","tag":"a","parentId":"sam_page-c-429","children":[{"id":"sam_page-c-433","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-432","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-434","name":"Link","tag":"a","parentId":"sam_page-c-429","children":[{"id":"sam_page-c-435","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-434","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-436","name":"Link","tag":"a","parentId":"sam_page-c-429","children":[{"id":"sam_page-c-437","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-436","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px","height":"50px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-438","name":"H1","tag":"h1","content":"

Day 6 - Space Game

","parentId":"sam_page-c-422","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-439","name":"H6","tag":"h6","content":"

July 6, 2024

","parentId":"sam_page-c-422","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-440","name":"Link","tag":"a","content":"

day6.pubstud.io

","parentId":"sam_page-c-422","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day6.pubstud.io"}}},{"id":"sam_page-c-441","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-422","children":[{"id":"sam_page-c-442","name":"TextBox","tag":"div","parentId":"sam_page-c-441","children":[{"id":"sam_page-c-443","name":"Text","tag":"div","content":"

Continuing with the theme of cleaning up and publishing older code, today I will resurrect and old web game I wrote over ten years ago called Xenophobia. It’s a Galaga clone with a (buggy) level editor written in Javascript and using Canvas for graphics.

The game was posted on the previous version of my personal site, and wasn’t completely isolated from the rest of the code. I’ll have to extract it to a separate repo, add a demo page for testing, and set up a build step so it can be embedded easily in a PubStudio page.

If I have time, a minor graphics refresh would be nice to have, as well as converting the code to Typescript to help find any existing bugs.

","parentId":"sam_page-c-442","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-444","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-442","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-445","name":"Bullet List","tag":"ul","parentId":"sam_page-c-442","children":[{"id":"sam_page-c-446","name":"List Item","tag":"li","content":"

New repository using Vite to bundle the game

","parentId":"sam_page-c-445","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-447","name":"List Item","tag":"li","content":"

Split code from old home page

","parentId":"sam_page-c-445","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-448","name":"List Item","tag":"li","content":"

Fix any critical bugs

","parentId":"sam_page-c-445","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-449","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-442","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-450","name":"Bullet List","tag":"ul","parentId":"sam_page-c-442","children":[{"id":"sam_page-c-451","name":"List Item","tag":"li","content":"

Update code to Typescript

","parentId":"sam_page-c-450","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-452","name":"List Item","tag":"li","content":"

Improve graphics

","parentId":"sam_page-c-450","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-453","name":"List Item","tag":"li","content":"

Split engine code into a separate package

","parentId":"sam_page-c-450","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-454","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-442","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-455","name":"Link","tag":"a","content":"

https://day6.pubstud.io

","parentId":"sam_page-c-442","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day6.pubstud.io"}}},{"id":"sam_page-c-456","name":"Text","tag":"div","content":"

It took a while to clean everything up, partly because I ended up deciding to convert everything to Typescript. I figured it would help fix any bugs, and would make it easier to maintain in the future. Overall everything went well, the code is published at @sampullman/simple-game-engine.

A few bugs remain, but considering it was written over 10 years ago, it was surprisingly easy to get the game running again. Much more code from the game can be made reusable by moving it to the engine, but I’m happy with the result.

","parentId":"sam_page-c-442","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-457","name":"Footer","tag":"footer","parentId":"sam_page-c-422","children":[{"id":"sam_page-c-458","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-457","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-459","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-457","children":[{"id":"sam_page-c-460","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-459","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-461","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-459","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day7":{"name":"Day7","route":"/day7","root":{"id":"sam_page-c-462","name":"Root","tag":"div","children":[{"id":"sam_page-c-463","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-462","children":[{"id":"sam_page-c-464","name":"BlogHeader","tag":"div","parentId":"sam_page-c-463","children":[{"id":"sam_page-c-576","name":"Link","tag":"a","parentId":"sam_page-c-464","children":[{"id":"sam_page-c-577","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-576","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-466","name":"NavMenu","tag":"div","parentId":"sam_page-c-464","children":[{"id":"sam_page-c-467","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-466","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-468","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-466","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-469","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-466","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-470","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-464","children":[{"id":"sam_page-c-471","name":"Link","tag":"a","parentId":"sam_page-c-470","children":[{"id":"sam_page-c-472","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-471","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-473","name":"Link","tag":"a","parentId":"sam_page-c-470","children":[{"id":"sam_page-c-474","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-473","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-475","name":"Link","tag":"a","parentId":"sam_page-c-470","children":[{"id":"sam_page-c-476","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-475","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-477","name":"Link","tag":"a","parentId":"sam_page-c-470","children":[{"id":"sam_page-c-478","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-477","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-479","name":"H1","tag":"h1","content":"

Day 7 - SamaTech Site

","parentId":"sam_page-c-463","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-480","name":"H6","tag":"h6","content":"

July 7, 2024

","parentId":"sam_page-c-463","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-481","name":"Link","tag":"a","content":"

day7.pubstud.io

","parentId":"sam_page-c-463","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day7.pubstud.io"}}},{"id":"sam_page-c-482","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-463","children":[{"id":"sam_page-c-483","name":"TextBox","tag":"div","parentId":"sam_page-c-482","children":[{"id":"sam_page-c-484","name":"Text","tag":"div","content":"

In the spirit of dogfooding, today I will attempt to re-create the SamaTech company home page using PubStudio. In addition, a few sections should be updated and PubStudio should be featured, or at least mentioned, on the page.

Design-wise, this will probably be the most complex page I’ve attempted to build with PubStudio, so I expect there to be a few hiccups. In particular, there is a scroll-over/fixed section effect that may be difficult to reproduce. Some improvements to the editor may be necessary, at the very least I expect to add some TODOs to the project.

This is another page that can hopefully be converted to a template without much trouble. One issue with that is including a contact form in the template, or any other component that syncs with a data source. There needs to be a system for creating/linking database tables when the template is loaded, otherwise it’s too confusing for users to set everything up correctly.

","parentId":"sam_page-c-483","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-485","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-483","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-486","name":"Bullet List","tag":"ul","parentId":"sam_page-c-483","children":[{"id":"sam_page-c-487","name":"List Item","tag":"li","content":"

Convert https://samatech.tw to PubStudio

","parentId":"sam_page-c-486","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-488","name":"List Item","tag":"li","content":"

Add PubStudio references

","parentId":"sam_page-c-486","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-489","name":"List Item","tag":"li","content":"

Update Careers page

","parentId":"sam_page-c-486","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-490","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-483","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-491","name":"Bullet List","tag":"ul","parentId":"sam_page-c-483","children":[{"id":"sam_page-c-492","name":"List Item","tag":"li","content":"

Convert resulting page to template

","parentId":"sam_page-c-491","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-495","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-483","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-496","name":"Link","tag":"a","content":"

https://day7.pubstud.io

","parentId":"sam_page-c-483","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day7.pubstud.io"}}},{"id":"sam_page-c-497","name":"Text","tag":"div","content":"

As expected, some improvements to the editor had to be made in order to convert the site perfectly. The <label> tag was missing, as well as a few CSS properties. I also had to allow SVGs to be uploaded to object storage, since the site referenced some in <img> tags. It would have been straightforward to use the editor’s SVG component, but it’s useful to allow SVG uploads as well.

In the end, I was surprised at how well the editor was able to handle the more complex aspects of the site, like the mobile sidebar and animations. I did have to “cheat” with some custom CSS, but not nearly as much as anticipated. In the future I’ll have to think of ways to improve animation support, especially for people who aren’t so familiar with the varias CSS tricks used here.

","parentId":"sam_page-c-483","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-498","name":"Footer","tag":"footer","parentId":"sam_page-c-463","children":[{"id":"sam_page-c-499","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-498","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-500","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-498","children":[{"id":"sam_page-c-501","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-500","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-502","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-500","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day8":{"name":"Day8","route":"/day8","root":{"id":"sam_page-c-503","name":"Root","tag":"div","children":[{"id":"sam_page-c-504","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-503","children":[{"id":"sam_page-c-505","name":"BlogHeader","tag":"div","parentId":"sam_page-c-504","children":[{"id":"sam_page-c-578","name":"Link","tag":"a","parentId":"sam_page-c-505","children":[{"id":"sam_page-c-579","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-578","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-507","name":"NavMenu","tag":"div","parentId":"sam_page-c-505","children":[{"id":"sam_page-c-508","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-507","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-509","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-507","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-510","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-507","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-511","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-505","children":[{"id":"sam_page-c-512","name":"Link","tag":"a","parentId":"sam_page-c-511","children":[{"id":"sam_page-c-513","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-512","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-514","name":"Link","tag":"a","parentId":"sam_page-c-511","children":[{"id":"sam_page-c-515","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-514","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-516","name":"Link","tag":"a","parentId":"sam_page-c-511","children":[{"id":"sam_page-c-517","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-516","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-518","name":"Link","tag":"a","parentId":"sam_page-c-511","children":[{"id":"sam_page-c-519","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-518","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-520","name":"H1","tag":"h1","content":"

Day 8 - Recipes

","parentId":"sam_page-c-504","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-521","name":"H6","tag":"h6","content":"

July 8, 2024

","parentId":"sam_page-c-504","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-522","name":"Link","tag":"a","content":"

day8.pubstud.io

","parentId":"sam_page-c-504","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day6.pubstud.io"}}},{"id":"sam_page-c-523","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-504","children":[{"id":"sam_page-c-524","name":"TextBox","tag":"div","parentId":"sam_page-c-523","children":[{"id":"sam_page-c-525","name":"Text","tag":"div","content":"

Today I’d like to build a prototype for a recipe site. It should have a functional design with home page/recipe list, about page, and basic recipe pages. The home page will have a short introduction and list of recipes. Each page should have a title, space for a header image, short description, ingredients, and instructions.

The goal is to eventually turn this into a PubStudio template, though it will likely need some more polish before it’s published. For now, I’ll convert all the recipes from my personal notes, with placeholder images.

","parentId":"sam_page-c-524","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-526","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-524","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-527","name":"Bullet List","tag":"ul","parentId":"sam_page-c-524","children":[{"id":"sam_page-c-528","name":"List Item","tag":"li","content":"

Home page with recipe list

","parentId":"sam_page-c-527","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-529","name":"List Item","tag":"li","content":"

A few recipe pages

","parentId":"sam_page-c-527","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-530","name":"List Item","tag":"li","content":"

About page

","parentId":"sam_page-c-527","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-531","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-524","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-532","name":"Bullet List","tag":"ul","parentId":"sam_page-c-524","children":[{"id":"sam_page-c-533","name":"List Item","tag":"li","content":"

Adjustable quantities (e.g. double the recipe)

","parentId":"sam_page-c-532","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-534","name":"List Item","tag":"li","content":"

Recipe tagging and filtering

","parentId":"sam_page-c-532","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-535","name":"List Item","tag":"li","content":"

Image gallery and video section

","parentId":"sam_page-c-532","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-536","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-524","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-537","name":"Link","tag":"a","content":"

https://day8.pubstud.io

","parentId":"sam_page-c-524","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day8.pubstud.io"}}},{"id":"sam_page-c-538","name":"Text","tag":"div","content":"

It took a while, but the result was better than I expected. The recipe pages are very simple, but easy to extend and duplicate. I identified a few features that would be nice to have, the main one being the ability to reference component inputs in the text content. This would make it easier to set an initial value for components with dynamically updated content.

I was able to implement adjustable quantities, but did not make it to tagging/filtering and image gallery/videos.

","parentId":"sam_page-c-524","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-539","name":"Footer","tag":"footer","parentId":"sam_page-c-504","children":[{"id":"sam_page-c-540","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-539","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-541","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-539","children":[{"id":"sam_page-c-542","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-541","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-543","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-541","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day9":{"name":"Day9","route":"/day9","root":{"id":"sam_page-c-580","name":"Root","tag":"div","children":[{"id":"sam_page-c-581","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-580","children":[{"id":"sam_page-c-582","name":"BlogHeader","tag":"div","parentId":"sam_page-c-581","children":[{"id":"sam_page-c-583","name":"Link","tag":"a","parentId":"sam_page-c-582","children":[{"id":"sam_page-c-584","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-583","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-585","name":"NavMenu","tag":"div","parentId":"sam_page-c-582","children":[{"id":"sam_page-c-586","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-585","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-587","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-585","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-588","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-585","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-589","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-582","children":[{"id":"sam_page-c-590","name":"Link","tag":"a","parentId":"sam_page-c-589","children":[{"id":"sam_page-c-591","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-590","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-592","name":"Link","tag":"a","parentId":"sam_page-c-589","children":[{"id":"sam_page-c-593","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-592","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-594","name":"Link","tag":"a","parentId":"sam_page-c-589","children":[{"id":"sam_page-c-595","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-594","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-596","name":"Link","tag":"a","parentId":"sam_page-c-589","children":[{"id":"sam_page-c-597","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-596","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-598","name":"H1","tag":"h1","content":"

Day 9 - Photos Prototype

","parentId":"sam_page-c-581","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-599","name":"H6","tag":"h6","content":"

July 9, 2024

","parentId":"sam_page-c-581","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-600","name":"Link","tag":"a","content":"

day9.pubstud.io

","parentId":"sam_page-c-581","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day9.pubstud.io"}}},{"id":"sam_page-c-601","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-581","children":[{"id":"sam_page-c-602","name":"TextBox","tag":"div","parentId":"sam_page-c-601","children":[{"id":"sam_page-c-603","name":"Text","tag":"div","content":"

My plans for improving PubStudio’s image support have been languishing, so I’m going to use today’s site as the impetus to spend time on it. It should be possible to include a photo gallery and lightbox (photo gallery overlay) to any site, and easy to add additional photos.

As more advanced components are added, it has become necessary to implement custom UI for adding and updating component data. There are many conveniences that could be included for a photo gallery - there may not be time to build much for this site, but I can at least use the prototype to decide which features to prioritize.

The minimum requirements are a photo gallery and lightbox component, as well as a way to link them. Ideally, creating a photo gallery would show a popup that allows the user to customize it, e.g. by automatically linking a lightbox component.

Some other nice features would be tagging assets, so that the gallery can include filters. Future improvements to the asset library could take advantage of this filtering as well. Additionally, arrow keys for navigating the lightbox would be convenient, as well as optional captions.

","parentId":"sam_page-c-602","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-604","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-602","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-605","name":"Bullet List","tag":"ul","parentId":"sam_page-c-602","children":[{"id":"sam_page-c-606","name":"List Item","tag":"li","content":"

Photo gallery component

","parentId":"sam_page-c-605","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-607","name":"List Item","tag":"li","content":"

Lightbox component linked to photo gallery

","parentId":"sam_page-c-605","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-608","name":"List Item","tag":"li","content":"

Fix any critical bugs

","parentId":"sam_page-c-605","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-609","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-602","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-610","name":"Bullet List","tag":"ul","parentId":"sam_page-c-602","children":[{"id":"sam_page-c-611","name":"List Item","tag":"li","content":"

Tagging assets/gallery filter option

","parentId":"sam_page-c-610","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-612","name":"List Item","tag":"li","content":"

Arrow keys for lightbox navigation

","parentId":"sam_page-c-610","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-613","name":"List Item","tag":"li","content":"

Lightbox captions

","parentId":"sam_page-c-610","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-614","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-602","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-615","name":"Link","tag":"a","content":"

https://day9.pubstud.io

","parentId":"sam_page-c-602","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day9.pubstud.io"}}},{"id":"sam_page-c-616","name":"Text","tag":"div","content":"

TBD

","parentId":"sam_page-c-602","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-617","name":"Footer","tag":"footer","parentId":"sam_page-c-581","children":[{"id":"sam_page-c-618","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-617","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-619","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-617","children":[{"id":"sam_page-c-620","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-619","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-621","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-619","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day10":{"name":"Day10","route":"/day10","root":{"id":"sam_page-c-622","name":"Root","tag":"div","children":[{"id":"sam_page-c-623","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-622","children":[{"id":"sam_page-c-624","name":"BlogHeader","tag":"div","parentId":"sam_page-c-623","children":[{"id":"sam_page-c-625","name":"Link","tag":"a","parentId":"sam_page-c-624","children":[{"id":"sam_page-c-626","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-625","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-627","name":"NavMenu","tag":"div","parentId":"sam_page-c-624","children":[{"id":"sam_page-c-628","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-627","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-629","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-627","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-630","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-627","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-631","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-624","children":[{"id":"sam_page-c-632","name":"Link","tag":"a","parentId":"sam_page-c-631","children":[{"id":"sam_page-c-633","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-632","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-634","name":"Link","tag":"a","parentId":"sam_page-c-631","children":[{"id":"sam_page-c-635","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-634","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-636","name":"Link","tag":"a","parentId":"sam_page-c-631","children":[{"id":"sam_page-c-637","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-636","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-638","name":"Link","tag":"a","parentId":"sam_page-c-631","children":[{"id":"sam_page-c-639","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-638","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-640","name":"H1","tag":"h1","content":"

Day 10 - Tank Game

","parentId":"sam_page-c-623","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-641","name":"H6","tag":"h6","content":"

July 10, 2024

","parentId":"sam_page-c-623","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-642","name":"Link","tag":"a","content":"

day10.pubstud.io

","parentId":"sam_page-c-623","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day10.pubstud.io"}}},{"id":"sam_page-c-643","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-623","children":[{"id":"sam_page-c-644","name":"TextBox","tag":"div","parentId":"sam_page-c-643","children":[{"id":"sam_page-c-645","name":"Text","tag":"div","content":"

In my spare time I’ve been slowly working on a few games in Rust, using the ggez framework/library. Recently there’s been some progress in targeting WASM, which means it’s possible to publish ggez games to the web.

Completing a game and making sure it can be displayed correctly on the web is a multi-week project, but it should be possible to quickly release a prototype based on what I have. For today, I have a very simple tank game that just needs a few more features to be playable. Movement, shooting, and walls are implemented, so I just need add a dumb enemy AI, game over/restart screen, and at least one real level.

","parentId":"sam_page-c-644","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-646","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-644","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-647","name":"Bullet List","tag":"ul","parentId":"sam_page-c-644","children":[{"id":"sam_page-c-648","name":"List Item","tag":"li","content":"

WASM build for tank game

","parentId":"sam_page-c-647","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-649","name":"List Item","tag":"li","content":"

Enemy AI, game over/restart screen, one level

","parentId":"sam_page-c-647","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-651","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-644","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-652","name":"Bullet List","tag":"ul","parentId":"sam_page-c-644","children":[{"id":"sam_page-c-653","name":"List Item","tag":"li","content":"

Local multiplayer

","parentId":"sam_page-c-652","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-654","name":"List Item","tag":"li","content":"

Better animations

","parentId":"sam_page-c-652","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-655","name":"List Item","tag":"li","content":"

Multiple enemies

","parentId":"sam_page-c-652","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-656","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-644","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-657","name":"Link","tag":"a","content":"

https://day10.pubstud.io

","parentId":"sam_page-c-644","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day10.pubstud.io"}}},{"id":"sam_page-c-658","name":"Text","tag":"div","content":"

TBD

","parentId":"sam_page-c-644","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-659","name":"Footer","tag":"footer","parentId":"sam_page-c-623","children":[{"id":"sam_page-c-660","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-659","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-661","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-659","children":[{"id":"sam_page-c-662","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-661","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-663","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-661","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day11":{"name":"Day11","route":"/day11","root":{"id":"sam_page-c-664","name":"Root","tag":"div","children":[{"id":"sam_page-c-665","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-664","children":[{"id":"sam_page-c-666","name":"BlogHeader","tag":"div","parentId":"sam_page-c-665","children":[{"id":"sam_page-c-667","name":"Link","tag":"a","parentId":"sam_page-c-666","children":[{"id":"sam_page-c-668","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-667","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-669","name":"NavMenu","tag":"div","parentId":"sam_page-c-666","children":[{"id":"sam_page-c-670","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-669","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-671","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-669","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-672","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-669","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-673","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-666","children":[{"id":"sam_page-c-674","name":"Link","tag":"a","parentId":"sam_page-c-673","children":[{"id":"sam_page-c-675","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-674","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-676","name":"Link","tag":"a","parentId":"sam_page-c-673","children":[{"id":"sam_page-c-677","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-676","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-678","name":"Link","tag":"a","parentId":"sam_page-c-673","children":[{"id":"sam_page-c-679","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-678","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-680","name":"Link","tag":"a","parentId":"sam_page-c-673","children":[{"id":"sam_page-c-681","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-680","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-682","name":"H1","tag":"h1","content":"

Day 11 - Brick Pong

","parentId":"sam_page-c-665","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-683","name":"H6","tag":"h6","content":"

July 11, 2024

","parentId":"sam_page-c-665","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-684","name":"Link","tag":"a","content":"

day11.pubstud.io

","parentId":"sam_page-c-665","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day11.pubstud.io"}}},{"id":"sam_page-c-685","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-665","children":[{"id":"sam_page-c-686","name":"TextBox","tag":"div","parentId":"sam_page-c-685","children":[{"id":"sam_page-c-687","name":"Text","tag":"div","content":"

Based on the work from Day 6, I can also clean up an old brick pong/Breakout/Arkanoid clone I wrote a long time ago while learning Javascript. It used to be on my home page, at the time I thought it would be fun to use logos of technology I was proficient in as the bricks.

Converting the code to Javascript and including it as an example in the @sampullman/simple-game-engine repo will be a good way to make sure it survives, instead of being archived forever. And compared to rewriting the space game for day 6, it should be a piece of cake.

","parentId":"sam_page-c-686","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-688","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-686","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-689","name":"Bullet List","tag":"ul","parentId":"sam_page-c-686","children":[{"id":"sam_page-c-690","name":"List Item","tag":"li","content":"

Convert code to Typescript

","parentId":"sam_page-c-689","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-691","name":"List Item","tag":"li","content":"

Move to simple-game-engine repo

","parentId":"sam_page-c-689","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-692","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-686","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-693","name":"Bullet List","tag":"ul","parentId":"sam_page-c-686","children":[{"id":"sam_page-c-694","name":"List Item","tag":"li","content":"

Fix sounds

","parentId":"sam_page-c-693","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-697","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-686","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-698","name":"Link","tag":"a","content":"

https://day11.pubstud.io

","parentId":"sam_page-c-686","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day11.pubstud.io"}}},{"id":"sam_page-c-699","name":"Text","tag":"div","content":"

As expected, cleaning up the code was quick and easy compared to space game. There’s not much else to say, except that it feels good to revive old projects!

","parentId":"sam_page-c-686","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-700","name":"Footer","tag":"footer","parentId":"sam_page-c-665","children":[{"id":"sam_page-c-701","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-700","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-702","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-700","children":[{"id":"sam_page-c-703","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-702","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-704","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-702","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day12":{"name":"Day12","route":"/day12","root":{"id":"sam_page-c-707","name":"Root","tag":"div","children":[{"id":"sam_page-c-708","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-707","children":[{"id":"sam_page-c-709","name":"BlogHeader","tag":"div","parentId":"sam_page-c-708","children":[{"id":"sam_page-c-710","name":"Link","tag":"a","parentId":"sam_page-c-709","children":[{"id":"sam_page-c-711","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-710","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-712","name":"NavMenu","tag":"div","parentId":"sam_page-c-709","children":[{"id":"sam_page-c-713","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-712","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-714","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-712","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-715","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-712","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-716","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-709","children":[{"id":"sam_page-c-717","name":"Link","tag":"a","parentId":"sam_page-c-716","children":[{"id":"sam_page-c-718","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-717","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-719","name":"Link","tag":"a","parentId":"sam_page-c-716","children":[{"id":"sam_page-c-720","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-719","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-721","name":"Link","tag":"a","parentId":"sam_page-c-716","children":[{"id":"sam_page-c-722","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-721","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-723","name":"Link","tag":"a","parentId":"sam_page-c-716","children":[{"id":"sam_page-c-724","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-723","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-725","name":"H1","tag":"h1","content":"

Day 12 -

","parentId":"sam_page-c-708","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-726","name":"H6","tag":"h6","content":"

July 12, 2024

","parentId":"sam_page-c-708","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-727","name":"Link","tag":"a","content":"

day12.pubstud.io

","parentId":"sam_page-c-708","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day12.pubstud.io"}}},{"id":"sam_page-c-728","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-708","children":[{"id":"sam_page-c-729","name":"TextBox","tag":"div","parentId":"sam_page-c-728","children":[{"id":"sam_page-c-730","name":"Text","tag":"div","content":"

TBD

","parentId":"sam_page-c-729","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-731","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-729","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-732","name":"Bullet List","tag":"ul","parentId":"sam_page-c-729","children":[{"id":"sam_page-c-733","name":"List Item","tag":"li","content":"

Convert code to Typescript

","parentId":"sam_page-c-732","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-734","name":"List Item","tag":"li","content":"

Move to simple-game-engine repo

","parentId":"sam_page-c-732","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-735","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-729","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-736","name":"Bullet List","tag":"ul","parentId":"sam_page-c-729","children":[{"id":"sam_page-c-737","name":"List Item","tag":"li","content":"

Fix sounds

","parentId":"sam_page-c-736","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-738","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-729","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-739","name":"Link","tag":"a","content":"

https://day12.pubstud.io

","parentId":"sam_page-c-729","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day12.pubstud.io"}}},{"id":"sam_page-c-740","name":"Text","tag":"div","content":"

As expected, cleaning up the code was quick and easy compared to space game. There’s not much else to say, except that it feels good to revive old projects!

","parentId":"sam_page-c-729","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-741","name":"Footer","tag":"footer","parentId":"sam_page-c-708","children":[{"id":"sam_page-c-742","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-741","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-743","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-741","children":[{"id":"sam_page-c-744","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-743","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-745","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-743","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}},"/day13":{"name":"Day13","route":"/day13","root":{"id":"sam_page-c-746","name":"Root","tag":"div","children":[{"id":"sam_page-c-747","name":"ContainerVertical","tag":"div","parentId":"sam_page-c-746","children":[{"id":"sam_page-c-748","name":"BlogHeader","tag":"div","parentId":"sam_page-c-747","children":[{"id":"sam_page-c-749","name":"Link","tag":"a","parentId":"sam_page-c-748","children":[{"id":"sam_page-c-750","name":"H1","tag":"h1","content":"

Sam Pullman

","parentId":"sam_page-c-749","style":{"custom":{"breakpoint-1":{"default":{"align-content":"center","text-align":"center","font-size":"24px"}},"breakpoint-3":{"default":{"text-align":"left"}}},"mixins":["global-s-9"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"}}},{"id":"sam_page-c-751","name":"NavMenu","tag":"div","parentId":"sam_page-c-748","children":[{"id":"sam_page-c-752","name":"NavItem","tag":"a","content":"

Home

","parentId":"sam_page-c-751","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/home"},"name":{"type":"string","name":"name","default":"","is":"Home"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-753","name":"NavItem","tag":"a","content":"Contact","parentId":"sam_page-c-751","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 4px 0px 4px"}},"breakpoint-3":{"default":{"margin":"0px 0px 0px 0px","width":"50%"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/contact"},"name":{"type":"string","name":"name","default":"","is":"Contact"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}},{"id":"sam_page-c-754","name":"NavItem","tag":"a","content":"Blog","parentId":"sam_page-c-751","style":{"custom":{"breakpoint-1":{"default":{"color":"${highlight}"}}},"mixins":["global-s-5"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"/blog"},"name":{"type":"string","name":"name","default":"","is":"Blog"},"sync":{"type":"boolean","name":"sync","default":false,"is":true}},"editorEvents":{"OnIsInputChange":{"name":"OnIsInputChange","behaviors":[{"behaviorId":"global-b-navItem"}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"height":"auto","width":"auto","margin":"6px 0px 0px 0px"}}},"mixins":["global-s-1","global-s-4"]},"editorEvents":{"OnPageRemove":{"name":"OnPageRemove","behaviors":[{"behaviorId":"global-b-navRemoveChildren"}]},"OnSelfAdded":{"name":"OnSelfAdded","behaviors":[]},"OnPageAdd":{"name":"OnPageAdd","behaviors":[]},"OnPageChange":{"name":"OnPageChange","behaviors":[]}}},{"id":"sam_page-c-755","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-748","children":[{"id":"sam_page-c-756","name":"Link","tag":"a","parentId":"sam_page-c-755","children":[{"id":"sam_page-c-757","name":"PubStudio","tag":"svg","content":"","parentId":"sam_page-c-756","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 10px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{"breakpoint-1":{"default":{"align-items":"center","display":"flex"}}},"mixins":["global-s-7"]},"inputs":{"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://pubstud.io"},"target":{"type":"string","name":"target","attr":true,"is":"_blank"}}},{"id":"sam_page-c-758","name":"Link","tag":"a","parentId":"sam_page-c-755","children":[{"id":"sam_page-c-759","name":"SamaTech","tag":"svg","content":"\n","parentId":"sam_page-c-758","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://samatech.tw"}}},{"id":"sam_page-c-760","name":"Link","tag":"a","parentId":"sam_page-c-755","children":[{"id":"sam_page-c-761","name":"Github","tag":"svg","content":"\n","parentId":"sam_page-c-760","style":{"custom":{"breakpoint-1":{"default":{"width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://github.com/sampullman"}}},{"id":"sam_page-c-762","name":"Link","tag":"a","parentId":"sam_page-c-755","children":[{"id":"sam_page-c-763","name":"Mail","tag":"svg","content":"\n","parentId":"sam_page-c-762","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px 0px 0px 10px","width":"28px","height":"28px"}}},"mixins":["global-s-15","sam_page-s-13"]}}],"style":{"custom":{},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"mailto:sampullman@gmail.com"}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","margin":"0px 0px 0px 0px","align-items":"center"}},"breakpoint-3":{"default":{"width":"100%","margin":"24px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","align-items":"center","justify-content":"space-between","max-width":"940px","min-height":"56px"}},"breakpoint-3":{"default":{"flex-wrap":"wrap","min-height":"unset","padding":"8px 0px 0px 0px"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-764","name":"H1","tag":"h1","content":"

Day 13 - Wedding Site

","parentId":"sam_page-c-747","style":{"custom":{"breakpoint-1":{"default":{"margin":"32px 0px 0px 0px","text-align":"center"}}},"mixins":["global-s-9"]}},{"id":"sam_page-c-765","name":"H6","tag":"h6","content":"

July 13, 2024

","parentId":"sam_page-c-747","style":{"custom":{},"mixins":["global-s-14"]}},{"id":"sam_page-c-766","name":"Link","tag":"a","content":"

day13.pubstud.io

","parentId":"sam_page-c-747","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day12.pubstud.io"}}},{"id":"sam_page-c-767","name":"ContainerHorizontal","tag":"div","parentId":"sam_page-c-747","children":[{"id":"sam_page-c-768","name":"TextBox","tag":"div","parentId":"sam_page-c-767","children":[{"id":"sam_page-c-769","name":"Text","tag":"div","content":"

I’m getting married in about six months, so we need a wedding website! It seems like everyone is using Zola these days, but if you do it with the website builder platform you spend the last year working on, what’s even the point. My fiancé mostly took care of the design and content, so the only

","parentId":"sam_page-c-768","style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["global-s-8"]}},{"id":"sam_page-c-770","name":"H4","tag":"h4","content":"

Must Have

","parentId":"sam_page-c-768","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-771","name":"Bullet List","tag":"ul","parentId":"sam_page-c-768","children":[{"id":"sam_page-c-772","name":"List Item","tag":"li","content":"

Convert code to Typescript

","parentId":"sam_page-c-771","style":{"custom":{},"mixins":["global-s-17"]}},{"id":"sam_page-c-773","name":"List Item","tag":"li","content":"

Move to simple-game-engine repo

","parentId":"sam_page-c-771","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-774","name":"H4","tag":"h4","content":"

Nice To Have

","parentId":"sam_page-c-768","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-775","name":"Bullet List","tag":"ul","parentId":"sam_page-c-768","children":[{"id":"sam_page-c-776","name":"List Item","tag":"li","content":"

Fix sounds

","parentId":"sam_page-c-775","style":{"custom":{},"mixins":["global-s-17"]}}],"style":{"custom":{},"mixins":["global-s-16"]}},{"id":"sam_page-c-777","name":"H4","tag":"h4","content":"

Conclusion

","parentId":"sam_page-c-768","style":{"custom":{"breakpoint-1":{"default":{"margin":"16px 0px 0px 0px"}}},"mixins":["global-s-12"]}},{"id":"sam_page-c-778","name":"Link","tag":"a","content":"

https://day13.pubstud.io

","parentId":"sam_page-c-768","style":{"custom":{"breakpoint-1":{"default":{"margin":"8px 0px 0px 0px"}}},"mixins":["global-s-7"]},"inputs":{"target":{"type":"string","name":"target","attr":true,"is":"_blank"},"href":{"type":"string","name":"href","attr":true,"default":"","is":"https://day13.pubstud.io"}}},{"id":"sam_page-c-779","name":"Text","tag":"div","content":"

As expected, cleaning up the code was quick and easy compared to space game. There’s not much else to say, except that it feels good to revive old projects!

","parentId":"sam_page-c-768","style":{"custom":{"breakpoint-1":{"default":{"margin":"12px 0px 0px 0px"}}},"mixins":["global-s-8"]}}],"style":{"custom":{"breakpoint-1":{"default":{}},"breakpoint-3":{"default":{}}},"mixins":["sam_page-s-181"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%"}}},"mixins":["global-s-1"]}},{"id":"sam_page-c-780","name":"Footer","tag":"footer","parentId":"sam_page-c-747","children":[{"id":"sam_page-c-781","name":"Text","tag":"div","content":"

","parentId":"sam_page-c-780","style":{"custom":{"breakpoint-1":{"default":{"margin":"0px","font-family":"${font-text}"}}}}},{"id":"sam_page-c-782","name":"ViewCounterWrap","tag":"div","parentId":"sam_page-c-780","children":[{"id":"sam_page-c-783","name":"ViewCounterLabel","tag":"div","content":"Site visits:","parentId":"sam_page-c-782","style":{"custom":{"breakpoint-1":{"default":{"color":"${text-light}","height":"100%"}}}}},{"id":"sam_page-c-784","name":"ViewCounter","tag":"div","content":"0","parentId":"sam_page-c-782","style":{"custom":{"breakpoint-1":{"default":{"font-weight":"700","margin":"0px 0px 0px 6px","height":"100%"}}}},"events":{"appear":{"name":"appear","behaviors":[{"behaviorId":"global-b-viewcounter","args":{"counterId":""}}]}}}],"style":{"custom":{"breakpoint-1":{"default":{"justify-content":"center","width":"auto","height":"100%"}},"breakpoint-3":{"default":{"font-family":"${font-text}","margin":"0px 0px 0px 0px","padding":"1px 0px 0px 0px"}}},"mixins":["global-s-1"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-62"]}}],"style":{"custom":{"breakpoint-1":{"default":{"width":"100%","max-width":"1080px","margin":"0px auto 0px auto","padding":"0px 32px 0px 32px","height":"100%","align-items":"center"}},"breakpoint-3":{"default":{"padding":"0px 20px 0px 20px"}}},"mixins":["global-s-2"]}}],"style":{"custom":{"breakpoint-1":{"default":{}}},"mixins":["sam_page-s-812"]}},"public":true,"head":{}}}