Skip to content
OverviewSolutions
19
Comments
42

Alberto José

@alberto-rjLuanda, Angola 🇦🇴630 points

I'm a Self-Taught Humanist Frontend Developer who turns designs into accessible and intuitive web experiences. I believe technology should serve people, not the other way around. That’s why every project I build is driven by its real impact on users' lives, not just by technical trends.

I’m currently learning...

🌐 Web Accessibility

Latest solutions

  • Accessible Tip Calcutor App (SASS + SEO)

    #accessibility#lighthouse#sass/scss#animation
    Alberto José•630
    Submitted 8 months ago

    I would like to receive feedback on the:

    • Accessibility approach I have adopted.
    • README.md as seen by recruiters or employers.
    • Or any other feedback you may have. 😊👍
    2 comments

  • Animated Time tracking dashboard

    #animation#fetch#lighthouse
    Alberto José•630
    Submitted 10 months ago

    Any suggestions on how I can improve are always welcome 👍

    1 comment

  • Advice generator app with Skeleton Screen

    #animation#fetch#lighthouse
    Alberto José•630
    Submitted 10 months ago

    There's always something that can be improved, so if you have any suggestions about that, I'd really love to learn from you. 😍 👍

    0 comments

  • Animated Calculator App with Theme Switcher

    #animation#lighthouse
    Alberto José•630
    Submitted 10 months ago

    It would be a pleasure if you could help me make the components mentioned above accessible. Of course, it would also be a pleasure to learn from you about any of your other suggestions for this solution.

    One subject that I found interesting, but didn't bother to implement, is about restricting the maximum values for a calculator.

    And also other important things that you might know that I forgot to mention and implement. Together we'll go far, so feel free to share with me too, buddy!

    Any suggestions on how I can improve are always welcome 👍

    0 comments

  • Animated Newsletter sign-up form

    #accessibility#animation#lighthouse
    Alberto José•630
    Submitted 11 months ago

    I'm trying to improve my documentation skills, so if you could read my README and propose improvements, I'd certainly appreciate it. 👍

    2 comments

  • Animated Article preview component

    #accessibility#animation#bem
    Alberto José•630
    Submitted 11 months ago

    I'm trying to improve my documentation skills, so if you could read my README and propose improvements, I'd certainly appreciate it. 👍 🚀

    1 comment
View more solutions

