magnificat.surge.sh ➔

An installable songbook web app

This is an installable web app* using Elm, git.io/jss-lite, service workers and a fully static, offline-first REST service.

At the moment, it’s a giant bunch of experiments. Expect rough edges! I’m doing this to test out new technologies, explore lean and smart ways to do stuff and keep up to date with where the Web is going. I needed a songbook app for a church project – so yeah – I’m scratching my own itch here. But I do hope to create something sustainable and useful for others along the way.

* installable web app – there seems to be no agreement on how to name these things. Some call them progressive web apps, some call them native web apps – and I remember seeing other names scattered over the internet. So, to follow the well-established way of proliferating things, I call them installable web apps. It’s accurate (in contrast to native), everyone understands it (in contrast to progressive) – and it implies that the app can run offline.

Supported browsers

• Latest Chrome.

However, the thing is usable and downgrades reasonably in other browsers.

Supported hardware

• Touch UX is best.
• Touchpad UX is OK.
• Mouse UX is shitty at the moment.

TODO

• Data parser (see git.io/ditty)
• Basic UI design
• JS-module-based style system (see git.io/jss-lite-loader and git.io/jss-lite)
• A rudimentary static layout
• Static JSON API service (See magnificat.surge.sh/api/categories.json, magnificat.surge.sh/api/songs.json and the data/ directory)
• CI integration with github data (The data and logic is updated after every push via travis-ci.org/magnificat/magnificat.surge.sh)
• Lightning-fast loading of fonts and images
• Navigation
• Routing
• Offline installation
• “Add to home screen”
• Full-screen lyrics display optimized for viewing on mobile devices and displaying with a projector
• Lightweight ripple-like effect
• “Lazy like a fox” swipe UX
• Chords parser
• Opt-in chords display
• Fetch resources before fetching fonts
• Server-side UI prerender (this is big!)
• Reasonable mouse UX (no priority here though – sorry!)

License

MIT © Tomek Wiszniewski