All solutions

What are you most proud of, and what would you do differently next time?

This project encourages as an extra challenge to add automated tests. I deep dived into learning it properly and applied unit and integration tests that I'm proud of.

I also never used keyframe animations before because Tailwind makes basic animations easy. But I decided to refresh my knowledge and applied some animations to cart items adding / removing and I played a little bit with the add to cart button. Very nice project and I loved working on it. Initially I spent around 4.5hours but then I started learning testing and sinked 10+ hours into this.

I'm a little bit disappointed by using Context API for state management and it's performance on mobile devices. Will probably use a 3rd party library next time.

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

The main issue I faces was making Jest and react-testing-library work with TypeScript. There should be an easy way to do this but few things must be configured so I spent a lot of time tinkering with it and finally solved it. A lot of packages are needed for this :(

What are you most proud of, and what would you do differently next time?

This project took around 5 hours of time including some learning. I need to work on faster html markup and not get caught in details for styling. However, there were some interesting design differences in mobile / desktop so it was fun to try to come as close as possible to the designed look.

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

I had to learn how to implement drag and drop. Nice 15 min tutorial on youtube was enough. I already implemented this in C# in game industry so it was more like learning specific syntax and event default behaviour for web.

I was introduced to dark mode in Tailwind which is pretty simple and can be used in conjuction with html attribute.

What are you most proud of, and what would you do differently next time?

I'm proud that my Context and Astro API abilites are getting better. As usual the initial setup of theming and CSS template values is important to fasten the development process.

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

I had issues with shortener API so I had to switch to short.io after hours of debugging my deployment process. I had some issues making the images overflow the page flow. My UI components are not as clean as I would like to. The project needed to be refactored if I would built upon it.

What are you most proud of, and what would you do differently next time?

I'm proud of making the country API work with Astro. This allowed me to fetch the data during build and could be updated as often as I seem fit (in real world). I have also learned how to track state in the url for better user experience.

Next time I would use React Router and have SPA instead. I found some issues with page transition in dark mode which I had to work around. I would also avoid fetching countryData twice (both for homepage and detail pages) which could save some failed build trouble.

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

1. I couldn't make environment variables work in github pages so I work around that by first build and publish the API and then reference the live url api in the app - not cleanest solution. But I believe this is not a common problem in real world where the API could be separated (we had the data in json file).
2. I wanted to have a nice transition between dark and light theme but I had to omit it because it was transitioning between pages and looking akward. This would not be a problem if I used a SPA approach instead.

What are you most proud of, and what would you do differently next time?

I'm proud of making a future proof Cart and Gallery management and learning various Typescript related stuff.

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

I had issues correctly defining all the type for my context files but managed to fix it with help of ChatGPT.

What are you most proud of, and what would you do differently next time?

I would use a Svelte store right from the beginning to keep track of the form data.

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

I had some difficulties adding total price to form data store.

What are you most proud of, and what would you do differently next time?

It took me less time than expected. I practiced some nice css techniques and I wouldn't do anything differently.

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

Positioning of the mountain background-image was new to me. I had to look it up.

What are you most proud of, and what would you do differently next time?

I'm satisfied with the final implementation of theming. I need to invest more time into project structure.

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

I struggled with theming because I chose to do it with svelte stores but it was an overkill which I then simplified. I tried to make the css as small as possible yielding problems with different theme structure. I needed to learn more about tailwind dynamic classes.

What are you most proud of, and what would you do differently next time?

I wanted to exercise my JS skills without any FE framework and I wouldn't do it again for reactive elements. It actually proved a bit too complicated to polish the success page and separating code to multiple files would be less understandable.

I'm proud that making the complete form took me less time than usual!

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

Deploying to GitHub pages proved harder than I expected but I'm glad I researched and practiced this.

Source images are also not great for screens between desktop and mobile but I'm sort of satisfied with the result.

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

For static page like this, what would be the best way to separate UI code for form and success page into multiple files? I couldn't figure out how to then dynamically change it with client side JS.

Hi, I would like to ask if it's worthy to use a reactive SPA framework for a real world project that uses just 1-3 components with dynamic content like this. It feels like too much redundant JS , doesn't it? Is it okay to use a vanila JS approach like I did with extra markup with display: none toggles.

What do you think? How are these projects tackled in a real world? (Simple personal pages with feedback or a form).

Thanks, Aleš

Hi, Is there any convention for naming variables and functions in the frontmatter of Astro if they are used outside of the frontmatter or privately for some calculcations? See the example below - scoreSum is a variable that is used for calculcation purposes only and is not used in the markup itself.

Therefore I would rename it to _scoresSum to indicate that its "private" although I don't think you can scope variables in Astro, correct?

1. Would you just stick to the standard naming or do you use any indication that it's "private"?
2. Can variables be private - scoped to frontmatter only?

---
let scoresSum = 0; // used 
categories.forEach((category) => (scoresSum += category.score));
const totalScore = Math.round(scoresSum / 4);
---

1. I've noticed that the browser actually shows my class names ie. .overview__score-maximum in the html. This raises a question. Should I use standard class naming (ie. BEM naming convention) as I would without scoped CSS or is it okay to just omit classes where not needed because of scoped CSS (meaning components would use tag selectors instead of unique classes)

Loving Astro so far. Thanks for any feedback!

Aleš

Hi, would like to get your opinion on font-sizes.

1. I prefer using rem for font-size so it scales nice with users setting in the browser. Is it a good practice to scale fonts according to vw size and clamp it to rem?
2. How can I easily apply a base text size? Will the code below scale every child font-size?

body {
font-size: 0.8rem;
}

@media (min-width: 40rem) {
body {
font-size: 1rem;
}
}

.child {
font-size: 1rem;
}

Thanks! Aleš

Hi, I'm new to CSS and would love to get your opinion on my choices and suggestions for cleaner code.

1. Is using Flexbox on body with justify-content: center and align-items: center the best way to center elements vertically? I initially thought of using margin: auto but it works for horizontal axis only.
2. I struggled moving the attribution to the bottom of the page. My solution uses position: absolute and bottom: 0. Is this a clean solution? Trying different attributes using flex ended up to mess with centered container.

Thanks! Aleš