Ollie-UI

open-source | starter-kit

Ollie-UI is a culmination of ~50 front-end developer decisions typically made when starting a new project, so to never repeat myself going forward (DRY) I’ve bundled these decisions together into this starter-kit and thought I’d open-source these decisions to help others, receive feedback and we can all improve together!

Ollie-Ui Documentation Site Homepage
Ollie-Ui Documentation Site Homepage

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 Devel­op­ment / Pro­duc­tion  —  Sep­a­rate dev and prod con­figs & builds. Local devel­op­ment means fast builds via the in-mem­o­ry web­pack-dev-serv­er, and for pro­duc­tion builds every pos­si­ble opti­miza­tion needs to be utilized, making for slower builds at the gain of better optimizations.

  • Hot Mod­ule Replace­ment  —  as changes are made to JavaScript, CSS, or tem­plates, the web­page seam­less­ly refreshes.

  • Dynam­ic Code Split­ting  —  Webpack sorts out how to chunk JavaScript in a con­fig file, auto-magically.

  • Async Dynam­ic Mod­ule Load­ing - Load only the code/​resources need­ed, when they are need­ed, with­out ren­der blocking.

  • Mod­ern to Lega­cy JS Bun­dles —  Deploy mod­ern ES2019+ JavaScript mod­ules while grace­ful­ly pro­vid­ing a fall­back lega­cy bun­dle for lega­cy browsers (with all of the tran­spiled code and polyfills).

  • Cache Bust­ing via manifest.json - Sets long expiry data for our sta­t­ic assets, while also ensur­ing that they are auto­mat­i­cal­ly cache bust­ed if they change.

  • Crit­i­cal CSS  —  This is some­thing that makes ini­tial page loads sig­nif­i­cant­ly faster by only delivering the styles needed first.

  • Work­box Ser­vice Work­er  —  Lever­age Google’s Work­box project to gen­er­ate a Ser­vice Work­er for us that will know about all of our project’s assets.

  • PostC­SS —  The ​“Babel of CSS”, lets you SASS like a boss.

  • Image Opti­miza­tion  —  Opti­mize them via auto­mat­ed tools like mozjpeg, optipng, svgo, etc for next step…

  • Auto­mat­ic .webp Cre­ation  —  Chrome, Edge, and Fire­fox all are sup­port­ing .webp, and can signifigantly boost performance.