michaelbull/aurelia-hacker-news

A recreation of the Hacker News website written in TypeScript and built with Aurelia.

aurelia-hacker-news's Issues

Filter by hostname

Facilitate clicking the domain next to a submission to find all submissions from that hostname.

e.g. https://news.ycombinator.com/from?site=bbc.com

Extend component & router lifecycle interfaces

Currently we use the bind/unbind/activate/deactivate methods and they are 'magically' instantiated.

It would be beneficial to actually implement the interface types for components and for routable components, as then it is clear to the reader what these methods are meant to do and provides IDE assistance.

Remove explicit reference to TypeDoc theme

As soon as TypeStrong/typedoc#343 is fixed we can remove the manual entry from package.json introduced in 19489d9.

Disable development logging in production

Replace CSS @import for Source Sans pro

https://varvy.com/pagespeed/avoid-css-import.html

Pagination on news list

Replace OptimizeCssAssetsPlugin with PostCSS

More unit tests

E2E tests don't wait for the news list to load

Progressive Web App

Specification

Each implementation must include:

• Views: Hacker News Top Stories, New, Show, Ask, Jobs & threaded Comments
  • Each of these should use routing to enable sharability. For reference, see the PreactHN implementation.
• App must display 30 items per-page for story list views
• App must be a Progressive Web App (checklist)
• App must score over a 90/100 using Lighthouse
• App must aim to be interactive in under 5 seconds on a Moto G4 over 3G. Use WebPageTest using the auto-selected Moto G4 + Faster 3G setting to validate "Time to interactive"
  • We look at numeric Lighthouse scores for TTI as well as a manual inspection of the application's Timeline "trace" and Filmstrip as a sanity check.
• App must use the Application Shell pattern to instantly load the skeleton of the UI on repeat visits
• App is responsive on desktop and mobile, making best use of available screen real-estate. See Vue HN as an example.
• App must do its best to work cross-browser

Optionally:

• App supports offline caching of HN data (e.g similar to the 'Offline Mode' in ReactHN)
• App may use server-side rendering so displaying content is resilient to JS not loading on the network

User interface:

• At this time, HNPWA dhttps://github.com/tastejs/hacker-news-pwasoes not prescribe a specific stylesheet or theme for implementations. We will be aiming to provide this in the near future similar to how we do with TodoMVC.

Data sources

• Official real-time Hacker News API powered by Firebase
• Unofficial Hacker News API by cheeaun

If using the Firebase powered API please use 30 stories per-page to ensure consistency between implementations using the Unofficial API as well as the actual Hacker News website

Network settings

• Emerging Markets: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency. Tested with WebPageTest using the auto-selected Moto G4 + Emerging Markets setting.
• Faster 3G: Chrome Beta on a Motorola G (gen 4) tested from Dulles, Virginia on a 1.6 Mbps 3G connection with 300ms of latency. Tested with WebPageTest using the auto-selected Moto G4 + Faster 3G setting.
• Time to Interactive readings taken from linked Lighthouse results in WebPageTest.

Service Worker

Replace promises with async/await

Now that TypeScript has downlevel support for async/await targetting es3/es5, we can replace the promises with async/await calls in Aurelia.

Remove redundant HackerNewsApi injection from app.ts

Self posts show localhost as the posted domain

Investigate NProgress

https://github.com/rstacruz/nprogress
https://www.npmjs.com/package/@types/nprogress

Scroll to top step triggers before the route has finished activating

Copy favicon to dist with copy-webpack-plugin

Relates to #14

Cannot use globalResources whilst uglifying

Fixed in 3d26bdb by resorting to <require> tags.

Would like to avoid this if possible.

Add settings page

Could allow the user to change the STORIES_PER_PAGE, enable auto-refresh, etc

Remove dedupe plugin

https://webpack.js.org/guides/migrating/#dedupeplugin-has-been-removed

Replace html-webpack-plugin with copy-webpack-plugin

Not really making use of the templating system

Pluralise can be improved

I was glancing your html templates, it made me smile when I saw an exactly same value converter pluralise as I had in my project.

I thought you might be using the same underneath library I use but you didn’t.

This 👇 lib can help you to do proper English plural, if you don’t mind inflating your js.
https://github.com/blakeembrey/pluralize

Reset window scroll after page has finished async loading

Current experience moves the page up before the new page has loaded which is odd and unexpected

Reduce webpack console output

Remove --progress from the npm task and remove the stats key from the webpack config.

Add inline refresh button

Shouldn't need to reload the entire application to fetch new stories

Server Side Rendering