https://github.com/wooorm/dictionary

Dictionary app that can work without JavaScript or internet
https://github.com/wooorm/dictionary

demo example pwa

Last synced: 17 days ago
JSON representation

Dictionary app that can work without JavaScript or internet

• Host: GitHub
• URL: https://github.com/wooorm/dictionary
• Owner: wooorm
• License: mit
• Created: 2017-01-12T21:16:58.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2020-06-16T07:12:16.000Z (over 4 years ago)
• Last Synced: 2024-10-09T01:04:13.440Z (26 days ago)
• Topics: demo, example, pwa
• Language: JavaScript
• Homepage:
• Size: 162 KB
• Stars: 39
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Funding: funding.yml
  • License: license

Awesome Lists containing this project

README

        
# dictionary

Dictionary app that can work without JavaScript or internet.

*   [x] Works without JavaScript

*   [x] Works offline: Service worker, [`pouchdb`][pouch]

*   [x] Server: [`express`][express]

*   [x] Rendering: [`virtual-dom`][vdom]

*   [x] 100/100 on [Lighthouse][] when ignoring HTTP/2 support, 88/100 otherwise

*   [x] Shared rendering across server and app

*   [x] Data from [Words API][wordsapi]

*   [x] Caches Words API responses in [`levelup`][level]

![screenshot](screenshot.png)

## Size

*   CSS: **1.49 kb** GZipped (written for modern browsers w/o prefixed though)

*   JS: **46.6 kb** GZipped (mostly [`pouch`][pouch]) written in ES5

*   HTML: **2.17 kb** GZipped (small, 1 entry), **4.26 kb** GZipped (large,

    21 entries)

## Performance

Loading `/dictionary` afresh (first load) transfers 114 kb (app itself, and

initialising the service worker cache).

| Connection | DOMContentLoaded |

| ---------- | ---------------- |

| GRPS       | 10.22s           |

| Good 2G    | 1.39s            |

| Good 3G    | 447ms            |

| Regular 4G | 221ms            |

| Wifi       | 145ms            |

## Build

`git clone`, then configure a [`.env`][env] file with a

[`WORDSAPI_KEY`][wordsapi].  Words API is free up to 2500 request per day,

which is more than enough for trying this out.

For example, `.env` would looks as follows:

```txt

WORDSAPI_KEY=1234567890qwertyuiopasdfghjklzxcvbnm1234567890qwer

```

Then, run `npm install` and `npm build` to build everything.

Lastly, run `npm start` to start the server on port `2000`.

## To do

*   [ ] HTTP/2: I was just trying this out locally, so idc.

*   [ ] Manifest icons: I don’t have an Android, so idc.

## License

[MIT][] © [Titus Wormer][author]

[env]: https://github.com/motdotla/dotenv

[wordsapi]: https://wordsapi.com

[lighthouse]: https://github.com/GoogleChrome/lighthouse

[express]: https://github.com/expressjs/express

[vdom]: https://github.com/Matt-Esch/virtual-dom

[pouch]: https://github.com/pouchdb/pouchdb

[level]: https://github.com/level/levelup

[mit]: license

[author]: https://wooorm.com