Archive | article

RSS feed for this section

Double Opt-In Email Intros

You know those those “introduction” emails? Someone thinks you should meet someone else, and emails happen about it. Or it’s you doing the introducing, either by request or because you think it’s a good idea. Cutting to the chase here, those emails could be done better. Eight years ago, Fred Wilson coined the term “double opt-in intro”.

This is how it can work.

You’re doing the vetting

Since you’re writing the emails here, it’s your reputation at stake here. …


Double Opt-In Email Intros is a post from CSS-Tricks

Using Custom Properties to Modify Components

Instead of using custom properties to style whole portions of a website’s interface I think we should use them to customize and modify tiny components. Here’s why.

Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website’s interface in one fell swoop. For example, if you’re working at somewhere like a big news org then we might want to specify a distinct visual design for the Finance section and the Sports section – buttons, …


Using Custom Properties to Modify Components is a post from CSS-Tricks

Saving SVG with Space Around It from Illustrator

There are a number of ways to export graphics from Illustrator. Some of them aren’t particulary useful (Save As), some of them don’t support SVG (Export for Web), some of them produce good output but have limited options that don’t allow preserving space around the art (Export As). The only way to output SVG preserving the space around the art is export the artboard itself, which is only an option under the Export for Screens area.


Saving SVG with Space Around It from Illustrator is a post from CSS-Tricks

Visual Email Builder Apps

I bet y’all know that apps like Campaign Monitor and MailChimp have visual email builders built right into them. You drag and drop different types of content right into a layout. You edit text right within the email. It’s nice. It’s a lot nicer than editing the quagmire of HTML underneath, anyway!

But not everybody needs all the rest of the features that those apps bring, like list management and the actual sending of the email. Perhaps you have an …


Visual Email Builder Apps is a post from CSS-Tricks

Using ES2017 Async Functions

ES2017 was finalized in June, and with it came wide support for my new favorite JavaScript feature: async functions! If you’ve ever struggled with reasoning about asynchronous JavaScript, this is for you. If you haven’t, then, well, you’re probably a super-genius.

Async functions more or less let you write sequenced JavaScript code, without wrapping all your logic in callbacks, generators, or promises. Consider this:

function logger() {
let data = fetch('http://sampleapi.com/posts')
console.log(data)
}

logger()

This code doesn’t do what …


Using ES2017 Async Functions is a post from CSS-Tricks

(An Interview About) imgix Page Weight

Imgix has been a long-time display ad sponsor here on CSS-Tricks. This post is not technically sponsored, I just noticed that they released a tool for analyzing image performance at any given URL that is pretty interesting.

We know web performance is a big deal. We know that images are perhaps the largest offender in ballooning page weights across the web. We know we have tools for looking at page performance as a whole. It seems fairly new to me …


(An Interview About) imgix Page Weight is a post from CSS-Tricks

A Poll About Pattern Libraries and Hiring

I was asked (by this fella on Twitter) a question about design patterns. It has an interesting twist though, related to hiring, which I hope makes for a good poll.

Note: There is a poll embedded within this post, please visit the site to participate in this post’s poll.

I’ll let this run for a week or two. Then (probably) instead of writing a new post with the results, I’ll update this one with the results. Feel free to comment …


A Poll About Pattern Libraries and Hiring is a post from CSS-Tricks

Using the Paint Timing API

It’s a great time to be a web performance aficionado, and the arrival of the Paint Timing API in Chrome 60 is proof positive of that fact. The Paint Timing API is yet another addition to the burgeoning Performance API, but instead of capturing page and resource timings, this new and experimental API allows you to capture metrics on when a page begins painting.

If you haven’t experimented with any of the various performance APIs, it may help if …


Using the Paint Timing API is a post from CSS-Tricks

All About React Router 4

This post is going to dig into to React Router 4, how it’s so different from previous React Router versions, and why that is. My intentions for this article aren’t to rehash the already well-written documentation for React Router 4. I will cover the most common API concepts, but the real focus is on patterns and strategies that I’ve found to be successful.


All About React Router 4 is a post from CSS-Tricks

Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins

According to an article from A List Apart about CSS Grid, a “new era in digital design is dawning right now.” With Flexbox and Grid, we have the ability to create layouts that used to be extremely difficult to implement, if not impossible. There’s an entirely new system available for creating layouts, especially with Grid. However, as with most web technologies, browser support is always something of an issue. Let’s look at how we can make the fundamental …


Browser Compatibility for CSS Grid Layouts with Simple Sass Mixins is a post from CSS-Tricks