Forem: Keramot UL Islam

Career Growth tracker

Keramot UL Islam — Tue, 17 Oct 2023 07:38:33 +0000

CV or Resume is not just some words on a paper. But it's a journey that has been written.

So don't write your CV/Resume just before you apply somewhere.
You should start writing your CV after finishing school, and continuously update it. Update it for the rest of your life.

Yes, you should update it for the rest of your life, because it's not only for applying for a job. But it will continuously visualize your growth to yourself.

That's all it takes...
When you are writing the truth about yourself, and visualizing it to yourself, then you can see that you don't have many things to write and so you feel helpless...

Those feelings will continuously kick on your back and you will start running, and you will become hungry to achieve the next thing, then the next, next thing.

My learning from creating tools for developers

Keramot UL Islam — Fri, 08 Oct 2021 10:55:00 +0000

Once you cross the beginner's level as a developer, some questions should start arising in your head...

How does a developer think?
Why does he need that xyz tool?
How does a tool solve a problem?
What's happening behind the scenes in that xyz tool?
How to think in a generic/global way from a problem-solving perspective?

Wait, don't Google these questions, because these are kinda questions where you need to realize the answer, you need to feel the answer.

So, what's the process, how will we know the answers?
For me the answer is "creating open-source developers tools". I mean, creating open-source tools that will be used by other developers. When you start creating developer tools, your brain starts adopting millions of developers' thought processes. It's a journey where you'll learn the answers to those questions. But if you want to know more than those answers then you need to create multiple personalities in you.
Which are:
=> A problem solver,
=> An observer,
=> A person who has Childish perspective.

Dev Tools developed by me

BD API
LocalDB
These projects are managed by my GitHub organization. Feel free to contribute on these open-source projects on CodesVault

Feeling positive energy, huh?
Now here's a trap. When you want to create a dev tool, lots of ideas will come to your brain. You will peck the most complex one and then after doing some google search, you will know that those types of tools already exist in many ways.
Then after repeating this process for multiple times you'll lose that positive energy :(

So, the hack is don't find unique, complex ideas. Find the idea that sounds extremely easy to you, and in your thought process you already know the implementation.

Depth First Traverse

Keramot UL Islam — Thu, 01 Jul 2021 09:04:44 +0000

Depth First is an algorithm that traverses data structures focusing on the depth of nodes. It is useful for searching data in a DS or adding or updating data in the nth place of a DS.

There are Three types of DFT [Depth First Traverse]

Pre Order
In Order
Post Order

Now let’s see a code example of DFT algorithm on a Binary tree.

const dft_preOrder = (root) => {
    const list = []

    function dftRecursion(root) {
        if (!root) return list

        list.push(root.val) // pre order
        dftRecursion(root.left)
        dftRecursion(root.right)

        return list
    }
    dftRecursion(root)

    return list

}

console.log(dft_preOrder(binaryTree))
// result: [ 1, 2, 4, 5, 3, 4, 6 ]

// put a binary tree as the root parameter. 
// It looks like this:
//            1
//          /   \
//         2      3
//        / \    / \
//       4   5  4   6

So, What’s happening here:

Access the root node, put it in the stack, then pop from the stack
Printed its data.
Then “if next nodes are not null” then, put its next right and left nodes in the stack. But “if null” then bring the last item from the stack.
Bring the last item from the stack, which is the left node.
Then printed its data.
Keep doing the above, till the stack is not empty.

Read the full article to know more about all types of Depth First Traverse using animations on my blog. Click Here

Web Components with JavaScript

Keramot UL Islam — Wed, 17 Feb 2021 16:36:13 +0000

Web components are a way to create custom, reusable HTML elements. Using web components you can create custom HTML elements with JavaScript. Framework/Libraries like ReactJS, VueJS also offer reusable, custom components. But with vanilla JavaScript, we also can create custom components. We also can make our custom elements isolated from other DOM elements.

Three things need to understand to learn Web Components:
Custom Elements: You can create a custom DOM element/tag with a JavaScript APIs. By convention use hyphen to declare a custom elements, for example: <my-element></my-element> . We use hyphen so that it doesn’t mess with other native elements.

Shadow DOM: When you need to create a private, isolated custom element, then we use a set of JavaScript API called Shadow DOM. It also renders separately from the main Document DOM.

HTML Templates: We have a couple of HTML elements that don’t display on the main rendered page. We can render those element contents when we actually need to render those and we also can reuse those contents. Those elements are: <template>, <slot>

Custom Elements

Now let’s see how we can create a custom element. For creating a custom element let’s call define method of customElements API.

customElements.define('my-component', CustomComponent);

Now let’s extends CustomComponent class from HTMLElement to create a custom element.

class CustomComponent extends HTMLElement {
  connectedCallback() {
      this.innerHTML = `<p>Hello Universe</p>`;
  }
}
customElements.define('my-component', CustomComponent);

HTMLElement has four lifecycle hooks. connectedCallback is one of them. It executes every time the element is inserted into the DOM. We can put out markups in it, get dependency data from other components, etc.

Shadow DOM

We also can create isolated components. Isolated components don’t mess with the main DOM. It renders in lite wait DOM called Shadow DOM. In main DOM everything is in a global scope. So conflicts and security issues can happen easily. Shadow DOM is a wrapper of the custom component, it makes the component isolated from other main DOM elements/components. You can attach Shadow DOM in any main DOM elements or custom elements.

