DEV Community: Santhosh Chinnasamy

How To Get Started With Open Source Contributions?

Santhosh Chinnasamy — Wed, 19 Oct 2022 15:22:28 +0000

One of the difficulties faced by people who are interested in contributing to open source is finding a project or issue to work on. Once we have decided on the repo to contribute, we need to understand the tech stack and the guidelines followed by the project. Most of the projects will have contributing guidelines […]

The post How To Get Started With Open Source Contributions? appeared first on BLEEDBYTES.

Avoid Committing Secrets and Credentials to Git

Santhosh Chinnasamy — Fri, 11 Feb 2022 14:14:02 +0000

Committing secrets to code repos or version control systems is considered one of the major security incidents, as a developer or code owners, we should be conscious about what we are pushing to the VCS. The reason for considering a security incident is, if we accidentally commit those secrets to public repos, it can be […]

The post Avoid Committing Secrets and Credentials to Git appeared first on BLEEDBYTES.

Getting Started with React Query for Fetching and Updating Data

Santhosh Chinnasamy — Wed, 03 Nov 2021 16:10:04 +0000

In this article, I will be going through the basics of React Query and how it can be used to build a simple user list application. as per React Query site React Query is a Performant and powerful data synchronization for React to Fetch, cache and update data in your React and React Native applications […]

The post Getting Started with React Query for Fetching and Updating Data appeared first on BLEEDBYTES.

What Are the Basic Data Types in TypeSript?

Santhosh Chinnasamy — Mon, 13 Jan 2020 11:44:03 +0000

Article Sponsored by NammaHosting. Get upto 20% offer on purchases use code “BLEEDBYTES”.

TypeScript is a super-set of JavaScript, adds strict syntactical type checking and static typing. TypeScript must be trans-compiled into JavaScript for production. TypeScript compiles to plain JavaScript supported in ECMAScript3 and above versions which is supported by all browsers and nodejs run time engines.

Why TypeScript

TypeScript simplifies JavaScript code, making it easier to read and debug.
TypeScript is opensource.
TypeScript provides highly productive development tools for JavaScript IDEs and practices, like static checking.
TypeScript makes code easier to read and understand.
With TypeScript, we can make a huge improvement over plain JavaScript.
TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity.
TypeScript can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type – checking the code.
Powerful type system, including generics.
TypeScript is nothing but JavaScript with some additional features.
TypeScript code can be compiled as per ES5 and ES6 standards to support the latest browser.
Supports static typing.
TypeScript will save developers time.

In this article I am going to list out the data types with their example snippetsData Types in TypeSript are boolean, number, string, Array, Object, undefined, null, enum, void, any, tuple and never.

Boolean

To use boolean in TypeScript use boolean keyword while declaring a variable.

let isAvailable: boolean = true;

Number

In TypeScript numbers are floating point values. The values which access number datatype are decimal, binary, hexadecimal and octal values.

let decimal: number = 15;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String

