LogRocket·2y16 practices for good web design
Learn 16 design practices for good web design, including optimizing the first impression, focusing on clarity, using visual hierarchy, and addressing user doubts. Also, understand the importance of mobile-first design and the principles of conversion rate optimization.
asayer·2yUsing the upcoming CSS when/else rules
Learn about the upcoming CSS when/else rules which provide a mechanism for applying styles selectively based on specific conditions. These rules are still in the proposal stage and not yet implemented in browsers. The @when rule allows for selective styling, dynamic adaptability, specific conditions, user interaction, state and event styling, customization, and enhanced usability and aesthetics. The @when/@else rules simplify conditional styling and improve readability. They can be implemented by checking browser support, writing base CSS, defining conditions, using @when to apply conditional styles, and using @else for alternative styles. Some advanced techniques include combining with CSS preprocessors and using dynamic styling based on conditions. Best practices include planning CSS, using flexible units, maintaining consistency, and documenting code. Debugging techniques involve using browser DevTools, isolating rules, and eliminating possible causes of issues.
DEV·2yThe Best UX Research Sites for Developers/Designers Inspirations
Discover the best UX research sites for developers and designers to find inspiration and ideas for their projects. Explore various web and app design sites that offer templates and inspiration for layout and theming. Check out popular sites like Dribbble and Awwwards, and share your recommendations in the comments.
web.dev·2yWhat's new in the web
The post discusses the recent updates and additions to Baseline, including the Web Platform Dashboard, RUM Archive integration, container queries, :has() selector, subgrid in CSS grid layout, CSS Nesting, <search> element in HTML, responsive video, inert attribute, color-mix() function, :user-valid and :user-invalid pseudo-classes, Compression Streams API, Declarative Shadow DOM, and Popover API.
DEV·2yHow to Create the Perfect Transparent Login Form
Learn how to create a stylish and see-through login form using HTML, CSS, and JavaScript. Follow step-by-step instructions to design the form structure, style the background image, style the login box, make the title look good, style the email and password sections, style the labels and text boxes, and finally make the login button look good. The result is a simple and attractive login form that can be customized further.
asayer·2yExploring the Creative Potential of Atropos.js for Web Design
Explore the creative potential of Atropos.js in web design. Atropos.js is a versatile JavaScript library that enhances web design with scroll-based animations, parallax effects, and seamless integration with popular frameworks. It facilitates the creation of unique and memorable user experiences, improves website performance, and offers design flexibility. Learn how to build a scroll-based gallery using Atropos.js, Axios, and React.
Bootcamp·2yEssential UI Design Principles: A Foundation for Beginners
Learn essential UI design principles for beginners, including simplifying layouts, organizing navigation, reducing cognitive load, ensuring color contrast, keeping typography consistency, highlighting important icons, and using icons with clarifying text.
ElixirStatus·2ysvycal/og-image: An open graph image generator, by SavvyCal ✨
og-image is a web service that generates Open Graph images for webpages. It uses custom HTML/CSS templates and supports emoji. The templates can be easily modified or new ones can be added. The images can be previewed as HTML or rendered as PNG. Installation and local running instructions are provided. The project is implemented in Elixir and uses Puppeteer for capturing screenshots.