class CustomComponent extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>Hello Universe</p>`;
  }
}
customElements.define('my-component', CustomComponent);

HTML Templates

<template> tag contents don’t render in the page. So you can write your contents in it and then clone those nodes with JavaScript in the custom components.

class TestComponent extends HTMLElement {
  constructor() {
    super();

    const templateNode = document.getElementById('my-template');
    const templateContent = templateNode.content;

    this.attachShadow({mode: 'open'}).appendChild(
      templateContent.cloneNode(true)
    );
  }
}

customElements.define('my-template', TestComponent);

Headless WordPress Dynamic pages with GatsbyJS

Keramot UL Islam — Sat, 24 Oct 2020 09:02:59 +0000

In this article, I will show ‘how to create dynamic pages/routes with GatsbyJS’. I will fetch all post data from the WordPress website and create dynamic routes for each post.

At first, we need to create gatsby-node.js file in the root of our wp-gatsby project directory. Gatsby handles all dynamic routes from this file. Then add this asynchronous function in the file.

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions

    const wpData = await graphql(`
        {
            allWordpressPost {
                nodes {
                    wordpress_id
                    slug
                    title
                    content
                    author {
                        name
                    }
                }
            }
        }
  `)

    if (wpData.errors) {
        console.error(wpData.errors)
    }

    const { allWordpressPost } = wpData.data
    allWordpressPost.nodes.forEach( post => {
        createPage({
            path: `/${post.slug}`,
            component: require.resolve(`./src/templates/post.js`),
            context: { post },
        })
    })

}

Here, I wrote a Graphql query to fetch post data from the WordPress website than on line 26 creating dynamic routes.

Behind the screen, Gatsby will create routes root-url/post-slug for each post, expect output from ./src/templates/post.js this file and Gatsby will also send each post data to this file.

So now let’s go ahead and create post.js file on the following path and add these pieces of code to the file…

Read the original full article on my blog

This article is a part of my Headless WP series

Headless WordPress with GatsbyJS 101

Keramot UL Islam — Mon, 24 Aug 2020 06:36:17 +0000

WordPress has built-in support for Rest API. So Making WordPress headless is possible with many tools. In this article, I will show “how you can fetch data from WordPress site with GatsbyJS”.

Why GatsbyJS?
Making dynamic routes are easy and also customizable. Gatsby has some plugins that work out of the box to make WordPress headless easily and their documentation is also amazing. Gatsby also has default support for Graphql.

What do you need to know before you start following this article?

WordPress, WordPress plugin installation
Better knowledge of JavaScript
Familiar with ReactJS, GatsbyJS, Graphql

At first install WordPress on a local environment or on a live server, then install these two plugins: WP Graphql, WP Graphiql
WP Graphql will create graphql API for WordPress and WP Graphiql will create a user interface for that. Give some time and get familiar with the interface.

Now install Gatsby CLI globally: npm install -g gatsby-cli
Then install a Gatsby starter:
gatsby new wp-gatsby https://github.com/gatsbyjs/gatsby-starter-hello-world
It will install a Gatsby starter project in wp-gatsby directory. Now cd into that folder and run: gatsby develop

Now you can see your new Gatsby site running on: http://localhost:8000/
Install “Gatsby Source WordPress” plugin: npm install gatsby-source-wordpress. And change gatsby-config.js file like below:

module.exports = {
  plugins: [
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            baseUrl: `siteUrl`, // site url without http/https
            protocol: `http`,
            hostingWPCOM: false,
            useACF: false,
        },
    },
  ]
}

This Gatsby plugin will help to fetch data from your WordPress site with Graphql. Now again run gatsby develop, and go to: http://localhost:8000/___graphql. Here you will see almost the same Graphql IDE which you have seen earlier in your WordPress site... ..

Read the original full article on my blog

Two Sum Solution in JavaScript

Keramot UL Islam — Mon, 20 Jul 2020 19:38:22 +0000

So what the hell is Two Sum? Well, it's a very popular Problem set in the world of Programming.

Given an array of integers, return indices of the two numbers such that they add up to a specific target.
You may assume that each input would have exactly one solution, and you may not use the same element twice.

Basically what it saying is, you have an array and an integer. For example: [3, 2, 4] 6. Now add two items of the array and the result must be 6, 2 + 4 = 6. And don't forget that you can not add the same array item 3 + 3 = 6, you can't do this here :P.
When you get the result of the sum which is equal to the integer then return the index of those two array items as an array. So the index of 2 is 1, and the index of 4 is 2, and the result is [1, 2].

In JavaScript there are lot's of ways you can solve this, I will describe you two of them.

const twoSum = (nums, target) => {
    const result = [];

    for (let i = 0; i < nums.length; i++) {
        for (let j = i + 1; j < nums.length; j++) {
            if (nums[i] + nums[j] === target) {
                result.push(i);
                result.push(j);
                return result;
            }
        }
    }
}
console.log(twoSum([2, 4, 6, 5], 8)); // [0, 2]

Here we are finding which two array items create a sum that is equal to target integer, then store the index of those two items in an array and return that array.

Everything works fine here but what about Time Complexity. We are looping through the array twice, which means the Time Complexity is O(n^2). It's quite expensive, isn't it?

Okay, now let's see a better approach...

const twoSum = (nums, target) => {
    const result = [];

    for (let i = 0; i < nums.length; i++) {
        let diff = target - nums[i];
        let secondItemIndex = nums.indexOf(diff);

        // (secondItemIndex > -1) if array item is grater than target, then ignore that item
        // (secondItemIndex !== i) if same index, then ignore that item
        if ( secondItemIndex > -1 && secondItemIndex !== i ) {
            result.push(i);
            result.push(secondItemIndex);
            return result;
        }
    }
}
console.log(twoSum([2, 4, 6, 5], 8));

In this function mainly two thinks are happing, at first we are finding the difference between array item and target, 2 - 8 = 6. Then finding the index of that number in the array, nums.indexOf(diff).
The most important thing is in this scenario the Time Complexity is O(n), which is almost half of the previous one.

My crappy Thoughts about Programming

Keramot UL Islam — Tue, 16 Jun 2020 15:37:11 +0000

All programming ideas or implementations came from real-life solutions or problems. And that makes programming more than just coding.
It takes detailed observation of everything. Because understanding and realizing existing solutions or problems are the most important part of programming.

For Example:
We know about JWT(JSON Web Token) right?
Did we have seen this idea and the implementation before somewhere else? Yes, we all know this. In fact, we all have gone through this several times.
=> When we go to a service center, at first they give us a ticket/token. Then we go to the service provider and give our ticket/token, if the ticket is not fake then they provide expected services.
Another example is Design Patterns. All design Patterns are also inspired by real-life solutions.

The idea of implementation has to come from real life. That's why observing life, understanding existing solutions and problems are the most important part of programming.

The funny thing is - we all know these things. But very few among us truly realize these things and also have the ability of execution.

MongoDB database driver for Deno

Keramot UL Islam — Fri, 22 May 2020 20:04:24 +0000

As you already know that Deno is a new run time of JavaScript and TypeScript. Recently it has published first stable release.

MongoDB is the most popular NoSQL database. Deno also has a third-party module deno_mongo to handle MongoDB queries.

deno_mongo is a MongoDB database driver for Deno, based on rust's official MongoDB library package. Right now it's on --unstable flug.

I'm assuming that you have installed MongoDB and Deno on your machine. So, let's see how it works...
Necessary permissions to run this module: --allow-net --allow-write --allow-read --allow-plugin --unstable

import { MongoClient } from "https://deno.land/x/mongo/mod.ts"

const client = new MongoClient()
client.connectWithUri("mongodb://localhost:27017")

const db = client.database("denoDB");
const greetings = db.collection("greetings");

on client.connectWithUri you will put your own URL. In my case, I have a database called denoDB and a collection called greetings in that database.

Now let's insert some data in there:

const hello = await greetings.insertOne({
    sayHello: "Hello World..."
});

If you check on the terminal db.greetings.find() then you'll get that data back, or you can find the data using deno_mongo:

const find = await greetings.find({
    _id: hello
});
console.log(find)

Update and Delete:
updateOne returns { matchedCount, modifiedCount, upsertedId } these three informations.

// update
const { matchedCount, modifiedCount, upsertedId } = await greetings.updateOne(
    { sayHello: { $ne: null } },
    { $set: { sayHello: "Hello Universe..." } }
);

// delete
const delete = await greetings.deleteOne({ _id: hello });

Deno installation and VScode setup

Keramot UL Islam ・ May 16 '20 ・ 1 min read

#deno #javascript #typescript #webdev

Deno installation and VScode setup

Keramot UL Islam — Sat, 16 May 2020 05:01:05 +0000

Deno is a run time of JavaScript and TypeScript. It's created by the same person who created NodeJS -- Ryan Dahl.
Recently They have published the stable version of Deno 1.0.0

We also created a Facebook group for Developers:
Deno Developers Bangladesh

Deno Installation

macOS and Linux:
curl -fsSL https://deno.land/x/install/install.sh | sh
Using Homebrew: brew install deno

Windows:
iwr https://deno.land/x/install/install.ps1 -useb | iex

Now Try to run deno --version in your terminal, if don't works then you might need to add the path on your OS.
For More Installation options Click Here

Visual Studio Code Setup

Create a project directory, Let's say hello-deno is the name of the directory/folder.
Now create a index.ts file and .vscode directory, in the root directory.
Install the Deno extension for vscode. Which is created by axetroy.
Create a settings.json in .vscode directory.
add { "deno.enable": true, } in settings.json file.
console.log("Hello Universe...") in the index.ts file.
On your terminal go to the project directory and run deno run index.ts

Note: Deno can compile both JavaScript and TypeScript. So, your file extension also can be .js

Create Facebook Feed in WordPress with Facebook API

Keramot UL Islam — Thu, 02 Apr 2020 06:26:10 +0000

With the help of Facebook rest API, we can create a Facebook feed on our website. Nowadays every business has a Facebook page. A Facebook feed on the website may help to boost business.
In this article, I’ll show how to get data from a Facebook page.

For fetching data from Facebook you need two things:

Page ID
Access Token

Get these data from Here.
Facebook provides some endpoints to access data. But for authentication, you need those two pieces of information.

$page_id = 'your facebook page id';
$token = 'your access token';
$url = 'https://graph.facebook.com/v4.0/' . $page_id . '/posts?' . '&access_token=' . $token;

$fb_posts = wp_remote_get( $url );
$posts = wp_remote_retrieve_body( $fb_posts );
print_r( json_decode( $posts ) );

Now You are getting data but only basic data. For making a feed you need more depth information right?
You can also add a query in the endpoint.

$url_queries = 'fields=status_type,created_time,from,message,story,full_picture,permalink_url,attachments.limit(1){type,media_type,title,description,unshimmed_url},comments.summary(total_count),reactions.summary(total_count)';
$page_id = 'your facebook page id';
$token = 'your access token';
$url = 'https://graph.facebook.com/v4.0/' . $page_id . '/posts?' . $url_queries . '&access_token=' . $token;

$fb_posts = wp_remote_get( $url );
$posts = wp_remote_retrieve_body( $fb_posts );
print_r( json_decode( $posts ) );

Now with some HTML and CSS, you can make a pretty visualization of the feed.

Congratulations, you have created the feed. But if you think deeply, you will find that it’s not good for performance. Because at every page refresh it’ll fetch data from the Facebook database, which is time-consuming.

So, you need to cash your data for better performance. WordPress has a mechanism called transient. It is used to cash data for a certain period of time...
Read More from my original article
________________________

Related Post:

Twitter Feed on WordPress

Keramot UL Islam ・ Dec 26 '19 ・ 2 min read

#wordpress #php #rest #api

WordPress Post Metadata in RestAPI

Keramot UL Islam — Tue, 03 Mar 2020 10:21:02 +0000

WordPress has Rest API support since 2016. It’s designed to reach other paradigms. Unfortunately, WordPress doesn’t provide Rest API support for metadata by default. But we can add metadata in Rest API. There are 3 different ways to add metadata in Rest API.

1. Add Rest API support while Registering metadata: The simplest way of adding metadata in Rest API is to add support while you’re registering metadata. You can do it by adding show_in_rest as true in the arguments.

$meta_args = array( 
    'type'         => 'string',
    'single'       => true,
    'show_in_rest' => true,
);
register_meta( 'post', 'my_meta_keys', $meta_args );

2. Add metadata in Rest API response object: Most of the time you are going to use this way.

// callback function
function my_get_post_meta() {
    // get_post_meta( post_id, meta_key[optional], single[optional] )
    $post_meta = get_post_meta( 15 );
    $meta = [];
    foreach( $post_meta as $meta_key => $meta_value ) {
        $meta[$meta_key] = $meta_value[0];
    }
    return $meta;
}

function meta_rest_api() {
    register_rest_field( 'post', 'my_meta', array(
        'get_callback'      => 'my_get_post_meta',
        // 'update_callback'=> null,
        // 'schema'         => null
    ) );
}
add_action( 'rest_api_init', 'meta_rest_api' );

Now, what’s happing here? Well, in the callback function I’m getting all metadata from a post and adding them in an array as key-value pair. Then register_rest_field is doing the magic. WordPress provides this function to add data in the Rest API response object. It also knows in which route to put data. You also can provide update_callback and schema if necessary.
Now you will find all those metadata in https://domain/wp-json/wp/v2/posts/15 under my_meta property.
Please note that I have provided the post id 15, in your case the post id will be different.

3. Add metadata in a custom route: Sometimes you need to add post metadata in a custom route. Sometimes it's may necessary for big projects.
Click Here to read the full article.

Twitter Feed on WordPress

Keramot UL Islam ・ Dec 26 '19 ・ 2 min read

#wordpress #php #rest #api