DEV Community: Paul Mercieca

Create Random Cards With Pure CSS

Paul Mercieca — Sun, 14 Mar 2021 10:07:57 +0000

There was no JavaScript, Sass, or other external scripts or preprocessors used in the development of these cards.

Every time you click on a card, it draws a different one; it may be a King of Hearts, an Ace of Spades, a 9 of diamonds, or any other card in a regular deck of cards.

HTML

<input type="checkbox" id="card_01" checked>
<label for="card_01">
  <div class="cardWrapper">
    <div class="cardRandom"></div>
  </div>
</label>
<input type="checkbox" id="card_02" checked>
<label for="card_02">
  <div class="cardWrapper">
    <div class="cardRandom"></div>
  </div>
</label>
<a href="https://uxdesign.cc/creating-randomness-with-pure-css-a990dafcd569" target="_blank" class="linkElement">Read <i>"Creating randomness with pure CSS"</i></a>

CSS

body {
  background-color: #ececec;
  transform-style: preserve-3d;
  perspective: 2000px;
  display: flex;
  justify-content: center;
}

label .cardWrapper {
  position: relative;
  height: 40vmin;
  width: calc(40vmin / 1.4);
  background-color: royalblue;
  background-image: repeating-linear-gradient(
      120deg,
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0.5) 1px,
      transparent 1px,
      transparent 60px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(255, 0, 0, 0.5),
      rgba(255, 0, 0, 0.5) 1px,
      transparent 1px,
      transparent 60px
    ),
    linear-gradient(
      60deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    ),
    linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    );
  background-size: 70px 120px;
  margin: calc(40vmin / 10);
  border-radius: calc(40vmin / 20);
  box-shadow: 0 calc(40vmin / 40) calc(40vmin / 10) 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  float: left;
  transition: transform 200ms linear, box-shadow 100ms linear;
  transform: rotateY(0deg);
}

input:checked + label .cardWrapper {
  transform: rotateY(180deg);
}

.cardRandom {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 1;
  cursor: pointer;
  transition: opacity 1ms linear 100ms;
}

.cardWrapper:hover {
  filter: brightness(0.98);
}

input:focus + label .cardWrapper {
  box-shadow: 0 0 calc(40vmin / 100) 0 rgba(0, 0, 0, 0.5);
}

input:checked + label .cardRandom {
  opacity: 0;
}

.cardRandom::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://assets.codepen.io/2722301/cards.jpg);
  background-size: cover;
  animation: randomCard 1000ms steps(51, end) infinite;
  animation-play-state: paused;
  transform: rotate(180deg);
}

input:checked + label .cardRandom::before {
  animation-play-state: running;
}

input {
  height: 0;
  width: 0;
  border: none;
  outline: none;
  display: none;
}

@keyframes randomCard {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.linkElement {
  position: absolute;
  bottom: -40px;
  font-family: sans-serif;
  color: #4069e1;
  text-decoration: none;
}

.linkElement:hover {
  filter: hue-rotate(-45deg);
}

First and foremost, there is no built-in “random” function in CSS, no Math.random() equivalent, and no way to generate a random number or color at all.

So what is happening here?

Since we don't have a random feature to regulate elements in CSS, they can't act randomly, but they can appear to act randomly by using an elaborate type of animation.

The cards in the preceding example animate quickly through the various states, and the user's click on each card pauses the animation, causing the card to flip at each of the various states.

The user can click on the cards at any time, but the animation is so fast that it serves as a random seed for our interaction; for example, these cards loop through all 52 states in less than one second.

This trick is particularly useful if you can conceal the mechanism itself, such as our flipped cards, since the consumer would never think to time it, unlike a slot machine, which can be pulled at precisely the right time.

Even if the user would try to time it, the animation between the different states is so fast it’s almost impossible to time correctly.

HTML

<input type="checkbox">

CSS

input::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: red;
  cursor: pointer;
  animation: randomAnim 1000ms steps(1, end) infinite;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}
@keyframes randomAnim {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
}

input:checked::after {
  animation-play-state: paused;
}

input {
  height: 0;
  width: 0;
  border: none;
  outline: none;
}

Why using random in pure CSS?

This way of randomizing has a few key advantages:

it’s fun and whimsical.
As a CSS developer, you don’t always have access to the JavaScript code and using this trick, you don’t have to.
It’s not a well-known method, which means neither your teammates nor your users will understand what’s going on, users won’t be able to game this system as easily and as a bonus — you can drive other developers in your team crazy trying to debug it.

What’s Coming To VueX

Paul Mercieca — Wed, 10 Mar 2021 09:20:14 +0000

Quick summary:

Vuex is a state management pattern + library for Vue. js applications. It serves as a centralised store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

