All solutions

How's it going guys? Here I have this challenge. Positioning the hero illustration was rather stressful, but I didn't give up. #SigmaGrindset

1. I had some trouble with the Clipboard API. It crashed on Firefox, so I had to do something like this:

export const copiedLink = writable<string | null>(null, (set) => {
  try {
    navigator.clipboard.readText().then(set);
  } catch (err) {
    console.error('Unable to Read Text from the Clipboard');
  }

  return useListener(document.body, 'copy', () => {
    const selection = document.getSelection()?.toString();
    if (isString(selection) && !isEmpty(selection)) set(selection);
  });
});

You guys know of a way to get the clipboard text on Firefox?

Thanks for viewing/feedback. Have a great day!

What's up folks! Another fun project, although It took a substantial amount of time, but it was straightforward to code using Svelte, WindiCSS and Malachite UI, my own component library. I used the Accordion, Popover and Tabs component, so all I had to do was install, import, add markup, style, add transitions and chill all day.

The blue blobs behind the illustrations didn't make it. I tried to add them but it was at the end when everything was all done, I would have had to do breaking changes to the overall layout of the page which was a price I was not willing to pay, at least not for now xD. How did you guys handled those blob things?

Thanks for viewing/replying. Hope you all are doing great and have a good day!

Yoooo What's going? Well this one was really fun to build. I used Svelte with TypeScript with the built-in animations and created custom hooks for handling all state. No need to install any state management nor animation library so the app is really small. I also added my own component library and used some of its additional utilities.

The drag and drop didn't make it, sigh. I tried to use a library but had a bug so I had to leave it for another day.

One thing I am not really sure about is:

• Upon adding a new Todo, the filter resets back to all so that you can see it at the top regardless of whether it is complete or not. Maybe I should preserve the current filter or use the state of the new Todo as a filter. What do you guys think would make a better UX?

Anyways thank you for viewing/feedback. Hope you guys are doing great and never give up. Peace!

Yooo Shawn here with yet another one to add to the list. This one took only 59 lines of code to build everything, both HTML and CSS. Svelte + WindiCSS prevent having to read through tons of different files.

Thanks for viewing/feedback. Hope you guys are doing great. Have an awesome day and never give up. Peace out!

Yooo what's up folks? This was a cool project. I used the Accordion component from my own component library, you can use your keyboard arrows to navigate each item, styling was easy since it is headless and I just had to rock WindiCSS. I didn't have much fun positioning the images though, I guess there is an easier way to do it.

Thanks for viewing/feedback. Peace out.

What's going on? Shawn here with another challenge. This was a cool project since I used my own headless component library from npm to quickly create the popover. All state and accessibility is managed by itself so that all I do is worry about styling. The animations are all from Svelte, no need to install complex and large libraries!

Thanks for feedback/viewing. Have a great one.

Hey! It's been a long time since I solved a challenge. In this one I finally tried Vue again and well, it was fantastic! Vue 3 with Composition API + TypeScript + Devtools provide a next level developer experience. And to spicy things up I added UnoCSS: an atomic, blazingly fast CSS engine that allowed me to add atomic classes as attributes! I also switched to pnpm and its terrific!

However I had trouble defining default values for component props. What is the right way for doing that? I used computed variables to solve it but I don't think that's the way it's done.

Thanks for viewing/replying. Have a great day!

Hey! What's going on? Shawn right here with yet another one.

I wonder if it makes sense to use a h1 for the card title.

Thanks for viewing/replying :)

Hey what's going on? This one was built with the built-in Svelte transition and state management api so there was no need to install any external library.

1. I had to add and remove margin to the main element to keep the job listings in the same place whenever the filters section appears and disappears. I didn't use absolute positioning for the filters section because if it grows vertically it would not push the list down. Do you guys know of a cleaner solution?

Thanks for viewing/replying. Have a great day!

What's going on? I finally completed this one. It didn't take much time but I made a massive mistake while rebasing and had to do a pro gamer move to get it restored. Anyways.

1. Is there a tag for displaying stats?
2. Should those stats have some kind of label to specify what they mean? or is it ok to leave them as is and hope the text of the nearby HTML is enough.

Thanks for viewing/ replying. Hasta la vista and have a nice day! :D

Hey Shawn here again. This one took a good chunk of coding. Svelte, Sveltekit with shadow endpoints and TypeScript made the dev experience much better. I implemented pagination so that all the 250 countries are not rendered at once and impact the performance, I also tested it with Vitest to make sure it works. The filtering is chained so that you can filter by country name and region at the same time and the results are still paginated! The SSR and prefetching allows the page to load everything much faster for a near app feel.

I wonder if I did the accessibilty well; there is always something I missed or did wrong :'( Hope you guys can tell me what I could improve, especially the a11y.

Any feedback would help a ton. Have a great a day.

What's going on? Shawn here. This one was quite tricky and my code is kinda messy. I think I should do a serious refactor soon.

Feedback is welcome. Have a great day!

Hey Shawn here with yet another challenge. This one was a joy to build because of Sveltekit, it was just really easy to get everything working.

My questions are:

1. I used a form to wrap a button for requesting a new advice. Is it a good practice?
2. The button has the attribute aria-labelledby linking to the id of a sr-only label. That's how it's done for getting screenreader support?
3. Could have I used the label for the form instead? Can forms be labelled?

Thanks for any feedback in advance!

How's it going folks?

My questions are:

1. Buttons should have some kind of description to announce what action they do?
2. Do screenreaders announce the text content of the buttons and if so, can they be left as is?

Have a great day! Ty for viewing/replying.

What's up folks!

Thanks to this challenge I learnt a cool trick using WindiCSS for the view element that appears when hovered over the main image. First I set it to hidden and when hovering I set it to inline and works perfectly. Issue was adding a transition; cannot transition a display state, so I came up with a quick solution of ditching the preview method and playing with opacity and pointer events, and it just worked with few classes! I love WindiCSS even more now!

PS: I kept the original approach since it requires less classes and I kinda like the instant appearance more.

Any feedback is welcome. Thanks for viewing/replying! Have a good one!

Hello Shawn here! In this project I learnt to use WindiCSS's safelist feature to prevent dynamic concatenations from being removed when all the CSS classes are compiled and reduced.

I wonder if the Card component I built for all the 3 cards is ideal beacuse I used svelte:fragments to place the title and paragraph instead of passing them as props. Don't know which one makes more sense in this case.

As always, any feedback is welcome and appreciated!

Hey Shawn here! This is my second challange solved. I don't have much to say about this challange. Svelte, WindiCSS and Vite provide an extremely fast development workflow. I think you guys should try it. Any feedback is welcome and appreciated :)

Hey! Shawn here. This is my very first solution. It took more time than expected since I had to figure out how to host it. Well I don't have much to say. I am pretty content with the result and extremely comfortable with the stack I chose: Svelte + Svelte Transition API + WindiCSS + TypeScript + Vite... Truly the joy of code. Only thing bothering me is semantic HTML and accessibility, any advice in that regard? Would love to get some feedback from you guys. Have a good one and thanks for reading/viewing!