@AdrianoEscaraboteSubmitted 7 days ago
Conference ticket generator w/ (Next + Tailwind) 👨💻
#jest#next#storybook#tailwind-css#accessibility
P
Vander Santos
@vandermsAll comments
- P@vandermsPosted 4 days ago
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 helpful1 - @AdrianoEscaraboteSubmitted 9 months agoWhat 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.
P@vandermsPosted 9 months agoOpa, Adriano! Aprendendo Svelte também? Isso me lembra que eu preciso voltar a estudar. Ficou legal a sua solução!
1 - @AdrianoEscaraboteSubmitted about 2 years ago
Hello everybody! 👋 This is my solution for Interactive pricing component!
This was my first contact with React, Parcel and styled components!
I really liked the efficiency and simplicity of parcel, about styled-components I would like to know if the folder organization is good, despite having read a little about it, I still have doubts about the best ways to organize the files!
I thought it was really cool to develop this project with react, despite being a small and simple project, it was perfect to practice a little with new tools.
Feel free to leave feedback on how I can improve my code. 😊
Thanks!
Interactive pricing component w/ (React + Styled Components) 👨💻
#accessibility#parcel#styled-components#reactP@vandermsPosted about 2 years agoParabé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 helpful1 - @AdrianoEscaraboteSubmitted about 2 years ago
👨💻 Hello everyone. This is my solution for Advice Generator App.
This was my first project consuming an API, I learned a lot of things, but I feel that I need to study a little more about it, that is, my next projects will have API integration, after all I need to practice and learn a little more about it!
Also for the first time using
babelandwebpackI tried to make my folders as organized as possible, with babel I made myjscode accessible to all browsers! and with webpack I compiled all the modules used in the development of the project to thedistfolder! feel free to comment on how I can improve the organization!I have added:
- 👨💻 This API has a mechanism that only accepts a request every 2 seconds, to solve this problem and the user doesn't keep clicking on the button and doesn't see any changes, I added a slightly slower animation!
Feel free to leave comments on how I can improve my code.
Thanks! 😊
P@vandermsPosted about 2 years agoAdorei 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 helpful2 - @correlucasSubmitted over 2 years ago
👾 Hello, Frontend Mentor coding community. This is my solution for the Huddle Landing Page With Curved Sections.
I added some features:
- 😎 I recreated the logo as a SVG (this way I could animate it).
- 👻 I added an animation on the logo (chat-box icon flip and turn).
- 👨🔬 Some custom design improvements.
Happy to hear any feedback and advice!
P@vandermsPosted over 2 years agoE 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:
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 helpful0 - @RhyynSubmitted over 2 years ago
I'm not sure if I have the proper folder structure for the scss modules, what's the best practice to organize such project ?
Which HTML tags should I try and implement for better SEO ? I feel like I'm pretty lacking in this area
P@vandermsPosted over 2 years agoHi 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 helpful1 - @marcoslimaJSSubmitted over 2 years ago
Hello everybody! I didn't have any difficulties to create the project, but I think I made excessive use of the media query. guys, do you think that unnecessary media queries were used? if yes, what could i improve?
P@vandermsPosted over 2 years agoHi, 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 helpful0 - P@vandermsSubmitted over 2 years agoP@vandermsPosted over 2 years ago
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.
0 - @paulaxisabelSubmitted over 2 years ago
By far the most difficult challenge I've completed with Front End Mentor. It's not perfect, but it appears to be functional.
Any feedback on the page's functionality and animations is greatly appreciated. :)
P@vandermsPosted over 2 years agoNice 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.
1 - @SonTonyDSubmitted over 2 years ago
Hello, It's my first project with Angular and I have a question about the Observables from rxjs : Should I have used the observables for this project ? AND In which case and for which features should I use observables? Should I use Observables as often as possible? Thank you !
P@vandermsPosted over 2 years agoHI, 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 helpful1 - @correlucasSubmitted over 2 years ago
👾 Hello, Frontend Mentor coding community. This is my solution for the QR Code Component.
Making this challenge again was something really amazing for me, first because going back through my past challenges I was able to fix some issues and clean my code and then because was my first time using JS (yes I'm a newbie) 😂
I added some features:
- 🎨 Dark and Light mode button
- 👾 Custom QR Code image
- 🧚♂️ A little bit of color customization
- 👨💻 Custom image hover state
I'll be happy to hear any feedback and advice!
P@vandermsPosted over 2 years agoHi, 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 helpful3 - @jchaparSubmitted over 2 years ago
Hello everyone, would really appreciate some feedback and any advise to the following issues i had. Thanks in advance!
- hiding the API keys when only using Vanilla JS. I'm aware of dotenv with Node but was having some trouble trying to get it to work (haven't worked with node before). I know its not good practice to include these in the repos but thought it would be ok for this challenge as I am still researching and learning.
- Ternary operator within template literals. As of now, if a profile searched has no Bio, it will just say NULL. My idea was to try to use a ternary operator to either generate the Bio from the profile data or to display "This profile has no bio." but has some issues implementing that. Similar goes for the blog and twitter details
P@vandermsPosted over 2 years agoWell 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 helpful0
