Transparent JPG (With SVG)

Let’s say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don’t I need PNG for that? Won’t that make for either huge file sizes (PNG-24) or weird quality (PNG-8)? Let’s look at another way that ends up best-of-both-worlds.

The original photographic image.

The goal is to clip myself out of the image, removing the background. My technique for that is usually …


Transparent JPG (With SVG) is a post from CSS-Tricks

Responsive Images in WordPress with Cloudinary, Part 1

In this post we’ll look at a brief history of responsive images and why they are so important for performant websites. Then we’ll look at how WordPress helps automate that, and ultimately how the whole situation gets a lot better by leveraging Cloudinary.


Responsive Images in WordPress with Cloudinary, Part 1 is a post from CSS-Tricks

CSS Grid: One Layout, Multiple Ways

I’ve really been enjoying getting acquainted with CSS Grid. The feature is starting to ship in many browsers and it looks like we’ll be able to start using it in production in due time.

One of the things that stands out most to me about CSS Grid is the fact that the syntax is so flexible. To demonstrate this point, we’re going to look at how we can create the same layout in three different ways, all using CSS …


CSS Grid: One Layout, Multiple Ways is a post from CSS-Tricks

Optimizing GIFs for the Web

Ire Aderinokun describes a frustrating problem that we’ve probably all noticed at one point or another:

Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

To solve …


Optimizing GIFs for the Web is a post from CSS-Tricks

“Write a script”

Jeremy Keith, on teaching people JavaScript for the first time:

A lot of that boils down to this pattern:

When (some event happens), then (take this action).

We brainstormed some examples of this e.g. “When the user submits a form, then show a modal dialogue with an acknowledgment.” I then encouraged them to write a script …but I don’t mean a script in the JavaScript sense; I mean a script in the screenwriting or theater sense. Line by line, write …


“Write a script” is a post from CSS-Tricks

“lives in a sort of purgatory”

Brad Frost:

A front-end designer … lives in a sort of purgatory between worlds:

  • They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios
  • They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.
  • They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.
  • They understand the


“lives in a sort of purgatory” is a post from CSS-Tricks

How to Add Signature or Ads after Post Content in WordPress

Do you want to add a signature or advertisement after your blog post content in WordPress? By default, WordPress does not come with an easy way to display signature or ads after post content. In this article, we will show you how to easily add… Read More »

The post How to Add Signature or Ads after Post Content in WordPress appeared first on WPBeginner.

How to Easily Disable Blog Features in WordPress

Do you want to disable the blog features in WordPress? Some of you might be building websites with no blogs or any blogging related element. In this article, we will show you how to easily disable blog features in WordPress without writing any code. Why… Read More »

The post How to Easily Disable Blog Features in WordPress appeared first on WPBeginner.