I came across this article by Miguel Nunez about making a flexbox based gallery that’s well thought out and well written, but has one major flaw. The markup reeks of still thinking in the “table…

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Vue, Svelte, or any other JavaScript application.

Imagine you need to create a two-column layout. Yes, the simplest one: a column on the left, a column on the right, and some gap in-between. There’s an obvious modern solution for that:

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

A lot of things that required hacks, workaround and custom code are now supported natively in all major browsers. We take a look at them. Now that the security and support lifecycle for Internet…

Previously, individuals were focused on making money through factories (such as the textile industry), and then businesses; subsequently, they were focused on startups, and now on building side…

2. Medusa
   allows developers to create scalable and sophisticated commerce setups with less work and a high level of developer experience, and it is free forever.
   You can use Gumroad if you have no programming skills. I use it to effortlessly sell my digital items, and it just takes a commission on each sale.

3. Mixkit
   The majority of my friends who upload videos to YouTube pay an annual subscription cost since they aren’t even aware of Mixkit.
   You may also utilize Pexels, which I’ve tried before and think is worth mentioning.

4. Canva
   5.Quillbot

A set of real-world challenges to practice crucial UX design skills. Train yourself in product design and take away portfolio-worthy deliverables.

Here’s a fancy new experimental feature in Chrome! Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations… even down to the total number of defined media queries.

Firefox being "developer's browser" has many great tools to help make our work easier. You can find more on its tool collection on the Firefox

1. View horizontal and vertical rulers
2. Take screenshots using CSS selectors
3. Pick colors from web pages
4. View page layout in 3D
5. Disable JavaScript for current session

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL) - GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

A look at some useful and creative ways to style a list.

Custom markers with ::before #
Styling the ::before pseudo-element was a common way to create custom list markers before ::marker came along. But even now, it can allow us more flexibility, when we need it, for visually complex list styling.

Like ::marker, we can add our own custom bullet styles using the content attribute. Unlike using ::marker, we need to do some manual positioning, as we don't get the automatic benefits offered by list-style-position. But we can position it relatively easily with flexbox, and it does open up a greater number of possibilities for alignment. For instance, we could alternate the position of the marker:

Webfont icons — what typographers would traditionally refer to as dingbats — are an important part of modern web development. There are so many advantages to them:

Comment:
I've used https://icomoon.io for years, because of its great selection of free icon fonts and also because it's quite easy to import self designed svgs and turn them into glyphs. It's easy to use and all relevant functionalities are free of charge.

https://web.dev/optimize-webfont-loading/#customize-the-text-rendering-delay

Never, ever use system-ui as the value of font-family

https://infinnie.github.io/blog/2017/systemui.html

A visualizer to help you learn how the DOM Event system works through exploration. Explore event phases, stopping events, canceling events, passive events and more.

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for copypasta or as a tree-shakeable React component library.

Filling out a form can frustrate anyone if it requires a high cognitive effort. A high cognitive effort causes users to think and work harder, increasing the time to complete the task. This experience can lead to page abandonment and lower conversion rates on a checkout form. To prevent this, apply these best practices to […]

aspect-ratio is a great example of a humble property that fills a long-awaited need in the CSS community. It’s simple to use and behaves in a way that respects content, without the need for any extra CSS.

Normalize.css is a library that helps you build all elements more consistently when displayed in today’s popular browsers. I hope that the article will provide you with useful CSS libraries for web…

https://philipwalton.github.io/solved-by-flexbox/
https://tobiasahlin.com/spinkit/
https://connoratherton.com/loaders
https://github.com/AllThingsSmitty/css-protips
https://csslayout.io/close-button/
https://bansal.io/pattern-css
https://github.com/codrops/PageTransitions
https://lokesh-coder.github.io/pretty-checkbox/#basic-checkbox

Stephanie Eckles

Sixty percent of first-time visitors leave a website in less than fifteen seconds. Yet, there is an often overlooked usability factor that improves visitor retention—scannability. These UI design tips for using research, science, and strategy to layout content help convert short-term visitors to long-lasting users.