Skip to content
OverviewSolutions
4
Comments
36
P

Christopher Adolphe

@christopher-adolpheMauritius620 points

I'm a frontend developer aspiring to be a full stack JavaScript developer. I'm here to seek for challenges to sharpen my skills and to provide help/feedback whenever possible. I'm passionate about design, technology and the crafting of digital solutions that allow businesses reach their goals.

I’m currently learning...

Angular, React, Vue.js, Node.js, Three.js, Docker

Latest solutions

Latest comments

  • Emmilie Estabillo•5,580
    @emestabillo
    What are you most proud of, and what would you do differently next time?

    Hey everyone! 👋 It's been a minute! 😊

    I built this project incrementally during the holidays, and took the opportunity to practice Typescript and explore GSAP integration with the app router. To further challenge myself, I used Contentful for managing the project listings and implemented Google Maps on the contact page. It took a little longer than expected to finish, but the process proved to be more valuable than the end result.

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

    Most of the challenges I encountered were from Typescript. This was the first time I used GSAP with the app router, and I tried to keep the animations on the component files as much as possible, so much so that I was thinking I was creating non-essential files just to support the animation feature. Feedback would be appreciated on that regard, and on any other improvements including accessibility.

    I had to host the fonts since Spartan is not available on Google anymore, and made minor adjustments to the logo to match the design. I also increased the base font to the standard 16px.

    Thanks and looking forward to hearing your thoughts!

    EDIT: From the screenshot, it looks like I followed an outdated design. Will push improvements.

    Arch Studio multi-page site with Next.js, GSAP, and Contentful CMS

    #contentful#gsap#next#typescript
    4
    P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @emestabillo 👋

    You did a great job on this challenge. The result is clean with just enough animation. 🙂

    I had a look at your codebase and I really like the folder structure that you've chosen for the components directory. It makes it easy to navigate through them 👍

    You've also shared some interesting resources in your README.md, thanks a lot for that.

    Keep it up.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @tinuola 👋

    You did a great job on this challenge. 👍 I had a quick look the code base and here's small feedback:

    • You could simplify the interface of the ProductCard.vue component by declaring only a product props instead of each field of a product as follows:
    defineProps({
  product: Product;
});

    This will enhance readability.

    <ProductCard
  v-for="product in products"
  :key="product.name"
  :class="{ selected: product.selected }"
  :product="product"
/>

    I hope this helps.

    Keep it up.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @Samuel-Amaro 👋

    You did a great job on this challenge. 👍 I had a quick look at the application as well as the code base and here's my feedback:

    • The buttons for the dropdown menus are too small (4px by 20px) and as a result, this reduces the both touch and click accuracy. For better user experience, the recommended size of icon buttons should be in a range of 42 to 72px.
    • I think the Content component file contains too many sub components. You could have moved ColumnBoard, TaskList and CardTask in dedicated component files under the components directory. These components indeed compose your content but each of them have different responsibilities which is why I think good to separate them. However, this one is only a personal preference 😉 I know React gives you the freedom of organising your folder structure any way you want.

    I hope this helps.

    Keep it up.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @fontainm 👋

    You did a great job on this challenge. 👍

    I had a look at your code and here are a few things that might help you with your class names and the structure of your markup:

    • I get the impression you tried to use the BEM methodology to write your CSS but you did not applied it 100%. You have defined .notifications as a Block which has the .notifications__header and .notifications__list as its Elements. This is good 👍. However, the .notifications Block has other Elements inside it which you chose to target differently. To be honest, it's not a bad thing as such but if you'd like to go the full BEM way, here's a suggestion for the class names and markup:
    <div class="notifications">
  <header class="notifications__header">
    <h1 class="notifications__title">Notifications</h1>
    <span class="notifications__count">{{ countUnread }}</span>
    <button type="button" class="notifications__btn">Mark all as read</button>
  </header>

  <ul class="notifications__list">
    <li class="notifications__item">
      <img class="notifications__avatar"/>

      <div class="notifications__content">
        <div class="notifications__sender"></div>

        <span class="notifications__time"></span>

        <div class="notifications__body"></div>
      </div>
    </li>
  </ul>
</div>

    With the above markup, you will end up with the following CSS:

    .notifications { ... }

.notifications__header { ... }

.notifications__title { ... }

.notifications__count { ... }

.notifications__btn { ... }

.notifications__list { ... }

.notifications__item { ... }

.notifications__item--unread { ... } // This will be your `Modifier` to style an unread item

.notifications__avatar { ... }

.notifications__content { ... }

.notifications__sender { ... }

.notifications__time { ... }

.notifications__body { ... }

    As you can see, if you follow the BEM methodology, your final CSS is completely flat, i.e you'll not have selectors like .notifications__list .notification .message { ... }

    • One last thing, use semantic elements where needed. For example, the Mark all as read should be a <button> instead of a <div>

    I hope this helps.

    Keep it up.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @abedfetrat 👋

    You did a great job on this challenge. 👍

    One small thing I have noticed, given I have added 3 new tasks, when I drag the last task from the bottom of the list and drop it at the top, it gets marked as completed. I'm pretty sure this has something to do with the region of the task that's clickable to toggle as active/completed. If you initiate the dragging from this region, when you'll drop the item, the toggling is also triggered. But strangely, I notice it is only happening when dragging an item from the bottom to the top.

    Framer Motion looks really cool. I want to try it on my next project. I've always used CSS modules with React but when I see how clean you've been able to keep those styles within your components, I think I should styled components a try as well.

    Keep it up.

    Marked as helpful
  • P
    Christopher Adolphe•620
    @christopher-adolphe

    Hi @MuriWolf 👋

    You did a great job on this challenge. 👍 The markup, styling and component composition are well done. 👌

    One easy fix to get rid of these accessibility report errors/warnings is to set a value to the lang attribute of the <html> tag like so <html lang="en"> in your public directory.

    I have been trying to do various actions in the application and I have noticed that when I reply to a comment, my reply is not added right away. I had to add another reply then both of them appeared. I'm not sure if it's because your REST API is hosted on Heroku and it is responding slowly but you might want to double check that as it hinders the user experience.

    In case it's your REST API which is responding slowly, there is a way you could give a faster feedback to the users. Right now, you've written the CRUD operations of your component in a pessimistic update style, meaning; you are making the calls to the REST API and then you are updating the UI. You may give the user the impression that application is faster by doing the opposite, i.e; you will update the UI first and then make the calls to REST API. This is an optimistic update. 😉 However, when doing so, you will need to keep a reference of the previous state so that if ever an error occurs while doing the update, you can safely revert to that previous state. Below is an example of what an optimistic update looks like in code:

    // 1)Keeping a reference of previous state
const previousComments = [ ...this.comments ];

// 2) Updating the UI
this.comments = [ ...this.comments, this.newComment ];

try {
  // 3) Calling the endpoint to post the new comment
  const response = await fetch('some-endpoint-url', this.newComment);
} catch (error) {
  // 4) Reverting to the previous state if an error occurs
  this.comments = [ ...previousComments ];
  // 5) Giving a feedback that an error occurred
  alert(`Sorry, an error occurred while adding new comment: ${errror}`);
}

    The above code snippet is not Vue.js specific but I think you'll be able to implement it somehow.

    I hope this helps.

    Keep it up.

    Marked as helpful
View more comments