Sign in

Those “Click to Copy” buttons are voodoo magic, don’t you think so?

Also watch this on my YouTube Channel:

The mysterious magical click to copy button. Image by Author.

A lot of modern websites have this handy little button that conveniently copies content to our clipboard. I’ve always wondered how does it work behind the scene. Let’s take a deep look at it and see how we can achieve this.

Setting up

We will set up some HTML elements in the DOM just for demonstration. There are 2 elements, one is the content that we will copy to our clipboard, and the other one is the ‘click to copy’ button.


In short, Callback is a function that is passed to another function.

Also, view this tutorial on my YouTube Channel:

Callback hell is a horrible territory. Image by Author.

Callback functions exist everywhere in JavaScript. I’m pretty sure you have seen one of them around already.

// the 2nd argument of the addEventListener() function accepts a callback function, which is triggered when the specified event happens in the target DOM element// In this case, the callback function will run whenever the user click on anywhere in the DOMwindow.addEventListener('click', function(event){});

Why do we even need a callback function?

Callback function allows developers to define their own custom behaviour on top of some existing function.

A function can return all kinds of data. However, did you also know that a function can also return another function? 🤯

Watch this tutorial on my YouTube Channel:

Photo by Pascal Habermann on Unsplash

Here’s a quick example:

function main(){
return function(){

Introducing Higher Order Function

The notion of Higher Order Function is one of the key pillars in functional programming.

In simple terms, a Higher Order Function is a function that either:

  1. Returns another function.
  2. Takes in another function as its argument.

Or do both.

Now you might be wondering, what the heck does this mean? Why is it useful?

In general, it helps us…

The this keyword is a peculiar one, and one that confuses a lot of developer.

This lesson is also available on YouTube:

Photo by Seb Mooze on Unsplash

In summary, the this keyword represents the calling context. And what do I mean by that? It means the calling context is object that calls the function. Let's look at a few examples. I promise you it will be crystal clear after reading this article.


Scenario 1: The this keyword in an object's method.

const car = {
colour: "red",
brand: "abc",
drive: function(){
}; // expect the car object.

Our car object here has a drive method. …

The difference between ‘var’, ‘let’, and ‘const’ in JavaScript — a detailed explanation.

Watch this tutorial on my YouTube channel!

Why not use ‘var’? This may be the question that you might be asking when you see the title of this article. That’s right! The var keyword might be one of the most painful features of the language. Over the years, with the introduction of the let and const keywords in ES6, people have been in love with the let and const keywords ever since. Let’s take a look at the whys.

Photo by Sammy Williams on Unsplash

Understanding Scope

Before we continue, let’s take a brief look at what is actually a scope.

In general, a scope can be…

You’ve got a lot of files and nested files in a directory. However loading them 1 by 1 using require is simply too painful. Life is already tough, so please don’t do that to yourself.

In this tutorial, I will show you a few ways to achieve this.

Nah, we have better things to do in life than this.

Option 1: Using the infamous PHP iterator classes

PHP is kind enough to offer us the iterator classes to work with iterables. However, the APIs are quite low level. Let’s take a look at the code:

What is an iterator anyway?

An iterator is an object to loop through a series of items. You can think of iterator as the OOP way of looping.

Laravel provides a nice and convenient API for us to define our app routes. There are 2 ways to define a route group: the array syntax via group() or the method syntax. Personally I love the array syntax by calling the group() method provided by the Route facade. However using it is not as straightforward as one may think, and primary reason for that is because it is undocumented at the time of writing this article.

Photo by Oscar van Gend on Unsplash

So What is a Route Group?

Route group essentially helps us to group multiple routes together under the same middleware, prefix, name or namespace. This is especially convenient when we…

So you spent quite some time crafting your awesome React App 🎊, and it is time to publish it and share the love with everyone else. Github Pages is a free static site hosting service that works quite well with most use cases. Let’s learn how we can deploy a React app for free on Github pages!

Photo by Roman Synkevych on Unsplash


  • Git
  • Bash shell


  1. Copy the script below and paste it in your project root, or wherever your package.json is.
  2. Update the placeholders:
    a) to your domain, if you have one. Make sure to configure your domain’s DNS beforehand. …

JSON is the de-factor choice of transmitting data across the internet in the modern day. Its easy-to-read nature is pleasing for both human and computer.

When we are sending API requests we usually use JSON formatted string as our request payload. However, it has its flaws when it comes to sending data, i.e. it can only send data that can be converted into string. Binary data like images, PDF files can’t be sent with JSON.

So how do we resolve this?

The answer is: use FormData .

Form Data is an alternative way in JavaScript to send data in API…

Getting authentication right is not a straightforward task. Thankfully, Laravel has released an official authentication package called Laravel Fortify that took care of everything about authentication for us.

Photo by Micah Williams on Unsplash

In summary, Fortify mainly consisted of 7 components:

  1. Login
  2. Logout
  3. Password confirmation
  4. Registration
  5. Password reset
  6. Email Verification
  7. 2-Factor Authentication

Laravel Fortify has preloaded a lot of API endpoints for us. Below is a brief overview on the endpoints that are available to us.


GET /login

Returns the auth.login view.

POST /login

Request body:

  • email(string) — configurable in config/fortify.php
  • password(string)
  • remember(boolean)


On success, redirect to home route defined in fortify…

Sam Ngu

Web Development. . Follow me on Youtube:

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