2024
Imagine
Imagine, by Motion Storyline
Imagine is a placeholder content (cat memes) generator. It uses text to image AI generation technology to let you create images of, well - basically whatever you want!
It is an open source project - check out the repo at https://github.com/ebenryanmallory/imagine-motionstoryline.
It uses nested Vite projects as routes or pages to accomplish a progressive code splitting, deferred server side code strategy. In simple terms - anything the user can click which will cause new UI to display or new Javascript functionality, the client will request from the server as needed (once the user clicks), and therefore is not loaded in all at once when the page loads in to keep things light, initially. Also:
It is an open source project - check out the repo at https://github.com/ebenryanmallory/imagine-motionstoryline.
It uses nested Vite projects as routes or pages to accomplish a progressive code splitting, deferred server side code strategy. In simple terms - anything the user can click which will cause new UI to display or new Javascript functionality, the client will request from the server as needed (once the user clicks), and therefore is not loaded in all at once when the page loads in to keep things light, initially. Also:
- Npm packages for project are separated from subfolder projects. This helps reduce node module folder size.
- Uses PRPL pattern logic as a goal - this approach gives developers control to optimize load in. This can include an app shell being present (not rendered by Javascript), islands, and deferring any click related functionality or logic.
- Inspired in part by Turbo / Stimulus - I liked the idea that clicking creates a server request and immediately renders the HTML string that was returned, but I wanted to use the framework I had chosen (for example React) instead of using Stimulus.
Separating out node modules on a component (or subfolder) level lets you install and try out new frameworks, helpers, or tools quickly and easily. In large applications with many dependencies, re-installing node modules can become time consuming, and I find I like to try out (and then later delete) a number of modules when starting out a new project. Of course, this comes with a downside. When you are using a module across multiple components, it needs to be installed at root level and you have to manually check to make sure you don't have a different version in subfolders.
Introducing... Dragoncat!
And if that wasn't terrifying, meet bearcat. And bearcat's wife. You thought the time of the cat meme had passed? I think it has only just begun...
