Skip to content
Hacker News as a PWA built with Elm
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
dist added link in head to crossorigin preconnection Oct 21, 2017
elm-stuff added pagination Oct 20, 2017
report added lighthouse report Oct 1, 2017
svg
sw minor changes Oct 12, 2017
.gitignore
.htaccess
Hnpwa.elm
LICENSE.md added LICENSE Oct 1, 2017
README.md
elm-package.json added elm-paginate to elm packages Oct 4, 2017
elm.js

README.md

Elm Hacker News Progressive Web App

Sample of HNPWA built with Elm version 0.18, using the official Hacker-News API

Available on hnpwa.skingrapher.com

Progressive

  • 100 on lighthouse
  • 91 on webpagetest for a slow 3G connection
  • service worker partially generated by workbox 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
  • inspired from Material Design Lite
  • 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
  • no error according to 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

Credits

You can’t perform that action at this time.