DEV Community: Kamil

What a media placeholder is and how to implement it?

Kamil — Fri, 29 Jul 2022 19:52:06 +0000

A media placeholder is a dummy (placeholder) for a video or image. Your media file will be loaded instead of this stub. In this article, we will consider the ways how to create a simple placeholder with a background color, and then with a blurry background image.

What is it for?

The lack of media placeholder, while reading your article from mobile devices with a slow Internet connection, can become a real problem. Users can start reading, but at a certain moment the image which will break the entire layout of the site will load, and the read text will sharply be moved down.

To analyze how your page loads with a slow internet connection, use Chrome dev tools. Network tab -> Throttling and set Slow 3G. So you can simulate a slow internet connection.

If you use the image not in the <img> tag, you can implement the placeholder just by setting two image URLs for the CSS: background-image, At the first place, a small image which will be loaded first, then the original large image:

#image {
  background-image: url("small-image.png"), url("big-image.png");
}

However, you should remember that, since the images are not inserted via the <img> tag, it affects the semantics. Your images will not be properly indexed by search engines.

Implementation

Let's look at the most popular placeholder implementation. To create a media placeholder, we need to create a block element with the same dimensions as the image to be uploaded later. So, we could see this element first, and then load the image without disturbing the overall layout and without moving the text. This is a kind of “spacer”, into which the picture will be loaded. To make such a wrapper is very simple:

<div class="placeholder">
  <img src="url" />
</div>

.placeholder {
  width: 600px;
  height: 300px;
  background-color: darkseagreen;
}

But on real websites, it is often necessary to make an image occupy all the entire available width, but retain its proportions regardless of screen resolution. So that, when viewed on devices with different resolutions, the image should occupy a certain width and, based on the width, be proportionally stretched to the desired height. An example:

Please note, that no matter what width the image takes, it will always maintain its aspect ratio and have the desired height. That is why all you need to know to implement this technique is the aspect ratio of your image.

Stretch blocks can be easily implemented using CSS. You need to set relative position to the wrapper block, absolute position to image and use property: padding-bottom: height/width

For example, if your photo has a width of 900px and a height of 600px, then use this ratio: 3:2 = 2/3 = 66.66%

Another examples:
4:3 = 3/4 = 75% (800px × 600px)
1:1 = 1/1 = 100% (Square image e.g. 500px × 500px)

.placeholder {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 66.66%;
  background-color: darkseagreen;
}

.placeholder img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

You could also use CSS property calc: padding-bottom: calc(width/height)

As a result, we will have something like this:

I intentionally made a smooth animation. In real conditions, the picture is usually loaded not smoothly.

The image and its parent block are stretched and shrink to any width and at the same time, they always have the height we need.

But of course, it would be much nicer to see a preview image before the original big picture will be loaded.

Important thing. The preview image placeholder has to be very small-sized and has to has the same aspect ratio as the original big image.

The smaller the image size, the faster it will be loaded. An example of this article small image weighs 822 bytes and has size: 28px × 19px. It's enough to make a nice background preview while the user waiting for a big image. It looks like this:

<head>
  <style>
    .placeholder {
      display: block;
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 66.66%;
    }
    .placeholder img {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
    }
    .placeholder .small-img {
      background-size: cover;
      filter: blur(10px);
    }
  </style>
</head>
<body>
  <picture class="placeholder">
    <img src="url of the small image" class="small-img">
    <img src="url of the big image" class="big-img">
  </picture>
</body>

In example we blurred photo by CSS property filter: blur(10px). The value of blur property can be any unit, for example, it can be percent. The larger the value, the greater the blur. Negative numbers are not allowed. CSS property filter is badly supported by browsers, however, this task justifies using this property because users with the old browser just will see not blurred preview images.

You also need to remember that these styles for the wrapper should be loaded very first. So It’s appropriate to use a style distribution method known as critical CSS. I.e, the most important styles, that are responsible for the first rendering of the page layout, will not be loaded in a separate file. They should be inserted inside the <head> tag.

Also, small gotchas were detected during implementation. When applying the filter: blur() its blur extends beyond the boundaries of the block. It looks like this:

To fix it you could simply set overflow: hidden to the wrapper block. You can also come across a solution by adding negative margins. For example, margin: -10px. The value of the margin should be equal to the blur width.

Of course, the best solution would be to use back-end libraries to automatically generate small preview images with the same aspect ratio.

