Post pobrano z: State of Houdini (Chrome Dev Summit 2018)

Here’s a great talk by Das Surma where he looks into what Houdini is and how much of it is implemented in browsers. If you’re unfamiliar with that, Houdini is a series of technologies and APIs that gives developers low level access to how CSS properties work in a fundamental way. Check out Ana Tudor’s deep dive into its impact on animations for some incredible examples of it in practice.

What I particularly like about this video is the way Das mentions the CSS Paint API which lets you do a bunch of bizarre things with CSS, such as creating „squircle” shapes and changing how borders work. It looks wonderfully robust and it should give us super powers in the near future. Ruth John wrote up this extensive overview on the topic earlier this year and it’s worth a read as well.

Direct Link to Article — Permalink

The post State of Houdini (Chrome Dev Summit 2018) appeared first on CSS-Tricks.

Post pobrano z: Add Instant awesomeness to your interfaces with this insanely large icon set

(This is a sponsored post.)

When you need to add icons to your interface, the whole process can really suck. “Should I use all these default bootstrap icons? Maybe I’ll just use the same Google Material icons for the hundredth time?”

Some important yet often overlooked things to consider when choosing an icon set includes, the size of the icons, style, consistency, and quantity. It’s frustrating to find icons that only cover half of the use cases you need.

We constantly felt this frustration too and decided to do something about it. This ultimately led to creating Streamline icon set.

Now in version 3.0, Streamline contains a whopping 30,000 icons in three distinct weights, similar to a font family. There are tons of options to pick the perfect icon for any interface you’re working with, whether it’s a big web application, documentation, or a marketing site.

„I own several icon sets but the one that I return to over and over is the copious Streamline pack, which almost always seems to have just the pictogram I need when I dig into its catalog.”

—Khoi Vinh, Adobe

Easy to Use

Streamline has also been meticulously organized into easy-to-navigate categories. You can see all of the categories in our handy dandy web-based icon viewer.

If you’re an IconJar user, you can also search for icons by name and drag and drop them into your project folder. We’re currently under development on this functionality for our web viewer too.

Every Streamline Icon pack comes with the following file types: .svg, .iconjar, .sketch, .fig, .ai, .pdf, .png, .xd.

So now matter how you like to work with icons, you have the file types you need.

„Streamline 3.0 is one of the most versatile and detailed icon packs I’ve ever used. The structure and hierarchy make it super easy to work with. This is an amazing product. Bravo, Vincent.”

—Stephanie Walter, UX & UI Designer

Optimized SVG

The SVG versions of Streamline is already dev-ready with proper viewbox tags in place and currentColor set as the color properties for all strokes and fills. You can pop in Streamline using your favorite SVG technique and start changing the color of the icons with CSS right out of the gate.

See the Pen QJQjMm by Matt D. Smith (@mds) on CodePen.

Weights

Every weight—light, regular, and bold—was designed with a very consistent style to give you tons of consistency within your interface.

Light

The classic Streamline style with bits of detail here and there. Designed with 1px stroke on a 24px grid. The Light icons are great for interfaces that need lots of fun personality. They also work well scaled up to 48px as small illustrations.

Regular

A new minimal and geometric style. Designed with a 1.5px stroke on a 24px grid. These are perfect to use on clean and modern web interfaces.

Bold

A new solid style akin to the latest iOS guidelines. Designed with fills and a 2px stroke on a 24px grid. The bold style gives a little more punch for an iOS style interface.

Put Streamline to work for you

There are two different package types available—Essential and Ultimate.

Essential contains 14 categories all related to interfaces and web design, whereas the Ultimate pack contains all 53 categories, including things like Pets, Weather, Finance, Outdoors, Transportation, and so much more.

👉 Check out the Streamline site to soak in all of the icon glory.

„Vincent’s icons are unique, versatile, and easy to work with. I’ve found them to be super useful across a range of projects.”

—Daniel Burka, Resolve to Save Lives

