Dev Tools·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a new tool offering a modern collection of background patterns, gradients, and glow effects designed for landing pages, portfolios, and web applications. The tool provides professional-grade backgrounds that can be easily copied and pasted into projects, with built-in support for modern CSS and Tailwind CSS for seamless integration.
daily.dev Changelog·44wWe improved readability on daily.dev
Daily.dev implemented several typography and readability improvements including better font sizing, improved heading hierarchy, balanced line heights, wider reading areas, and faster font loading with smoother fallback handling. These incremental changes aim to create a more comfortable reading experience and reduce eye fatigue for users consuming content on the platform.
Chrome Developers·47wCSS conditionals with the new if() function
Chrome 137 introduces the CSS if() function, enabling inline conditionals for dynamic styling. The function supports style(), media(), and supports() queries, allowing developers to write conditional logic directly within CSS properties instead of using separate @media or @supports blocks. Examples include responsive button sizing based on pointer type, color space fallbacks, and state-based styling using data attributes. This feature provides a cleaner architectural approach by keeping styling logic inline rather than scattered across multiple CSS blocks.
WebCraft·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a new tool that provides a modern collection of background patterns, gradients, and glow effects designed for landing pages, portfolios, and web applications. The tool offers professional-grade backgrounds that can be easily copied and pasted into projects, with built-in support for modern CSS and Tailwind CSS for seamless integration.
WebCraft·44wSera UI — Modern React Component Library
Sera UI is a modern React component library that offers copy-paste components with built-in styling and animations. It focuses on helping developers build responsive interfaces quickly without worrying about design implementation details, enabling faster development and deployment cycles.
All Tailwind CSS·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft is a free collection of modern background patterns, gradients, and glow effects designed for Tailwind CSS. The tool provides professional-grade backgrounds that can be easily copied and pasted into landing pages, portfolios, and web applications, offering seamless integration with modern CSS and Tailwind frameworks.
Reinier·46wThe Web Is Your Component Library
YoinkUI is a Chrome extension that allows developers to extract clean, reusable Tailwind CSS and React code from any website by simply right-clicking on UI elements. The tool generates production-ready components without requiring developer tools or manual code inspection, targeting frontend developers, designers, and indie builders who want to quickly prototype and build inspired by existing web interfaces.
Prismic·44wTailwind CSS Grid: Complete Guide & Examples
CSS Grid is a powerful 2-dimensional layout system that becomes even more accessible when combined with Tailwind CSS utility classes. The guide covers creating grid containers with `grid` and `inline-grid` classes, managing columns using `grid-cols-x` and positioning classes like `col-span-x`, controlling rows with `grid-rows-x` and `row-start-x` classes, and handling spacing with `gap` utilities. It also explains alignment properties including `justify-items`, `items`, `content`, and `justify` for precise control over grid item positioning. The tutorial includes practical examples like blog post grids and website layouts, plus a comprehensive cheatsheet mapping CSS Grid properties to their Tailwind equivalents.
CSS-Tricks·43wAtomic Design Certification Course
Brad Frost, creator of the Atomic Design methodology from 2013, is launching an online certification course with his brother Ian. The course covers the five-layer design system approach (atoms, molecules, organisms, templates, pages) that emphasizes composable, consistent, and reusable web design components. Currently available for presale at $50 with team discounts.
All Frontend·46wPattern Craft: Beautiful backgrounds for your next big thing
Pattern Craft offers a collection of professional-grade background patterns and gradients designed for websites and applications. The patterns are built with modern CSS and Tailwind CSS, allowing developers to easily copy and paste them into their projects for seamless integration.
YouTube·45wiOS 26 is terrible.
iOS 26 introduces a controversial 'liquid glass' design inspired by Vision Pro, featuring transparent, glass-like UI elements. The redesign has been criticized for poor visibility, contrast issues, and feeling rushed. The author argues this represents a broader decline in Apple's software quality, comparing it unfavorably to previous major iOS redesigns and suggesting Apple is losing control amid pressure from AI competition.
The Coding Sloth·46wUI Components Every Programmer Should Know (Probably)
A comprehensive guide covering essential UI components that developers encounter daily but may not know the proper names for. Explains components like hero sections, navigation bars, breadcrumbs, skeleton screens, modals, dropdowns, tooltips, and more. Each component includes its purpose, common use cases, mobile considerations, and the often quirky origins of their names. Emphasizes the importance of knowing proper terminology for effective communication with designers and other developers.
CSS Tip·43wResponsive infinite logo marquee
Modern CSS techniques enable creating responsive infinite logo marquees using the shape() function and new sibling-index()/sibling-count() functions. The approach works with any number of images, adapts to container width without magic numbers, and can be controlled through CSS variables. Currently limited to Chrome browser support, the technique requires equal-width items and works with any content type beyond just images.
All Things Frontend·42wGradientCSS — Instantly Modern Gradients for Web Projects
GradientCSS is an open-source tool that provides a curated collection of modern gradients for web projects. It offers one-click copying and exporting in multiple formats including CSS, Tailwind, SCSS, SVG, and images. The tool features live preview, animation controls, and supports various gradient types (linear, radial, conic) without requiring user registration.
UX Planet·43wReal-life tips for creating landing pages that grab attention and drive action.
A comprehensive guide to building high-converting landing pages using the AIDA sales model. Covers essential techniques including pattern interrupt methods, gradual objection handling, creating anticipation, and helping users visualize product ownership. Emphasizes that each page section should incorporate all AIDA elements rather than treating them as sequential blocks. Provides practical design tips for visual hierarchy, micro-animations, and user engagement strategies.
Spread Privacy·44wDuckDuckGo Browser: Fresh New Look, Same Great Protection
DuckDuckGo has released a visual refresh for its browser featuring redesigned icons, softer interface elements, and a new color palette. The update includes improved tracking protection indicators, easier access to Duck.ai (their private AI chat feature), and better cross-platform consistency between desktop and mobile versions. Users can optionally enable or disable AI features through browser settings.
DEV·43w✨🎨 Pure CSS Magic: How to Build a Realistic 3D Office Experience 🏢💻🪑
A comprehensive tutorial demonstrating how to build a fully interactive 3D office environment using only HTML and CSS. The project features four office departments with animated characters representing diverse workplace scenarios including executive meetings, job interviews, development teams, and water cooler conversations. Key techniques covered include CSS 3D transforms, glass morphism effects, keyframe animations, and responsive design using CSS Grid. The tutorial emphasizes performance benefits of CSS-only approaches, accessibility considerations, and authentic diversity representation in character design.
All ShadCN·45wSpeed Up Web Development with Stunning UI
A collection of ready-to-use UI blocks built with ShadCN components designed to accelerate web development. The blocks are modern, customizable, and responsive, making them suitable for both rapid prototyping and production applications. This resource aims to reduce time spent on UI design and development by providing pre-built components.
Apple Developer·44wiOS and iPadOS 26 design kits are here
Apple has released official UI design kits for iOS and iPadOS 26, making them available for both Figma and Sketch design tools. These design resources help developers and designers create apps that follow Apple's latest design guidelines and interface standards.
Codrops·44wMotion Highlights #11
A curated collection of 21 standout motion design and animation projects from creative professionals, featuring kinetic typography, UI interactions, grid animations, and experimental motion graphics. The roundup includes work from various studios and designers showcasing diverse animation techniques and styles, plus a recommendation for a free GSAP JavaScript animation course.
WebCraft·43wGradientCSS — Instantly Modern Gradients for Web Projects
GradientCSS is an open-source tool that provides a curated collection of modern gradients for web projects. It offers one-click copying and exporting in multiple formats including CSS, Tailwind, SCSS, SVG, and images. The tool features live preview, animation controls, and supports various gradient types (linear, radial, conic) without requiring user registration.
LogRocket·43wThe CSS if() function: Conditional styling will never be the same
CSS Working Group has approved the if() function, bringing true conditional logic to stylesheets. This new function allows inline conditional styling using syntax like `property: if(condition: value; else: fallback)` with support for style(), media(), and supports() queries. Unlike traditional approaches requiring separate media query blocks or complex custom property toggles, if() keeps conditional logic centralized within property declarations. The function enables advanced patterns like nested conditions, integration with calc(), and conditional shorthand modifications, making components more adaptive and self-contained while reducing code fragmentation.
CSS-Tricks·43wMaking a Masonry Layout That Works Today
A practical implementation of masonry layout using CSS Grid and minimal JavaScript that works across all browsers today. The technique uses grid-auto-rows set to 0px, row-gap of 1px, and dynamically calculates item heights with getBoundingClientRect to create proper spacing. The solution includes media loading detection, responsive behavior with ResizeObserver, and support for multi-column spanning items, all in just 66 lines of JavaScript code.
k2infocom's Squad·45wBuilding a Modern Travel Website with React JS : From Concept to Design
A step-by-step tutorial for building a fully functional travel website using React JS and Bootstrap. The project covers responsive design, animation effects, dynamic data handling, and modern UI development practices from concept to completion.