Common digital image formats

Sep 3, 2020

JPEG (Joint Photographic Experts Group)

JPEG image format are used by digital cameras to store photos. Because it uses lossy compression so cameras can store more photos on one camera card. Its useful for photographs but not for content like diagrams or charts which require sharpness.

  • Mime type: image/jpeg
  • File extensions: .jpg .jpeg .jpe .jif .jfif

GIF (Graphics Interchange Format)

GIF image format uses lossless compression. Its good for animation as well. This format is not used for photography because of limited number of colors.

  • Mime type: image/gif
  • File extensions: .gif

PNG (Portable Network Graphics)

PNG image format uses lossless or lossy compression. Supports higher color depth than GIF. For photographs not as good as JPEG because of larger file size. Good for images with text or line art as well.

  • Mime type: image/png
  • File extensions: .png

SVG (Scalable Vector Graphics)

SVG is a XML based vector graphics format. They are ideal for images that can be drawn accurately at any size.

  • Mime type: image/svg+xml
  • File extension: .svg

TIFF (Tagged Image File Format)

TIFF image format was created to store scanned photos. They are larger than images in other formats because of the metadata included. Also they are uncompressed.

  • Mime type: image/tiff
  • File extensions: .tif, .tiff

BMP (Bitmap)

BMP is most prevalent on Windows computers. They are uncompressed, so file sizes are larger than other formats.

  • Mime type: image/bmp
  • File extensions: .bmp

Choosing image format

  • Photographs - JPEG
  • Icons - SVG or PNG
  • Screenshots - PNG or JPEG
  • Diagrams, Charts - SVG or PNG

References:

Categories : Web

CSS in JS

Aug 27, 2020

“CSS in JS” refers to ideas on modularizing CSS , so it helps in maintaing large and medium scale applications easier.

React JS style

In React JS style attribute accepts a JavaScript object with camelCased properties.

<button style={
    { color: "blue", backgroundColor: "white" }
}>Submit</button>

Webpack css-loader and style-loader

The css-loader takes a CSS file and reads all dependencies and style-loader embeds the styles into markup.

// file name : app.css
.btn {
    color: white;
    background-color: black;
}
import './app.css';

function () {
    return (
        <button className="btn">Submit</button>
    );
}

CSS Modules

import styles from './app.css';

function () {
    return (
        <button className={styles.btn}>Submit</button>
    );
}

References:

Categories : CSS   JavaScript   React

Nginx Reverse proxy for cross domains

Aug 24, 2020

A reverse proxy is a server that sits in front of web servers and forwards client request to those web servers.

Use case: If we try to access URL http://example.com:8080/api from webpage at http://example.com due to browser cross domain restrictions we will see CORS errors.

To solve, we can setup Nginx reverse proxy server, so that , we can request URL http://example.com/api from webpage at http://example.com and the reverse proxy server would take care of forwarding the request to server running at port 8080.

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /api {
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_pass http://127.0.0.1:8080;
    }
}

To pass a request to an HTTP proxied server, the proxy_pass directive is specified inside a location.

  • $host - This variable is set, in order of preference to: the host name from the request line itself, the “Host” header from the client request, or the server name matching the request.
  • $scheme - The schema of the original request.
  • X-Forwarded-Proto - header gives the proxied server information on the schema of the original request.
  • X-Real-IP - It is set to the IP address of the client.
  • $proxy_add_x_forwarded_for - This variable takes the value of original X-Forwarded-For header retrieved from the client and adds the Nginx server IP address to the end.

References:

Categories : HTTP

JavaScript Object

Aug 24, 2020

An object is a collection of properties. A property is a associate between a name and a value.

for...in can be used to iterate over all the enumerable properties of an object.

var myFan = {
    make: 'Honeywell',
    blades: 4,
    rotation: 'on'
}

for (var i in myFan) {
    if (myFan.hasOwnProperty(i)) {
        console.log(i + " :: " + myFan[i]);
    }
}
// outputs
// make :: Honeywell
// blades :: 4
// rotation :: on

Ways to create objects

Object initializers

var rectangle = {width: 10, height: 100};

Constructor function

function TV(make, model) {
    this.make = make;
    this.model = model;
}

var myTv = new TV('LG', 'ThinQ');

Object.create

Allows to choose the prototype object for the object you want to create, without having to define a constructor function.

var bike = {
    wheels : 2,
    gear: 6
}
var myBike = Object.create(bike);

References:

Categories : JavaScript

JavaScript Array

Aug 20, 2020

An array is an ordered list of values that you refer to with a name and an index. JavaScript does not have a explicity array data type. JavaScript provides predefined Array object and methods to work with arrays.

let arr1 = new Array(1, 2, 3, 4, 5);
let arr2 = ['a', 'b', 'c']; // Bracket sytax is called an "array literal"

let arr3 = new Array(10); //creates array with non zero length, but without any items.

let arr4 = Array.of(10); //creates a array with only one element. Array.of a static method in ES2015

Iterating over arrays

let myarr = [1, 2, 3, 4, 5];
for(let i = 0; i < myarr.length; i++) {
    console.log(myarr[i]); // 1, 2, 3, 4, 5
}

myarr.forEach(function(item) {
    console.log(item); // 1, 2, 3, 4, 5
});

Array methods

  • concat() - joins two or more arrays and returns a new array.
  • join() - joins all elements of an array into a string.
  • push() - adds one or more elements to the end of an array and returns the length of the array.
  • pop() - removes the last element from the array and returns the element.
  • shift() - removes the first element from the array and returns the element.
  • unshift() - adds one or elements to the front of the array and returns the new length of the array.
  • slice() - extracts a section of the array returns a new array.
  • splice() - removes elements from an array and optionally replaces them. It returns the items that were removed from the array.
  • reverse() - transposes the elements of the array.
  • sort() - sorts the elements of the array in place.
  • indexOf() - searches the array for the search element and returns the index of first match.
  • lastIndexOf() - searches backward and works like indexOf()
  • forEach() - executes a callback on every array item.
  • map() - executes a callback on every item and returns a new array of the return value of the callback.
  • filter() - executes a callback on every item and returns a new array containing the items for which callback returned true.
  • every() - executes a callback on every item and returns true if callback returns true for every item.
  • some() - executes a callback on every item and returns true if callback returns true for some item.
  • reduce() - executes a callback on every item for the purpose of reducing the list of items down to single value.
  • reduceRight() - works like reduce() but starts with the last element.

References:

Categories : JavaScript