All solutions

What challenges did you encounter, and how did you overcome them?

Hello! 👋

That was another entertaining challenge in which I learned a lot of new things! Right from the start I decided it would be a great idea to use GSAP library to create a parallax effect for sections, rather than creating subpages. Each section has tabs through which user can display new content. New content is dynamically added in JavaScript so I needed find a way to prevent images from loading each time tab has changed. For this purpose I used the Intersection Observer API which helps me detect visibility of a section that appears in the user's viewport. When this happens the preloadImages() function is called and creates new HTMLImageElement instance with Image() constructor to which I attach the src of each image from the section. In the "crew" and "technology" sections, the user can change tabs and content by moving the mouse/touch horizontally. Since the page has a lot of animations ScrollTrigger animations using GSAP are disabled for users who have set prefers-reduced-motion. Learned how to share variables between JavaScript and Sass since I needed to use media query breakpoint variable value for matchMedia but I didn't want to do it with copy and paste. I found a way to synchronize my css and js so that my CSS is the source of truth and share values with JavaScript. I used CSS Modules for this purpose. CSS Modules with ICSS specification introduces the :export directive to act as a way to export defined values. Coupled with Sass variables, it allows you to export them.

🐞Bugs:

• Unfortunately, when creating the effect of moving sections using position: sticky and GSAP, there are several bugs that I cannot eliminate at the moment. When a user uses the keyboard to navigate a page, the viewport often does not show the active element. The second mistake is responsiveness. On some small screens (in terms of height), sections are cropped and navigation does not lead to the appropriate section. If I find a way to eliminate these bugs and maintain the animations, I will update the project but for now I'm satisfied with how it looks and what I achieve creating this.

💡Here's some new things I used or learned:

• Share variables between JS and Sass - A way to synchronize CSS and JavaScript so that CSS is the source of truth and share values/variables with JavaScript.
• Intersection Observer API - Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
• preload images in JS - Preload lets you tell the browser about critical resources that you want to load.
• prefers-reduced-motion - The prefers-reduced-motion is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.

🛠️Build with: (can be found also in my others projects)

• GSAP library - GSAP is a JavaScript library for building high-performance animations that work in every major browser.
• 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!

What challenges did you encounter, and how did you overcome them?

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!

What challenges did you encounter, and how did you overcome them?

Hello! 👋

