Web Development tutorials and examples

Javascript – textarea and text input select all

Javascript object.select() can bse used to select full text in textarea and text put fields in HTML. Example – select all in textarea Example – read more

CSS bottom

CSS bottom property decides the bottom offset (bottom edge of element offset from bottom edge of container) for positioned elements. An element is considered positioned read more

CSS right

CSS right property decides the right offset (right edge of element offset from right edge of container) for positioned elements. An element is considered positioned read more

CSS top

CSS top property decides the top offset for positioned elements. An element is considered positioned if its position property has value other than static. Few read more

CSS left

CSS left property decides the left offset for positioned elements. An element is considered positioned if its position property has value other than static. Few read more

CSS – enlarge image on hover

CSS transform:scale(2, 2) can be used on hover to resize (double) an image (horozontally and vertically). We can use any scale factor. Here is an read more

CSS background image example

The background-image property sets the background image of an element.

CSS background-color

The background-color property sets the background color of an element. The color is drawn behind any background images. Example – background-color

CSS box-shadow

CSS (CSS3) box-shadow property attaches one or more drop-shadows to the box. CSS property box-shadow Few points to note: blur radius spread distance and color read more

CSS text-shadow

CSS3 text-shadow accepts a comma-separated list of shadow effects to be applied to the text of the element. CSS property text-shadow blur-radius and color are read more

CSS3 Gradient examples

A gradient is an image that smoothly fades from one color to another. These are commonly used for subtle shading in background images, buttons, and read more

CSS padding inside a box

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

CSS margin area of a box

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

CSS font-family

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

CSS font-size

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

CSS font-weight

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

CSS font-variant

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

CSS font-style

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

CSS font shorthand property

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 transition-delay

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

CSS transition-timing-function

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

CSS transition-duration

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

CSS transition-property

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

CSS transition – animation effect when properties change

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

jQuery – get javascript object

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

CSS3 cursors – change cursor on an element

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

CSS outline-width

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

CSS outline-style

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

CSS outline-color

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 – create outline around an element

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 – get checkbox value and checked state

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 – find select element selectedIndex, value and text

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

jQuery – create iframe with content

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 substring selectors

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

CSS color

CSS property color describes the foreground color of an element’s text content. In addition it is used to provide a potential indirect value (currentColor) for read more

How to create CSS triangles or arrow heads

CSS triangles (arrow heads) in various directions (up, down, left, right) can be created using a combination of thick CSS borders (visible and transparent) on read more

jQuery – read and modify iframe content

Sometime we need to read and modify same domain iframe content using jQuery. Here is code snippet which will modify the content of an iframe.

Javascript – get computed style of an element

To get computed style of an element the following approaches can be taken: Vanilla javascript: window.getComputedStyle(element) jQuery: .css(propName) Example – computed style using Javascript Example read more

HTML5 drag and drop – move an element to dropzone

HTML5 Drag and Drop interfaces enable applications to use drag and drop (using mouse) features in web browser. It involves dragging an element and dropping read more

CSS border-color – define color of four borders

The border-color property sets the color of the four borders. Few points to note: When four values are specified this is the order: border-top-color, border-right-color, read more

CSS border-width – set element border width of four sides

The border-width properties specify the width of the border area of an element. Few points to note: When four values are specified this is the read more

React Overview

React is a Javascript library for building user interfaces. Lots of people use React as the V in MVC (Model View Controller). React can work read more

CSS float – floating left, right and clearing

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

Javascript settimeout example

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 component ajax example

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

React basic clock example using setInterval

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 – define border properties of an element

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 how to stop event propagation

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 event bubble vs capture

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 opacity – set opacity level of an element

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

jquery ajax – post form having file uploads

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

CSS attribute presence and value selectors

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

React component tutorial with click handler – javascript version

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 component tutorial with click handler – jsx version

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

React jsx hello world with offline transformation

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

ReactJS – convert jsx to javascript using babel cli

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

React jsx hello world

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

