5 cool chrome extension for developers

Chrome extension for programmers

Although there are many extension in google chrome that is helpful for developers.
but I am going to share Five of such extension which mostly used by developers during development.

So following list of Five Cool Chrome extension for developers. that will change a way of development for some instant.

  1.  Extension Grammarly chrome 
    This chrome extension Check your spelling and grammar as you type. Boost your credibility everywhere you write!
    -> It helps when you writing some response to Client or PM on AC.
    -> It helps when you writing Email.
    -> it is helpful for PM or VPs too.
    -> you can check it here
  2. ApplicationPostman
    Supercharge your API workflow with Postman! Build, test, and document your APIs faster. you can check your custom API response and result in better structure format and
    -> you can check your custom API response and result in better structure format and
    -> you can check your custom API response and result in better structure format and many more.
    -> you can send POST, GET, PUT request to your API.
    -> lots of developer already using it.

    you can check it here

  3. Extension SessionBox
    Using websites with multiple accounts at the same time is made easy. Create an independent tab with a click of a button.
    -> when we need to test site with multiple user functionality, like we do in rtMedia. when we want to check BuddyPress functionality, for Example to check friend request functionality.
    ->  SessionBox help to create multiple session on single browser. simply we can say multiple User login in single browser tab.
    -> very useful you can get it here
  4.  Extension Papier
    Open a new tab and trap your best thoughts. got something in mind? don’t open sublime.
    -> with Papier you can start writing in new chrome tab. it provide a interface to write on new tab in chrome.
    -> sometime it save time when you have something in mind and you want to check that manual again and again.
    -> you can get it here
  5. Extension Website IP
    Simple script which places the IP of the current website in the bottom right.
    -> This one helped me once but I think very useful for @Sys and @Devops team to check site source IP on the browser itself.
    -> very helpful when we working with redirection on site.
    -> you can get it here

    Guy’s still there are many extension that can make our Work easy and fast. If you have the track of any chrome extension that can make work fast. or that is in your use right now please share on the comment.

Simple five star rating with HTML and CSS

Five star rating

For making and implementing star rating.  we use many big Plugin. but understanding code and customizing that plugin is the big issue. we face horrible when we look into Code of that plugin.

Here I am showing you a simple way to implement star rating with the help of HTML and CSS.

Superman: What i need ?

  • Batman: Two Star from sky 😉

   

Superman: Now what else i need ?

  • Batman: Simple HTML code to show five Star in position.
<div class="star-wrapper">
 <span class="rating">
 <input id="rating5" type="radio" name="rating" value="5">
 <label for="rating5">5</label>
 <input id="rating4" type="radio" name="rating" value="4">
 <label for="rating4">4</label>
 <input id="rating3" type="radio" name="rating" value="3">
 <label for="rating3">3</label>
 <input id="rating2" type="radio" name="rating" value="2" checked>
 <label for="rating2">2</label>
 <input id="rating1" type="radio" name="rating" value="1">
 <label for="rating1">1</label>
 </span>
</div>

