April 2016

CSS margin property specify the width of the margin area of a box. margin values margin property can be used to specify margin-top, margin-right, margin-bottom, read more

Javascript code to remove first item from array using arr.shift() Remove first item from array

Javascript code to prepend an item at the beginning of array using arr.unshift() Prepend one value to array

Javascript code to remove last item from array using arr.pop() Append one value

Javascript code to append one or multiple values at the end of array Append one value Append multiple values

CSS font-family is a list of font family names from which first value is used if present otherwise next value and so on. Here is read more

The CSS font-size property sets the font size of an html element. Example – font-size

The CSS font-weight property selects the weight of the font. The keyword normal is synonymous with 400, and bold is synonymous with 700. Values from read more

The CSS font-variant property can be used to select small-caps variation within font family. In a small-caps font the lower case letters look similar to read more

The CSS font-style property selects between normal (sometimes referred to as “roman” or “upright”), italic and oblique faces within a font family. Example – font-style

The CSS font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family. font values Few points to note: First three read more

CSS property pointer-events can be used enable/disable (default is enabled) mouse events on an element. If pointer-events is none for an element, the click event read more

CSS property content is used with the ::before and ::after pseudo-elements to generate content in a document. Example – display url after a tag text read more

CSS property clip (clipped region) defines what portion of an element’s border box is visible. The clip property applies only to absolutely positioned (position=absolute, fixed) read more

We frequently need to test css, javascript and HTML in old IE (internet explorer) browsers on Windows. This can be done using IE11 developer tools read more

