Skip to content
OverviewSolutions
23
Comments
12
Jay
@Junjiequan

All comments

  • James F. Ciskanik•200
    @JamesTheLessFCSubmitted about 3 years ago

    So this project took me about 2.5 weeks to complete, spending several hours most days. For someone who is looking to get into the web development field, is that timeframe reasonable/acceptable?

    Another question I had is in regards to the images featured on the site. Basically what I'm doing is loading three versions of each image (mobile, tablet, desktop) into the page and then only showing the correct image, by using "display: none" on the others (I'm doing this using media queries.) Am I correct in assuming that the browser is loading each of the images, which in effect slows the load time? And if so, is there a better way to implement this? Maybe using javascript to find out the screen-width and loading the correct image based on that?

    I thought the biggest challenge with this project was figuring out how to set up a headless CMS and load data from there, something I've never tried before. I went with Sanity.io, which offers a lot of helpful documentation and allowed me to actually host the CMS on the site itself (at <live-domain>/admin). I got it to work fine, but I'm curious about other headless CMS examples which might work better?

    Finally, I'm using React's context hook to manage the state of my site's shopping cart/checkout process. I was tempted to use Redux but it felt unnecessary. Was this the right decision? There seems to be quite a lot of debate on this topic.

    This was a fun project and I learned a lot from it. Any other feedback is welcome and appreciated! Thanks.

    Next.js Site with Sanity.io (Headless CMS), styled with SCSS

    2
    Jay•695
    @JunjiequanPosted about 3 years ago

    I have used redux, redux-tookilt and redux-thunk for my previous projects.

    For me, redux only get complicate when the architecture is not planned thoroughly. In other words, when you are going to use redux it is better to have clear understanding regards to how many state changing activities is need to be included.

    The initial step for setting up redux logic is the most difficult & complicated part for me not the code itself make the process complicate. Once the initial setup is done, it makes the whole process much more effective and easy to maintain with useSelector and useDispatch hook, you can always add additional reducers & actions effortlessly.

    Lastly, I strongly recommend to tryout redux-thunk. It is a middleware that allows to return a function. Its really usefull when your project is required to interact with server-side, e.g., you could use it to GET data from API and use returned data to dispatch actions, example code below:

    export const fetchPosts = () => axios.get(http://localhost:5000/posts);

export const fetchAllPosts = async (dispatch: AppDispatch) => {
  try {
    const { data } = await fetchPosts();
    dispatch({ type: "FETCH_ALL", payload: data });
  } catch (err: any) {
    console.log(err.message);
  }
};

    This is just my opinion, I wouldn't consider too much about time spend on a project when I am learning. The more time you spend usually means the more you considerate about the project. For me, it is harder to create good quality project with more time than creepy quality with less time, eye on details require a lot of patient and extra efforts.

    Hope this feedback helps.

    Marked as helpful
    0
  • Agata Liberska•3,995
    @AgataLiberskaSubmitted over 3 years ago

    I wanted to use this project to practise Redux with React. I feel like my file organisation isn't great (I went through a Udemy course and the Redux tutorial and kind of ended up with a mix of the two suggested systems which I'm not sure is the optimal way). The project was very challenging at some parts but I think I learnt quite a lot, and I'm planning to do another take of this challenge, this time with async operations. And of course, I am yet to write up a nice readme, please don't hate me for it. Anyway, any comments on functionalities, or the code are welcome. Thank you!

    Built with React + Redux + Styled Components

    2
    Jay•695
    @JunjiequanPosted over 3 years ago

    Hello, Agata.

    I am currently also working on this challenge and I have to say this one is tough. You did really nice work on this solution.

    Here are some issues I have found:

    • Sort by button is slightly shifting on click

      Probably caused by border on focus. I would suggest to use box-shadow: 0 0 0 1px color to make the focus border effect

    • Scroll prevented?. not able to scroll content.

      I guess you did it on purpose to test something.

    • Textarea horizontal resizing breaks out

      I'd suggest either use resize:none or resize:vertical

    • The feedback title in product detail page or to say product commenting page should be unable to click or the link functionality should be prevented. Click the title multiple times causes Go Back button not working properly (have to click multiple times back to make it work).

      This is the issue from browser router. My solution was to simply set the title's pointer-events to none when it rendered inside the product commenting page.

    Hope you find this feedback helpful.

    I took some time to check your solution as you were the first person who gave me feedback on my early solution and I am always grateful for that :)

    Marked as helpful
    3
  • Jay•695
    @JunjiequanPosted over 3 years ago

    Design wise looking great, functionality working all good, overall I'd say this is pretty decent.

    If I were being picky, here is some details might worth pay attention to:

    • close mark outline transitions with unbalanced height.
    • long text of todo item breaks out on mobile.
    • text input length of addTodo section is too short for desktop, it has only roughly 180px width.
    • click empty circle to create todo item is kinda weird.

    Hope this helps :)

    0
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    Hello👋!

    I have to admit that the challenge was more difficult than I thought but it was fun to get throught the problems I faced. Here are few new things that i was able to bring in into my project:

    • :focus-visible pseudo class (spec). This selector should now only indicate focus when it is helpful to the user - such as in cases where the user interacts with the page via a keyboard or some other non-pointing device.
    • This is first time i used @extend rule. Since my modifier classes kv__hero-bg--1/2/3 all uses styles from kv__hero-bg. I extend this class and it allowed me to remove unnecessary class from HTML code.
    • Added sticky nav menu using Intersection Observer API. This time i make it to be just hamburger menu after scroll with background, not sure if it's pretty but i want to have some fun.
    • Added backdrop-filter to opacity background when nav mobile is open. It provide effect such as blurring. (no Firefox support yet tho). Thanks to @ApplePieGiraffe. I found it in his solution.
    • I experimented with clip-path to create this slide effect on my background slider.
    • Added aria-live="polite" to my .kv__intro element to expose dynamic content changes in a way that can be announced by assistive technologies after my slider change content within that element. This one is from @Matt.
    • Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief.

    Again thanks for @grace-snow for helping me. No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Room - Sass, intersection observer API, mobile first, Flex, Grid

    6
    Jay•695
    @JunjiequanPosted over 3 years ago

    Hello, tediko,

    I really like the image slider animations and the idea of mobile menu icons.

    But, there's one issue I believe should be avoided for this challenge. That is , however the screen resizes, the edge of the right button should always exactly in touch with right bottom corner image.

    My screen has resolution of 1920x 1080 and from my screen there's huge gap between right button and bottom right image. In my case, the gap disappears only when I resizes the page to 1440px not below nor above.

    Since this challenge is mainly for practicing optimal layout, I think it is worth to notice to make design matches different screen size.

    I also did this challenge before, and my solution was to calculate exact percentage of width for each layout with width:calc( ) method.

    Hope you don't feel offended receiving suggetions from a newbie.

    1
  • Jay•695
    @JunjiequanPosted over 3 years ago

    @RocTanweer

    if you wonder how my readme looks like, here it is.

    ## Frontend Mentor challenge