Alike JavaScript TypeScript allows us to use string data type with single (') and double (") quotes. TypeScript also supports Template literals.

let sky: string = 'blue';
sky = 'orange';

let firstname: string = 'Santhosh';
let age: number = 22;
// Template Literals
let aboutme: string = `My name is ${firstname} and I am ${age} years old`;

Array

Array declaration in typescript is available in two ways, first one uses array bracket suffixed with datatype number[] and second one generic array type Array<number>.

let fruits: string[] = ["Apple","Orange","Grapes"];
let languages: Array<string> = ["English","Tamil","Hindi"];

Tuple

Tuple is an array with a fixed number of elements whose types are known, but need not be the same.

let student: [string, number] = ['Santhosh', 22];

Enum

Enum datatypes with more friendly names to numeric values. Enums are added feature in TypeScript which isn’t available in JavaScript.With enum we can access values with keys and vice versa.

enum Color { yellow, green, red = 6 }
let color: Color = Color.green; // access value with key
let colorName: string = Color[6]; // access key with value

Any

Any datatype can be used in places where we are unsure of incoming data while writing the application.The data may be from an external api call or user input.

let apiData: any;
apiData = 'Welcome';
apiData = 123456.99;
apiData = true;

let apiValue: any[];
apiValue = [1, "success", true];

Void

In general, this type of data types are used in functions that do not return any value. In TypeScript void can be assigned to variables but only accepts null or undefined.

function noData(): void {
    console.log("No data found");
}

Null

You can only assign null to a null datatype variable.null is a sub type of all other types so we can assign it to any type.

let nullValue: null = null;
let num: number = nullValue;

Undefined

Undefined is used to store an undefined datatype, as like null undefined is a sub type of all other types so we can assign it to any other types.

let empty: undefined = undefined;

Never

Never type is used to represent the values that never occur.Never is a subtype, can be assigned to any other type. But no other type is assignable to never

function throwError(message: string): never {
    throw new Error(message);
}

Thanks for reading this article. The above mentioned are the Data Types in TypeSript used to achieve more clean JavaScript code.

The post What Are the Basic Data Types in TypeSript? appeared first on BLEEDBYTES.

Best chrome extensions for web developers and designers

Santhosh Chinnasamy — Sat, 10 Nov 2018 17:46:37 +0000

Chrome extensions are very useful for both the developers and designers, some of these extensions enhance the abilities of developer tools, some replicate the features in developer tools. Every extension in the chrome marketplace are valuable in certain scenarios but instaling all of them is not a wise thing. Among many extensions, there are extensions available for web developers and web designers. Few worthy extensions are listed in this article to help out the new developers and designers.

Source Pixabay

Responsive Web Design Tester

Responsive Web Design Tester chrome extension helps developers and designers to ensure that the website is responsive or not. There are many virtual resolution devices available for testing. Screen sizes available at default installation are 320, 480, 640, 768, 1024, 1280. Custom devices can also be added to the list.

Even iPhone, iPad screen sizes were also available for testing.

WhatRuns

Whatruns chrome extension helps to discover the technology stacks implemented in a site. With a single click it identifies the types of front-end frameworks, types of marketing strategies, Content Delivery Network (CDN), Content Management System (CMS), are identified.

No signup required and it is completely free.

ColorZilla

Source Pixabay

ColorZilla is an advanced and most popular color picker and eye dropper tool for both chrome and firefox. WIth this extension color reading made easy and can able to identify colors in any part of the screen.

The main features of colorzilla are eyedropper, web page color analyzer, palette viewer, advanced gradient generator, color history.

Colorzilla is capable of picking colors from flash objects, pick colors from zoom level.

UserSnap

source pexels

Usersnap lets you capture your screen and allows you to annotate on the captured image. Usersnap is helpful while collecting user feedback, tracking bug reports, providing feedbacks on web application prototypes.

Usersnap automatically adds a browser version, OS and screen resolution on the taken image.

source unsplash

PageRuler

Pageruler is used to get the dimensions of an element, its position in a webpage. Measurements are in the form of pixels. To get the measurement, simply we have to draw in the page and it displays the height, width.

Shows top, bottom, height, width, left and right position. Can able to resize and move with arrow keys.

Dimensions

Dimensions is a tool for designers to measure screen dimensions. Measuring happens in a vertical and horizontal way that is from mouse pointers up/down and left/right.

Dimensions work perfectly for elements like input-fields, buttons, videos, text icons, gifs but it doesn’t suit for measuring images.

WhatFont

Whatfont helps to lookup the fonts used in a webpage. It identifies the font family of a text by just hovering to the font. It also detects the services from where the fonts are served like Typekit and Google font API.

PerfectPixel

PixelPerfect is for designers, with the help of this extension one can design a pixel perfect design with perfect accuracy. This extension allows users to put a semi-transparent overlay to compare their design and outcome.

PerfectPixel supports multiple overlays on a single page, overlays are saved in browser sessions so each page can have different overlays.

The post Best chrome extensions for web developers and designers appeared first on BLEEDBYTES.