DEV Community: Umme Q

Javascript Brush up

Umme Q — Sat, 07 Nov 2020 18:20:10 +0000

I have started brushing up my javascript concepts with great author "kylesimpson" book https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md who else wants to join with me.

If something interesting if caught up we will go post it here.

Please comment any other best resources to brush up JS concepts
#Learn #implement #share

Proxy in Typescript

Umme Q — Sun, 29 Dec 2019 10:25:12 +0000

Proxy is a structural design pattern that provides an object that acts as a substitute for a real service object used by a client. A proxy receives client requests, does some work (access control, caching, etc.) and then passes the request to a service object.

The proxy pattern is useful when the real subject does something expensive.
In web applications, one of the most expensive operations you can do is a network request, so it makes sense to combine HTTP requests as much as possible.

Real Example as:

You have a list of videos on the page. When the user clicks a video title, the area below the title expands to show more information about the video and also enables the video to be played.

The detailed video information and the URL of the video are not part of the page; they need to be retrieved by making a web service call.

The web service can accept multiple video IDs, so we can speed up the application by making fewer HTTP requests whenever possible and retrieving data for several videos at one time.

The videos object doesn't call the HTTP service directly but calls the proxy instead.

The proxy then waits before forwarding the request. If other calls from videos come in the 50ms waiting period, they will be merged into one.

A delay of 50ms is pretty much imperceptible for the user but can help combine requests and speed up the experience when clicking “toggle” and expanding more than one video at once.

It also reduces the server load significantly since the web server has to handle a smaller number of requests.

Request process without proxy

Request process with proxy

Basic Data Types in TypeScript?

Umme Q — Mon, 25 Nov 2019 16:30:52 +0000

Common data types in TypeScript are
Number, String, Boolean, Enum, Void, Null, Undefined, Any, Never, Array and tuple.

Syntax for typescript DataType

var <--variableName--> : <--dataType--> = <--value-->;

Number Types
In TypeScript, numbers are floating point values that have a type of number.

Example:1
let decimalValue: number = 10;
let hexaDecimalValue: number = 0xf10b;
let binaryValue: number = 0b110100;
let octalValue: number = 0o410;

