voice-book-search

Search for books with a voice activated input

Development

Pre-install

Your local environment relies on Node.js, and Firebase (you may need to sudo on your machine):

npm install -g firebase-tools

Once installed, you may need to login if it's not already done:

firebase login

If you are in a cloud virtual machine, you might need to run a different login command, and when on another device you have authenticated, paste back into virtual machine the authorozation token:

firebase login --no-localhost

Install

To install development environment dependencies:

npm install

Build

The CSS can be minified after npm install has been run:

npm run build

Deployment

Deploy only hosting

firebase deploy --only hosting

Technical stack

This stack is using web native technologies for both desktop and mobile devices:

• AMP-HTML
• Service Workers
• Web Components

Validate AMP

To check if AMP-HTML is valid, append #development=1 to the url and check the console.

https://voice-book-search.firebaseapp.com/#development=1

Learning resources

The following pages have been useful in learning how to write the code in this repository:

AMP-HTML

• AMP Boilerplate
• AMP Validation
• AMP URL and Code Validator
• AMP Guides
• AMP YouTube channel
• Create a custom AMP component

Web Speech

• Webspeech Demo

todo

Blockers

• Search with voice (or plain text in input).
• Web components (in Typescript).
• Infinite carousel (no third party dependency, native only).
• Stop scrolling on blur of page. See event slideChange triggered when slide changes. I could check if the page is in focus and allow the slide change, or return false and block the slide change if the page is on blur.
• Display book covers (-S, -M, or -L) depending on size of viewport.
• Load images lazily as the carousel scrolls with a small buffer of a few images.
• Relative time of a moment when the last search query was performed should be updatedautomatically. Display the relative time in a user's preferred language (navigator.language).

Mediun priorities

• Design

Low priorities

• Improve build script, automatically paste custom css into html.
• Minify the html from src to public.
• Improve the microphone images (maybe svg).
• Translate interface based on navigator.language
• Offer to switch UI language with a menu.