Skip to content
OverviewSolutions
6
Comments
3
P
David Inoa
@davidinoa

All comments

  • PROMISE UZOR OKWUDIRI•660
    @upovibeSubmitted 10 months ago

    Base Apparel coming soon page👨🏽‍💻

    Technologies used 🚀✨

    • HTML🏗
    • CSS️🎨

    Features 🎯

    • Semantic Arrangement✨
    • Dynamic Animations🎭
    • Prettier Arrangement🌈

    You can check me out

    Ready to tag along on my coding escapades? Join my adventure, where I challenge projects here.

    🌌 Feel free to add your opinion about any possible improvements to the code and accessibility. 🙃

    Base Apparel coming soon page solution

    2
    David Inoa•150
    @davidinoaPosted 10 months ago

    Great work overall 👏

    Regarding your markup: using <a> tags with the href attribute set to an empty string (href="") is generally not recommended for several reasons:

    1. Usability and Accessibility: An empty href attribute can lead to confusion for users and can be problematic for accessibility. Users, especially those using assistive technologies, expect links to navigate them to a different page or section of the current page. An empty href can cause the link to do nothing or just reload the current page, which might not be the intended outcome and can be confusing.
    2. SEO Implications: From an SEO perspective, links with empty href attributes are essentially useless. Search engines like Google use links to discover new content and to understand the structure and hierarchy of a website. An empty href provides no value in this context and can be considered a poor practice.
    3. Better Alternatives Available: If the goal is to create a clickable element that triggers a JavaScript action, it's better to use a button (<button>) or to set the href attribute to a hash (#) or JavaScript void function (javascript:void(0);).
    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted 11 months ago

    🎁 Features:

    • Achieved 98% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
    • Simplifying form management using react-hook-form. 📝
    • TypeScript-first schema declaration and validation usin zod library. ✅.
    • Resemblance with the original design. 🎨
    • Small animations with Framer motion. 🎬
    • Ensuring a delightful experience for users who prefer reduced motion. 🚫🎉
    • No errors or warnings using ESLint (Airbnb style guide). ✔️
    • Custom hooks. 🎣
    • Progressive Web App (PWA) support. 📱🌐
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. 💻
    • Tested with the TalkBack screen reader on mobile. 📱🔊
    • Toast Component with Sonner. 🍞🔔

    🛠️ Built With:

    • Next.js 14. ⚡
    • TypeScript 🚀
    • TailwindCSS. 🎨
    • react-hook-form and zod. 📝
    • ESLint (Airbnb style guide). 📦
    • Framer-motion. 🎬
    • npm - prettier - prettier-plugin-tailwindcss. 💻

    Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

    Thank you. 😊✌️

    PayAPI multi-page website (Next.js + TypeScript + Tailwind + ESLint)

    12
    David Inoa•150
    @davidinoaPosted 11 months ago

    Excellent work! My favorite thing is the scroll animation, very smooth. One minor detail: on mobile, I would try to fix the alignment of the logo and the hamburger menu. Other than that, it looks great! ✨

    1
  • David Inoa•150
    @davidinoaPosted 12 months ago

    This is a very lovely implementation without the need for any frameworks!

    Regarding accessibility, I would suggest adding a visible outline around interactive elements during the focus/focus-visible state to improve keyboard navigation.

    0