Monthly Archives: October 2018

Vue Countdown Timer Component

At the end of this post you’ll learn how to implement a basic vue countdown timer component.

In a web project I built I needed to show the user a countdown timer until the UI/options will expire.

So I ended up building a quite simple Vue Component that can be integrated in any app and that can be easily extended for any needs.

The template of the Vue Countdown Timer Component looks like this.

I’ve also used Bootstrap class to make the timer red when there’s no more time left.

        <p :class="{'text-danger': total<=0}">

The controller of the component:

export default {
    props: {
        time: {
            type: Number,
            default: 0
    data: function () {
        return {
            total: '',
            minutes: '--',
            seconds: '--',
            interval: 0
    mounted: function () { = parseInt(this.time, 10)
        this.interval = setInterval(() => {
        }, 1000)
    methods: {
        str_pad_left: function (string, pad, length) {
            return (new Array(length+1).join(pad)+string).slice(-length)
        tick: function () {
            var minutes = Math.floor( / 60)
            var seconds = - minutes * 60
            this.minutes = this.str_pad_left(minutes, '0', 2)
            this.seconds = this.str_pad_left(seconds, '0', 2)

            if ( <= 0) {

   -= 1

What it does:
The props defines which parameter to receive from the parent component. In our case it represents the number of seconds that the timer will start from.

The data contains properties required for showing the current state of the timer and for allowing us to control the interval handler.

When mounted, the component reads the time parameter and initializes the interval at which it will update the progress.

Tick method is executed as defined in the mounted interval. It will generate pretty minutes and seconds padded with ‘0’.

When the total seconds get to 0 we’ll also $emit an event. See my previous post for learning how to implement Observer Pattern in Vue.


Integrating the timer in our app is as easy as:

<Timer :time="300" />

That’s all. Our Vue countdown timer components is ready.

Vue Observer Pattern Implementation

Learn how to implement Vue Observer Pattern in your web app.

Probably one of my favorite design patterns is the Observer Pattern.
This design pattern allows you to subscribe and emit events from components of your app.


Different web frameworks offer different implementation of the Observer app.

Lucky me, implementing Observer in VueJS is piece of cake.

Actually the Observer in VueJS could be another Vue instance that we pass or make accessible by all our components.

import Vue from 'vue'
// create a new Bus which will handle all our events
const EventBus = new Vue()
// We need to assign the bus to the root component
Vue.prototype.$bus = EventBus

That’s all needed for the setup part.

You can now use this.$bus in all your Vue Components to subscribe and emit and dispatch events.

// some random component emits events
methods: {
    logout: function() {
        this.$bus.$emit('Some_Event/name', user)
// some random component subscribes to the event
created: function() {
    this.$bus.$on('Some_Event/name', (data) => {

There are two possible ways of generating the events and it mostly depends on who we want to receive that event.

$emit – targeting whole app

The $emit method will trigger an event in the current instance.
This means that all subscribers will be notified of this event.

$dispatch – targeting parent components

The $dispatch method propagates the event up in the parent chain.
The first parent subscriber will stop the event from propagating further unless it returns true.

In my next post I’ll describe how to create a Countdown Timer Component in VueJS.

How to clear Docker machine on Windows

A few intensive hours building Docker containers quickly used up all the allocated space.

Deleting Docker images can be done using

docker images
docker rmi <IMAGE_ID> -f

Using -f to force deletion of images that are used in other containers that remain.

Deleting Docker containers:

docker ps
docker rm <CONTAINER_ID>

Easy right?

What if you got tens of images? Still easy.

Create a docker-rmi.bat and place the following contents

@echo off
FOR /f "tokens=*" %%i IN ('docker images --format "{{.ID}}"') DO docker rmi %%i

For only clearing the containers the solution is similar (docker-containers-rm.bat):

@echo off
FOR /f "tokens=*" %%i IN ('docker ps -aq') DO docker rm %%i

Run the .bat executables in CMD and you’re doney.

Thanks to daredude!