This project was nothing but fun! I found many challenges in this project, such as creating a two-page website, using external Leaflet library to display the map or trying GSAP library to make scroll animations (this project turned out to be a great place to do it!). By using the Leaflet and GSAP libraries, I had to learn and use JavaScript bundler. Originally I created the project using Webpack to bundle my JavaScript files. But while reading more about diffrent bundlers or tools I wanted to check what the working process with other ones looks like. I switched Webpack with Vite (you can check #1 PR in github). Surprisingly there weren't many problems when changing. The Vite is simple to configure, which is minimal.

Instead of adding a container to each section that limits our content to a certain width and positions it in the middle of the screen, leaving us the option for the parent element to still have the value of the entire width of the page if we wanted to add a background or photo, I used CSS layout grid breakouts, which gets rid of redundant unnecessary containers by defining the grid and its columns template for main grid-container.

ScrollTrigger animations using GSAP are disabled for users who have set prefers-reduced-motion. Additionally, I created a fallback if javascript was not loaded so that the "initial settings" of the animation would not be loaded. Animations are disabled on mobile devices. A similar fallback has been added for the Leaflet #map container. If javascript does not load, the container will not be displayed at all so as not to leave empty space on the page.

I added skip-to-content links, even though they weren't really needed in this case, I happened to see an article about them so I decided to use them.

💡Here's some new things I used or learned:

• GSAP library - GSAP is a JavaScript library for building high-performance animations that work in every major browser.
• Leaflet library - Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
• Font Awesome - Font Awesome is the icon library and toolkit.
• Webpack - Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
• 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.
• CSS layout grid breakouts - Page layout structure using CSS Grid to get rid of redundant unnecessary containers.
• prefers-reduced-motion - The prefers-reduced-motion is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.
• skip-to-content link - Skip links are little internal navigation links that help users move around a page. They’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.

🛠️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.
• CSS Grid. Grid is a powerful tool for creating two-dimensional layouts on the web.

❓Questions:

• Any suggestions on how I can improve are welcome!

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!

Hello! 👋

The design of this project caught my attention, so I decided to do it. It was a great opportunity to learn Sass CSS pre-processor and implement it into this project. I tried to create accessible mobile navigation by following Web Accessibility Guidelines. Just like in other recent projects i used mobile-first approach.

💡Here's some new things I used or learned:

• Learned 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.
• Used 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.
• Followed Web Accessibility Guidelines v1.0 to make accessible mobile navigation
• Used CSS Counters to automatically number the articles in trending section. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists.

🛠️Build with: (can be found also in my others projects)

• I used simple container as a proxy JavaScript technique to make entire container clickable in situations where container acts like illustrated introduction to article and it has a link inside (see articles or trending sections). One drawback was that by creating the entire container clickable, user will not be able to select anything.To allow selecting I detected how long the user is taking between mousedown and mouseup events and suppress the clicking event if user is likely to be selecting text.
• CSS backdrop-filter property for overlay when the modal pops up. The backdrop-filter property is used to apply a graphical effect to the area behind an element. I used it to blur the page behind my overlay.
• <picture> HTML element for responsive images. That is images that work well on devices with widely differing screen size. HTML provides us with elements to display identical image content, just larger or smaller depending on the device. This helps to improve performance across different devices.
• 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:

• No specific questions. Any suggestions on how I can improve are welcome!

Hello!

I chose this challenge to start playing with JavaScript as well as test my skills with basic form structure, validation, and submission. Poping modal with message was great oportunity to work with DOM manipulation. I tried to make the entire component accessible. The biggest challenge was to create an accessible form validation with poping error message as well as an accessible modal dialog for success message.

Here's some things I used or learned:

• Implemented CSS backdrop-filter property for overlay when the modal pops up. The backdrop-filter property is used to apply a graphical effect to the area behind an element. I used it to blur the page behind my overlay.
• Tried to make accessible form validation aswell as accessible modal dialog by using appropriate attributes and structure either on my form or modal.
• Used <picture> HTML element for responsive images. That is images that work well on devices with widely differing screen size. HTML provides us with elements to display identical image content, just larger or smaller depending on the device. This helps to improve performance across different devices.
• 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
• Arranged my code with 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.
• I went down the road with 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.
• Used :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:

• No specific question but any input on form accesibility aswell as modal accessibility would be welcome.

Any suggestions on how I can improve are welcome!

Hello!

This time I decided to challenge myself and create a landing page. I found typemaster design to be a good practice for mobile first approach, html landmarks and flexbox. Additionally, there was some work with ::before and ::after pseudo-classes to create some decorative elements. Finally, some practice with positioning images.

Here's some things I used or learned:

• I learned and implemented responsive images. That is images that work well on devices with widely differing screen size. HTML provides us with elements to display identical image content, just larger or smaller depending on the device. This helps to improve performance across different devices.
• 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
• I arranged my code with 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.
• I went down the road with 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.
• To make my component more accessible I used :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.
• I found small trick to make my heading in .feature section to wrap after one word to match design. You can do it using span and make it display: block or you can use 
 character entity reference in your HTML code with white-space: pre-line css. It will cause text to wrap Text on line break.

Questions:

• Since the <section> element only becomes a landmark when it has been given an accessible name using aria-labelledby or aria-label my question is should I keep aria-labelledby or use aria-label when sections have heading within that is not very detailed/descriptive. To me headings in this project doesn't tell what kind of content is within that landmarks. Take a look at .kv or .product section.
• This question is related to previous one. Since my .features section doesn't have heading element, should I stick with aria-label for that section or should I add heading element, and hide it with .sr-only class so I can use aria-labelledby. Which one would be better practice?

Any suggestions on how I can improve are welcome!

Hello!

I build this results component starting with a 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.

To make my component more accessible I used :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. Read more about :focus-visible

Learned and implemented Modern CSS reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. Modern CSS reset by Andy Bell

This is another project in which I used the BEM (Block, Element, Modifier) methodology, which is a popular naming convention for classes in HTML and CSS. You can read more about that in my previous challenges. You can learn more about BEM here.

No specific questions here, but any suggestions on how I can improve are welcome!

Hello!

This time I used the 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. You can learn more about BEM here.

Since my card is just illustrated introduction to some blog post I made the entire blog card clickable, not just an anchor. I did this with a simple JavaScript technique and used the card container as a proxy for the link. Then detected how long the user is taking between mousedown and mouseup and suppress the clicking event if user is likely to be selecting text. There's a few ways to make whole card clickable, but each method have it's own pros and cons. There is also an aspect of accessibility - Read more about inclusive card components

No specific questions, but feedback or a criticism will be appreciated!

Hello! It's nice to come back here after a few years. Time to refresh some knowledge! No specific questions, but feedback or a criticism will be appreciated!

Hello👋!

This is an invoicing application build with ReactJS and styled-components. The application is used to manage invoices and allows the user to create, read, update, filter by status and delete invoices. There is an option in the app to switch between a dark and a light theme. All transitions are smoothly displayed by using Framer Motion library to create animations. It was by far the largest and most comprehensive project I have done so far. It showed me how important it is to plan so that you don't have to change things that previously worked well in the middle of the project. A valuable lesson!

• The first time I used useReducer hook to manage application state. I noticed that my state logic getting more complex as the few elements of my state relies on the value of another element of my state. Read More
• Together with useReducer, the useContext hook turned out to be handy. It allowed me to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level which in turn allowed me to avoid Prop drilling (also called "threading") that is the process you have to go through to get data to parts of the React Component tree. Read More(1). Read More(2)
• In order to create a theme switcher and provide colors for components I used styled-components <ThemeProvider> wrapper component. By leveraging the theme provider I only need to write my styles in one single object and invoke them in any component that is a descendant of that provider. Read More
• When creating the form I learned what Controlled Component is. In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(). Then the React component that renders a form also controls what happens in that form on subsequent user input. Read More
• To make application more ADA compliant (which means the website should be entirely accessible using just keyboard) I prevent focus go outside the modal once the modal is opened. In this case, the focus trap turns on when the form or modal with invoice deletion/status change is opened. In order to create an accessible modal I followed this great tutorial that follow the WAI-ARIA Practices.
• To animate the pages transitions and modals I used Framer Motion API. Framer Motion is an open source, production-ready library that's designed for creating creative animations. In order to support users who have enabled their device’s Reduced Motion setting and make accessible animations I used useReducedMotion hook. Based on whether useReducedMotion returns true or not we're passing different values to animate. That replace position transitions with opacity. Read More(1). Read More(2)
• Handle 404 routes in React Router and provide a fallback component for displaying an imfamous 404 Page Not Found error to the user. Try to enter a page that doesn't exist - like 'invoice-tediko.netlify.app/gotcha'

You can find more about the things I used in the project in the README on github. I just wanted to point out most important things here.

Questions:

1. As I am changing the theme and many colors are changing, I wasn't sure how to make the color system. I end up with object for dark/light theme with colors of each element and a few colors that are common. How would you approach that?
2. I didn't want to create a special component for my headings since they have no logic. I created helper utility called typographyStyles where I put all styles that I use across application. Not sure about that tho.
3. I am curious what method you use to name your components. I personally stick to option #2 because it has the most pros for me and a little longer import doesn't bother me.

Bugs:

1. Clicking twice quickly on header logo (navigate to home page, which render Invoices component) causes component not to render. I am convinced that this is related to Framer Motion and AnimatePresence that allows components to animate out when they're removed from the React tree. I think build in isPresent state when clicking twice quickly didn't change the state. I overcame this problem with simple event.preventDefault() with a setTimeout function but..

Additional feedback or a criticism will be appreciated Thanks! 😁!

Hello👋!

This is my second project build with React JS. This time I had the opportunity to try styled-components. It is a very powerful tool, but I believe it takes time to learn good practices and organize the code. Right now, I have the feeling that my styles are chaotic but I'm looking forward to correct it and use styled-components to its full potential. In order not to stick to design, I decided to recreate the animated solar system as the home page. Additionally, I added transitions while the route change.

• I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2)
• I tried to write a project using styled-components library. Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page. Also allows you to write plain CSS in your components without worrying about class name collisions. Read More
• The first time I used Prettier. Prettier is an opinionated code formatter. It removes all original styling and ensures that all outputted code conforms to a consistent style. Read More
• To animate the pages transitions and mobile-menu animations I used Framer Motion API. Framer Motion is an open source, production-ready library that's designed for creating creative animations. Read More
• The solar system was recreated from this great Codepen created by Malik Dellidj. It's nothing complicated, it's all based on div rotation with pseudo-elements inside that contains the images of the planets. I recommend you try it yourself!
• Added counter() function for my pseudo-elements content in Tab button. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
• Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

Additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Hello👋!

This is my 30th solution on Frontend Mentor! 🥳 The project was made using ReactJS which I just started to learn. I've always liked breaking my code into modules or parts so I instantly liked building my app using components that manage their own state. I also enjoyed writing JSX syntax which makes the code very readable and transparent. The fact that rendering logic, functionality is inherently coupled with UI logic is awesome. I look forward to learn more about React because many of its benefits can be seen at first glance. List of things I learned or used creating this project:

• I used ReactJS library to create an app. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Read More(1) - Watch tutorial(2).
• Implemented defer to my script tag. The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script is fetched asynchronously, and it’s executed only after the HTML parsing is done. Read More
• Prevented body scrolling on iOS while the mobile menu is open. So far I was using helper class with overflow: hidden on the <body> element to prevent scrolling. But unfortunately, that does not work on iOS. (It does work when nav is on top of the window whole time but it doesn't when we add position: fixed to it when we want our nav to be always on top of our viewport). I use position: fixed on body in combination with storing the scroll position of the user so we can restore the scroll position after the fact. Read More

In this project I also added touch-enabled mobile navigation, accessibility skip to content link, sticky nav menu using Intersection Observer API and others. You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

I would like to thank @ApplePieGiraffe for giving me great resources about React and also @brasspetals for sending me good article about how to section your HTML. During the course of the project, I noticed how much I could use a code formatter like a prettier. I will definitely start using it in the next project, if you have any tips about it, please. Any good resources about react files architecture? Additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Hello👋!

It seemed to be very easy challenge at first sight but it took me some time to properly align mockups background-image with ilustrations images to look good across different resolutions. In addition, I created a carousel from scratch, which also consumed a lot of time. I will not say that I am satisfied with how long it took me to complete this project and the end result, but I want to move on to the next challenge. List of things I learned or used creating this project:

• Added counter() function for my pseudo-elements content in about__features. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Watch video(1). Read More(2)
• Used inset CSS property to position some of my pseudo-elements. It is a shorthand that corresponds to the top, right, bottom, and left properties. It has the same multi-value syntax of the margin shorthand.
• For hover effect on navigation links I used mask-image property. A mask in CSS hides part of the element is applied to. Read More
• Added touch-enabled mobile navigation. It's hard to reach for the hamburger menu on larger phones so I added a menu that is enabled by touchmove feature. Swipe from left to right to open menu on mobiles. Read more about touch-events.
• Implemented Skip to content link. Skip links are little internal navigation links that help users move around a page. It is used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first. Read more about skip-to-content links.
• Added sticky nav menu using Intersection Observer API. In short, this API is a native way of detecting if an object has entered the viewport. My observer looking at .kv section, and if that section is no longer interacting with viewport it triggers my header to appear. Read more about Intersection Observer.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

No specific questions here but any additional feedback or a criticism will be appreciated! 😅

Thanks! 😁

Hello👋!

It was one of the most enjoyable challenges I have done so far. When I saw that challenge requires a change theme I decided to add another functionality which is extra "custom" theme where the user can edit freely colors in theme modal. Many times, when I finished a certain function, I had an idea with another one, and I had a lot of fun doing it. Honestly, It took me more time to made this custom modal than the calculator itself - which itself was a good javascript challenge as well. You can use both the keyboard and the mouse to enter data into the calculator. List of things I learned or used creating this project:

• Added customizable settings for 4th theme. User selected colors are saved in Local Storage so the settings are saved and loaded when the user will come back to the site. The user can set 13 options, but he doesn't have to change all of them, he can only change those that interest him. To get the color from user I used vanilla-picker library which creates a color palette from which to choose. Palette always show current set color of element you want to change so it is easy to adjust colors back and forth without searching for that color again.
• Added prefers-color-scheme CSS media feature which is used to detect if the user has requested a light or dark color theme and save it to Local Storage. I made it with window interface matchMedia() method. It returns a new MediaQueryList object that can then be used to determine if the document matches the media query string. In this case prefers-color-scheme. Read more(1). How to detect user prefered theme in JS(2).
• Implemented focus trap inside modal to make it ADA compliant. Focus trap in short prevent our focus go outside the modal once the modal is opened. Read more.
• While displaying the result, I used toLocaleString() method to return a string with a language-sensitive representation of this number. In short it convert 3500 to 3,500 if in U.S. Read more.
• I tried to make my comments more readable and transparent. For this purpose, I used JavaScript description comments which are equivalent to Python docstring. If you precede your function definitions with a description comment, VSCode will pick it up and include it as a tooltip. It’s like having MDN right there in your editor. Read more.
• I used object literals instead of if statement in several cases. Shortly, we have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the argument passed in. This looks clean and I will definitely continue to use this. Read More.
• Of the things that are invisible at first glance, the calculator returns a error message after the user divides by zero and also after you calculate one result you can click/input equal button again and it will perform same operation again. For example 2+2=4 and another click will be 6 since result our previous equation was 4 and our last input was 2 so 4+2=6.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

Special thanks to @brasspetals for tossing an idea with the focus trap which she used in her project. No specific questions here but any additional feedback will be appreciated! Let me know if you spot any bugs. I know they're hiding somewhere! 😅

Thanks! 😁

Hello👋!

That was a relatively simple challenge but still there was a room to try some new things and learn new approaches. The hardest thing to do was setting these mockups backgrounds and to fit it with design. List of things I learned or used creating this project:

• Added touch-enabled mobile navigation. It's hard to reach for the hamburger menu on larger phones so I added a menu that is enabled by touchmove feature. Swipe from left to right to open menu on mobiles. Read more about touch-events.
• Implemented Skip to content link. Skip links are little internal navigation links that help users move around a page. It is used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first. Read more about skip-to-content links.
• Applied load events to prevent animating content before assets has downloaded. In short it is using JavaScript to listen for a load event, and make use animation-play-state to pause our animations until the assets has downloaded. This one I found in Anna solution, so special thanks to her. Read more about load-events
• Instead of repeat code for reusable elements i write some helper classes to reuse them throughout the project. I created classes for headings, paragraphs, container. This saves time as well as unnecessary code repetition. I will definitely try to improve in this aspect.
• Added sticky nav menu using Intersection Observer API. In short, this API is a native way of detecting if an object has entered the viewport. My observer looking at .kv section, and if that section is no longer interacting with viewport it triggers my header to appear. Read more about Intersection Observer.
• I used Sass at-rules @for which is a simple for loop to transition my header__nav-item's while my mobile menu is open. Read more about @for

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

I think I need to work more on my BEM and also Sass. I should nest more instead of adding classes for every element. I know I am writing too much code and can be optimized further. No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

Im surprised how much I learned from a seemingly easy challenge. I ran into problems with CORS on firefox and lost a lot of time trying to figure it out. Hopefully I found solution. List of things I learned or used creating this project:

• This is first time I used webpack. And more specifically I used laravel mix which is a wrapper for webpack and targets the 80% usecase. I didn't realize how powerful tool it is. LINK
• Implement an environment variable (link) for my API_KEY. This is a variable whose value is set outside the program to secure our sensitive data. I did it with serverless Lambda function on netlify, so my API_KEY never shows up in my code and no one will steal it. Tutorial
• This is first time I used object literals (link) instead of if statement in Tracker.changeContent function. Shortly, we have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the argument passed in. This looks clean and I will definitely continue to use this.
• Added aria-live="polite" and aria-atomic="true" to my .tracker__results-wrapper element to expose dynamic content changes in a way that can be announced by assistive technologies after my results inner elements change content.
• I didn't like that results container with address informations cover the map and user can't do anything with that. Added button to hide that container. More useful on mobile tho.

Errors that I encountered:

• The problem I talked about is only on Firefox. Console throws an CORS error -> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. It turned out that after the recent firefox update you cannot fetch data between different origins. The fix is to send request to a proxy. A proxy acts as an intermediary between a client and server. The proxy server operates in between the frontend web app making the request, and the server that responds with data. Simply add https://cors.bridged.cc/ to any URL you’re fetching from or use cors-anywhere. Read about this CORS error. Since i work with serverless function on netlify i didn't have to put this in my fetch, because netlify fetching that data for me. But i think that info will be helpful for others.
• Since we're using proxy, we have to somehow get user IP if we want to display user info on init. That is because geo api will return proxy ip address on default. I use cloudflare trace utility to work around this problem. It retunrs a plain-text set of key/value pairs.

Special thanks to @brasspetals for total help, @mattstuddert for helping with these CORS problems and @grace-snow for for throwing the link with object literals on slack. No specific questions here but any additional feedback will be appreciated! Thanks! 😁

Hello👋!

Damn! It was really tough challenge. This was my second time i tried to finish it, this time successfully. This is few things I used while creating this project:

• Used backface-visibility property. This property defines whether or not the back face of an element should be visible when facing the user. So when i rotate my cards, back of them isn't visible to the user so I can create this nice flip animation.
• Added .sr-only element to announce countdown time to screen readers. Also used aria-live="polite" attribute to expose dynamic content changes in a way that can be announced by assistive technologies after every minute of countdown.
• For interactive elements like socials icons i used :focus-visible pseudo class (spec). This selector indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
• Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. I used it in my resets so every element with animation apply to that.
• I didn't like flip animation when these "holes" on card were done with before/after elements. Instead i created svg-backgrounds for cards and this way card animation also contains these holes - I think it looks way better.
• Hats off to Wes Bos, I found his countdown timer tutorial and it was really helpfull to understand how countdown should work. Even tho it was just tip of the iceberg when it comes to JS in this project i think it was very helpful to understand how countdown timer should work.

I ran into a problem with safari where my card flip was looking good both on firefox and chrome, but on safari there was a weird bug where two my animated cards was shown at once. I struggled with if for two days but turned out that I have to use backface-visibility on two rotated cards instead just on one. It seems like safari ignores my z-indexes in this case, and firefox/chrome doesn't - but working good now.

No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

I have to admit that the challenge was more difficult than I thought but it was fun to get throught the problems I faced. Here are few new things that i was able to bring in into my project:

• :focus-visible pseudo class (spec). This selector should now only indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
• This is first time i used @extend rule. Since my modifier classes kv__hero-bg--1/2/3 all uses styles from kv__hero-bg. I extend this class and it allowed me to remove unnecessary class from HTML code.
• Added sticky nav menu using Intersection Observer API. This time i make it to be just hamburger menu after scroll with background, not sure if it's pretty but i want to have some fun.
• Added backdrop-filter to opacity background when nav mobile is open. It provide effect such as blurring. (no Firefox support yet tho). Thanks to @ApplePieGiraffe. I found it in his solution.
• I experimented with clip-path to create this slide effect on my background slider.
• Added aria-live="polite" to my .kv__intro element to expose dynamic content changes in a way that can be announced by assistive technologies after my slider change content within that element. This one is from @Matt.
• Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief.

Again thanks for @grace-snow for helping me. No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

That was a simple and fun challenge, although there was room to try new things and learn something new.

• Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief. Spotted at @brasspetals solution 😅
• Added lazy load animations for cards. I did it with Intersection Observer API.
• Added sticky nav menu also using Intersection Observer API.
• Tried to create more accessible mobile navigation. Used the aria-expanded and aria-controls attributes.
• As for the Sass part. In the project i used @use since it's recommended to using this instead of @import Kevin Powell video about it. Thanks to @RayaneBengaoui i saw his comment about this.

Thanks for @grace-snow for helping me with keyboard navigation. Since i change visible order of .creations I had to create other button to prevent firstly tab on last element and only then on first. No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

It's been a while since I put on the last challenge. I had to take a break but I hope my code isn't rusty after this time. The challenge was fun and I decided to have a little fun with additional options such as:

• Todos and theme are stored in Local Storage.
• Drag and drop to reorder items using library Sortable.js. Reordered items are also stored in Local Storage.
• When the list is empty, or there is nothing to display in the "Completed" tab, I was missing the information that there was nothing to display. I added it.
• I created a toast notification pop up in various events. (Adding todo / incorrectly entered input / Removing todo / clearing all.)

No specific questions here but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

I ended up placing waves backgrounds in HTML. I tried with pseudo elements but because bg image was stretching, position of backgrounds also was changing and i couldn't position it like i would like to. I know i could use just background property to put them in, but for first background (wave has transparent background) for about__card when i simply put it as background the image and position it on top of that container background has same color as image, so it isn't visible. Instead i could place this bg on .stats container and make it background-position: bottom but i didn't want to put background of one section in other section css. No specific questions but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

No specific questions but any additional feedback will be appreciated!

Thanks! 😁

Hello👋!

It took me a while to complete this challenge. This time for icons I used icomoon app and I find it very easy and nice to use! Files and styles for icons are in vendors/_icomoon. No specific questions here but any additional feedback will be appreciated!

Thanks! 😁