Skip to content
OverviewSolutions
31
Comments
10
P

Ed

@EdwinSchNetherlands720 points

Front-end developer. (S)CSS - JavaScript - React - Tailwind

I’m currently learning...

Typescript and fumbling around with Astro and Svelte a bit.

Latest solutions

View more solutions

Latest comments

  • Boots 😺•1,610
    @adityaphasu
    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

    #framer-motion#next#typescript#tailwind-css
    2
    P
    Ed•720
    @EdwinSch

    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
  • P
    Ed•720
    @EdwinSch

    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
  • P
    Ed•720
    @EdwinSch

    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
  • P
    Ed•720
    @EdwinSch

    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 :)

  • P
    Ed•720
    @EdwinSch

    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
  • P
    Ed•720
    @EdwinSch

    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
View more comments