Suggestions to improve the frontend user experience

[ChlorinePentoxide]

The new PatternHouse portal frontend and the new openAOD website has been deployed.

Few of the Highlights

• JavaScript support has been added
• The PatternHouse Portal now has better filters for selecting the pattern type.
• Syntax highlighting for each language is added (Powered by PrismJS).
• Source code displayed direct links both to GitHub and ability to Download direct source
• Semaphore CI automatically builds and deploys new versions of the portal every Sunday 08:30 GMT
• Every time a new build is deployed, a mail containing the status is sent to monitoring@openaod.org
• New test suites have been added for all languages and will auto-run when new pull requests are opened
• The main openAOD website now has the announcement regarding the collaboration with the Open Community (#13)

  Links

  openAOD Website: https://www.openaod.org/ PatternHouse Website: https://patternhouse.openaod.org/ PatternHouse Portal: https://patternhouse.openaod.org/portal/

@aryashah2k @cyberbuddy-manas @Daksh777 @eshan1925 Please give it a try and let me know if you have any suggestions.

[Daksh777]

I instantly noticed that the PatternHouse website is extremely slow and after checking the network tab I saw that it's requesting every single image in one go and that has to be fixed.

[ChlorinePentoxide]

@Daksh777 Yes! That is design is intentional. The images shall be converted to a compressed format (WebP), we are also working of getting a CDN provider on board to help speed up load times, and latency.

[Daksh777]

@ChlorinePentoxide Could we perhaps load only some images and then lazy load all others when the user scrolls down? I'm not sure if only compression and CDN will help so much.

[ChlorinePentoxide]

@Daksh777 Hmm, ok, that is possible. I have enabled lazy loading on all images. I used Google Lighthouse to measure the improvement -- The performance score jumped from 79 to 87. We should be able to squeeze more performance by CDNs, new formats, and minifying CSS and JS code.

[Daksh777]

One more suggestion, fix the width and height of all image elements. Lazy load won't work properly because all images will initially be on the viewable screen, if we fix the sizes of the images then the DOM won't shift.

[ChlorinePentoxide]

@Daksh777 The images already have a fixed width, should I fix the height as well?

[ChlorinePentoxide]

Fixed that.

[ChlorinePentoxide]

Switched to CDN for the Image assets.

[Daksh777]

The speeds are quite better now, amazing work @ChlorinePentoxide!