Archive | vue

RSS feed for this section

What’s wrong with CSS-in-JS?

Brad Frost thinks it’s:

  1. Lack of portability
  2. Context Switching
  3. Flushing best practices down the toilet

In the spirit of good-ol-fashioned blog-and-response, here’s:

I’d like to point out that “CSS-in-JS” is an umbrella term, and that there are lots of takes on actual implementations of this. It’s possible to like one approach and not another.

My guess is we’ll end up with a split down the middle as a best practice someday.

When we write …

The post What’s wrong with CSS-in-JS? appeared first on CSS-Tricks.

What’s wrong with CSS-in-JS?

Brad Frost thinks it’s:

  1. Lack of portability
  2. Context Switching
  3. Flushing best practices down the toilet

In the spirit of good-ol-fashioned blog-and-response, here’s:

I’d like to point out that “CSS-in-JS” is an umbrella term, and that there are lots of takes on actual implementations of this. It’s possible to like one approach and not another.

My guess is we’ll end up with a split down the middle as a best practice someday.

When we write …

The post What’s wrong with CSS-in-JS? appeared first on CSS-Tricks.

Native-Like Animations for Page Transitions on the Web

Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement!

Here’s what we’ll be building:

Demo Site

GitHub Repo

We’ll build out the simplest possible distillation of these …

The post Native-Like Animations for Page Transitions on the Web appeared first on CSS-Tricks.

Native-Like Animations for Page Transitions on the Web

Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not. There are a number of ways to accomplish these types of movement!

Here’s what we’ll be building:

Demo Site

GitHub Repo

We’ll build out the simplest possible distillation of these …

The post Native-Like Animations for Page Transitions on the Web appeared first on CSS-Tricks.

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.

List Rendering and Vue’s v-for Directive

List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user. In almost every web application we use, we can see lists of content in numerous areas of the app.

In this article we’ll gather an understanding of Vue’s v-for directive in generating dynamic lists, as well as go through some examples of why …

The post List Rendering and Vue’s v-for Directive appeared first on CSS-Tricks.

Methods, Computed, and Watchers in Vue.js

One of the reasons I love working with Vue is because of how useful methods, computed, and watchers are, and the legibility of their distinction. Until understanding all three, it’s difficult to leverage the functionality of Vue to its full potential. Still, the majority of people I see confused about this framework tend to also be confused about the differences here, so let’s dig in.

In case you need a quick answer and don’t have time to read …

The post Methods, Computed, and Watchers in Vue.js appeared first on CSS-Tricks.

Vue Design System

We talk a lot about Vue around here, including some practical applications of it, but haven’t gotten deep into designing for it. In this post, Viljami Salminen describes his Vue design process and the thinking that led him to build the Vue Design System:

A design system can help establish a common vocabulary between everyone in an organization and ease the collabo­ration between different disciplines. I’ve seen it go the other way around too when important decisions have been …

The post Vue Design System appeared first on CSS-Tricks.

Let’s Build a Custom Vue Router

Plenty of tutorials exist that do a great job in explaining how Vue’s official routing library, vue-router, can be integrated into an existing Vue application. vue-router does a fantastic job by providing us with the items needed to map an application’s components to different browser URL routes.

But, simple applications often don’t need a fully fledged routing library like vue-router. In this article, we’ll build a simple custom client-side router with Vue. By doing so, we’ll gather an …


Let’s Build a Custom Vue Router is a post from CSS-Tricks