DEV Community: Eder Díaz

React: The QWERTY Keyboard of Web Development

Eder Díaz — Mon, 03 Apr 2023 15:18:47 +0000

Qwerty keyboards are the most popular keyboard layout in the world. It's the default layout for most operating systems and not only on computers but also on mobile devices. It became popular almost a hundred and fifty years ago, so it wasn't made with our modern devices in mind.

Some say the distribution of the keys was made so that most common keys where separated, so that the typewriter's hammers wouldn't get stuck... the thing is that that's not a problem anymore. The layout is also not the most efficient and it's not the most ergonomic either.

Schools teach it because big manufacturers produce them and they are cheaper than other layouts. It is the most popular layout because it is the default layout and it is the default layout because it is the most popular layout. It's a vicious cycle.

React == Qwerty

I think that you know where I'm going with this. Yeah, React is pretty much the same... well, it wasn't made centuries ago and it has changed a lot since its creation, but the problems it solved are not the same as the ones we have today.

React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram. -- React old documentation

Not all of us are doing complex web apps at the level of Facebook and Instagram, neither we have the popularity or engagement to make our users wait for loading times as long as those apps do. Similarly to not using mechanical typewriters anymore, we are no longer suffering from JavaScript's bad API (pre-ES6) because IE is no longer supported and you might not need jQuery anymore. Nowadays we have other frameworks that are more efficient and ergonomic or have what we call better DX.

Schools, bootcamps and tech influencers teach React, because everyone is hiring React developers. Everyone is looking for React developers because it is cheaper to hire them because they are more common. Every problem is being solved using React because that's how everyone is being taught. It's a vicious cycle.

Learning other layout is difficult but worth it

What are alternatives for Qwerty? Well, there are a lot of them, but the most popular ones are Dvorak and Colemak. Both are ergonomic, less finger traveling happens. Colemak is easier to learn if you come from Qwerty because it's just a slight modification of it. Dvorak is harder to learn because it's a completely different layout, but if you don't know any other layout, it's supposedly faster to learn than the others.

People that are heavy typers have switched to Dvorak and Colemak with great results and helping them prevent Carpal Tunnel Syndrome which is a very common problem among programmers.

React alternatives

You might be aware of some alternatives to React, but I'll list some of the most popular ones:

Each of these have their varying degrees of learning curve, popularity, use cases, and ergonomics. Preact, Qwik and Solid would be like Colemak, they're easier to learn if you already know React.

Vue and Svelte are more like Dvorak, they're easier for people that know nothing about Front-end frameworks.

Angular... I don't know, it probably is this mechanical orthogonal split keyboard that will help you type faster but it will take you a lot of time to master.

They all might also prevent Carpal Tunnel Syndrome because you'll be writing less code (in most cases), but they can also help you standardize your code and make it easier to maintain for you and your team. There's also usually less overhead and less boilerplate code. When you see different projects using these frameworks, you'll be able to understand them faster because they all have a similar structure, while regularly every React project is a different world.

This isn't by any means an in-depth analysis of these frameworks, for that I would need a separate post (or many). This is more an opinion and a high-level overview of what I think about them.

Not all is bad

Qwerty gets the job done. Since we are all used to it, you can get to any computer and you'll be able to accomplish your tasks. I even still use Qwerty on my phone because other layouts that are more ergonomical when using multiple fingers, they just suck while trying to type with sausage fingers in a tiny screen, in those cases the separation of common letters is great.

React gets the job done too. There are cases where it might be the best option, maybe because the time is short and the team is already familiar with it, or you are actually building the next Facebook. Also they are constantly adapting, although in a slower pace, to their users' needs.

At the end of the day, it's your (or your team's) choice. You can keep using what is familiar to you or broaden your horizons and have a more informed decision the next time you face a new challenge.

Boost Your Productivity with Code Generators: A Guide to Simplify Your Workflow

Eder Díaz — Thu, 09 Mar 2023 18:36:00 +0000

We all use shortcuts to get our job done faster, from copying and pasting code to using snippets or more recently github copilot and chatGPT. The downside to these is that they are limited in scope and they are not flexible enough to handle all the different ways we work with code. In this post I'll show you a specific kind of code generators that can help you, not only to get things done faster, but also to help you on-board new members to a project, standardize the boring parts and even help you writing tests.

What is a code generator?

There isn't a formal definition of what a code generator is, and if we just think of them as the name implies, it means that it can be anything that generates code automatically like a compiler.

To clear things up, I'll narrow down the definition to "a tool that generates code based on a template or context and some user input".

I like to classify code generators into three categories:

Project generators
Module generators
Snippet generators

This is my classification, I'm sure there are other ways to classify them, so if you have an opinion on this, please let me know.

The Project generators are the ones that create a new project from scratch, like create-react-app, yeoman, etc. These are great for getting started with a new project, but you use them once and forget them for the rest of the project.

The Snippet generators are the ones that generate a small piece of code, like a component, a function, etc. Some examples of these are the snippets in your IDE, Github copilot and chatGPT. The limitation of these is that they affect a single file or a small piece of code.

The Module generators are the ones that help you to add features to an existing project, both creating new files and injecting code into existing ones. You can share them with your team, they help you to standardize the code and promote good practices.
These are the ones that I'll be focusing on in this post and whenever I mention a code generator from now on, I'll be referring to this category.

When to use a code generator?

In short, any time that you find yourself doing the same thing over and over.