And don't forget about progressive images. In most cases, you can use just them.

How to remember the ways of rounding a number to an integer?

Kamil — Fri, 29 Jul 2022 16:00:27 +0000

There are 4 methods of the global Math object, which are used for rounding numbers to an integer: Math.floor(), Math.ceil(), Math.round() and Math.trunc()

The article provides visual examples for better memorization. Let's start with the most (in my opinion) logical ones: Math.floor() and Math.ceil() which have very descriptive names. The meaning of these words already gives us a huge clue for remembering the way each method works.

Math.floor() - rounds to a smaller integer number. It means, that we always press the number to the floor.

Math.ceil() - rounds to a larger number.
We pull the number to the ceiling.

In everyday life, we are used to round numbers based on the proximity of a fractional value to the whole. Proximity for us is determined by half of the number. That is, if the fractional value of the number has exceeded 0.5, then we can say that it is about 1. Half in our case is a barrier that can be used to round up a number to a larger one.

Just for this more humanly correct rounding, JS has the next tool for rounding numbers Math.round().

But pay special attention to the negative and positive half. If we have reached exactly half the positive number, then we will round the number to the next larger number on the scale to the right. We will also do the same with a negative number. We will round it to a larger number. Math.round(-2.5) // -2. That is, seeing half of our number we will move to the right (to a larger number).

And the last, incredibly easy to understand method: Math.trunc(). The method simply returns an integer, discarding the fractional part. You can simply imagine that the number is not rounded, but loses its fractional part and you will not be mistaken.

Math.trunc() does not work in browsers prior to IE10. But there is a very easy polyfill.

if (!Math.trunc) {
  Math.trunc = function(v) {
    v = +v;
    return (v - v % 1)  (!isFinite(v)  v === 0 ? v : v < 0 ? -0 : 0);
  };
}

You can also use the prototype methods of Number: toFixed() and toPrecision(), but remember that these are not methods of the built-in Math object and they return a string, not a number.

How to use Composition API instead of Vuex in Vue3 and also in Vue2.

Kamil — Wed, 26 Jan 2022 00:54:28 +0000

Why?

Often we develop some components that have access to a global state. For example, there are many separate components to filter some items, but these items have to be consistent. Or your application has user info, that has to use in different places. So, the main reason for using a global store (shareable reactive object) is just to apply more flexibility to your project.

Nowadays, Vuex has solved this problem very well. And it can do it today. In this article, we just discuss a new alternative and an interesting applying of a new composition-api.

Vuex

Before we dive into the Composition API let me to remind you about two main points of Vuex (and other Flux libraries that allow us to use shareable state in our app)

Our store has to be reactive. It means all templates of each component that use some variable from store has to update its template after variable update in store.
The only way of mutating shareable store is to execute mutations, some functions that work with the store. It's important for Vuex because it allows tracking all changes. Read more in docs

Composition API

Now, let's take a look at new features in Vue3 Composition API. There are tools to create real reactive objects like a Vuex store

There are ref and reactive. ref returns wrapped reactive object with value field. It's good for some alone variables. But reactive method returns a reactive object. And we can use it exactly like a state in Vuex. Actually, when you return an object from data() in your component, internally Vue uses the reactive method to make this object reactive.

Now we also can use it directly. Just import the reactive method from vue3 or if you still use Vue2 from a separate npm package @vue/composition-api. Yes, as you could see from title of the article we can already use it even in Vue2.

Npm package: @vue/composition-api

If you don't use Vue3 install @vue/composition-api as a plugin globally.

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

Now we can use a reactive function in any component, but I advise you to create a separate file for our store.

If you already use Vue3 then just import reactive directly from vue. When you migrate to Vue3 you can just replace @vue/composition-api to vue

The whole complete project of example that is used in this article is in Sandbox

Vue2Vue3
// store.js
import { reactive } from '@vue/composition-api'

Creating a reactive store

Let's create a new reactive store for searching by parameters. They will share across whole application and we can use it in any component.

// store.js
import { reactive } from "vue"

const state = reactive({
  keyWord: ""
})

export const store = {
  state
}

Actually, we can use it right away in our components. Just add the store in each component that has to use the reactive object with property keyWord. For example, I made two identical components and place them into one another component. This is code for ComponentA and ComponentB (They have the same code)

<template>
  <div>
    <input v-model="store.state.keyWord" />
  </div>
</template>

