This page is a brief summary of some of the technologies and decisions that make up this site.
In publishing, a colophon is a brief statement containing information about the publication of a book such as the place of publication, the publisher, and the date of publication. —from Wikipedia
When used in reference to Web sites , a /colophon/ is a description of the tools, systems and resources used to create the Web site and keep it operational. The colophon serves to acknowledge and give credit to all the resources that combined to produce the specific site. A site typically will devote a separate page to detailing its colophon. —from webopedia
This website is owned by Jem, who also goes by Jam, or JemJam (or “Jem Bezooyen” if you needed my full name). All the content and opinions here are my own. If you find issue with any of the site content posted here, or problems with functionality and/or accessibility, please reach out to me.
However, I also knew that as a web developer who’s been embedded on react-like projects for years, it was only a matter of time before I’d want to start adding either extra scripts or components into pages. (TBQH: once I was aware of what MDX was capable of, I knew I wanted it in my content pipeline.) The challenge is finding a performant means of bundling pages so they’re always as light as possible, but then layering our component scripts on top to enable some cool enhancements.
I ended up settling on building this iteration with “Next.js”, but to keep the bundle size minimal, I’m using Preact instead of React. Next.js offers excellent developer experience coupled with typescript support, support for api routes, static and server side rendering, and myriad other web app enhancements.
The pages themselves make use of MDX. This means they look like Markdown templates, but they also have a little bit of extra (JSX). This allows me to import individual components and make use of them within the content of the pages.
Because I’m using these MDX documents for the pages themselves, I can also
opt-in (on a page by page basis) to additional data prefetching via the next.js
getStaticProps. I’m using this in certain list pages to feed in data for
Making web applications that are accessible and also performant is important to me. Access to the internet varies, and I can’t expect every user to have high speed connectivity, or to be connecting from a powerful device.
I took inspiration for some of the layout components from the very cool Every Layout project. Media queries are used sparingly, but occasionally, to try to correct for layout issues.
I think color theory is neat. I tried to use a (close to) monochromatic green theme, but I like to mix up the saturation / luminosity as necessary to accentuate different elements. Typically I keep the color theme on Coolors for easy access.
Because of my own issues with brightness levels, I intend for the base theme to have both dark and light modes.
None yet! I just set the base font to
sans-serif cuz nearly every device
should have /something/. I’ll tune this eventually, but you can’t get faster
than “no font loading”.
If you want to check out an html test, I have a page you can try out that includes all of the basic html components I render on a regular basis.