String Types
When you want to use textual data, string types are used and get denoted by the keyword string. Like JavaScript, TypeScript also uses double quotes (") and single quotes (') to surround the string value.

Example:1
let firstName: string = "bibi"; // using double quotes
let lastName: string = 'umme'; // using single quotes
My name is: ${firstName} ${lastName}`; // if you want to pass data dynamically this is called templated string

Boolean Types
boolean keyword is used in this data types as same as javascript

Example:1
let isActive: boolean = true;
let isOn: boolean = false;

Enum Types
Enumerated data types (enums) are a set of numeric values with more friendly names.The variables of enumerated data types are declared with the keyword enum.

Example:1
enum Direction { Up, Down, Left, Right }

By default, the enum values start from 0 (zero), but you can also set it by manually entering the value of its members.

enum Direction { Up = 1, Down = 3, Left = 5 }

Example:2
enum Days { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday };
var day: Days = Days.Monday; // print 1

Void Types
This type of data types are used in functions that do not return any value.

Example:1
function showData(): void { ... }.

Null Types
Null keyword is used and can assign only null value to it. As null is a subtype of all other types, you can assign it to a number or a boolean value.

Example:1
let nullExample: null = null;
let numericValue: number = null;

Undefined Types
Undefined data type use to store the value undefined to it. undefined can be assign it to a number or a boolean value.

Example:1
let undefinedValue: undefined = undefined;
let numericValue: number = undefined;

Any Types
when unsure of the data type of a value, due to its dynamic content, you can use the keyword any to declare any data type. This is often useful when you are seeking input from use

Example:1
let dynamicValue: any = "Umme habiba";
dynamicValue = 120;
dynamicValue = 0b11100101;
dynamicValue = false;
let dynamicList: any[] = [ "Umme", "Software Developer", 25, true];

Never Types
The never type represents the data type of values that never occur.

Example:1
keepProcessing() function is always executing and never reaches an end point because the while loop never ends.

function keepProcessing(): never {
while (true) {
console.log('I always does something and never ends.')
}
}

Array Types
There are two ways of declaring Array in TypeScript.
1: using []
2: using Array

Example:
let marks: number[] = [80, 85, 75];
let marks: Array = [80, 85, 75];
var name: Array = ["Sheo", "Narayan", "Dutta"];

Tuple Types
A tuple is a data type that allows you to create an array where the type of a fixed number of elements are known but need not be same.

Example:
var student: [number, string] = [1, "umme"];

var employee: [number, string, boolean] = [1, "bibi", true];

What is ViewEncapsulation and ways to do?

Umme Q — Tue, 12 Nov 2019 16:42:20 +0000

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa.

Angular provides three encapsulation strategies:
1.None 2.Emulated 3.Native

Method 1.The styles can be wrapped in a style tag and placed before the templates:

Method 2.The style can be written as normal inline styles in the template tags:

The expected behavior in various view encapsulation techniques are:

•None: Styles defined in a component are visible to all components of the application
For method 1, the style is wrapped in a style tag and pushed to the head. It is appended right after the component inline and external styles. For method 2, the style just remains in the tag.

•Emulated: Styles used in other HTML spread to the component
For method 1, the style is wrapped in style tag, pushed to head and uniquely identified so it can be matched with its component's template just like component inline style. For method 2, the style still remains in the tag.

•Native: Styles used in other HTML doesn’t spread to the component
Behaves as expected of web components.

Data Binding in Angular

Umme Q — Tue, 05 Nov 2019 16:51:23 +0000

Data Binding is used bind the View (Html content) with Controller’s (Component’s) field. That is whenever we display dynamic data on a view (HTML) from Component, data binding is used.

Angular provides various types of data binding
1.Property 2.Attribute 3.Class 4.Style

1.Property Binding
Here we bind a property of a DOM element to a field which is a property we define in our component typescript code.
Example:

2.Attribute Binding
Here we bind attribute of an element with the field of a component.
Example:

3.Class Binding
Class binding is used when we want to add additional classes to an element based on some condition.
Example :

4.Style Binding
Here we bind a component field to our inline HTML styles.
Example :

Difference between Flexbox and CSS grid?

Umme Q — Sun, 03 Nov 2019 09:00:41 +0000

Flexbox:

Flexbox a 1-dimensional system, meaning it can handle in rows.
Example
Home About us Gallery --------------->(Header)
Main motive to alter width and height to best fill the available space
More focus on content rather than layout
Use for small scale, fundamentally to display linear.

CSS Grid:

CSS Grid is a 2-dimensional system, meaning it can handle both columns and rows
Example
Header
Body
Footer
Layout allows us to align components into columns and rows
Approach mainly focus on Layout other than content
Grid is used for large scale where there no linear display

Find Your inner happiness

Umme Q — Thu, 31 Oct 2019 16:26:55 +0000

I will start my post with be beautiful line

Be Your Own Sparkle.

There is will situation in life where you wanna end up your life based on some people comments from love one or because things are not happening as per you else because your not getting love from someone who you love more whatever the situation that might hurting.

My Dear, You dont worry you know the moment you broken, remember your just rise up to your dream and your one step ahead to destiny.

lets find your inner happiness in this post, i will share a beautiful method or give you magical stick which always your side.

It is "Dairy" yes make your own dairy, write it whatever happens with or what u want to achieve in your life, write it all your emotions, burn the paper which contains negative points i am damn sure you will be happiest , Congrats! finally found your inner happiness and keep all positive points with you,it will help :)

At the end Love yourself Your Special.

try this! if someone doing this method before please share your thoughts i am super excited to read

Shadow DOM in Angular

Umme Q — Thu, 31 Oct 2019 15:58:10 +0000

Shadow DOM basically allows group of DOM implementation to be hidden inside a single element (which is the basic idea of components) and encapsulate styles to the element.
OR
Shadow DOM allows us to hide DOM logic behind other elements.

Shadow DOM tree starts with a shadow root,underneathwhich can be attached to any elements you want, in the same way as the normal DOM.

Shadow DOM terminology:
•Shadow host: The regular DOM node that the shadow DOM is attached to.
•Shadow tree: The DOM tree inside the shadow DOM.
•Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
•Shadow root: The root node of the shadow tree.

Real Example:
example of a "video" element,All you see in the DOM is the "video" element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.

You can attach a shadow root to any element using the Element.attachShadow() method. This takes as its parameter an options value of open or closed.

let s = element.attachShadow({mode: 'open'}); - you can access SD
let s = element.attachShadow({mode: 'closed'}); -you can't access SD

Transpiling in Angular

Umme Q — Tue, 29 Oct 2019 15:22:47 +0000

1.Transpiling code is a similar concept to the compilation process, with one big difference.

•Compiling: code from a high level language is get converted to machine level language.
•Transpiling: code from a high level language gets converted to another high level language.

2.Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration

TypeScript----->Transpile----->JavaScript
Command----->tsc filename.ts

3.Three two files for TypeScript Configuration.
•tsconfig.json—TypeScript compiler configuration.
•typings—TypesScript declaration files.

4.Will add TypeScript configuration file called tsconfig.json to o project to guide the compiler as it generates JavaScript files.