code prettify

Sunday 14 February 2016

A link I found highlighting principles that guide us in development for an ethical web

I found this very simple yet very clear list of principles that can be kept in mind while developing for the web.

https://ethicalweb.org/

Excerpt from above link:

"As web developers, we are responsible for shaping the experiences of user's online lives. By making choices that are ethical and user-centered, we create a better web for everyone."

Hope it helps and guides us in creating a better web for everyone :)

Saturday 13 February 2016

Using git pre-commit hook for php and js syntax check

This is a followup from my two previous posts on php and js git pre-commit syntax check where I had mentioned how to check for php and js syntax independently using pre-commit with git.



But what if we wanted to check for both php and js syntax at same time while committing. So, I used the scripts used for both and combined them. Below is the final result.

#!/bin/bash

commit_error=false

ROOT_DIR="$(pwd)/"
LIST=$(git diff-index --cached --name-only --diff-filter=ACMR HEAD)
ERRORS_BUFFER=""
for file in $LIST
do
    EXTENSION=$(echo "$file" | grep ".php$")
    if [ "$EXTENSION" != "" ]; then
        ERRORS=$(php -l "$ROOT_DIR$file" 2>&1 | grep "Parse error")
        if [ "$ERRORS" != "" ]; then
            if [ "$ERRORS_BUFFER" != "" ]; then
                ERRORS_BUFFER="$ERRORS_BUFFER\n$ERRORS"
            else
                ERRORS_BUFFER="$ERRORS"
            fi
            echo "Syntax errors found in file: $file "
        fi

        # Check for xdebug statments
        ERRORS=$(grep -nH xdebug_ "$ROOT_DIR$file" | \
                 sed -e 's/^/Found XDebug Statment : /')
        if [ "$ERRORS" != "" ]; then
            if [ "$ERRORS_BUFFER" != "" ]; then
                ERRORS_BUFFER="$ERRORS_BUFFER\n$ERRORS"
            else
                ERRORS_BUFFER="$ERRORS"
            fi
        fi
    fi
done
if [ "$ERRORS_BUFFER" != "" ]; then
    echo
    echo "Found PHP parse errors: "
    echo -e $ERRORS_BUFFER
    echo
    echo "PHP parse errors found. Fix errors and commit again."
    commit_error=true
else
    echo "No PHP parse errors found. Committed successfully."
fi

files=$(git diff --cached --name-only --diff-filter=ACM | grep "\.js$")
if [ "$files" = "" ]; then
    exit 0
fi

pass=true

JS_ERRORS_BUFFER=""

echo -e "\nValidating JavaScript:\n"

for file in ${files}; do
    result=$(jslint ${file} | grep "${file} is OK")

    if [ "$result" != "" ]; then
        echo -e "\t\033[32mJSLint Passed: ${file}\033[0m"
    else
        JS_ERRORS=$(jslint ${file})
        JS_ERRORS_BUFFER="$JS_ERRORS_BUFFER\n$JS_ERRORS"
        echo -e "\t\033[31mJSLint Failed: ${file}\033[0m"
        pass=false
    fi
done

echo -e "\nJavaScript validation complete\n"

if ! $pass; then
    echo -e "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass JSLint but do not. Please fix the JSLint errors and try again."
    echo -e $JS_ERRORS_BUFFER
    echo
    commit_error=true
else
    echo -e "\033[42mCOMMIT SUCCEEDED\033[0m\n"
fi

if $commit_error; then
    exit 1
fi

Store it in .git/hooks/pre-commit
Give it execute permission: $ chmod +x .git/hooks/pre-commit and it should be good to go :)

Sample output when I try to commit two php files and two js files with syntax errors:

Filenames with code content:

error.php


<?php
$
array = ;

another_error.php

<?php
var_dump(');

error.js

i =

another_error.js

i = k;

$ git commit -m 'Error Commit' error.php another_error.php error.js another_error.js
Output from above error commit:

Syntax errors found in file: another_error.php 
Syntax errors found in file: error.php 

Found PHP parse errors: 
PHP Parse error: syntax error, unexpected ';' in /var/www/html/error.php on line 2
PHP Parse error: syntax error, unexpected '');' (T_ENCAPSED_AND_WHITESPACE) in /var/www/html/another_error.php on line 2

PHP parse errors found. Fix errors and commit again.

Validating JavaScript:

JSLint Failed: error.js
JSLint Failed: another_error.js

JavaScript validation complete

COMMIT FAILED: Your commit contains files that should pass JSLint but do not. Please fix the JSLint errors and try again.

error.js #1 'i' was used before it was defined. i = // Line 1, Pos 1 #2 Unexpected character '(space)'. i = // Line 1, Pos 4 #3 Unexpected '(end)'. i = // Line 1, Pos 3 #4 Stopping. (50% scanned). // Line 1, Pos 3
another_error.js #1 'i' was used before it was defined. i = k; // Line 1, Pos 1 #2 'k' was used before it was defined. i = k; // Line 1, Pos 5

Above script can be further modified to format the output better but is helpful for basic php and js syntax issues and js standard checks in code :)

Friday 12 February 2016