🤓 Some nerdy facts about the Streamline site:

• Initials designs created in Figma
• Coded from scratch with .pug, .sass, and .js
• CodeKit for compiling all of the code
• Grunt to create a sprite with all of the SVG assets
• Animations created in After Effects, exported from AE with Lottie into an icon-animation.json format, and added to the site using bodymovin.js
• Scrollmagic.js was used to manipulate the DOM based on scroll positions for the large icon parallax sections
• jQuery.js was used to make our lives easier since we’re building a marketing site and not a full-scale application

Direct Link to Article — Permalink

The post Add Instant awesomeness to your interfaces with this insanely large icon set appeared first on CSS-Tricks.

Post pobrano z: Swipeable card stack using Vue.js and interact.js

I recently had an opportunity to work on a fantastic research and development project at Netguru. The goal of project (codename: „Wordguru”) was to create a card game that anyone can play with their friends. You can see the outcome here.

One element of the development process was to create an interactive card stack. The card stack had a set of requirements, including:

• It should contain a few cards from the collection.
• The first card should be interactive.
• The user should be able to swipe the card in different directions that indicate an intent to accept, reject or skip the card.

This article will explain how to create that and make it interactive using Vue.js and interact.js. I created an example for you to refer to as we go through the process of creating a component that is in charge of displaying that card stack and a second component that is responsible for rendering a single card and managing user interactions in it.

View Demo

Step 1: Create the GameCard component in Vue

Let’s start by creating a component that will show a card, but without any interactions just yet. We’ll call this file GameCard.vue and, in the component template, we’ll render a card wrapper and the keyword for a specific card. This is the file we’ll be working in throughout this post.

// GameCard.vue
<template>
  <div
    class="card"
    :class="{ isCurrent: isCurrent }"
  >
    <h3 class="cardTitle">{{ card.keyword }}</h3>
  </div>
</template>

In the script section of the component, we receive the prop card that contains our card content as well as an isCurrent prop that gives the card a distinct look when needed.

export default {
  props: {
    card: {
      type: Object,
      required: true
    },
    isCurrent: {
      type: Boolean,
      required: true
    }
  }
},

Step 2: Create the GameCardStack component in Vue

Now that we have a single card, let’s create our card stack.

This component will receive an array of cards and render the GameCard for each card. It’s also going to mark the first card as the current card in the stack so a special styling is applied to it.

// GameCardsStack.vue
<template>
  <div class="cards">
    <GameCard
      v-for="(card, index) in cards"
      :key="card"
      :card="card"
      :is-current="index === 0"
    />
  </div>
</template>

<script>
  import GameCard from "@/components/GameCard";
  export default {
    components: {
      GameCard
    },
    props: {
      cards: {
        type: Array,
        required: true
      }
    }
  };
</script>

Here’s what we’re looking at so far, using the styles pulled from the demo:

At this point, our card looks complete, but isn’t very interactive. Let’s fix that in the next step!

Step 3: Add interactivity to GameCard component

All our interactivity logic will live in the GameCard component. Let’s start by allowing the user to drag the card. We will use interact.js to deal with dragging.

We’ll set the interactPosition initial values to 0 in the script section. These are the values that indicate a card’s order in the stack when it’s moved from its original position.

<script>
import interact from "interact.js";

data() {
  return {
    interactPosition: {
      x: 0,
      y: 0
    },
  };
},
// ...
</script>

Next, we create a computed property that’s responsible for creating a transform value that’s applied to our card element.

// ...
computed: {
  transformString() {
    const { x, y } = this.interactPosition;
    return `translate3D(${x}px, ${y}px, 0)`;
  }
},
// ...

In the mounted lifecycle hook, we make use of the interact.js and its draggable method. That method allows us to fire a custom function each time the element is dragged (onmove). It also exposes an event object that carries information about how far the element is dragged from its original position. Each time user drags the card, we calculate a new position of the card and set it on the interactPosition property. That triggers our transformString computed property and sets new value of transform on our card.