Css position property – static, relative, absolute and fixed positioning

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 – ordering of overlapping elements

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

CSS border radius and round corners examples

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

Javascript – how to view text inside DOM element

Javascript DOM method textContent can be used to get the text content inside a DOM. This can be useful to obtain content from a web read more

Javascript – DOM appendChild example

Javascript DOM method appendChild can be used to append a child to existing DOM element. For example it can be used to append an Image, read more

HTML5 canvas – draw image using svg xml string

HTML5 canvas can be used to draw image from svg xml string using drawImage(). For this the image source should be data:image/svg+xml;charset=utf-8,SVG_STRING. Here is code read more

HTML5 canvas – draw image using base 64 encoded png string

HTML5 canvas can be used to draw image from base64 encoded blob using drawImage(). In this case image source will be data:image/png;base64,BASE64_STRING. Here is code read more

robots.txt disallow all example

Sometime we need to block all robots from crawling a web site. This can be needed if you have a stage or sandbox website for read more

How to use wildcard in robots.txt

By default Disallow entry in robots.txt is based on url prefix. To block every url beginning with /foo/ the following robots.txt can be used. User-agent: read more

CSS – child vs descendant selector examples

CSS direct child can be specified using A > B and any descendant can be specified using A B. This should be used with care read more

How to override priority and change frequency in Yoast xml sitemap

It is important to maintain healthy xml sitemap for your site. In case you are using Yoast SEO plugin to generate xml sitemap for a read more

How to display a div in browser window center

To display a div in browser window center we can use css position value fixed. The left and top value of fixed position are relative read more

How to display auto fade out message using jQuery

Sometimes we need to display a message and then fade it out. jQuery fadeOut will make an element fadeOut (by animating css property opacity) will read more

Javascript – catch errors using window.onerror

Javascript errors can be caught using window.onerror event handler. Whenever a javascript error occurs browser calls this function. In this tutorial we’ll write error handler read more

CSS – how to align image and text in center vertically

We frequently need to center text and images when we are writing HTML/CSS. This can be done by using vertical-align:middle property on the child element read more

Why and how to use Amazon route53 as DNS

Using Amazon route53 has a huge advantage that it offers a TTL of as low as 60 seconds. This means changing IP for your domain read more

Javascript – dump all handlers on window object

DOM window object has many javascript event handlers attached to it. It may be handy to dump and view all of these. Here is code read more

HTML table with alternate color rows

We often need to display a table with alternate rows having different colors. We can do it either using CSS3 nth-child selector or using jQuery. read more

PHP – print array in one line

At times for large array values we want to log them in one line for better readability. Logging an array in one line is also read more

PHP – empty() vs isset() vs is_null() vs boolean check

PHP isset() and empty() are frequently used to check the values of variables. In some cases is_null is also used. Here is a table covering read more

Jquery – change table cells color based on value

It is sometimes useful to change color of table cells based on values for better presentation and readability. Here is quick code snippet to do read more

PhantomJS – how to skip Google analytics code when fetching a web page

PhantomJS can be used to test websites and for automating various tasks. When testing a website in production, it may not be a good idea read more

How to print javascript object to log

Often we need to print a javascript object to console log or somewhere else for debugging purpose. These are some handy ways to dump javascript read more

Fetch wordpress rss feed as FeedBurner user agent on command line

