Skip to content
OverviewSolutions
31
Comments
89
Karol Binkowski
@GrzywN

All comments

  • Leonard•1,025
    @leoikeh99Submitted over 1 year ago

    This was my first time using bem css, wanted to start using this because I thought it made working with CSS cleaner and a little bit easier and it definitely was. Also tried to write better accessibility so please give me feedback on accessibility issues and also any feedback on CSS best practices.

    Newsletter sign-up form with success message using BEM CSS

    3
    Karol Binkowski•1,640
    @GrzywNPosted over 1 year ago

    Great job!

    I would suggest querying all the elements first and then passing them as function parameters. Then you can use the same elements and it is not necessary to query them again. This is generally considered a good practice.

    It is also better to avoid complicated regular expressions, as they almost always do not work as intended. I would suggest using one of the popular npm libraries in this case.

    Keep coding and have a nice day!

    1
  • Light Yagami•90
    @rakibhossainrajuSubmitted over 1 year ago

    Hello there everyone! I am trying to be good at this. I am trying my best. Fell free to pass on your valuable opinion and PLEASE correct me where you think I could do batter! :)

    Responsive age calculator

    3
    Karol Binkowski•1,640
    @GrzywNPosted over 1 year ago

    Hey Kira!

    Things worth considering:

    • Adding ESLint and Prettier to your project to make code practices and formatting consistent
    • Splitting big components into smaller ones
    • Extracting app logic into utils and hooks (like calculating relative dates etc.)

    Have a nice day and keep coding!

    1
  • darryncodes•6,370
    @darryncodesSubmitted over 1 year ago

    Hi everyone 👋

    I had a lot of fun with this challenge!

    The shopping cart functionality is the perfect use case to learn React's useContext hook. I also really appreciated Tailwind CSS helping to speed up the development process to focus on learning React.

    A nice little addition was playing around with framer-motion & react-toastify.

    Any feedback that could help me to improve would be very welcome.

    Happy coding 🤙

    E-commerce product page - Tailwind CSS, React, Framer Motion & Vite

    1
    Karol Binkowski•1,640
    @GrzywNPosted over 1 year ago

    Great job @darryncodes!

    I think you should consider changing '+' and '-' buttons, since they are really hard to click, especially on mobile. Try to focus them with the 'tab' key and you'll see.

    Helpful materials for you:

    • https://nerdcave.com/tailwind-cheat-sheet
    • https://atomicdesign.bradfrost.com/chapter-2/
    • https://blog.logrocket.com/using-prettier-eslint-automate-formatting-fixing-javascript/
    • https://www.npmjs.com/package/prettier-plugin-organize-imports

    Have a nice day and keep coding!

    Marked as helpful
    0
  • Karol Binkowski•1,640
    @GrzywNPosted over 1 year ago

    Add no-cache, when using fetch. It doesn't work properly on Firefox. For example:

    const response = await fetch("https://api.adviceslip.com/advice", {
  cache: "no-cache",
});

    Have a nice day! 😄

    Marked as helpful
    0
  • Karol Binkowski•1,640
    @GrzywNPosted almost 2 years ago

    I can't access your repo ;(. It's probably still private

    1
  • Ahmed Bayoumi•6,740
    @Bayoumi-devSubmitted almost 2 years ago

    Hi There! 👋 This is a solution to the Dine restaurant website challenge🎉... built with React js, React Router, TypeScript, and Tailwindcss.

    Additional features:

    • Animations
    • Custom scrollbar
    • Reserved! message after sending the reservations form

    Any suggestions on how I can improve are welcome

    Happy coding 😉

    Dine restaurant website using React js with Typescript and Tailwindcss

    1
    Karol Binkowski•1,640
    @GrzywNPosted almost 2 years ago

    i love it, great job

    0
  • P4ZD4N•60
    @P4ZD4NSubmitted about 2 years ago

    Hi! 😅

    Today I completed my probably most problematic challenge I have done. I don't know why, but It was really hard to me and I'm glad I finished It at all. 🤯

    I'm aware that I've made many mistakes doing this challenge, but I'd like to find and correct them. 😎✔️

    Any feedback is welcome! 🤠

    Stats preview card component | SCSS, BEM

    2
    Karol Binkowski•1,640
    @GrzywNPosted almost 2 years ago

    Siema @P4ZD4N

    Staraj się używać remów zamiast px. Pixeli nie używa się ze względu na skalowanie treści, czyli jak ktoś ma w przeglądarce ustawionego zooma albo większy rozmiar czcionki to wtedy pixel jest pixelem i nie skaluje się w żaden sposób. Dlatego lepiej używać remów i emów, choć emów ja raczej nie używam. Remy odnoszą się do font-size nadanego w tagu html, a emy do odziedziczonego font-size z nadrzędnych elementów. Domyślnie 1 rem to 16px, więc można albo ręcznie to policzyć albo użyć wtyczki px to rem w VS Code i wtedy jednym skrótem zmieniasz px na remy i odwrotnie. Wszystkie deklaracje wielkości czcionki powinny być w rem, a nie w px ani em. Czasami używa się px dla jakiś małych wielkości typu border na 3px albo box-shadow. Poza tym większość designów jest tworzona w wielokrotnościach czwórki typu margin 32px, czyli 2 remy, co ułatwia prace na remach.

    Zamiast clampa to polecam ci używanie max-width i width: 100% (jeśli potrzebne). Clamp nadaje min-width, a tego raczej nie powinno się używać ze względu na mniejsze ekrany. Jeśli bardzo chcesz używać nowoczesnych funkcji to możesz sobie dać coś takiego width: min(100%, 24rem). Wtedy masz to samo, ale bez tego min-width. Używanie max-width jest kozackie, bo możesz sobie wrzucić ile jakiś element może mieć i masz właściwość często uniwersalną dla mobile, tabletu i desktopa bez większego zastanawiania się jak to będzie wyglądać na danych szerokościach.

    Raczej odradzam używania procentowych wartości dla paddingów, marginów, szerokości itp. Jak zmniejszysz sobie szerokość na twojej stronce to tekst zaczyna wchodzić na obraz, a raczej powinien stale być oddalony od obrazka o te np. 2 remy. Kiedyś używałem procentowych szerokości dla paragrafów i headingów, żeby tekst się tak samo zawijał jak w designie, ale teraz raczej zrobiłbym to za pomocą max-width. W tailwindzie często używam czegoś takiego jak max-w-prose czyli w CSSie max-width: 65ch; Generalnie jest to fajny sposób, żeby zmniejszyć szerokość tekstu niezależnie od wielkości jego czcionki dla np. paragrafów.

    pracuj pracuj xd naura

    Marked as helpful
    0
  • Karol Binkowski•1,640
    @GrzywNPosted about 2 years ago

    Great job 🥳

    I suggest using semantic <address> tag for address data and <a href="tel:+1 253-863-8967">+1 253-863-8967</a> for the phone number (it's good for mobile users, since they can click on it to get the number). You can do it multiple times across the page, since phone numbers and addresses are present in multiple components.

    You might also add autocomplete properties to form inputs for example autocomplete="email", autocomplete="name" etc. More about it here

    I would change favicon to the Designo logo. There is a great tool for it - favicon.io. You might need to convert the logo/image to the png, but you will get everything you need for different devices/sizes.

    Hope this helps! Have a nice day and happy coding!

    1
  • Karol Binkowski•1,640
    @GrzywNPosted about 2 years ago

    Great job @leoikeh99! 🥳

    Everything looks and works great! Things you might consider to improve this project:

    • Adding unit tests for the most important functionality of your app (user auth and database integration). It can be done by using Vitest/Jest and React Testing Library.
    • Adding loading state and error state. Loading state could be done by adding pulsing skeleton cards when the content isn't loaded yet. Error state could be handled by some kind of ErrorBoundary.
    • Adding draggable slider instead of scroll (something like this one)

    Have a nice day and keep coding ✌️

    Marked as helpful
    0
  • Karol Binkowski•1,640
    @GrzywNPosted about 2 years ago

    https://www.youtube.com/playlist?list=PLjHmWifVUNMLJqo4jyY5UKJefNmH3Vslu https://www.youtube.com/playlist?list=PLjHmWifVUNMKIGHmaGPVqSD-L6i1Zw-MH

    tam masz fajne poradniki do bem i gita, jak chcesz zeby ci pisali komentarze to sobie daj do nazwy czego używałeś np. Four Card Feature Section | HTML, SCSS with BEM

    Marked as helpful
    0
  • Karol Binkowski•1,640
    @GrzywNPosted about 2 years ago

    siea

    tam jak masz przekreślone to sobie daj tag <s> zamiast spana, bo wtedy masz od razu przekreślone i jest lepiej semantycznie, bo czytniki i wyszukiwarki biorą to jako coś nieaktualnego

    spróbuj sobie wyjebać te divy które mają tylko jeden element, bo w sumie są chyba zbyteczne, najwyżej daj sobie display: block w cssie na elementach inline czyli tych tekstowych (ale chyba to nie potrzebne)

    wrzuć sobie cały komponent w diva jakby to był komponent który masz wrzucić na inną stronkę, na stronce może być tylko jeden main tag, często do takich kart sie używa figure i figcaption ale można to poprostu też wrzucić w diva

    z tym bemem z nazewnictwem takim jakie miałeś to sobie możesz zrobić coś takiego

    <div>
    <img src="./images/image-product-desktop.jpg" class="component__left--img" alt="perfume" />
    <section class="component__right">
      <p class="component__header">Perfume</p>
      <div class="component__title-wrapper">
        <h1 class="component__title">Gabrielle Essence Eau De Parfum</h1>
      </div>
      <div class="component__description-wrapper">
        <p class="component__description">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
        </p>
        <span class="component__price">$149.99</span>
        <s class="component__price component__price--line-through">$169.99</s>
      </div>
      <div>
        <button type="button" class="component__button"><img src="./images/icon-cart.svg" alt="icon-cart" /> Add to Cart</button>
      </div>
    </section>
</div>

    ja to se tak zrobiłem, akurat tutaj używałem dużych liter ale wiekszosc osob robi tak jak ty i jest gicik

    <div class="ProductPreview">
        <div class="ProductPreview__Card">
          <div class="ProductPreview__ImageWrapper">
            <img class="ProductPreview__Image" src="" alt="" />
          </div>
          <div class="ProductPreview__Body">
            <h2 class="ProductPreview__Type"><slot name="type">Perfume</slot></h2>
            <h3 class="ProductPreview__Name"><slot name="name">Gabrielle Essence Eau De Parfum</slot></h3>
            <p class="ProductPreview__Description"
              ><slot name="description">A floral, solar and voluptuous interpretation composed by Olivier Polge,
              Perfumer-Creator for the House of CHANEL.</slot></p
            >
            <div class="ProductPreview__Prices">
              <span class="ProductPreview__CurrentPrice"><slot name="current-price">$149.99</slot></span>
              <s class="ProductPreview__OldPrice"><slot name="old-price">$169.99</slot></s>
            </div>
            <button class="ProductPreview__AddToCart" type="button">
              <span class="ProductPreview__AddToCartWrapper">
                <img class="ProductPreview__CartIcon" src="./assets/icon-cart.svg" alt="" />
                <slot name="add-to-cart">Add to Cart</slot>
              </span>
            </button>
          </div>
        </div>
      </div>

    a ogólnie to maśniutko 🤙

    0
  • Karol Binkowski•1,640
    @GrzywNPosted about 2 years ago

    Well done 🙌!

    You should name your component file names with the same casing (PascalCase) as component functions. e.g. CardGroup.tsx instead of card-group.tsx. It's fine for hooks, but it's a must for components. It's also worth considering to put each component into separate folder and add index.tsx file so it's possible to import all files from one folder with one import and omit file name.

    Have a nice day! Keep up the great work! ✌️

    Marked as helpful
    0