{"id":21240611,"url":"https://github.com/chrisnajman/frontend-practice-project-webpack-5","last_synced_at":"2026-04-16T19:10:13.514Z","repository":{"id":163103052,"uuid":"638548234","full_name":"chrisnajman/frontend-practice-project-webpack-5","owner":"chrisnajman","description":"A page built from the Abstract Project design at Frontend Practice using Webpack 5","archived":false,"fork":false,"pushed_at":"2025-02-20T07:15:02.000Z","size":2501,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T08:24:52.354Z","etag":null,"topics":["babel","dart-sass","html-css-javascript","json","postcss","svg-sprites","webpack5"],"latest_commit_sha":null,"homepage":"https://chrisnajman.github.io/frontend-practice-project-webpack-5/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisnajman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-09T15:28:22.000Z","updated_at":"2025-02-20T07:15:02.000Z","dependencies_parsed_at":"2024-03-29T07:40:56.900Z","dependency_job_id":"60c595fc-6c45-4fc2-8117-ca9e5e848bb8","html_url":"https://github.com/chrisnajman/frontend-practice-project-webpack-5","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffrontend-practice-project-webpack-5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffrontend-practice-project-webpack-5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffrontend-practice-project-webpack-5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisnajman%2Ffrontend-practice-project-webpack-5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisnajman","download_url":"https://codeload.github.com/chrisnajman/frontend-practice-project-webpack-5/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243681002,"owners_count":20330155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","dart-sass","html-css-javascript","json","postcss","svg-sprites","webpack5"],"created_at":"2024-11-21T00:52:06.768Z","updated_at":"2025-12-29T19:32:16.512Z","avatar_url":"https://github.com/chrisnajman.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Practice Project (Webpack 5)\n\n## Description\n\nThis page is identical to [Frontend Practice Project](https://github.com/chrisnajman/frontend-practice-project) except\nthat it has been integrated into my [Basic Webpack 5 Setup with SASS, Babel, PostCSS, Self-hosted fonts and SVG Sprite](https://github.com/chrisnajman/webpack5-basic-setup) (GitHub).\n\n**Webpack Note**\n\nI had to use `copy-webpack-plugin` to copy across both the svg sprite and the `src\\json\\cards.json` files (see `webpack.config.js`).\n\nThis was because both these files are referenced from within the JavaScript.\n\nThe page is based on the [Abstract Project][abstract] design at\n[Frontend Practice][frontend].\n\nAlthough I followed the design most of the way, I became more interested in:\n\n- working out how to use SVG Sprites,\n- breaking down Javascript into modules,\n- coordinating CSS Media queries and Javascript to control the mobile menu, and\n- integrating it into Webpack 5,\n\nthan achieving absolute fidelity to the design.\n\n## HTML\n\n- `template` used for individual 'cards'.\n- `dialog` element used for 'Sign in' and 'Submit request' forms.\n\n## SCSS\n\n- Webpack 5 uses Dart SASS. [Official documentation](https://sass-lang.com/dart-sass).\n- `flexbox` is used for the overall page layout and many of the page elements.\n- `grid` is used only for the 'cards' section.\n- Responsive.\n\n## PostCSS\n\n- This takes care of any required browser prefixes (dependent on how you configure `.browserslistrc`).\n\n## SVGs\n\n- I used an SVG sprite to pull in most of the icons.\n- The mobile navigation hamburger icon is written inline.\n\n## Fonts\n\n- The Google font, 'Roboto', is self-hosted (see my [self-hosting-fonts][fonts] page).\n\n## Javascript\n\n- Webpack's version of ES6 modules is slightly different: `index.js`, where all files are imported, uses e.g. `import \"./navMobile\"`, whereas ES6 Module `script.js` would list the file as `import navMobile from \"./modules/components/nav-mobile.js\"`.\n- Transpilation to ES5\n- **Important**: paths from JavaScript to external files (.json, .svg ...) must be in the form: `./json/cards.json`. The path **must not** be relative to the JavaScript file itself: `../json/cards.json`.\n  - This becomes clear when we look at the file structure of the output folder :\n\n```\ndocs/\n  main.js\n    json/\n      cards.json\n    svg/\n      sprite.svg\n  (other files...)\n```\n\n## JSON\n\n- To simulate a database I've pulled in the individual cards via `cards.json`.\n\n## Accessibility\n\n- `ARIA` and `role` attributes used as required.\n\n## Cloning, installation, publishing to Git/GitPages, etc.\n\nSee\n\n- [Basic Webpack 5 Setup with SASS, Babel, PostCSS, Self-hosted fonts and SVG Sprite](https://github.com/chrisnajman/webpack5-basic-setup) and\n- [One-page site template](https://github.com/chrisnajman/one-page-site-template)\n\n## Sources\n\n- [Frontend Practice Abstract Project][abstract]\n- [Hamburger menu icon animation][codepen]\n- [Accessibility for Hamburger Menu][accessibility]\n- [SVG Editor][svgEditor]\n- [Boxicons (free SVG icons)][boxicons]\n- [How to create and use an SVG Sprite][sprite]\n- [Font-size Clamp Generator for responsive typography][clamp]\n\n## Testing\n\n- Tested on:\n  - Windows 10\n    - Chrome\n    - Firefox\n    - Microsoft Edge\n\n[abstract]: https://www.frontendpractice.com/projects/abstract\n[codepen]: https://codepen.io/cossovich/pen/ExjpmRg\n[accessibility]: https://medium.com/@linlinghao/accessibility-for-hamburger-menu-a37fa9617a89\n[svgEditor]: https://svgeditoronline.com/editor/\n[boxicons]: https://boxicons.com/\n[sprite]: https://youtu.be/LgfLpEHqgGU\n[clamp]: https://clamp.font-size.app/\n[frontend]: https://www.frontendpractice.com/\n[fonts]: https://github.com/chrisnajman/self-hosting-fonts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Ffrontend-practice-project-webpack-5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisnajman%2Ffrontend-practice-project-webpack-5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisnajman%2Ffrontend-practice-project-webpack-5/lists"}