Define a format for application summaries

[tastejs]

Define a format for application summaries

[addyosmani]

I'm assuming we'll have the lighthouse + interactive times as just separate points of the list as well?

Fore sure. I think highlighting the mobile performance of each implementation is particularly relevant for highlighting in the list.

As per Dan's feedback, we should probably remove the logo beside the name of the implementation. We can have it beside the mention of the framework/UI libraries used in the first point of the list (might help stress the fact that these tools aren't official library implementations).

This SGTM.

We should also probably have the author for each implementation as a separate point, should further help stress the fact that these examples aren't official

👍

This is what I'm envisioning in terms of how the design might change: http://hnpwa-updates.surge.sh/

This is a great start. How would you feel about us making better use of the horizontal space by having the summary next to the device? I was thinking:

• device preview on the right (like current site)
• the summary on the left. text in there is left aligned
• summary includes the performance scores + lighthouse scores at the top

Very open to other ideas though!

[kristoferbaxter]

Here are the details for Preact HN.

Framework/UI library
Preact, Preact Router

Module bundling
Webpack

Service Worker
Application Shell with OfflinePlugin

Performance patterns
HTTP/2 with Server Push, Brotli and Zopfli static assets

Server-side rendering
Yes

API
In-memory cached Hacker News Firebase API

Hosting
Webfaction + Cloudflare

[housseindjirdeh]

I like the structured list as well. A couple of thoughts:

• I'm assuming we'll have the lighthouse + interactive times as just separate points of the list as well?
• As per Dan's feedback, we should probably remove the logo beside the name of the implementation. We can have it beside the mention of the framework/UI libraries used in the first point of the list (might help stress the fact that these tools aren't official library implementations).
• We should also probably have the author for each implementation as a separate point, should further help stress the fact that these examples aren't official (as well as allow us to include multiple implementations for a single framework/library). We can just have their names here and still include their images at the footer.

Please let me know if you agree/disagree with some or all of this. Will hopefully get a PR for this by tomorrow!

[housseindjirdeh]

This is what I'm envisioning in terms of how the design might change: http://hnpwa-updates.surge.sh/

[housseindjirdeh]

Awesome thank you, yeah you're right not much use of space keeping vertically aligned. Always good to get a second pair of eyes on it. Appreciate the feedback!

[housseindjirdeh]

http://hnpwa-details.surge.sh/

Suggestions welcome! If it looks decent enough, I'll submit the PR :)

Note: Once we finalize the design, would probably make sense to tag each author and ask them to include the details of their implementation themselves in the list. What do you think @addyosmani?

[addyosmani]

Thanks for hacking on this, @housseindjirdeh! Looking good so far.

Some drive-by feedback:

I like that we're playing around with iconography. I do wonder if it might be a little early to hope most developers landing on the site know what Lighthouse is or that the timings here are relation to 1) load and 2) interactivity.

One thing I love about the current design you put together (live) is that we spell these things out pretty clearly. Do you think it might be possible to play around with a text breakdown for the scores?

I'm a fan of each implementation's entry still being fully visible on an average sized monitor. Looking at the length of text for some of the fields, I wonder if we would save some of the vertical space by switching up from:

Module bundling
Webpack

to Module bundling: Webpack

and tried to do the same for any lines that are likely to have short answers.

The rest of this looks great to me however 👍

[housseindjirdeh]

Cheers thank you @kristoferbaxter!

Updates: http://hnpwa-fresh.surge.sh

Awesome thanks again @addyosmani.

I like that we're playing around with iconography. I do wonder if it might be a little early to hope most developers landing on the site know what Lighthouse is or that the timings here are relation to 1) load and 2) interactivity.

I was thinking this, and you're most probably right. Definitely makes sense to keep the full texts there. Played around with a couple of different designs:

^ Didn't seem as nice on smaller screen sizes unfortunately.

^ Looked decent but still felt kinda off 🤔

Final design

Ended up removing the icons but please let me know if you would like me to incorporate them in some way.

I'm a fan of each implementation's entry still being fully visible on an average sized monitor. Looking at the length of text for some of the fields, I wonder if we would save some of the vertical space by switching up from:

Module bundling
Webpack

to Module bundling: Webpack

Good point, changed all of them to be inline texts (and if they happen to be long enough they'll show up as a separate line).

---

I also just allowed adding multiple items for the Frameworks/UI libraries section of the details list. Due to this, I removed the icon of the framework used (Angular logo, React logo, etc...). Let me know if you would have liked me to still include them however.

Let me know if there's anything else you can think I should change!

[addyosmani]

This looks really awesome, @housseindjirdeh. I think it ticks all the right boxes in my opinion 🎉

Due to this, I removed the icon of the framework used (Angular logo, React logo, etc...). Let me know if you would have liked me to still include them however.

To be honest, I think this was a good call. The header text makes it clear what framework we're talking about and we can highlight frameworks by linking them out to their respective sites.

Let me know if there's anything else you can think I should change!

Dan had one idea we could maybe incorporate. What if we had a link or button for submitting your own versions of HNPWA? Something that might make it clear these are community maintained examples. We could link to an issue template or just the 'spec'.

[housseindjirdeh]

@addyosmani thank you, that's a great idea. PR opened for everything in #42 :)

[addyosmani]

Thanks once again for all of the great input folks. Closing as we have now landed this work and it should be live shortly.