A Step-By-Step Guide To Building Accessible Carousels
Most carousels come along with usability and accessibility issues. To avoid these issues, this article addresses step-by-step design considerations as well as semantic requirements for carousels to be accessible. It is intended to create an in-depth understanding of the implementation and its impact on users.
As widely used as they are, carousel widgets have a bad reputation among UX professionals. They are ignored by users (Nielsen Norman Group), only 1% interact with a carousel at all, and 89% of them only with the first slide (Eric Runyon). Jared Smith even responds to the question “Should I use A Carousel?” by saying, “Seriously, you really shouldn’t.” Others state that there isn’t one answer. You have to consider various factors, such as function, design, platform (desktop or mobile) and, most importantly, context. For whatever reason you include a carousel on a website, make sure it is user-friendly and accessible.
How To Create Horizontal Scrolling Containers
The Flexbox Method
.scrolling-wrapper-flexbox {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
.card {
flex: 0 0 auto;
}
}
Leveraging System Fonts on the Web
the CSS fonts spec has a couple (new to me) generic font families, like ui-serif and ui-sans-serif, aimed at providing finer-grained controls for specifying OS-level fonts. This allows developers the power to integrate their UIs with the look and feel of the underlying operating system. To suggest Apple user agents render text on screen with the “New York” serif font, developers can specify: font-family: ui-serif.
BEM – Block Element Modifier
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.
BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using BEM’s proper naming convention will better prepare you for design changes made to your website.
CSS filter generator to convert from black to target hex color
The goal was to be able to create custom style sheets and allow for the coloring of icons
REM to PX Converter
REM to PX Converter is a free online tool you can use to easily convert rem (root em) to px (pixel). Keep in mind that 1rem is equal to the root font-size, in other words, the font-size on element.
Electron. Build cross-platform desktop apps with JavaScript, HTML, and CSS
Building cross-platform desktop applications comes with a unique set of challenges that can stand in your way when you are trying to transform your ideas into software. Web apps avoid some of these hurdles, but they have limitations that make them impractical for building native desktop applications. Electron lets you harness the best parts of these technologies to build beautiful, cross-platform desktop applications using HTML, JavaScript, and CSS.
This Amazing Image Made of Code Looks Different Based on Your Browser
“When you look at this image on different browsers, you’re kind of looking at the history of the internet and what was demanded of it at the time,» Smith told Motherboard in 2018.
But experimenting with different browsers also reveals a hint of the future: A ton of browsers these days are running Chromium, Google’s open-source browser code. Whereas Pure CSS Lace might have shown off how every browser is unique in the past, it now looks exactly the same on Chrome, Vivaldi, Brave, and Opera.