Skip to content
OverviewSolutions
8
Comments
16
Sergio Reynoso
@sergioreynoso

All comments

  • Sergio Reynoso•320
    @sergioreynosoPosted over 2 years ago

    Nice job! I notice the <img> is not taking the whole height of its container. This is because the <img> tag only has it's width at 100%, you want to also do its height. Of course this would then then stretch it and distort it; this is where the object-fit property comes to the rescue by setting it to cover.

    img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

    A challenge for you is to pretend this was as component that would take any kind of image without the purple overlay added to it. How would you add the color overlay with just css? ;-)

    Cheers!

    Marked as helpful
    0
  • Ivan Olmo•310
    @ivanolmoSubmitted over 2 years ago

    I know I didn't need to use React, but I wanted some practice. Can anyone out there tell me if my implementation and usage of React is bad?

    GitHub user search app using React

    1
    Sergio Reynoso•320
    @sergioreynosoPosted over 2 years ago

    Great work, I love the smooth transition to dark-mode.

    I would recommend testing it out with a slow connection. You will notice the app needs a pre-loader to improve on the user experience. Specially while you wait axios to fetch user data.

    Btw, I also debated on React and decided going with vanilla js; I wanted to practice js modules. In the end, I might just use this as a practice in taking a vanilla js project and converting it to React lol.

    Cheers!

    Marked as helpful
    0
  • Sergio Reynoso•320
    @sergioreynosoPosted over 2 years ago

    Good job! Very clean code. Some suggestions.

    1- The dark mode toggle doesn't activate when I navigate using the tab button. This is not an ideal user experience for those with a disability.

    2 - If you simulate a slow connection the applications just sits there until the fetch api finally loads the results. I would recommend giving the user a message that the information is loading.

    3 - Match the top margin to the design.

    4 - I really like the idea of a making a utility class to fetch data "FetchWrapper", just not sure why you use a class instead of just a regular function.

    5 - I would recommend you break up searchUser function into sub functions. This would make the code more readable. For example where you commented '// format joined date', this could easily be made into formatJoinedDate(arg);. It's good practice to keep functions pure and not have them do too many things.

    6 - As a next step I would recommend you break up your script file into modules. This goes back to point 5, it will make your code more readable.

    Again, very good work and I hope these tips help. :-)

    Marked as helpful
    0
  • Spencer Runde•640
    @spencerrundeSubmitted almost 3 years ago

    Need to better comment the code later and finish the README documentation. Styling this one was a bit tricky, mostly because of the timezone element. It can be wildly different lengths depending on where you're located. My timezone is fairly long, so I'm hoping it looks good for everyone else.

    Mobile-first React clock app

    1
    Sergio Reynoso•320
    @sergioreynosoPosted over 2 years ago

    Hi Spencer, good job in with the project, looks very clean. Here is my feedback:

    • The page lacks a preloader, I noticed a delay in the css rendering when I tested it on a slow connection. The quotes also lag when I refresh them. Test it out for yourself https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome

    • It would make for a better user experience if the more button was completely clickable. I kept missing the arrow when I was trying to expand the bottoms panel.

    • I think this would be a good opportunity to practice your animation skills. Why not have the bottom panel slide up as it pushes the clock and quote up? ;-)

    Hope this helps. Good luck!

    0
  • Tamir Assayag•240
    @TamirAssayagSubmitted over 2 years ago

    It’s been a fun project to work on, and I loved how the design is simple yet powerful. this was my first time using zustand which made the state management a lot easier. If you went through my code and you'd like to share your better approach for some of code in the repo- I'd love to learn from you 😁

    Clock App using React with typescript

    1
    Sergio Reynoso•320
    @sergioreynosoPosted over 2 years ago

    Hi Tamir, great work in getting this far! The first thing I would recommend is you take care of accessibility issues, as they look to be very easy to fix. Second, I would recommend you add some visual, like a preloader, for when the page is loading data. I didn't go too deep into your code, but for some reason there is a delay for when the styles are rendered, I think it's related to rendering the page before api data is fully loaded.

    Good luck!

    0
  • Sergio Reynoso•320
    @sergioreynosoPosted almost 3 years ago

    Your accessibility implementation is awesome. I tested it with the Apple screen reader and the navigation was flawless IMO, and inspired me to do the same with mines and all future projects. Thank you for the follow. ;-)

    0
  • Elisabeth Martin•200
    @Luxeli0004Submitted almost 3 years ago

    Hey everyone, I just finished this landing page. It's the first time that I used the mobile-first approach and also that I made use of the CSS grid. I'm still a beginner, so any feedback to further improve my work is welcome :)

    Meet landing page

    2
    Sergio Reynoso•320
    @sergioreynosoPosted almost 3 years ago

    Good job! To resolved the one accessibility error in the report I would recommend turning that H5 heading tag into an H4. Headings should only increase by one.

    Marked as helpful
    0
  • Danilo Parra Jr•410
    @daniloparrajrSubmitted almost 3 years ago

    The background positions are challenging to get exactly close to the design. Hope someone can learn from my code or if anyone has suggestions please feel free to comment :)

    Semantic HTML with SASS

    2
    Sergio Reynoso•320
    @sergioreynosoPosted almost 3 years ago

    Great work!

    I use this Firefox plugin to make sure everything is as close to the design as possible: https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect-pro/

    It lets you use an exported png/jpg of the design and overlay it over your markup, and this way it's much easier to line things up. Good luck!

    2
  • Jack Mullane•100
    @fitzgibbonjackSubmitted almost 3 years ago

    This project was great for putting some of the concepts recently learnt into practice, namely:

    • Taking advantage of event propagation to listen to multiple elements using a single event listener.
    • Using localStorage again but on a slightly larger scale, to give the app CRUD functionality without the need for backend.

    Notes: still need to add drag and drop functionality. Wanted to get this first version submitted to get some feedback. Thanks in advance!

    To Do App - Event propagation, localStorage

    2
    Sergio Reynoso•320
    @sergioreynosoPosted almost 3 years ago

    Nice work! Check out my solution on this project for drag & drop. I used this library called Dragula that was super easy to use. I would still like to come back to it and try to do drag & drop on my own without a library. Cheers!

    1
  • Sergio Reynoso•320
    @sergioreynosoPosted over 3 years ago

    Good job getting it this close. Your HTML is not using any semantic elements, here's more info as why it's important to write semantic markup, Why Use Semantic HTML?. This will help resolve your accessibility issues.

    Good luck!

    1
  • Sergio Reynoso•320
    @sergioreynosoPosted over 3 years ago

    Good job! Just a few minor things. <div class="container">This can be more semantic by using and <article> tag. I would also give it a class name that is more specific like ''card'' or "profile-card".

    Cheers,

    Marked as helpful
    0
  • Sergio Reynoso•320
    @sergioreynosoPosted over 3 years ago

    I would work on first resolving the accessibility and html issues first, which are mostly do to duplicate IDs. I would avoid IDs because they are too specific. I recommend using something like BEM https://en.bem.info/methodology/.

    I would also recommend using semantic tags in your markup.

    Cheers!

    0