Let’s Build a JAMstack E-Commerce Store with Netlify Functions

A lot of people are confused about what JAMstack is. The acronym stands for JavaScript, APIs, and Markup, but truly, JAMstack doesn’t have to include all three. What defines JAMstack is that it’s served without web servers. If you consider the history of computing, this type of abstraction isn’t unnatural; rather it’s the inevitable progression this industry has been moving towards.

So, if JAMstack tends to be static by definition, it can’t have dynamic functionality, server-side events, or use a JavaScript framework, right? Thankfully, not so. In this tutorial, we’ll set up a JAMstack e-commerce app and add some serverless functionality with Netlify Functions (which abstract AWS Lambda, and are super dope in my opinion).

I’ll show more directly how the Nuxt/Vue part was set up in a follow-up post, but for now we’re going to focus on the Stripe serverless function. I’ll show you how I set this one up, and we’ll even talk about how to connect to other static site generators such as Gatsby.

This site and repo should get you started if you’d like to set something like this up yourself:

Scaffold our app

The very first step is to set up our app. This one is built with Nuxt to create a Vue app, but you can replace these commands with your tech stack of choice:

yarn create nuxt-app hub create git add -A
git commit -m “initial commit” git push -u origin master

I am using yarn, hub (which allows me to create repos from the command line) and Nuxt. You may need to install these tools locally or globally before proceeding.

With these few commands, following the prompts, we can set up an entirely new Nuxt project as well as the repo.

If we log into Netlify and authenticate, it will ask us to pick a repo:

choose a repo in netlify

I’ll use yarn generate to create the project. With that, I can add in the site settings for Nuxt in the dist directory and hit feploy! That’s all it takes to set up CI/CD and deploy the site! Now every time I push to the master branch, not only will I deploy, but I’ll be given a unique link for that particular deploy as well. So awesome.

A basic serverless function with Netlify

So here’s the exciting part, because the setup for this kind of functionality is so quick! If you’re unfamiliar with Serverless, you can think of it like the same JavaScript functions you know and love, but executed on the server. Serverless functions are event-driven logic and their pricing is extremely low (not just on Netlify, but industry-wide) and scales with your usage. And yes, we have to add the qualifier here: serverless still uses servers, but babysitting them is no longer your job. Let’s get started.

Our very basic function looks like this. I stored mine in a folder named functions, and just called it index.js. You can truly call the folder and function what you want.

// functions/index.js
exports.handler = async (event, context) => { return { statusCode: 200, body: JSON.stringify({ message: "Hi there Tacos", event }) }
}

We’ll also need to create a netlify.toml file at the root of the project and let it know which directory to find the function in, which in this case, is “functions.”

// netlify.toml
[build] functions = "functions"

If we push to master and go into the dashboard, you can see it pick up the function!

netlify function in the dashboard

If you look at the endpoint listed above it’s stored here:
https://ecommerce-netlify.netlify.com/.netlify/functions/index

Really, for any site you give it, the URL will follow this pattern:
https:/<yoursiteurlhere>/.netlify/functions/<functionname>

When we hit that endpoint, it provides us with the message we passed in, as well as all the event data we logged as well:

the function event in the browser

I love how few steps that is! This small bit of code gives us infinite power and capabilities for rich, dynamic functionality on our sites.

Hook up Stripe

Pairing with Stripe is extremely fun because it’s easy to use, sophisticated, has great docs, and works well with serverless functions. I have other tutorials where I used Stripe because I enjoy using their service so much.

Here’s a bird’s eye view of the app we’ll be building:

First we’ll go to the Stripe dashboard and get our keys. For anyone totally scandalized right now, it’s OK, these are testing keys. You can use them, too, but you’ll learn more if you set them up on your own. (It’s two clicks and I promise it’s not hard to follow along from here.)

testing keys in the stripe dashboard

We’ll install a package called dotenv which will help us store our key and test it locally. Then, we’ll store our Stripe secret key to a Stripe variable. (You can call it anything, but here I’ve called it STRIPE_SECRET_KEY, and that’s pretty much industry standard.)

yarn add dotenv
require("dotenv").config() const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY)

In the Netlify dashboard, we’ll go to “Build & deploy,” then “Environment” to add in Environment variables, where the STRIPE_SECRET_KEY is key, and the value will be the key that starts with sk.

We’ll also add in some headers so we don’t run into CORS issues. We’ll use these headers throughout the function we’re going to build.

const headers = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"
}

So, now we’ll create the functionality for talking to Stripe. We’ll make sure we’ll handle the cases that it’s not the HTTP method we’re expecting, and also that we’re getting the information we expect.

You can already see here, what data we’re going to be needing to send to stripe by what we check for. We’ll need the token, the total amount, and an idempotency key.

If you’re unfamiliar with idempotency keys, they are unique values that are generated by a client and sent to an API along with a request in case the connection is disrupted. If the server receives a call that it realizes is a duplicate, it ignores the request and responds with a successful status code. Oh, and it’s an impossible word to pronounce.

