A full Still.js build from raw HTML to deployment — with zero dependencies.
A few days ago, I was asked about migrating a project to Still.js, this article is accompanied by a video demonstrating it.
Because it’s built in Vanilla JavaScript, Still.js combines perfectly with a template that is based with pure/raw HTML, CSS and JavaScript, even if some library (e.g. jQuery, Bootstrap) was used, Still.js helps you to ease separate things into components, as show cased in this video.
What will be covered:
- Migrating a Vanilla web template to Still.js
- Back down the template into components conveniently
- Load template’s JavaScript code properly according to Still.js architecture
- Deploy to the cloud
Key Considerations:
When using templates with a lot animations, or that depends on different javaScript library to load, it’s important to deeply understand it (the template) so to orchestrate each
Script dependency just the same way it happens with raw HTML, CSS and JavaScript.
Minimalist third party Script dependency approach:
Now a days a lot of features like animation and more (e.g. parallax, singlePageNav, dialog, IntersectionObserver - Lazy animation) are browser native, hence, this would impact a lot in the choosing on what/when to use libraries especially when it comes to animation which some web pages are depending a lot.
Vanilla JavaScript is one of the core philosophy of Still.js, hence you can use everything as natural as possible from Web Semantic to straight DOM manipulation.
We’ll use this template, and we’ll be deploying our page to Render which will provide us with a custom domain.
In summary, on the coding and structure side of things the steps will be as follow:
- the HTML code will be moved to the Still.js template/template file (.html)
- Run template JavaScript animation in the stAfterInit hook, ensuring it executes after component load
- Convert sections into autonomous components
Conclusion
Still.js helps turn vanilla templates into fast, modular, and lightweight sites with zero dependencies, giving you full control using pure JavaScript. Proper code organization is key to avoid issues like bloating or conflicts, and a vanilla-first approach is recommended, external libraries should only be used when necessary.
What’s Next?
Don't forget to follow the hands-on video till the end so we can make the deploy.
Expand Your Still.js Skills
- Explore advanced Still.js features like state management, routing, or
integrating APIs.
- Try building a small SPA or dashboard using
Still.js components capabilities.
Contribute to Still.js
- Still.js is open-source, consider contributing or helping improve documentation.
- Join the discord channel to get fast updates and follow the discussions
Ask more if needed
- Share any topic you want to see cover so content (e.g. video, article) can be produced.
Se ya in the next one