asayer·3yLazy Loading in JavaScript
Lazy Loading in JavaScript Back Lazy loading is a method used to defer the loading of non-essential content until it becomes necessary for users to view it. It delays the display of certain elements, such as images, videos, and other multimedia, until the user actively interacts with the webpage. This article will look into the benefits of lazy loading.
builder.io·3yUI over APIs
Server-driven UIs are not just a theoretical concept; they are being implemented by some of the biggest names in the tech industry. They offer a dynamic and flexible way to generate UIs on the server and send them to the client through APIs. This approach can provide faster iteration and more personalized user experiences.
Community Picks·3yWeb UX: Study Guide
The resources here are grouped under the following topics: General Consideration on Web Usage Viewing Behaviors on the Web Eyetracking Gaze Patterns Web Interaction Design Content. This section introduces fundamental theories and key research on information-seeking behaviors on the web.
freeCodeCamp·3yMERN Stack Crash Course – Build a Book Store App
MERN stack is a set of technologies often used to build full stack web apps. You'll start from scratch and build a complete CRUD application, exploring both backend and frontend development. The course covers an array of topics, including but not limited to: Backend CRUD operations.
freeCodeCamp·3yReact Server Components – How and Why You Should Use Them in Your Code
React has changed how we think about building user interfaces. We must adapt to this new mental model to fully leverage its power in building applications. In this tutorial, you'll learn about React Server Components (RSC) You'll learn exactly what they are and how they work, and more importantly, what problem they solve.
Tuts+·3yHow to Implement Drag and Drop With JavaScript
Drag and drop is a user interface (UI) interaction that allows users to click and hold on an element, drag it to a target location, and drop it there. In this tutorial, we'll create a simple example of a list where you can reorder the items using drag and drop.
UX Planet·3yDesign Systems: A Beginner’s Guide
Design Systems are a collection of reusable components, patterns, and guidelines that help teams create consistent and user-friendly products. They’re becoming increasingly important in product design, as they can help teams save time, improve collaboration, and create better products. There are many different ways to create a design system.
UX Planet·3yTop 5 Design Systems That Streamline Design Process
For each design system, we will provide a Figma UI kit so you don’t need to create UI elements from scratch. The HIG is a must-have tool for anyone who wants to build a product for the Apple ecosystem. Microsoft Fluent 2 is the next evolution of Microsoft’s design system.
UX Planet·3yDesign System — Fundamental principles for designing and developing a robust Design System.
A Design System is a large set of reusable components combined with a set of rules, using visual design elements like colors, spacing, or shapes. It enables you to deliver a consistent design in less time. It doesn’t only save your time but it helps in maintaining a consistent experience.
Semaphore·3ySPA Are Dead, Long Live SPA
React’s solution comprises two components, both of which are available through Next.js. Server components are streamlined, non-interactive versions of existing React components, rendered solely on the server. The React team believes the industry is moving: shifting tasks back to the server to enhance load times.
LambdaTest·3yIntroduction to Bootstrap Dropdowns And Bootstrap Collapse [Bootstrap Tutorial: Part I]
Introduction to Bootstrap Dropdowns and Bootstrap Collapse. Bootstrap provides several classes and attributes for styling and controlling the behavior of the dropdowns. The classes enrich your dropdowns with features such as headers and dividers. Dropdowns are toggleable overlays or floats that can render a list of links, buttons, forms.
Figma·3yHow Spotify’s Design System Goes Beyond Platforms
Spotify's Design System Goes Beyond Platforms: How Spotify’s design system goes beyond platforms. Design Manager Juli Sombat says the need for more cohesion led Spotify's design team to take a cross-platform approach to components. Sombat: We wanted that experience to be as seamless and cohesive as possible.
UX Planet·3y20 essential Figma plugins every designer must try
Most Figma plugins in this list are available for free. Remove BG allows you to remove the background of images with just a single click. Icons8 provides access to 3,000,000+ icons (consistent, pixel-perfect, in 40+ styles), photos (flat and 3D, vector and raster) and illustrations.
freeCodeCamp·3yHow to Set Up Social Media Web Authentication using Firebase
The way users log in affects their overall experience and engagement with an application. The ability to log into web apps using social network accounts is a helpful advance in this area. Firebase serves as a comprehensive platform, providing developers with backend services and tools to create web and mobile applications.
DZone·3y8 Ways to Improve Application Performance
DZone 8 Ways to Improve Application Performance Application performance is critical for delivering a fast and responsive user experience. Latency can not only impact the overall user experience and decrease engagement, but it can be a costly and complicated problem as well. Slow applications can slow down business processes, leading to decreased productivity and increased costs.
asayer·3yEffective Cross-Browser Testing Strategies
Cross-browser testing involves testing a web application to ensure it functions and appears on different browsers and versions. It involves verifying that websites or web applications work and look the same across different web browsers and their versions. This article explores the best practices and strategies for efficient cross- browser testing.
asayer·3yStyling and Customizing Material UI Date Pickers
MUI v6, built on top of the Material Design system, offers a comprehensive set of components and styling options. This article will show you many options for styling and customizing date pickers. The material-ui-pickers repository has been archived because Material-UI no longer supports it.
Community Picks·3yBest practices for error handling in API requests
In the world of API requests, error handling is not just a best practice, it's a necessity. Effectively handling HTTP status codes is crucial for ensuring smooth and reliable communication between clients and servers. In the following sections, we'll dive deeper into how to retrieve and handle these status codes in your Python code.
UX Planet·3yFive Design Inspiration Websites You Should Check Out
Five Design Inspiration Websites You Should Check Out are five design inspiration websites to explore. Mobbin Free & Paid Plans offers real app/website designs, complete with a prototype feature. Practice Design Free gathers excellent designs, primarily sourced from Dribbble's design community.
UX Planet·3yUse of color
Use colors, but never rely solely on colors, as some people might not be able to distinguish them. This is the essence of success criterion WCAG 1.4.1 (A) for accessible design. Inactive components are also mentioned in 1.3 Contrast (minimum), increasing the recommendation of avoiding disabled elements.
Laravel Bytes·3ySPA NavBars and Highlighting, Livewire v3 Style!
Livewire’s new directive is brilliant. It delivers the combined forces of SEO-friendly rendering, and the smoothness of an SPA powered user experience. It allows an “SPA” experience by loading the requested page in the background and updating parts of the current page to reflect new content.
Community Picks·3yFree Books For Interface & UX Designers – Smart Interface Design Patterns
Free Books For Interface & UX Designers are free eBooks for UX designers, interface designers and product designers. These books have been kindly shared by the community, with lessons learned by authors for everybody to read and benefit from. The Monster List of UX Books is a fantastic up-to-date list of UX books.
Telerik·3yBest Practices for Improving Performance of Frontend Code
Best Practices for Improving Performance of Frontend Code Frontend development is the foundation of any successful web application. You can get faster load times, a better user experience, and better SEO results by improving the performance of your website. Gzip compression can also be used to optimize the size of images without affecting its quality.