Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

tediko

@tedikotediko
6,370Points

Iโ€™m a mysterious individual who has yet to fill out my bio. One thingโ€™s for certain: I love writing front-end code!

Latest Solutions

  • Desktop design screenshot for the Invoice app coding challenge

    Invoice App - ReactJS, Styled-Components, Framer Motion, Webpack

    • HTML
    • CSS
    • JS
    8
    tediko6,370
    Submitted

    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! ๐Ÿ˜!

  • Desktop design screenshot for the Planets fact site coding challenge

    Planets - ReactJS, Styled-Components, Framer Motion, Webpack

    • HTML
    • CSS
    • JS
    21
    tediko6,370
    Submitted

    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! ๐Ÿ˜

  • Desktop design screenshot for the Bookmark landing page coding challenge

    Bookmark - ReactJS, Webpack, Sass, BEM, Mobile first, IO API

    • HTML
    • CSS
    • JS
    11
    tediko6,370
    Submitted

    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! ๐Ÿ˜

  • Desktop design screenshot for the Manage landing page coding challenge

    Manage - Mobile first, Sass, BEM, Intersection Observer API, Webpack

    • HTML
    • CSS
    • JS
    7
    tediko6,370
    Submitted

    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! ๐Ÿ˜

  • Desktop design screenshot for the Calculator app coding challenge

    Calculator - Mobile first, Sass, BEM, Webpack, vanilla-picker

    • HTML
    • CSS
    • JS
    33
    tediko6,370
    Submitted

    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! ๐Ÿ˜

  • Desktop design screenshot for the Easybank landing page coding challenge

    Easybank - Mobile first, Sass, BEM, Intersection Observer API, Webpack

    • HTML
    • CSS
    • JS
    11
    tediko6,370
    Submitted

    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! ๐Ÿ˜