exports.handler = async (event, context) => { if (!event.body || event.httpMethod !== "POST") { return { statusCode: 400, headers, body: JSON.stringify({ status: "invalid http method" }) } } const data = JSON.parse(event.body) if (!data.stripeToken || !data.stripeAmt || !data.stripeIdempotency) { console.error("Required information is missing.") return { statusCode: 400, headers, body: JSON.stringify({ status: "missing information" }) } }

Now, we’ll kick off the Stripe payment processing! We’ll create a Stripe customer using the email and token, do a little logging, and then create the Stripe charge. We’ll specify the currency, amount, email, customer ID, and give a description while we’re at it. Finally, we’ll provide the idempotency key (pronounced eye-dem-po-ten-see), and log that it was successful.

(While it’s not shown here, we’ll also do some error handling.)

// stripe payment processing begins here
try { await stripe.customers .create({ email: data.stripeEmail, source: data.stripeToken }) .then(customer => { console.log( `starting the charges, amt: ${data.stripeAmt}, email: ${data.stripeEmail}` ) return stripe.charges .create( { currency: "usd", amount: data.stripeAmt, receipt_email: data.stripeEmail, customer: customer.id, description: "Sample Charge" }, { idempotency_key: data.stripeIdempotency } ) .then(result => { console.log(`Charge created: ${result}`) }) })

Hook it up to Nuxt

If we look back at our application, you can see we have pages and components that live inside the pages. The Vuex store is like the brain of our application. It will hold the state of the app, and that’s what will communicate with Stripe. However, we still need to communicate with our user via the client. We’ll collect the credit card data in a component called AppCard.vue that will live on the cart page.

First, we’ll install a package called vue-stripe-elements-plus, that gives us some Stripe form elements that allow us to collect credit card data, and even sets us up with a pay method that allows us to create tokens for stripe payment processing. We’ll also add a library called uuid that will allow us to generate unique keys, which we’ll use for the idempotency key.

yarn add vue-stripe-elements-plus uuid

The default setup they give us to work with vue-stripe-elements-plus looks like this:

<template> 

Please give us your payment details:

</template>

import { stripeKey, stripeOptions } from './stripeConfig.json'
import { Card, createToken } from 'vue-stripe-elements-plus' export default { data () { return { complete: false, stripeOptions: { // see https://stripe.com/docs/stripe.js#element-options for details } } }, components: { Card }, methods: { pay () { // createToken returns a Promise which resolves in a result object with // either a token or an error key. // See https://stripe.com/docs/api#tokens for the token object. // See https://stripe.com/docs/api#errors for the error object. // More general https://stripe.com/docs/stripe.js#stripe-create-token. createToken().then(data => console.log(data.token)) } }
}

So here’s what we’re going to do. We’re going to update the form to store the customer email, and update the pay method to send that and the token or error key to the Vuex store. We’ll dispatch an action to do so.

data() { return { ... stripeEmail: "" }; }, methods: { pay() { createToken().then(data => { const stripeData = { data, stripeEmail: this.stripeEmail }; this.$store.dispatch("postStripeFunction", stripeData); }); }, ...

That postStripeFunction action we dispatched looks like this:

// Vuex store
export const actions = { async postStripeFunction({ getters, commit }, payload) { commit("updateCartUI", "loading") try { await axios .post( "https://ecommerce-netlify.netlify.com/.netlify/functions/index", { stripeEmail: payload.stripeEmail, stripeAmt: Math.floor(getters.cartTotal * 100), //it expects the price in cents stripeToken: "tok_visa", //testing token, later we would use payload.data.token stripeIdempotency: uuidv1() //we use this library to create a unique id }, { headers: { "Content-Type": "application/json" } } ) .then(res => { if (res.status === 200) { commit("updateCartUI", "success") setTimeout(() => commit("clearCart"), 3000) …

We’re going to update the UI state to loading while we’re processing. Then we’ll use axios to post to our function endpoint (the URL you saw earlier in the post when we set up our function). We’ll send over the email, the amt, the token and the unique key that we built the function to expect.

Then if it was successful, we’ll update the UI state to reflect that.

One last note I’ll give is that I store the UI state in a string, rather than a boolean. I usually start it with something like “idle” and, in this case, I’ll also have “loading,” “success,” and “failure.” I don’t use boolean states because I’ve rarely encountered a situation where UI state only has two states. When you work with booleans for this purpose, you tend to need to break it out into more and more states, and checking for all of them can get increasingly complicated.

As it stands, I can reflect changes in the UI on the cart page with legible conditionals, like this:

<section v-if="cartUIStatus === 'idle'"> <app-cart-display />
</section> <section v-else-if="cartUIStatus === 'loading'" class="loader"> <app-loader />
</section> <section v-else-if="cartUIStatus === 'success'" class="success"> <h2>Success!</h2> <p>Thank you for your purchase. You'll be receiving your items in 4 business days.</p> <p>Forgot something?</p> <button class="pay-with-stripe"> <nuxt-link exact to="/">Back to Home</nuxt-link> </button>
</section> <section v-else-if="cartUIStatus === 'failure'"> <p>Oops, something went wrong. Redirecting you to your cart to try again.</p>
</section>

And there you have it! We’re all set up and running to accept payments with stripe on a Nuxt, Vue site with a Netlify function, and it wasn’t even that complicated to set up!

Gatsby Applications

We used Nuxt in this instance but if you wanted to set up the same kind of functionality with something that uses React such as Gatsby, there’s a plugin for that. (Everything is plugin in Gatsby. ☺️)

You would install it with this command:

yarn add gatsby-plugin-netlify-functions

…and add the plugin to your application like this:

plugins: [ { resolve: `gatsby-plugin-netlify-functions`, options: { functionsSrc: `${__dirname}/src/functions`, functionsOutput: `${__dirname}/functions`, }, },
]

The serverless function used in this demo is straight up JavaScript, so it’s also portable to React applications. There’s a plugin to add the Stripe script to your Gatsby app (again, everything is a plugin). Fair warning: this adds the script to every page on the site. To collect the credit card information on the client, you would use React Stripe Elements, which is similar to the Vue one we used above.

Just make sure that you’re collecting from the client and passing all the information the function is expecting:

  • The user email
  • The total amount, in cents
  • The token
  • The idempotency key

With such a low barrier to entry, you can see how you can make really dynamic experiences with JAMstack applications. It’s amazing how much you can accomplish without any maintenance costs from servers. Stripe and Netlify Functions make setting up payment processing in a static application such a smooth developer experience!

The post Let’s Build a JAMstack E-Commerce Store with Netlify Functions appeared first on CSS-Tricks.

Bounce Element Around Viewport in CSS

Let’s say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something.

You’d probably be tracking the X location of the element, increasing or decreasing it in a time loop and — when the element reached the maximum or minimum value — it would reverse direction. Then do that same thing with the Y location and you’ve got the effect we’re after. Simple enough with some JavaScript and math.

Here’s The Coding Train explaining it clearly:

Here’s a canvas implementation. It’s Pong so it factors in paddles and is slightly more complicated, but the basic math is still there:

See the Pen
Pong
by Joseph Gutierrez (@DerBaumeister)
on CodePen.

But what if we wanted to do this purely in CSS? We could write @keyframes that move the transform or left/top properties… but what values would we use? If we’re trying to bounce around the entire screen (viewport), we’d need to know the dimensions of the screen and then use those values. But we never know that exact size in CSS.

Or do we?

CSS has viewport units, which are based on the size of the entire viewport. Plus, we’ve got calc() and we presumably know the size of our own element.

That’s the clever root of Scott Kellum’s demo:

See the Pen
Codepen screensaver
by Scott Kellum (@scottkellum)
on CodePen.

The extra tricky part is breaking the X animation and the Y animation apart into two separate animations (one on a parent and one on a child) so that, when the direction reverses, it can happen independently and it looks more screensaver-like.

</div>
:root { --width: 300px; --x-speed: 13s; --y-speed: 7s; --transition-speed: 2.2s;
} .el { width: var(--width); height: var(--width);
} .x { animation: x var(--x-speed) linear infinite alternate;
}
.y { animation: y var(--y-speed) linear infinite alternate;
} @keyframes x { 100% { transform: translateX(calc(100vw - var(--width))); }
}
@keyframes y { 100% { transform: translateY(calc(100vh - var(--width))); }
}

I stole that idea, and added some blobbiness and an extra element for this little demo:

See the Pen
Morphing Blogs with `border-radius`
by Chris Coyier (@chriscoyier)
on CodePen.

The post Bounce Element Around Viewport in CSS appeared first on CSS-Tricks.

20 Freshest Web Designs, August 2019

This month we leap back to the culture of America circa 1969, dive into the oceans with whales, discover multiple approaches to pitching a design agency, get invited to festivals, and shop online the right way. Enjoy!

Kilotype

Kilotype’s awesome new site shows off its variable fonts with a clever mouse-track — move your cursor around the screen vertically and horizontally to see the full range of each family’s weight and italic.

Once Upon a Time in Hollywood

The latest film from Tarantino is steeped in the culture of 1969, from the moon landing to Woodstock. This amazing promo-site does an incredible job of transporting you to a different era.

Wade and Leta

Wade and Leta are a partnership of talented art directors, whose offbeat sense of the absurd leads to some truly original and inspiring work. The homepage videos range from hilarious to bizarre.

Morenita

If there’s one place I’d like to be right now, it’s floating around the coast of Menorca on beautiful traditional fishing boat, and that’s all thanks to this inspiring site for Balearic boat hire.

The Believer Magazine

The site for The Believer Magazine is charmingly counter-culture, with deceptively sophisticated typography and New Yorker-quality illustration. Exactly what you’d expect from a modern culture publication.

Cher Ami

Cher Ami’s site features plenty of engaging work, but it’s the little details that make this site special, like the way the menu flies out not-quite-square, and the hyperspace-style transitions.

Good Day

Good Day sells CBD-infused beverages from a tastefully minimal site. At roughly $6/drink, it’s not cheap, and this sophisticated site is ideal for positioning the company in the luxury consumables market.

Dice

Dice is a German music and arts festival. Its site features some incredible, generated organic shapes, with animated gradients to match, and the seamless eternal scroll is a delight.

Flatiron Collective

The Flatiron Collective site opens with animated illustration. It’s an eye-catching pitch for business, far into left-field from the usual agency promotional site, and doesn’t even showcase previous work.

Save Whales

Whales are among the most intelligent, graceful, and magical creatures in the world. This inspiring site features extraordinary photography and facts about the magnificent creatures.

InDnegev

InDnegev is an Israeli music festival with a psychedelic animated site. The site features bold color choices, subtle animation, and two people riding a giant fox made out of stars, because why not.

Gucci Marmont

One of the big trends in online shopping is 3D, and Gucci’s Marmont collection jumps on this trend with a 17th-century inspired art exhibition featuring its latest purses. Scroll to browse.

Oust

Oust is a leading creative agency with tons of amazing work. Instead of pressing its portfolio, Oust’s site shows off the energy and ambition of the company’s professional culture.

Gantri

Gantri designs better lights, and its site is a glorious collection of careful ecommerce best practices and stellar product photography. This is exactly how you should sell products online.

eyehealth1st

Look Deeper is an eye health campaign from Australia that wants to educate you about the dangers your eyes face, with an impactful infographic style site highlighting the various threats to your eyesight.

Ada Sokół

Ada Sokół’s portfolio is designed to focus entirely on her unique brand of futuristic, 3D artwork. Alongside commercial work you’ll also find some exceptional personal work.

Stuuudio

Embracing the www-ness of using three letters, where one would be too real-world, is Stuuudio, a design agency with a nice line in blobby-animated transitions. It’s a good take on the classic agency site.

Ocean Vagabond

Ocean Vagabond is a watersports company in Morocco. Its homepage features some small-scale video, but navigate to one of the location pages for inspiring video and typography interaction.

Festival

Festival is a vibrant and engaging one-pager for the Camberwell College of Art undergraduate degree show. With light-hearted typography and interactive confetti, it’s a great online invitation.

Neutral Works

Neutral Works is another design agency with a penchant for interesting, liquid-style transitions. Based in Japan, it’s fascinating to see the different approach to familiar products in a foreign culture.

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Popular Design News of the Week: August 12, 2019 – August 18, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Image Optimization for the Web (2019 Guide)

 

Extra.css

 

Do Creatives Still Need Personal Websites?

 

Noted: New Logo for Lotus

 

How to Choose the Right Font for your Website

 

Adobe’s Next Big Bets are on AR and Mixed Reality Software

 

4 Rules for Intuitive UX

 

This YouTuber Redesigned the Logos of Starbucks, Coffee Bean, and Folgers-and They’re Brilliant

 

Beautiful Examples of Anime UI

 

Adobe Fresco: A Free App for the iPad Made to Beat Procreate

 

The Real Reason Snap Changed its Logo

 

5 Sneaky Typography Errors to Avoid

 

Uber Design Platform

 

WeWork Isn’t a Tech Company; It’s a Soap Opera

 

How Tinder Design Hooks You up

 

Here’s How Google’s New Keyword Selection Preferences Work

 

The Evolution of Visual Design and Tech’s Designer Renaissance

 

50+ Best Free Fonts for Minimal Design

 

Dieter Rams Designed One of Gillette’s Most Successful Razors

 

Three Years of Misery Inside Google, the Happiest Company in Tech

 

Designer Vs Corporation

 

Superposition: Use the Design System You Already Have

 

Finding Brand True North

 

The Four Critical Factors to Planning a Successful Project

 

UX Can’t Be Defined by One Set of “Rules”

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Draggin’ and Droppin’ in React

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality (e.g. multiple drag and drop instances), and if they do, it becomes very complex.

This is where react-sortable-hoc comes into play.

💡 This tutorial requires basic knowledge of React library and React hooks.

This library has “HOC” in its name for a good reason. It provides higher-order components that extends a component with drag and drop functionality.

Let’s walk through an implementation of its functionalities.

Spinning up a project

For this tutorial we are going to build an app with funny GIFs that can be dragged around the viewport.

GitHub Repo

Let’s create a simple app and add drag-n-drop functionality to it. We’re going to use create-react-app to spin up a new React project:

npx create-react-app your-project-name

Now let’s change to the project directory and install react-sorting-hoc and array-move. The latter is needed to move items in an array to different positions.

cd your-project-name
yarn add react-sortable-hoc array-move

Adding styles, data and GIF component

For simplicity’s sake, we are going to write all styles in our App.css file. You can overwrite styles you have there with the following ones:

.App { background: #1a1919; color: #fff; min-height: 100vh; padding: 25px; text-align: center;
} .App h1 { font-size: 52px; margin: 0;
} .App h2 { color: #f6c945; text-transform: uppercase;
} .App img { cursor: grab; height: 180px; width: 240px;
}

Let’s create our state with GIFs. For this purpose we gonna use React’s built-in useState hook:

import React, { useState } from 'react';

Now add following before the return statement:

const [gifs, setGifs] = useState([ 'https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif', 'https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif', 'https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif', 'https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif',
]);

It’s time to create our simple GIF component. Create a Gif.js file in the src directory and pass in the following code:

import React from 'react';
import PropTypes from 'prop-types'; const Gif = ({ gif }) => (<img src={gif} alt="gif" />) Gif.propTypes = { gif: PropTypes.string.isRequired,
}; export default Gif;

We always try to follow the best practices while writing code; thus we also import PropTypes for type checking.

Import the Gif component and add it to the main App component. With a bit of clean up, it looks like this:

import React, { useState } from 'react';
import './App.css'; import Gif from './Gif'; const App = () => { const [gifs, setGifs] = useState([ 'https://media.giphy.com/media/3ohhwoWSCtJzznXbuo/giphy.gif', 'https://media.giphy.com/media/l46CbZ7KWEhN1oci4/giphy.gif', 'https://media.giphy.com/media/3ohzgD1wRxpvpkDCSI/giphy.gif', 'https://media.giphy.com/media/xT1XGYy9NPhWRPp4pq/giphy.gif', ]); return ( 

Drag those GIFs around

Set 1

{gifs.map((gif, i) => )}
); } export default App;

Go to http://localhost:3000/ to see what the app looks like now:

A screenshot of react-sortable-hoc-article-app

Onto the drag-n-drop stuff

Alright, it’s time make our GIFs draggable! And droppable.

To start, we need two HOCs from react-sortable-hoc, and the >arrayMove method from the array-move library to modify our new array after dragging happens. We want our GIFs to stay on their new positions, right? Well, that’s what this is going to allow us to do.

Let’s import them:

import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';

As you might have guessed, those components will be wrappers which will expose functionality needed for us.

  • sortableContainer is a container for our sortable elements.
  • sortableElement is a container for each single element we are rendering.

Let’s do the following after all our imports:

const SortableGifsContainer = sortableContainer(({ children }) => 
{children}
); const SortableGif = sortableElement(({ gif }) => <Gif key={gif} gif={gif} />);

We’ve just created a container for our children elements that would be passed inside our SortableGifsContainer and also created wrapper for a single Gif component.
If it’s a bit unclear to you, no worries — you will understand right after we implement it.

💡Note: You need to wrap your children in a div or any other valid HTML element.

It’s time to wrap our GIFs into the SortableGifsContainer and replace the Gif component with our newly created SortableGif:

<SortableGifsContainer axis="x" onSortEnd={onSortEnd}> {gifs.map((gif, i) => <SortableGif // don't forget to pass index prop with item index index={i} key={gif} gif={gif} /> )}
</SortableGifsContainer>

It’s important to note that you need to pass the index prop to your sortable element so the library can differentiate items. It’s similar to adding keys to the lists in React).

We add axis because our items are positioned horizontally and we want to drag them horizontally, while default is vertical dragging. In other words, we’re limiting dragging along the horizontal x-axis. As you can see we also add an onSortEnd function, which triggers every time we drag or sort our items around. There are, of course, a lot more events but you can find more info in the documentation which already does an excellent job of covering them.

Time to implement it! Add the following line above the return statement:

const onSortEnd = ({ oldIndex, newIndex }) => setGifs(arrayMove(gifs, oldIndex, newIndex));

I want to explain one more thing: our function received an old and new index of the item which was dragged and, of course, each time after we move items around we modify our initial array with the help of arrayMove.

Tada! Now you know how to implement drag-n-drop in your project. Now go and do it! 🎉 🎉 🎉

What if we have multiple lists of items?

As you can see, the previous example was relatively simple. You basically wrap each of the items in a sortable HOC and wrap it around with sortableContainer and, bingo, you’ve got basic drag and drop.

But how will we do it with multiple lists? The good news is that react-sortable-hoc provides us with a collection prop so we can differentiate between lists.

First, we should add second array of GIFs:

const [newGifs, setNewGifs] = useState([ 'https://media.giphy.com/media/xiOgHgY2ceKhm46cAj/giphy.gif', 'https://media.giphy.com/media/3oKIPuMqYfRsyJTWfu/giphy.gif', 'https://media.giphy.com/media/4ZgLPakqTajjVFOVqw/giphy.gif', 'https://media.giphy.com/media/3o7btXIelzs8nBnznG/giphy.gif',
]);

If you want to see them before we move next, add the following lines after the SortableGifsContainer closing tag:

{newGifs.map(gif => <Gif key={gif} gif={gif} />)}

Alright, time to replace it with a draggable version.

Implementation is the same as in first example besides one thing — we have added a collection prop to our SortableGif. Of course, you can come up with any name for the collection, just remember, we’re gonna need it in for our onSortEnd function.

<h2>Set 2</h2> <SortableGifsContainer axis="x" onSortEnd={onSortEnd}> {newGifs.map((gif, i) => <SortableGif index={i} key={gif} gif={gif} collection="newGifs" />)}
</SortableGifsContainer>

Next we need to add the collection prop to our first list. I’ve chosen the name GIFs for the first list of items, but it’s up to you!

Now we need to to change our onSortEnd function. Our function received old and new indexes, but we can also destructure a collection from it. Right, exactly the one we’ve added to our SortableGif.

So all we have to do now is write a JavaScript switch statement to check for the collection name and to modify the right array of GIFs on drag.

const onSortEnd = ({ oldIndex, newIndex, collection }) => { switch(collection) { case 'gifs': setGifs(arrayMove(gifs, oldIndex, newIndex)) break; case 'newGifs': setNewGifs(arrayMove(newGifs, oldIndex, newIndex)) break; default: break; }
}

Time to check it out!

As you can see, we now have two separate lists of GIFs and we can drag and sort. Moreover, they are independent meaning items from different lists won’t be mixed up.

Exactly what we wanted to do! Now you know how to create and handle drag and drop with multiple lists of items. Congratulations 🎉

Hope you’ve enjoyed it as much as I did writing it! If you’d like to reference the complete code, it’s all up on GitHub here. If you have any questions, feel free to contact me via email.

The post Draggin’ and Droppin’ in React appeared first on CSS-Tricks.

Accessibility and web performance are not features, they’re the baseline

This week I’ve been brooding about web performance and accessibility. It all began when Ethan Marcotte made a lot of great notes about the accessibility issues that are common with AMP:

In the recordings above, I’m trying to navigate through the AMP Story. And as I do, VoiceOver describes a page that’s impossible to understand: the arrows to go back or forward are simply announced as “button”; most images are missing text equivalents, which is why the screen reader spells out each and every character of their filenames; and when a story’s content is visible on screen, it’s almost impossible to access. I’d like to say that this one AMP Story was an outlier, but each of the nine demos listed on the AMP Stories website sound just as incomprehensible in VoiceOver.

Ethan continues to argue that these issues are so common in AMP that accessibility must not be a priority at all:

Since the beginning, Google has insisted AMP is the best solution for the web’s performance problem. And Google’s used its market dominance to force publishers to adopt the framework, going so far as to suggest that AMP’s the only format you need to publish pages on the web. But we’ve reached a point where AMP may “solve” the web’s performance issues by supercharging the web’s accessibility problem, excluding even more people from accessing the content they deserve.

I’ve been thinking a lot about this lately — about how accessibility work is often seen as an additional feature that can be tacked onto a project later — rather than accessibility work being a core principle or standard of working on the web.

And I’ve seen this sentiment expressed time and time again, in the frameworks, on Twitter, in the design process, in the development process, and so much so that arguing about the importance of accessibility can get pretty exhausting. Because at some point we’re not arguing about the importance of accessibility but the importance of front-end development itself as a series of worthy skills to have. Skills that can’t be replaced.

Similarly, this post by Craig Mod, on why software should be lightning fast, had me thinking along the same lines:

I love fast software. That is, software speedy both in function and interface. Software with minimal to no lag between wanting to activate or manipulate something and the thing happening. Lightness.

Later in the piece, Mod describes fast software as being the very definition of good software and argues that every action on a computer — whether that’s a website or an app — should feel as if you’re moving without any latency whatsoever. And I couldn’t agree more; every loading screen and wait time is in some degree a mark of failure.

Alex Russell made a similar point not so long ago when he looked at the performance of mobile phones and examined how everyone experiences the web in a very different way:

The takeaway here is that you literally can’t afford desktop or iPhone levels of JS if you’re trying to make good web experiences for anyone but the world’s richest users, and that likely means re-evaluating your toolchain.

I’m sort of a jerk when it comes to this stuff. I don’t think a website can be good until it’s fast. The kind of fast that takes your breath away. As fast as human thought, or even faster. And so my point here is that web performance isn’t something we should aspire to, it should be the standard. The status quo. The baseline that our work is judged by. It ought to be un-shippable until the thing is fast.

The good news is that it’s easier than ever to ship a website with these base requirements of unparalleled speed and accessibility! We have Page Speed Insights, and Web Page Test, not to mention the ability to have Lighthouse perform audits with every commit in GitHub automatically as we work. Ire Aderinokun showed us how to do this not so long ago by setting up a performance budget and learning how to stick to it.

The tools to make our websites fast and accessible are here but we’re not using them. And that’s what makes me mad.


While I’m on this rant — and before I get off my particularly high horse — I think it’s important to make note of Deb Chachra’s argument that “any sufficiently advanced negligence is indistinguishable from malice.” With that in mind, it’s not just bad software design and development if a website is slow. Performance and accessibility aren’t features that can linger at the bottom of a Jira board to be considered later when it’s convenient.

Instead we must start to see inaccessible and slow websites for what they are: a form of cruelty. And if we want to build a web that is truly a World Wide Web, a place for all and everyone, a web that is accessible and fast for as many people as possible, and one that will outlive us all, then first we must make our websites something else altogether; we must make them kind.

The post Accessibility and web performance are not features, they’re the baseline appeared first on CSS-Tricks.

12 Best CMS for 2019

2019 is half over, but don’t let that stop you from trying something new… specifically, a new CMS. “But Ezequiel, good buddy, I don’t have time to check out a whole new content management system. I have websites to make!”, you say, in those exact words.

That’s fair, but you should be keeping an eye on the up-and comers anyway. These are the people who have the sheer brass walnuts (which are a real thing, unisex, and available to anyone with money) to go up against giants like WordPress, Joomla, and mostly WordPress. They do this with nothing but a pretty good idea, a GitHub repository, and sometimes some corporate funding of some kind, if they’re very lucky. You ignore them at your own peril.

Well, maybe not peril, but these projects deserve a look.

The CMS that have been selected for this list were (almost) all launched post-2017 (or at least their GitHub repos were), and they’re all free, or at least have a free plan. They’re also all under active development. Let’s get started…

Flextype

Flextype is a simple, PHP7-based, flat-file CMS that’s designed to keep things flexible, allowing you to create more or less anything you want. And I do mean “anything”; Flextype makes it dead-easy to define custom fields for any content entry, and has a built-in theme editor

The actual content editing is easy enough, with a simple WYSIWYG editor, though Markdown support is available via plugin. Doing anything fancy with the content requires the use of WordPress-style shortcodes, though.

All in all, it’s a solid foundation for a CMS, and I can’t wait to see what they do with it.

rwtxt

rwtxt is designed to be a simple, searchable notepad where you can jot down notes, keep a journal, or use it as a pastebin. It’s reminiscent of a wiki in that, in its default configuration, anyone can add a page to the public area of the site.

However, you can also add a “domain”, or a sort of personal notepad where you can either keep your private notes private, or make them public and publicly searchable. You can also log into multiple domains at a time, so you could theoretically use rwtxt to run a site with multiple blogs that are thematically different. (You can also add custom CSS to a domain, for further differentiation.)

The whole experience is very bare-bones, but I’m fascinated to see where it goes.

Relevant: rwtxt Github Repo

Publii

Publii is one of a few new GUI-focused Static CMS apps that run on the desktop, rather than on your server. You download the app, use it to build a static site, then upload that site onto the hosting of your choice. It’s not a new idea, but it’s one that seems to have picked up steam, lately.

Publii in particular seems to be the most modern and feature-complete of these CMS, and is open source and free to use. It seems to be blog-focused, and there is a marketplace with both free and paid theme options of excellent quality.

Other features include website syncing (supports FTP, GitHub Pages, Gitlab, AWS, Netlify, or Google Cloud), a preview function, a WordPress importer, and a focus on SEO. It’s very definitely focused at more beginner-level users.

ClassicPress

Speaking, however briefly, of WordPress, ClassicPress is literally a WordPress fork that notably lacks a certain block-based content editor that lots of people disliked. Otherwise, the current version aims to improve security and optimization, remove some bloat, and points the CMS squarely at business users who might be put off by quirky language such as “Howdy”.

The biggest difference so far, besides using the classic content editor, is the governance of the project; there’s a very large focus placed on democracy and voting to determine the future of the project, where WordPress’ future is largely written by Automattic (the company that makes it).

Twill

Twill isn’t strictly a CMS, as such. It’s a “CMS toolkit”, designed to help developers very quickly create a custom CMS to match any need. As such, it’s not something you’d want to install just to start your own blog.

But if you’re a developer, or a business owner who needs a custom-built CMS, it does look like a promising way to get exactly the functionality you need, faster. It’s based on the Laravel PHP framework, so if that’s something you already use and like, try it out.

Canner

CannerCMS is similar to Twill in that it’s a build-your-own CMS kit of sorts. Unlike Twill, it seems to be Node-based, so if writing JavaScript is more your style, CannerCMS has you covered.

Incidentally, they also has a SaaS version of the product, which takes care of all the hosting, CDN configuration, and other general hassles for you. The open source edition also apparently lacks multi-language support, which the SaaS version has.

Grafite CMS

Grafite CMS is a sort of dual purpose CMS. By that I mean you can use it as a standalone CMS, on its own and fully functional, or as an add-on to an existing site or web app. Now lots of CMS will allow you to do this via an API of some sort, but Grafite CMS actually comes with two separate setup/installation modes, depending on whether you want to use Grafite CMS on its own, or integrate it into something larger.

It’s also modular, in that content types like “Pages”, Blog”, “Events”, and other are modules that you can activate or deactivate at will. You can, of course, make your own modules if you need a custom content type. It’s very much based on a “use only what you need” philosophy.

Vapid

Vapid has been mentioned once before here on Web Designer Depot, but it’s worth looking at again, in case you missed it. It’s billed as an intentionally simple CMS, and they mean it. The dashboard is literally generated based on the tags you use in your templates. Every time you mark part of a page as editable content, the dashboard will add the appropriate form field in the admin UI.

It’s written in NodeJS, and you can host the app on your own server for free if you know how (the code itself is open source), or you can deploy your website to Vapid’s own hosting service. Publishing your site there does cost money of course, but the plans are quite reasonable, with the first paid plan starting at 7 USD.

Zola

Zola is a static site generator written in Rust, so it does depend on using a command line interface, but otherwise, they keep development simple. I mean, when’s the last time you heard of a static site generator that didn’t have any dependencies? There are even premade binaries for Windows, Mac, and Linux, so installation is quick and simple.

So yeah, even if you’ve got only a rudimentary understanding of programming like myself, you can probably build sites with Zola. It’s got a list of features about a mile long, including custom taxonomies, LiveReload, Netlify support, shortcodes, image processing, and more. The content is all handled by Markdown, of course.

Academic

Academic is interesting because it’s a CMS built on top of another CMS. Specifically, it’s a website / page builder built on top of the Hugo static site generator. It’s designed to take the complexity of a static site generator, and make everything sort of drag and drop. And I do mean everything.

There’s support for easily managing custom pages, talks, slides, tutorials, as well as all the usual content types. There’s multilingual support, and everything can be written in Markdown and, interestingly enough, LaTeX if you’re the math-loving type. Existing themes mostly seem to be Material Design-based, but of course you can make your own.

Piranha CMS

I didn’t want our ASP.NET lovers out there feel like we’d forgotten them. For you, Piranha CMS looks rather promising. Interestingly for an ASP.NET CMS, it can run on Windows, Mac, and Linux, with a focus on speed and easy publishing. Considering the tech it’s based on, it’s also Azure-ready right out of the box, if that’s something that matters to you.

Besides all that, you can edit your content as HTML or Markdown, or even plain text. There’s also a Gutenberg-style block editor. There’s image processing, easy internal linking, and even easy ways to run multiple blogs on the same site. The whole thing seems to be aimed at big publishers.

Squidex

Squidex is an ASP.NET-based open source headless CMS (that means they don’t dictate how any of your HTML gets output) that you can run on your own server, or use their SaaS option which also has a limited free plan. It’s the sort of CMS that’s meant to be used as a central repository for all of your content, which you can access anywhere via their API. So theoretically, you could use it to run multiple internal and / or external websites.

As such, it’s the sort of CMS where you sort of have to build your own dashboard, as well as the front end user interface. That said, it does look real good, and offers loads of options to help you build the CMS of your (apparently quite nerdy) dreams.

 

Featured image via Unsplash.

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM

In this week’s roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves visualizations to the Shadow DOM.

Chrome ships the loading attribute

The HTML loading attribute for lazy-loading images and iframes is now supported in Chrome. You can add loading="lazy" to defer the loading of images and iframes that are below the viewport until the user scrolls near them.

Google suggests either treating this feature as a progressive enhancement or using it on top of your existing JavaScript-based lazy-loading solution.

This feature has not yet been added to the HTML Standard (but there is an open pull request), and multiple links to Google’s documentation are listed on its Chrome Status page.

(via web.dev)


Overview of ARIA specifications

The main accessibility specifications for web developers:

NameDescription
ARIA in HTMLDefines which ARIA role, state, and property attributes are allowed on which HTML elements (the implicit ARIA semantics are defined here)
Using ARIAProvides practical advice on how to use ARIA in HTML, with an emphasis on dynamic content and advanced UI controls (the “five rules of ARIA use” are defined here)
ARIA (Accessible Rich Internet Applications)Defines the ARIA roles, states, and properties
ARIA Authoring PracticesProvides general guidelines on how to use ARIA to create accessible apps (includes ARIA implementation patterns for common widgets)
HTML Accessibility API MappingsDefines how browsers map HTML elements and attributes to the operating system’s accessibility APIs
WCAG (Web Content Accessibility Guidelines)Provides guidelines for making web content more accessible (success criteria for WCAG conformance are defined here)

Related: “Contributing to the ARIA Authoring Practices Guide” by Simon Pieters and Valerie Young


Shadow DOM on the BBC website

The BBC has moved from <iframe> to Shadow DOM for the embedded interactive visualizations on its website. This has resulted in significant improvements in load performance (“more than 25% faster”).

The available Shadow DOM polyfills didn’t reliably prevent styles from leaking across the Shadow DOM boundary, so they decided to instead fall back to <iframe> in browsers that don’t support Shadow DOM.

Shadow DOM […] can deliver content in a similar way to iframes in terms of encapsulation but without the negative overheads […] We want encapsulation of an element whose content will appear seamlessly as part of the page. Shadow DOM gives us that without any need for a custom element.

One major drawback of this new approach is that CSS media queries can no longer be used to conditionally apply styles based on the content’s width (since the content no longer loads in a separate, embedded document).

With iframes, media queries would give us the width of our content; with Shadow DOM, media queries give us the width of the device itself. This is a huge challenge for us. We now have no way of knowing how big our content is when it’s served.

(via Toby Cox)


In other news…

  • The next version of Chrome will introduce the Largest Contentful Paint performance metric; this new metric is a more accurate replacement for First Meaningful Paint, and it measures when the largest element is rendered in the viewport (usually, the largest image or paragraph of text) (via Phil Walton)
  • Microsoft has created a prototype of a new tool for viewing a web page’s DOM in 3D; this tool is now experimentally available in the preview version of Edge (via Edge DevTools)
  • Tracking prevention has been enabled by default in the preview versions of Edge; it is set to balanced by default, which “blocks malicious trackers and some third-party trackers” (via Techdows)

Read more news in my new, weekly Sunday issue. Visit webplatform.news for more information.

The post Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM appeared first on CSS-Tricks.

The Making of an Animated Favicon

It’s the first thing your eyes look for when you’re switching tabs.

That’s one way of explaining what a favicon is. The tab area is a much more precious screen real-estate than what most assume. If done right, besides being a label with icon, it can be the perfect billboard to represent what’s in or what’s happening on a web page.

The CSS-Tricks Favicon

Favicons are actually at their most useful when you’re not active on a tab. Here’s an example:

Imagine you’re backing up photos from your recent summer vacation to a cloud service. While they are uploading, you’ve opened a new tab to gather details about the places you went on vacation to later annotate those photos. One thing led to the other, and now you’re watching Casey Neistat on the seventh tab. But you can’t continue your YouTube marathon without the anxious intervals of checking back on the cloud service page to see if the photos have been uploaded.

It’s this type of situation where we can get creative! What if we could dynamically change the pixels in that favicon and display the upload progress? That’s exactly what we’ll do in this article.

In supported browsers, we can display a loading/progress animation as a favicon with the help of JavaScript, HTML <canvas> and some centuries-old geometry.

Jumping straight in, we’ll start with the easiest part: adding the icon and canvas elements to the HTML.

<head> <link rel="icon" type="image/png" href="" width=32px>
</head> <body> <canvas width=32 height=32></canvas>
</body>

In practical use, you would want to hide the <canvas> on the page, and one way of doing that is with the HTML hidden attribute.

<canvas hidden width=32 height=32></canvas>

I’m going to leave the <canvas> visible on the page for you to see both the favicon and canvas images animate together.

Both the favicon and the canvas are given a standard favicon size: 32 square pixels.

For demo purposes, in order to trigger the loading animation, I’m adding a button to the page which will start the animation when clicked. This also goes in the HTML:

<button>Load</button>

Now let’s set up the JavaScript. First, a check for canvas support:

onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { /* if canvas is supported */ }
};

Next, adding the button click event handler that will prompt the animation in the canvas.

button = document.querySelector('button');
button.addEventListener('click', function() { /* A variable to track the drawing intervals */ n = 0, /* Interval speed for the animation */ loadingInterval = setInterval(drawLoader, 60); });

drawLoader will be the function doing the drawing at intervals of 60 milliseconds each, but before we code it, I want to define the style of the lines of the square to be drawn. Let’s do a gradient.

/* Style of the lines of the square that'll be drawn */
let gradient = context.createLinearGradient(0, 0, 32, 32);
gradient.addColorStop(0, '#c7f0fe');
gradient.addColorStop(1, '#56d3c9');
context.strokeStyle = gradient;
context.lineWidth = 8;

In drawLoader, we’ll draw the lines percent-wise: during the first 25 intervals, the top line will be incrementally drawn; in second quarter, the right line will be drawn; and so forth.

The animation effect is achieved by erasing the <canvas> in each interval before redrawing the line(s) from previous interval a little longer.

During each interval, once the drawing is done in the canvas, it’s quickly translated to a PNG image to be assigned as the favicon.

function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); /* Up to 25% */ if (n<=25){ /* (0,0)-----(32,0) */ // code to draw the top line, incrementally } /* Between 25 to 50 percent */ else if(n>25 && n<=50){ /* (0,0)-----(32,0) | | (32,32) */ // code to draw the top and right lines. } /* Between 50 to 75 percent */ else if(n>50 && n<= 75){ /* (0,0)-----(32,0) | | (0,32)----(32,32) */ // code to draw the top, right and bottom lines. } /* Between 75 to 100 percent */ else if(n>75 && n<=100){ /* (0,0)-----(32,0) | | | | (0,32)----(32,32) */ // code to draw all four lines of the square. } stroke(); } // Convert the Canvas drawing to PNG and assign it to the favicon favicon.href = canvas.toDataURL('image/png'); /* When finished drawing */ if (n === 100) { clearInterval(loadingInterval); return; } // Increment the variable used to keep track of the drawing intervals n++;
}

Now to the math and the code for drawing the lines.

Here’s how we incrementally draw the top line at each interval during the first 25 intervals:

n = current interval, x = x-coordinate of the line’s end point at a given interval.
(y-coordinate of the end point is 0 and start point of the line is 0,0)

At the completion of all 25 intervals, the value of x is 32 (the size of the favicon and canvas.)

So…

x/n = 32/25
x = (32/25) * n

The code to apply this math and draw the line is:

moveTo(0, 0); lineTo((32/25)*n, 0);

For the next 25 intervals (right line), we target the y coordinate similarly.

moveTo(0, 0); lineTo(32, 0);
moveTo(32, 0); lineTo(32, (32/25)*(n-25));

And here’s the instruction to draw all four of the lines with the rest of the code.

function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); /* Up to 25% of the time assigned to draw */ if (n<=25){ /* (0,0)-----(32,0) */ moveTo(0, 0); lineTo((32/25)*n, 0); } /* Between 25 to 50 percent */ else if(n>25 && n<=50){ /* (0,0)-----(32,0) | | (32,32) */ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } /* Between 50 to 75 percent */ else if(n>50 && n<= 75){ /* (0,0)-----(32,0) | | (0,32)----(32,32) */ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } /* Between 75 to 100 percent */ else if(n>75 && n<=100){ /* (0,0)-----(32,0) | | | | (0,32)----(32,32) */ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); } // Convert the Canvas drawing to PNG and assign it to the favicon favicon.href = canvas.toDataURL('image/png'); /* When finished drawing */ if (n === 100) { clearInterval(loadingInterval); return; } // Increment the variable used to keep track of drawing intervals n++;
}

That’s all! You can see and download the demo code from this GitHub repo. Bonus: if you’re looking for a circular loader, check out this repo.

You can use any shape you want, and if you use the fill attribute in the canvas drawing, that’ll give you a different effect.

The post The Making of an Animated Favicon appeared first on CSS-Tricks.

Staggered CSS Transitions

Let’s say you wanted to move an element on :hover for a fun visual effect.

@media (hover: hover) { .list--item { transition: 0.1s; transform: translateY(10px); } .list--item:hover, .list--item:focus { transform: translateY(0); }
}

Cool cool. But what if you had several list items, and you wanted them all to move on hover, but each one offset with staggered timing?

The trick lies within transition-delay and applying a slightly different delay to each item. Let’s select each list item individually and apply different delays. In this case, we’ll select an internal span just for fun.

@media (hover: hover) { .list li a span { transform: translateY(100px); transition: 0.2s; } .list:hover span { transform: translateY(0); } .list li:nth-child(1) span { transition-delay: 0.0s; } .list li:nth-child(2) span { transition-delay: 0.05s; } .list li:nth-child(3) span { transition-delay: 0.1s; } .list li:nth-child(4) span { transition-delay: 0.15s; } .list li:nth-child(5) span { transition-delay: 0.2s; } .list li:nth-child(6) span { transition-delay: 0.25s; }
}

See the Pen
Staggered Animations
by Chris Coyier (@chriscoyier)
on CodePen.

If you wanted to give yourself a little more programmatic control, you could set the delay as a CSS custom property:

@media (hover: hover) { .list { --delay: 0.05s; } .list li a span { transform: translateY(100px); transition: 0.2s; } .list:hover span { transform: translateY(0); } .list li:nth-child(1) span { transition-delay: calc(var(--delay) * 0); } .list li:nth-child(2) span { transition-delay: calc(var(--delay) * 1); } .list li:nth-child(3) span { transition-delay: calc(var(--delay) * 2); } .list li:nth-child(4) span { transition-delay: calc(var(--delay) * 3); } .list li:nth-child(5) span { transition-delay: calc(var(--delay) * 4); } .list li:nth-child(6) span { transition-delay: calc(var(--delay) * 5); }
}

This might be a little finicky for your taste. Say your lists starts to grow, perhaps to seven or more items. The staggering suddenly isn’t working on the new ones because this doesn’t account for that many list items.

You could pass in the delay from the HTML if you wanted:

<ul class="list"> <li><a href="#0" style="--delay: 0.00s;">① <span>This</span></a></li> <li><a href="#0" style="--delay: 0.05s;">② <span>Little</span></a></li> <li><a href="#0" style="--delay: 0.10s;">③ <span>Piggy</span></a></li> <li><a href="#0" style="--delay: 0.15s;">④ <span>Went</span></a></li> <li><a href="#0" style="--delay: 0.20s;">⑤ <span>To</span></a></li> <li><a href="#0" style="--delay: 0.25s;">⑥ <span>Market</span></a></li>
</ul>
@media (hover: hover) { .list li a span { transform: translateY(100px); transition: 0.2s; } .list:hover span { transform: translateY(0); transition-delay: var(--delay); /* comes from HTML */ }
}

Or if you’re Sass-inclined, you could create a loop with more items than you need at the moment (knowing the extra code will gzip away pretty efficiently):

@media (hover: hover) { /* base hover styles from above */ @for $i from 0 through 20 { .list li:nth-child(#{$i + 1}) span { transition-delay: 0.05s * $i; } }
}

That might be useful whether or not you choose to loop for more than you need.

The post Staggered CSS Transitions appeared first on CSS-Tricks.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google