Skip to content
OverviewSolutions
6
Comments
6
Siraj Sharma
@sirajsharma

All comments

  • Teodor Jenkler•3,760
    @TedJenklerSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of revisiting my project to test it with Jest and applying previous feedback. Finding and fixing a bug that I wouldn't have noticed otherwise was incredibly rewarding. Next time, I’d focus more on writing tests from the start and validating calculations thoroughly, possibly using a TDD approach. I’m also excited to go back to my old projects and test them all—it might drive me a bit insane, but it’s a great way to get really good at testing code and improving overall quality!

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

    The biggest challenge was configuring Jest to work with TypeScript and Vite, which was quite complex. I tackled it through extensive troubleshooting but plan to try Vitest next for a potentially simpler setup.

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

    I’d appreciate feedback on the following areas:

    Testing: I’m unsure if my test cases cover all essential aspects and may have missed some important tests. Due to the project's small size and lack of modular components, these unit tests also function as end-to-end tests. I plan to learn Cypress for larger projects.

    SCSS: Feedback on styling, organization, maintainability, and best practices would be great.

    TypeScript: Any tips on improving code quality, type usage, or overall structure would be helpful.

    Any additional feedback is also welcome!

    Tip-calculator-Typescript-SCSS-Animation-Accessibility-Jest

    2
    Siraj Sharma•150
    @sirajsharmaPosted 2 months ago

    I noticed that in the _calc.scss partial file, you used descendant combinators with quite a bit of nesting. For example:

    .form {
   .input-container {
      .input-icon {}
   }
}

    This compiles to CSS as: .form .input-container .input-icon {}

    Using descendant selectors like .form .input-container .input-icon specifies styles based on a very specific structure. If you need to use .input-icon elsewhere, you'll have to recreate the same rules, leading to redundant code.

    In large projects, this approach can cause issues due to the high specificity of descendant selectors, which can override other rules. This often leads to the overuse of !important to fix conflicts.

    Consider using BEM (Block Element Modifier) to structure your rules more effectively. BEM works well with SCSS and can help manage specificity and modularity.

    Another point is that you didn't break down the components, which affects adherence to the Single Responsibility Principle (SRP). Breaking down components could have facilitated writing more modular SCSS.

    While you employed advanced concepts in React and TypeScript, focusing on these smaller details could enhance the overall quality of the code. Despite these issues, I really liked the end result and am excited to tackle this challenge myself now.

    Marked as helpful
    1
  • Siraj Sharma•150
    @sirajsharmaPosted 2 months ago

    • Circles in the Image:

      • The circles were already present in the image, so there’s no need to add them manually.

    • Use Semantic HTML:

      • Incorporating semantic HTML improves the structure and accessibility of your web content.
      • Learn more about Semantic HTML.

    • Use Relative Units:

    • Add Descriptive Text in the alt Attribute:

      • Ensure the alt attribute provides descriptive text for screen readers and serves as fallback content if the image fails to load.

    • Avoid Unnecessary Dependencies:

      • Since Bootstrap is not used in your application, do not include it. Unnecessary dependencies increase the bundle size.
      • Only add dependencies that are actively used in the application to keep the bundle size minimal.

    • General Note:

      • Thank you for your efforts. These adjustments will help improve the performance and accessibility of your application.
    0
  • Siraj Sharma•150
    @sirajsharmaPosted 2 months ago

    • Use the <picture> tag for responsive images:

      • It provides better control over image display compared to background images.
      • Refer to this tutorial by Kevin Powell for a detailed explanation.
      • Explore more of Kevin Powell’s tutorials for additional insights.

    • Incorporate semantic HTML and ARIA for better accessibility:

    • Use relative units for a fluid layout:

    • Adopt a mobile-first approach in CSS:

    • Utilize BEM methodology with SCSS:

      • Combining BEM with SCSS enhances organization and maintainability in your CSS.

    • Use the <link> tag to add fonts instead of @import in CSS:

      • The <link> tag is generally preferred because it allows for better performance.
      • Using <link> can improve loading times and reduce render-blocking issues compared to @import, which can delay the rendering of the page.
      • Example: <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

    • General note:

      • These points aim to help you improve your skills and achieve better web design outcomes.
    0
  • Siraj Sharma•150
    @sirajsharmaPosted over 1 year ago
    0
  • Dawid Keyser•170
    @dawkey95Submitted over 1 year ago

    As I am starting my journey in web development and have some basic HTML, CSS, and JS behind me I am wanting to learn react with material UI especially since my main goal is to one day work as a MERN developer.

    What are some best practices for organizing your react folder structure when you have components, themes, and assets?

    Any comments on ways to better utilize MUI, especially in regards to styling? In vanilla css you have a .css file where you do all the styling but with MUI it seems very much inline.

    Appreciate the feedback

    QR Code using React and Material UI

    1
    Siraj Sharma•150
    @sirajsharmaPosted over 1 year ago

    Hello,

    There is no specific way to organize a React project since React is a library, not a framework. Therefore, developers organize their projects based on what they think is best suited for their development environment. The React project structure changes as the codebase scales. Even the React docs state that there is no opinionated React structure. You can read more about it here. Probably every React developer goes through this dilemma.

    Here are some insightful links for structuring your project:

    For Material-UI (MUI), you can use styled-component, emotion, or styled-components. Personally, I prefer to use MUI in projects that only require Material Design. In custom projects, it can create more trouble than help in development.

    Marked as helpful
    1
  • MohammedHussain23•10
    @MohammedHussain23Submitted over 1 year ago

    Hello everyone,

    I am not sure about the sizes and positioning aspect while resizing the window but I did what I can using the knowledge I gained. Would like it if someone could give me feedback and be a mentor for me. Especially in the CSS part where I need help in the responsive designs. Appreciate all honest feedback. Thanks!

    Hussain

    QR Code Challenge

    3
    Siraj Sharma•150
    @sirajsharmaPosted over 1 year ago
    • Try to use semantic tags instead of divs.
    • Use h1 tag instead of h2 for level headings. Click here for more information on this.
    • To center the component you can use flexbox, grid or position. The most simple way is: -
    body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

    For more ways, you can visit here.

    • You don't need to wrap every tag with div. Try to understand the difference between block, inline and inline-block elements. Click here to go to the video.
    • Try to use <link> tag instead CSS @import. For more information visit here.
    • Use relative units (em, rem, vw, vh, % etc) instead of absolute units (px, in, cm etc). Click here for more information.
    Marked as helpful
    0