We use the interact onend hook that allows us to listen when the user releases the mouse and finishes the drag. At this point, we will reset the position of our card and bring it back to its original position: { x: 0, y: 0 }.

We also need to make sure to remove the card element from the Interactable object before it gets destroyed. We do that in the beforeDestroy lifecycle hook by using interact(target).unset(). That removes all event listeners and makes interact.js completely forget about the target.

// ...
mounted() {
  const element = this.$refs.interactElement;
  interact(element).draggable({
    onmove: event => {
      const x = this.interactPosition.x + event.dx;
      const y = this.interactPosition.y + event.dy;
      this.interactSetPosition({ x, y });
    },
    onend: () => {
      this.resetCardPosition();
    }
  });
},
// ...
beforeDestroy() {
  interact(this.$refs.interactElement).unset();
},
// ...
methods: {
  interactSetPosition(coordinates) { 
    const { x = 0, y = 0 } = coordinates;
    this.interactPosition = {x, y };
  },
  
  resetCardPosition() {
    this.interactSetPosition({ x: 0, y: 0 });
  },
},
// ...

We need to add one thing in our template to make this work. As our transformString computed property returns a string, we need to apply it to the card component. We do that by binding to the :style attribute and then passing the string to the transform property.

<template>
  <div 
    class="card"
    :class="{ isCurrent: isCurrent }"
    :style="{ transform: transformString }"
  >
    <h3 class="cardTitle">{{ card.keyword }}</h3>
  </div>
</template>

With that done, we have created interaction with our card — we can drag it around!

You may have noticed that the behavior isn’t very natural, specifically when we drag the card and release it. The card immediately returns to its original position, but it would be more natural if the card would go back to initial position with animation to smooth the transition.

That’s where transition comes into play! But adding it to our card introduces another issue: there’s a lag in the card following as it follows the cursor because transition is applied to the element at all times. We only want it applied when the drag ends. We can do that by binding one more class (isAnimating) to the component.

<template>
  <div
    class="card"
    :class="{
      isAnimating: isInteractAnimating,
      isCurrent: isCurrent
    }"
  >
    <h3 class="cardTitle">{{ card.keyword }}</h3>
  </div>
</template>

We can add and remove the animation class by changing the isInteractAnimating property.

The animation effect should be applied initially and we do that by setting our property in data.

In the mounted hook where we initialize interact.js, we use one more interact hook (onstart) and change the value of isInteractAnimating to false so that the animation is disabled when the during the drag.

We’ll enable the animation again in the onend hook, and that will make our card animate smoothly to its original position when we release it from the drag.

We also need to update transformString computed property and add a guard to recalculate and return a string only when we are dragging the card.

data() {
  return {
  // ...
  isInteractAnimating: true,
  // ...
  };
},

computed: {
  transformString() {
    if (!this.isInteractAnimating) {
      const { x, y } = this.interactPosition;
      return `translate3D(${x}px, ${y}px, 0)`;
    }
    return null;
  }
},

mounted() {
  const element = this.$refs.interactElement;
  interact(element).draggable({
    onstart: () => {
      this.isInteractAnimating = false;
    },
    // ...
    onend: () => {
      this.isInteractAnimating = true;
    },
  });
},

Now things are starting to look nice!

Our card stack is ready for second set of interactions. We can drag the card around, but nothing is actually happening — the card is always coming back to its original place, but there is no way to get to the second card.

This will change when we add logic that allows the user to accept and rejecting cards.

Step 4: Detect when the card is accepted, rejected, or skipped

The card has three types of interactions:

• Accept card (on swipe right)
• Reject card (on swipe left)
• Skip card (on swipe down)

We need to find a place where we can detect if the card was dragged from its initial position. We also want to be sure that this check will happen only when we finish dragging the card so the interactions do not conflict with the animation we just finished.

