design tips

Gutenberg introduces the modern JavaScript stack into the WordPress ecosystem, which means some new tooling should be learned. Although tools like create-guten-block are incredibly useful, it’s also handy to know what’s going on under the hood.

Article Series:

1. Series Introduction
2. What is Gutenberg, Anyway?
3. A Primer with create-guten-block
4. Modern JavaScript Syntax
5. React 101
6. Setting up a Custom webpack (This Post)
7. A Custom “Card” Block (Coming Soon!)

The files we will be configuring here should be familiar from what we covered…

The post Learning Gutenberg: Setting up a Custom webpack Config appeared first on CSS-Tricks.

(This is a sponsored post.)

With DigitalOcean, you can spin up Droplet cloud servers with industry-leading price-performance and predictable costs. Our flexible configurations are sized for any application, and we save you up to 55% when compared to other cloud providers.

Get started today. Receive a free $100/60-day account credit good towards any DigitalOcean services.

Direct Link to Article — Permalink…

The post ​High Performance Hosting with No Billing Surprises appeared first on CSS-Tricks.

Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s roll-up our sleeves and make something cool.

Article Series:

1. Series Introduction
2. What is Gutenberg, Anyway?
3. A Primer with create-guten-block
4. Modern JavaScript Syntax
5. React 101 (This

…

The post Learning Gutenberg: React 101 appeared first on CSS-Tricks.

One of the key changes that Gutenberg brings to the WordPress ecosystem is a heavy reliance on JavaScript. Helpfully, the WordPress team have really pushed their JavaScript framework into the present and future by leveraging the modern JavaScript stack, which is commonly referred to as ES6 in the community. It’s how we’ll refer to it as in this series too, to avoid confusion.

Let’s dig into this ES6 world a bit, as it’s ultimately going to help us understand how …

The post Learning Gutenberg: Modern JavaScript Syntax appeared first on CSS-Tricks.

• Marcin Wichary made an incredible demo exploring “segmented type” as in, the kind you might see on a display like a microwave, but scaling up in complexity from there.
• “Datalegreya is a typeface which can interweave data curves with text.”
• Airbnb commissions their own new font, Cereal (complete with hype video), and then talks about how they are rolling out usage. I wonder what the price tag is for work like this. Seems like it would be both

…

The post Just a Couple’a Fun Typography Links appeared first on CSS-Tricks.