<script>
import { store } from "../store";

export default {
  data() {
    return {
      store,
    };
  },
};
</script>

We implemented the first point of Vuex, we have a reactive store and each template updates when something changes in the global store. You can play with it on the Sandbox.

One-Way Data Flow

As a Vue developer, you probably know that we have to avoid direct mutation of props. One-way Data Flow prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand (from Vue Docs) One-Way Data Flow in Vue Doc

Also, there is the second point of Vuex ideology: The only way of mutating sharable store is to execute mutations.

And, by the way, you should understand, we can work with our store now only because we import whole reactive store object and in data of our components it passes by link! We can't do the same "reactive" things with only one property. For instance, we can't do something like that:

data() {
  return {
    keyWord: store.state.keyWord
  }
}

Now it's passed by value, and by the way, when we do this, we access the value and we can use it like value by default. But we can't change it in store. We have to change store.state.keyWord because the store is an object and it's passed by link. That's why our examples worked. You can also do the same trick with props, you can wrap it into an object and pass the whole object via props, BUT Vue will show you a warning about avoiding direct mutation props.

There are no warnings for changing reactive objects from another component. But I think according to One-Way Data Flow ideology and Vuex mutations we should apply this methodology to our examples. Let's use the best practices.

Mutations

So, let's create a special function that can change the state when we invoke this function. Add function changeKeyWord into the store.js file and add it into an export statement at the bottom of the file.

// store.js
import { reactive } from "vue"

const state = reactive({
  keyWord: ""
})

function changeKeyWord(value) {
  state.keyWord = value
}

export const store = {
  state,
  changeKeyWord
}

Now we can use the changeKeyWord function in our components.

// ComponentA.vue & ComponentB.vue
<template>
  <div>
    <input :value="keyWord" @input="changeKeyWord" />
  </div>
</template>

<script>
import { store } from "../store";

export default {
  data() {
    return {
      store,
      keyWord: store.state.keyWord,
    };
  },
  methods: {
    changeKeyWord(evt) {
      this.store.changeKeyWord(evt.target.value);
    },
  },
};
</script>

Now we have a local keyWord value in data from the store and we can change the value in the store by invoking the changeKeyWord function like Mutation in Vuex. But as you can notice, we can still change keyWord directly.

There is a good feature to disable direct mutation of our state. Special readonly function. It is also in composition-api. So we can just import it and use it in our store file.

// store.js
import { reactive, readonly } from "vue"

const state = reactive({
  keyWord: ""
})

function changeKeyWord(value) {
  state.keyWord = value
}

export const store = readonly({
  state,
  changeKeyWord
})

Getters

Getters in Vuex are like computed properties in Vue. And composition-api allows us to use computed functionality directly. Just import it into our store.js file and create a computed function like a getter for our store.

// store.js
import { reactive, readonly, computed } from "vue";

const state = reactive({
  keyWord: "good"
});

function changeKeyWord(value) {
  state.keyWord = value;
}

const upperCasedKeyWord = computed(() => state.keyWord.toUpperCase());

export const store = readonly({
  state,
  changeKeyWord,
  upperCasedKeyWord
});

Provide/Inject

We can use provide and inject to use store in all components without importing it in each file.

Just add this to your main component, usually, it's called App.js.

// App.js
import { store } from "./store";

export default {
  provide: {
    store
  }
}

In our ComponentA.vue and ComponentB.vue remove import store and just add an inject

// ComponentA.vue & ComponentB.vue
<script>
export default {
  inject: ["store"],
  methods: {
    changeKeyWord(evt) {
      this.store.changeKeyWord(evt.target.value)
    }
  }
}
</script>

The Whole complete project of example that is used in this article is in Sandbox

Conclusion

Composition API is a cool feature that can help us in different cases. It's flexible and powerful. But it doesn't mean that you have to replace Vuex with them. It's just a new option. Remember, Vuex is a time-tested plugin in the Vue ecosystem and it has many ready to use solutions. For example, there is an interesting plugin: vuex-history. It implements undo/redo functionality. Also, vue dev tools support Vuex. So, think twice about what to use.

Thanks a lot for reading. Please subscribe to my newsletter on this blog and on my youtube channel.

I was inspired by this article on dev.to that is written by Nonso Chukwuogor.

Read full article on my personal blog: https://www.kyle-ocean.dev/composition-api-instead-of-vuex-in-vue3-and-also-vue2