Jan Kotvaš
@DrakeHermitAll comments
- @FixitoSubmitted about 1 month ago@DrakeHermitPosted 25 days ago
I'd suggest that you hide the password strength bars all together before the password gets generated. Also you could probably try to implement custom range slider feature.
For some reason when you select 20 characters the last character always does not get shown. One more thing I'd like to point out is the fact that you don't generate a password if the user only selects one checkbox. But I like how you used the module system, kudos for that.
Oh one more thing, I wouldn't necessarily put my CSS and JS inside of the assets folder, that folder is meant for static files like images and svgs
0 - @tedikoSubmitted 4 months agoWhat challenges did you encounter, and how did you overcome them?
Hello! 👋
MovieDB is a full-stack application written in vanilla JavaScript that serves as an interactive hub for movie and TV series enthusiasts. To provide seamless user authentication and data management I used Supabase backend-as-a-service (BaaS) solution. This integration ensures secure user registration and login process, efficient session management which enables users to build their own collection by bookmarking favorite movies and TV series as well as completing profile with data and custom avatar with all user-specific data securely stored in the database and storage. App fetches data from The Movie Database (TMDb) API to deliver up-to-date and extensive information on films and TV shows. Both API and database operations are handled on Netlify serverless functions backend to reduce the load on the frontend, leading to faster response times and a more responsive user experience. This allows for better management of sensitive data, as environment variables can be securely stored and accessed only on the server side, removing the risk of exposure in client-side code. MovieDB App allows users to explore, search, bookmark, create their own user profile and engage with a vast collection of media content as well as display information about a specific movie/TV series on sub-page.
With the integration of user authentication I've decided to elevate app functionality and user experience by designing an landing page that serves as the introduction to MovieDB App. This landing page streamlines the user authentication process by providing registration form and login cta button redirecting respectively to register and login sub-page. Moreover showcases selection of popular movie trailers in slider that users can watch in popping lightbox modal that has trapped focus for users that require accessibility features. Additionally, there is a placeholder section with mockup image that contain video within.
After logging in, the user is redirected to the app which is based on the single page application (SPA) architecture with custom router. For handling bookmark state across SPA I created central state management system - bookmarkManager. This allows components to subscribe to bookmark updates and receive notifications when bookmarks change without the need of fetching it from database. If logged in user navigate to route that doesn't exists router will redirect to 404 page. To improve user experience while fetching data I implemented shimmer effect which is simply visual feedback during data fetching. User can login on test account to explore app without the need to register, but test account is limited when it comes to updating profile with custom informations/avatar.
🚀App features
- User Authentication: Users can create an account by providing email and password and then log in to the app using their credentials, providing a secure and personalized experience.
- Search: Functionality that allows to search for movies or TV series by title.
- Trending: Dedicated section where users can view a list of currently trending movies or TV series.
- Latest Trailers: Showcase of popular movie and TV series trailers in a slider. Users can watch them in a lightbox modal.
- Recommended for You: Personalized feature that suggests movies and TV series based on the titles user have bookmarked.
- Top rated: A list of the top 100 movies and TV series, ranked based on their overall user ratings.
- Bookmarks: Personalized space where users can store and manage their bookmarked movies and TV series.
- Details page: Each movie has a dedicated sub-page that provides users with a detailed informations, list of the actors involved, photos and similar titles recommendations.
- Random title: Randomly selected movie/tv series displayed within details page.
- Profile: Customizable account settings. Users can upload a custom avatar or update account information including name, email, and password.
- 404 page: "Page Not Found" with a little easter egg. Instead of a standard error message, users are greeted with a funny message and a playful image. User need to be logged in.
💡Here's some new things I used or learned:
- Sass placeholder selector is special kind of selector known as a “placeholder”. It looks and acts a lot like a class selector, but it starts with a % and it’s not included in the CSS output.
- The try..catch statement is a powerful tool for error handling in JavaScript. By implementing it effectively, you can create more resilient applications that provide a better experience for users.
- JSDoc comments enhances code readability and maintainability by providing clear documentation directly within the source code.
- Focus trap is a JavaScript utility designed to manage keyboard focus within a specified element, enhancing web accessibility by preventing focus from escaping outside of interactive components, such as modal dialogs.
- URLSearchParams is a built-in JavaScript object that provides a convenient way to work with the query string of a URL.
- Promise.all() allows multiple fetch operations to be executed concurrently, rather than sequentially. This can significantly improve performance, especially when dealing with independent API calls
- How to build router in vanilla JS - Routers control the application's views based on the URL, without the need for full-page refreshes. While several libraries such as React Router for React offer robust solutions for managing routes in SPAs, you can build your own rudimentary router in Vanilla JavaScript to understand the underlying mechanics.
- createObjectURL() static method of the URL interface creates a string containing a URL representing the object given in the parameter (Blob in my case).
- Replacing switch statements with Object literals
🛠️Build with: (can be found also in my others projects)
- Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: a dev server, and build command that bundles your code with Rollup.
- Sass CSS pre-processor is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
- BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
- Supabase is an open-source backend-as-a-service platform designed as an alternative to Firebase.
- Serverless Netlify functions open a world of possibilities for running on-demand, server-side code without having to run a dedicated server.
- Swiper is a JavaScript library that creates modern touch sliders with hardware-accelerated transitions.
❓Questions:
- Any suggestions on how I can improve are welcome! If you want to learn more about my process - README.
@DrakeHermitPosted 4 months agoMy freaking god this is just awesome, I legit got goosebumps. @tediko Hats down, I aspire to become as good as you one day. I will make sure to go over all of your code and try to figure out all the ins and outs as much as I can.
EDIT: I just love how you included a test account.
2 - @talamaSubmitted 4 months agoWhat specific areas of your project would you like help with?
Comments and suggestions always welcome!
@DrakeHermitPosted 4 months agoYour solution looks great, other than the fact that the background color isn't spanning across the whole screen. Also maybe the indentation looks off in your HTML markup
Marked as helpful0 - @BarrosLucasJavierSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
No comment
What challenges did you encounter, and how did you overcome them?No comment
What specific areas of your project would you like help with?No comment
@DrakeHermitPosted 4 months agoI actually love how you made it auto calculate the tip just by filling in the numbers. But I noticed that it calculates the tip without accounting in the number of people and then I noticed you set the people count to 1 on page load. I would've probably handled that a bit differently, but that's just me. One more thing the "Can't be zero" error message doesn't go away and the field border is green which it should be red/orange.
But I'm just nitpicking at this point, great job on finishing this challenge. You gave me ideas on how to do stuff differently and I always value that.
Keep on coding!!!
Marked as helpful0 - @PeterBachman100Submitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Happy with the layout. Next time I might add some subtle animations.
What challenges did you encounter, and how did you overcome them?For a while I wasn't sure how to go about the HTML for best semantics and to provide easy "hooks" for the CSS and JS. I looked around at what other people had done in similar situations, read some guides, and worked with ChatGPT.
What specific areas of your project would you like help with?Open to feedback for any improvements!
@DrakeHermitPosted 5 months agoYour solution looks great to be honest, but I see that the area where your icons are is protruding through the main card. Also I noticed that in your JS you didn't include the JSON data file which means that you had to manually code everything and then enable or disable the hidden class. I personally wouldn't do it that way since this was a perfect challenge to practice your JSON data retrieval which is a crucial part in front end development.
But hey I'm a beginner too I can't judge too hard, we all have reasons why we do something differently.
0 - @svo15Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
js code
What challenges did you encounter, and how did you overcome them?validation form
What specific areas of your project would you like help with?js code
@DrakeHermitPosted 6 months agoYour HTML seems good to me, but you didn't make the component responsive which is most definitely a must in this day and age. Now to your JS, you should figure out the validation part of the challenge since it will really help you out to learn to add and remove classes/elements from the DOM, right now your solution doesn't redirect us to the success page which it should. But I would say you're on the right path, just keep on learning and happy coding.
F.Y.I - I suggest you look at different people's codes and see how they solved the validation part, as that will teach you a lot more about different ways of solving the same problem
1 - @Randomgituser69Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
Idk, probably removing some unnecessary br tags and fix the image align to right side of the text
@DrakeHermitPosted 6 months agoI absolutely have no idea what this solution is supposed to be.
I suggest you start with the first Learning path with just HTML and CSS. Start Here
But I might as well give you some pointers. Your webpage just needs one
index.html
file and onestyle.css
file. Having both the CSS and HTML in one file gets really hard to manage when you start working on other projects.Also this challenge requires you to use JS to make the button click interactive, button click should show the popup with the links.
0 - @hatealgebraSubmitted about 1 year ago@DrakeHermitPosted 6 months ago
HTML has semantic tags - awesome. Since you used tailwind and I'm not really well versed with it I can't really comment but your solution looks good. But that is kind off expected when you're already hired as a junior web developer.
So all in all great job, I might as well learn from you myself :smile:
Marked as helpful0 - @yudixaSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
In this challenge, I started to learn more about grid function, and it's not as hard as I thought 🎉
What challenges did you encounter, and how did you overcome them?Still working on the mobile version.
@DrakeHermitPosted 7 months agoYour solution is but the cards are a bit too big compared to the design, but that's not a problem at all.
Make sure to finish the mobile version of the design too, maybe going with mobile first approach for this challenge wouldn't be a bad thing.
But other than that your code seems good, but there are few things I would change.
- Don't put your resets on
html
selector - I would have a
<main></main>
tag as the container for the whole thing - Don't use
<div>
to display text, use the paragraph<p>
tag font-family
,font-size
, andbackground-color
usually go on thebody {}
selector- Make use of CSS variables since they help out a ton, here's a link that explains CSS Variables
Marked as helpful0 - Don't put your resets on
- @vdeleeuwSubmitted 7 months ago@DrakeHermitPosted 7 months ago
Your solution to this challenge is good, and HTML and CSS wise I have no remarks to be honest. But I would suggest that you do two things:
- Keep your CSS and HTML separate
- I would work on the README file too, it let's you reflect on how things went and where you need to improve your skills.
At least that's what I believe.
Happy coding!
0 - @rimar-basaaSubmitted 7 months ago@DrakeHermitPosted 7 months ago
HTML Wise
- You need to have at least one h1 in your HTML
- With the PERFUME part there's a CSS property you can use to make the letters stand further away from each other called
letter-spacing
- Also I would use the
<main></main>
tag with a class to wrap my content together instead of just using a div. - I would also remove the attribution div and the
tag within HTML
but that's just me, you don't have to do it if you don't feel like it.
CSS Wise
- You need to work on making this component responsive which it isn't right now.
- Don't add fixed width and height on the
body
selector which adds an overflow bar on the bottom and it doesn't center the whole component whatsoever, if you want to center the whole component use this CSS code
body { display: flex; min-height: 100dvh; align-items: center; justify-content: center; }
- You're adding font family to everything basically which isn't really up to DRY standards(Don't repeat yourself), either make a class that adds the font family to a block or use inheritance by setting the font family to the
body {}
selector. But since this challenge requires you to use two different font families I would go the class route. Also while setting up font-family you want to add a backup if for some reason the font doesn't work.font-family: 'Fraunces', sans-serif
for example. - Also I would strongly encourage you to make use of CSS variables which makes it so much easier to add a color or anything that needs to repeat in your code. CSS Variables
Keep on working on your HTML and CSS, Happy coding
0 - @adhikariprayagSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I'm happy with how closely accurate my design is. I have made use of table element this time, which I often ignore aswell.
What challenges did you encounter, and how did you overcome them?I struggled while matching the look of the main image and styling the table. While I was not able to solve those issues fully, I have tried my best to match what was put in front of me.
What specific areas of your project would you like help with?I would like help with the top and bottom parts of the recipe card. They are the only ones I'm having trouble fixing.
@DrakeHermitPosted 7 months agoHTML wise
- I would use a <main> tag to group all the content together, it makes it easier to style the whole component.
CSS wise
- I would add margin-block on the whole container so it doesn't look so squished up against the edges of the screen.
- Keep on using variables since they help a lot
Other than that I have no problems with your solution, keep on working on your web dev skills.
0