Skip to content
OverviewSolutions
31
Comments
10
P
Ed
@EdwinSch

All comments

  • Boots šŸ˜ŗā€¢1,590
    @adityaphasuSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Hey everyone! It's been a while šŸ˜Š

    Well, I'm most proud of the PWA support that I could implement within this next.js project. One more step towards progressive web apps!

    Currently, I'm using client-side API calls but for future projects, I would like to prioritize using the API dedicated routes and creating custom route handlers to enhance performance and SEO potentially ā¬†ļø

    I also implemented a toast when the links are shortened using Sonner!

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

    The one challenge that made it difficult for me to implement the API was the API itself. I was running into CORS policy issues and the cleanuri API documentation doesn't really specify how to configure the requests... so I tested the API using postman and it did work but the result link returned by the API is very much prone to phishing attacks. As soon as I clicked that link...my antivirus started screaming at me and I decided to see the website anyway.. yup I shouldn't have... bad decision šŸ’€

    In the end, I just opted for a different API which is actually pretty safe and public so for anyone who wants to use that instead here's the repo for it: 1pt-co

    The format returned by this API is very much aligned with this specific project so it helped a lot. One less state to maintain haha

    What specific areas of your project would you like help with?

    I'm still learning about accessibility and I've tried to implement it for this project but I'm still not sure if I've implemented it fully so any help with that is appreciated.

    While lighthouse does help with the main accessibility issues it doesn't help with core ones apparently so I'd also like to know which tools you guys use to analyze the page for major accessibility issues.

    It was a good project overall and I had fun! Any Feedback or suggestions are appreciated.

    P.S I used Framer motion to animate the URLs so give it a go! šŸŖ„

    URL Shortening API || Next.js + Typescript

    2
    Edā€¢720
    @EdwinSchPosted 8 months ago

    Hey! Nice to see some new stuff from you again :) About your question: I prefer Axe DevTools over Lighthouse actually. For me just feels like the scanning and improvement suggestions are a bit better. So maybe that helps. In overall structure I just like to test with my keyboard, tabbing through everything and use the shortcuts, just checking if I don't get stuck anywhere.

    Marked as helpful
    1
  • dkaffesā€¢140
    @dkaffesSubmitted 10 months ago

    šŸ™ Please enlighten me! The Sign-up <a> element breaks to a two-line text at 360px. And as the width becomes smaller the whole button breaks because of its padding settings.

    • What is the smallest width that we need to ensure the design is ok and does not break? Is it 320px?
    • Does it make sense to create more media queries for widths smaller than 320px?

    My query is general and not only for these FrontEnd Mentor challenges.

    Thank you!

    Single price grid component - CSS Grid and custom properties

    2
    Edā€¢720
    @EdwinSchPosted 10 months ago

    Hi dkaffes Nice work on your challenge. So first of; writing good queries is a hard part of front-end development in general as we have to deal with so many devices and screen sizes these days. And there aren't any "set rules" on minimums or maximums, it's mostly up to the UI design(er). But we could say most phones will deal with 300px width and upwards. Some very recent exceptions are the Samsung Fold models for example.

    For your button in this case you could switch the width to auto or percentages and let it scale by the witdh of the parent and maybe loose some padding below a certain point.

    Some tips in general for really small screen sizes:

    • scale down font sizes
    • break off texts if needed
    • make paddings or margins as small as possible
    • scale down gaps or line-heights
    • scaling by percentages of parent

    Alternatively there is always the option to not show anything at all below a certain point. I see a lot of apps doing this recently where below the range of 300px the body just shows a message like: 'please view on a bigger device' for example.

    Hope this helps :)

    Marked as helpful
    0
  • Boots šŸ˜ŗā€¢1,590
    @adityaphasuSubmitted over 1 year ago

    Heyoo Everyone!

    This was my first time using useContext() hook in a project to pass around props instead of doing prop drilling. I've only used one context to just try it out and didn't add another one (which I was thinking of doing for the modal but that would've just made it more complex for me to manage šŸ˜†)

    Out of all the projects I've done using framer-motion this by far is probably the most fun one. It made me look more into other framer stuff like <LayoutGroup>, layout, and LayoutId and they did make the modal animations a lot smoother.

    āœØ I hope you guys give the website a go to test out the animations and lemme know how the experience is! and any feedback on how I can improve the code is much appreciated. (especially the usage of useContext hook and if I could've done it better)

    Thanks!

    Crowdfunding Product Page || React + TailwindCSS

    2
    Edā€¢720
    @EdwinSchPosted over 1 year ago

    hi Boots. Great solution! Looks very good, I also like your additions with framer motion. Just one thing which sticks out to me is de fact your header image doesn't scale and sticks left on desktop size. This can be solved with either implementating the image as a background-image for the container and let is scale with background-size: cover;. Or auto-fit it with object-fit properties.

    Coincidentally I was just planning on doing the same challenge, so I didn't check your codebase. Don't want to "cheat" by seeing someone else code beforehand. ;)

    Marked as helpful
    1
  • visualdennisā€¢8,375
    @visualdennissSubmitted over 1 year ago

    You can find MY ANIMATION TUTORIAL HERE

    šŸ”„ Another challenge with my own custom design on top the original fem design.

    • Landing Page Animation done in gsap.
    • Changing Words Animation done in vanilla JS.
    • Error Animations done in framer-motion (due to exit animations)
    • Input Field Animations done in vanilla CSS.

    For optimum animation experience, recommended viewing dimensions: 1440x800

    • I've built the form using react-hook-form for functions and yup for validation.
    • Modal component built by using Dialog component by headlessui
    • The placeholder text for terms of services generated by ChatGPT (who would have written all that text anw :) )

    It is also responsive for mobile.

    And finally with this submission, i've officially completed all newbie challenges šŸ”„

    šŸ¦Š Smoothly Animated Sign-up Form [Redesign] + [react-hook-form] šŸ¦Š

    11
    Edā€¢720
    @EdwinSchPosted over 1 year ago

    Hi there! Just wanted to say I love your personal takes on the standard designs. šŸ‘ It takes a lot of creativity and design knowledge to re-design the entire challenge(s). Just had the same tip as Melvin already mentioned above; keep track of your image/content sizes. Users will leave an application if the performance is slow, no matter how great the design. Easy fix by just compressing down your images.

    Keep it up! Great stuff :)

    1
  • Lawrence Caudleā€¢100
    @ltc870Submitted about 2 years ago

    So this is the first project I've done in a while. I wanted to get solid with my javascript writing before I attempted another project. I believe this one went well for me. I still need to work on the background, so if anyone has any suggestions or advice, please, I'm all ears (or eyes in this case). I had fun working with this project, and using sass from the command line was new to me. I'm pretty satisfied how this project came out.

    Base Apparel Coming Soon project using Sass

    1
    Edā€¢720
    @EdwinSchPosted about 2 years ago

    Hey Lawrence, congratulations on your solution. Looks good! So I noticed the picture of the lady is warping when you scale it down. This might be an issue with your (background)image settings. Always set the image-size to 'cover' if you want an image to scale in proportion. When you use 'contain' it will keep it's original proportions and thus warp when you start scaling.

    Marked as helpful
    2
  • Kikoā€¢20
    @Lushifer666Submitted over 2 years ago

    I had a hard time starting, since this is my first project. What I did is I started on resizing the image first before styling the other elements of the page. How will you guys start and what are the best advice you can give on starting projects?

    HTML5, CSS3, flexbox, mobile-first workflow

    2
    Edā€¢720
    @EdwinSchPosted over 2 years ago

    Hi! Congratulations on your first solution. :) About your question; there isn't really a right or wrong answer here as every project had it's own requirements. Building out a massive multipage application would have a very different approach compared to this single component. But in my overal experience: structure is the keyword. Start a project by thinking of, or sketching out, what your approach is going to be. Break down the design in a Component, Flex or Grid structure (whatever your preference) so you get a better view of how to build your layout. Logically structure any files that you will need or have recieved and last but not least; decide if you are going with mobile- or desktop first responsiveness.

    Happy coding!

    Marked as helpful
    2
  • Edā€¢720
    @EdwinSchPosted over 2 years ago

    Hi! Good solution, I like how you added the flipping animation. About your question; I wouldn't say one thing is better or faster than the other. In general my experience is that "mobile-first" is the modern starting point as consumers do most stuff on their phones these days. It really depends on the (expected) type of end user in most cases.

    side-note tho: if you are planning on using a library like Tailwind CSS in the future it is actually more easy to start with mobile screens as the default breakpoints of Tailwind are set to break from small to large.

    Marked as helpful
    1
  • Bryanā€¢130
    @MamieNorrisSubmitted over 2 years ago

    Hey guys,

    I was wondering is there anyway to place all the different elements (image, title, paragraph) inside my main container without using flexbox>flex-direction:column ? My issue is that I always end up with spaces between the elements that I can't remove or even manipulate. I guess we could make the main container position relative and the childs position absolute but it seems tedious.. Is there any better solution ?

    Thanks for having a look !

    QR-component done using HTML/CSS

    3
    Edā€¢720
    @EdwinSchPosted over 2 years ago

    HTML renders in column direction by default. So if you don't want to use Flexbox properties you could choose to not apply Flexbox at all. Just create some spacing with margins between elements.

    1
  • Edā€¢720
    @EdwinSchPosted over 2 years ago

    Hey! So what's happening with the displacement here; while the screen get's smaller, the sentences 'wrap' words to the next line to account for the width getting smaller. Thus the text(element) actually gains height, pushing to next element (your icons) downwards. There are multiple ways to solve this, but the fastest would be to just change your breakpoint before it's starts wrapping words to a new line.

    1
  • Edā€¢720
    @EdwinSchPosted over 2 years ago

    Hi Eze, I wanted to supplement on Wendy's feedback. In general simple components like this challenge are achieved by using Flexbox. As this is a pretty straight forward and ease to use technique. I'd advice you to learn Flexbox first and switch to Grid when you get the hang of things. Grid is just a little bit more complex and extensive. And mostly used for more complex page layouts. Keep it up :)

    Marked as helpful
    0