[WIP] Microsite about adaptive-loading HOT 17 CLOSED

Nice! Good start :) Some quick notes:

• We might want to use SVG versions of the Material icons as we'll probably only need to pull in a few vs all of Material Icons font https://material.io/resources/icons/?style=baseline
• Image for the right-hand-side can be found here: low-data-small.png.zip
• Content-wise, it might make sense for us to include snippets from the Hooks readme so folks can easily see how to use them in the same place?

from adaptive-loading.

Fonts: I think we can safely opt for Roboto as long as we are using a safe font-display default to minimize invisible text being shown.

Could you please send me a fav icon and the main icon highlighted in red?

yes, i'll dig that up right now.

from adaptive-loading.

@addyosmani
I think I have understood the outline of this microsite.

As for the theming, shall we use material-ui?

from adaptive-loading.

I think as long as we can keep the performance of our landing page high, using Material UI sounds fine. The alternative might be looking at one of the smaller sized Material implementations.

In my view, we mostly need a Material navigation bar (could be CSS if not opting for a drawer). The rest is pretty custom. I don't think we necessarily need to use cards or FAB buttons for this page. Picturing the links just being links :)

from adaptive-loading.

@addyosmani
Yes, I got your points.
Using Material UI might be expensive regarding the performance.
I think we can just use Material components as many as required without installing the whole Material UI framework. Actually just with CSS, we could implement the feel and look.

from adaptive-loading.

👍👍👍

from adaptive-loading.

SVG artwork for the main image can be found attached 📦

art-svgomg.svg.zip

from adaptive-loading.

@addyosmani

Currently it's bootstrapped with create-next-app and necessary configuration is done including AppBar and Drawer. I was going to ask assets. :)

• Link to Glitch App
• Link to Project on Glitch

from adaptive-loading.

@addyosmani

Thank you for your feedback. It's just the beginning of the project for now.
Yes, I remember the svg icon usage to improve the performance, which you taught me the other day.

from adaptive-loading.

Hey Anton. For the purposes of priorities next week, could we focus on #86 and #83 then come back to the microsite?

from adaptive-loading.

Hey Anton. For the purposes of priorities next week, could we focus on #86 and #83 then come back to the microsite?

Yes, I'll proceed that way.

from adaptive-loading.

@addyosmani

Could you please send me a fav icon and the main icon highlighted in red?

Thanks.

from adaptive-loading.

@addyosmani

In the material design, Roboto font is used. What kind of font shall we use?

from adaptive-loading.

An SVG version of the icon can be found below:

iconfinder_comparison_data_analytics_4272271.svg.zip

Favicons for the page, generated with realfavicongenerator can also be found below:

favicon_package_v0.16 (1).zip

from adaptive-loading.

@addyosmani

Roboto font is set across the website with font-display swap.

from adaptive-loading.

@addyosmani

Next.js has some problem with css module importing.
They are working on it but not resolved yet.
So I just adopted the workaround for importing some css module.

Re:
vercel/next-plugins#282
vercel/next.js#5598 (comment)
vercel/next.js#5291
vercel/next.js#5598 (comment)
vercel/next.js#5264 (comment)

from adaptive-loading.

@addyosmani

According to Lighthouse, Roboto font was one of the potential savings in order to improve the performance.
So we've ended up using Arial for now.

from adaptive-loading.