A JAMstack build tool starter for those who love Clojure
This project is no longer being developed. If you are looking for a toolkit to build super lightweight websites then I would highly suggest taking a look at https://www.11ty.io/ and https://sapper.svelte.technology/. You get everything out of the box that this project was aiming at doing for smaller websites with a payload size of JS that this project would never be able to reach. If you are looking to build rich data intensive applications I would highly suggest taking a look at https://fulcro.fulcrologic.com/ or https://github.com/Day8/re-frame which is a much easier to get started with in CLJS and more employable framework.
A JAMstack build tool for developing PWA's with Clojurescript. This build tool is focused on capturing Better Web Practices.
Demo at https://shadow-jam-starter.netlify.com/
Bootstrapped using the Browser Quickstart for Shadow CLJS
Inspiration & Prior art: GatsbyJS, Next, Preact-cli, SapperJS
Clone the repository. Then cd
into it.
npm install
npx shadow-cljs server
This runs the shadow-cljs
server process which all following commands will talk to. Just leave it running and open a new terminal to continue.
The first startup takes a bit of time since it has to download all the dependencies and do some prep work. Once this is running we can get started.
shadow-cljs run jam/watch
This will begin the compilation of the configured :app
build and re-compile whenever you change a file.
To do a production release. Stop the watch
process. Set up your service worker by running.
npx workbox wizard --injectManifest
Then run.
shadow-cljs run jam/release
Now the same url will have a production release that can be used for testing locally eg. Chrome Lighthouse Audits.
Progressive Web Apps are installable and live on the user's home screen, without the need for an app store https://developers.google.com/web/progressive-web-apps/
The browser can do a lot. It has a high level of device integration (https://whatwebcando.today/) and with Web Assembly (reportedly running at 1.2x native code execution) it will be able to do a lot more in the future.
They are also installable on Desktop with Chrome right now. https://developers.google.com/web/updates/2018/05/dpwa
The following images are from Google IO talks and illustrates the size differences of a native application to a web application.
Front-End Performance Checklist - https://github.com/thedaviddias/Front-End-Performance-Checklist#---------front-end-performance-checklist-
Fast By Default: Modern Loading Best Practices (Chrome Dev Summit 2017) - https://www.youtube.com/watch?v=_srJ7eHS3IM
Web performance made easy (Google I/O '18) - https://www.youtube.com/watch?v=Mv-l3-tJgGk&list=PLOU2XLYxmsIInFRc3M44HUTQc3b_YJ4-Y&index=46
Speed Matters: Designing for Mobile Performance - http://www.awwwards.org/brainfood-mobile-performance-vol3.pdf
Smashing Magazine Performance Checklist 2018 - https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/
Agreat write up on why font sizes should be bigger - https://blog.marvelapp.com/body-text-small/
Variable fonts allows multiple font style variations with a single font file - https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts/
More people change their font size in the browser than use edge - https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5cfb20831773
How to set up a System font stack so you can leverage the fonts already available on the system - https://woorkup.com/system-font/
system-ui value for font-family has 84.06% global compatibility
Lean towards super font families when using Google fonts etc to ensure text can be read in the maximum number of languages
Disabled Javascript