Superman: What else man ?

  • Batman: Style HTML in better manner. Use above stars in the better way to implement this star rating.  One thing keeps in mind don’t make it complicated as like always.
 .star-wrapper {
    padding: 20px;
    margin: 100px auto;
    width: 400px;
    min-height: 200px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    background-color: #fff;
}
.rating{
    overflow: hidden;
    vertical-align: bottom;
    display: inline-block;
    width: auto;
    height: 30px;
}
.rating > input{
    opacity: 0;
    margin-right: -100%;
}
.rating > label{
    position: relative;
    display: block;
    float: right;
    background: url('star-off-big.png');
    background-size: 30px 30px;
}
.rating > label:before{
    display: block;
    opacity: 0;
    content: '';
    width: 30px;
    height: 30px;
    background: url('star-on-big.png');
    background-size: 30px 30px;
    transition: opacity 0.2s linear;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating:not(:hover) > :checked ~ label:before{
    opacity: 1;
}

Superman: Now can you show me the result how it will look like.

Batman:  Check here…

PHP Introduction – PHP Tutorial

PHP Introduction

PHP (recursive acronym for PHP: Hypertext Preprocessor) is a server-side scripting language that runs on the server. It is a widely-used open source programming language for web development.

What is PHP ? 

  • PHP is an acronym for “PHP: Hypertext Preprocessor”
  • PHP is a widely-used, open source scripting language
  • PHP scripts are executed on the server
  • PHP is free to download and use

Feature of  PHP ? 

  • PHP is Object oriented language
  • PHP can generate dynamic page content
  • PHP can create, open, read, write, delete, and close files on the server
  • PHP can collect form data
  • PHP can send and receive cookies
  • PHP can add, delete, modify data in your database
  • PHP can be used to control user-access
  • PHP can encrypt data
  • PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
  • PHP is compatible with almost all servers used today (Apache, IIS, etc.)
  • PHP supports a wide range of databases
  • PHP is free. Download it from the official PHP resource: www.php.net
  • PHP is easy to learn and runs efficiently on the server side

PHP Syntax

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>

        <?php
            echo "Hi, I'm a PHP script!";
        ?>

    </body>
</html>

Custom popup with css and jQuery

How to make Custom popup with css and jQuery ?

To show popup we every time used jQuery( popup ) like : BJQS, FANCY BOX etc external libraries. sometime these libraries  are very much large or with many unwanted stuff.

so question comes, what to do at that time when we want simple popup?

It’s really simple you just need to follow three Steps:-

  1. Include this html in our websites any where in footer, header or body
    <div id="custom-div-display" class="custom-content-css">
         <div id="contetn-with-css">
              <a href="#" id="hide-the-content">close</a>
              <h4>custom popup</h4>
              <p>here you can show you custom content</p>
         </div>
    </div>
    
  2. Copy this code and past as it in you j Query file( it will show popup on each time you refresh you screen )
    jQuery(document).ready(function($){
    
     jQuery("#custom-div-display").show();
    
     jQuery(document).keyup(function(e) {
           if (e.keyCode == 27) jQuery("#custom-div-display").hide();
     });
    
     jQuery("#hide-the-content").click(function(){
          jQuery("#custom-div-display").hide();
     }); 
    
    });
  3. Copy this css in to you style.css file:
    .custom-content-css {
     z-index: 999;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     display: none;
     position: fixed;
     background-color: rgba(0, 0, 0, 0.85);
     color: #aaaaaa;
     opacity: 30;
     filter: alpha(opacity = 50);
     }
     
    #contetn-with-css {
     width: 30%;
     height: 30%;
     position: absolute;
     color: #000000;
     background-color: #ffffff;
     /* To align popup window at the center of screen*/
     top: 40%;
     left: 50%;
     margin-top: -100px;
     margin-left: -220px;
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     padding: 80px;
     }

    And now every thing is done just go an refresh you websites it will show popup every time you reload you website.

Easy Pear Installation | Install pear package on Mac OSX

Pear was problem 😓

I am a PHP & WordPress developer and just shifted to mac first from windows than Linux. More or less I know that OSX is a Unix-based command line.

Now I need Pear to get installed on my Mac to install Phpcs for code formatting and code standardization.  I searched a lot and found many tutorials but seems non-work well for me so after gone through deep google search and exploration for pear installation on mac. I thought why not to make one specific helpful tutorial for mac beginner.

How to Install Pear package on Mac?

To Install pear on mac OSX the following step needs to get followed.

Step 1: come to home directory with cd command
i.e your user home directory

Step 2: Check if you have pear

pear version

Step 3: Use curl as shown below to download the go-pear.phar file or just download the go-pear.phar file via your browser.

$ curl -O https://pear.php.net/go-pear.phar
$ php -d detect_unicode=0 go-pear.phar

You’re now ready to configure PEAR for installation

Step 4: First you need to change the Installation Base

Don’t forget to follow these two steps here

  • So type 1, and then press Enter
      •     Enter /usr/local/pear
      •    Press Enter

Then, you will need to change the Binaries directory.

  • Type 4, and then press Enter.
      • Enter /usr/local/bin
      • Press Enter.

Step 5: Once you have changed the Installation Base and the Binaries Directory, press Enter to install PEAR.

Step 6: Now pear is installed and one thing remaining is you will have to add it in system environment variable path
you can add this in your .bash_profile which is an invisible file in your home directory.

 

check the pear path by command

which pear

It will show you path like this

/Users/USERNAME/pear/bin

Step 7:  So Now go to Home directory first using cd command and open .bash_profile

vim .bash_profile

Step 8:  So the PATH variable line will look something like this, each path is separated by a colon and finished with the variable $PATH, in the example below the pear path is the 2nd one

export PATH="/Users/USERNAME/pear/share/pear/:$PATH"

Don’t forgot to change username with your username in export path of pear.

Step 9: Refresh the profile

source .bash_profile

Step 10:  Verify

pear version

you will get installed pear version on terminal.

 

If you want to explore more you can check these links listed below

https://coolestguidesontheplanet.com/installing-pear-on-osx-10-11-el-capitan/

http://pear.php.net/manual/en/installation.getting.php