Community Picks·3yPatterns
A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these examples to help ensure your projects stay on the right track. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores.
asayer·3yUX: best practices for developers
User experience (UX) is a critical component of web development that can make or break the success of a website or application. UX refers to the user’s overall experience when interacting with a website, app, or product. A well-designed UX can increase user engagement, retention, and conversions, resulting in better commercial outcomes.
Visual Studio Blog·3yVisual Studio UI Refresh
The Microsoft Fluent design language provides a unified framework to create and deliver more productive, consistent, and accessible applications. The current visual language (which hasn’t been updated since Visual Studio 2012) has limitations for many customers. The new UI updates focus on three main pillars: cohesiveness, accessibility, and productivity.
UX Planet·2yDark Mode UI Design Best Practices
Dark mode is a night-friendly UI design style that reduces eye strain and improves battery life. It focuses on delivering good user experiences by reducing glare and directing attention to content. However, it can pose accessibility and branding issues. Following best practices such as using darker shades of black, avoiding saturation, and testing in various lighting settings can help designers seamlessly integrate dark mode into their designs.
Community Picks·3yCreating responsive data tables with CSS
A responsive data table is designed to work well on both desktop and mobile devices. We’ll explore options for creating responsive data tables using CSS and techniques for making them accessible and easy to use on mobile devices. Controlling the width and overflow is one of the most important things we can do to make it responsive.
Pointer·3yNo-code has no future in a world of AI
The ultimate death knell for no-code is finally here: AI-driven software development. All low-code/no-code platforms have two fundamental value propositions: Speed and accessibility. The next decade will dwarf anything that will be able to be built on top of completely closed systems.
LogRocket·3yUnderstanding neumorphism in CSS
Neumorphism is a style of design that combines elements of skeuomorphism and flat design. It is a design style that involves creating user interface elements with a soft, three-dimensional appearance. This article will explore how to use it in your CSS projects and its accessibility concerns.
UX Planet·3yCreate your own Design system: Chapter Color tokens
Color tokens are used in design systems to represent colors in a concise and manageable way. They help ensure consistency, reusability, and easy maintenance of colors in design systems. To set color tokens effectively, you need to define a color palette, assign meaningful names, organize variants, document the tokens, consider accessibility, test and gather feedback, implement version control, integrate with design tools, promote collaboration and communication, and regularly update and maintain the tokens.
GitHub Changelog·3yMutual connections now available on user profile
Force-pushing and Fetching In GitHub Desktop 3.2.3 makes force pushing and fetching through the newly added fetch/pull dropdown menu items as well as adding pull request comment notifications. Accessibility GitHub Desktop is actively working to improve accessibility in support of GitHub's mission to be a home for all developers.
freeCodeCamp·3yHow to Work with Images in HTML – A Beginner's Guide
Learn how to work with images in HTML, including how to insert an image, the different image file formats, controlling image size, image alignment, creating image links, making images responsive, loading images from external sources, and ensuring image accessibility.
Bootcamp·2y7 New Apps/Websites to explore as UX/UI designer
Discover 7 new apps/websites for UX/UI designers, including Visily for brainstorming and prototyping, MingCute icons for micro animations, Rebrand and FreeFaces for inspiration, ls.graphics and Mr.mockups for mockups, and Wave for accessibility. Plus, Science Direct for research on user experience design.
freeCodeCamp·2yWeb Accessibility Best Practices – How to Ensure Everyone Can Use Your Website
Web accessibility is important for creating inclusive websites that can be used by people with a wide range of abilities. It involves using semantic HTML, ensuring sufficient contrast, making functionality keyboard accessible, providing alt text for images, using ARIA roles when necessary, ensuring accessible forms, captioning and transcribing audio and video, and designing consistent navigation. Automation tools like Axe, WAVE, Google Lighthouse, and others can help in testing and improving accessibility. Prioritizing accessibility in web design leads to a more inclusive and user-friendly digital environment.
Community Picks·2yHTML: The Bad Parts
This article highlights some of the shortcomings of HTML in terms of accessibility and usability. It discusses issues with the <select multiple> attribute, the <i> element for icons, <ul> and <ol> elements, the title attribute, and more. The author emphasizes the importance of recognizing and addressing these gaps to create a more inclusive web.
Community Picks·3yDon't Use Fixed CSS height or width on Buttons, Links, or Any Other Text Containers
Using fixed CSS height or width on buttons, links, or any other text containers can put you at risk of failing WCAG 2.2 Success Criterion 1.4.4 Resize Text. Fixed values can cause the text to get cut off when the text size is increased. Using alternative units like `rem` for font-size and `padding` instead of `width` or `max-width` can ensure that text remains resizable without loss of content or functionality.
freeCodeCamp·3yHow to Build Error-Free HTML Forms
When I first started creating HTML forms, I would often use as the label and id's attribute. This all changed when I started using WAVE’s accessibility checker to learn how to make my code more accessible. In this article, I will show you three things I have learned in surviving, I mean making HTML forms error-free.
asayer·3yHow to Customize Checkboxes with CSS
Checkboxes are a common element of web design that allows users to select from a list of options. This article explores the importance of customizing and improving the accessibility of checkboxes. We’ll discuss styling, the size and shape of the checkboxes, and some pointers for making your checkboxes more accessible to all users.
Community Picks·2yWhy You Should Use px Units for margin, padding, & Other Spacing Techniques
Learn about the differences between absolute and relative CSS units for margin, padding, and other spacing techniques. Find out why using relative units for spacing can lead to difficulties in managing spacing on a webpage and negatively impact user experience. Discover the benefits of using absolute units for spacing to improve readability and accessibility.
Christian Heilmann·3yI just did a test to apply as a front end developer – and things aren’t going well
Christian Heilmann just did a test to apply as a front end developer - and things aren’t going well. It was a test that covered the basics of web development, CSS and accessibility and the rest would be a JavaScript exercise. The test suite was to implement a calculator with an alternative syntax to the usual infix notation.
Code Like A Girl·3yThe Power of Web Performance: How I Increased the Score from 27 to 99
The Power of Web Performance: How I Increased the Score from 27 to 99. Delivering a great user experience is critical for improving customer traffic to your website and business. This blog contains the list of things I did to improve the quality and performance of my NextJS website.
Visual Studio Code·3yVisual Studio Code September 2023
The September 2023 release of Visual Studio Code includes many updates and improvements, such as screen reader support for pull request comments, a new 'similar commands' feature in the Command Palette, and accessibility improvements in the GitHub Pull Requests and Issues extension.
LambdaTest·3yComplete Guide to Color Contrast Accessibility
WebAIM (Web Accessibility in Mind) is a platform that provides guidelines on how accessibility should be adopted across the web. This is where the CSS color-contrast() feature can help developers provide adequately contrasting and accessible modern web designs. We explore color contrast accessibility in CSS, its implementation, and how to test websites or mobile applications.