At the beginning of a project it can be anything like creating a new component or creating a new endpoint in your API (you'll find a great example at the end).

Later on, when you've written a large system, you'll find out that a majority of the time you spend creating new features is not actually writing the code, but copying and pasting code from other parts of the system and connecting them to a small subset of modules. This is a great opportunity to use a code generator and automate this process.

What can I use?

This depends on the Tech Stack you are using, if you are lucky you might be using Laravel or Angular which already have their own integrated solution.

But for the rest of us, there are a few options:

Hygen
Plop

Both of these are great, but since Plop is heavy on the JS side, I'll be focusing on Hygen.

Hygen the most "code agnostic" of the two, and to give you an example, you just need to learn the following syntax to start templating with variables:

<%= name %>

And that's it, you can use it in any language, and you can even use it to generate files that are not code, like markdown or json (I use it to generate my blog posts).

Before we deep dive into code, let's see some concepts that will help us to understand and organize our generators: prompts, templates and injectors.

Prompts

The prompts are the questions that the generator will ask you to get the information it needs for the templates and injectors to work. This is the "variables", context and anything that changes each time you create a new something.

Some examples of prompts could be the name of your component, the url of an endpoint, the pages a component will be used in, etc.

I love food analogies, so let's imagine that we have a pizza place and we want to have a standardized way to create new types of pizzas. In this analogy, the prompts would be "What's the name of the pizza?", "What are the ingredients?", "What's the price of the pizza?", etc.

Templates

The templates are the files that we create and that will be basically copied and pasted replacing the variables with the user input wherever we indicate it with the syntax we saw before. In templates we add the repetitive code, like imports, basic structure of a component, empty functions and so on.

In the pizza place analogy, the templates would be a file with an skeleton of the recipe, the list of ingredients and the steps to make the pizza that repeat for every pizza. But after that's done we will still need to add details like the quantity of each ingredient and the other parts of the recipe that are specific to each pizza.

Injectors

The injectors are like templates, both copy their contents to another file. The difference is that injectors do it into an existing file using a regex rule to find the place where the content should go. These are great for connecting the files that we created with the templates, because one of the most time consuming tasks in a project is to remember or find all the places where you need to import a newly created module.

Once again, on the pizza place analogy, we have a new pizza recipe but there isn't still a way for our costumers to ask for it. The injector would take the information of our original prompt and inject the new pizza into the menu, adding it's description and price.

And just like that we "automated" the process of creating a new pizza 🍕.

Setup hygen

To add hygen to a project that already has a package.json file and follow the examples, you can run:

npm install --save-dev hygen

But if your project doesn't have a package.json file because it isn't a node project, you can follow the instructions on the hygen website to install it.

If you follow along, you'll end up with a working example and some needed practice to get used to the syntax.

Simple example

We are going to create the simplest prompt, template and injector to get used to the syntax.

The first thing you need to do is to create a folder called _templates in the root of your project. This is where we will store all our generators. Inside this folder we will create a folder called new and inside of it another one called hello.

You should end up with a folder structure like this:

_templates/new/hello

Prompt

Now inside the hello folder we will create a file called prompt.js and add the following code:

// _templates/new/hello/prompt.js
module.exports = [
  {
    type: "input",
    name: "username",
    message: "What's your name?",
  },
];

As you might guess, we are asking for the user's name and storing it in a variable called username.

Template

Now we will create a file called template.ejs.t and add the following code:

---
to: hello/<%= username %>.js
---

console.log("Hello <%= username %>!")

This looks a bit more complicated but don't worry, we will break it down.
The first part, the code between the '---' is called the "front matter" and it's used to configure the generator. We can add pairs of keys and values while also use the templating language (<%= something %>) to replace the values with the prompt's values.
This will create a file inside a folder called 'hello' with the name of the user and adding the '.js' extension at the end.

The second part, after the second '---' is the actual template. This is the code that will be copied and pasted into the new file. Since we can also use the same templating language, we are basically creating a console.log with the user's name.

Injector

Before creating the injector let's create a file called index.js and add the following code:

// hygen--inject-hello

This is just a comment that let's us know where we can inject code.

And now create a file called injector.js inside the _templates/new/hello folder and add the following code:

---
inject: true
to: index.js
after: // hygen--inject-hello
---
import './hello/<%= username %>'

This is the injector, it's basically the same as the template but we are adding the inject property and the after key to indicate where we want to inject the code. In this case we want to inject it after the comment we created before. The code is importing the file we created with the template.

Running the generator

Now that we have everything set up, we can run the generator by adding this command inside the package.json file:

"scripts": {
  // any other scripts you have
  "new:hello": "hygen new hello"
}

And then run:

npm run new:hello

If everything went well, you should see the prompt asking for your name, then the new file will be created and the injector will add the import to the index.js file.

Real world example

For a more "real world" usage of this library and workflow, I made a repository with a simple Node server that serves both an API and static pages. You can clone it and try out one of the two generators commands:

npm run new:page
npm run new:api

You'll notice that the prompts are a bit more complex and there's some logic to add or not parts of code into a file. The generators also create multiple files like tests, styles, scripts and so on.

Conclusion

Code Generators can improve the quality and speed of a team's work. It might seem like more work at first, but once that you get the hang of it and get used to create generators quickly, you will see how much time you save in the long run.

If you want to learn more about Hygen read their documentation, also to learn more about the prompts options you can check Enquirer which is what Hygen uses under the hood.

Also a "talk" version of this post is available on YouTube, if you speak Spanish I recommend the original audio version.

Clean code exercises - part 2

Eder Díaz — Tue, 07 Jun 2022 19:02:09 +0000

After years of reading other people's code in code reviews, I've developed an 'eye' to catch bad code, and I think you can develop it too by reading the scenarios I've designed.

The following examples aren't necessarily flawed code, I mean, imagine they don't have any bugs and they do the job, but the aren't as maintainable as they could be. Read each example, try to identify the problem and think what would you do to solve it.

Scenario 4

const chemicalSymbols = {
  Sodium: "Na",
  Hydrogen: "H",
  Helium: "He",
  Oxigen: "O",
};

function getSymbol(name) {
  const symbol = chemicalSymbols[name];
  if (symbol) {
    return symbol;
  }

  console.log("symbol not found");
  return "not found";
}

What's the problem?

(don't read until you are done with above's code)

The problem in this scenario is the lack of error handling. If a chemical symbol is not found, it returns a string which isn't helpful for the caller of the function, because it can't easily determine if the symbol was found or not. This message can then propagate through the chain of functions and cause undesired behavior.

Solution

A way to fix this, is to have better logs and return something that is of a different type as the regular return value. For example null instead of a string.

function getSymbol(name) {
  const symbol = chemicalSymbols[name];
  if (symbol) {
    return symbol;
  }
  console.log(`getSymbol:: symbol not found for ${name}`);
  return null;
}

But a much better alternative is to throw an error. This way if there's a problem, the error will prevent the propagation and crash the program if it's not handled. You can always use try/catch to handle the error.

function getSymbol(name) {
  const symbol = chemicalSymbols[name];
  if (symbol) {
    return symbol;
  }
  throw new Error(`symbol not found for ${name}`);
}

Scenario 5

function getDisplayImage(article, watermark) {
  let image
  if(article.image && article.displayImage) {
    if(watermark){
      image = applyWatermark(article.image, watermark)
    } else {
      image = article.image
    }
  } else {
    image = null
  }

  return image
}

What's the problem?

We have three possible responses with nested if statements in this function. This is a bad practice, because it makes the code more complex and harder to maintain. This example is relatively simple to understand, but in more complex methods, it can become really hard to understand the logic behind it.

Solution

A useful pattern to break this logic into smaller and more understandable chunks is to "return early". We can do de inverse comparison of the first if and return null immediately. Then the other statements don't need to be nested, as they don't need to check anymore for the article images.

function getDisplayImage(article, watermark) {
  let image
  if(!article.image || !article.displayImage) {
    return null
  }
  if(watermark){
    return applyWatermark(article.image, watermark)
  }
  return image
}

Scenario 6

if (
  typeof AUTH_ENABLED === 'string' &&
  AUTH_ENABLED === 'true' &&
  !skipAuthentication &&
  user.email
) {
  console.info('Welcome back, ' + user.name);
}

What's the problem?

There are too many boolean comparisons. It's really hard to understand what's happening at a first glance. If something in this block needs to change, it is going to be super complicated to do so and without introducing any bugs.

Solution

You can simplify the evaluation with named Booleans. By assigning the value to a constant with a meaningful name, you can end up with something that reads almost like plain English and is easier to understand.

const authEnabled = typeof AUTH_ENABLED === 'string' && AUTH_ENABLED === 'true';
const authIsEnforced = authEnabled && !skipAuthentication;
const userLoggedIn = user && user.email;

if(authIsEnforced && userLoggedIn) {
  console.info('Welcome back, ' + user.name);
}

And that was the last exercise for this post. Remember that you can review the exercises for part 1 of the series here.

TDD debugging

Eder Díaz — Sat, 17 Apr 2021 06:30:22 +0000

Photo by Bart Christiaanse on Unsplash

We all have been through the following scenario: you are getting the first sip of your coffee when someone reports a bug. Your first reaction is probably to run the project and type some logs to see some data and try to understand what's happening.

If you are like the 80% of developers (I made up this number), you don't have any kind of tests and you are basically making tweaks "hoping" that nothing else breaks while you fix the problem, and if that happens you end up spending way more time than you expected fixing these chained bugs.

Let's be clear, I'm not here to tell you that you must have tests and great code coverage, every project is different and you could have more than one reason to not have tests. Probably you didn't work on that functionality, you thought that the behavior was so simple that tests were overkill or you had to rush to make it before the end of the sprint.

Whatever is the reason, this problem is giving you a second chance to add tests that will save you and future developers a lot of time. I like to think of tests as smoke detectors in a house and the bug is a fire that appeared, you might be able to put out the fire but if you don't have enough smoke detectors, you won't know if other fires are cooking somewhere else until is too late.

Photo by Adam Wilson on Unsplash

A real-world example

A teammate reported that URL inputs in our forms where accepting strings that weren't a valid URL. Basically you could type something like foobarhttps://google.com,fizbuzz and validation passed. We managed to identify the culprit:

function validUrl(url) {
  const regex = /(^$)|((http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*))/g;
  const found = url.match(regex);
  if (found === null) {
    return false;
  }
  return true;
}

Someone basically copy/pasted a regex from somewhere, tested it against some URLs and non URLs, and thought it worked. After punching that regex into regextester.com, it's clear that the pattern is not strict and it's kind of an includes pattern.

After some regex tweaking we figured out a way to make it more strict and ended up like this:

/(^((http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*))$)/g

We tested it on the regex tool and seems to work.

Now we just replace that line of code and ship it right? WRONG!

Before making any code change we write some tests for the scenarios that we know should be working:

describe("validUrl", () => {
  it("should not return errors with an empty string", () => {
    const actual = validUrl("");
    const expected = true;
    expect(actual).equal(expected);
  });
  it("should not return errors with a well formed URL", () => {
    const actual = validUrl("https://google.com");
    const expected = true;
    expect(actual).equal(expected);
  });
  it("should return an error with something that is not a url", () => {
    const actual = validUrl("not-a-url");
    const expected = false;
    expect(actual).equal(expected);
  });
  it("should return an error if empty spaces ares used", () => {
    const actual = validUrl("  ");
    const expected = false;
    expect(actual).equal(expected);
  });
});

If you don't want to read/understand that code basically we are checking that:

When it receives an empty string it's valid (we have a requiredValidUrl function for when it should not)
A well-formed URLs is valid
Something that is not a URL should return false
Using spaces isn't allowed either

Now we add the new failing test case, a URL with extra text should fail:

it("should return an error when a url has extra text", () => {
  const actual = validUrl("somethinghttp://google.com,other-thing");
  const expected = false;
  expect(actual).equal(expected);
});

Here's a codepen so that you can follow along

Then we run the tests, they all pass except the last one because we haven't changed the regex and that's great because we confirmed our assumptions and we are now in RED on the TDD cycle.

failing test as expected

TDD cycle

We replace the regex with the new one /(^((http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&/=]*))$)/g.

Remember this was the only thing we thought we needed to fix the bug, and then we run the tests again expecting that all pass, except they don't.

Surprisingly our regex is now so strict that it doesn't allow for empty strings, but our smoke detector prevented us from sending this fire we hadn't noticed. This would have been a waste of time for us, testers, project manager and in a worst case scenario could have prevented a launch or caused a catastrophic problem if it deployed.
Since we need to take care of an edge case we decide to short circuit it from the start instead of keep tweaking the regex:

if (!url) {
  // empty string should be valid
  return true;
}

Now we are green! We can continue with the refactoring and send our change more confidently.

Of course, this isn't a silver bullet, there might be more edge cases or changes of requirements. The advantage is that when that happens, you or any other dev that needs to maintain the project can keep adding smoke detectors and be confident that their changes are putting out fires and not reigniting old ones.

Clean code exercises - part 1

Eder Díaz — Thu, 19 Nov 2020 05:37:31 +0000

Illustration by Ivan Haidutski from Icons8

You've probably read and listen a lot about Clean Code and probably you're tired of acronyms like YAGNI, DRY and KISS. All of this usually goes directly to your brain's recycle bin because you don't practice it enough.

After years of reading other people's code in code reviews, I've developed an 'eye' to catch bad code, and I think you can develop it too by reading the scenarios I've designed.

Scenario 1

function canBuyBeer(age, money) {
  if(age >= 21 && money >= 20) {
    return true
  }
  return false
}

What's the problem?

(don't read until you are done with above's code)

The problem in this example is the arbitrary numbers that are being used in the if statement. Because of the method context you might infer that 21 is the legal age to drink and 20 is the beer price, but this isn't too straight forward at first sight. These are usually called magic numbers.

Solution

One way to solve this is creating named constants for the numbers. This makes it easier to read.

function canBuyBeer(age, money) {
  const legalDrinkingAge = 21
  const beerPrice = 20
  if(age >= legalDrinkingAge && money >= beerPrice) {
    return true
  }
  return false
}

Also if in the future something changes, like the beer price, it will be less prone to error by changing the constant value instead of finding and replacing the appearances of 20.

Scenario 2

function shouldShowImage(itemIndex, article, showAllImages) {
  return [0, 1, 2].includes(itemIndex)
    ? !!article.imageUrl
    : showAllImages
      ? !!article.imageUrl
      :false
}

What's the problem?

(Remember to try to identify this by yourself first)
There's too many things happening in that return statement. The person that wrote this might thing is clever to use idiomatic features to solve things in a line or a couple of lines of code, that's why this is called clever code.

Solution

Just be explicit on what is the intended behavior and make it easy to read, even if that means splitting the code into more lines.

function shouldShowImage(itemIndex, article, showAllImages) {
  if(!article.imageUrl) {
    return false
  }
  if(showAllImages) {
    return true
  }
  const isItemOneTwoOrThree = [0,1,2].includes(itemIndex)
  if(isItemOneTwoOrThree) {
    return true
  }

  return false
}

There were many refactoring steps between the example and the solution, but I assure you that both have the same behavior.

If a peer defends their clever code by saying that the solution is making the application become larger, that's likely not true, most modern languages when compiled or minified will be smaller than any clever code created by a human.

