Styling and Material UI for Google Font App

Been working on the styling all day. Discovered Material UI, which is a CSS framework for react which uses the Material UI design guidelines from google.

Updated all the components to use the Material UI components. Took a while to get it all together and looking good. I was actually trying out some other Material UI CSS frameworks which werent working too well with react, and then I luckily I found this one.

Realised that on previous projects I have lost a lot of time styling components that are already amazingly styled in this library. It is also teaching me to use react better, since the components are all react based, and most of the custom styling for the components I am now keeping within the component script itself so it is easier to track. Plus there is so much less CSS now overall since so much of the styling is already done.

So for this project, I have spent quite a bit of time getting the app and extension to build from the same base script, and also learning Material UI. But these things are already paying dividends in time saved.

Some of the functionality has broken since integrated the Material UI components. So tomorrow I will finish the styling, fix the functionality, and then it should be ready for first release.

Have thought that eventually can be three screen icons at the top

1. Home – currnet page
2. Filters – more advanced filtering
3. Favourites

Will also integrate a details page which will show details for any of the selected fonts.

App is going to be seriously kick ass once it is done.

Google Font App – viewport loading integrated, and styling started!

 

11:31 am – favourites now updating properly

11:40 am – got the search input to update to the last query also on reopening popup. So now the popup can completely reload to the last state after opening or closing it.

Now I should get the font loader working in the popup also.

12.06 – have implemented the web font loader on the popup side. It is now avoiding the flash of unstyled fonts (FOUF) in the beginning, which happens if you dont use a font loader. Event the performance on the variants loading is better. There is still a FOUF fonts, but it is fast. Without the font loader what happens is:

1. unstyled fonts is displayed
2. invisible area, as new fonts are downloading
3. new fonts displayed.

So there are like 3 different parts. With the font loader, only two parts:

1. Unstyled fonts displayed
2. new fonts displayed

The reason is the font loader only shows the new fonts once the fonts have donwloaded, so it avoids the invisible area part.

ok so font loading is fine now. Lets see how long it takes to donwload if all fonts are rendered. It has about a 20 second load time if we load all the font styles at the same time.

2.34 pm – Have got the viewport rendering working and looking good just now. Am using the library react-waypoint where we basically create a <Waypoint/> component, and it firses an event off when that component is loaded into the screen. e.g.

<Waypoint onEnter={this.handleOnEnter} />

It passes by defualt an event which includes details about the whole viewport. I found a way to bind a value to the function though, like so

onEnter = {this.handleOnEnter.bind(this, value)

Here I am passing item.family as value, since a Waypoiny is being rendered for each font family as the <FontList /> component iterates through the fonts list.

Have set an offset of -600px, so it also renders fonts that are up to 600 px below the viewport. Also, importantly have set fireOnRapidScroll = {false}. This means that if we pull the scroll bar say midway it will still only render the items in the viewport (+ the offset), as oppose to rendering all the items that have been passed during the rapid scroll.  This gives us fast render times for all items in the viewport. If we leave fireOnRapidScroll = {true}, it gets very laggy as it firest an event for all items during the rapid scroll. It gets buggy, and laggy, so dosent work well, and setting the fire on rapid scroll to false helps prevent this and gives a nicer interaction.

So now the app is fully ready for first release! I just need to update the styling. Other feature I can include are:

• a details page for each of the fonts.
• ability to sort by thickness and slant. To do this I will have to parse the Google Font Page to see how it groups the fonts by thickness/slant, since there is no API to use that directly.
• a currently applied font section, which shows which fonts are currently being used on the screen, under which selectors, and the ability to disable them individually also.

For now I can work on the styling.

7pm – finished some styling work. See the photo above for current state.