February 2016

CSS input and textarea ::placeholder pseudo element can be used to add a placeholder text in input element. The text is set using input element read more

HTML5 input tag’s placeholder attribute can be used to add a placeholder text (hint which disappears automatically) in input element. Before HTML5 people used to read more

If you are using facebook plugin in workdpress, it adds opengraph meta tags in wordpress posts. At times we want to remove or customize some read more

Sometime we need to view an older version of a file in SVN. Here are two approaches which can be used. Using svn cat To read more

Polymer is a web components library and can be used to create custom elements. The library works on all major browsers (using polyfills) even if read more

Polymer can be installed on Linux (or Mac) using bower on command line. It generates web component and polymer javascript files which can be included read more

CasperJS on Ubuntu linux can be installed using apt-get or node npm. We’ll use npm to install casperjs in this tutorial. Here are the steps read more

CasperJS on Mac can be installed using Brew or node npm. We’ll use npm to install casperjs in this tutorial. Here are the steps to read more

Phantomjs on Ubuntu linux can be installed using apt-get or node npm. It can also be downloaded from phantomjs site. We’ll use npm to install read more

Phantomjs on Mac can be installed using Brew or node npm. It can also be downloaded from phantomjs site. We’ll use npm to install phantomjs read more

Bower is a package manager for web front end frameworks, libraries, assets and utilities. Bower can manage components that contain HTML, CSS, JavaScript, fonts and read more

Installing node on Mac require brew (Homebrew). If you have not installed it, you can follow Brew installation guide. Here are the steps to install read more

HTML import is part of web component framework and its specification is in Draft stage. HTML import can be used to import another html document read more

To print associative array value in double quoted string in php, the following syntax using curly braces can be used. {$arr[‘key1’]} Note that curly braces read more

CSS annotation !important will override all other styles (irrespective if specificity). Note that using annotation !important is discouraged and should be avoided. Here are some read more

Angularjs filter can be used in angular js expression using pipe. Here is an example of AngularJS inbuilt filter date to format Javascript Date to read more

AngularJS ng-bind-html directive can be used to insert html into an element. Here is sample usage: Few points to note: One need to include ngSanitize read more

In CSS adjoining vertical margins of two or more boxes (these may or may not be siblings), can combine to form a single margin. These read more

Angularjs basic ajax example to display value returned from ajax server call. We’ll use controller, template and $http for this tutorial. Angularjs Ajax GET example read more

CSS (CSS3) property resize can be used to make a div (or other block level element) resizable by clicking and dragging bottom right corner of read more

Mac by default show scroll bars automatically based on mouse pointer. This setting can be changed to always show scroll bars. Note that this settings read more

CSS overflow property decides how to display content if it goes beyond the boundaries of a block (e.g. when inside div). Note that overflow applies read more

Javascript variables can be local or global scoped depending upon how the are declared. In HTML all global scoped variables becomes part of window object. read more

Div (when a block level element) or any other block level element can be aligned in center of its container using property margin-left:auto and margin-right:auto. read more

Text can be aligned in center of a div or any other block level element using CSS property text-align:center. Note that this property applies of read more

Javascript function can be used to define classes. Inside classes, member properties (containing functions, objects, etc.) can be defined either as member variables in constructor read more

Javascript classes can be created using function. Here a function can be instantiated using new keyword. The member variables and methods in function can be read more

A Javascript function is also an object of type function. So it can be used as an object and can have member variables. Also note read more

Most wordpress php files are in directory wp-includes in wordpress root directory. This can be used by hackers to try to access these directly. This read more

When we use display:inline-block to place elements next to each other, by default their baseline is aligned to to parent baseline unless vertical-align property of read more

To align div horizontally, one solution is to use css float property. But a better solution is to to use CSS display:inline-block on all divs read more

CSS float property decides if an element should float left or right. It can take two value – float:left or float:right. Elements after a floating read more

On block level elements, the line-height property specifies the minimum height of line boxes within the element. Comment on inheritance In case font value is read more

Javascript onscroll event handler is called on every onscroll event. At times we want to ensure that it is not called again before a certain read more

Javascript onscroll event handler can be attach to any DOM element. Attaching it to document is a typical use case. But it can be attached read more

