Alberto José

@alberto-rjLuanda, Angola 🇦🇴630 points

JavaScript Full-Stack Developer | Building Accessible & Scalable Web Experiences | Bridging Tech & Humanity | Advocate for the Open Web

I’m currently learning...

Software Development

Latest solutions

Accessible Tip Calcutor App (SASS + SEO)
#accessibility#lighthouse#sass/scss#animation
Alberto José•630
Submitted 12 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 over 1 year 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

Gomes Alberto•10
@gomes-alberto
Submitted 11 days ago
What are you most proud of, and what would you do differently next time?
O processo foi de muito aprendizado. E isso por si só, já me deixa bastente orgulhoso.
What challenges did you encounter, and how did you overcome them?
Tive algumas dificuldades no alinhamento de algune elemntos, mas consegui superar todos eles com vontade de aprender e crescer cada dia mais no área da programção
Card Personalizado com HTML E CSS
#pure-css
1
Alberto José•630
@alberto-rj
Posted 6 days ago
Olá @gomes-alberto! Vi o seu projecto e está funcionando bem.

Parabéns pelo trabalho! 🎉

Aqui vão algumas melhorias que poderiam melhorar ainda mais a sua solução:

HTML 📝

Linha 2:
```
<html lang="pt-br">
```
Trocar para lang="en" já que o conteúdo está em inglês.

Estrutura geral (linhas 16-50)
- Trocar <div class="img"> por <figure>
- Usar <article> em vez de <main> para o card
- O <div class="text"> pode virar uma <section>
Linha 18 e outras imagens:
```
<img src="images/image-equilibrium.jpg" alt="">
```
Todos os alt="" precisam de descrições. Tipo: alt="NFT artwork Equilibrium #3429"

Linha 48:
```
<p>Creation of <span>Gomes Alberto</span></p>
```
Deveria ser um link clicável.

CSS 🎨

Linhas 1-5 (Reset): O reset actual está básico. Recomendo implementar este aqui:

Josh Comeau - A Modern CSS Reset

Adicionar box-sizing: border-box também.

Linha 6 (Font):
```
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
```
O desafio usa Google Fonts "Outfit". Importar e usar ela.
- Sem variáveis CSS: Criar custom properties no topo para cores, fontes e espaçamentos. Vai facilitar muito a manutenção.
- Linhas 20-24 (.big-main .img img)
```
width: 300px;
```
Usar width: 100% e adicionar height: auto.

Faltando hover effects:
- Hover na imagem (overlay cyan + ícone view)
- Hover no título (cor muda para cyan)
- Hover no nome do criador (cor muda para cyan)
- Transições suaves
Cores não exactas

As cores estão próximas mas não são exatamente as do design. Verificar o ´style-guide.md´ na pasta de seu projecto.

O que priorizar ⚡:
1. Hover effects - É o principal do desafio
2. Font correta - Outfit do Google Fonts
3. Link - Gomes Alberto
4. Semântica HTML - article, figure, etc.
O resto pode ir implementando aos poucos. O importante é que você pegou bem os conceitos de flexbox e o layout está funcionando direitinho!

Boa sorte com as melhorias! 🚀
zardrick•260
@zardrick
Submitted 5 months ago
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
Posted 5 months ago
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
- Implement the ARIA Tabs Pattern for your filter section
- Test with screen readers
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
Submitted 7 months ago
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
Posted 7 months ago
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:
- MDN: aria-invalid
- MDN: HTMLElement: focus() method
Marked as helpful
py-code314•430
@py-code314
Submitted 7 months ago
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
Posted 7 months ago
Congrats, You did a good job!
Gwenaël Magnenat•1,540
@gmagnenat
Submitted about 1 year ago
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
Posted 11 months ago
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,540
@gmagnenat
Submitted about 1 year ago
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
Posted 11 months ago
Hey @gmagnenat, you could fix this issue regarding your social profiles:
- Update links to your social profiles