Scenario 3

function getArea(shape, width, height, radius) {
  if(shape === 'circle'){
    return Math.PI * radius * radius
  } else if(shape === 'square') {
    return width * width
  } else if(shape === 'rectangle') {
    return width * height
  }
}

What's the problem?

This method has too many responsibilities. Whenever someone adds a new shape also a new if/else statement will need to be created. Also in this case the area calculations are one liners but if they become more complex, for example to validate the inputs, this method would become huge.

Solution

Separate them into strategies with their own method, this way if they grow in size they'll be easier to maintain.

const circleStrategy = (shape) => Math.PI * shape.radius * shape.radius

const squareStrategy = (shape) => shape.width * shape.width

const rectangleStrategy = (shape) => shape.width * shape.height

const areaStrategies = {
  circle: circleStrategy,
  square: squareStrategy,
  rectangle: rectangleStrategy
}

function getArea (shapeName, width, height, radius) {
  const shapeObject = { width, height, radius }
  const strategy = areaStrategies[shapeName]
  return strategy(shapeObject)
}

Notice we also improved the mechanism to choose a strategy by using a dictionary instead of the multiple if/else statements.

Well, that's it for today's practice, I hope it helps you to get your spider sense tingle in the next code review you do.

I'll follow up soon with more examples in a future post, if you have ideas for more scenarios put them in the comments section.

Also you can check the part 2 of this series here.

As a non-web-developer, which are the things you'd like to learn to become a web developer?

Eder Díaz — Tue, 23 Jul 2019 00:17:42 +0000

There are a lot of topics around web development, but as a person that has never written code for the web (ie: c, c++, java for embedded systems, etc):

Which are the most appealing ones?
Which would make you or made you change careers?

Swipe Gallery using Vue.js & Tailwind - WotW

Eder Díaz — Wed, 15 May 2019 12:55:17 +0000

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

Today we are going to create a swipe gallery that works with both touch or mouse controls.
The inspiration comes from this submission created by RONGYU and looks like this:

Who is this for?

This tutorial is aimed at front-end developers that want to level up their skills. It is recommended that you have some prior knowledge of HTML, CSS, JS.
I'll be using Vue.js to make the widget, if you're not familiar to this framework these awesome posts can help you get up to speed:

Preparations

For today's widget, we will be using Vue.js, and for some animations, we'll use TweenMax. Also, I'll be using the newly released TailwindCSS v1.0.1.
If you want to follow along you can fork this codepen template that already has the dependencies.

Creating the mobile viewport

First what I want to do is constrain the area of our widget container to match the size of a mobile device. For that I'll first write some CSS rules:

.mobile-container {
  width: 320px;
  height: 568px;
}

This will be the only CSS class we will need for the whole widget... that's right the rest of styling will be done using TailwindCSS.

Now to see it working we need to add some mark up to our widget, let's start by making our app container:

<div id="app" class="flex items-center justify-center bg-black w-screen h-screen"></div>

Those are a bunch of TailwindCSS classes, most of them are self-explanatory if you are used to writing CSS rules. From left to right they match to the following CSS rules:

display: flex;
align-items: center;
justify-content: center;
background-color: black;
width: 100vw;
height: 100vw;

As you can see we wrote less code and also we are able to make any changes without having to jump between the CSS file and the HTML one.

For the rest of the tutorial I won't be "translating" each TailwindCSS class, but I'll surely highlight the ones that matter the most. For the rest you can visit TailwindCSS documentation.

Now let's make use of the .mobile-container class that we created:

<!-- inside the app div -->
<div class="mobile-container relative overflow-hidden bg-white"></div>

We are making the container relative to be able to move the gallery images relatively to it, also overflow-hidden should help us to hide any content that gets outside of the container's box.

Now we should have something like this:

Images

To start making our gallery we need a couple of images to work with, you can use the following array of images I hosted for this widget:

// js
const images = [
  'https://res.cloudinary.com/ederchrono/image/upload/v1556684546/wotw-013/nature-1.jpg',
  'https://res.cloudinary.com/ederchrono/image/upload/v1556684546/wotw-013/nature-2.jpg',
  'https://res.cloudinary.com/ederchrono/image/upload/v1556684526/wotw-013/nature-3.jpg',
  'https://res.cloudinary.com/ederchrono/image/upload/v1556684544/wotw-013/nature-4.jpg',
  'https://res.cloudinary.com/ederchrono/image/upload/v1556684520/wotw-013/nature-5.jpg',
  'https://res.cloudinary.com/ederchrono/image/upload/v1556684527/wotw-013/nature-6.jpg'
]

Set up Vue.js

As usual in this series, we need to setup Vue.js to bind our js data to the HTML template and make our widget interactive:

new Vue({
  el: '#app',
  data: {
    currentImageIndex: 0
  }
})

Not much is happening right now, I'm only declaring a property in my data object that holds the index of the current item in our gallery.

How will it work?

Before going forward I need to show you a couple of diagrams that should help explain the real behavior of the gallery.

Our gallery should loop over all images in the array, but instead of creating all of the images we will only need to have 3 images at the same time: Previous, Current and Next

Whenever we swipe through the images, we can only see at most those three images so we will be doing a couple of "magic tricks" for them to look like if the gallery was infinite.

When swiping there are two outcomes, you drag the current image to the right and show the previous one or drag the next image on top of the current one:

After releasing the dragged image to either side we need to decide if the image stays in the center, or leaves the viewport:

For that we will take the image position if more than half of it is inside the viewport it stays, if not it leaves. Also to keep working with the same three images we should swap them accordingly.

Setup the images

We now know that three images are going to be rendered, we have the currentImageIndex already but we need the previous and the next one too. Also, it would be awesome if the image URL could be stored in a variable, or even better, computed properties:

  // after our data inside the Vue instance
  computed: {
    currentImage () {
      return images[this.currentImageIndex]
    },
    previousImageIndex () {
      return (this.currentImageIndex - 1 + images.length) % images.length
    },
    previousImage () {
      return images[this.previousImageIndex]
    },
    nextImageIndex () {
      return (this.currentImageIndex+1) % images.length
    },
    nextImage () {
      return images[this.nextImageIndex]
    },
  }

Instead of using methods, computed properties help us
to both simplify our component and improve its performance, computed properties are cached based on their reactive dependencies.

We have everything to start rendering the images, so let's get back to the HTML part:

<!-- inside .mobile-container -->

<!--  image below   -->
<img class="absolute h-full z-0" :src="previousImage" />

<!--  interactive image   -->
<img class="absolute h-full z-10" :src="currentImage" />

<!--  image above   -->
<img class="absolute h-full z-20" :src="nextImage" />

All three images need to be stacked above the previous ones, that's why we are using z-0, z-10, z-20 and absolute position. The h-full class ensures that the images fill vertically the space of the container.

We have a small problem, the nextImage as shown in the first diagram should be outside (on the right side) of the viewport. We will eventually also animate it so I will bind the style attribute to a computed property called nextImageStyle.

<!--  image above   -->
<img class="absolute h-full z-20" :style="nextImageStyle" :src="nextImage" />

Then we need to create that computed property, but it needs a constant referencing the device width:

// before the Vue instance
const DEVICE_WIDTH = 320

For this widget it is a hardcoded constant, but in a real-world scenario we should be able to get the device width and set that constant accordingly.

    // inside computed: {
    nextImagePosition () {
      return DEVICE_WIDTH
    },
    nextImageStyle () {
      return {
        'left': `${this.nextImagePosition}px`
      }
    }

We created a couple of computed properties for the styling, this seems like overkill but they will be useful when animating the images. After this, you should be seeing the first image, the waterfall, instead of some green leaves.

Getting user inputs

The user will interact with our gallery by touching or clicking the current image, then it will start moving the cursor or finger and after that, they should release the image.

Those are three events we need to listen:

start
move
end

The start event will always be triggered by the current image, but the other two events can happen either inside the image or outside the gallery container. The next step is to listen to those events and to be able to make it work both in mobile and desktop devices, we need to listen not only touch events but mouse events too:

<!-- add these 4 events to the app div -->
<div
  id="app"
  @mousemove="drag"
  @touchmove="drag"
  @mouseup="stopDrag"
  @touchend="stopDrag"
  class="flex items-center justify-center bg-black w-screen h-screen"
></div>

<!--  these 2 events go in the current image   -->
<img
  class="absolute h-full z-10"
  @mousedown.prevent="startDrag"
  @touchstart="startDrag"
  :src="currentImage"
/>

Notice the prevent modifier, this helps to prevent the regular drag and drop behavior that browsers add to images.

We have three different methods that need to be declared inside our Vue instance, but first, let's create a helper function to extract the position of either the mouse or the finger touching the screen:

const getCursorX = (event) => {
  if (event.touches && event.touches.length) {
    // touch
    return event.touches[0].pageX
  }

  if (event.pageX && event.pageY) {
    // mouse
    return event.pageX
  }

  return 0
}

We should be able to use this function to update accordingly the cursor movement, but we will also need to keep track of the initial click position and if the user is currently dragging the image:

// inside the vue instance data
    dragging: false,
    cursorStartX: 0,
    cursorCurrentX: 0

// after data
  methods: {
    startDrag(e) {
      this.dragging = true
      this.cursorStartX = getCursorX(e)
      this.cursorCurrentX = this.cursorStartX
    },
    drag(e) {
      if(!this.dragging) {
        // avoid updating if not dragging
        return
      }
      this.cursorCurrentX = getCursorX(e)
    },
    stopDrag(e) {
      this.dragging = false
    }
  },

To see if all of this is working correctly, you can add this widget to see how the properties change:

<!-- inside the app div -->
<pre
  class="fixed bottom-0 left-0 p-3 text-white z-50 bg-gray-800 opacity-75 pointer-events-none"
>
dragging: {{ dragging }}
imagesIndexes: [{{previousImageIndex}}] [{{currentImageIndex}}] [{{nextImageIndex}}]
cursorStartX: {{ cursorStartX }}
cursorCurrentX: {{ cursorCurrentX }}</pre
>

Moving the images

Here comes the interesting part, for the next steps we will first declare some constants that we will be using:

// after DEVICE_WIDTH constant
const HALF_WIDTH = DEVICE_WIDTH / 2
const DRAGGING_SPEED = 1.2
const MAX_BLUR = 8

