└── README.md /README.md: -------------------------------------------------------------------------------- 1 | 2 | # JavaScript Frontend Practice Project 3 | This project is mainly targeting those who wants job transition to Frontend, intern, fresh graduate, junior and those who want to learn more in Frontend. 4 | 5 | For those frontend experts, kindly contribute or help those who seek help! 6 | 7 | Feel free to contribute more information by creating a Pull Request. 8 | 9 | Most importantly, don't be toxic. Everyone is learning. 10 | 11 | If you have any questions/suggestions, kindly create a post in [Discussion](https://github.com/OysterD3/frontend-practice/discussions) 12 | 13 | ## Open API 14 | 1. [TMDB (The Movie Database)](https://developers.themoviedb.org/3) 15 | 2. [Coingecko API](https://www.coingecko.com/en/api/documentation) 16 | 3. Add what you know here by creating a PR! 17 | 18 | ## Rules 19 | 1. Use any framework you like ([React](https://reactjs.org/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/), [Next](https://nextjs.org/), [Nuxt](https://nuxtjs.org/), etc) 20 | 2. Deploy to any free hosting ([Netlify](https://www.netlify.com/), [Heroku](https://www.heroku.com/), [Vercel](https://vercel.com/), etc) 21 | 3. When committing your changes, try to follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) 22 | 23 | ## Criteria 24 | ### Level 0 25 | 1. Fully functioning UI/UX with routers 26 | 27 | ### Level 1 28 | 1. Everything in Level 0 29 | 2. Don't use any UI component library (ElementUI, AntDesign, MaterialUI, etc) 30 | 3. Able to use Tailwindcss/Windicss/Unocss/Bootstrap/etc 31 | 4. Able to filter results 32 | 33 | ### Level 2 34 | 1. Everything in Level 1 35 | 2. Don't use any high-level framework (Next, Nuxt, Sveltekit) 36 | 3. Lazy load components/routes 37 | 4. Use state management library ([Vuex](https://vuex.vuejs.org/), [Pinia](https://pinia.vuejs.org/), [Redux](https://redux.js.org/), [MobX](https://mobx.js.org/README.html), etc) 38 | 5. Google Lighthouse Accessibility & Best Practices & Performance score >= 50 39 | 40 | Read More: [Tips on Improving Google Lighthouse score?](#tips-on-improving-google-lighthouse-score) 41 | 42 | ### Level 3 43 | 1. Everything in Level 2 44 | 2. Written in [TypeScript](https://www.typescriptlang.org/) 45 | 3. Mobile Responsive/Adaptive 46 | 4. Google Lighthouse Accessibility & Best Practices & Performance score >= 80 47 | 48 | ### Level 4 49 | 1. Everything in Level 3 50 | 2. Don't use any CSS library 51 | 3. Use CSS preprocessor ([SCSS/SASS](https://sass-lang.com/), [Less](https://lesscss.org/), [Stylus](https://stylus-lang.com/), etc) 52 | 4. Style should work across various browsers (Edge, Firefox, Chrome, Safari) 53 | 5. Without any help of library, implement infinite scroll 54 | 55 | ### Level 5 56 | 1. Everything in Level 4 57 | 2. Use [Vite](https://vitejs.dev/) as bundler 58 | 3. Without the help of the plugins, implement file system based routing. Click here for example 59 | 4. Run your dev server in port `:1234` 60 | 61 | ### Level 6 62 | 1. Everything in Level 5 63 | 2. Write Unit Test 64 | 3. Write Component Test 65 | 4. Write End-to-end Test 66 | 67 | ### Level 7 68 | 1. Everything in Level 6 69 | 2. Change your web app to PWA (Progressive Web App) 70 | 3. Implement [Workbox](https://developers.google.com/web/tools/workbox) and use any caching strategy to cache responses from API 71 | 72 | 73 | ## Examples 74 | ### File system based routing (Vite only) 75 | You don't need to add route manually. Put your `views/` into `pages/` it will generate for you. 76 | 1. `/pages/foo/index.vue` will generate path `/foo` 77 | 2. `/pages/home/index.vue` will generate path `/` 78 | 79 | You must use `import.meta.glob` or `import.meta.globEager` to achieve this. Check out https://vitejs.dev/guide/features.html#glob-import 80 | 81 | ### Tips on Improving Google Lighthouse score 82 | 83 | 1. Suitable image size/resolution 84 | 85 | Do not use ridiculously large image (4000 x 3000 px), it takes up a lot of bandwidth and slows down your website. For example, you can use an image with size of 1920x1080 or 1600x900 as your hero image. 86 | 87 | > Cropping your image using image editing tool, we are not talking about `resize` property in CSS here. 88 | 89 | Some common image formats that you can use are JPG, PNG, GIF, SVG or even [WebP](https://developers.google.com/speed/webp) 90 | 91 | Read More: [Responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 92 | 93 | 2. `Development` and `Production` build 94 | 95 | Take [webpack](https://webpack.js.org/) as an example, the goals of `development` and `production` builds differ greatly. In `development`, we want strong source mapping and a localhost server with live reloading or hot module replacement. In `production`, our goals shift to a focus on minified bundles, lighter weight source maps, and optimized assets to improve load time. 96 | 97 | 3. Purge unused CSS 98 | 99 | With tool like [PurgeCSS](https://purgecss.com/), you can remove unused CSS from your project. When you are building a website, chances are that you are using a css framework like `Bootstrap`, Materializecss, Foundation, etc... But you will only use a small set of the framework and a lot of unused css styles will be included. 100 | 101 | This is where PurgeCSS comes into play. PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files. 102 | 103 | Or, you are using a UI framework in your project such as [Material UI](https://mui.com/), how to [minimize bundle size](https://mui.com/material-ui/guides/minimizing-bundle-size/) might be a good read. 104 | 105 | You can do similar thing on your `js` module. [`Tree shaking`](https://webpack.js.org/guides/tree-shaking/), a term commonly used in the JavaScript context for dead-code elimination. 106 | 107 | 4. Minify Resources/Use minified assets 108 | 109 | Take `Bootstrap` as an example, common libraries or JavaScript plugins often offer a few version of source code, including compiled and minified CSS and JS(bootstrap.min.\*). The minified CSS and JS files have smaller file size. 110 | 111 | bootstrap/ 112 | ├── css/ 113 | │ ├── bootstrap.css 114 | │ ├── bootstrap.css.map 115 | │ ├── bootstrap.min.css 116 | │ ├── bootstrap.min.css.map 117 | │ ├── bootstrap-grid.css 118 | │ ├── bootstrap-grid.css.map 119 | │ ├── bootstrap-grid.min.css 120 | │ ├── bootstrap-grid.min.css.map 121 | │ ├── bootstrap-reboot.css 122 | │ ├── bootstrap-reboot.css.map 123 | │ ├── bootstrap-reboot.min.css 124 | │ └── bootstrap-reboot.min.css.map 125 | └── js/ 126 | ├── bootstrap.bundle.js 127 | ├── bootstrap.bundle.min.js 128 | ├── bootstrap.js 129 | └── bootstrap.min.js 130 | --------------------------------------------------------------------------------