https://github.com/gregolive/shop-homepage

An online shop for Mind Blown Coffee Roasters.
https://github.com/gregolive/shop-homepage

css javascript

Last synced: 18 days ago
JSON representation

An online shop for Mind Blown Coffee Roasters.

• Host: GitHub
• URL: https://github.com/gregolive/shop-homepage
• Owner: gregolive
• Created: 2022-02-14T13:09:37.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-19T04:59:28.000Z (almost 3 years ago)
• Last Synced: 2023-07-25T07:27:40.283Z (over 1 year ago)
• Topics: css, javascript
• Language: JavaScript
• Homepage: https://gregolive.github.io/shop-homepage/
• Size: 29.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Online Shop Homepage

An online shop for Mind Blown Coffee Roasters made in Javascript.

[Live demo](https://gregolive.github.io/shop-homepage/) 👈

## Functionality

- Simple 3 tab navigation (Home, Coffee List, and Contact buttons) that use Javascript modules and webpack to generate the appropriate HTML

- Additional JS modules for loading nav header and footer 

- HTML file generated dynamically with webpacks's HtmlWebpackPlugin

## Reflection

This was the first project I built using webpack, but using the excellent [webpack guides](https://webpack.js.org/guides/) made implementing webpack quite easy. I used webpack's asset modules to load in CSS, images, and fonts, in addition to the JS modules. One of the most useful features was setting clean: true on the output directory to keep the dist folder free of unused files. Another aweosme feature is the ability to generate the entire HTML file dynamically, while still being able to set up a favicon, etc.

Something that I still need to figure out with is properlly controlling the size of the output files. When I set the webpack mode to production, I got warnings that some of the files were above the recommended 244KiB size. I was surprised to see that even the font files were deemed to be possibly impacting performance and need to look into fixing this for a project that I will want to use in production.