Front End Development
How to Create a Scroll Progress Bar in Next.js/React
Enhance UX with a simple scroll progress bar for smooth, responsive navigation—minimal code, no dependencies.
JS
Jay
Simons#UI / UX 11 posts
Posts tagged with "UI / UX"
Front End Development
React: Simple Yet Elegant Toast Notifications
Build lightweight, custom toaster notifications in React using the Context API—no dependencies needed!
JS
Jay
Simons
Front End Development
Please Stop Committing UX Suicide for Sake of Revenue
Discover how to balance user experience with ad revenue using privacy-friendly strategies that keep both users engaged and advertisers happy.
JS
Jay
Simons
Front End Development
Implementing a Loading Overlay with next/router Events in Next.js
Build a route change loading overlay using `next/router` events.
Front End Development
How to Create an Attractive File Upload Widget With React/Next.js and Tailwind CSS
By leveraging the strengths of React, Tailwind CSS, and Daisy UI, we can create a user-friendly and aesthetically pleasing file uploader.
JS
Jay
Simons
Front End Development
React and Tailwind CSS: Making a Typewriter Animation from Scratch
Learn to create a typewriter animation using React and Tailwind CSS. Step-by-step guide to add a retro touch to your web design.
JS
Jay
Simons
Front End Development
Enhancing Form Usability with Framer Motion: A Guide to Animated, Chunked Form Transitions
Enhance form UX with Framer Motion: Break forms into chunks, animate transitions, and improve user experience for seamless interaction.
Front End Development
Easy Dropdown Menus With Next.js and Tailwind CSS
In this article, I'm going to show you how to create a very simple, yet elegant, dropdown menu using nothing but Next.js and Tailwind CSS.
JS
Jay
Simons
Front End Development
How to Create a Verification Code Input Component in React / Next.js
In this article, I'll show you how to create a robust OTP code input component for React.js, using no other dependencies.
Mobile App Development
How to Create a React-Native App With Tailwind (Nativewind) and Google Fonts
In this tutorial, I'm going to show you how to set up a new React-Native project using the Expo CLI tool. Then we'll install and configure Tailwind. And then as an extra-added bonus, we'll define a custom font class for a Google font.
JS
Jay
Simons
UI / UX Design
UI/UX Best Practices for Web Forms
Collecting information from prospective clients is the bread and butter of any online business. That being said, facilitating the ease and fluidity of collecting that information from the user perspective is imperative.
JS
Jay
Simons