VuePress Static Site Generator

VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line.

We talk a lot about Vue around here, from a five-part series on getting started with it to a detailed implementation of a serverless checkout cart

But, like anything new, even the basics of getting started can …

The post VuePress Static Site Generator appeared first on CSS-Tricks.

Creating a Panning Effect for SVG

Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG.

I made this demo below to show how I’d approach this question:

See the Pen Demo – SVG Panning by Louis Hoebregts (@Mamboleoo) on CodePen.

Here are the four steps to make the above demo work:

  1. Get mouse and touch events from the user
  2. Calculate the mouse offsets from its origin
  3. Save

The post Creating a Panning Effect for SVG appeared first on CSS-Tricks.

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

The post What are Higher-Order Components in React? appeared first on CSS-Tricks.

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.…

The post Choosing a Responsive Email Framework: MJML vs. Foundation for Emails appeared first on CSS-Tricks.

Scroll to the Future

This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property.

My favorite part of all though? It has to be this bit:

In the modern web, relying heavily on custom JavaScript to achieve identical behavior for all clients is no longer justified: the whole idea of “cross-browser compatibility” is …

The post Scroll to the Future appeared first on CSS-Tricks.

Kinsta

(This is a sponsored post.)

Huge thanks to Kinsta for sponsoring CSS-Tricks this week! We’re big fans of WordPress around here, and know some of you out there are too. So this might come of interest: Kinsta is WordPress hosting that runs on Google Cloud Platform. And in fact, it’s officially recommended by Google Cloud for fully-managed WordPress hosting.

What does that matter? Well, when you go with a cloud host you’re entering a new realm of reliability. For …

The post Kinsta appeared first on CSS-Tricks.

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

The post Hey hey `font-display` appeared first on CSS-Tricks.

How to Blog Anonymously Using WordPress

Do you want to blog anonymously using WordPress? There are many users who want to start a blog but don’t what to put their real name on it. In this beginner’s guide, we will show you how to easily blog anonymously using WordPress while keeping… Read More »

The post How to Blog Anonymously Using WordPress appeared first on WPBeginner.

6 Best Product Review Plugins for WordPress

Are you looking for the best product review plugins for WordPress? If you regularly add detailed product reviews on your website, then you can use a product review plugin to make them more SEO friendly. In this article, we have hand-picked the best product review… Read More »

The post 6 Best Product Review Plugins for WordPress appeared first on WPBeginner.