Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/elmariofredo/elm-hn-pwa

Hacker News as a PWA built with Elm
https://github.com/elmariofredo/elm-hn-pwa

Last synced: 2 months ago
JSON representation

Hacker News as a PWA built with Elm

Host: GitHub
URL: https://github.com/elmariofredo/elm-hn-pwa
Owner: elmariofredo
License: gpl-3.0
Created: 2017-11-03T13:10:07.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2017-10-21T12:01:08.000Z (over 6 years ago)
Last Synced: 2024-01-08T21:58:53.860Z (6 months ago)
Language: Elm
Homepage: https://hnpwa.skingrapher.com
Size: 1.47 MB
Stars: 1
Watchers: 2
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Lists

awesome-elm - Elm Hacker News PWA - A progressive web app built with Elm version 0.18, using the official Hacker-News API (Examples / Other editors)

README

        # Elm Hacker News Progressive Web App



  



Sample of [HNPWA](http://hnpwa.com) built with [Elm](http://elm-lang.org) version 0.18, using the official [Hacker-News API](https://github.com/HackerNews/API)

Available on [hnpwa.skingrapher.com](https://hnpwa.skingrapher.com)

## Progressive

- **100** on [lighthouse](https://hnpwa.skingrapher.com/lighthouse.html)

- **91** on [webpagetest](https://www.webpagetest.org/result/171012_1D_2e14b74f9e034fb5d5f2e88891be0791/) for a slow 3G connection

- service worker partially generated by [workbox](https://workboxjs.org) for static files precache

- offline caching of HN data

- no server-side rendering actually

 

## Reliable 

- interactive under 5 seconds on a Moto 4G over 3G (see webpagetest below)

- first interactive (emerging markets): 4.8s

- first interactive (faster 3G): 3.2s

## Responsive

CSS file:

- built with [Sass](https://sass-guidelin.es/)

- inspired from [Material Design Lite](https://getmdl.io/components/index.html)

- less than 4kb

- inlined in index.html for better performance

- style supported by all devices (smartphones, tablets and larger screens)

## Accessible

- **100** on lighthouse (see link to report below)

- valid accessibility according to WCAG 2.0 (level AAA) guidelines

- contrast level AAA between background and text for all colors

- new ARIA **feed** role with **aria-posinset** and **aria-setsize** attributes exists in [WAI-ARIA 1.1](https://www.w3.org/TR/wai-aria-1.1/#feed) 

- no error according to [a11y.css](https://ffoodd.github.io/a11y.css/)

- no bitmap pictures

- added **noopener** and **noreferrer** relations to links to prevent from target="_blank" vulnerability abuse

## Versions

### 0.11

stable release without pagination

## TODO

- testing background sync

- lazy loading for very extensive comments

## Build elm.js howto

    elm make Hnpwa.elm --output elm.js 

then the js file is minified and its code is incorporated as a part of the script in index.html

## Resources

 

- about PWA: read on [Google](https://developers.google.com/web/progressive-web-apps/) page for developers

- check the [awesome PWA](https://github.com/hemanth/awesome-pwa) list 

- elm tutorials for SPA: [client elm](https://github.com/foxdonut/adventures-reactive-web-dev/tree/elm-010-todolist-feature/client-elm) by Fred Daoud, [elm spa example](https://github.com/rtfeldman/elm-spa-example) by Richard Feldman, [elmstagram](https://github.com/bkbooth/Elmstagram) by Ben Booth

- about service workers API: read on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)

## Credits

 

- github icon from [Entypo](https://entypo.com)

- original elm SVG logo [here](https://upload.wikimedia.org/wikipedia/commons/f/f3/Elm_logo.svg)

- SVG loader by [Sam Herbert](http://samherbert.net/svg-loaders/)