Udemy Course – 1 | 2022

In this 2022 year this is my first udemy course for this year.

Course Name: Gutenberg Blocks for WordPress and React Developers [2022]

I wanted to purchase a course for blocks from udemy and I have purchased one before but that is not clarify everything. So I purchase one more and I am glad it is very good course and I am definetly going to reccommend others about it.

Advertisement

Sneakernews

About Sneakernew

Sneakernews is a entriprise level media site which provides contents based on sneakers.

Website Link: https://sneakernews.com/

Role in Sneakernews

  • I worked in this project when I am an employee of Multidots
  • I was a WordPress developer in sneakernews.
  • I worked in this project for more than 3 years
  • My responsibilities was to migrate the site to WordPress VIP server.
  • Mainetenace

Skill Used

  • WordPress VIP
  • WPEngine
  • Linode
  • WordPress
  • HTML
  • CSS
  • PHP
  • JavaScript
  • Advertisement
  • WP CLI
  • Custom CLI

Viable Earth

About Viable Earth

Viable earth is content creation base website where they are observing and commenting on sustainability issues of asia pacific industries.

Wbsite Link: https://viable.earth/

Role in Viable Earth

I am fullstack developer in Viable earth where I have worked on below listed points:

  • Daily mainetenace of the site
  • Used UI ideas to redesign the site
  • Advertisment implementation

Skills Used

  • WordPress
  • Paid themes
  • Plugins
  • reCaptcha
  • Adsense
  • HTML
  • CSS
  • JavaScript

WooCommerce Hooks that I have worked on

  • woocommerce_product_options_general_product_data
  • woocommerce_process_product_meta
  • woocommerce_product_tabs
  • woocommerce_get_price_html
  • woocommerce_cart_item_price
  • woocommerce_account_menu_items
  • woocommerce_order_status_completed
  • woocommerce_get_sections_products
  • woocommerce_get_settings_products
  • woocommerce_after_add_to_cart_button
  • woocommerce_before_add_to_cart_button
  • woocommerce_add_cart_item_data
  • woocommerce_before_calculate_totals
  • woocommerce_loop_add_to_cart_link
  • woocommerce_thankyou

Google AdSense Setup for Review

For using google Adsense we have to first sign up using their google form.

https://www.google.com/adsense/signup/new/lead

Add the address before your payment is done

Add the site URL

Connect your site to AdSense – There will be a code generated which you need to add in the header of your site.

Once you add the code. They will review your site content and check the content is eligible for ads or not.

Once it is accepted you can have the auto generated ads or created ads as well.

ESLint | Linter for JS file

ESLint is the Javascript linter. It is similar to JSLint.

How to add ESLint in the project?

First you have to add the node module in the project. For adding node module you have to check this link to create node module.

After installing the node module in the project we need to install the eslint in it.

For that run below command

npm install --save-dev eslint

This will install the eslint package in the node module.

Now to check the eslint package is present or not use the below command:

ls node_modules/eslint

The eslint command operates through the .bin folder which is created. To check the .bin folder for eslint use:

ls -la node_modules/.bin

Now if you test the ESLint in the code by using the below code.

./node_modules/.bin/eslint components/

It will provide error to add the configuration file.

To set the configuration file you have to add the code.

/node_modules/.bin/eslint --init

Then it will ask bunch of question for configuration.

Once you will add the question the configuration file will be added and the ESLint is ready to use.

To use you can use the command:

./node_modules/.bin/eslint components/

Till now I have research this much about ESLint.

Reference site from where I learn the ESLint:

https://eslint.org/docs/user-guide/getting-started

Puppeteer

What is Puppeteer?

Puppeteer is a node library which provides us the feasibility to control the headless chrome or chromium. This is also an automation tool through which we can do whatever we want to do without opening the chrome.

Example of taking a screenshot using Puppeteer

In this example, we will see step by step how can we get the full page screenshot of a website without opening the chrome/chromium.

  1. First of all, we need to create a folder, named motorskills.
  2. Create an app.js file in that folder. You can create any filename.
  3. Open command prompt or terminal.
  4. Go to the project folder in terminal
  5. Type command npm init -y
    1. This will create the package.json file in the directory.
  6. Then run the command npm i puppeteer
    1. This will create the chrome and other dependency modules in the project.
  7. Then we will write our script to the app.js
// include the puppeteer library
const puppeteer = require('puppeteer');

// create and define the function named takeScreenshot 
const takeScreenshot = async()=>{

    // Launch puppeteer
    const browser = await puppeteer.launch({ args: [
            '--no-sandbox',
            '--headless',
            '--disable-gpu',
            '--window-size=1920x1080',
        ] });

   // add new page in the chrome
    const page = await browser.newPage();
    
    // add the options
    const options = {
        path: 'images/website.png',
        fullPage: true,
        omitBackground: true
    }

    // go to the url
    await page.goto('http://www.multidots.com/');

    //take screenshot
    await page.screenshot(options);

		    // close the tab
    await browser.close();
}

takeScreenshot();
  1. Now run the app.js by running command node app.js

Reference Links:

How we will be a standard Coder?

We all know how to develop a website. If at all we don’t know then we can be google it and learn it. But very often we search about how can we become a standard coder.

Let me tell you I face many challenges to become a standard corded and I am facing it till date.

Below are the points which I learn in the process of being a standard coder.

  1. Update with the latest tools and technology trends. First thing I search a lot what are the standards and all everywhere I found that “Be updated with the latest tools and technology”. Hell yeah, this is true.
  2. Interact with the people whom codes are standard. This is a really good point to interact with people. They are the best person who can suggest what to do. I did it and trust me in first I feel some shyness but people who have knowledge are way more than all this.
  3. PHP CodeSniffer  This is the latest tool which you can install in your PC and check your coding standard.

These points are the basic and very theoretical points. Let me know if you need more descriptive or technical points. I love to share them as well.