Show HN: Trends – A GitHub trending PWA

[jack_hanford]

Over the past few weeks I've been working on a small application to view trending repos on GitHub. I built the PWA[1] with React, Next.js and GraphQL .. but what's interesting is the application is only using React server side, meaning the client side javascript is only a few lines code adding some event listeners and registering a service worker for offline capability. This helped me achieve a perfect google chrome performance audit

I learned a ton working on it and would love to talk about it if anyone has any questions!

Application Link: https://trends.now.sh

Source code on Github: https://github.com/hanford/trends

[1]: https://developers.google.com/web/progressive-web-apps/

[yodon]

I'm super intrigued by the client-side/server-side rendering question. When I discovered single page apps I thought I'd seen the future - servers were just things that hosted web services, and all the presentation was a bundled, minimized blob served up by a static CDN. So simple, so clean, such clear separation of concerns. But now I'm seeing reports of faster first page rendering with React server than React client, and here I'm seeing a clearly very smart person articulating a completely different class of benefit of server-side rendering. Clearly I shouldn't be walking away from old style server side rendering so casually. My question is how do you think about that choice, now that we have the freedom to go either direction?

[jack_hanford → yodon]

It's certainly interesting. This kind of development has gone full circle where the methodologies are back to where it was years ago.

The issues that really large JS bundles can cause are really hard to solve (bloated sizes, but also parse time of the bundles). There are a lot of tools to help mitigate those like code splitting, but it's really challenging once things get big.

When I wanted to achieve a 100 in my chrome performance audit, I simply couldn't include React.

I think React adds a tremendous amount of value from the ecosystem, the constant improvements and updates .. and the mindset that developers have when building out react applications. (component model, etc)

I think for any really large application with lots of client side interactions or async data / data management, my solution would become unwieldy.

But for smaller applications that maybe don't need to do as much, (in the above case we're simply registering some event listeners to submit a form) or landing pages or the like .. the above solution would work very well.

[thomasfromcdnjs → yodon]

The community has done a "full circle" but we came out on top a thousand times better.

We can now do server side rendering while also booting up a complex JS app on top of it.

It is definitely the foreseeable future.

[vimslayer]

The page load speed is seriously impressive, congrats!

There's something weird going on with the styling of the dropdowns, though: https://i.imgur.com/WQ3m52X.gif

I'm on Windows 10 & Chrome

[pandler → vimslayer]

> The page load speed is seriously impressive, congrats!

I happened to see this before I clicked the link, and I have to agree the page load speed lives up to your hype!

I'm not experiencing your issue on OS X, Chrome.

[andyfleming → vimslayer]

On a similar note, it'd be nice if there were an arrow indicating it was a dropdown in the first place.

[jack_hanford → vimslayer]

just rolled out a fix for this on firefox for mac, i don't have a windows computer to test the fix on...

if you do a hard refresh this issue may be resolved! ¯\_(ツ)_/¯

[AngeloAnolin → jack_hanford]

Dropdown arrow still does not show in Windows 10 with Chrome v. 68.0.3440.75 [1]

Same with Microsoft Edge 42.17134.1.0

Works OK on Firefox 61.0.1 (64-bit) [2]

[1] https://imgur.com/a/e9pw5Ii [2] https://screenshots.firefox.com/iv6SFyfw29zh91WG/trends.now....

[vimslayer → jack_hanford]

Yep, works well now.

[mataug → vimslayer]

I'm having the same issue in OSX firefox.

[jack_hanford → mataug]

May need to do a hard refresh because of the aggressive caching, but this should be fixed now!

[david-cako]

Related question:

Does anyone know of a solution to the jank on firefox (perhaps others) when you have a hover scale effect? I figure animating all dimensions and text size instead of scale may do the trick, but that's a pain.

I'd even be okay with indefinitely deferring the re-render at the end of the animation if possible.

[ransom1538]

Horrifying to see my stupid side (joke) project manipulated the star rankings. https://www.gitstarred.com/. I guess it doesn't take many stars to do that.

