Projects

Occasionally, I write code for fun. Coding outside of work is definitely not for everyone, but it's something I enjoy.

I've contributed to a few open source projects, and occasionally build random little hacks. Most of that work can be found on my GitHub profile.

Here's some of the stuff I've done, which I think is interesting or notable.

simonandrews.ca

It's this website. Built with Next.js and CSS modules. Used to be built with Gatsby, but never really benefitted from it.

This site is a bit of a sandbox for me, a place to try out new ideas or scratch a coding itch. I constantly swap around frameworks, hosts, and any number of other variables.

jest-environment-jsdom-global

Configure JSDOM from your Jest tests.

In the past, this has been useful for testing functionality that depends on window.location, like a function that runs differently depending on the domain it runs on. I haven't had to do this in some time, so it might not be necessary anymore - but based on usage, it's still got some fans.

react-from-markup

If you want to server-side render React code, you should use one of the many, many solutions available out there. But if you absolutely cannot use them, this might be of use to you. Maybe. Approach with caution.

react-from-markup came about when I was doing some work for Thomson Reuters. The site was built using Adobe Experience Manager, but we wanted to build a component library using React. So, we came up with a compromise: AEM would generate some placeholder markup (in most cases, by copying and pasting the component markup into AEM's templating language). Then, we would run a bootstrapping script (now known as react-from-markup) that converted the placeholder markup to React components. It's a kind of server-side rendering, but much more involved than universal React.

It worked surprisingly well, though, other than the nature of copy-and-paste. And, as a bonus, we didn't need to load all the components on the page as JavaScript - we only needed the interactive ones.

As of this writing, it's in use at a number of surprisingly large companies, though it's normally forked off to meet their specific needs. I don't actively support it, but the code's there if you're interested.

class-references

Stop worrying about edge cases when you add and remove classes on DOM elements.

In its most basic form: an easy way to prevent scrolling on your page when a dialog is open, and restore scrolling when it closes. It solves the problem where multiple components may need to prevent scrolling, and scrolling should only be restored when all of them leave the page.