Latest Comments

  • Solution screenshot
    • HTML
    • CSS
    • JS
    • API

    github user search - react , sass theming

    9
    tediko6,370โ€‚|โ€‚Posted 9 months agocommented on Chamu's "GitHub user search app" solution

    Hello, Chamu! ๐Ÿ‘‹

    Congrats on finishing another challenge! ๐ŸŽ‰ Your solution looks very good and also responds well. Here's some feedback:

    1. You left a lot of console.log methods in your code. Get rid of this as it makes the code harder to read.
    2. A common convention which is widely followed is that component should follow PascalCase naming convention. The name of the folder/filename will always reflect what is present in that file that's why it is good to also use PascalCase for them, not only function within that file. e.g. (Header/Header.js)
    3. You should avoid using document.querySelector with React. There is only few cases (sometimes there is still a need for manipulating elements directly) where it can be useful but in most cases there is better way to approach that. Instead you can use useRef() hook. Refs are more reliable for getting the specific DOM node you care about. document.querySelector can give unexpected results if there are multiple elements that match the query and if you're writing a component that will show up multiple times in many places this problem will occur, that's why refs become more of a clear-cut winner.
    4. Take a look at themeControl function in header.js component. You used document.querySelector for three elements which is completely unnecessary. As you know React provides a way to inject javascript right into our HTML using something called JSX interpolation. So instead of taking element from DOM with querySelector and then inject some data with .innerHTML or .src methods you should simply create a expression inside your HTML elemetns like so:
    /* If theme is true return "Dark" if not return "Light". */
    <span className="mode__state">{theme ? "Dark" : "Light"}</span>
    
    /* If theme is true return Moon element if not return Sun element. */
    <img className="mode__img" src={theme ? Moon : Sun} alt="" />
    
    • To completely get rid of querySelector from this function we can use document.body property. It represents the <body> node of the current document. Along with this, I used conditional (ternary) operator to either add or remove theme-dark class. Now themeControl() look like this:
     const themeControl = () => {
        theme
          ? document.body.classList.add("theme-dark")
          : document.body.classList.remove("theme-dark");
      };
    
    • Now you can remove themeControl() call from handleClick since you want this to perform everytime your theme change. For this purpose in useEffect with themeControl function, add theme to dependency array. The dependency array in useEffect lets you specify the conditions to trigger it. So in our case we'll watch for every theme change and trigger useEffect only when that value change, like so:
    useEffect(() => {
        themeControl();
    }, [theme]);
    
    1. I made a small refactor of your localStorage save option in header.js. In functional programming it is good to break up your code into small reusable functions. For this, we will create two functions, one to save data to localStorage and one for retrieving that data.
    • Let's start with postThemeToLocalStorage function where we will set our newTheme value to globalTheme key. Note we don't need to include the window property. You can access built-in properties of the window object without having to type window. prefix. The window object is the top-level object of the object hierarchy. As such, whenever an object method or property is referenced in a script without the object name and dot prefix it is assumed by JavaScript to be a member of the window object. So our function will look like this:
    const postThemeToLocalStorage = (newTheme) => {
    	localStorage.setItem("globalTheme", newTheme);
    };
    
    • Then let's create getThemeFromLocalStorage function where we want to return our globalTheme key value from localStorage. You don't need to use JSON.parse() method since our value from localStorage is a string, not an object. As the localStorage value cannot be saved as boolean we want to simply convert it. For this, we make a simple comparison, to return either true or false but as boolean values, like so:
    const getThemeFromLocalStorage = () => {
        return localStorage.getItem("globalTheme") === "true";
    };
    
    • Now, we have to clean up the code a little since we have a few unnecessary things here. Remove localStorage and savedTheme variables. Then, in handleClick function, instead of manually save our data to localStorage, use postThemeToLocalStorage(!theme). Then, add useEffect hook, that will only trigger on render (by providing empty dependency array) and save our theme from localStorage to theme state, like so:
    useEffect(() => {
        setTheme(getThemeFromLocalStorage());
    }, []);
    
    • Finally, we have to assign a starting value for our theme state. Since you don't use anything like prefers-color-scheme to detect if the user has requested a light or dark color theme, we assign theme to be false (light theme) - const [theme, setTheme] = useState(false). Previously, when your localStorage was empty you got null value from storage. null is a falsy value so it still works, but we want to avoid such cases.

    I'll send you my copy of header.js on slack just if I forgot to include here something. Good luck with that, have fun coding! ๐Ÿ’ช

    1
  • Solution screenshot
    • HTML
    • CSS

    Social proof section | grid, scss

    5
    tediko6,370โ€‚|โ€‚Posted 9 months agocommented on Gutka's "Social proof section" solution

    Hello, Gutka! ๐Ÿ‘‹

    Congrats on finishing another challenge! ๐ŸŽ‰ Your solution looks good. Here's my few tips:

    • Less breakpoints doesn't necessary means better. Now, your solution isn't fully responsible. It does look good on mobile and on larger desktops but everything inbetween does look like mobile and it isn't good. Here is my old solution to this challenge just to illustrate you how it can behave across screen sizes.
    • You repeat your HTML code with star images which is unnecessary. Find the way to use only one star image. You can do it easily by using background-repeat approach in your css. To do this you'll have to create empty div and remove all img's.

    Good luck with that, have fun coding! ๐Ÿ’ช

    2
  • Solution screenshot
    • HTML
    • CSS

    Stats preview card component solution with Grid and Flexbox

    1
    tediko6,370โ€‚|โ€‚Posted 9 months agocommented on Maja's "Stats preview card component" solution

    Hello, Maja! ๐Ÿ‘‹

    Congrats on finishing another challenge! ๐ŸŽ‰ Your solution looks good. Here's my few tips:

    • Use unordered list <ul> for .stats. HTML lists are used to present list of information in well formed and semantic way.
    • To get closer to design use mix-blend-mode: multiply with opacity: 0.75 on your .overlay container. The mix-blend-mode sets how an element's content should blend with the content of the element's parent and the element's background.
    • Use Responsive Design Mode to see how your website behaves on different devices. To toggle it press CTRL+SHIFT+M on Firefox, and CTRL+SHIFT+C on Chrome. On mobile resolution (375px) it doesn't seems good. Change padding-left and padding-right to 20px on mobile.
    • Your .attribution overflow content on mobile resolutions.
    • Also on mobile change height of .image to 240px to make it a bit smaller.

    Good luck with that, have fun coding! ๐Ÿ’ช

    0
  • Solution screenshot
    • HTML
    • CSS
    • JS

    Loopstudios landing page BEM SASS

    3
    tediko6,370โ€‚|โ€‚Posted 9 months agocommented on E_X_E's "Loopstudios landing page" solution

    Hello, E_X_E! ๐Ÿ‘‹

    Good effort on this challenge! ๐ŸŽ‰ Everything works good and responds well. Take a look at:

    • Add :focus pseudo class to interactive elements like anchors, buttons etc. Use outline property to make your website more accessible to keyboard users. Focusable elements like anchor, buttons or inputs they have applied default :focus pseudo class with outline property. These default styles are subtle and hardly visible tho. Furthermore every browser has a slightly different default style for the outline, so you probably want to change the default style. Read more about why we should change focus styles.
    • Change the alt attribute for the .card__img, as it doesn't add any extra context for screen reader users. Since your image is decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
    • I'd also change the alt attribute for header__link logo. "logo" is not descriptive, and since you wrap your image with anchor tag and it direct to home page maybe change alternative text to "Loopstudios - home page".

    Good luck with that, have fun coding! ๐Ÿ’ช

    0
  • Solution screenshot
    • HTML
    • CSS

    Responsive single price page with Sass

    2
    tediko6,370โ€‚|โ€‚Posted 10 months agocommented on Caique Carvalho da Silva's "Single price grid component" solution

    Hello, Caique Carvalho da Silva! ๐Ÿ‘‹

    Good job on this one! ๐ŸŽ‰ Your solution responds well and overall looks good. Here's my suggestions:

    • The div element has no special meaning at all. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors. For .header-title use heading <h1> - <h6> element. For .header-subtitle you can use paragraph <p> element. This also applies to text in other sections.
    • On mobile resolution add width: 100% to .main-container and remove max-width: 400px so your container will stretch across different screen sizes. Keep max-width: 660px on 660px media query to prevent it for stretching too much.
    • Use unordered list <ul> for .reasons-list. HTML lists are used to present list of information in well formed and semantic way.

    Good luck with that, have fun coding! ๐Ÿ’ช

    1