After we finish you can play with these values to see how things change.

Like I mentioned above there are two cases when dragging an image, either it is being dragged to the left or to the right. let's create a couple of computed props for that:

// inside computed
    diffX () {
      return this.cursorStartX - this.cursorCurrentX
    },
    swipingLeft () {
      return this.diffX >= 0
    },

Basically we are getting the difference between where the user started to drag and where the cursor is currently. If that difference is greater than 0 it means that the user is dragging the image to the left.

Before deep diving into moving the images, I'll create another helper function that should give us a hand when it comes to keeping the images inside the container

const clampPosition = (position) => {
  // constrain image to be between 0 and device width
  return Math.max(Math.min(position, DEVICE_WIDTH), 0)
}

And now we can replace the nextImagePosition computed prop with this new one:

// inside computed, replacing the old one
    nextImagePosition () {
      const swipingRight = !this.swipingLeft
      if(!this.dragging || swipingRight) {
        return DEVICE_WIDTH
      }

      const position = DEVICE_WIDTH - (this.diffX * DRAGGING_SPEED)
      return clampPosition(position)
    },

Try it out!

The nextImage should come out when you press and drag to the left.

Whenever the user is not dragging or if the user is swiping right, we want the next image to be in the same spot outside the viewport. In the other case, the image should get closer to the center of the container depending on the dragging speed.

In the same way, we can do something similar for the currentImage when the user swipes right, first bind the style attribute:

<!--  interactive image   -->
<img
  class="absolute h-full z-10"
  @mousedown.prevent="startDrag"
  @touchstart="startDrag"
  :style="currentImageStyle"
  :src="currentImage"
/>

Then create the computed methods for that:

// inside computed
    currentImagePosition () {
      if(!this.dragging || this.swipingLeft) {
        return 0
      }
      const position = this.diffX * -DRAGGING_SPEED
      return clampPosition(position)
    },
    currentImageStyle () {
      return {
        'left': `${this.currentImagePosition}px`
      }
    },

The blur effect

In the reference, when the current image is being covered by the next one it gradually blurs to create an effect of being sent to the bottom. Let's create the last helper function:

const calculateBlur = (position) => {
  return MAX_BLUR * (1 - position / DEVICE_WIDTH)
}

This function should give us a value between 0 and the MAX_BLUR depending on the position of an image. When the image is closer to being outside the viewport there is less blur, when it is closer to being centered there's a bigger blur value.

Also our previous image will need a style attribute:

<!--  image below   -->
<img class="absolute h-full z-0" :style="prevImageStyle" :src="previousImage" />

The previousImage blur depends on the currentImage position, and the currentImage blur depends on the nextImage position:

// inside computed
    currentImageStyle () {
      const blur = calculateBlur(this.nextImagePosition)

      return {
        'left': `${this.currentImagePosition}px`,
        'filter': `blur(${blur}px)`
      }
    },
    prevImageStyle () {
      const blur = calculateBlur(this.currentImagePosition)

      return {
        'filter': `blur(${blur}px)`
      }
    },

Animate image after dropping it

So far, so good. Images are moving and blurring accordingly, but after we release them they just go back. We need a way to make them go where we want after we swiped.

Like we said before, depending if half of the image is showing or hiding we will animate it in or out.

Let's add some data props that we will need for this:

// inside data
    animating: false,
    currentImageAnimatedX: 0,
    nextImageAnimatedX: DEVICE_WIDTH

The animating property will let us know whenever we are moving an image and prevent any other action. currentImageAnimatedX and nextImageAnimatedX will hold the position when animating the corresponding images.

In order for those two properties to work correctly we need to update both images positioning computed props:

// inside computed
    nextImagePosition () {
      // add these 3 lines...
      if(this.animating) {
        return this.nextImageAnimatedX
      }
      const swipingRight = !this.swipingLeft
      if(!this.dragging || swipingRight) {
        return DEVICE_WIDTH
      }

      const position = DEVICE_WIDTH - (this.diffX * DRAGGING_SPEED)
      return clampPosition(position)
    },
    currentImagePosition () {
      // ... and these 3 too
      if(this.animating) {
        return this.currentImageAnimatedX
      }
      if(!this.dragging || this.swipingLeft) {
        return 0
      }
      const position = this.diffX * -DRAGGING_SPEED
      return clampPosition(position)
    },

Then we need to change the stopDrag method to trigger the animation:

// inside methods
    stopDrag(e) {
      let animationProps = this.createReleaseAnimation()

      this.dragging = false
      this.animating = true
      TweenLite.to(this, 0.2, {
        ...animationProps,
        onComplete: () => {this.animating = false}
      })
    },

We are using TweenLite to tween the Vue instance data, this will reactively update the images styles computed properties.

You may have noticed that we need to define the createReleaseAnimation, this is the method that will hold the logic to know where should images go after being released. This is some kind of decision tree, so I'll explain it with comments inline:

// inside methods
    createReleaseAnimation() {
      if(this.swipingLeft) {
        if(this.nextImagePosition > HALF_WIDTH) {
          // next image should be animated back to be offscreen
          this.nextImageAnimatedX = this.nextImagePosition
          return {nextImageAnimatedX: DEVICE_WIDTH}
        }

        // current image "copies" the nextImage position
        this.currentImageAnimatedX = this.nextImagePosition
        // the nextImage is sent offscreen
        this.nextImageAnimatedX = DEVICE_WIDTH

        // Change the image index to become the next image in the array
        // images src attribute will update accordingly
        this.currentImageIndex = this.nextImageIndex
        return {currentImageAnimatedX: 0}
      }

      // swipe right
      if(this.currentImagePosition < HALF_WIDTH) {
        // current image should be animated back to center position
        this.currentImageAnimatedX = this.currentImagePosition
        return {currentImageAnimatedX: 0}
      }

      // the nextImage "copies" the currentImage position
      this.nextImageAnimatedX = this.currentImagePosition
      // the currentImage gets centered to become the prevImage
      this.currentImageAnimatedX = 0

      // Change the image index to become the previous image in the array
      this.currentImageIndex = this.previousImageIndex
      return {nextImageAnimatedX: DEVICE_WIDTH}
    }

What we are doing is defining each of the four cases:

Swiped left but the image should get back offscreen
Swiped left and the image should get to the center of the container
Swiped right and the image should get back to the center
Swiped right and the previous image should become the new current image

On each of those cases, we define an object that will be used by TweenLite to change the corresponding animatedX property to the target destination.

And now the final result!

I left a <pre> tag showing all of the properties as they update but feel free to remove it if you just want to see the gallery without it.

And that’s it for this Widget of the Week.

If you're hungry for more you can check other WotW:

Minimalistic nav menu with Vue.js and GSAP - WotW

Eder Díaz ・ Apr 24 '19

#webdev #vue #tutorial #wotw

Making an interactive password validator - WotW

Eder Díaz ・ Jul 31 '18

#webdev #vue #tutorial #wotw

Making an animated slider - WotW

Eder Díaz ・ Jul 12 '18

#webdev #vue #tutorial #wotw

Minimalistic nav menu with Vue.js and GSAP - WotW

Eder Díaz — Wed, 24 Apr 2019 13:02:11 +0000

Welcome to the Second Season of the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

It's been a long time since my last post. I had been busy with some projects (that includes having a baby girl), but I'm back with more knowledge and widgets.

Today we are going to create a minimalistic navigation menu, that animates when hovering an option.
The inspiration comes from this submission created by Zhenya Rynzhuk and looks like this:

Who is this for?

Preparations

For today's widget, we will be using Vue.js, and for some animations, we'll use TweenMax. If you want to follow along you can fork this codepen template that already has the dependencies.

Matching the look

The first thing I want to do with this component is to match the design. probably this will be the easiest part since there are no complicated graphics that will need SVG or icons.

Inside our app node, I will start by creating the markup for the menu. Since it is going to be a navigation menu we should use the semantically correct HTML nodes:

<!-- HTML -->
<div id="app">
  <nav>
    <ul>
      <li class="menu-item">About</li>
      <li class="menu-item">Works</li>
      <li class="menu-item">News/Blog</li>
      <li class="menu-item">Contact us</li>
    </ul>
  </nav>
</div>

I'm adding class="menu-item" to style the container and the items of the menu in the next step. Also id="app" will be used later to add functionality and animation with Vue.js.

The menu is looking really ugly right now, let's change that:

/* CSS */
body {
  background-color: #f1f0e9;
}

.menu-item {
  font-size: 5em;
  list-style: none;
  text-transform: uppercase;
  font-family: sans-serif;
  text-align: center;
  cursor: pointer;
}

Now we should have something like this:

Let me explain the most crucial rules...

list-style: none; is helping to remove the bullets from the list.
text-transform: uppercase; is useful when we don't want to explicitly "YELL" at users with screen readers, and we just want to show uppercase characters for design purposes.
cursor: pointer; makes the mouse behave like each of the elements was a link.

Set up Vue.js

Before getting into more details let's add Vue.js to the component to be able to render dynamically the menu items.

// JS
const itemsList = ['About', 'Works', 'News/Blog', 'Contact us']

new Vue({
  el: '#app',
  computed: {
    menuItems() {
      return itemsList.map((item, index) => {
        return {
          label: item
        }
      })
    }
  }
})

I'm adding the elements as computed properties of a constant, instead of data inside my component because I need to bind them to my template, but they aren't going to change over time.

Now that we have the items as a list, and they are ready to be used as a computed property, we can simplify our template to render all menu items with a v-for:

<!-- HTML - inside div > nav > ul -->
<li v-for="(item, index) in menuItems" :key="`item-${index}`" class="menu-item">
  {{item.label}}
</li>
<!-- remove all other "li" elements -->

Right now we should have the same elements, just bound to our Vue.js instance.

Hovering and animating

The menu animations in the reference can be broken down into two, the first one consists of moving the menu item to the left and the second one is the characters flipping over.

Let's start with the first one, moving the menu below the mouse cursor to the left. For that we will add a @mouseover event to the menu items that will trigger a function called selectedItem() that we haven't declared yet:

<!-- HTML inside nav > ul -->
<li
  v-for="(item, index) in menuItems"
  :key="`item-${index}`"
  @mouseover="selectItem(index)"
  class="menu-item"
>
  {{item.label}}
</li>