Latest comments

  • zardrick•260
    @zardrick
    What are you most proud of, and what would you do differently next time?

    I’m most proud of how I handled the interactivity in this project. I feel like I really leveled up my DOM manipulation and event handling skills.

    If I were to do it again, I’d probably plan my component structure and naming conventions earlier, especially for the toggle switches. I ran into a few issues with repeated IDs and HTML structure that I had to refactor later. I’d also like to explore better accessibility and potentially use localStorage to persist state (like theme or filter selection).

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

    One of the biggest challenges was making the toggle switches work properly. At first, I gave all the checkboxes the same id, which caused a lot of weird behavior. I had to go back, remove all the duplicate ids, and restructure the HTML to make each toggle work independently.

    Another tricky part was the filter logic — figuring out how to show only active or inactive extensions based on the toggle state. It took a bit of trial and error, but I managed to get it working by looping through the cards and checking which ones were toggled on or off.

    In the end, taking things step by step and testing as I went helped me solve each problem.

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

    1. I’d love feedback on my SCSS structure — especially how I organized my variables, mixins, and component files. I tried to keep things modular, but I’m not sure if it’s the most efficient setup.

    2. I’m curious if there’s a better way to manage the theme toggle and filters with cleaner JavaScript or maybe even using localStorage to remember state.

    Browser Extensions Manager UI

    1
    Alberto José•630
    @alberto-rj

    Congratulations on submitting your solution!

    Note: If you're interested, I believe the suggestions below can help you grow as a developer and improve the quality of your future projects.

    💅 SCSS Structure & Modularization

    You did a great job! To take it a step further, consider using the BEM methodology for naming your classes and isolating each component's styles into separate partials for better maintainability.

    For my SASS/CSS projects, I typically use folders like:

    • abstracts - for global variables (colors, spacing, typography), mixins, and functions
    • base - for global styles (reset, custom properties, colors, typography, etc)
    • components - for buttons, cards, headings, dividers, etc.
    • layout - for structural classes (grid, flexbox, positioning, spacing, etc)
    • utilities - for helper classes (colors, backgrounds, borders, shadows, etc)

    If you'd like to see this in action, feel free to check out my Website Starter Template on GitHub.

    Suggested Module Structure:

    • _screen.scss – page container styles (height, width, background)
      • .screen
    • _container.scss – layout wrapper styles
      • .container
    • _theme-switcher.scss – theme toggle styles
      • .theme-switcher
    • _header.scss – header styles
      • .header
    • _title.scss – main title styles
      • .title
    • _tabs.scss – filter/tab styles
      • .tabs-wrapper, .tabs-list, .tabs-btn
    • _btn.scss – button styles
      • .btn
    • _active-switcher.scss – toggle switch styles
      • .active-switcher, .active-switcher__control, .active-switcher__slider
    • _card-layout.scss – card grid layout
      • .card-layout
    • _card.scss – card component styles
      • .card, .card__header, .card__icon-wrapper, .card__icon, .card__description, .card__title, .card__footer

    ♿ Accessibility Improvements

    Theme Switcher

    • Add role="switch" to the button for better screen reader support
    • Replace aria-label="Toggle theme" with something more explicit like aria-label="Dark mode"
    • Dynamically update aria-checked via JavaScript:
      • aria-checked="true" for dark mode
      • aria-checked="false" for light mode
    • Ensure sufficient color contrast in both themes
    • Test with screen readers

    For implementing this component effectively, check out Building a theme switch component by Adam Argyle.

    Heading Hierarchy

    • Use h1 for the main page title instead of h2
    • Use h2 for card titles instead of h3

    Proper heading hierarchy improves navigation for screen reader users. Learn more in Why heading order matters in HTML by Grace Snow.

    Tabs Pattern for Filters

    Interactivity for cards:

    • Add unique labels or identifiers to each "Remove" button and "Active" switch, and test with screen readers, and test with screen readers:
    <button
  type="button"
  aria-label="Remove DevLens extension"
  class="btn"
  data-extension-id="1"
  data-js="remove-extension-on-click"
>
  <span aria-hidden="true">Remove</span>
</button>

<label
  for="active-switcher-1"
  aria-label="Activate DevLens extension"
  class="active-switcher"
>
  <input
    type="checkbox"
    role="switch"
    id="active-switcher-1"
    class="active-switcher__control"
    data-extension-id="1"
    data-js="active-extension-on-change"
  />
  <span class="active-switcher__slider"></span>
</label>

    You're doing great work! Keep building, keep iterating, and thanks for being part of the community! ❤️

  • py-code314•430
    @py-code314
    What specific areas of your project would you like help with?

    1. I really appreciate some feedback on my using 'aria-attributes'. I tried my best but I'm not sure I'm going in the right way

    2. I used <dialog> element to show the Success message and then applied some styles to it to make it exactly like in the design. Keeping in mind the Accessibility features, is this the best approach or should I just use a regular <div> ? (Accessibility Report telling me that <dialog> is not supported in all browsers 🤷🏼‍♂️)

    3. Any suggestions to improve JS code is welcome especially functions checkValidity() and showError(). Anyway I can improve those?

    4. After I submitted my solution, Accessibility Report notifying me that role="list" and role="listitem" are not necessary for <ul> and <li> respectively. Please advise!

    Thanks in advance

    Responsive Sign-up Form using Flex

    #accessibility#bem#gulp#sass/scss
    2
    Alberto José•630
    @alberto-rj

    Hi again @py-code314,

    Congratulations on investing the time and effort to complete this solution. I apologize for not mentioning this suggestion earlier.

    However, according to this W3Schools tutorial, Accessibility Errors, you could still improve the accessibility of your application during form validation.

    To do this, in your main.js file, consider modifying the value of the aria-invalid attribute for the email field during its validation.

    For example, if in your code the email field is emailField, you could also add the following to your code when implementing validation:

    • When emailField is valid: Set the attribute to aria-invalid="false", or simply remove it:
    // Or use: emailField.removeAttribute('aria-invalid');
emailField.setAttribute('aria-invalid', 'false');
    • When emailField is invalid: Set the attribute to aria-invalid="true". And make sure the focus is on emailField:
    emailField.setAttribute('aria-invalid', 'true');
