Skip to content
OverviewSolutions
73
Comments
27
Vander Santos
@vanderms

All comments

  • P
    Coder-Liz•480
    @Coder-Liz
    What are you most proud of, and what would you do differently next time?

    Next time I will use SCSS on this project to make the code cleaner.

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

    The challenge I encountered on this project was the positioning of the quotation image because at first I do left: 50% but it looks different from the design so I try using pixel unit. However I am not really sure if this is the efficient way.

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

    I am hoping to get some tips on how to make my codes cleaner.

    testimonials-grid-section using CSS grid

    1
    Vander Santos•1,820
    @vanderms

    Your solution is great! Congratulations!

    Using 'p' for quotations is not a bad choice, 'p' has semantic value and is definitely better than a div. However, the pattern figure > blockquote + figcaption is better for quotations. See the example below from HTML Spec:

    <figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

    https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Bom trabalho, Adriano! Ficou legal, como sempre!

    Um único detalhe. Quando eu arrasto um arquivo sobre o componente do "upload avatar", o navegador, ao invés de carregar o arquivo ele abre o arquivo na mesma página (a URL fica o caminho para o arquivo no meu computador)(Testei com Firefox e Chrome no Windows).

    Normalmente, quando eu preciso implementar um componente do tipo, eu costumo deixar o input:file, não o label, ocupando toda a área que o usuário pode clicar, porque assim a funcionalidade de drag and drop é preservada.

    A título de exemplo, dá uma olhada como foi implementado algo do tipo no USWDS (sistema de design do governo norte-americano, que é uma referência em usabilidade e acessibilidade) https://designsystem.digital.gov/components/file-input/

    Marked as helpful
  • Adriano•42,870
    @AdrianoEscarabote
    What are you most proud of, and what would you do differently next time?

    I am most proud of successfully completing my first Svelte project. Next time, I would approach the project with a clearer plan and design in mind to avoid some of the backtracking and refactoring that I had to do in this project. I also plan to spend more time exploring advanced features of Svelte to create more complex and polished projects in the future.

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

    In my first project using Svelte, I encountered some challenges with the syntax and the reactive nature of Svelte components. To overcome them, I spent time reading the documentation, watching tutorials, and experimenting with small code snippets.

    Blog preview card w/ (Svelte + Tailwind + Typescript) 👨‍💻

    #svelte#tailwind-css#typescript#vite
    1
    Vander Santos•1,820
    @vanderms

    Opa, Adriano! Aprendendo Svelte também? Isso me lembra que eu preciso voltar a estudar. Ficou legal a sua solução!

  • Vander Santos•1,820
    @vanderms

    Parabéns pela sua solução, Adriano! O seu aplicativo ficou muito legal.

    Quanto a sua pergunta sobre a organização dos arquivos, o fato é que React não é opinativo sobre isso, então o desenvolvedor tem muita liberdade sobre como organizar os arquivos. Eu, particularmente, gostei da forma que você organizou e achei superlegível.

    A parte isso, o principal problema na sua solução é que quando a gente trabalha com React - e outros frameworks e bibliotecas do mesmo tipo - a gente não pode manipular diretamente o DOM. Eu me refiro ao uso de getElementById, target.style.backgroundSize e innerText na sua função handleChangeInput.

    Há várias razões para não se fazer isso e isso pode trazer várias dores de cabeça. Por exemplo, se a aplicação fosse maior e, por alguma razão, houvesse um repaint do seu component <Pricing/> todos os dados inseridos pelo usuário seriam perdidos (isso ocorreria porque os dados alterados pelo innerText não estariam sincronizados com os dados do virtual DOM do React).

    O uso de id também é altamente NÃO recomendável, uma vez que isso prejudica a reusabilidade dos componentes. Por exemplo, se você tentasse reutilizar o component <Pricing/> em outro lugar do aplicativo, a página ficaria com duplicidade de ids.

    Sobre o tema, de um modo geral, em React, o gerenciamento de estado e a sincronização do estado da aplicação com a interface devem ser realizados com hooks - geralmente useState e, em menor grau, useReducer, associados, ou não, a useContext.

    Por fim, um detalhe menor: há uma forma mais prática de usar React.Fragment, isto é, ao invés de importar o Fragment e usar <Fragment>...</Fragment>, você poderia ter usado simplesmente <>..... vide https://pt-br.reactjs.org/docs/fragments.html#short-syntax

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Adorei sua solução! Parabéns!

    Sobre babel e webpack, eu achei interessante que você tenha optado por configurar você mesmo a integração dessas duas tecnologias no projeto e imagino que deve ter sido uma experiência incrível como fonte de aprendizado.

    Contudo, talvez seja importante observar que mesmo em projetos vanilla (sem uso de frameworks) o usual seria usar uma solução pronta que já vem com transpiladores, builders, preprocessadores CSS e outras funcionalidades "out of the box", como Parcel ou Vite.

    Outro ponto é que, embora webpack ainda seja um bundler bastante popular, nos últimos anos ele tem sido visto, não sem alguma polêmica, como um tanto ultrapassado. Recentemente, por exemplo, nextjs construiu um bundler chamado turbopack com Rust que é supostamente 700 vezes mais rápido que Webpack.

    O que eu particularmente não gosto do Webpack é que qualquer coisa que você precisa adicionar ao projeto é um saco para configurar. Por exemplo, se eu quiser adicionar postcss a um projeto com webpack vou perder de uma a duas horas pesquisando como fazer isso e mais duas horas tentando entender o que deu de errado :).

    Enfim, mais uma vez parabéns. Continue o excelente trabalho!

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    E ai Lucas! Parabéns pela sua solução. Ficou excelente!

    Quanto a estrutura do HTML e o problema com as landmarks, eu acredito que você fez algumas opções pouco usuais.

    Mas antes, uma breve explicação: existem basicamente duas estruturas tipicas para uma pagina:

    <nav>...</nav> <main>...</main> <footer>...</footer>
    <header>...</header> <main>....</main> <footer>...</footer>

    A escolha entre a primeira e a segunda depende de se você considera ou não a parte de cima da página como um cabeçalho (banner landmark) ou como uma simples barra de navegação (nav landmark). Mas geralmentes ambas escolhas justificáveis e são válidas.

    Então, por escolha pouco usual, eu me refiro ao fato de vc aparentemente ter colocado a barra de navegação dentro de <main>. Difícil considerar ela como parte do conteúdo principal.

    Por outro lado, você colocou algumas seções fora de <main>. Dá para fazer isso? Sim, mas uma <section> precisa ter o atributo aria-label ou aria-labelledby para ser considerada uma landmark. Como você não usou nenhum desses atributos o validator apontou o erro.

    Mas pra mim o principal problema é que se você não considera tais seções como parte do conteúdo principal, você deveria ter usado <aside> e não <section>.

    Resumindo, existem diferentes formas de você resolver esses problemas: .e.g. adicionando aria-label ou aria-labbeledby as sections, colocando elas dentro de main, substituindo elas por aside.

    Espero que as dicas tenham ajudado e continue sendo uma inspiração para toda a comunidade.

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Hi congratullations for completing this challenge.

    About your question, the scss folder structure is not something opinonated, so the developer has some freedom to choose the best structure for each project.

    I like the structure you chose and I think I've already done something similar. But the problem with this structure is that the react components become less reusable since the scss modules are not in the same folder than the jsx, tsx files.

    I've also tried putting the module.scss in the same folder as the react components. But this approach also has its drawbacks.

    One of them is that in a scss project you always have some kind of scss file with mixins, variables and functions that you need to @use in every other scss file and although you can use absolute path to import it, the solution is never very good.

    About the HTML, you should look at the solution report. Your HTML can be very clean if you correct all errors and warnings in the report. But I think that you should know that a clean and semantic HTML doesn't have much impact in SEO.

    Things like quality of the content and backlinks are much more important for SEO than HTML tags.

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Hi, congratullations for completing this challenge.

    The amount of media queries is ok. You don't need to worry about it.

    The only thing that I would point out is that I saw in your code that you used a media query with max-width: 900px and another with min-width 900px.

    So, at exact 900px both medias will apply. Is this the desired behaviour? If not you could set the one with min-width to 901px.

    And about this subject, maybe you should give a try to the mobile first approach. Most of the time it is easier than the desktop first.

    Keep up the good work!

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Only when I was submitting this solution, I realized that I hadn't changed the website favicon. What is funny because the Angular favicon fits very well for the Arch Studio.

  • Vander Santos•1,820
    @vanderms

    Nice work!

    I agree with you.

    I had the same experience with this challenge. It is one of the hardest I have completed to the point that I think it should be at least level intermediate if no advanced.

  • Vander Santos•1,820
    @vanderms

    HI, well done! You did a really great job in this project.

    About your question, we usually use observables when we need to handle asynchronous operations. Communication with Rest API being the most common of this operations.

    Angular also uses observables on several modules like router and reactive forms.

    What I am trying to say is that observables is something very common in Angular and is hard to build a project that doesn't contain any. In your case, you use HttpClient, whose methods return observables. See: https://angular.io/guide/observables-in-angular#http

    And, finally, your project is amazing and well organized, the only tip that I would like to give you is that when we need a variable with different values for development and production, the best practice is to use environment variables. I am saying that because I saw that you created a variable named IP_ADDRESS, in the TodoAppService, and you commented the development value.

    You can check how to set a enviroment variable in this article https://www.digitalocean.com/community/tutorials/angular-environment-variables

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Hi, I love your solution!

    The dark mode was awesome!

    My only tip is you could improve the acessibility and the html semantics of your app putting the icon used for toggle inside a button tag (with an aria label describing what the button does, e.g. "toggle dark mode").

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Well done!

    You don't need to use Github secret key in this challenge.

    Actually, Github has a public API that you can use without keys. Read: https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication, specially, the part about unauthenticated clients.

    You can access the public API with a get request to the URL: https://api.github.com/users/{usename}, e.g https://api.github.com/users/octocat

    I am not sure what token you have used, but maybe exposing the Github key in your project can be a serious security risky for your Github account.

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Hi there! Nice job!

    About the color of the social media icons in the footer, you can set it to white by:

    • setting the property fill, of the path tag, in the icon file, to white;

    • adding the property filter: brightness(0) invert(100%) on the img tag;

    • replacing the img tag for a div, with the following properties: background-color white, mask-image: url(path_to_the_icon); width: width_of_the_icon; height: height_of_the_icon; mask-repeat: no_repeat; mask_size: contain; mask-position: center. This solution is a bit tricky and you will need an autoprefixer since the mask properties don't work on chrome without the webkit prefix, but it can be quite usefull when you need to use hover effects;

    • and using an icon library like font-awesome. For social media icons, that's the easiest and, in my opinion, the best way.

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Hi there! Well done!

    I will start making this project and I am happy to have found your solution because I had some doubts about how the app works.

    I only have two suggestions:

    The first is when you are using Create React App (or other framework), you should remember to change the favicon and the title on the index.html file. Currently the title of your solution is "React App". "Job Listings" would definitely be a better title.

    The second is it's much easier to deploy a React App on free services like Netlify or Cloudflare Pages. You should give them a try.

  • Vander Santos•1,820
    @vanderms

    Hi nice work!

    Your solution is great and overall I liked it very much.

    About the width and height, you could have used a more straightforward approach. I mean, if you needed the card on desktop viewports to have 576px, you should have set the div.main-container to have this width.

    But in your solution, you set the body to have 1440px and the div.main_container to have 40% of that. And this is a problem, because it just works if the desktop has exactly this size. For example, on laptops 1280px wide, your site has a horizontal scrollbar because the <body> is overflowing and on desktops with 1980px the card is not in the center.

    I think also that you should have used more semantic html tags. I mean, the .main_container could be an article (or a section) not a div.

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    Nice work!

    I like the picture tag because it offers a clean solution to make an image responsive and you used it very well in your code. I would only point out that you didn't need the second source tag since the src is the same as the src in the img tag.

    Marked as helpful
  • Vander Santos•1,820
    @vanderms

    I had to change the attribute priority of the nextjs images, because the images were not displaying in the frontend mentor screenshot. But it is not something that I would usually do.