Hello! 👋
This time I decided to take on the Design portfolio challenge. It seemed like a good place to start learning the CSS Grid, which is a very powerful tool and I will definitely use it more often now. Instead of using multiple media queries for paddings and spacing, I tried to use clamps for that. There is less code, but in my opinion the readability is a bit worse and it is more difficult to make changes. I probably won't use it that way.
The biggest challenge was writing an accessible slider from scratch. For this purpose, I used cloneNode() JavaScript method to clone the first two and last two slide items. To obtain the effect of an infinite slider when the user changes the slide to cloned one, I turn off the CSS transition and restart slider position to either first slide or last slide, depending on direction. Based on the width of the window and the width of the slide, the value for which the slider needs to be moved is calculated to keep the slide in the center of the screen. To keep the slide centered in the container when the user resizes the window, I used the resize event listener, which can cause performance issues. To prevent that I used debounce function. Debouncing is a performance enhancement technique that is widely used to manage function execution rates. To make slider accessible I followed W3C WAI instructions. In short - there's liveregion container with aria-live and aria-atomic attributes that announce which item is currently visible every time slide has changed, and each slide apart from current one is hidden with aria-hidden attribute. Slider can be controled with the arrow keys. Slider can be controlled using the arrow keys as well as by dragging (click or touch screen and drag slide).
💡Here's some new things I used or learned:
- Used clamp calculator to find a
clamp() preferred value expression to perfectly tween a minimum and maximum value between two viewport sizes.
- Followed W3C Web Accessibility guidelines to make accessible slider
- Implemented JavaScript Debouning function for resize event listener - Debouncing is a performance enhancement technique that is widely used to manage function execution rates.
- Learned CSS Grid. Grid is a powerful tool for creating two-dimensional layouts on the web.
- I used simple pseudo-content trick to make entire item clickable for these colorfull tiles.
- Learned about
:has() 'parent' selector with some extra superpowers and used it to style an element based on whether one of its children has :focus-active. "focus-visible-within", a pseudo-class that doesn't exist
🛠️Build with: (can be found also in my others projects)
- 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.
- Sass file structure called 7-1 Pattern. It offers great way to modularize Sass file structure and help keep things easier to maintain. It's all about having everything in order so it is easier to work with code.
- Reduced browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on by using CSS Reset by Andy Bell
- 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.
- mobile-first approach. It is one of the best strategies to create either a responsive or adaptive design. Started with the smallest mobile screen and worked my way up.
:focus-visible pseudo-class to increase usability for sighted users who use keyboard navigation. The :focus-visible pseudo-class is a native CSS way to style elements that are in focus but only applies when you actually want a visual indicator to help the user see where the focus is.- Instead of repeating code for reusable elements I write some helper classes to reuse them throughout the project. I created reusable classes for headings, paragraphs or containers. This saves time as well as unnecessary code repetition. I will definitely try to improve in this aspect.
❓Questions:
- Even though I followed the guidelines to create an accessible slider I am not sure if this is correct since there were few Incompatibilities. E.g. in guideline author focus the selected carousel item by setting its tabindex attribute to -1 but only on navigation buttons, if user change slide with control buttons (like in my solution) it wasn't the case.
- I added an event listener to the document to listen to keydown to change slides. It seems to me that listening to the entire page whether the user pressed a button to control the slider is not the best solution.
- Any suggestions on how I can improve are welcome!