Linux du command can be used to find disk usage of files and directories. Here are some handy du commands on Ubuntu Linux (or any read more

A clearfix class is a way for an element to automatically clear left and right float on its child elements. This eliminates the need to read more

Javascript event handler mousedown and mousemove can be used to make an element draggable without using any other library. This can be made to work read more

Step to create swap partition on Ubuntu Linux. It should work on any other Linux also. Create storage file (say 4GB) using fallocate for swap read more

Sometimes we need a large file with any content on Linux. This may be needs for benchmarking and testing purpose. Here are some ways to read more

Rsync can be used to sync directories and files from one machine to another. Sometime we want to see the progress and transfer speed. For read more

To find the inode number of a file on Linux/Unix the following approaches can be used. Find inode using ls $ ls -i file1.txt 412882 read more

Sometimes we need to truncate (make it size 0) a large opened file by a running process (e.h. php error log, apache error logs, custom read more

HTML li tag can be used inside ul or ol tags. Its closing tag is optional and it makes html more readable and less verbose. read more

CSS box-sizing decides if specified width, height, etc. will apply to content area of an element or to whole element including padding and border. Example read more

Swap space is the area on a hard disk which is part of the Virtual Memory. Swap space temporarily holds memory pages that are inactive. read more

Angular ngAnimate can be used to create animation effect using animation aware directives. Usage: Example – animate with ng-class This example uses ng-class to toggle read more

To merge two (or more) lists (arrays) the operator plus (+) can be used. It will append items of 2nd list to first list and read more

Angular ng-if directive removes or recreates a portion of the DOM tree based on an expression (true or false). Usage: Example – ng-if without animation read more

The CSS transition-delay property defines when the transition will start. It delays the transition from when it is applied. Example – transition-delay

The CSS transition-timing-function property describes how the intermediate values used during a transition will be calculated. In order words it describes transition effects like ease, read more

The CSS transition-duration property defines the length of time that a transition takes. Example – transition-duration

The CSS transition-property property specifies the name of the CSS property to which the transition is applied. Example – transition-property

CSS property transition can be used to create animation effect when other specified properties change. This can only be applied on animatable properties. Few points read more

to get jQuery version info the variable jQuery.fn.jquery (or $.fn.jquery if $ is being used for jQuery object) can be used. Some examples. jQuery version read more

jQuery ui can be used to make an element draggable/movable by mouse drag. Note that it does not work with touch events. Syntax: // After read more

JSON.parse() can be used to parse a given json string into javascript value (array, string, etc.) Here are some examples Example – parse json containing read more

JSON.stringify() can be used to convert a given javascript value to json strng. Usage: JSON.stringify(value[, replacer[, space]]) Here are some examples Example – JSON.stringify() default read more

Python rstrip can be used to removed trailing whitespaces (spaces, newlines, tabs, etc.) from a string. It Usage newstring = s.rstrip([chars]) If chars string is read more

The ng-init directive allows you to evaluate an expression in the current scope. This can be used to initialize model values. Usage: Example Initialize date read more

Angularjs ng-style directive can be used to define inline style attribute which can define dynamic style values using variables. Usage: Note that expression evals to read more

Python string can be converted to int using int(strval). Note that it will throw ValueError for invalid string. Here is a quick example to convert read more

Python int (or any other data type like float) needs to be converted to string before we can do concatenation operation using plus (+). It read more

Python dictionary (associative arrays) – some basic operations. Initialize dictionary Check if a key exists access value for a key list length/size using len() len() read more

Python in-built function type() can be use to find type of any variable or value. Example – type() of string variable Example – type() of read more

To initialize a large list with same value (all items having same value), the following syntax can be used. a = [val] * num_items Example

Slicing a list (array) in python is very handy way to get a sub list of an array. Its syntax is ## slice from start read more

To remove an item from python list method pop([i]) can be used. Remove last item Remove first item Remove ith item

Appending or prepending a value to a list in Python. Append value Prepend value

Python list (or array) – some basic operations. Initialize list access ith item access last item list length/size using len() Note than len() can also read more

To check if a string is part of another string (case sensitive) we can use these approaches Using in operator Using string find() method ## read more

To convert a string to lowercase of uppercase following code can be used: s_lower = s.lower() s_upper = s.upper() string lowercase example string uppercase example

Mac spotlight search is one of the most frequently used tool on Mac. It searches various folders on Mac and shows results. Here are steps read more

HTML5 script async attribute can be used to load a script asynchronously. with async one can also use onload attribute to attach any javascript code read more

jQuery when applied on a css selector, returns a wrapper object which contains 0 or more javascript objects. To get the javascript object from it, read more

CSS property cursor specifies the type of mouse cursor to be displayed on the element. Example css cursor

CSS outline-width property specify the width of an element’s outline (2px, 2em, etc.). Example css outline-width

CSS outline-style property specify the line style of an element’s outline (solid, double, dashed, etc.). Example css outline-style

The outline-color property sets the color of the outline. Note that the outline-color value invert if not supported, then initial value of color is taken. read more

CSS outline property can be used to create outlines around visual objects such as buttons, active form fields, image maps, etc. It it different from read more

jQuery can be used to access checkbox value using jQuery.attr(“value”) and it checked state using jQuery.prop(“checked”). Note that we can not use jQuery.attr() for checked read more

jQuery code to access select element’s selected index, selected value and selected option node text.

When two selectors have same style, then one with higher specificity wins. In case they have same specificity, the one which come later, wins. Specificity read more

To go to previous working directory is Linux is a frequently occurring need. These are two ways to achieve it: Using dash (-) $ cd read more

The universal selector (*), matches the name of any element type. It matches any single element in the document tree. Some ways it can be read more

CSS :nth-last-of-type(an+b) pseudo class represent all sibling elements of same type whose sibling position is obtained by putting n=0,1,2,3… and so on counting from last. read more

CSS :nth-last-child(an+b) pseudo class represent all sibling elements whose sibling position is obtained by putting n=0,1,2,3… and so on from last. Note that sibling can read more

Css negation pseudo-class, :not(X) can be used on any simple selector. It will match element which are not selected by selector X. Example – css read more

Css :empty pseudo-class represents an element that has no children at all. Few cases <p></p> is considered empty <div>hello</div> is not considered empty Example – read more

Css :only-of-type pseudo class represents an element that has a parent element and whose parent element has no other element children of same type. Example read more

Css :only-child pseudo class represents an element that has a parent element and whose parent element has no other element children. Example – css :only-child read more

CSS :nth-of-type(an+b) pseudo class represent all sibling elements of same type whose sibling position (starting from 1) is obtained by putting n=0,1,2,3… and so on. read more

CSS :nth-child(an+b) pseudo class represent all sibling elements whose sibling position (starting from 1) is obtained by putting n=0,1,2,3… and so on. Note that sibling read more

The :root pseudo-class represents an element that is the root of the document. In case of HTML, it is html element. Example – css :root read more

The :checked pseudo-class represents elements (checkbox and radio) that are in an selected (checked) state. Example – css :checked checkbox element This example highlights span read more

The :enabled pseudo-class represents elements (input, textarea, button, etc.) that are in an enabled state. Such elements have a corresponding disabled state also. Similarly :disabled read more

The :lang pseudo-class can used to select elements based on language. Example – css :lang This example show french language content in different color.

The :target pseudo-class applies to an element which has id matching with fragment identifier (string after hash). e.g. in url http://example.com/html/top.html#section1 section1 is fragment/anchor identifier. read more

To add clock widget (analog or digital) on Android Lollipop, these steps can be followed. For Android other versions, instructions are slightly different. Touch an read more

The CSS id selector matches element having a specific id attribute This can be used to specify CSS style based on element id. Note that read more

The CSS class selector matches element having a specific class name as one of the classes in attribute class. This can be used to specify read more

ECMAScript 6 String.prototype.endsWith() method can be used to check if a string ends with a suffix. But it is not yet supported by all browsers. read more

ECMAScript 6 String.prototype.startsWith() method can be used to check if a string starts with something. But it is not yet supported by all browsers. Another read more

Python if else statements can be expressed on two ways Simple if-else statement if-elif-else statement with one or more occurrences of elif. if else example read more

jQuery code snippet to get class list of an element. We are using jQuery attr(“class”) to get the class list as string and then splitting read more

Sometimes we need to create inline iframe with content generate from jQuery/Javascript. This iframe will not have src attribute. One use case is to run read more

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

The CSS type selector matches element by node name (e.g. div, h1. h2). This can be used to specify CSS style based on element type. read more

CSS :visited pseudo-class applies once the link has been visited by the user Example – use :visited to apply style to visited links This example read more

CSS :link pseudo-class applies to links that have not yet been visited. Example – use :link to apply style to unvisited links This example displays read more

The :focus pseudo-class applies while an element has the focus. There can be various ways to get focus on an element. Some of these are: read more

The :active pseudo-class applies while an element is being activated (e.g. clicked) by the user. For example, between the times the user presses the mouse read more

The :hover pseudo-class applies while the user takes mouse on an element. Note that user may not click on it. Using :hover one can change read more

CSS calc() function allows expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. It can be used read more

jQuery method jQuery.getScript() can be used as a shorthand to load a script given its url. This by default disables cache by appending extra random read more

To check if an element is visible in window viewport after vertical scrolling the following approach can be used using jQuery. Note that this approach read more

Sometimes we need to define css style for general sibling elements. These may not be adjacent but should have same container parent. It can be read more

CSS drop cap effect can be achieved by making first letter of bigger size (keeping line height not so large) and the applying float:left on read more

CSS first letter can be made capital and bigger using pseudo element ::first-letter. Here is sample html/css code:

The ::first-letter pseudo-element represents the first letter of an element, if it is not preceded by any other content (img, or inline tables). If an read more