Jakub Strzyżykowski

Latest comments

• 

  P

  yk-david•70

  @yk-davidSubmitted about 1 month ago

  What are you most proud of, and what would you do differently next time?

  Building this preview card component in react was quite a challenge, but I could end up with mostly satisfied result. Next time, I would try to build it in vanilla html and css.

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

  As the screen size gets larger or smaller, I need to choose accordingly the size of product photo (two different sizes). For this, I implemented some state logic to detect the viewport size and then choose the appropriate sized photo, but I didn't work.

  What specific areas of your project would you like help with?

  I need help in product photo area with react state logic. Why doesn't product photo get replaced as screen gets larger?

  

  Product preview card component with react

  #react

  1

  10
  

  P

  Jakub Strzyżykowski•260

  @jstrzyzykowskiPosted about 1 month ago

  Hello!

  Great job and as you said, it is good point to try it in vanilla as well depending on what is your focus in learning.

  Regarding switching image issue:

  Instead of current toggleIsDesktop implementation, we need to add event listener to check that resize occurs.

  Working scenario can be like this:

  1. Check window width on component mount
  2. Add event listener for window resize
  3. Clean up event listener on component unmount

  Below is an implementation:

  useEffect(() => {
      const checkScreenWidth = () => {
        setIsDesktop(window.innerWidth >= 768);
      };
  
      checkScreenWidth();
      window.addEventListener("resize", checkScreenWidth);
  
      return () => {
        window.removeEventListener("resize", checkScreenWidth);
      };
    }, []);
  

  Keep going!

  Marked as helpful

  1
• 

  P

  Valeria Montoya•400

  @ValeriaMontoyaSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  From this project I've learned how to implement the following with JS:

  • How to use classList.toggle() to show or hide an element by adding or removing a class
  • How to dynamically change the appearance of elements using inline styles

  What specific areas of your project would you like help with?

  I'd like to read your feedback about my JS code, maybe there's something I can improve 🤓

  

  Responsive article preview component

  #bem

  1

  20
  

  P

  Jakub Strzyżykowski•260

  @jstrzyzykowskiPosted about 1 month ago

  Hey!

  Great job! I like the precision with which you have reproduced the design of the card.

  Based on your question regarding JS feedback:

  1. We can put our scripts directly into header section now (check defer and async prop for script tag)

  2. We can add a behaviour where the tooltip goes off when the width of the viewport changes (check resize event)

  Keep going!

  Marked as helpful

  0
• 

  kunal90803•550

  @kunal90803Submitted about 2 months ago

  What specific areas of your project would you like help with?

  Why do I need to zoom out when opening this website on a phone, and how can this issue be fixed? Please If any reader feel any scope of improvements or any flaws .. kindly write it in the feedback so that i can improve that in future 🙂.

  

  Time Tracking Dashboard

  1

  30
  

  P

  Jakub Strzyżykowski•260

  @jstrzyzykowskiPosted about 1 month ago

  Great job!

  Well structured and organized files - solid work.

  Regarding "zoom-out" - there is no one exact line which couse an issue - it is combined by few styles. After all, it is always good to have minimal reset in your global styles like:

  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

  Also regarding Grid, also nice is to leverage minmax with min:

  minmax(min(200px, 100%), 1fr)

  Keep going!

  Marked as helpful

  1
• 

  P

  Carlos Samuel•310

  @CrtykwodSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I'm really proud of learning and implementing BEM methodology in my project. It was my first time using BEM, and I found it really helpful for organizing my CSS classes. Next time, I'd like to continue improving my skills in using BEM methodology and refining my skills in creating more organized and structured CSS classes.

  What specific areas of your project would you like help with?

  I'd love to get feedback on my BEM classes implementation and suggestions for improving the overall structure and organization of my project. Any other tips would be very appreciated!!

  

  Responsive mobile-first Meet landing page using BEM

  #bem

  1

  20
  

  P

  Jakub Strzyżykowski•260

  @jstrzyzykowskiPosted about 2 months ago

  Great job!

  Clear structure with proper BEM usage.

  Regarding BEM - general classes like right/left can be changed for modifier version:

  hero__image hero__image--desktop hero__image--right

  This solves the potential problem of the name being reserved by a very generic class name.

  Keep going!

  0
• 

  kudos2Shef•210

  @kudos2ShefSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  This is my first project using an API with fetch in ReactJS and it's also my first-ever ReactJS challenge. I used fetch to render data, ReactJS functional component for code reusability and useState hook to manage state in this project.

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

  The implementation of functional components in React was challenging for me, as I haven't coded in React this way before.

  What specific areas of your project would you like help with?

  I would appreciate any feedback on my code regarding how I should have approached this challenge in React and what else i can add .

  

  Advice Generation ReactJs

  #react#vite

  2

  20
  

  P

  Jakub Strzyżykowski•260

  @jstrzyzykowskiPosted about 2 months ago

  Good job!

  One small tip:

  • define new local state called "isLoading" as a flag
  • switch this flag each time when your request is pending
  • when "isLoading" is true, you can display some kind of loader on UI

  It will significantly improve user experience 🙂

  Keep going!

  Marked as helpful

  1
• 

  P

  ivanpehar•100

  @ivanpeharSubmitted about 2 months ago

  What are you most proud of, and what would you do differently next time?

  I’m proud of how efficiently I structured the project using BEM methodology and CSS Grid. It really helped keep the code clean and scalable. Next time, I want to refine my approach to positioning background elements.

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

  One of the biggest challenges was correctly positioning the quotation mark background element inside the purple card while keeping it behind the text. I overcame this by using position: absolute along with z-index adjustments. Another challenge was ensuring the correct text colors for white cards, which was fixed by properly applying color styles to all child elements.

  

  Testimonials Grid Section | Built with CSS Grid & BEM Methodology

  #bem

  1

  10
  

  P

  Jakub Strzyżykowski•260

  @jstrzyzykowskiPosted about 2 months ago

  Good job!

  Precise work and proper BEM classes.

  We can reduce some classes by :nth-child().

  Keep going!

  Marked as helpful

  0