Now for the selectItem() method, we want to keep track of the hovered item so we will add inside the component data a selectedItem variable. This property will start at -1 for no item selected and will change it's value to the index of the selected button when hovered.

// JS
new Vue({
  el: '#app',
  data: {
    selectedItem: -1
  },
  methods: {
    selectItem(id) {
      this.selectedItem = id;
    }
  },
  // ... the rest of our component

To see the selectedItem changing you can add in your template the next line:

<!-- HTML after </nav> -->
<p>
  selectedItem: {{ selectedItem }}
</p>

Knowing which button is currently selected will let us add a class to "move" our button. To do this we can add a selected property to our computed menuItems like this:

// JS inside computed
menuItems () {
  return itemsList.map((item, index) => {
    const isSelected = this.selectedItem === index;
    return {
      label: item,
      selected: isSelected
    }
  })
}

and in the HTML make use of that new property:

<!-- HTML inside nav > ul -->
<li
  v-for="(item, index) in menuItems"
  :key="`item-${index}`"
  @mouseover="selectItem(index)"
  :class="{'selected': item.selected}"
  class="menu-item"
>
  {{item.label}}
</li>

Notice there are two class attributes, they concatenate instead of overriding each other. When "item.selected" is "true", that menu item will have both the "menu-item" and the "selected" classes.

Let's add the CSS class to handle the movement:

/* CSS */
.menu-item {
  /* ... previous styles */
  transition: margin-left 0.5s ease-out, opacity 0.5s ease-out;
}

.selected {
  margin-left: -90px;
}

The transition attribute indicates that any change to that value should be animated.

We are almost done with this part, there's something missing tho. After moving our mouse outside all of the elements, the last one stays selected, and we don't want that. To fix that we can use the @mouseleave event:

<!-- HTML inside nav > ul -->
<li
  v-for="(item, index) in menuItems"
  :key="`item-${index}`"
  @mouseover="selectItem(index)"
  @mouseleave="selectItem(-1)"
  :class="{'selected': item.selected}"
  class="menu-item"
>
  {{item.label}}
</li>

Adding the arrow and dim other items

Before getting into the animation of the characters there are still a couple of details, there should be an arrow appearing for the selected item, and also non-selected items should be dimmed or semi-transparent.

Let's quickly add an arrow character to our menu items.

<!-- HTML inside nav > ul -->
<li
  v-for="(item, index) in menuItems"
  :key="`item-${index}`"
  @mouseover="selectItem(index)"
  @mouseleave="selectItem(-1)"
  :class="{'selected': item.selected}"
  class="menu-item"
>
  {{item.label}}
  <span class="arrow">➔</span>
</li>

The arrow looks a little different from the reference since it is a regular ➔ character instead of a vector that matches exactly the design, but it is good enough for our purposes.

We want to hide all the arrows unless they are a child of a selected item, we can do this with CSS rules similar to what we did before with the selected items:

/* CSS */
.menu-item > .arrow {
  opacity: 0;
  transition: opacity 0.7s ease-out;
}

.selected > .arrow {
  opacity: 1;
}

Now that the arrows appear and disappear, let's dim the unselected items. We can compute the dimmed items just as we did with the selected one:

// JS inside computed
menuItems () {
  return itemsList.map((item, index) => {
    const isSelected = this.selectedItem === index;
    const otherButtonIsSelected = this.selectedItem !== -1
    return {
      label: item,
      selected: isSelected,
      dimmed: !isSelected && otherButtonIsSelected
    }
  })
}

... add the .dimmed class to the items in our HTML:

<!-- HTML inside nav > ul -->
<li
  v-for="(item, index) in menuItems"
  :key="`item-${index}`"
  @mouseover="selectItem(index)"
  @mouseleave="selectItem(-1)"
  :class="{
      'selected': item.selected,
      'dimmed': item.dimmed
    }"
  class="menu-item"
>
  {{item.label}}
  <span class="arrow">➔</span>
</li>

... and last but not least, create the .dimmed CSS rule:

/* CSS */
.dimmed {
  opacity: 0.3;
}

We are getting closer to the final product.

Character flipping animations

Flipping each of the menu item characters is probably the most interesting and complicated part in this widget. We can't just flip over the whole menu, each one of the characters should be individually flipped over horizontally (scaleX: -1).

To be able to "control" each and every character we need to split the menu characters:

// JS inside computed
menuItems () {
  return itemsList.map((item, index) => {
    const isSelected = this.selectedItem === index;
    const otherButtonIsSelected = this.selectedItem !== -1
    return {
      label: item,
      selected: isSelected,
      dimmed: !isSelected && otherButtonIsSelected,
      chars: item.split('')
    }
  })
}

...with the chars property we can now render each character inside a <span> node:

<!-- HTML inside nav > ul -->
<li
  v-for="(item, index) in menuItems"
  :key="`item-${index}`"
  @mouseover="selectItem(index)"
  @mouseleave="selectItem(-1)"
  :class="{
      'selected': item.selected,
      'dimmed': item.dimmed
    }"
  class="menu-item"
>
  <span
    class="char"
    v-for="(char, charIndex) in item.chars"
    :key="`char-${charIndex}`"
    :ref="`char-${index}-${charIndex}`"
    >{{char}}</span
  >
  <span class="arrow">➔</span>
</li>

Take note of the "ref" attribute, it will help us to "reference" all of those characters using the "index" of the menu item along with the "charIndex".

At this moment nothing should have changed visually, but we should have just separated the menu into characters.

We will add a couple of constants that will help us to read better the next part of our code

// JS below const itemList declaration
const LEFT = -1
const RIGHT = 1

After that, whenever the selectedItem changes, we want to start animating correctly all of the characters. We will loop through each menuItem and depending on if they're selected or not we will flip them LEFT or RIGHT:

// JS inside methods
selectItem(id) {
  this.selectedItem = id;

  this.menuItems.forEach((item, index) => {
    const direction = item.selected ? LEFT : RIGHT;
    this.animateChars(index, item.label.length, direction);
  })
},

The animateChars() method is not declared yet, but now it shouldn't be hard to create since we have the index of the item, the number of characters that the item has and the direction to flip the letters:

// JS inside methods
animateChars (id, charLength, direction) {
  for(let c=0;c < charLength; c++){
    const refId = `char-${id}-${c}`;
    const char = this.$refs[refId];
    TweenMax.killTweensOf(char);
    TweenMax.to(char, 0.5, {scaleX: direction});
  }
}

In this method we are basically getting the reference for each of the characters, killing the animation the currently have (if any) and then flipping the character to the direction we previously calculated.

It seems that everything should be looking just like the reference, but it doesn't 😰.

If we look into the console we will see that the characters are being transformed correctly, TweenMax is changing their transform matrix just as I expected:

After scratching my head for a while and looking for any bug I found out that the <span> nodes we are animating, by default have their display property set to inline. Transforms don't seem to work with that type of display property so let's take advantage of the .char class that we added to those elements to fix this:

.char {
  display: inline-block;
  min-width: 0.3em;
}

The "min-width" property was added to make the text look correctly, when adding the "inline-block" display property, the characters like spaces lose their width.

And now the final result!

I know there is room for improvement, sometimes animations don't run smoothly because of all the different elements rendering. If you have any ideas on how to improve this I'd love to read them in the comments.

And that’s it for this Widget of the Week.

If you're hungry for more you can check other WotW:

Originally published at ederdiaz.dev

Making an interactive password validator - WotW

Eder Díaz — Tue, 31 Jul 2018 17:18:50 +0000

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

Today we are going to create a password submit form, that validates the user input in real time.
The inspiration comes from this submission created by ramykhuffash and looks like this:

Preparations

For today's widget we will be using Vue.js, and for some animations we'll use TweenMax.

If you want to follow along you can fork this codepen template that already has the dependencies.

The markup

I always try to match the design as close as possible, but in this case there are some graphics that cannot be done unless I spend a couple of hours using a vector editing program to generate them, so instead of that I'll match the most important interactive and animated elements.

Let's start by setting an app-container class to our main div, because we will need to style it. Bellow we should have a title and subtitle that correspond to the instructions of our widget

<div id="app" class="app-container">

  <h1 class="title">Set a Password</h1>
  <p class="subtitle">Must contain at least</p>

Now for the list of rules we will make a rules-container, followed by an empty div for the pink-line that will make it look like a notebook sheet.

  <div class="rules-container">
    <div class="pink-line"></div>

Next, we will use an unordered list for our rules-list, it will contain four rules-items each with a rule-text for the label and an empty green-line that will cross the rule when fulfilled.

    <ul class="rules-list">
      <li class="rule-item">
        <div>
          <span class="rule-text">1</span>          
        </div>
        <div class="green-line"></div>
      </li>

      <li class="rule-item">
        <div>
          <span class="rule-text">2</span>          
        </div>
        <div class="green-line"></div>
      </li>

      <li class="rule-item">
        <div>
          <span class="rule-text">3</span>          
        </div>
        <div class="green-line"></div>
      </li>

      <li class="rule-item">
        <div>
          <span class="rule-text">4</span>          
        </div>
        <div class="green-line"></div>
      </li>
    </ul>
  </div> <!-- rules-container -->

Last but not least, we will make a form that will contain the password input and its submit button:

  <form>
    <input class="password-input" type="password">
    <button class="save-button" type="submit">
      <strong>SAVE</strong>
    </button>
  </form>

</div> <!-- app-container -->

We should have a really basic no-style form, like this:

Making it look nice

We have quite some work ahead, right now our widget doesn't look anything like the original post.

Let's begin with the app-container.
I'll constrain the width to be fixed to 320px and centered. Also I'll set a white color for the text and a font. Then just a gradient background color to match the reference.

.app-container {
  width: 320px;
  margin: 0 auto; /* center */
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(#553096, #40266D); /* purple gradient background */
}

The next step is to style the text titles. It is actually really simple, we just need to center them and adjust sizes, margin and padding.

.title {
  text-align: center;
  padding-top: 20px;
  font-size: 20px;
  margin-bottom: 0;
}
.subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.5); /* semitransparent */
  font-size: 14px;
  margin: 0;
}

The rules-container will be our "sheet" of paper, so it should have a white background color, some border-radius for the rounded corners, a fixed width of 200px and also will be centered. It should also have a slight angle, transform: rotate should do the trick:

.rules-container {
  width: 200px;
  margin: 0 auto; /* center */
  margin-bottom: 30px;
  color: #2A1E49;
  background-color: white;
  border-radius: 5px;
  transform: rotate(-3deg);
}