Sometimes we need to list only directories on Linux (or any other unix). Here are some approaches. List directories using ls and shell wildcard $ read more

Javascript does not have any sleep function. At times (e.g. to simulate a specific situation) we may need to sleep or delay the code for read more

Javascript setInterval can be used to make repeated calls to a function or code with fixed interval. If there is a possibility that function logic read more

Javascript setTimeout can be used to scheduled a function or code to run at a specified delay. This is pretty powerful API and can be read more

React ajax calls can be done in componentDidMount. Once we get the result, we can use setState to re-render the component. In case component can read more

To create a basic clock in React, we can use setInterval in componentDidMount and optionally clear it in componentWillUnmount if relevant. You may also want read more

CSS border property can be used to define border properties of an element. Few points to note: To inherit border from parent, value inherit can read more

Javascript/HTML event can be handled by more than one dom elements and after one handler, it propagate to next element. API Event.stopPropagation() can be used read more

Javascript/HTML events can propagate in two ways in DOM API. This is relevant when more than one element are listening on same event. Event propagation read more

CSS (CSS3) property can be used to set the opacity level of an element. It can have a value from 0.0 to 1.0 (default is read more

To post a form using jQuery Ajax, we can directly call jQuery .ajax() methods passing form data. The form data can be constructed using FormData. read more

At times we may need to add custom headers to a request for debugging purpose. e.g. You may want to display debugging messages when specific read more

HTML forms can have file type as input field to update and send files to server. To be able to handle file upload, it need read more

jQuery .text() method sets text for an element (after taking care of html entities) and .html() gets the html for a dom element. Combining these read more

jQuery .load() can be used to make an Ajax call (GET or POST) and load the results into an element by settings result into its read more

CSS attribute selector can be used to select DOM elements based on attribute presence of their values. We can use attribute selectors in multiple ways. read more

Sometime we need to manually trigger a click event on an element (e.g. button). Here are Javascript and jQuery code snippets for this. This is read more

Javascript code snippet to submit a form using POST to server and process returned data. Here when submit button is clicked we serialize whole form read more

Ubuntu Linux (version 14) uses upstart to manage processes. But not all services are converted to upstart. Some are using sysv init. Also note that read more

Docker can be used to install nginx and php5 (php-mpm) in a ubuntu container. We’ll cover docker running on Mac and Ubuntu Linux for the read more

Docker images are needed to create and run a container. These are be pulled from remote docker repository or can also be created locally. Here read more

In case you want to rerun a running container with different flags (e.g. -p port1:port2), you can follow these steps. Stop the container and commit read more

There are two types of services on Ubuntu Linux (Ubuntu version 14). One are upstart based and others based on sysv init. To check if read more

Utility update-rc.d is part of sysv init (package sysv-rc) on Ubuntu Linux. It can be used to manage services at boot time. It can be read more

Docker runs a separate Docker host (small footprint Linux VM) on Mac which is different from main machine. So any port which maps to container read more

PHP $_SERVER is an array containing information such as headers, paths, and script locations. To get current url we can use $_SERVER[‘REQUEST_URI’] and $_SERVER[‘HTTP_HOST’]. Here read more

React has many factory methods for inbuilt components like div, span, etc. Here is javascript code snippet which can be used to dump all methods read more

To find the file location for a node module require(‘module’)._resolveFilename can be used. Here is quick code snippet and its outcome. file = require(‘module’)._resolveFilename(‘react’) console.log(“react read more

Node script when run in limited environment (e.g. php exe, cron, etc.) can throw cannot find module error. The error may look like this: throw read more

To find the version of a node package one can use npm list (optionally -g for global). Another option is to use javascript code and read more

To print all methods of an object, we can use Object.getOwnPropertyNames and check if the corresponding value is a function. The Object.getOwnPropertyNames() method returns an read more

This tutorial is javascript version is React component tuorial with click handler – jsx version. It is recommended that you visit that tutorial before reading read more

React render can be written purely in Javascript without jsx. For JSX version of this tutorial you can visit React jsx hello world. Here is read more

Question: I see some React tutorials using React.render and some using ReactDOM.render. Which one should be used? React introduced react-dom package in version 0.14 which read more

Question: I see tutorials using JSXTransformer and babel in various articles. Which one should be used? React was using JSXTransformer to compile and transform jsx read more

Python xrange can be used to generate a sequence of numbers with desired start number and gap. It is often used in for loops. It read more

Python range can be used to generate a range of numbers with desired start number and gap. It is often used in for loops. Usage: read more

Arrow (=>) function expressions are shorter syntax compared to function expressions. Arrow functions are always anonymous. Here are some commonly used usage syntax patterns. singleParam read more

In case you get the following error in docker service start log (/var/log/upstart/docker.log) on Ubuntu Linux (14.04), [graphdriver] prior storage driver “aufs” failed: driver not read more

Javascript call() and apply() can be used to invoke a function. They are mostly same. The only difference is in apply arguments are passed as read more

A basic React components implement a render method that takes input data and returns what to display. For the purpose of this tutorial, it will read more

In Javascript to create an array of number from 0 to n-1, we can use spread operator. It is part of ECMAScript (version 6). Currently read more

React element can return only one element. In case you have the following code, you will get “Adjacent JSX elements must be wrapped in an read more

React JSX code can be compiled offline to transform into javascript code. This eliminates need to include babel code in browser. To see how it read more

React JSX code can be offline transformed into javascript code using babel compiler command line tool. You may also want to visit React JSX quick read more

JSX is a JavaScript syntax extension that looks similar to XML. It is used by React code and it is optional to use JSX. Everything read more

PHP array map applies the callback function to one or more arrays. In callback we can use a function or anonymous function. Here are some read more

CSS position property decides how an element will be places in document. It can have 4 values static (default), relative, absolute and fixed. Understanding position read more

CSS z-index property decides the ordering of elements when they overlap. Higher z-index mean it is closer to you and hence with appear accordingly. Few read more

Python itertools imap is efficient way of mapping and looping over a large iterable. Here is the usage for imap: itertools.imap(function, *iterables) The function should read more

Python itertools.ifilter is efficient way of filtering and looping over a large iterable. Here is the usage for ifilter: itertools.ifilter(function, iterable) The function should take read more

Ubuntu Linux (14.04) does not have ffmpeg in default package source repositories. ffmpeg can be installed using mc3man ppa (personal package archive) using the following read more

WordPress mysql query to dump all categories (id, slug, name, description, count) SELECT wp_terms.term_id, wp_terms.slug, wp_terms.name, wp_term_taxonomy.description, wp_term_taxonomy.count FROM wp_term_taxonomy join wp_terms on (wp_term_taxonomy.term_id = read more

WordPress mysql query to display all tags (id, slug, name, description, count) SELECT wp_terms.term_id, wp_terms.slug, wp_terms.name, wp_term_taxonomy.description, wp_term_taxonomy.count FROM wp_term_taxonomy join wp_terms on (wp_term_taxonomy.term_id = read more

HTML5 video tag (<video>) can be used to play a vide in HTML page. Here are some examples of video tag using webm and mp4 read more

Command line utility ffmpeg can be used to scale a video to a specific widht and height. Here are some examples. Resize to given width read more

Command line utility ffmpeg can be used to convert mp4 video to webm format on Mac or Linux. Here are quick steps for Mac. First read more

Python regular expression module can be used to replace a pattern in a string using re.sub. Basic usage of re.sub is: re.sub(pattern, repl, string, count=0, read more

Right click can be disable by attaching a even listener to contextmenu event. It can be done using jQuery or vanilla Javascript. disable right click read more

Ubuntu apt-cache policy can be used to find the sources of a package and their order. This can be helpful in case we are downloading/installing read more

Python regular expression module (re) can be used to find presence of a pattern in a string using re.search. Basic usage of re.search is: re.search(pattern, read more

Python elt library petl can be used to perform extract/load – reading/writing tables from files and databases. In this tutorial we’ll read a table in read more

Reading and writing files in python is very common use case. Here are some examples: Write to file using “with open()” Here file gets closed read more

CSS3 border-radius property can be used to make corners round of a block element. Border radius can have upto 4 values. Here is how a read more