[thrilleratplay]

I like to check the trending repos once a day, but Github keeps moving the link to it, this is fantastic. While I am sure others will be asking to add more languages, could there be a feature to check multiple languages at once with the language displayed with the repo? It is annoying on Github to have to check both Javascript and Typescript for similar trending projects.

A simple vertical list would also be nice, but that is personal preference.

[tutfbhuf]

I did the same but with a PureScript frontend https://madnight.github.io/grendy/ and a Haskell backend https://github.com/madnight/grendel

[roryisok]

No text on IE mobile.

https://i.imgur.com/Naqr8Xg.jpg

I know nobody supports IE mobile but I thought id report it. It's a shame because I was looking for exactly this app, and it seems to work otherwise

[chatmasta → roryisok]

https://en.wikipedia.org/wiki/Internet_Explorer_Mobile

> Internet Explorer Mobile is a discontinued mobile browser

Why should anyone support a discontinued browser?

[roryisok → chatmasta]

Discontinued doesn't mean out of use. But I get your point. Maybe it doesn't work on ie7 either. I should just "get with the times" and move to android or iOS. But we're taking about text not rendering correctly on a PWA that otherwise works well. I don't see the harm in reporting it because maybe its one tiny change the author needs to make in order for it to be usable.

[jack_hanford → roryisok]

Looks like IE mobile doesn't support CSS Grid!

[romdev]

Changing the width or zooming in and out changes the number of columns (nice!), but the max seems to be 4. Is that a hard limit? Seems like a responsive UI should respect wider screens in landscape. Nice work, btw.

[jack_hanford → romdev]

yeah I added a hard limit based on a relatively arbitrary max-width of 1400px.

I got all of the responsiveness for free using CSS grid! Definitely recommend checking it out if you haven't yet

Figured something like this would be a little overwhelming https://imgur.com/nx3hISb

[hamslamwich → jack_hanford]

That is, indeed, overwhelming. Ha

[Mithorium]

Never used next, looks interesting. So with this setup, the browser doesn't do any work, all pages are loaded as if they were static, and rendered server side?

[jack_hanford → Mithorium]

Correct!

The way that is achieved is pretty neat, Next.js has a <Document />[1] component that you can extend. This Document is essentially your application shell that is used when server side rendering.

Here is the trends Document component[2] where you can see I'm simply omitting `NextScripts` which ends up being the frontend bundle with react + application code

[1] https://github.com/zeit/next.js#custom-document

[2] https://github.com/hanford/trends/blob/master/pages/_documen...

[yodon → jack_hanford]

I'd seen references to next before this but never really dug in deep enough to get a sense of whether it was worthwhile. Thanks for giving it enough context to show how cool and accessible next is.

[askaboutit]

This site is lightning fast. Just how it should be!

[butz]

Select options are white on white background in Firefox. And it would be nicer, if changing language and time wouldn't reload whole page.

[jack_hanford → butz]

hmm, thanks for mentioning the select options .. should be an easy fix.

As for the page reloading I agree, but this exercise was specifically to make an application with the absolute minimum amount of client side code.

HTMl5 Forms do the job pretty well! :)

[KaoruAoiShiho]

Cool. Just curious if this is supposed to be just an exercise or does it have information that's not on github's own trending page?

[jack_hanford → KaoruAoiShiho]

I'm using the search API, so unlikely anything different than Github's trending stuff that is already there.

The UI is a little better though ;)

[codesections]

I notice that it lets you sort by language. Does the underlying data let you get at trends in relative language popularity?

[jack_hanford → codesections]

If I understand correctly you could build something like that but I'm not currently persisting any data from github which is something I'd need to add first.

I'm simply getting this data from Github and then caching the rendered result on the cloudflare CDN layer, the rendered page data in memory in node, and additionally the GraphQL query in memory

[HNNewer]

Nice work, but I would put more effort in supporting Firefox rather than Chrome.