Now for the rules, we will basically set the spacing using padding and margins. We don't want to see the default lists bullet points, so list-style-type: none takes care of that. Also a blue border-bottom should help with the notebook sheet lines.

.rules-list {
  padding: 15px 0 10px 0;
}
.rule-item {
  position: relative;
  list-style-type: none; /* remove bullets */
  width: 100%;
  margin-bottom: 5px;
  border-bottom: solid blue 1px;
}
.rule-text {
  /* set text beside the pink line */
  margin-left: 25px;
}

Now for the lines, both will have a position absolute, because they need to be positioned freely on top of the elements.
With the pink line, the height was kind of a trial and error, because it depends on the number of rules, so if you plan to add or remove rules you should change that.
The green line is different because it appears in every rule and should be ready to cross them, in this case we will start with no crossed rules, so the default width will be 0.

/* pink left line to make the list look like a notebook sheet */
.pink-line {
  position: absolute;
  border-left: solid #f84194 1px;
  height: 120px; /* depends on container height */
  left: 18px;
}
/* line that croses each rule */
.green-line {
  position: absolute;
  background-color: #32B997;
  height: 3px;
  top: 8px;
  left: 22px;
  transform: rotate(2deg);
  width: 0; /* starting width so it doesn't show */
}

To finish styling our component we need to set the styles for the password-input and the save-button. They have some pretty straightforward rules, like removing the default border and outline for those elements, calculating the center, font size, etc. The most interesting part is with the save-button, it has a transition property to be able to animate the background color, and along with that a valid class rule that should be changed when the form is validated and has no problems.


.password-input {
  width: 220px;
  outline: none;
  border: none;
  padding: 8px 10px 10px;
  border-radius: 2px;
  margin-bottom: 30px;
  margin-left: calc(50% - 120px);
  font-size: 20px;
}

.save-button {
  outline: none;
  border: none;
  width: 100%;
  padding: 10px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 17px;
  background-color: #EDEDED;
  transition: background-color .3s; /* will animate the backround color when the class changes*/
}
.save-button.valid {
  background-color: #F9B800;
  cursor: pointer;
}

We should have now a nice looking widget like this:

The interaction

Now for the interesting part, let's code the widget interactions, but before getting into the Vue instance I'll create an object that will help us with the password validation rules.

In the original gif, the password needs to be 8 characters long, and have 1 special character, 1 upper case letter and 1 number. The first rule can be checked easily by just comparing the length of the password string, but the rest will need some Regular Expressions to easily detect if the password contains those characters.

const specialCharsRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/
const upperCaseRegex = /[A-Z]/
const numberRegex = /[0-9]/

const validationRules = [
  {
    label: '8 Characters', 
    validate: input => input.length>=8,
    labelWidth: 100 // this depends on the label length
  },
  {
    label: '1 Special Character', 
    validate: input => specialCharsRegex.test(input),
    labelWidth: 150
  },
  {
    label: '1 Upper Case', 
    validate: input => upperCaseRegex.test(input),
    labelWidth: 110
  },
  { 
    label: '1 Number', 
    validate: input => numberRegex.test(input),
    labelWidth: 80
  }
]

We could also have used a method that would go through each character and compare them, but RegEx have a better performance and we'll need that to compare in real time when the user writes its password.

Now that we have a list of rules with their validator, we can start binding those to Vue and use them to fill the HTML rules too:

new Vue({
  el: '#app',
  data: {
    password: ''
  },
  computed: {
    rules () {
      return validationRules.map(rule => {
        return {
          label: rule.label,
          isValid: rule.validate(this.password),
          labelWidth: rule.labelWidth
        }
      })
    }
  }
})

As you can see we are only declaring a password property that will hold the user input as they type it in. After that we create a computed rules property that basically takes the validationRules we did in the previous step and apply the validator to the password property.

To reflect those changes, we need to replace the rules-list with one that is binded to our new Vue computed properties:

    <ul class="rules-list">

      <li v-for="(rule, index) in rules" :key="index" class="rule-item">
        <div :ref="`label_${index}`">
          <span class="rule-text">{{rule.label}}</span>          
        </div>
        <div class="green-line" :ref="`line_${index}`"></div>
      </li>

    </ul>

Probably you noticed that apart from cycling through the rules I also declared a couple of refs for the label and the green line, they will be of use when animating them later.

Now we just need another computed property to know if the form is valid and a stub method that will be called when the form is valid and submitted.

  // computed...
    validForm () {
      // returns false if at least one rule is invalid
      return !this.rules.some(rule => !rule.isValid)
    }
  },
  methods: {
    submitForm() {
      if(this.validForm) {
        console.info('TODO: connect to your back-end');        
      }
    }
  }

And in the HTML code we can bind those to our form like this:

  <form @submit.prevent="submitForm">
    <input class="password-input" type="password" v-model="password">
    <button class="save-button" :class="{'valid': validForm}" type="submit">
      <strong>SAVE</strong>
    </button>
  </form>

Notice the @submit.prevent part, that's a shortcut to avoid having to write in your method event.preventDefault() and helps us to trigger the submitForm method without refreshing the page.

We are almost there, actually if you set a password that fulfills all those requirements you can see the SAVE button change color:

The animations

So technically the widget is fully functional but it is still missing the animations that tell you which rule is already checked when writing your password.

First we will create a method that will take any rule and animates it depending if it is valid or not. When valid, the green line should increase its width to strike through the text, and at the same time the text should have some transparency and move horizontally a little. When it is not valid it should get back to normal.

  // methods ...
    animateRule(index, isValid) {
      const rule = this.rules[index]
      const greenLine = this.$refs[`line_${index}`]
      const ruleText = this.$refs[`label_${index}`]

      const greenLineWidth = isValid ? rule.labelWidth : 0
      const textOpacity = isValid ? 0.6 : 1
      const textPositionX = isValid ? 7 : -7

      // animate green line's width to strike element
      TweenLite.to(greenLine, 0.3, {
        width: greenLineWidth
      })

      // animate text transparency
      TweenLite.to(ruleText, 0.3, {
        opacity: textOpacity
      })

      // move the text to the side a little bit and then get back
      TweenLite.to(ruleText, 0.15, {
        x: textPositionX,
        onComplete: () => { // when the animation finishes, get it back
          TweenLite.to(ruleText, 0.15, {
            x: 0
          })
        }
      })
    },

Basically what I'm doing in that method is get the animated elements by reference (remember the "refs" we declared before?), and then calculate the final state of each of them.
After that, using TweenLite, I just tween the desired property to that final state, or in the case of the text horizontal movement it goes back and forth by setting another TweenLite tween in the onComplete method.

For this to work we need to trigger the animation only for the rules that changed, but how can we "inspect" our rules to see which ones were invalid and on are valid or the other way around?

We can do that with a watcher.

A watcher is a method that you can execute each time any of your application data changes, and it receives both the old and the new value of that specific property.

Let's create a watcher that compare the rules values, if their isValid property got changed then we can call our animateRule method and animate only the rules that changed:

  watch: {
    // method that triggers when computed rules change
    rules: function (newRules, oldRules) {
      newRules.forEach((newRule, index) => {
        const oldRule = oldRules[index]
        if(newRule.isValid !== oldRule.isValid) {
          // rule changed its valid property
          this.animateRule(index, newRule.isValid)
        }
      })
    }
  },

And now the final result!

That’s it for this Widget of the Week.

If you're hungry for more you can check other WotW:

Also if you want to see a specific widget for next week, post it in the comments section.

Making an animated slider - WotW

Eder Díaz — Thu, 12 Jul 2018 13:39:46 +0000

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

This time we are going to create a temperature slider, although it can be used for anything.
The inspiration comes from this submission created by ramykhuffash and looks like this:

Preparations

For today's widget we will be using Vue.js, and for some animations we'll use TweenMax. Also we will need a temperature icon, so we'll be using the one from Font Awesome.

If you want to follow along you can fork this codepen template that already has the dependencies.

Matching the design

The HTML markup for this widget got a little bit more complicated than the usual, so this time I will break it down in sections using HTML + CSS until we match the original design.

Let's start by setting an upper and lower section, the upper one will contain the numbers and the lower one the slider control.

<div id="app" class="main-container">
  <div class="upper-container">

  </div>
  <div class="lower-container">

  </div>
</div>

Before styling them we need a couple of main CSS properties in the body.

body {
  margin: 0;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

We set the margin to 0 to avoid having a gap surrounding our main-container. The color and font-family is set there too to avoid repeating them all over our elements.

Now we will use CSS grid properties to divide the screen in two parts, the upper one needs to take something like 3/4 of the vertical height, we can achieve that with fr.

.main-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr;
  height: 100vh;
  overflow-x: hidden;
}

Notice the 100vh value in the height property, that allows us to fill the screen vertically even if our divs have no content at all.

Also the overflow-x: hidden property will prevent our widget to show a scroll bar if our elements get out of bounds in smaller screens (Thanks to Nested Software for noticing this).

Now it is just a matter of adding a background color to the sections. For the upper one we'll be using a gradient:

.upper-container {
  position: relative;
  background: linear-gradient(to bottom right, #5564C2, #3A2E8D);
}
.lower-container {
  background-color: #12132C;
}

The position: relative property set in the upper-container will be of use when we tray to position its inner elements.

We're just getting warmed up.

The numbers inside the upper section seem like the logical next step.

  <!-- inside .upper-container -->
    <h2 class="temperature-text">10</h2>

This will be the big number that shows the current temperature, let's use some CSS to position it better:

.temperature-text {
  position: absolute;
  bottom: 150px;
  font-size: 100px;
  width: 100%;
  text-align: center;
  user-select: none;
}

The user-select: none property should helps us to avoid selecting the text when we interact with the slider.

Before we adding the numbers that appear below, let's fire up the Vue instance with some data to help us avoid repeating unnecessary markup elements:

new Vue({
  el: '#app',
  data: {
    temperatureGrades: [10, 15, 20, 25, 30]
  }
})

Now we can use that temperatureGrades array to show those elements in the design:

    <!-- just after .temperature-text -->
    <div class="temperature-graduation">
      <div class="temperature-element" 
           v-for="el in temperatureGrades" 
           :key="el">
        <span class="temperature-element-number">{{el}}</span><br>
        <span class="temperature-element-line">|</span>
      </div>
    </div>

Notice that we are rendering for each of the numbers a | character, now we can style them to look like a "ruler".

For both the numbers and lines we need to center the text, we will do that inside the temperature-element rules. We will also make the elements to be inline-blocks so they can be next to each other. Finally the | character needs to be smaller, font-size will take care of that:

.temperature-element {
  text-align: center;
  display: inline-block;
  width: 40px;
  margin: 0 10px 0 10px;
  opacity: 0.7;
}
.temperature-element-line {
  font-size: 7px;
}

Inspecting the .temperature-graduation element we can see that it's width is 300px, in order to center it we can use a calculated value in the following way:

.temperature-graduation {
  position: absolute;
  left: calc(50% - 150px); // subtracting half the width to center
  bottom: 25px;
  user-select: none;
}

We also set the bottom property to make it appear just above the lower section.

The slider

The upper part is ready, now we will add the slider control. The button is easy, we just need a div with an icon in it:

  <!-- inside .lower-container -->
    <div class="slider-container">
      <div class="slider-button">
        <i class="fas fa-thermometer-empty slider-icon"></i>
      </div>
    </div>

Now let's style the button, most of the following CSS code are values "tweaked" by hand to be able to position the elements in the desired position.

.slider-container {
  width: 150px;
  height: 80px;
  margin-top: -30px;
  margin-left: calc(50% - 187px);
  position: relative;
}
.slider-button {
  position: absolute;
  left: 42px;
  top: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #2724A2;

  cursor: grab;
  cursor: -webkit-grab; 
  cursor: -moz-grab;
}

.slider-icon {
  margin-top: 16px;  
  margin-left: 21px;  
  color: white;
}

The grab values inside the button will transform the cursor to be a hand when hovering it.

The slider now is only missing a "wave" like shape, at first I tried to do it by using border-radius values and rotating a div, but sadly it didn't match the design. What I ended up doing was a SVG graphic that looks like this:

The code for that shape is this:

    <!-- inside .slider-container -->
      <svg width="150" height="30" viewBox="0 0 150 30" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M74.3132 0C47.0043 2.44032e-05 50.175 30 7.9179 30H144.27C99.4571 30 101.622 -2.44032e-05 74.3132 0Z" transform="translate(-7.38794 0.5)" fill="#12132C"/>
      </svg>

It's been a bit of a ride, but we have the design ready.

The interaction

The most noticeable thing in the interaction of this widget is, by far, dragging and dropping the slider. We have done this before when we did the card slider, so I'll follow a similar approach:

  // inside data
    dragging: false,
    initialMouseX: 0,
    sliderX: 0,
    initialSliderX: 0

These will be the data properties that will help us to keep track when the user starts/stops dragging, mouse and the slider position.

The following methods will initialize those variables when the user interacts:

  // after data
  methods: {
    startDrag (e) {
      this.dragging = true
      this.initialMouseX = e.pageX
      this.initialSliderX = this.sliderX
    },
    stopDrag () {
      this.dragging = false
    },
    mouseMoving (e) {
      if(this.dragging) {
        // TODO move the slider        
      }
    }
  }

Now let's bind them to the template

<div id="app" class="main-container"
    @mousemove="mouseMoving"
    @mouseUp="stopDrag">
      <!-- ... inside .slider-container
        <div class="slider-button" 
             @mouseDown="startDrag">

You might have noticed that the @mouseDown action is set in the slider button, but the @mouseMove and @mouseUp are at the level of the main div.

The reason behind this is that users will start by pressing down the slider button, but when moving the cursor they usually get outside the slider track, and if they let go the mouse outside the button it won't be tracked and will cause the button to follow you until you click it again.

Let's now fill the mouseMoving method with an algorithm that will set the sliderX property to the desired position. We will need to declare some constrains for the slider to match the ruler we did before.

// before the Vue instance
const sliderMinX = 0
const sliderMaxX = 240

  // inside mouseMoving method
    // replace the "TODO" line with this:
    const dragAmount = e.pageX - this.initialMouseX
    const targetX = this.initialSliderX + dragAmount

    // keep slider inside limits
    this.sliderX = Math.max(Math.min(targetX, sliderMaxX), sliderMinX)

  // after methods
  computed: {
    sliderStyle () {
      return `transform: translate3d(${this.sliderX}px,0,0)`
    }
  }

The computed property sliderStyle as you might have guessed, stores the position for the slider, we just need to bind it to the .slider-container:

  <div class="slider-container" :style="sliderStyle">

We almost have a working slider control but it is missing an important thing, tracking the slider value. It might sound complicated, but we can calculate that value with a computed property because we already know the sliderX position:

  // inside computed    
    currentTemperature () {
      const tempRangeStart = 10
      const tempRange = 20 // from 10 - 30
      return (this.sliderX / sliderMaxX * tempRange ) + tempRangeStart
    }

You can se that it works by render it inside the .temperature-text element:

  <h2 class="temperature-text">{{currentTemperature}}</h2>

The problem now is that it is rendering float numbers. We can avoid that with a filter:

  // after data
  filters: {
    round (num) {
      return Math.round(num)
    }
  },

And now we can use the filter like this:

  <h2 class="temperature-text">{{currentTemperature | round}}</h2>

The finishing touches

We could call it a day and let the widget like this, but it is still missing a couple of details.
The background should change colors when the temperature goes above 25 degrees, and also the ruler numbers should move in a wave like manner.

For the background we'll declare a couple of constants at the top and some new data properties:

const coldGradient = {start: '#5564C2', end: '#3A2E8D'}
const hotGradient = {start:'#F0AE4B', end: '#9B4D1B'}

// inside Vue
    // inside data
      gradientStart: coldGradient.start,
      gradientEnd: coldGradient.end

    //inside computed
      bgStyle () {
        return `background: linear-gradient(to bottom right, ${this.gradientStart}, ${this.gradientEnd});`
      }

They will hold the colors needed for the gradient background. The bgStyle computed property will generate the background every time gradientStart and gradientEnd change. Let's bind it to it's corresponding HTML element:

  <div class="upper-container" :style="bgStyle">

For now it should look the same, but that will change when we add the rules to animate it inside the mouseMoving method:

    // set bg color
    let targetGradient = coldGradient
    if (this.currentTemperature >= 25) {
      targetGradient = hotGradient
    }

    if(this.gradientStart !== targetGradient.start) {
      // gradient changed
      TweenLite.to(this, 0.7, {
        'gradientStart': targetGradient.start,
        'gradientEnd': targetGradient.end
      }) 
    }

What we are doing is change the gradient values from the cold to the hot ones, when the temperature changes to be 25 degrees or more. The transition is done with TweenLite instead of CSS transitions, because they only work with solid colors.

Finally our rulers elements need to change their Y position if the slider is close to them.

    <div class="temperature-element" v-for="el in temperatureGrades"
           :style="tempElementStyle(el)"
           :key="el">

Similarly to the upper section we'll bind the style to be changed by a method, this method will receive each of the ruler's values. Now it's just a matter of doing some math to calculate the distance and generate some CSS transform props:

  // inside methods
    tempElementStyle (tempNumber) {
      const nearDistance = 3
      const liftDistance = 12

      // lifts up the element when the current temperature is near it
      const diff = Math.abs(this.currentTemperature - tempNumber)
      const distY = (diff/nearDistance) - 1

      // constrain the distance so that the element doesn't go to the bottom
      const elementY = Math.min(distY*liftDistance, 0)
      return `transform: translate3d(0, ${elementY}px, 0)`
    }

And now the final result!

That’s it for this Widget of the Week.

If you're hungry for more you can check other WotW:

Also if you want to see a specific widget for next week, post it in the comments section.

Making a 3D facing widget - WotW

Eder Díaz — Wed, 04 Jul 2018 11:43:37 +0000

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

This time we are going to create a 3D widget that "looks" at the cursor as we move it through the screen.
The inspiration comes from this dribble created by Steven Hanley and looks like this:

Preparations

For today's widget we will be using Vue.js, and for the "look around" animation we'll use TweenMax.

If you want to follow along you can fork this codepen template that already has the dependencies.

The initial markup

For this component the markup should be really simple. We need our app, a container, and inside it an image, title and a card with some random text.

<div id="app">
  <div class="container center">
    <img class="image" src="https://www.dropbox.com/s/b0h57o6sxznnowy/drone-00.webp?raw=1">
    <h1 class="title">Dr. one</h1>
    <div class="card">
      <p>
        Chupa chups lollipop jelly cake icing wafer chocolate 
        lollipop candy canes. Marzipan dragée biscuit cotton candy 
        sweet roll sugar plum. Toffee sweet jelly beans cake 
        gummies gummies jujubes cotton candy sugar plum.
      </p>
    </div>
  </div>
</div>

As you might have noticed, we already added some classes in order to style each node in the next step.

Styling

First of all, to match the reference background we will simply put the following rule:

body {
  background-color: #36B5B2
}

Next we will center the container and also add some upper margin so it has some moving space on top.

.container {
  position: relative;
  margin-top: 40px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

The position: relative property will let us manipulate the inner elements with absolute positioning without them getting outside the original container (unless we want them to do that).

The title will be centered horizontally and slightly bellow the vertical center (top: 150px) and we will try to match the font size and family.

.title {
  position: absolute;
  top: 150px;
  text-align: center;
  color: white;
  font-size: 80px;
  font-family: Helvetica, Arial, Sans-Serif;
}

Then the card will be similarly positioned in the horizontal center, but this time it will be bellow the image by a bit (bottom: -20px), and have a fixed height and width:

.card {
  position: absolute;
  background-color: white;
  bottom: -20px;
  padding: 20px;
  width: 400px;
  height: 100px;
}

After that we should have something like this:

The behavior

Before we start coding the Vue app, let's analize what we need to achieve the desired animation, let's take a look again to the reference:

Our input in this case will be the mouse position, depending on it we should change the rotation of the container. This rotation should be controlled as we don't want the object to rotate 360 degrees, it actually rotates just enough to get the feeling that it faces the mouse, I'd say around 20 degrees in each direction.

Now we can setup our Vue app with that knowledge, let's declare a constant with the degrees of freedom and also a couple of data properties to keep track of the object rotation:

const maxRotationDegrees = 20
new Vue({
  el: '#app',
  data: {
    rotX: 0,
    rotY: 0
  }
})

The next step is to add a method to follow the mouse position, we want to know its position everywhere in our app, not just the widget, so we need to add a mousemove handler in the main HTML node like this:

<div id="app" @mousemove="mouseMoved">
  <!-- the rest of the markup -->

The mouseMoved method needs to be created, inside it we will get the mouse position with the pageX and pageY properties of the event. After that we will normalize the inputs, multiply that by the degrees of freedom and finally store them into our rotX and rotY properties:

// vue app ...
  methods: {
    mouseMoved (e) {
       // This gives us a number between -1 and 1
       const mousePercX = (e.pageX / document.body.clientWidth) * 2 - 1
       const mousePercY = (e.pageY / document.body.clientHeight) * 2 - 1


       this.rotX = mousePercX * maxRotationDegrees
       this.rotY = mousePercY * -maxRotationDegrees
    }
  }

To start seeing some movement in our widget we need to change the style of it, so we will create a computed property called rotation that will generate the CSS transform to be applied to the widget:

// vue app ...
  computed: {
    rotation () {
      return {
        transform: `perspective(1000px) rotateY(${this.rotX}deg) rotateX(${this.rotY}deg)`
      }
    }
  },

You might have noticed that we have the rotateY property with the rotX property, and something similar with the rotateX, this is not a mistake.

What happens is that when rotating an object in a 3D space, the rotation in the Y axis makes and object change its facing direction horizontally and the rotation in the X axis does it vertically.

You can see it more clearly in the next image, the orange arrow corresponds to the rotateY property and the green one is the rotateX property:

With that explained, we can now add those transforms to our widget in an inline style property, like this:

<!-- app -->
   <div class="container center" :style="rotation">

If we test that we should see the widget moving... but something is not right, the object is completely flat:

Even though we are adding a perspective property in the computed rotation, we still need to change the z position of the inner parts. It should look like the image is behind, the title is in the middle and the card is in front, so let's change their CSS a bit:

.image {
  transform: translateZ(-100px);
}

.title {
  /* other props */
  transform: translateZ(20px);
}

.card {
  /* other props */
  transform: translateZ(100px);
}

Mmmh still looking flat...

After reading some documentation I found out that the children of a node are always flat, unless you explicitly say otherwise, so we need to add the following property in our container:

.container {
  /* other props */
  transform-style: preserve-3d;
}

That will allow the children of the node to render in 3D space correctly.

We could say we are done, but I feel that the animation is a bit stiff. We can smooth it by replacing the last part of the mouseMoved method with a tween like this:

    // mouseMoved...
      // remove these
      // this.rotX = mousePercX * maxRotationDegrees
      // this.rotY = mousePercY * -maxRotationDegrees

      // add this
      TweenLite.to(this, 0.5, {
        rotX: mousePercX * maxRotationDegrees,
        rotY: mousePercY * -maxRotationDegrees
      })

And now the final result!

That’s it for this Widget of the Week.

If you're hungry for more you can check other WotW:

Also if you want to see a specific widget for next week, post it in the comments section.

Cards hover animation - WotW

Eder Díaz — Tue, 19 Jun 2018 15:51:58 +0000

Welcome to the Widget of the Week series, where I take gifs or videos of awesome UI/UX components, and bring them to life with code.

I've been quite busy for a couple of weeks, preparing and giving a Vue.js course in Wizeline Academy, but I'm back with another interactive component.

Today we'll make a list of cards that animate when hovered (or clicked in mobile), the inspiration comes from this dribble created by Kreativa Studio and looks like this:

Preparations

For today's widget we will be using Vue.js, and for some specific animations we'll use the TweenMax.

If you want to follow along you can fork this codepen template that already has the dependencies.

The initial markup

For this component I'll start by making a single card. It will be divided in two parts: the image and the footer with the text elements.
Also for each element I'll set a specific class so we can style it later.

<div id="app">
  <div class="card-row">
    <div class="card">

      <img class="card-image" src="https://placeimg.com/640/480/nature">

      <div class="card-footer">
        <p class="card-text">RECIPE</p>
        <h3 class="card-title">Title</h3>
        <p class="card-text">by 
          <span class="card-author">Author</span>
        </p>
      </div>
    </div>
  </div>
</div>

At this point we should only have a big image and some text below.

Styling

Before doing anything else we need to make the card look like the reference in order to handle any needed animation.
First I'll match the body background color, then int the card-row I'll make use of flex, the justify-content property and align-items to center the content, in this case the cards.

body {
  background-color: #E1E7E7;
}

.card-row {
  display: flex;
  justify-content: center;
  align-items: center;  
  min-width: 780px;
  width: 100%;
  height: 500px;
}

Now let's style the card. The position will be set to relative to be able to position the footer element and stick it to the bottom. Also we set the overflow property to hidden to be able to resize the background image without it getting outside the card.

.card {
  position: relative;
  background-color: #FFFFFF;
  height: 370px;
  width: 240px;
  margin: 10px;
  overflow: hidden;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
}

For the image I set the position to absoulte and the left and right properties to -9999px, that trick should center the image horizontally even when we animate it's width.

.card-image {
  /* center horizontally overflown image */
  position: absolute;
  left: -9999px;
  right: -9999px;
  margin: auto;

  height: 220px;
  min-width: 100%;
}

Last but not least, we need to style the footer and it's contents. For that position: absolute and bottom:0 should keep the container at the bottom. The rest are just rules to make the elements look a little bit like the reference.

.card-footer {
  position: absolute;
  bottom: 0;
  height: 130px;
  padding: 10px 15px;
  font-family: Helvetica;
}
.card-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
}
.card-title {
  font-family: Serif;
}
.card-author {
  font-size: 14px;
  color: #BAB096;
}

After that we should have something like this:

The behavior

For the next steps we will need more than a single card, so let's declare the data for at least three cards.

const cards = [
  {title: 'Gooey PBJ Brownies', author: 'John Walibur', image: 'https://placeimg.com/640/480/nature'},
  {title: 'Crisp Spanish Tortilla Matzo Brei', author: 'Colman Andrews', image: 'https://placeimg.com/640/480/animals'},
  {title: 'Grilled Shrimp with Lemon and Garlic', author: 'Celeste Mills', image: 'https://placeimg.com/640/480/arch'}
]

Then let's create the Vue instance and bind to it's data the cards data and declare a variable to track the current card:

new Vue({
  el: '#app',
  data: {
    cards: cards,
    selectedCard: -1
  }
})

And now in our template we can render those cards with a v-for directive like this:

<div id="app">
  <div class="card-row">
    <div v-for="(card, index) in cards" 
      :key="index"
      :ref="`card_${index}`"
      @mouseover="hoverCard(index)"
      @mouseout="hoverCard(-1)"
         class="card">

      <img class="card-image" :src="card.image">

      <div class="card-footer">
        <p class="card-text">RECIPE</p>
        <h3 class="card-title">{{card.title}}</h3>
        <p class="card-text">by 
          <span class="card-author">{{card.author}}</span>
        </p>
      </div>
    </div>
  </div>
</div>

You might have noticed that I binded a couple of events @mouseover and mouseout. Both are triggering a method called hoverCard that we have not declared yet, so let's do that.

// ... vue instance
  methods: {
    hoverCard(selectedIndex) {
      this.selectedCard = selectedIndex
    },
    isSelected (cardIndex) {
      return this.selectedCard === cardIndex
    }
  }

Make the hover effect

We will make use of that selectedCard property and also the isSelected method to set a class to the elements we are going to animate, but first let's add some simple CSS transitions for the whole card.

.card {
  /* the other rules */
  transition: height 0.3s, box-shadow 0.3s;
}
.card:hover {
  height: 410px;
  box-shadow: 20px 20px 40px 0px rgba(0,0,0,0.5);
}

By adding the transition line in the .card we are indicating that the height and box-shadow should be animated, then when the card is hovered, its height will increase along with the shadow to make it look like it is getting closer to us.

Now we'll use the isSelected method to set the .selected card to the image. I'm not using :hover in this case, because the user can be hovering the text and we still want the image animation to run, not only when the image is hovered.

<!-- card markup -->
    <img class="card-image" 
        :class="{'selected': isSelected(index)}"
        :src="card.image">

And just like we did with the card let's add a transition and a .selected state:


.card-image {
  /* the other rules */
  transition: height 0.3s, opacity 0.3s;
}
.card-image.selected {
  height: 410px;
  opacity: 0.3;
}

The image will change it's size when hovered and we only need to set the height because the width will automatically adjust to keep the aspect ratio.

Now that the image is expanding, I feel that the author text is too bright and can't be read clearly. I'll just repeat the lasts steps to make it look darker when the card is hovered:

<!-- card -->
  <!-- card-footer -->
    <span 
        class="card-author" 
        :class="{'selected': isSelected(index)}">
            {{card.author}}
    </span>

.card-author {
  /* the other rules */
  transition: color 0.3s;
}
.card-author.selected {
  color: #6a6456;
}

Separate the other cards

We are almost there, but there's still something missing. In the reference, when the card is hovered the other cards move away from it, like a repelling effect.
That effect can't easily be done with just CSS, we will need to do the animation by calculating where each card should move and then animate it with TweenMax.

I'll create a new method called animateCards that will be triggered when the selectedCard changes.
Then for each of the cards we need to know in which direction should they move.

First when no card is selected everything should stay the same direction = 0.
When a card is before the selected card it should move to the left direction = -1.
If the card is after the selected card it must move to the right direction = 1.
Finally if the card is the selected one, it should not move direction = 0.

// methods
    hoverCard(selectedIndex) {
      this.selectedCard = selectedIndex
      this.animateCards()
    },
    animateCards () {
      this.cards.forEach((card, index) => {
        const direction = this.calculateCardDirection(index, this.selectedCard)
        TweenMax.to(
          this.$refs[`card_${index}`], 
          0.3, 
          {x: direction * 50}
        )
      })
    },
    calculateCardDirection (cardIndex, selectedIndex) {
      if(selectedIndex === -1) {
        return 0
      }

      const diff = cardIndex - selectedIndex
      return diff === 0 ? 0 : diff/Math.abs(diff)
    },

After calculating the direction, with the help of this.$refs we can select each card and make TweenMax change it's position.

And now the final result!

That’s it for this Widget of the Week.

If you're hungry for more you can check other WotW:

Also if you want to see a specific widget for next week, post it in the comments section.