Design comparison
Solution retrospective
console.log("Hello Programmers")
,
This is my first project ever using TypeScript and Vue.js, and I hope I did a decent job.
Technologies Used:
Naming Convention:
- BEM (Block Element Modifier)
Difficulties Encountered:
- Media queries: I always find working with media queries to be a pain, especially with Vue components that are reliant on one another. Any suggestions on how to better tackle this are greatly appreciated.
- Linear-gradient: linear-gradient does not play nice with the transition property, if you have any work around please leave me a comment.
Questions:
- Does Vue.js scoped styles make the BEM naming convention redundant ?
If you have any suggestions on how I can improve my code, I would greatly appreciate it if you could leave a comment. Thank you in advance. (✿◠‿◠)
Community feedback
- @angusgeePosted about 1 year ago
Caramello, your feed is great! Your solutions are on point and your use of Vue and TS is something I can only aspire to. 🙌
I do have one small suggestion for this project. On both the standard Desktop view and Success state, I think the UX could be improved slightly by removing the ugly blinking caret:
caret-color: transparent;
Marked as helpful1@BuzzFizzerPosted about 1 year ago@MaltaWebDev, I really appreciate you taking the time to review my solutions.
Regarding the caret, I also agree that it looks better without it. I'll certainly make that adjustment once I'm at my computer.
1 - @Wladi1000Posted about 1 year ago
Hello Caramello.
To have a better experience with the Responsive web design I recommend using Mobile-First. A methodology for styling starting from the smallest to the largest screen, this way your projects, if they grow, will have a good scalability.
https://www.youtube.com/watch?v=0ohtVzCSHqs
Marked as helpful1 - @Haiko-EPosted about 1 year ago
He there, wanted to give you an answer on the scoped style and BEM. When using scoped styling, BEM is not necessary. Just back to writing short classes 🤙
about media queries, i also think its a pain in the ass. But if your trouble is to handle it with different components. the new container queries is gonna be a nice solution. still not fully supported by browsers but think its gonna be very helpfull in future.
Marked as helpful1 - @rivenintechPosted about 1 year ago
I was also looking for a workaround to create a transition between gradients on my second challenge. I found these interesting:
I didn't test them yet. I had enough "fun" after trying to match gradients on my second challenge.
I hope one of these works. 😀
Marked as helpful1 - @seanhillwebPosted about 1 year ago
I had a similar difficulty with transitions and CSS gradients. I found this article to be helpful and informative: https://fjolt.com/article/css-animating-transitions-gradients
However, I didn't use this approach for my solution either. This feels over engineered.
Marked as helpful1 - @davidrockkjPosted about 1 year ago
Your main-board have the exact size from design's main-board. How did you do that?
1@BuzzFizzerPosted about 1 year agohello there @davidrockkj,
I use the
PerfectPixel
extension to get my code looking as close as possible to the design, highly recommend checking it out.1 - @nachospreaficoPosted about 1 year ago
Hey Caramello! Really loving your feed. Although I don't use TS or Vue, I find your work nicely organized and the designs really on point.
Keep it up, you are really on to something! Happy coding.
1 - @c3c3c5Posted about 1 year ago
i see u understand the concept of over shooting and under shooting. master is proud of you.
1 - @iArmanKarimiPosted about 1 year ago
Impressive solution! Your use of TypeScript and Vue.js for the Newsletter sign-up form is commendable. The form looks clean and user-friendly. Keep up the great work! 👍
1 - @NikNTPosted about 1 year ago
An excellent job, Caramello!
If possible please checkout my YouTube video where I undertake this challenge using ReactJS and CSS. Any feedback would be highly appreciable.
https://youtu.be/B9T_yjWqZtk
Keep Coding.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord