Aspect Ratios for Grid Items

We’ve covered Aspect Ratio Boxes before. It involves trickery with padding such that an element’s width and height are in proportion to your liking. It’s not an ultra-common need, since fixing an element’s height is asking for trouble, but it comes up.

One way to lower the risk is The Psuedo Element Tactic, in which a pseudo element pushes its parent element to the aspect ratio, but if the content inside pushes it taller, it will get taller, aspect …


Aspect Ratios for Grid Items is a post from CSS-Tricks

Accessible Web Apps with React, TypeScript, and AllyJS

Accessibility is an aspect of web development that is often overlooked. I would argue that it is as vital as overall performance and code reusability. We justify our endless pursuit of better performance and responsive design by citing the users, but ultimately these pursuits are done with the user’s device in mind, not the user themselves and their potential disabilities or restrictions.

A responsive app should be one that delivers its content based on the needs of the user, not


Accessible Web Apps with React, TypeScript, and AllyJS is a post from CSS-Tricks

SVG as a Placeholder

It wasn’t long ago when Mikael Ainalem’s Pen demonstrated how you might use SVG outlines in HTML then lazyload the image (later turned into a webpack loader by Emil Tholin). It’s kind of like a skeleton screen, in that it gives the user a hint of what’s coming. Or the blur up technique, which loads a very small image blurrily blown up as the placeholder image.

José M. Pérez documents those, plus some more basic options (nothing, an …


SVG as a Placeholder is a post from CSS-Tricks

4 Reasons to Go PRO on CodePen

I could probably list about 100 reasons, since as a founder, user, and (ahem) PRO member of CodePen myself, I’m motivated to do so. But let me just list a few here. Some of these are my favorites, some are what PRO members have told us are their favorite, and some are lesser-known but very awesome.

1) No-hassle Debug View

Debug View is a way to look at your the Pen you’ve built with zero CodePen UI around it and …


4 Reasons to Go PRO on CodePen is a post from CSS-Tricks

How to Disable Links

The topic of disabling links popped up at my work the other day. Somehow, a “disabled” anchor style was added to our typography styles last year when I wasn’t looking. There is a problem though: there is no real way to disable an <a> link (with a valid href attribute) in HTML. Not to mention, why would you even want to? Links are the basis of the web.

At a certain point, it looked like my co-workers were not going …


How to Disable Links is a post from CSS-Tricks

21 Best WordPress Themes for Nonprofit Organizations

Are you looking for the best WordPress themes for nonprofits? Charity and non-profit websites require appealing presentation with tools to manage their donation goals. In this article, we will show you some of the best WordPress themes for nonprofits that will help you get maximum… Read More »

The post 21 Best WordPress Themes for Nonprofit Organizations appeared first on WPBeginner.

Simple Patterns for Separation (Better Than Color Alone)

Color is pretty good for separating things. That’s what your basic pie chart is, isn’t it? You tell the slices apart by color. With enough color contrast, you might be OK, but you might be even better off (particularly where accessibility is concerned) using patterns, or a combination.

Patrick Dillon tackled the Pie Chart thing

Enhancing Charts With SVG Patterns:

When one of the slices is filled with something more than color, it’s easier to figure out [who the …


Simple Patterns for Separation (Better Than Color Alone) is a post from CSS-Tricks

How to Import / Export WordPress Theme Customizer Settings

Do you want to import or export theme customizer settings in WordPress? Exporting and importing theme customizer settings allow you to use the same configuration on another WordPress site. In this article, we will show you how to easily import / export WordPress theme customizer… Read More »

The post How to Import / Export WordPress Theme Customizer Settings appeared first on WPBeginner.

How to Restrict Media Library Access to User’s Own Uploads in WordPress

By default, WordPress allows authors to see all images on your site’s media library. This could be problematic if you invite a lot of guest authors. In this article, we will show you how to restrict WordPress media library access to user’s own uploads. Why… Read More »

The post How to Restrict Media Library Access to User’s Own Uploads in WordPress appeared first on WPBeginner.