Dev WorldΒ·1yπ Frontend Designers & Developers, Meet Your New Best Friend! π¨π»
Discover an incredible resource for frontend designers and developers with calltoinspiration.com. This site offers a vast collection of beautifully designed web components like forms, alerts, tabs, dropdowns, and cards. It's perfect for elevating your projects and unleashing your creativity. Check it out to design better and faster.
Community PicksΒ·1ySuper Color Palette
Super Color Palette lets you create, export, and save color palettes for free without ads. Use shifting techniques for hue, saturation, and lightness to generate diverse palettes quickly. Adjust individual colors, entire palettes, or generate palettes from hex codes and images. It supports different color harmonies and models and offers features like accessibility checking, custom easing, and preview options. Join the Patreon for updates and optional support.
LobstersΒ·38wYou Don't Need Animations
Animations should serve a clear purpose rather than being added for decoration. Key considerations include frequency of use (high-frequency interactions should avoid animations), speed (UI animations should stay under 300ms), and user goals. Examples demonstrate how purposeful animations can explain features, provide feedback, or improve perceived performance, while unnecessary animations can slow down workflows and frustrate users.
Web Tools WeeklyΒ·1yTop 30 Tools of 2024
Discover the top 30 tools of 2024, which include various CSS and JavaScript libraries, frameworks, and UI components. Learn about solutions for improving sleep quality by neutralizing harmful EMFs, and explore how to support the newsletter creator through various means. Notable tools featured include Beer CSS, VTable, Tini, and Batman-Comic.CSS.
It's FossΒ·39w19 Beautiful Themes to Get a Better Visual Experience With VS Code
A curated collection of 19 popular VS Code themes ranging from dark options like Dracula and One Dark Pro to light alternatives like GitHub Theme and Bluloco Light. Each theme is presented with key features, highlighting aspects like readability, contrast, color palettes, and suitability for different coding environments and preferences.
Ahmad ShadeedΒ·1yBalancing Text In CSS
Text balancing in CSS is explored with features like `text-wrap: balance` and `text-wrap: pretty` to ensure even text distribution. These techniques are helpful in addressing challenges with dynamic content and varying browser behavior. Practical examples and demos show how text balance can enhance readability in different scenarios.
RUBYLANDΒ·1yHide Scrollbars While Keeping Scrolling Intact
Learn how to hide scrollbars while keeping scrolling intact using various CSS techniques, including TailwindCSS. This can enhance the user experience in sleek and minimalistic web designs by decluttering the UI. Ensure accessibility by maintaining functional scrolling through trackpads, touch gestures, or keyboard navigation.
Community PicksΒ·1yBuilding a Design System as a Solo designer in a startup
The post shares a detailed experience of building a design system as a solo designer in a startup environment. It highlights the challenges of creating an efficient design infrastructure, the process of learning and setting up components and documentation, and the importance of collaboration with engineering teams. The journey includes transitioning from initial failures to a more robust version using tools like ShadCN UI, Supernova, and AI integrations, resulting in significant improvements in product usability and company revenue.
The React CommunityΒ·1yβπ My New Portfolio β Built with Next.js & TailwindCSS! + WP RESTful API as Backend π¨π»β
Launched a new website to showcase work in UI/UX design, front-end development, and digital product strategy. Built using Next.js, TailwindCSS, and Wordpress RESTful API for the backend. Visit at https://iuiux.com and share feedback.
CodropsΒ·47wFrom Static to Dynamic: 3 Micro-Animations Every Web Developer Can Master with Rive
Rive offers a powerful alternative to CSS and JavaScript animations for creating interactive web experiences. The tutorial demonstrates three practical animation patterns using a fictional plant care company: animated hero images that reveal hidden features on hover, interactive CTAs that respond to user input, and flexible layouts that adapt to different screen sizes. Rive animations are vector-based, lightweight, and can respond to real-time data through a JavaScript API, making them ideal for creating engaging micro-interactions that enhance user experience and conversion rates.
Product HuntΒ·45wbrowsr: because tabs slow you down.
Browsr is a desktop application that converts websites into standalone app windows with custom hotkeys, allowing users to overlay web content above other applications without tab switching. The tool focuses on privacy with local data storage, no accounts or subscriptions, and aims to improve multitasking workflows for users who need to reference web content while working in other applications.
CyberVerseΒ·38wStatic is boring β animate your icons π―
AnimateIcons is a React library that transforms static SVG icons into smooth animations. It offers 130+ animated icons, works with React and Next.js, supports hover and programmatic control, and integrates with ShadCN CLI. The library is lightweight, customizable, and built with motion/react for creating more engaging user interfaces.
SocketΒ·48wA Fresh Look for the Socket Dashboard
Socket has launched a redesigned dashboard featuring streamlined navigation with only 6 main links (down from 14), a grayscale color palette that reserves colors for alerts and critical issues, and improved dark mode support. The redesign focuses on highlighting software supply chain security alerts while reducing visual clutter through better organization of settings, documentation, and support features.
UX/UIΒ·1yPortfolio Website β Inspired by tailwindcss.com
Explore a portfolio website built by a software developer and UI/UX designer using Next.js, Tailwind CSS, and shadcn/ui. The site features a clean, minimalistic design with dark mode, vCard integration, SEO optimization, and email protection. It also supports MDX & Markdown for blogs, with syntax highlighting and RSS feed integration. The source code is available on GitHub.
TailscaleΒ·34wTailscaleβs windowed macOS UI is now in beta
Tailscale has released a beta windowed macOS application that complements the existing menu bar interface. The new UI provides enhanced features including device search, better error handling, debugging tools, and improved feature discovery. Key features include a searchable device list, exit node management, troubleshooting information with visual error indicators, and a mini player mode for streamlined usage. The windowed app runs alongside the menu bar version and requires enabling through the admin console's feature previews section.
Tiger's PlaceΒ·1yTailwind v4 features I'm excited about
Tailwind CSS v4 brings significant updates including CSS-first configuration, dynamic utility values, built-in container queries, 3D transform utilities, enhanced gradient controls, 'not' variant for styling exceptions, layered box shadows and rings, auto-resizing fields, variable font stretch options, and new first/last/nth utilities. These features offer more flexibility, ease of use, and powerful styling capabilities for web developers.
Hacker NewsΒ·50wMaking eyesite
A developer created Eyesite, a web application that enables eye-controlled navigation as an affordable alternative to Apple Vision Pro. The project uses WebGazer.js for eye tracking, requiring calibration through 9-point mapping for accuracy. Key design decisions included hiding the eye cursor to maintain immersion, implementing visual feedback through button glows when gazed upon, and using large UI elements to compensate for tracking jitteriness. The spacebar serves as the click mechanism, mimicking Vision Pro's look-and-pinch interaction model.
Fullstack DeveloperΒ·1yNew release β: Animations for your tooltip components.
Popply is an animation library designed to enhance tooltip components with over 50 animations like fadeIn, slideIn, and zoomIn. It's easy to integrate by copying the desired animation into your styles folder and applying it to any tooltip. This library aims to improve user interaction with subtle motion effects.
ReactTsxΒ·1yIntroducing The Motion Provider to animate everything!
Motion Provider is an advanced animation library for React, designed to simplify adding animations to projects while offering powerful features like declarative and imperative APIs, advanced animation controls, seamless integration with React, and high customizability. It excels in dynamic animation states, gesture-based interactions, and complex sequence animations.
The VergeΒ·35wWindows 11 is getting a video wallpaper feature
Microsoft is testing video wallpaper functionality in Windows 11, allowing users to set MP4 or MKV files as animated desktop backgrounds. This brings back the DreamScene feature from Windows Vista and could reduce reliance on third-party solutions like Wallpaper Engine, which remains popular among Windows users for desktop customization.
