HTML, JavaScript and CSS - Quick Tips

Posted on 03-04-2019 by Nadir Latif

Following are some quick tips related to HTML, JavaScript and CSS:

Free Font for Urdu language

A free font for Urdu language is provided by a Pakistani Organization called Center for Language Engineering (CLE). The organization conducts research and development in linguistic and computational aspects of languages, specifically of Pakistan and developing Asia

How to use CCS rules specific to FireFox

The CSS statement:

@-moz-document url-prefix() {
  h1 {color:red}
}

allows the CSS rule: h1 {color:red} to be applied only to Firefox browser

Using ems instead of Pixels for Typography

EM is a unit for font sizes. It is based on the font size of the container element.

For example if an element has a font-size set to 2em and the font-size of the container element is set to 20px, then the font-size of the target element will be 40px

Replacing a string using Javascript replace function

The replace function can be used to replace a substring with another string using regular expressions.

For example: str.replace(/substring/g, 'New Substring'); will replace all occurrences of 'substring' with 'New Substring'

Base64 Encoding of utf-8 encoded string using Javascript

The btoa function encodes an ASCII encoded string using Base64 encoding scheme. If the string is utf-8 encoded then the btoa function will not work correctly. The solution is to first url encode the string using encodeURIComponent and then call window.btoa function.

Passing parameters to Jquery event handler function

To pass a parameter to Jquery event handler, the parameter should be given as first argument to event function. The argument will be passed on as a property of event.data. For example:


jQuery(".selector").change({parameter: value}, function(event){
    user_function(event.data.parameter);
});
Fetching Html elements using JavaScript

Fetching parent node element of a HTML node. We can fetch the parent node of a html element using following code:


var x = document.getElementById("myLI").parentNode.nodeName;

Fetching html elements using CSS class names. We can fetch html elements from CSS classes using following JavaScript code:


var x = document.getElementsByClassName("example");

Fetching html elements using CSS selectors with Javascript. The following Javascript code fetches html elements using CSS selectors:


var x = document.querySelectorAll(".example");
Get current unix timestamp using Javascript

The Javascript function getTime returns the number of milliseconds since Jan 1st, 1970, which is called the unix timestamp

Difference between ECMAScript, TypeScript and JavaScript

ECMAScript is a specification for scripting languages. It was established by ECMA International in order to standardize JavaScript

JavaScript, NodeJs, JScript and ActionScript are some of the implementations of ECMAScript specification. The current version of ECMAScript is called ES8. Major changes to JavaScript were introduced in ES6 and ES5.

TypeScript is a superset of ECMAScript and hence JavaScript. It was created by Microsoft in October 2016. TypeScript is used in the development of large applications. TypeScript files are compiled to JavaScript using a transpiler.


Leave a Comment: