Sunday, 3 February 2019

Start develop chrome extension using javascript in 10 minutes

  No comments
February 03, 2019


"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.

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

postnidea-weather-now
- images
-- icon-16.png
-- icon-32.png
-- icon-48.png
-- icon-128.png
-- loader.svg
-- no-internet.png

- scripts
-- jquery.min.js
-- popup.js
- popup.html
- manifest.json

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

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.

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.

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. 

Read More

Tuesday, 21 August 2018

angular 6 tutorial for routing and navigation

  No comments
August 21, 2018


Routing a very important part of any application. Routing is a way by which user can navigate your application. Routing is defined by the developer on which route what things need to serve towards client or user. On routing other hidden things also dependent like SEO & feeds. So Bad routing can spoil you application & leave a bad impression on the user. Different technology different way of routing. But front-end user experiences the same.

I have worked on PHP as well as the JS So, I can give the idea about two technologies. For PHP if you using any framework like Codeigniter, CakePHP they already have the option for routing. But If you create PHP application by using class structure then you can use already popular class Altorouter. I have so many options regarding the routing. For more information regarding Altorouter, you can click on the link.

For javascript I working on the angular. The angular has our library with the help of that Angular manage routing. Now today I will show you how angular 5 or angular 6 working. After starting of angular version 2 the angular start using typescript.

Now today I will show you how routing work in the angular 5 or angular 6. So for demonstrating routing in Angular 6, I have to create an application. So with the use of angular CLI tool, you can easily create a new project using the below command.


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.

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';

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.
Demo code

Read More

Sunday, 15 April 2018

php data scraping techniques

  1 comment
April 15, 2018

php data scraping techniques

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.

Read More

Sunday, 25 March 2018

Top 10 WordPress plugin make development faster

  No comments
March 25, 2018

Top 10 WordPress plugin make development faster

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

Read More

Saturday, 16 September 2017

wp_editor implement using javascript on dynamic multiple textarea

  No comments
September 16, 2017



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.

https://make.wordpress.org/core/2017/05/23/addition-of-tinymce-to-the-text-widget/
https://make.wordpress.org/core/2017/05/20/editor-api-changes-in-4-8/

(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.

Read More

Monday, 31 July 2017

wordpress posts validation using ajax in backend

  No comments
July 31, 2017

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;

}

Read More

Sunday, 12 February 2017

Product documentation : with use of wordpress contextual help

  No comments
February 12, 2017


For any product, documention 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

Read More