| Projects-name | Repo-link |
| ------------- | ------------- |
| 1. [Promotional Event](https://a331998513.github.io/projects/pricebox/)  | [Repo](https://github.com/a331998513/projects/tree/main/pricebox)  |
| 2. [Feature Box](https://a331998513.github.io/projects/Featurebox/) | [Repo](https://github.com/a331998513/projects/tree/main/Featurebox)  |
| 3. [Base Apparel coming soon page](https://a331998513.github.io/projects/BeautyMain/index.html) | [Repo](https://github.com/a331998513/projects/tree/main/BeautyMain) |
| 4. [fylo-data-storage-component-master](https://a331998513.github.io/projects/fylo-data-storage-component-master/) | [Repo](https://github.com/a331998513/projects/tree/main/fylo-data-storage-component-master) |
| 5. [intro-component-with-signup-form-master](https://a331998513.github.io/projects/intro-component-with-signup-form-master/) | [Repo]
    0
  • tediko•6,680
    @tedikoSubmitted over 3 years ago

    Hello👋!

    That was a simple and fun challenge, although there was room to try new things and learn something new.

    • Implement prefers-reduced-motion CSS media feature which is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Prevent animations in brief. Spotted at @brasspetals solution 😅
    • Added lazy load animations for cards. I did it with Intersection Observer API.
    • Added sticky nav menu also using Intersection Observer API.
    • Tried to create more accessible mobile navigation. Used the aria-expanded and aria-controls attributes.
    • As for the Sass part. In the project i used @use since it's recommended to using this instead of @import Kevin Powell video about it. Thanks to @RayaneBengaoui i saw his comment about this.

    Thanks for @grace-snow for helping me with keyboard navigation. Since i change visible order of .creations I had to create other button to prevent firstly tab on last element and only then on first. No specific questions here but any additional feedback will be appreciated!

    Thanks! 😁

    Loopstudios - Sass, intersection observer API, mobile first

    6
    Jay•695
    @JunjiequanPosted over 3 years ago

    Hi tediko,

    Your work just blown me away. Literally everything, animation, navbar transition, button hover effect, scss files architecture etc...

    Im even getting a bit of envy feelings, just by looking at your scss structure, that is exactly how I want my code look like.

    I really want to ask you how long have you been doing front end things, but I guess the answer won't help me in anyway.

    Thank you so much for positing your solution, that gave me a direction to where I should be forwarded.

    1
  • Karim•810
    @Karimsamir112Submitted over 3 years ago

    Any feedbacks are very appreciated 🙏

    I really want your opinions , and what should I improve ?

    thanks in advance 🙏

    Room homepage

    1
    Jay•695
    @JunjiequanPosted over 3 years ago

    Hey Karimsamir112,

    I can see you have put some efforts in this one and I would love to point out some issues that I have found.

    The layout is broken on my screen( resolution 1920 x 1080). The first section image occupies 80% of the screen and left a huge white space gap on the bottom.

    Also, there's some issue with space gap between first section and second section when it is resized between range from 1450px~ 1110px.

    Another one crucial issue is that first section image is streched to very wide or narrow when it resizes..I can see you've set the height to 550px in media query at 1100px max-width. I would avoid to set fixed height to image directly, instead I would use max-height or min-height in that case for better responsiveness of image.

    If you need some reference and don't mind to look at a newbie's solution Here is my solution

    Hope my feedback helps and happy coding. 😃

    0
  • MetisT•275
    @greatmetisSubmitted over 3 years ago

    This is my first page integrating with other page via API.

    In this challenge I attempt to write clean code and build an interactive landing page. For example,

    • I tried to create objects and building prototype chain in them.
    • I used ScrollReveal, a cool library with MIT License.

    Thank you for checking this, and I open to any suggestion. Many love to this community.

    HTML, Scss, Bootstrap, JS, jquery, scrollReveal

    1
    Jay•695
    @JunjiequanPosted over 3 years ago

    hey MetisT,

    Your solution looking great and link shortener is working nicely.

    One issue i've found is that when the url link is too long, it crashes the form after conversion.

    All in all, I am so glad to see someone else other than me is also acutally trying to handle the challenges. I've looked up some others' solutions on this challenge, only you made the link shortener available so far. Shout-out to you.

    0
  • Jay•695
    @JunjiequanPosted over 3 years ago

    hey, Ritesh Mangdare,

    by looking at your solution i'd say your version is quite different from the challenge design wise.

    I'd suggest to make the design closer to the challenge as much as possible.

    then, you could employ your creative idea into the solution make it an extra touch. 😊

    0
  • Pete•150
    @petewkSubmitted over 3 years ago

    Feel this is pretty close, quite happy with it, only small differences I can spot like the size of the $. Feedback appreciated

    HTML CSS and some JQUERY

    2
    Jay•695
    @JunjiequanPosted over 3 years ago

    Hi pete,

    If I may, I would love to suggest you to focus on tablet responsiveness as well :)

    0
  • Ron Paolo Toyhacao•165
    @rontoyhacaoSubmitted over 3 years ago

    This is the first time I gave up on a challenge lol. I just wanna lay it down here because I wanna take up a different challenge. This challenge is too challenging for me literally but here's the thing, I was actually able to make 80% of the front-end on mobile. What made me drop this challenge is the content of the modal. The radio button was supposed to show the input part of the pledge and that part drained me. Maybe I had to rewrite the markup to be able to pull it off. I kept on looking for solutions but no luck. The good thing I had here at least is I learned how to make a modal.

    Mobile-only Crowdfunding Product Page using Flexbox

    2
    Jay•695
    @JunjiequanPosted over 3 years ago

    Hi, rontoyhacao, your work looks pretty nice to me. good job. I'm about to solving this challenge my own, hope I can make mine look as good as yours.

    0
  • Jay•695
    @JunjiequanPosted over 3 years ago

    Hi, Sahil Khan. I'm not sure whether you have noticed. It seems like you didn't set correct path for css file , so the page displays without any css effect as well as the images.

    0