All solutions

Hello everyone. This is my solution to the Maker Pre Launch Landing Page.

I used React/Typescript with a Postcss plugin to enable SCSS like nested CSS.

I hope you'll enjoy 😊

Let me know if you find any bug/glitch or anything I could improve.

Have a good day/night. Peace 😊

Hello everyone. This is my solution to the Tic Tac Toe Game.

Yet another project made in React where i made my first ever "bot logic". As I said in the README, I did not hardcode the "best moves" at the start of the game to keep if fun instead of always ending on a draw.

I hope you'll enjoy 😊

Let me know if you find any bug/glitch or anything I could improve.

Have a good day/night. Peace 😊

Hello everyone. This is my solution to the Dictionary Web App.

Another project made in React where i tried to spend some time making some cool animations.

I hope you'll enjoy 😊

Let me know if you find any bug/glitch or anything I could improve.

Have a good day/night. Peace 😊

Hello everyone. This is my solution to the Dictionary Web App.

It's been a long time since my last upload 🙄

I used React w/ Typescript & Vanilla CSS.

Let me know if you find any bug/glitch or anything I could improve.

Have a good day/night. Peace 😊

Hello everyone 😊 This is my solution for the Easybank Landing Page challenge.

The main difficulty in this project is the hero images. I am not 100% pleased with the result I got but it works so i guess it is good enough.

I think the design itself is not the best. Some fonts are too small for good accessibility IMO and the spacing is highly inconsistent between each section/component. IRL I would have try to talk to the designer in the team about these.

Feel free to share any advice/improvements you would like to see implemented in the code.

Thank you for your time. Have a nice day/night. Peace 😊

Hello everyone. This is my solution to the Notifications Page challenge.

This was a project with a small amount of code/styles.

I have been doing challenges 7/7 for more than 2 months now and I wanted to know how much I improved my fundamentals.

I did it in 4 hours which is still a bit too long I think but I had to create the data object + the usual TS interfaces by hand since there was no JSON in the starter-files.

Also little note for anyone trying this challenge. The style-guide is incorrect. You need 3 different font-weights (500/700/800) instead of 2 so be careful.

Let me know if you find any bug/glitch or anything I would improve.

Have a good day/night. Peace 😊

Hello everyone 😊. This is my solution for the Password Generator App challenge.

It is the second time I use solid-js and it went pretty smooth! I love the framework. It feels like an hybrid between React and Vanilla JS.

I added two little bonus :

• Generate only strict passwords (at least one character of each selected rules).
• Toast notifications success/error (copied to clipboard).

Regarding accessibility as always I tried to do my best but this time I used a new pattern.

I tried to not use the disabled HTML attribute but work with the aria-disabled instead. It means that I i am required to check for the validity of the inputs in the JavaScript because the buttons are actually clickable even with the "disable" style.

It might sound like more work but it is not! Why? Because I do it anyway.. You can remove the disabled attribute from the developer console (F12) and break the app if the only check you have is a "disabled" button.

I also added a tooltip to explain why the button is "disabled" for a better UX.

For users using keyboard navigation & screen readers it is a big + ! Because the button is still focusable and they know why the action fails.

Anyway. That is a long message. So if you are interested here is a link to a blog post on that subject.

Feel free to share any improvement you want to see implemented in this project.

Thank you for your time. Have a nice day/night. Peace 👌

Hello everyone. This is my solution for the Tip Calculator App challenge 😊.

It is the first time that I use solid-js and I liked it a lot. It almost drove me crazy once because of a really obscure bug I add with props de-structuring. For anyone using solid-js in the future remember that you can spread props when calling your component but NOT de-structure them in the component function (If you want to keep the reactivity). If you want to do it anyway (which i understand) you should use the built-in splitProps helper from the API.

I hope you like my solution and feel free to share any advice/improvement you would like to see implemented in the code.

Thank you for your time. Have a good day/night. Peace 😊

Hello everyone. This is my solution for the Space tourism website Challenge.

First time I have access to the Figma files thanks to the Free+ tier and it was really awesome!

This was the biggest project I made on this website and the more fun I had until now. I used a lot of CSS Grid and think I improved a lot on that matter.

As always I tried to focus on accessibility and UX so everyone can enjoy their trip in the outer space 😋.

Since last time I used SCSS, I thought that I might give a try to postcss with the postcss-preset-env plugin.

Here is a little example of the magic:

