Select Page

Category: Article

Choosing a Responsive Email Framework: MJML vs. Foundation for Emails

Implementing responsive email design can be a bit of a drag. Building responsive emails isn’t simple at all, it is like taking a time machine back to 2001 when we were all coding website layouts in tables using Dreamweaver and Fireworks. But there’s hope! We have tools available that can make building email much easier and more like coding a modern site. Let’s take a look at a couple of different frameworks that set out to simplify things for us. First, the Situation You have to be compatible with lots of old email clients, many of which don’t even...

Read More

What are Higher-Order Components in React?

If you have been in the React ecosystem for a while, there is a possibility that you have heard about Higher Order Components. Let’s look at a simple implementation while also trying to explain the core idea. From here you should get a good idea of how they work and even put them to use. Why Higher-Order Components? As you build React applications, you will run into situations where you want to share the same functionality across multiple components. For example: you need to manage the state of currently logged in users in your application. Instead of managing that...

Read More

Hey hey `font-display`

Y’all know about font-display? It’s pretty great. It’s a CSS property that you can use within @font-face blocks to control how, visually, that font loads. Font loading is really pretty damn complicated. Here’s a guide from Zach Leatherman to prove it, which includes over 10 font loading strategies, including strategies that involve critical inline CSS of subsets of fonts combined with loading the rest of the fonts later through JavaScript. It ain’t no walk in the park. Using font-display is kinda like a walk in the park though. It’s just a single line of CSS. It doesn’t solve everything that Zach’s more exotic demos do, but it can go a long way with that one line. It’s notable to bring up right now, as support has improved a lot lately. It’s now in Firefox 58+, Chrome 60+, Safari 11.1+, iOS 11.3+, and Chrome on Android 64+. Pretty good. What do you get from it? The ability to control FOUT and FOIT as is right for your project, two things that both kinda suck in regards to font loading. We’ve got a couple posts on it around here: font-display for the Masses by Jeremy Wagner If you really dislike FOUT, font-display: optional might be your jam by me Reminder: FOUT = Flash of Unstyled Text FOIT = Flash of Invisible Text Neither is great. In a perfect world, our custom...

Read More

1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves? The desired results. Well, this article is going to explain just how to do this and then also show how to make things fun by adding in some animation. CSS-ing the Gradient Rays The HTML is just one . In the CSS, we...

Read More

Some Recent Live Coding Favorites

There is no shortage of videos out there where you can watch people code with an educational vibe. A golden age, one might say. Here are a few that I’ve watched and really enjoyed lately: @keyframers – “An animated, collaborative coding live stream by @davidkpiano & @shshaw.” They’ve got 2 epsidoes out now, each of which they start with an animated interface GIF and then collaboratively re-build it. The Coding Train – Daniel Shiffman’s show is a force of nature on it’s own, featuring challenges, introductions, and guest tutorials. Speaking of guest tutorials, CodePen recently sponsored an episode featuring Catt Small and game development with Phaser.js. Creative Coding with CSS. You have to sign up for Skillshare to watch it, but Jake Albaugh loves getting crazy with CSS and it’s fun to watch. The post Some Recent Live Coding Favorites appeared first on CSS-Tricks....

Read More
000webhost logo