Associating git hooks with js syntax check

This is a followup article from my previous post.


Here we will be using git pre-commit to check for syntax error while committing in JavaScript files.

We will need nodejs in our system. Please check https://nodejs.org/en/ for downloading and install steps.

Note: I am using ubuntu 14.04 for this setup.

Steps to add pre-commit JavaScript syntax check with git:

1. Use npm to install jslint package globally in your system.

https://www.npmjs.com/package/jslint

$ npm install -g jslint

This should globally install jslint in your system and can be referenced as below to check syntax error for any js file.

$ jslint sample.js

for (i = 0; i < 10; i++)
{
        sum += i;
}

Sample output from above command:
sample.js
 #1 'i' was used before it was defined.
    for (i = 0; i < 10; i++) // Line 1, Pos 6
 #2 'i' was used before it was defined.
    for (i = 0; i < 10; i++) // Line 1, Pos 13
 #3 'i' was used before it was defined.
    for (i = 0; i < 10; i++) // Line 1, Pos 21
 #4 Unexpected '++'.
    for (i = 0; i < 10; i++) // Line 1, Pos 22
 #5 Expected exactly one space between ')' and '{'.
    { // Line 2, Pos 1
 #6 Use spaces, not tabs.
    sum += i; // Line 3, Pos 1
 #7 Expected 'sum' at column 9, not column 2.
    sum += i; // Line 3, Pos 2
 #8 'i' was used before it was defined.
    sum += i; // Line 3, Pos 9
 #9 Expected '}' at column 5, not column 1.
    } // Line 4, Pos 1

Above info is quite informative and helpful to fix basic syntax errors, missing semi-colons, indentation etc.

Correcting the above errors to below code and running jslint again:

var i, sum = 0;

for (i = 0; i < 10; i = i + 1) {
    sum += i;
}

Output from jslint:

sample.js is OK.

Note: Please also refer rules and standards being followed by jslint for checking here. Makes a nice read. :)

2. Now that jslint is globally available, let us use it and create a pre-commit file.
I found below links which highlight the use of it in a script:

http://stackoverflow.com/questions/15703065/setup-pre-commit-hook-jshint
http://dev.venntro.com/2012/11/maintaining-consistent-javascript-with-jslint/

The only disadvantage I see in the script is that it only highlights passed and failed JavaScript files with names and does not specify the error in each.

So, I made a few changes to the script as below (highlighted in blue):

#!/bin/sh

files=$(git diff --cached --name-only --diff-filter=ACM | grep "\.js$")
if [ "$files" = "" ]; then
    exit 0
fi

pass=true

ERRORS_BUFFER=""

echo -e "\nValidating JavaScript:\n"

for file in ${files}; do
    result=$(jslint ${file} | grep "${file} is OK")
    if [ "$result" != "" ]; then
        echo -e "\t\033[32mJSLint Passed: ${file}\033[0m"
    else
        ERRORS=$(jslint ${file})
        ERRORS_BUFFER="$ERRORS_BUFFER\n$ERRORS"
        echo -e "\t\033[31mJSLint Failed: ${file}\033[0m"
        pass=false
    fi
done

echo -e "\nJavaScript validation complete\n"

if ! $pass; then
    echo -e "\033[41mCOMMIT FAILED:\033[0m Your commit contains files that should pass JSLint but do not. Please fix the JSLint errors and try again."
    echo -e $ERRORS_BUFFER
    echo 
    exit 1
else
    echo -e "\033[42mCOMMIT SUCCEEDED\033[0m\n"
fi

3. Save the above script in your git pre-commit file as below:

$ cd /project/directory/
$ vim .git/hooks/pre-commit

Paste the above content and save it. Then give execute permission to it.

$ chmod +x .git/hooks/pre-commit

And we are done and ready :)

Trying a sample case:

I have two js files named sample.js and another.js with below content:

sample.js:

var i = j;

for (key in names) {
    echo names[key];

}

another.js:

var i = []

Lets try to commit them:

$ git commit -m 'Error Commit' sample.js another.js

Below is the pre-commit check output:

Validating JavaScript:

JSLint Failed: sample.js
JSLint Failed: true.js

JavaScript validation complete

COMMIT FAILED: Your commit contains files that should pass JSLint but do not. Please fix the JSLint errors and try again.

 sample.js #1 'j' was used before it was defined. var i = j; // Line 1, Pos 9 #2 'key' was used before it was defined. for (key in names) { // Line 3, Pos 6 #3 Cannot read property 'kind' of undefined // Line 3, Pos 10

 true.js #1 Expected ';' and instead saw '(end)'. var i = [] // Line 1, Pos 11

The output can be formatted a little bit better to place each line error in a new line of its own. But this simple tool is pretty handy for checking js errors while committing :)

Sunday 7 February 2016

How to generate text representation of an image using PHP?

We will learn how to convert an image to its text representation using PHP that can be used in an html page (if any such requirement arises in your application or just for fun sake :) ).


The steps followed to convert the image to text representation are:

1. Get the width and height of the image to be converted.
2. Loop through every pixel value in the image.
3. At every pixel value, find the color at that position.
4. Apply that color to a # symbol we use to represent that pixel.
5. Finally we get the text representation of the image represented by # (hashes).

Code:

<html>
    <body style="background-color: #000000;">
        <tt>
<?php

$img = imagecreatefromjpeg('red_leaf.jpg');
$dx = imagesx($img);
$dy = imagesy($img);

// Loop through each pixel in the image and check the color
// Then do something with that color data like display the # character
// at the appropriate color for each pixel.
for ($y = 0; $y < $dy; $y++) 
{
     for ($x = 0; $x < $dx; $x++) 
    {
         $col = imagecolorat($im, $x, $y);
         $rgb = imagecolorsforindex($im, $col);
         printf('<font color=#%02x%02x%02x>#</font>',
             $rgb['red'], $rgb['green'], $rgb['blue']);
    }

     echo "<br>\n";
}

imagedestroy($im);

?>
        </tt>
    </body>
</html>

Image used in the program:

Sample output can be seen here.

Cool isn't it :)

Friday 5 February 2016

Associating git hooks with php syntax check

Many a times we have faced this problem that when we commit something and it breaks something on the server due to some syntax error.
I know that these can be caught by IDEs and good editors, but sometimes there might be an syntax error introduced after a code merge conflict resolution and commit.

To address this, we can use git pre-commit hooks to check for any syntax errors in the to be committed files.

There is a good script I found which does this at https://github.com/ReekenX/phpcheck-git

Steps to add pre-commit php syntax check with git:

(Issue below commands in your console)

1. $ cd /project/directory/

2. $ cd .git/hooks/

3. Get the pre-commit script file from above github page or from direct link: https://raw.githubusercontent.com/ReekenX/phpcheck-git/master/pre-commit

$ wget https://raw.githubusercontent.com/ReekenX/phpcheck-git/master/pre-commit

4. Give execute permission to it.

$ chmod +x pre-commit

This should be it :)

Now if you try to commit any php file, it will display message about any syntax error. If there are, then it will specify the file, error and line number where the error took place and will abort the commit.

This small tool will help us in better checking our code before being committed :)

Thursday 4 February 2016

MVVM pattern as applied to Javascript


MVVM stands for Model, View and ViewModel pattern.

Application: Used in knockout.js library.

Role of each part:

Model - Handles the application's persisted data that is the data which the view page receives through an ajax request from the server(GET or POST). It can also be used to store the data which is passed to the page when the page is loaded for the first time with some data content, to be used later on client(browser) side.

View - It simply represents the html content. Each View is associated with a ViewModel. View changes according to changes in ViewModel(It's next in list).

ViewModel - It is basically a model for the view. It is a code representation of the data and the supported operations on it. The ViewModel is not usually used as a persisted storage medium but is meant to hold dynamic data and handle related operations. It basically holds the unsaved changes the user is working with. The data can be saved by posting it back to server.

                     ViewModels in knockout.js are implemented by POJOs(Plain Old Javascript Objects). For instance, if you are dispaying a list of todo notes(View), then your ViewModel might hold a list of such note objects and expose several functions to modify/add notes. Display of notes changes according to changes made to notes ViewModel.

Wednesday 3 February 2016

Getting started with Redis

As per redis home page,

"Redis is an open source (BSD licensed), in-memory data structure store, used as database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs and geospatial indexes with radius queries."

Redis Installation Steps:

I am trying the below steps in an ubuntu 14.04 system. Open the terminal and issue the below commands:

1. Get the latest tar zip for redis (http://redis.io/download)

$ cd /path/to/download/directory/
$ wget http://download.redis.io/releases/redis-3.0.7.tar.gz

2. Untar it and issue below commands:

$ tar xf redis-3.0.7.tar.gz
$ cd redis-3.0.7
$ make
$ sudo make install

Getting started with Redis:

1. Run redis server in one console:

$ redis-server

or as a background process:

$ redis-server &

2. You can interact with redis now using the built-in client in console:

$ redis-cli
redis> set name Satej
OK
redis> get name
"Satej"

If you are a newbie at Redis like me, give a try at the online interactive tutorial: http://try.redis.io/. It's real fun and easy.

I learnt some basic data types and their related operations from the tutorial:
- integer
- string
- list
- set
- sorted sets
- hashes

What is scrolljacking?

Excerpt from http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
"Scrolljacking basically means we replace native scrolling (what you’re used to) with targeted scrolling: when the user initiates a scroll, either with their mouse or keyboard, scrolljacking takes them to an exact vertical point on the screen (for example, the top of the next content container). When done properly, scrolljacking can be a part of a unique, enjoyable online experience."
The above definition makes it quite clear what scrolljacking is.

Excerpt from http://www.sitepoint.com/scrolljacking-accessibility/
"Recently, Apple came up with the new concept of ‘scrolljacking’ in their product pages. This is method that ‘re-wires’ the behavior your browser’s scrollbar to display the content as a set of slides — instead of its traditionally vertical movement."
Note: There can be accessibility issues with scrolljacking as has been mentioned in the link above.

A jQuery plugin I came across that helps in achieving this: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/