Last updated:
Single page application using Web Components and built with vite
How to build a single page application using Web Components with vite.
Read post
Blog
Last updated:
Splitting Web Components into .ts, .html, and .scss files
Tutorial for a Custom Element development setup in which you can use TypeScript and SASS with template and styling split into their own files.
Read post
JavaScript private class fields can reduce bundle size
Using JavaScript private class fields instead of TypeScript’s private keyword can reduce your bundle size. This post explores pros, cons, and alternatives.
Read post
Web Component FOUC (Flash of unstyled content)
Styling of web components only applies after the JS is parsed. This post showcases ways to prevent an initial flash of unstyled content.
Read post
Projects
iOS App for time and location based journaling.
- Booklets let you group your content by topic.
- Each entry gets a timestamp and the location where it was entered.
- Scroll and search through entries to get a timeline of events, thoughts, and ideas. Discover when and where your thoughts originated.
- All of the data that is associated with an entry can be edited.
- Booklets can be exported as plain text files formatted with Markdown.
- Everything is kept in sync across all devices on the same iCloud account.
Show project
eck-autocomplete
Web Component that lets you add autocomplete suggestions to an input element.
Tech Stack:
- The custom element itself is written without any frameworks or libraries.
- Floating UI is used for the overlay.
- Custom build setup using esbuild.
- Dev server: Vite
- Unit Testing: Vitest
- E2E Testing: Playwright
- Documentation: Storybooks & Vuepress
Show project
PixelTime
PixelTime is a fullscreen countdown timer that fills the screen with pixels until the timer runs out. You can choose between "Black and white" or "Color" mode. Aspect ratios of 16:9, 16:10, and 4:3 are supported and automatically detected. Advanced settings are available to override the aspect ratio, increase pixel density and enable CSS transitions.
Show project