In case you have setup your wordpress feed to redirect to Feedburner url for regular user-agents, you can use either curl or wget (Mac or read more

Php equal (==) vs identical (===)

Equal (==) compares two values after type changing one value to another. Identical compare values and types both and returns true only if they both read more

WordPress – write custom php log to separate file

Why write php log to separate file Using default php error log in wordpress php code for informational messages can pollute php error log file. read more

jQuery – difference between html() and text()

Jquery can be used to set content on and element (div, etc.) using text() and html() methods. Methods text(content) will first convert the content using read more

jQuery – make a div stick at top on scroll

To make a div stick at top on scroll we can use css position property fixed. Here are the steps: Find initial position of div read more

jQuery – check if an element exists

jQuery when used with selectors like element tag, class, id can potentially return a jQuery object with no element in it. Since jQuery contains number read more

How to customize wordpress rss feed

By defaul WordPress will include all posts sorted by creation time for rss feed. If you want to customize wordpress feed, you can write custom read more

How to ping feedburner to force update rss cache

If you are using Feedburner for RSS feed management, it will usually update your feed at a regular interval. In case you are debugging or read more

Handle pagination in wordpress custom php code

In case you are writing wordpress custom code and need to show lot of content, it may be a good idea to support pagination. The read more

Find all user created wordpress custom field keys

Sometime we need to find all user created custom field key names (or meta key) in wordpress. This may be needed to find all posts read more

WordPress – exclude specific posts from archive pages

Sometime we need to exclude specic posts and pages from wordpress archive pages. If there are some internal pages behind auth, you may want to read more

find if a wordpress page is leaf page

Sometime we want to consider pages which have children as browse pages and may treat them separately in plugins etc. For example we may not read more

How to display wordpress top level pages

Displaying wordpress top level pages may be useful for displaying sitemap or browse interface on a wordpress site. Here is the code you can use read more

How to test a site using pytest

Python is fairly good programming language for writing and maintaining unit and functional tests. One advantage of python is that it does not require compilation read more

Setup xdebug for remote wordpress debugging

Using xdebug is pretty useful for debugging and sometimes understanding existing code. In a typical setup where wordpress in installed remotely on EC2 or any read more

CSS – use :before to add heading to a div

Css pseudo element/selector :before can be used to prepend some content before an element using a class or any other selector. This can be pretty handy read more

Alexa rank – how reliable is it?

Alexa provides a global and country specific site rank for a web site. For a country site rank, the site needs to have significant traffic read more

jQuery jsonp and cross domain ajax

JSONP or “JSON with padding” provides a method to request data from a server having a different domain. Typical web browser prohibit cross domain request due to same read more

Requirejs – quickstart guide for beginners

RequireJS is a JavaScript file and module loader. It can be used in browsers and other javascript environments like Node. This article is intended as read more

viewport and media queries for mobile browsers – quick introduction

Html meta tag viewport should be set to appropriate value for responsive web sites. Viewport content values like width define how the site will render read more

How to include angularjs javascript in wordpress post

AngularJS is great framework for declaring dynamic views in HTML documents. To include AngularJS we just need to include the angularjs javascript file in the read more

How to use html pre tag to display code

Html pre tag can be used to display code on WordPress blog or any site. HTML pre tag represent preformatted text. Text within this element is read more

Logo creation high level checklist

Every site needs a logo and many times we end up changing logo multiple times for a site. There are multiple online services which lets read more

Cross browser site testing – what browsers to cover

Cross browser development and testing is very important to any web based tool or site. There are so many web browsers like Google chrome, Firefox, read more

Mailchimp lightweight subscription form code

If you are using mailchimp for managing your newsletter campaigns, then you can either use a link to mailchimp site or use subscription form directly read more

How to locally override website domain (or hostname) to IP mapping

When we browse a web site, the browser first do a DNS lookup to find the IP address of the domain name. We can override read more

How to use google custom search for wordpress site

WordPress comes with a default search which searches posts and pages from your site. It works pretty decent. Here is why you should consider switching read more

Using robotexclusionrulesparser python module to parse robots.txt and crawl a site

Here is a small code snippet to demonstrate how to parse robots.txt and crawl a web page in python using robotexclusionrulesparser module url = “http://www.foo.com/bar” read more

How to create facebook app for using fbconnect for your website login

Using facebook login (fbconnect) on your website or blog requires you to create a facebook app and configure it with few details. The advantage of read more

Benefits of using Amazon AWS – EC2

If you want to try out stuff as root which can potentially break you site, you are always scared of trying that on your main read more