The next version of Vuex 4, is making its way through the final steps before officially releasing. This release will bring full compatibility with Vue 3, but doesn’t add new features. While Vuex has always been a powerful solution, and the first choice for many developers for state management in Vue, some developers had hoped to see more workflow issues addressed.

With the advent of Vue 3 and it’s composition API , people have been looking into hand-built simple alternatives. For example, You Might Not Need Vuex demonstrates a relatively simple, yet flexible and robust pattern for using the composition API along with provide/inject to create shared state stores. This and other alternatives should only be used in smaller applications because they lack all those things that aren’t directly about the code: community support, documentation, conventions, good Nuxt integrations, and developer tools.

Defining a Store

Before we can do anything with a Vuex store, we need to define one. In Vuex 4, a store definition will look like this:

import { createStore } from 'vuex'

export const counterStore = createStore({
  state: {
    count: 0
  },

  getters: {
    double (state) {
      return state.count * 2
    }
  },

  mutations: {
    increment (state) {
      state.count++
    }
  },

  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Each store has four parts: state stores the data, getters give you computed state, mutations are used to mutate the state, and actions are the methods that are called from outside the store to accomplish anything related to the store. Usually, actions don’t just commit a mutation as this example shows. Instead, they are used to do asynchronous tasks because mutations must be synchronous or they just implement more complicated or multi-step functionality.

import { defineStore } from 'vuex'

export const counterStore = defineStore({
  name: 'counter',

  state() {
    return { count: 0 }
  },

  getters: {
    double () {
      return this.count * 2
    }
  },

  actions: {
    increment () {
      this.count++
    }
  }
})

First, instead of createStore, we use defineStore. This difference is negligible, but it’s there for semantic reasons, which we’ll go over later. Next, we need to provide a name for the store, which we didn’t need before. In the past, modules got their own name, but they weren’t provided by the module itself; they were just the property name they were assigned to by the parent store that added them. Now, there are no modules. Instead, each module will be a separate store and have a name.

After that, we need to make state a function that returns the initial state instead of just setting it to the initial state. This is similar to the data option on components. We write getters very similar to the way we did in Vuex 4, but instead of using the state as a parameter for each getter, you can just use this to get to the state. In the same way, actions don’t need to worry about a context object being passed in: they can just use this to access everything. Finally, there are no mutations. Instead, mutations are combined with actions.

Initiate the Store

In Vuex 4, things have changed from Vuex 3, but I’ll just look at v4 to keep things from getting out of hand. In v4, when you called createStore, you already instantiated it. You can then just use it in your app, either via app.use or directly:

import { createApp } from 'vue'
import App from './App.vue' // Your root component
import store from './store' // The store definition from earlier

const app = createApp(App)

app.use(store)
app.mount('#app')

// Now all your components can access it via `this.$store`
// Or you can use in composition components with `useStore()`

// -----------------------------------------------

// Or use directly... this is generally discouraged
import store from './store'

store.state.count // -> 0
store.commit('increment')
store.dispatch('increment')
store.getters.double // -> 4

This is one thing that Vuex 5 makes a bit more complicated than in v4. Each app now can get a separate instance of Vuex, which makes sure that each app can have separate instances of the same stores without sharing data between them. You can share an instance of Vuex if you want to share instances of stores between apps.

import { createApp } from 'vue'
import { createVuex } from 'vuex'
import App from './App.vue' // Your root component

const app = createApp(App)
const vuex = createVuex() // create instance of Vuex

app.use(vuex) // use the instance
app.mount('#app')

Now all of your components have access to the Vuex instance. Instead of giving your store(s) definition directly, you then import them into the components you want to use them in and use the Vuex instance to instantiate and register them:

import { defineComponent } from 'vue'
import store from './store'

export default defineComponent({
  name: 'App',

  computed: {
    counter () {
      return this.$vuex.store(store)
    }
  }
})

Calling $vuex.store, instantiates and registers the store in the Vuex instance. From that point on, any time you use $vuex.store on that store, it’ll give you back the already instantiated store instead of instantiating it again. You can call the store method straight on an instance of Vuex created by createVuex().
Now your store is accessible on that component via this.counter. If you’re using the composition API for your component, you can use useStore instead of this.$vuex.store:

import { defineComponent } from 'vue'
import { useStore } from 'vuex' // import useStore
import store from './store'

export default defineComponent({
  setup () {
    const counter = useStore(store)

    return { counter }
  }
})

Use the Store

Here’s what it looks like to use a store in Vuex 4.

store.state.count            // Access State
store.getters.double         // Access Getters
store.commit('increment')    // Mutate State
store.dispatch('increment')  // Run Actions

State, getters, mutations, and actions are all handled in different ways via different properties or methods. This has the advantage of explicitness, which I praised earlier, but this explicitness doesn’t really gain us anything.

Everything — the state, getters and actions — is available directly at the root of the store, making it simple to use with a lot less verbosity and practically removes all need for using mapState, mapGetters, mapActions and mapMutations for the options API.

Composing Stores

The final aspect of Vuex 5 we’ll look at today is composability. Vuex 5 doesn’t have namespaced modules that are all accessible from the single store. Each of those modules would be split into a completely separate store. In v4, the namespacing convolutes the whole thing, so you need to use the namespace in your commit and dispatch calls, use rootGetters and rootState and then work your way up into the namespaces you want to access getters and state from. Here’s how it works in Vuex 5:

// store/greeter.js
import { defineStore } from 'vuex'

export default defineStore({
  name: 'greeter',
  state () {
    return { greeting: 'Hello' }
  }
})

// store/counter.js
import { defineStore } from 'vuex'
import greeterStore from './greeter' // Import the store you want to interact with

export default defineStore({
  name: 'counter',

  // Then `use` the store
  use () {
    return { greeter: greeterStore }
  },

  state () {
    return { count: 0 }
  },

  getters: {
    greetingCount () {
      return `${this.greeter.greeting} ${this.count}' // access it from this.greeter
    }
  }
})

How To Use Styled-Components In React

Paul Mercieca — Mon, 08 Mar 2021 13:40:48 +0000

Styled components are a CSS-in-JS tool that bridges the gap between components and styling, offering numerous features to get you up and running in styling components in a functional and reusable way. In this article, you’ll learn the basics of styled components and how to properly apply them to your React applications. You should have worked on React previously before going through this tutorial.

At the core of CSS is the capability to target any HTML element — globally — no matter its position in the DOM tree. This can be a hindrance when used with components, because components demand, to a reasonable extent, colocation (i.e. keeping assets such as states and styling) closer to where they’re used (known as localisation).

In React’s own words, styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles.

Why Styled Components?

Apart from helping you to scope styles, styled components include the following features:

Automatic vendor prefixing: You can use standard CSS properties, and styled components will add vendor prefixes should they be needed.
Unique class names: Styled components are independent of each other, and you do not have to worry about their names because the library handles that for you.
Elimination of dead styles: Styled components remove unused styles, even if they’re declared in your code.

Installation

Installing styled components is easy. You can do it through a CDN or with a package manager such as Yarn… yarn add styled-components.

Our demo uses create-react-app.

Starting Out

Perhaps the first thing you’ll notice about styled components is their syntax, which can be daunting if you don’t understand the magic behind styled components. To put it briefly, styled components use JavaScript’s template literals to bridge the gap between components and styles. So, when you create a styled component, what you’re actually creating is a React component with styles. It looks like this:

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return <StyledButton> Login </StyledButton>;
}

Here, StyledButton is the styled component, and it will be rendered as an HTML button with the contained styles. styled is an internal utility method that transforms the styling from JavaScript into actual CSS.

In raw HTML and CSS, we would have this:

button {
  background-color: black;
  font-size: 32px;
  color: white;
}

<button> Login </button>

Adapting Based On Props

Styled components are functional, so we can easily style elements dynamically. Let’s assume we have two types of buttons on our page, one with a black background, and the other blue. We do not have to create two styled components for them; we can adapt their styling based on their props.

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    <div>
      <StyledButton bg="black">Button A</StyledButton>
      <StyledButton bg="blue">Button B</StyledButton>
    </div>
  )
}

Because StyledButton is a React component that accepts props, we can assign a different background color based on the existence or value of the bg prop.

You’ll notice, though, that we haven’t given our button a type. Let’s do that:

function Profile() {
  return (
    <>
      <StyledButton bg="black" type="button">
        Button A
      </StyledButton>
      <StyledButton bg="blue" type="submit" onClick={() => alert("clicked")}>
        Button B
      </StyledButton>
    </>
  );
}

Styled components can differentiate between the types of props they receive. They know that type is an HTML attribute, so they actually render <button type="button">Button A</button>, while using the bg prop in their own processing. Notice how we attached an event handler, too?

Speaking of attributes, an extended syntax lets us manage props using the attrs constructor. Check this out:

const StyledContainer = styled.section.attrs((props) => ({
  width: props.width || "100%",
  hasPadding: props.hasPadding || false,
}))`
  --container-padding: 20px;
  width: ${(props) => props.width}; // Falls back to 100%
  padding: ${(props) =>
    (props.hasPadding && "var(--container-padding)") || "none"};
`;

Notice how we don’t need a ternary when setting the width? That’s because we’ve already set a default for it with width: props.width || "100%",. Also, we used CSS custom properties because we can!