Skip to content
OverviewSolutions
13
Comments
45
Michal
@mbart13

All comments

  • Hikmah•1,070
    @HikmahxSubmitted about 3 years ago

    Using this api was a bit tricky. Since I formerly use pure sass, I noticed how much faster it is for me to finish a project when I started using tailwind. Like it's done in less than half of the time I'd normally use. I had a fun time with this project. Let me know if you have any feedbacks. Thank you!

    Rest Countries API with theme switcher (using React and tailwindcss)

    2
    Michal•665
    @mbart13Posted about 3 years ago
    This comment was deleted over 2 years ago
    0
  • Michal•665
    @mbart13Posted about 3 years ago

    why are you adding eventListeners to index.js like it was vanilla javascript? :O

    you never do that in react project, it has its own event

    0
  • Anthony Oyathelemhi•75
    @frontendtonySubmitted about 3 years ago

    Please review on both mobile and desktop and let me know what can be improved on, or added. Better still, add the feedback within the app too, after all it's a feedback app 😀

    To access the app, you have to sign up, but you don't have to use any real details, as long as the email is the correct format it'll work

    React-Powered PWA Product Feedback App

    2
    Michal•665
    @mbart13Posted about 3 years ago

    I managed to log in, even left feedback there :)

    but I'm also getting 406 errors in the console, some request keeps firing

    I'm also not able to upvote comments, getting 409 error

    Marked as helpful
    0
  • PeaNu•90
    @jubeattSubmitted over 3 years ago

    I've written all my processes in the README, you can find many details from there.

    It may need to take some time to read, but I think it's worth it. (Because it really takes me so much time to write😂)

    If you think there is something that can be improved or any suggestions, please feel free to let me know.😃

    It's a long way to go on the front-end, but I will keep going, and I hope you like this work, thanks!😊

    Build by SCSS, BEM, flex-box, grid-box, vanilla JavaScript and jQuery.

    3
    Michal•665
    @mbart13Posted about 3 years ago

    hey, I saw your solution in Matt's newsletter

    thought maybe you could be interested to know that aria-controls are not really recommended anymore https://heydonworks.com/article/aria-controls-is-poop/

    0
  • Fraser Watt•1,790
    @fraserwatSubmitted over 3 years ago

    The accessibility checking says I need to add landmarks to my <section> tags, but I thought semantic HTML acts in place of this?

    Clipboard!!

    1
    Michal•665
    @mbart13Posted over 3 years ago

    all you need to do is to move all sections into main tag, where they belong

    0
  • Michal•665
    @mbart13Posted over 3 years ago

    avoid 1 character variables, it is considered bad practice

    hooks name should start with lowercase

    Marked as helpful
    1
  • Michal•665
    @mbart13Posted over 3 years ago

    I would advice to start thinking about accessibility, because I'm not able to interact with your page using keyboard

    0
  • Alain•205
    @Alain-sysSubmitted over 3 years ago

    Hello everybody,

    I'm glad to present my first project solution on Frontend Mentor.

    Any feedback is welcome and very appreciated !

    Maker pre-launch landing page

    3
    Michal•665
    @mbart13Posted over 3 years ago

    i'd only suggest to turn off html form validation with 'novalidate', since you are doing it with js

    Marked as helpful
    1
  • Michal•665
    @mbart13Posted over 3 years ago

    I wish I knew Redux Toolkit when I was doing this challenge :(

    This is really neat Agata and really like that you stay on top of new trends

    1
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    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! 😁

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

    7
    Michal•665
    @mbart13Posted over 3 years ago

    That's like the ultimate solution to this challenge, no point even attempting

    Thanks! :P

    but seriously, isn't 'defer' implied with modules? I'm not sure we have to add it in 'script' tag

    1
  • Michal•665
    @mbart13Submitted over 3 years ago

    First of all I wanted to appreciate how well the starter files for this project have been prepared. Responsive images, icons and especially big products.json file containing products data with paths to all images. It must have taken a lot of work, so for that big thanks to FM team (not sure who prepared that, would that be Matt or Em)

    And this was such a great challenge. It's like everything I learned during these 5 months since I joined FM combined into this one big project: modals, custom radios, routing, form validation (checkout form was huge!) and especially creating reusable components. I also tried some completely new things for me like animations, inspired by Tediko and his awesome landing pages I added some on scroll animations on the home page.

    As far as accesibility, new thing for me was 'Skip to content' link and aria-disabled attribute on button instead of 'disabled' for more inclusive disabled form button when cart is empty. For the full list of techniques and tools I used you can check out README.

    One thing I couldn't figure out. In Firefox hero section is included in tabbing order for some reason. I don't see this issue in Chrome. Is that some kind of Firefox bug I'm not aware of, or something wrong with my code?

    If you see anything wrong or that needs to be improved, please drop a comment

    Next.js, Chakra UI, Redux Toolkit, React-Hook-Form, Atomic Design

    4
    Michal•665
    @mbart13Posted over 3 years ago

    fixed so far:

    • changed validation mode to onBlur
    • modal with empty cart will not have link to checkout
    • user is not able to add negative quantity to cart
    • added aria-current="page"
    • fixed focus issue
    1
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    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! 😁

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

    4
    Michal•665
    @mbart13Posted over 3 years ago

    Hello Tediko,

    For files architecture, I'm using Brad Frost's atomic design in react projects (well, one so far + the big one I'm working on right now) https://atomicdesign.bradfrost.com/chapter-2/

    It just fits react in my opinion, but there are many approaches to structuring react project

    I'm wondering how do you like functional style of programming in react? You used to do OOP in vanilla js

    Marked as helpful
    3