Skip to content
OverviewSolutions
15
Comments
13
P
Danilo Parra Jr
@daniloparrajr

All comments

  • Stuart Roper•80
    @RopenfoldSubmitted 13 days ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the cart feature which I used Redux to create, this was a pattern I was keen to reimburse myself in, especially the array functionality to clear and update the cart. On the whole the responsiveness is pretty good, some of the tablet resolutions could be better, I have started to look at designing first in mobile then working my way up to the larger resolutions. I will be using Tailwind going forward and for more challenging projects, I want to start using Typescript.

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

    Some of the resolutions, particularly Tablet had some issues within them but I find using the chrome tools to change the css on the fly then adding this to the code was especially useful. Some of the cart and redux functionality was a challenge at the start, remembering to return the items, once they had been through the array function was especially tough as I would get errors as the cart had been emptied, but I didn't understand why.

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

    None at the moment. I'm happy with the overall outcome.

    Product List with Cart

    1
    Danilo Parra Jr•390
    @daniloparrajrPosted 6 days ago

    Hi Stuart!

    You're solution looks good overall! There are just a couple of things I noticed.

    • Tablet responsiveness needs improvement, instead of showing a single product with a stretch image, why not just show two products per row instead? once the viewport can't cater the two products then just show one per row.
    • It is better to use the challenge's SVG instead of image tag because when you use SVG's you can effectively add hover effects.
    • Try to use the HTML picture tag for the product image, this way you can manipulate how the image is shown on different viewports.
    • Also look into the smaller details like the products spacing, element font weights
    Marked as helpful
    1
  • Danilo Parra Jr•390
    @daniloparrajrPosted 20 days ago

    Hi Egolam! Your challenge results look good! I noticed that you use inline styles along with tailwindcss which is not a good practice. You can extend/override tailwindcss config to add your project's colors, spacing, font sizes, font families, and more!

    0
  • Geochi Nova•40
    @ar78studioSubmitted almost 2 years ago

    All feedback is welcome! :)

    1. One of the improvements I'm working on is the: new Date().getTime() as there is a slight drift over-time with the progress bar if using setInterval() only.
    2. The progress bar is counting seconds and is showing the progress of each minute passed, I would also like to have the progress bar display total time elapsed/remaining.

    Vanilla JS, syncing of progress bar in CSS with JS timer

    1
    Danilo Parra Jr•390
    @daniloparrajrPosted over 1 year ago

    Hi Geochi,

    You can follow this video by Google Chrome Developers about JavaScript accurate timer. I used this in my solution also.

    Another suggestion is to actually use an existing pomodoro app to compare how it works, like the pomofocus app

    Hope this helps, all the best!

    0
  • Danilo Parra Jr•390
    @daniloparrajrPosted over 1 year ago

    Hi David, your solution looks and works very well!

    I like how the code is clean and easy to understand! Great job!

    Please see my suggestions below

    1. Use the "button" tag on increment and decrement controls of your pomodoro, short break, and long break number fields.

    Doing so will give more accessibility features to your app for example users can tab through those fields and will still be able to increment and decrement just by using their keyboard.

    1. Use radion buttons for the Font and Color fields, also for accessibility. e.g. right now you can't select those through tabbing. See my solution as a reference.

    2. Use the form tag on the settings modal for accessibility e.g. users are not able to submit their changes by pressing the enter key on their keyboard.

    3. Modal accessibility also can be improved e.g. pressing escape key when the modal active should close the modal

    Hope this helps, all the best!

    0
  • Dominic•40
    @dominicgermanSubmitted over 1 year ago
    • I'm curious how you all deal with SVGs in React. I wound up just wrapping the svgs in custom components rather than importing them with third party libraries. What is your favorite way of using SVGs in React?
    • I'd love to know if there are better/more robust ways of structuring/organizing my React app. How many lines per file is too many lines? How small/reusable should your components really be?
    • When it comes to testing, how much if any would you say is realistic in an app like this?
    • I'm wondering if my app has any blindspots in terms of accessibility.

    Pomodoro timer using Typescript, React, Vite, and CSS Modules.

    1
    Danilo Parra Jr•390
    @daniloparrajrPosted over 1 year ago

    Hi Dominic! You've done a good job with this challenge! Looks very good!

    To answer some of your questions, please see below

    1. You can simply deal with inline SVG without third-party libraries by importing them like React Components for example: import { ReactComponent as YourSvg } from './your-svg.svg';
    2. If you think that your component handles too much logic you can break it down into smaller components that way your components will stay simple and pure.
    3. Cross-browser testing is a great way to check if your app works on most browsers.
    4. You can check the Accessibility report of your solution for any accessibility issues. Also try to press the tab multiple times when your settings modal is active, it should focus on each field one by one. See my solution to this challenge as a reference.

    Hope this helps you! All the best!

    0
  • Danilo Parra Jr•390
    @daniloparrajrPosted over 2 years ago

    Hi Mohamed! 👋

    Looking good with your work here! Keep it up!

    One suggestion is to add the border initially in the buttons instead on hover so the cards will still be the same height.

    You can also improve your implementation by changing the cards text length and check if the cards still align with each other and if the button always remain in the bottom.

    A quick giveaway is to use flex direction of column and margin top auto! Good luck and have fun!

    0
  • imagine_lilies•80
    @Lilee52Submitted over 2 years ago

    Hmm, for this challenge I tried to make it look as much as possible to the design but it still looks different, the media query gave a bit of head-ache, I had to restart the whole process after I was done cos the overall looks wasn't satisfactory to me even this but I'll keep practicing. I'd really appreciate feedback on what I could have done better.

    intro-section-with-dropdown-navigation

    1
    Danilo Parra Jr•390
    @daniloparrajrPosted over 2 years ago

    Hi Lilee! 👋

    You're making good progress! Keep going!

    It is a better practice to write mobile first CSS and use min-width media queries for tablet and desktop. This means that styles are applied first to mobile devices, where most of the visitors will come. There are other more advantages in writing mobile first CSS which you can read further here

    You can checkout my take on this challenge which uses mobile first approach as your guide!

    Also check your HTML and accessibility issues, can keep it in mind in your next project!

    Hope this helps!

    0
  • Danilo Parra Jr•390
    @daniloparrajrPosted almost 3 years ago

    Great work byron! Checking your work I learned that button default type is "submit"! Keep it up!

    Marked as helpful
    0
  • Danilo Parra Jr•390
    @daniloparrajrPosted almost 3 years ago

    I like that your javascript code is readable! My suggestion is to follow the guidelines here https://github.com/ryanmcdermott/clean-code-javascript.

    I noticed that some parts of your js code have a chain of else if statements which is not ideal. You can read more here on why - https://dev.to/dglsparsons/write-better-code-and-be-a-better-programmer-by-never-using-else-statements-4dbl

    Also, it is ideal to ditch jquery in today's standard as modern javascript can pretty much handle all that you need. You can check some alternatives here - https://youmightnotneedjquery.com/

    If you want to make your JavaScript knowledge better I recommend this course https://learnjavascript.online/

    I hope this are all helpful! happy coding!

    Marked as helpful
    1
  • Michael•160
    @Minard-NGSubmitted almost 3 years ago

    Kindly review... Feedbacks are very welcome!

    HTML SCSS JS

    1
    Danilo Parra Jr•390
    @daniloparrajrPosted almost 3 years ago

    Hi @Minard-NG, you might want to consider always including a CSS reset in your stylesheet. This will keep your styles consistent on all browsers. You don't have to worry about the user agent styles that browsers add to the page.

    0
  • Danilo Parra Jr•390
    @daniloparrajrPosted almost 3 years ago

    Great work @dinahbrito! You might want to consider checking out BEM for naming CSS classes. Also, you might want to check on larger screens.

    0
  • Danilo Parra Jr•390
    @daniloparrajrPosted almost 3 years ago

    Good work Aleksandra! I suggest fixing your accessibility issues and HTML issues. It is pretty easy to fix and it's always good to follow these standards.

    1