emailField.focus();

    That's it, my friend! Above all, know that you've done a good job and that your solution is already great! Happy coding!

    Useful resources:

    Marked as helpful
  • py-code314•430
    @py-code314
    What specific areas of your project would you like help with?

    1. I really appreciate some feedback on my using 'aria-attributes'. I tried my best but I'm not sure I'm going in the right way

    2. I used <dialog> element to show the Success message and then applied some styles to it to make it exactly like in the design. Keeping in mind the Accessibility features, is this the best approach or should I just use a regular <div> ? (Accessibility Report telling me that <dialog> is not supported in all browsers 🤷🏼‍♂️)

    3. Any suggestions to improve JS code is welcome especially functions checkValidity() and showError(). Anyway I can improve those?

    4. After I submitted my solution, Accessibility Report notifying me that role="list" and role="listitem" are not necessary for <ul> and <li> respectively. Please advise!

    Thanks in advance

    Responsive Sign-up Form using Flex

    #accessibility#bem#gulp#sass/scss
    2
    Alberto José•630
    @alberto-rj

    Congrats, You did a good job!

  • Gwenaël Magnenat•1,500
    @gmagnenat
    What are you most proud of, and what would you do differently next time?

    This challenge has stretch my experience with vanilla JavaScript. I did some refactoring to try and optimise my solution with better readability and code organisation.

    The next time I want to first list all the interactions, expected actions and expected results before starting to write a line of code. It will probably help to have a better structure from the start.

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

    By working on this challenge there was always a lot of questions popping in my head. How do I generate a random string, how to I modify the string to include more characters, how to I calculate the strength of the password?

    By doing researches, reading posts, MDN documentation, I usually find the answers to get started and it triggers new questions. It's a constant loop but at least there is a starting point.

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

    I added (to try) a debounce function to reduce the function call and dom update. Is there better ways to do this?

    I'm open to any suggestions on code organisation in vanilla JavaScript.

    Password generator app

    4
    Alberto José•630
    @alberto-rj

    As for your approach adopted in JavaScript for this solution, I believe it is perfectly readable and organized. I just loved your approach!!

  • Gwenaël Magnenat•1,500
    @gmagnenat
    What are you most proud of, and what would you do differently next time?

    This challenge has stretch my experience with vanilla JavaScript. I did some refactoring to try and optimise my solution with better readability and code organisation.

    The next time I want to first list all the interactions, expected actions and expected results before starting to write a line of code. It will probably help to have a better structure from the start.

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

    By working on this challenge there was always a lot of questions popping in my head. How do I generate a random string, how to I modify the string to include more characters, how to I calculate the strength of the password?

    By doing researches, reading posts, MDN documentation, I usually find the answers to get started and it triggers new questions. It's a constant loop but at least there is a starting point.

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

    I added (to try) a debounce function to reduce the function call and dom update. Is there better ways to do this?

    I'm open to any suggestions on code organisation in vanilla JavaScript.

    Password generator app

    4
    Alberto José•630
    @alberto-rj

    Hey @gmagnenat, you could fix this issue regarding your social profiles:

  • Gwenaël Magnenat•1,500
    @gmagnenat
    What are you most proud of, and what would you do differently next time?

    This challenge has stretch my experience with vanilla JavaScript. I did some refactoring to try and optimise my solution with better readability and code organisation.

    The next time I want to first list all the interactions, expected actions and expected results before starting to write a line of code. It will probably help to have a better structure from the start.

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

    By working on this challenge there was always a lot of questions popping in my head. How do I generate a random string, how to I modify the string to include more characters, how to I calculate the strength of the password?

    By doing researches, reading posts, MDN documentation, I usually find the answers to get started and it triggers new questions. It's a constant loop but at least there is a starting point.

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

    I added (to try) a debounce function to reduce the function call and dom update. Is there better ways to do this?

    I'm open to any suggestions on code organisation in vanilla JavaScript.

    Password generator app

    4
    Alberto José•630
    @alberto-rj

    Hi @gmagnenat! I've been taking a look at your solution on github, congrats! I have a question:

    Why did you load the font inline style (between lines 12 to 22 of index.html), instead of external style (style.css)?

    Why? Could you help clarify this, please?

View more comments