Difference between var, let & const

By using var old way of defining variables. But javascript still maintains this type of syntax so, that old written code can also be executed and run by language because after an update each code updates a crucial thing.

var p_name = "jhon";
console.log(p_name); // will print jhon
p_name = "Rahul";
console.log(p_name); // will print Rahul
var p_name="Ramesh";
console.log(p_name);

In the above code, you can see it different way of defining var. The var is globally scoped so, you can define its top, and can be modified anywhere wherever required let me explain by example.

var username = "Jhon";
var age = 24;
if (age > 23) {
    var usename = "Mosh"; 
}
console.log(usename) // Will print "Mosh"

In the above example, you can see that we have defined a username and in the if statement block is modified and can be accessed outside the block and able to print it. But in the case of let and const this will not happen because both are block scoped so, will able to access within the block the same thing let me explain to you by example.

let username = "Jhon";
let age = 24;
if (age > 23) {
     let usename = "Mosh"; 
}
console.log(usename) // Will print usename is not defined

If we print the username then will throw an error because we again define in if block and it is block-scoped and their scope ends there if we do not again initialize with let in if block then will not throw an error. You can initialize a single time and can modify the value anywhere.

The const works the same as the variable but the main difference is that their value can not be modified within the block or outside the block in this datatype you can add value a single time and will same throughout the execution.

const fullname = "Rakesh Kumar";
console.log(fullname); // Will print Rakesh Kumar
fullname = "Mahesh"; // TypeError: Assignment to constant variable.

Arrow function in JavaScript ES6

It’s the same as a normal function that we create we create as usual like below let’s take an example of the addition of two numbers this function will add two provided numbers and return it.

function add(n1, n2){
	return n1+n2;
}
console.log(add(5,2)); // Will print 7

In JavaScript, an arrow function is a shortcut for writing functions. Compared to a conventional function expression, it is syntactically more compact and has several specific features, particularly with regard to this binding. This can be written by using => (“fat arrow”) syntax same function converts into an arrow function. There is also no difference in calling.

const add = (a, b) => {
  return  a + b;
};
console.log(add(5,2)); // Will print 7

For more convenience, we can also remove “{}” from the function definition. But there is a different calling for single and multiple parameters let see the example for both and single and multiple parameters.

const add = (a, b) => a + b;
console.log(add(5,2)); // Will print 7

const doubler = x => 2 * x;
console.log(doubler(5)); // Will print 10

const say = () => 'Say Hello';
console.log(say()); // Will Say Hello

use case for arrow function:
This implementation in short inline actions, like array operations (map, filter, reduce)

Differences from Regular Functions:

Lexical this Binding: Arrow functions don’t have a context of their own. Rather, they inherit this from the global scope or surrounding function. When you wish to maintain the surrounding scope’s value during callbacks, this is quite helpful.

function counter() {
  this.increment = 0;
  setInterval(() => {
    this.increment++; // 'this' refers to the counter instance
  }, 1000);
}
let c = new counter();
console.log(c.age); // will print 0

In the above example, you can see it will print 0 because of this reference to global scope. If we
console.log(this.increment)
within the setInterval curly braces inside then will print. So, it’s globally scoped and block context.

Cannot be used as Constructors:
The arrow function can not be used as a constructor you can see in the above example like
let c = new counter();
But if we can try with same thing with the arrow function will print the below error.
TypeError: counter is not a constructor

Implicit return:
When creating a single argument function then return the keyword not required by default omitted.
const doubler = x => 2 * x;
In this example, you can see I have not used the return keyword.

Use Cases of arrow function in JavaScript ES6

The best implementation of the arrow function you can see in map, filter, and reduce.

Modules in JavaScript ES6

JavaScript modules were established through the ES6 module syntax, providing a standardized approach for importing and exporting code across different files. This modularity enables programmers to organize their code more effectively and facilitates the sharing of functionality among various components of an application.

To explain the module let’s take an example that already stated that modular means we can write code in different files and use any place so let me create three files.
user.js // contain user information
address.js //will contain details related to address
main.js // it's the final file in which call both above file code

Exporting from a Module

Default Export:

Now I have created first file user.js in which you can see it I have saved the user information in variable user and at the end I have added the line export default user; this code provides the ability to use method, variable, etc in another file. In default export, we can export only the single class, method, and variable in another file by import.

// Filename : user.js 
//---------------------------
const user = {
    username:"Jhon",
    email:"john@gmail.com"
}
export default user;

Named Exports:

Now move to 2nd file address.js in which handles user address-related information. Also will see the syntax for named export. To define named export we have to write export preceding to function, variable or class so that can be exported and used in another place. Help of named export we can export multiple function variables and classes.

// Filename : address.js 
//---------------------------
export let getCity = () =>{
    return "Noida";
}
export let addressId = 25;

Importing from a Module in JavaScript ES6

Note:
For importing modules in html file need to add a type module then the module feature will work and the file call should be from a sever like localhost or any server extensions that are available that can be used like Live server which is compatible with Visual Studio Code if you are using Visual Studio Code.

So, now we add the main file main.js their code explains further. This file will add the main execution and will use the code that is written in the file user.js and address.js. So, In the HTML file need to add a statement like below

<script type="module" src="main.js" ></script>

Named Imports:

you can see below code there is added statement
import {getCity, addressId} address from './address.js';
In which getCity, addressId are the function and variable and ./address.js path of the file in which function and variable are defined.

// Filename : main.js 
//---------------------------
import {getCity, addressId} address  from './address.js'; 
console.log(getCity()); // will print Noida
console.log(addressId); // will print  25

Renaming Imports:

For code readability or any purpose if need to rename the name of a function, variable, or class name then in the module feature you can do it same thing explored by below code.

import {addressId as id}  from './address.js';
console.log(id) //will print 25

Above code, you can see addressId changed as id and print the same.

Import All:

In the module import, you can import all function methods and variables in a single variable an object by using using * as so, that no need to import separately same thing explain by code.

import * as address  from './address.js';
console.log(address.getCity()); // Will print Noida
console.log(address.addressId); // will print id 25

Default import

Now let me show how can import the default exported module more and less it works like importing all but there is no need to write * as .

import user  from './user.js';
console.log(user.username); // will print Jhon

You can also rename in default import.

import u  from './user.js';
console.log(u.username); // will print Jhon

Benefits of Using Modules

• Encapsulation: Modules make code isolated, you can maintain a global namespace more freely by making block-scoped or module-based code.
• Reusability: The same method and variable can be used anywhere there is no need to define and write code again and again.
• Maintainability: Code becomes more organized and readable so that team members or code reviewers can easily understand the code and easy to maintain future.

class & object / oops concept in javascript es6

It is used in approximately all programming languages like PHP, Python, Java, and Javascript. Class-based code has many features like code reusability, readability also helps in memory optimization. It’s a blueprint for creating objects. This feature of javascript es6 is used by many popular frameworks like React, angular, and nextJs. Class code structure definition and calling are the same in all languages only syntax differences are there. Please check the below example for class.

class userDetail{
	// Default constructor
	constructor(n){
		this.name = n;
		this.source = "Default";
	}
	// Individual variable
	user_id = 10;
	// Arrow function
	address = () => {
		return {city:"Noida",state:"UP",country:"India"};
	}
}
let user = new userDetail("Jhon"); // Set default name by constructor
console.log(user.user_id); // Will print 10
console.log(user.name); // will print Jhon
console.log(user.address().city); // Will print Noida

We have defined a constructor which calls when the class is initialized and we can assign variable value. We can do all things in class that we can do in global space like define arrow function and define normal variables.

Class Inheritance in javascript es6

The code that is already defined or written needs to be reused in the context of inheritance. For example in the class userDetail the written method and variable need to be used and write the next code then it’s possible by Inheritance. The code extended by keyword extends then adds the class name like extends userDetail

class cart extends userDetail{

	getProducts(){
		return ["Apple Mobile","Boat Headphone","Mobile Charger"];
	}
}
let user = new cart("Jhon"); // Set default name by constructor
console.log(user.user_id);   // Will print 10
console.log(user.name); // will print Jhon
console.log(user.getProducts()[0]); // will print Apple Mobile

The variable user_id and name is not defined in the class cart but still print name and user_id because the code of existing class userDetail added or Inherited in class cart

Array and object Destructuring in in javascript es6

Assigning values from array or object to a variable or you can say unpack values from an array and assign them to variables.

const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;

console.log(first);  // Output: 'red'
console.log(second); // Output: 'green'
console.log(third);  // Output: 'blue'

In this, if want skip any variable you can do it by skipping assigned variable like below.

const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first);  // Output: 'red'
console.log(second); // Output: 'green'

Object Destructuring

You can assign properties to variables by unpacking them from an object utilizing object destructuring. Unless you provide an alternative name, the variable names must correspond to the property names.

const person = { name: 'Alice', age: 25, city: 'New York' };
const { name, age, city } = person;
console.log(name); // Output: 'Alice'
console.log(age);  // Output: 25

// You can rename variable in object destructuring 

const person = { name: 'Alice', age: 25 };
const { name: personName, age: personAge } = person;
console.log(personName); // Output: 'Alice'
console.log(personAge);  // Output: 25

spread and rest operator in javascript es6

Both operators are represented by three dots ... with the help of these, we can collect the data and spread the next place and also provide flexibility to collect data for function.

Spread Operator

This operator spreads the value of the addition of value to the next variable it works with both array and object. Let’s understand by code.

let carBrand = ["Audi","Ferrai","Hudai"];
let autoBrand = [...carBrand, "Tata", "Nissan"];
console.log(autoBrand); // will print [ 'Audi', 'Ferrai', 'Hudai', 'Tata', 'Nissan' ]

let postAutoBrand = ["Tata", "Nissan", ...carBrand];
console.log(postAutoBrand); // will print [ 'Tata', 'Nissan', 'Audi', 'Ferrai', 'Hudai' ]

In the above code, we have defined three brands in variable carBrand. Now these three values spread in variable autoBrand by using … and with the use of spread, you can add values at the start and end of indexing.

Rest operator

It also works the same as the rest operator spread operator works for copy values but the rest operator works for the collection of multiple values or data.
Use Case :
Suppose a function needs to pass a dynamic parameter like below.

function userList(user1, user2, user3){
    return [user1,user2, user3];
}
console.log(userList("Jhon", "Ram", "Nick")); // [ 'Jhon', 'Ram', 'Nick' ]
console.log(userList("Jhon")); // [ 'Jhon', undefined, undefined ]

You can see that when we did not pass all three parameters in the second call. Then it added undefined on places 2nd and 3rd. So, to fix this issue we have to use the rest operator which collects values in an array format

function userList(...users){
    return users;
}
console.log(userList("Jhon", "Ram", "Nick")); // [ 'Jhon', 'Ram', 'Nick' ]
console.log(userList("Jhon")); //[ 'Jhon' ]

Now you can see there is no undefined error the values which you defined will collect it if not then no undefined.

Destructuring with Rest Operator

const fruits = ['apple', 'banana', 'cherry', 'date'];
const [first, second, ...rest] = fruits;

console.log(first);  // Output: 'apple'
console.log(second); // Output: 'banana'
console.log(rest);   // Output: ['cherry', 'date']

Refrence & premitive type variable assigning

In Primitive type data types (number, string, Symbol, bigint) these are immutable means in this variable the values are directly copied.

let x = 10;
let y = x; // y is now a copy of x's value
y = 20;    // changing y does not affect x

console.log(x); // 10
console.log(y); // 20

The reference type data type (array & object) not directly values are copied during variable assign there is referencing the pointer that is in memory it will more clearer from the below example.

let username = { name:"Rakesh Kumar" }
let username2 = username;
console.log(username);// Will print { name: 'Rakesh Kumar' }
console.log(username2); // Will print { name: 'Rakesh Kumar' }
username2.name="Jhon";
console.log(username);// Will print { name: 'Jhon' } but expected Rakesh Kumar
console.log(username2); // Will print { name: 'Jhon' }

In the above example the variable contains the name “Rakesh Kumar” Before manipulating the variable username2 was print { name: 'Rakesh Kumar' } but after changing the value in username2.name both are print { name: 'Jhon' } but we changed in username2 and username change itself. It happens because both are references to the same location. There is no direct copy of the values.

Now how can we fix this issue so that we can copy the values of one object to another and the original object should be the same or not any modification there? For this, we can use a spread operator.

let username = { name:"Rakesh Kumar" };
let username2 = {...username};
console.log(username);// Will print { name: 'Rakesh Kumar' }
console.log(username2); // Will print { name: 'Rakesh Kumar' }
username2.name="Jhon";
console.log(username);// Will print { name: 'Rakesh Kumar' }
console.log(username2); // Will print { name: 'Jhon' }

Array map and array filter in javascript es6

Array Map:

By giving each element of an existing array a function, the map() method generates a new array. Every element receives a new value from this method, which map() then aggregates into the new array. The original array and its values remain unchanged.

const numbers = [1, 2, 3, 4];
const multiplier = numbers.map(num => num * 2);
console.log(multiplier); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4] (original values unchanged)

Array filter

The name filter clearly states that the filter() used for filter the values of the array on the certain business logic or conditions. In this also original array and its values are not changed it creates a new array on the condition true.

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
console.log(numbers);      // [1, 2, 3, 4, 5] (original array remains unchanged)

Conclusion

The complete post is written in keep min in javascript es6. It is a brief discussion about es6 concepts so that you can understand the latest framework and libraries like react, angular, Vue, and react. These front-end technologies are most popular those days but they all use modern javascript concepts. So, I hope you will enjoy the post and try to start learning new frameworks or libraries. Thanks for reading the article.

The post A Refreshing Dive into JavaScript ES6 Concepts appeared first on Postnidea.

The second option for the user is self-hosted WordPress. In this WordPress provide you setup in zip format so that user can download it. Now the user has good command over the blog or website. He can do everything whichever he wants. The WordPress is hosted on user hosting so the user will responsible for other things like performance, security, SEO & blog uptime.
Today I want to explain some other things so I don’t want to go in deep knowledge.

Generally, people have the myth WordPress not more secure or you can develop an only simple informational site. But It’s completely wrong you can develop anything using WordPress & will work securely. WordPress CMS is a gravy of your dish So, it depends upon you how to use if you maintain a WordPress coding standard then definitely your application will generate good revenue. Today I will share some points which should be kept in mind from the phase of development. So after development when you start work for the security & performance then your work effort become decrease. These are very basic things but most of the peoples missed it. I have created a list of these which is below.

Perfect placement of files.

when things are placed properly then they make sense otherwise difficult to maintain. So whenever you create a theme or plugin then maintain the proper standard file structure. I have shown you a file structure for the plugin is below.

One more important thing is that always make plugin frontend compatible by using templates & they should be overridable so that easy to use plugin & override frontend without editing plugin. Same thing I also suggest for the theme So that in future if there is an issue in this case if the standard structure is there then easy to any developer debug.

Naming convention & declaration of variable, constant

In programming, the naming convention very important, especially in WordPress, try to define the unique name of the variable, constant & class so there is less chance to conflict with other plugins. The variable value used recursively then it should define in the starting lines. Because some time value fills in the variable from the database or some other where if we not define then it always triggers database query or procedure. The name of the variable & constant should be meaning full so that easy to code review.

Maximum use of WordPress core things

The peoples are used the opensource because most of the things already built in it. The open-source provides a collection of hooks, filters & methods we need to use them. The benefit of using them is that if the upgrade or maintain anything in these then your functionality never breaks & you will also not need to eject the latest changes in our functionality. If you use inbuilt functions again and again then your development speed also increases because after a certain time you will grasp up maximum functions.

wp-config usage

The wp-config.php is the main configuration file for the WordPress in which all settings like DB & constant defined in it. It gets all details from a wp-config.php file like database, salt keys, cache, debug, etc. So always use the defined constant, sometimes peoples defined error display enable/ disable using functions.php which wrong practice. So bad practice of code always consumes more time during maintenance or enhancements.

Proper versioning

Version controlling is the process by which we identify a change chain log. It will greatly help in issue debug. So whenever you add major changes in the plugin then the version of the plugin should be updated. Always use the updated plugin because of sometimes plugin developer done the major things related to security if you miss that update then you will eject security threat in the application.

Proper security during code

During the coding, security should be very important otherwise your application is not beneficial for the user because the hacker can easily break it. So always use the input sanitization. For sanitization, WordPress provides lots of functions which is already available. During the installation of WordPress setup change the salt keys, Database prefix should be changed from the default which will add one more step towards the security.

proper understanding of the functions (fastest & best function)

In WordPress for a certain task available multiple hooks & functions so review the function properly & try to understand the code of function then use the most efficient appropriate function instead of any function.

Avoid modifying core, plugin, parent them

In any opensource, if you changed the core files then you simply break the updates or functionality. Another most important thing is that whenever you get a new update then your customization becomes goes. So always try to implement our requirement in the child theme or our theme so that no need to customize core.

Not Checking If a Plugin Is Active

If your code dependent on the certain plugin of class then always implement the checks so that if the dependent thing is not available then, in that case, your functionality or plugin can’t be a break. You can apply plugin checks using the below code.
if ( is_plugin_active( ‘plugin-folder/plugin-main-file.php’ ) ) {
// Run plugin code
}
In the same way, you should also need to apply the function, class checks.

Loading Too Many Resources

Never load CSS and js in head or footer directly because it’s bad practice. Sometimes I have seen that people add the jquery library, juqrey-ui library or other libraries (default) which is standard and already available in the core then why people are used. Always add CSS & js using below functions which standard. Always try to use standard functions for these tasks which are below.

Keeping the Admin Bar

During the initial time, I disabled the admin bar for checking responsive & other things. But it’s bad practice it will lose the user experience. So always keep the admin-bar visible so that end-user can perform default functions like editing, view navigate dashboard easily.

Not Utilizing the GetText Filter[translatable]

Different people have different region but they want to taste your recipe (themes, plugin). But translation is not available to our audience that is the biggest problem. If such type of issue present then your plugin or theme will not use more. So always create textdomain & load at the time of theme or plugin load so that your stuff becomes translatable. The WordPress translate plugin like loco translate, wpml both, is used the textdomain & translate your stuff in the user language.

The things which I know & faced I have to explain to you. I think if you follow these things your application has good performance & secured. If you do the above things then at the time security & performance optimization you will save a lot of time. If you have more things about the above then you can share it with us. I always welcome suggestions & feedback.

The post 6 tips for optimized and secure WordPress during development appeared first on Postnidea.

“It is never too late to learn”. You know I am late to this experiment. Because people already implemented that. If you have a little bit knowledge of javascript or jquery you can easily create an app for google chrome web store. Web chrome store provides facility to peoples can upload their extensions & publish it publicly. Due to this chrome user have the chance to taste different types of app recipe. One week an ago I was working on an extension at this time I learned about the chrome extension development same thing I share with you.

File Structure

Before starting anything let me show you the structure of the extension

You can also directly browse my repository by using link https://github.com/rakeshkumar125/postnidea-weather-now

Header Information

Let me first explain the manifest.json file.

You can see the name, version, description is the fields that contain identification information.

Permission field contains the name of the fields for which you extension need permission to modify or access. Right now I have added only a single one storage but you can allow permission to other fields according to your needs. You can get more information using link

Icons are the field which contains the set of images which shows for the chrome extension logo on a different resolution.

“homepage_url” is the field which contains the publisher or developer website URL so that end user can get the information.

“browser_action” field contains the list of resources that will be called when the user performs the action on the browser like click on the chrome extension etc.  In my case, it contains the “default_popup” field in which I have defined the name of the file which is called when the user clicks on the chrome extension logo. “default_icon” field which contains images for different resolutions.

“manifest_version” is the field which contains the version of the manifest file.

Look & Feel or Client side design

Now let me start explanation another important file popup.html

In above you can see that I have added the HTML part of the extension which is shown when user click on the icon then the user will see the popup content. In the head, I have added two scripts files “jquery.min.js” and “popup.js”. The “jquery.min.js” is the library file which supports for the javascript with the help of that I can user jquery in the extension.

After that, you can see the body part you can see I have added the DIV with id “weather-report”. Initially, it has shown with loading image once data fetched from API then it’s loaded with the report.

Implement Extension Logic

Last but not least file “popup.js”. You can see the code is below.

You can see the I first checked that user is connected with the internet or not by using function “navigator.onLine”. If the user is online then start preparing the weather report otherwise it will just show the message for connecting to the internet.

If the user connects with internet then I got the current use latitude and longitude of the user by the API (https://ipv6.ip.nf/me.json) which is free. Once I got the user latitude and longitude then Trigger another API (api.openweathermap.org) for weather report which is also free. After getting weather JSON data then I create HTML using function “getReportHTML”.

Finally, load the report to the popup.

You can also check out above explanation using video.

You can also enjoy live demo by clicking on below URL

https://chrome.google.com/webstore/detail/postnidea-weather-now/jiapbdoeogpgpeggldgdhcdalhdchgae

If you have any query or suggestions you can share by comment.

The post Start develop chrome extension using javascript in 10 minutes appeared first on Postnidea.

ng new {application_name}  or ng new test112

I create an application for you on your specified path and also install the required packages so that your application will work perfectly.
I will take a few time so, wait with patience. Once your application created then type below command so that your application will open in the browser.

ng serve --open

Above command will compile your typescript and convert in js then compiler compiled thing serve to the browser. There is –open stand for open browser otherwise. The browser will need to open itself. Now created application working fine.

Addition of new module in angular application

Before starting anything few more module I need to install jquery, bootstrap which helps to create awsome UI Design.

npm install bootstrap@3.3.7 jquery --save

After successful installation, we need to add a path in the angular.json file like below which is exist on your application root.

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/bootstrap/dist/js/bootstrap.js"
            ]

There is app.componet.ts already found in the app folder. Now we need to create three pages so that I show perfect routing navigation.
So I will type below commands.

ng generate component home
ng generate component about
ng generate component contact

Above commands will create three pages for your application. Now one file needs to create app.router.ts which is responsible to complete routing.  In this file, I have to import three ( ModuleWithProviders, Routes, RouterModule)modules which is below.

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

I also need to define create page component like below. So that I can include routes variable.

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

Addition of Routing file

Now I have define a routes array. So that we can store all routes in this variable like below.

export const routes: Routes =[
{path:'home', component: HomeComponent},
{path:'about', component: AboutComponent},
{path:'contact', component: ContactComponent},
];

export const routing : ModuleWithProviders = RouterModule.forRoot(routes);

Now app.router.ts file is ready finally add to app.module.ts & import module routing using below code.

import { routing } from './app.router';
imports: [
    BrowserModule,
    FormsModule,
    routing]

Now finally add the navigation to the app.component.html. So the code will look like below.

routerLink=’home’ will generate the link for the home component & “routerLinkActive” will add the active class on the active route.

One more thing needs to add the <router-outlet></router-outlet> so that all component will show their data in it.

Finally, you can view the output.

Above code works in below video

Demo code

The post angular 6 tutorial for routing and navigation appeared first on Postnidea.

Data is very important for an organization. With the help of data, an organization can generate a lot of business. It works same as like fuel for an engine. Quality of data will increase your business. But the question comes out how to collect data. There are various ways you can collect the data for our organization or business. There is a lot of platforms that provide you paid data.  They charge a small amount of money & will provide you a data. Another way to scarp data from document, website or text file.

Data scraping is that way from which you can extract the required data. The data available on the web pages, XML feed, post feeds but there is a no way to save data in a required format so that it can easy to navigate  & usage. With the help of data scraping, you can extract & save data in the data source and can be used for our business strategy.

Why people do scrap

• collect the current price of the products so that competitors can analyze the market.
• Get always updated data when no API  communication source is available.
• Generate the business lead from the contact details.
• survey usage so  that you can collect the poll data

How can be achieved?

There is different language platform provides a different way. I belong to PHP so, I will show a method that used PHP.  With the Use of PHP, you can use three-way from which you extract the data.

• Document Parsing
• Jquery Like PHP Library(simple_html_dom)
• Regular Expressions

Before explaining above three techniques I want to take some HTML structure. So that I can use in explaining techniques.

Above code will display a list of users. Now I try to extract above users & show in the array.

Now before starting this, we need to get the html structure using URL. In PHP there is two functions are available which get the HTML of the page using URL file_get_contents, another using curl. Curl is very effective because it works faster, extract HTML structure even SSL available. So, Now I create a function return an HTML structure of the page using URL using curl.

Now with the use of above function, you can get the HTML structure of the page. Now I  explain you data extraction technique one by one.

PHP Document Parsing

It simply loads the HTML document & parses into a tree. You can simply say it convert HTML document to XML. With applying query you can extract the data. But its’s time-consuming process because first it loads & parses structure then your query will work. For long HTML structure document, it consumes a lot of memory. Now I show example code that will show you how it works.

Jquery Like PHP Library(simple_html_dom) for data scrap

It’s also a same above like document parsing. But With the help of class like simple_html_dom, Scraper, hQuery make easy to use. If you are comfortable with jquery then the class will make your life easy. They work like just a jquery functions. Now I show you an example that uses the simple_html_dom library. You can download library using below link & include in our code.

https://sourceforge.net/projects/simplehtmldom/

Regular Expressions

It’s very fast processing data scrap techniue. It’s not parsing the HTML structure into XML or tree. It treat HTML structure as string & perform serach operation. But for creating regular expression according business logic it’s very time consuming. Currenty I have taken simple structure.

Now finally I will recommend regular expression technique if you plan for large data extraction. Last but not least never use the browser for data extraction always try to use terminal or command prompt for data scrapping so that your script will run for the longtime & data will be extracted without distortion.

The post php data scraping techniques appeared first on Postnidea.

Most of time designer & developer both are working on the WordPress projects. But if the designer has a little bit knowledge of PHP & WordPress basics then he can also complete project itself. In that case, an organization can save the developer efforts & the saved efforts can utilize on urgent tasks. Now today I have shown you few WordPress plugins can make your WordPress development faster.

Few important things need to do to start WordPress project.
– When you start WordPress installation then always use a unique prefix for the WordPress database table.
– Always set our custom keys
– Whenever you customize MySQL query then always use $wpdb->prefix.

1. Visual Composer

It’s paid plugin but it has most important features. A normal user can also design our website without the need of a designer. It’s already have so many shortcodes like the post, taxonomy, slider, apply CSS properties. There is a problem it saves page content in the database. So there is need to make changes very care full. Always need to enable page revision.

More Info

2. contact form 7 or gravity form

Forms are common parts of the web application. Contact form 7 & gravity form are two plugins that will helps the user in creating form. Contact Form 7 is a popular free plugin most of WordPress website use contact form 7. Gravity form has extra features due to these features it’s paid. In Both form plugin, you can integrate our custom HTML
More Info More Info

3. woocommerce

E-commerce & blog a normal requirement of client every client. WordPress already have blog functionality. But not have e-commerce functionality. So, for implement e-commerce, there is need to add another plugin. So, woocommerce is a plugin that enables e-commerce functionality. It’s very old plugin so it has a huge amount of support.

More Info

4. Yoast SEO

Once the website is complete then marketing of a website is very important. If the website can’t generate the revenue and customer then it’s not beneficial. For search engine optimization purpose on page optimization very important. It will help in SEO. Yoast SEO plugin which enables the SEO features on your WordPress project.

More Info

5. Custom Post Type Maker

When you start the custom application in WordPress then always a requirement of a custom post like a portfolio, team, etc. So “Custom Post Type Maker” plugin which helps to create custom post type & taxonomy.

More Info More Info

6. advanced custom field

It’s the plugin which extends you custom post functionality. With the help of them, you can create the meta fields, repeater fields. It provides an easy interface so that non-developer user can also extend the project functionality.
More Info

7. Fast cache

It will help in the performance of your WordPress project. It enables cache on your project so that most of the pages serve for the customer from the cache so, that your server or hosting resource become save. In short, you can get great performance with short of resources. If you can afford paid version then you can get the CDN & database optimization & cache features.

More Info

8. wp security

Once your website is ready & running in live mode or real world then security is very important. If your website down for a day then it’s a retarded lot of revenue even left bad impressions on the visitors. wp security plugin which provides the various types of security like file security, database security, login lockdown session exploiting & many more.

More Info

9. migrate DB

It’s common plugin used by most of the developer’s because when you try to replicate current working website on our local then it provides you database according to your local URL. Mainly it helps in replacement of the URLs. So that you set up website locally faster.

More Info

10. qTranslate X or WPML

If your website is multi-language then above both plugin great helps in translating. You can provide the translation for each language so that it will show the translated string for your user according to their locality.

More Info

11. BuddyPress

It helps to create networking website. Its provide a great feature of social networking website like activity, share, groups, pages & create connections between each other. You can also extend their functionality by overriding theme or plugin.

More Info

The post Top 10 WordPress plugin make development faster appeared first on Postnidea.

WordPress provide extendability in our functionality. Due to this developer have the flexibility to modify it according to client requirement. Sometimes if you want to provide good user interface using WordPress component like editor, media. A Very common using component is WordPress editor. Whenever developer has task to provide HTML formatted text area. In that situation developer always use existing component like wp_editor. Its good & easily implemented. One advantage also there when the WordPress update same time it will also update.

You can easily apply the editor on the text editor using below example.

<textarea id="about_us"></textarea>

Add code in our plugin or functions.php

<?php wp_editor( "loaded content", "place your editor id without #", "setting array"); ?>
<?php wp_editor( $content, $editor_id, $settings = array() ); ?>

With the help of above code, you can populate the WordPress editor in the text area. But Its better for single and static textarea. But if you have multiple textarea then need to write to code for each textarea. So the code will increases. But the code review perspective code should be minimum for the requirement. It also fails when you have dynamic text area created using the jQuery. In that situation, it’s not loaded. So there is a need such an API that provides the generate the wp_editor using javascript.

Now for removing above issue WordPress release a new version of editor API. With the help of that, you load wp_editor using javascript. Due to this developer can load the editor using javascript. It’s very easy to load wp_editor on the text area with the usage of below steps.

First of all, need to enqueue the editor in the functions.php or plugin file like below

<?php wp_enqueue_editor(); ?>

It load the all js files related to wp_editor. Now you can load the editor in our js file where ever you want. New release provide the below functions.

    wp.editor.initialize();
    wp.editor.remove();
    wp.editor.getContent();

You can review code of new release and modify our js according to it.

(See wp-admin/js/editor.js for more info.)

Now the developer has more flexibility to add wp_editor on dynamically generated textarea. Due to this, you can create page builder like functionality. Due to this feature WordPress also add the editor in the widget section in the latest release.

The post wp_editor implement using javascript on dynamic multiple textarea appeared first on Postnidea.

In WordPress already so many hooks & filter available with the help of that you can customize the wordpress according to our needs. But there are some customizations that are required more tricky solutions. For handling ajax request WordPress already define our rules & standards but sometimes there is a need to performing ajax request on the default page saving. For the javascript WordPress uses js enqueue
function with the help of you can attach javascript files & functions. For creating ajax request action WordPress uses two below functions

When you calling the actions publically the use the below functions. There is no need requirement of the login.
admin_post_nopriv_{action_name}
If you want action to execute only when the user login.
admin_post_{action_name}

If you want to call an action on login or without login then use both functions. Now I show you how to call the action in our Ajax request.
http://your_host/admin-ajax.php
On above URL you can pass the action: name using a post or get request then execution of the action occurs. But some problem comes due to customization then there is a need a tricky solution. You can see the below problem.

Problem:

We need to add some extra fields (custom fields) on WordPress backend page. When a user clicks on “publish” button then we call the API & values fill with the response from the API then we submit WordPress page form. We implemented all but page always goes to Draft.

Solution:
In a below code post status select box I have check if there is user select “Draft” I set the draft otherwise we put the status the publish so that we have to fix that problem. The above-explained things done by function “check_status”.

$("#publish:button").click(function(){
	$.get("url").done(function(data){
		if(check_status()){} else{
		$("#acf-field-region").after("");
		}

		$(document).find("#publish").prop("type", "submit");
		setTimeout(function(){

		$("#post").submit();

		},100);

		return false;
	})
	event.preventDefault();
});

function check_status(){
	var status=0;
	jQuery("#post_status option").each(function(){
		if(jQuery(this).val()=="publish"){
			status=1;
		}
	});
	return status;
}

The post wordpress posts validation using ajax in backend appeared first on Postnidea.

For any product, document ion is very important. When you develop a product then only you know how its work & how to use. But if someone new person tries to use then he can’t use it so, in that case, your product useless for the user. So whenever you develop any product there is need to create a proper documentation. The documentation should cover below points.

About product

In this section describe our product completely like “about product”, “Why you made it”. If you develop something new product then there is no need to a comparison. If some product already exists then there is a need for comparison so that user can compare it. If a user uses an already product and your product have something new and better than user remve/uninstall our product & try your, In that situation, if your product works better than user always use your product if he fails then he use our existing product. So there more important to include about a product, advantage, disadvantage last but not least comparison.

How to use it

It’s very important section so it’s documented very carefully. There is need to clarify more clearly so that user can easily understand. There is a need for more graphics & text so that user have a clear idea. If your product is digital then nowadays different platforms like youtube, SlideShare, GitHub can help you. This platform provide you an area in which you show graphics, picture & animation so that product user can easily understand & use it.

Reviews

In this section provide the way (review submit form, toll-free number, or any number) through which user can provide the reviews. With the help of reviews, you can improve your product. Because mistakes make perfect so it’s more important.

I review many plugins of WordPress the author writes very good & usable plugins but they fail only the documentation. Now WordPress provide a help section on top of the screen so take help of that you can provide help text & animation on each page.

start with creating simple, so I write code for creating a plugin which is below

Now the plugin is created but only its shows in the plugin list now there is a need to links on sidebar menu so that user can move on the pages by clicking on that. Now below code add two menus in admin sidebar menu. The below menu also connected with function my_magic_function & my_magic_function1.

Now Menu appears in the sidebar now on click on menu need to redirect on the page now I write a below code which creates the page on which user can redirect.

Now everything gone fine now the small plugin is ready but there is scanty of documentation now below code add the help text in above screen.

Now when you install this plugin in our wordpress set up then you can see the demo. I also attached the youtube video on which you also see the demo.

You can also browse the complete code by click on next button
code

The post Product documentation : with use of wordpress contextual help appeared first on Postnidea.

Nowadays e-commerce stores more popular because every seller wants a store. In e-commerce business scale not matter there is small scale business or large scale business. I have seen in every ten customers 2 or 3 customer demand for the online store development. When such type requirement reaches the technical manager then he always thinks how to move towards the development weather develop store using core development or choose an any CMS like Magento, opencart, woocommerce, Magento, oscommerce, cscart, prestashop. If he moves using core development then there is required more time everything made from scratch and most of the time gone in testing. In other hand client started marketing so he wants our product as soon as possible in that case technical manager have pressure so, the only option left to choose any CMS so that I can be completed on time. You can’t choose any cms without any complete requirement so, before choosing any cms put out the below question towards the client.

• How many products you want to sell
• you have an existing store and want to migrate it or want a fresh store.
• If customer have existing store then evaluate their traffic
• Try to collect inform regarding store built on which technology like any opensource or core. If it’s on open source then try to evaluate customization
• existing store currently integrated with any android APP or any API
• last but not least you want to launch your store on which type hosting is it shared hosting, dedicated hosting or dedicated server.

After finding the answer you can review below information which can help you. I describe below important information regarding each CMS.

Woocommerce

The base of woo commerce is WordPress so it’s good for the less number of products. Also, it’s not more secure if want secure then there is need to add more security measure. It’s chocked out when a number of user & their visits increases. But there is enhancement is easy because a lot of plugins available that can enhance the functionality. The default woocommerce  full fill most of the requirement but if still required then you can it. Wocoomerece follows class based structure & easily override the template in your theme. Its working fine in all hosting because it handles small e-commerce business.

Opencart

Opencart follows the MVC (model view controller) and another component also maintains language so that you can manage multiple languages just putting the separate files for each language. Its MVC based so there it’s easy to understand for every programmer. Its maintain the standard like view only contain represent part same model communication with the database so each query will be found in the model.

controller work as routing & execution. For enhancement, there is need programmer. But it’s more secure & has a capacity to holds a number of products & customers. It’s working fine with dedicated hosting or dedicated server. On shared hosting, it’s unable to handle more traffic So it’s required more resource but with that, it’s more secure & handles more powerful.

Oscommerce

It’s oldest e-commerce CMS so its follows core class & function-based structure. It’s also good but its unable to handle a large number of products. When your products count goes greater than 1000 then its load slowly & take a lot of time rendering data, so visitor can’t wait to move another one, in that case, you lose it business. Now there latest build they launched the cache version that can enhance but the previous version has the problem. So it’s also better for the medium scale business. There is one more thing it provides less amount of payment support for new payment & delivery option need to integration.

Prestashop

It’s used most like CakePHP structure. Its maintain the separate view section, class for database & controller same as above controlling route. One most powerful feature is that it’s used cookies & cache for maintaining the data on the visitor side. The Prestashop community also provides the module generator so that its easy for a developer for a cretae new module. It also provides most of the payment, delivery social integration inbuilt So there is no more requirement of development. It has a great capacity to handle near about 3000 products & 50,000 customers without consuming a lot of resources. So it’s better.

Magento

If I talk about the performance it has the same as PrestaShop but it’s required more resource. But if you used a dedicated server or hosting then it definitely works for you. It follows the Zend framework so there performance better previous one but the problem only is that it consume more resource. But its most powerful for large amount business it handles more number of user & products.

The post top ecommerce open source list : how to choose best one appeared first on Postnidea.