/* Custom media queries */
@custom-media --screen-mobile-only (width < 640px);
@custom-media --screen-tablet (width >= 640px);
@custom-media --screen-tablet-only (640px <= width < 960px);
@custom-media --screen-desktop (width >= 960px);
/* Custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

If you wanna read more about my feelings on this challenge follow this link to the github repo

Feel free to share any advice/improvement you might wanna see me implement in the design or the code.

Thank you for your time. Peace 😊

Hello everyone. This is my solution for the Sunnyside Agency Landing Page challenge.

This project was pretty much a CSS-only challenge. I chose this one thinking "I am going to chill with a Junior Project" and let me confess: It was not easy.

Many hard choices especially with the images! I chose to add them in the markup instead of using the CSS background-image because it seems to me that they are as important as the rest of the content. This decision led to more absolute positioning than I'm used to.

I am not really pleased with the current layout above 1440px. The images are not wide enough for this, so it gets really pixelated.

I can't really add a max-width to the whole thing tho it does not look like this type of layout. If you think about a solution feel free to share! 😄

Thank you for your time. Have a good day/night. Peace 😀

Hello everyone. This is my solution for the IP Address Tracker challenge.

I used ipwhois.io because of the credit system for geo.ipify.org however it means that the app only works with IP Address and not with domains.

It is the first time i worked with SCSS and i loved it 😀. I will probably always use it if I don't use tailwind for a project.

This time i wanted to make it as close to the design as possible without the design files so i created my own figma file based on the jpgs from the starter files.

I also chose to validate the form data with a Regexp & display the API errors in a custom made toast that hopefully you won't ever see because everything will work fine 😁.

Feel free to report any bugs and share some improvements you would like to see me implement in the project.

Have a good day/night. Peace 😊

Hello everyone. This is my solution for the Url Shortening API challenge.

I chose to make it fullstack using the Supabase Authentication API & Postgres Database.

I first started working with client-side but was annoyed by some side effects related to the default authentication method of Supabase which uses localStorage (no prefetching of the user/data 😪).

So i decided to migrate everything to SSR with tokens, session cookies, etc...

Also why is the screenshot so broken ??

Feel free to share any improvement you would like to see in the design/code.

Have a nice day/night. Peace 😃

Hello everyone.

I had a really good time w/ this project but the complexity was the JavaScript rather than the design itself.

I also added the possibility to use only the keyboard.

• Arrow (left & right) to switch the theme
• Numbers from 1 to 9, Operations & "." Dot)
• Backspace to undo the last action
• "=" Equal Sign to get the result
• Delete to clear the calculator

I also chose to use SSR for the theming because i was annoyed by the flashing screen on previous projects on load before having access to the theme settings in local storage.

You can find the logic in the README of the solution.

Feel free to share your thoughts on my code/design and thank you for your time.

Have a good day/night. Peace.

Hello everyone.

This was a very nice project where i took the time to think about accessibility.

I tried to give to the user the possibility so navigate with keyboard only. Using Shift, Shift+Tab, Enter & Escape keys.

Please test it yourself and and let me know if i missed something.

One thing i wonder is how does it feels to use a screen reader. It would be an amazing experience if i could try one but i have no idea how it works, or how to setup one and if there is an open-source screen reader.

Anyway, feel free to share you thoughts on my design/code.

Have a nice day/night. Peace

Hello everyone.

It was really fun to build a little game. Actually my first time going for this type of project.

Feel free to share any advice or improvement you would do to my code/design.

Have a good night/day. Peace

It was a great project to practice dynamic routes in Sveltkit.

But i could not find the way to catch the API call errors on the client side.

Maybe you know how ? 😊

I would also like to implement a caching system (maybe service worker ??) for already fetched endpoints.

If you have any advice or resources on that matter or anything about the layout or the code feel free to share.

Have a nice day/night. Peace

Hello everyone.

This project was the most complicated until now because of the flipping card bonus.

I hope you like it but feel free to tell me about any improvement i could make in the code and the animations.

Have a nice day/night. Peace

Hello everyone.

Feel free to share any advice on my design/code.

Thank you for your time.

Have a nice day/night. Peace

The form validation logic was very fun to build with some good challenges.

I think my solution is pretty close to the original design but i have a problem with the way i managed the placement of the text in the reactive cards:

I used CSS clamp to keep the text in the right area as the cards change size but i discovered that the property is not supported on Firefox mobile (and maybe others that i could not test)

I would like to know what technique i should use for more compatibity.

Thank you for your time.

Have a nice day/night. Peace

Feel free to share w/ me your thoughts on my solution.

I chose to not use a framework because it is a really simple project. But i'm in love with tailwindcss so i could not go without it. 🤣

Have a good day/night. Peace

Hello everyone.

I did not test the app in details so you might find some unexpected behaviors. Please share with me your feelings on the code or my take on the design.

I think it is pretty close to the design even tho i change some little thinks like the background of the disabled buttons for exemple. Because i think you should clearly see when you can or cannot click. (for exemple not being able to submit an empty comment, etc...)

I really appreciate the time you take to review my work.

Peace. Have a nice day/night

Hello everyone.

This project was a good practice to localStorage w/ writables in Sveltekit. I ran in multiple problems w/ tha SSR part of the app.

I plan to come back to it and implement drag&drop on my own. I managed to make it work w/ MouseEvent but it would always break w/ TouchEvent.

Any advice/ressources on that matter would be great.

Also, do you know a way to prevent the page from "flashing" on initial load when the store theme mode is yet to be retreived from the storage. It will always be the default value for a short moment before eventualy switching to the user setting.

Have a nice day/night. Peace

Hello everyone. With this project i discovered svelte Endpoint system however i am having a hard time finding a really good explanation on all the more complicated API methods (POST, PATCH, etc...). The docs is not so clear on that matter. So if you have some good ressources please share it with me it would be very kind. Also i search for a way to make the transition between two sentence of a really different lenght more smooth since it will kind of "jump" sometimes is it goes like from 5 words to 20+.

Feel free to share any suggestions & advices on the project.

Have a nice day/night. Peace

Edit:

I had to update the cache options for the fetch API to get a new quote w/ each API call.

The cache: "no-cache" does the trick

const getRandomAdvice = async () => {
  return (await (await fetch("https://api.adviceslip.com/advice", { cache: "no-cache" })).json()) as Slip<Advice>;
};

Hi everyone. I ran into two problems with this project.

I would like to know why the text look like it has a small bottom padding. (If you look at the dropdowns you see that it is not perfectly aligned even tho i used align-items: center) I tried to mess with the vertical-align but not an option in flexbox; line-height not working; padding already set to 0. Can you please help me on that?

Also i had to use 3 breakpoints for the hero image to make it scale but i would like to find a good calc() formula to make it more fluid as the viewport grows.

Thank you for the time. Peace