We used that place earlier smooth the transition during animation — it’s the onend hook provided by the interact.draggable method.

Let’s jump into the code.

First, we need to store our threshold values. Those values are the distances as the card is dragged from its original position and allows us to determine if the card should be accepted, rejected, or skipped. We use X axis for right (accept) and left (reject), then use the Y axis for downward movement (skip).

We also set coordinates where we want to place a card after it gets accepted, rejected or skipped (coordinates out of user’s sight).

Since those values will not change, we will keep them in the static property of our component, which can be accessed with this.$options.static.interactYThreshold.

export default {
  static: {
    interactYThreshold: 150,
    interactXThreshold: 100
  },

We need to check if any of our thresholds were met in our onend hook and then fire the appropriate method that happened. If no threshold is met, then we reset the card to its initial position.

mounted() {
  const element = this.$refs.interactElement;
  interact(element).draggable({
    onstart: () => {...},
    onmove: () => {...},
    onend: () => {
      const { x, y } = this.interactPosition;
      const { interactXThreshold, interactYThreshold } = this.$options.static;
      this.isInteractAnimating = true;
          
      if (x > interactXThreshold) this.playCard(ACCEPT_CARD);
      else if (x < -interactXThreshold) this.playCard(REJECT_CARD);
      else if (y > interactYThreshold) this.playCard(SKIP_CARD);
      else this.resetCardPosition();
    }
  });
}

OK, now we need to create a playCard method that’s responsible for handling those interactive actions.

Step 5: Establish the logic to accept, reject, and skip cards

We will create a method that accepts a parameter telling us the user’s intended action. Depending on that parameter, we will set the final position of the current card and emit the accept, reject, or skip event. Let’s go step by step.

First, our playCard method will remove the card element from the Interactable object so that it stops tracking drag events. We do that by using interact(target).unset().
Secondly, we set the final position of the active card depending on the user’s intention. That new position allows us to animate the card and remove it from the user’s view.

Next, we emit an event up to the parent component so we can deal with our cards (e.g. change the current card, load more cards, shuffle the cards, etc.). We want to follow the DDAU principle that states a component should refrain from mutating data it doesn’t own. Since our cards are passed down to our component, it should emit an event up to the place from where those cards come.

Lastly, we hide the card that was just played and add a timeout that allow the card to animate out of view.

methods: {
  playCard(interaction) {
    const {
      interactOutOfSightXCoordinate,
      interactOutOfSightYCoordinate,
    } = this.$options.static;

    this.interactUnsetElement();

    switch (interaction) {
      case ACCEPT_CARD:
        this.interactSetPosition({
          x: interactOutOfSightXCoordinate,
        });
        this.$emit(ACCEPT_CARD);
        break;
      case REJECT_CARD:
        this.interactSetPosition({
          x: -interactOutOfSightXCoordinate,
        });
        this.$emit(REJECT_CARD);
        break;
      case SKIP_CARD:
        this.interactSetPosition({
          y: interactOutOfSightYCoordinate
        });
        this.$emit(SKIP_CARD);
        break;
    }

    this.hideCard();
  },

  hideCard() {
    setTimeout(() => {
      this.isShowing = false;
      this.$emit("hideCard", this.card);
    }, 300);
  },
  
  interactUnsetElement() {
    interact(this.$refs.interactElement).unset();
    this.interactDragged = true;
  },
}

And, there we go!

Summary

Let’s recap what we just accomplished:

• First we created a component for a single card.
• Next we created another component that renders the cards in a stack.
• Thirdly, we implemented interact.js to allow interactive dragging.
• Then we detected when the user wants takes an action with the current card.
• Finally, we established the to handle those actions.

Phew, we covered a lot! Hopefully this gives you both a new trick in your toolbox as well as a hands-on use case for Vue. And, if you’ve ever had to build something similar, please share in the comments because it would be neat to compare notes.

The post Swipeable card stack using Vue.js and interact.js appeared first on CSS-Tricks.