Photo by Markus Winkler on Unsplash

This post will guide to add “Copy” button to a html element. It will work for all of type of frontend frameworks(including SSR and JAM-stack); core idea will be same but implementation may differ across frameworks.

Lets start will the core logic i.e. copying a piece of text to clipboard.

That’s it !

This 1-liner will copy any piece of text from a webpage to clipboard. Its not limited to text though, you can copy any arbitrary data eg. images to clipboard. …


Photo by Markus Winkler on Unsplash

As we all know analytics is an essential part of any website. Google analytics is the best free tool out there. This article illustrate how google analytics can be added to a GridSome site.

I was trying to use this plugin, but it doesn’t work as expected. So, I had to add it manually. If you are stuck in same place or you want to customize the analytics on your website(beyond the plugin), follow along.

Create Universal tracking on Google analytics

Go to google Analytics

Navigate to Admin section (Click on small gear icon at bottom left) then “Create Property”


Photo by De an Sun on Unsplash

This article demonstrates a straightforward approach to Continuous deployment using GitHub Actions. It will work for every type of backend & frontend i.e. Nodejs, Ruby, Python, PHP, Vue, React, Angular etc. The approach is simple, free of cost & more importantly it can be used on production.

It’s an intermediate level article; for those who are manually deploying application to server but struggling to automate it. Also, basic knowledge of GitHub Actions is expected.

These are two major steps

  1. Deployment using SSH & GitHub
  2. Automate step 1

Deployment using SSH & GitHub

This is the normal deployment strategy i.e. …


This article will demonstrate how Instagram can be integrated with your system. Specifically, it explores a mechanism to show users’ Instagram posts on your app/website.

At time of writing this article, instafeed.js provides similar functionality. However, it depends on Heroku’s free service to refresh tokens. After Heroku updated its pricing policy, it kind of became expensive. This approach serves as self-hosted alternative.

Before going further, please head over to Facebook Developers page and go through the overview. It will be easier to grasp concepts further.

The overall process boils down to 4 steps:

  1. Create a Facebook app
  2. Get access tokens


Photo by Kelvin Ang on Unsplash

If your job involves maintaining server, you are likely to stumble onto this issue sooner or later. Unlike CPU load, high traffic etc. I found this issue harder to track as you need to go to OS level and check it manually. Moreover, the hosting providers don’t provide alarms for “server running out of space” events.

Things mentioned on the post are related to AWS ec2(ubuntu 20) with node(express) server managed by pm2.

This post is written as a future reference for myself and other fellow developers struggling in this area.

Scenario

Few days ago one of the Ec2 server I…


Photo by Firmbee.com on Unsplash

OTP verification has become a common feature of modern web and mobile applications. Whether it be user registration, multi-factor authentication or password change mechanism, OTP verification seems to be the perfect choice. Also, SMS or phone call verifications are considered more secure & reliable than email links.

In this article, I will explain Vonage’s Verification API integrated with Node.js (Express) server. It also provides an OTP feature, so you don’t have to reinvent the wheel every time. You can check more info here.

Let’s begin with a very basic express server.

The server.js file contains a very basic web…


Elastic Search always returns top 10 results by default. To get large volume of results, we need to user Search API.

The Search API provides from and size parameters that can be used to retrieve predefined amount of data. But using from and size should be avoided to request very large volume at once. Reason: Search request works with multiple shards storing its requested hits into memory which leads into high memory + CPU usage.

Moreover Elastic Search has set the maximum limit of 10,000 hits to paginate using size and from parameters. It's actually a safeguard mechanism of ES…


Best way to use filters in Vue.js

A Vue.js filter is simply a function that takes an input, processes it and gives an output. Inside a Vue template it is written after a single pipe and can also be followed by its arguments.


Vuejs + poeditor

Internationalization is a basic feature for web apps having users from different corners of the world. vue-i18n makes the process very smooth to implement internationalization into VueJs web apps. Poeditor is another tool that provides a smooth translation workflow.

Recently I ‘d a chance to migrate the Vue application (with local translation data) to make it work with Poeditor’s API.

In case you don’t know about poeditor. It provides a smooth translation workflow. And also

  • Translators can manage your translations
  • It gives simple REST API to access the data

For more details visit poeditor.

The technique mentioned in this article…


In this article, I will build a simple snake game in JavaScript from scratch. The player can control the snake by keyboard. Whenever the snake collides with food(a red circle), it gets 1 point and food moves to a random position.

You can view the finished application here. And the source code is here.

This article originally appeared 4 years ago at

It was re-written for the demonstration of an awesome tool RamroCode. Hope you like the beautiful code snippets 🙂

Demo

The requirements for this application are basic knowledge of HTML, JavaScript, and some prior knowledge of HTML canvas.

The…

Bibhuti Poudyal

Web Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store