Builds
Repo Info
Ollie is an opinionated starter-kit for creating rapid Single Page Application wireframes and static microsites.
Why Ollie
Lots of decisions can go into a boilerplate - so after making these decisions over and over they're now baked into this JavaScript Stater Kit.
Some of the things out of the box are,
Webpack Development / Production — Separate dev and prod configs & builds. Local development means fast builds via the in-memory webpack-dev-server, and for production builds every possible optimization needs to be utilized, making for slower builds at the gain of better optimizations.
Hot Module Replacement — as changes are made to JavaScript, CSS, or templates, the webpage seamlessly refreshes.
Dynamic Code Splitting — Webpack sorts out how to chunk JavaScript in a config file, auto-magically.
Async Dynamic Module Loading - Load only the code/resources needed, when they are needed, without render blocking.
Modern to Legacy JS Bundles — Deploy modern ES2019+ JavaScript modules while gracefully providing a fallback legacy bundle for legacy browsers (with all of the transpiled code and polyfills).
Cache Busting via manifest.json - Sets long expiry data for our static assets, while also ensuring that they are automatically cache busted if they change.
Critical CSS — This is something that makes initial page loads significantly faster by only delivering the styles needed first.
Workbox Service Worker — Leverage Google’s Workbox project to generate a Service Worker for us that will know about all of our project’s assets.
PostCSS — The “Babel of CSS”, lets you SASS like a boss.
Image Optimization — Optimize them via automated tools like mozjpeg, optipng, svgo, etc for next step...
Automatic .webp Creation — Chrome, Edge, and Firefox all are supporting .webp, and can signifigantly boost performance.
HTTP & API
Ollie uses a Express, with a centralized API approach which configures all calls, handles pre-loader logic and also errors.
Ecosystem
Added in a light-weight frameworks to help scaffold CSS. You can easily swap it for whatever front-end framework you wish.
Its referenced in the <head>
tag in /src/index.ejs
.
<!-- Load Allegretto from CDN -->
<link rel="stylesheet" href="https://unpkg.com/allegretto@latest/dist/retto.min.css" type="text/css" media="all">
Project | Status | Description |
---|---|---|
Allegretto | Lightweight CSS Framework |
Also featuring
- Allegretto - Lightweight CSS Framework
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Al Romano - Initial work - Virtually(Creative)
See also the list of contributors who participated in this project.
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Acknowledgments
- Based on learnings from "Javascript Development Environment" - Pluralsight course