Design comparison
Solution retrospective
Hello! 👋
Main goal of this project was to play with the Glide.js library to create carousel. Apart from that I learned how localStorage
works. Using this property every order added to the cart is saved to the Storage
object, which means the stored data is saved across browser sessions. To improve the accessibility of the cart modal or lightbox I used focus trap technique which literally locks the user's focus into a given component as they navigate the page using the keyboard. Later on in the project I came across an interesting alternative to event listener on window's resize event which fire every time the window is resized and there is a need to debounce or fire it only at last change. Instead I use matchMedia
method and attached an event listener to it. Unlike the window resize, matchMedia is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.
💡Here's some new things I used or learned:
- Glide.js - Glide.js is a dependency-free JavaScript ES6 slider and carousel.
- localStorage - localStorage is read-only property of the window interface allows you to access a Storage object for the document's origin. The stored data is saved across browser sessions.
- focus trap - Focus trap is functionality that limits keyboard focus to a specific set of elements/containers.
- matchMedia - matchMedia method is alternative to window resize event. Unlike the window resize,
matchMedia
is used with a CSS media query and the event listener is fired only every time it passes that breakpoint.
🛠️Build with: (can be found also in my others projects)
- Vite - Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
- Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
- BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
❓Questions:
- Any suggestions on how I can improve are welcome!
Community feedback
- @CipiVladPosted 7 months ago
Flawless work as far as i can judge! Will also have a look at glide.js, BEM and perfectpixel. Keep up the good work tediko.
1@tedikoPosted 7 months agoThanks Cipi, it means a lot! Glide.js is very well documented and lightweight so I encourage you to try!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord