DEV Community: Stacksjar

Angular Cheatsheet 2024

Stacksjar — Thu, 08 Aug 2024 19:06:06 +0000

In this article we are going to see a well curated list of angular interview questions 2021 and answers for experienced as well as freshers

Why were client-side frameworks like Angular introduced?

The advent of modern JavaScript frameworks has made it much easier to build highly dynamic, interactive applications.

JS frameworks are JavaScript code libraries that have pre-written code to use for routine programming features and tasks. It is literally a framework to build websites or web applications around.

A framework is a library that offers opinions about how software gets built. These opinions allow for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable; predictability and maintainability are essential for the health and longevity of software

Angular is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built AngularJS. Angular was officially released on the 14th of September 2016.

Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions.

What are lifecycle hooks in Angular?

Angular Lifecycle hooks are different states of an angular applications component or directive through out the time of its instantiation to time when its destroyed. These lifecycle hooks are invoked at different phases and conditions of angular application.

The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed.

We can use any of these lifecycle hooks to tap into particular event or state of the application to perform task's as required.

Below are the lifecycle hooks:

ngOnChanges(): Called whenever one or more data-bound input properties change just before before ngOnInit().

ngOnInit(): Called once, after the first ngOnChanges() and angular has insantiated the component

ngDoCheck(): Called on every change detection run, and once after ngOnChanges() and ngOnInit() respectively. The purpose of this lifecycle hook is to act upon changes that Angular can't or won't detect on its own.

ngAfterContentInit(): Called once after the first ngDoCheck(). The purpose of this lifecycle hook is to respond after angular has finished loading any external data into its component.

ngAfterContentChecked(): Called after ngAfterContentInit() and every subsequent ngDoCheck(). The purpose of this lifecycle hook is to check the content projected into the directive or component.

ngAfterViewInit(): Called once after the first ngAfterContentChecked(), This lifecycle hook is invoked when angular initializes the component's views and child views
ngAfterViewChecked(): Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked(). This lifecycle hook is invoked after angular checks the component's views and child views, or the view that contains the directive.

ngOnDestroy(): Called immediately before Angular destroys the directive or component. We can use this lifecycle hook for Cleanup just before Angular destroys the directive or component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Explain Components, Modules and Services in Angular

Components in Angular are the main building block for Angular applications. Each component consists of 4 files by default .html, .less, .ts and .spec.ts. A component is basically a wrapper for our presentation layer and the logical layer.

An HTML template that declares what renders on the page. A Typescript class that defines behavior. A CSS selector that defines how the component is used in a template.

Module in Angular are basically a container for all the code blocks in the application. We declare and import all services, pipes, directives and components in the default main module created by angular at time of project creation which is the AppModule. We can create more than one modules for our application and lazy or eager load as per our requirement. An angular module is defined with the @NgModule() decorator.

Services in Angular are way of communicating between the components of an Angular application and sharing data between them. We can make our code modular and re-usable by means of services as it can be used across the application. Services in angular are declared with use of the @Injectable() decorator.

What are directives in Angular?

Directives are classes that add additional behavior to elements in your Angular applications. Directives are basically custom HTML attributes which Angular provides us Built in to use and some of which we can create by ourselves.

Below are the different types of Directives

Structural Directives:

These are the type of directives which helps us to create DOM Objects. We can add DOM objects and remove DOM objects inside our application dynamically by using these two directives.

*ngFor: Loop over the Array of objects creating HTML elements on which the directive is used.
*ngIf: Add or remove the HTML element from DOM depending upon the condition specified.

Attribute Directives:

These are the type of directives which helps us to change the look and feel and behavior of our HTML elements, attributes, properties, and components.

NgClass: adds and removes a set of CSS classes.
NgStyle: adds and removes a set of HTML styles.
NgModel: adds two-way data binding to an HTML form element.

Component Directives:

These are the types of directives with a template. This type of directive is the most common directive type. This Specifies that an Angular component is also a type of Directive.

What is Angular Router?

Angular Router is a Routing service for our angular application provided by Angular. Which we can import and use in our Application. We need specify the Array of Routes to this service and import it in our AppModule. This service is required for Navigating through different components/view of our angular application.

What is Angular Material?

Angular Material is a material UI component library built by the Angular team to integrate seamlessly with Angular applications. Angular Material provides built in ready to use components that helps in creating minimal, elegant and functional, HTML elements and pages. It consists of well tested components to ensure performance and reliability with straightforward APIs and consistent cross platform behavior.

Angular Material provides tools that help developers build their own custom components with common interaction patterns. It helps in creating faster, beautiful, and responsive websites. It is inspired by the Google Material Design.

What is string interpolation in Angular?

String Interpolation in Angular is method to bind data from the logical layer to the presentation layer. We can bind our ts variables in our html directly by using this mechanism called as string Interpolation which is denoted by double curly braces.

Below is the example

//ts file
title: String = 'Angular Application';

//html file
{{ title }}

How does one share data between components in Angular?

Following are the most common ways in which we can share data between angular components:

@Input: The @Input method is used when we want to pass data from parent to child.

@Output: The @Ouput method is used when we want to pass data from child to parent by using it EventEmmitter feature.
Services: Services are the most common way of sharing data across multiple components as its declared in the root of the component.

List out differences between AngularJS and Angular

Angular JS is the first ever version of Angular and is based on Javascript. Where as the Angular is completely based on Typescript which is a superset of Javascript and has backward compatibility.

Angular JS, based on JavaScript, uses terms of scope and controllers while Angular uses a hierarchy of components. Angular is component-based while AngularJS uses directives.

Angular is based on modern web applications platform and we can develop cross platform applications with single angular code.

What is AOT compilation?

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

For this Angular provides two types of compilers JIT and AOT. JIT stands for Just in Time, and AOT stands for Ahead of Time.

The Angular ahead-of-time (AOT) compiler converts our Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

We can use either JIT or AOT compiler for building our application.

//To use JIT compiler for Build run
ng build

//To use AOT compiler for Build run
ng build --prod

What are the advantages of AOT?

Smaller application size (Angular compiler excluded)
Faster component rendering (already compiled templates)
Template parse errors detected earlier (at build time)
More secure (no need to evaluate templates dynamically)

How are Angular expressions different from JavaScript expressions?
Like JavaScript expressions, Angular expressions can contain literals, operators, and variables. Unlike JavaScript expressions.

Angular expressions can be written inside HTML. Angular expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

Angular expressions support filters, while JavaScript expressions do not.

How are observables different from promises?

Observables:

Emit multiple values over a period of time.
Are lazy: they’re not executed until we subscribe to them using the subscribe() method.
Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values.
Provide the map for forEach, filter, reduce, retry, and retryWhen operators.
Deliver errors to the subscribers.
Promises:

Emit a single value at a time.
Are not lazy: execute immediately after creation.
Are not cancellable.
Don’t provide any operations.
Push errors to the child promises.

Explain the concept of Dependency Injection?

In software engineering, Dependency Injection is a technique in which an object receives other objects that it depends on. These other objects are called dependencies. The "injection" refers to the passing of a dependency (a service) into the object (a class) that would use it.

There are basically three types of dependency injection:

Constructor Injection: the dependencies are provided through a class constructor.
Setter Injection: the client exposes a setter method that the injector uses to inject the dependency.
Interface Injection: the dependency provides an injector method that will inject the dependency into any client passed to it. Clients must implement an interface that exposes a setter method that accepts the dependency.

Describe the MVVM architecture.

Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the presentation layer (the view) – be it via a markup language or GUI code – from the development of the logical layer or back-end logic (the model) so that the view is not dependent on any specific model platform.

Discuss the advantages and disadvantages of using Angular?
Below are the advantages and disadvantages of Angular.

Advantages of Angular:

MVC Architecture implementation
Enhanced Design Architecture
Dependency Injection (DI)
TypeScript: better tooling, cleaner code, and higher scalability
Large community and ecosystem
Powerful Router
Disadvantages of Angular:

Limited SEO options
Steeper learning curve

What is ngOnInit? How to define it?

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the component/directive is instantiated.

The ngOnInit() method is defined in a component class as below:

class MyComponent implements OnInit {
  ngOnInit() {
    // some code
  }
}

What is ViewEncapsulation in Angular?

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

The default ViewEncapsulation is Emulated, this view encapsulation emulates the behavior of shadow DOM by preprocessing (and renaming) the CSS code to effectively scope the CSS to the component's view. Angular adds the CSS to the global styles.

Angular provides there types of View Encapsulation. They are as follows:

Emulated: Styles from main HTML propagate to the component. Styles defined in this component's @Component decorator are scoped to this component only.
Native: Styles from main HTML do not propagate to the component. Styles defined in this
None: Styles from the component propagate back to the main HTML and therefore are visible to all components on the page. Be careful with apps that have None and Native components in the application. All components with None encapsulation will have their styles duplicated in all components with Native encapsulation.

Why prioritize TypeScript over JavaScript in Angular?

TypeScript simplifies JavaScript code, making it easier to read and debug. 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.

There are many more benefits of TypeScript over Javascript:

Consistency
Productivity
Maintainability
Modularity
Catch Errors Early

What is a Bootstrapping module in Angular?

Bootstrapping in Angular is a function component in the core ng module that is used for starting up the Angular application. By default the Appcomponent is the default component that will be bootstraped.

Below is the Default code for bootstrapping an angular application in app.module.ts

@NgModule({
    declarations: [
        AppComponent,

    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
    schemas: []
})

What is the difference between Pure and Impure pipe in Angular?

A Pure Pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.

An Impure Pipe is called for every change detection cycle no matter whether the value or parameter(s) changes.

Below is an example of pipe and its decorator for setting pipe type

@Pipe({
 name: 'myCustomPipe', 
 pure: true    // true means this is a Pure Pipe and false means its and Impure Pipe (default is true)
})

export class MyCustomPipe {}

What is RxJS?

The full form of RxJS is Reactive Extension for Javascript. It is a javascript library that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs.

RxJS is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. RxJS can be used with any other Javascript libraries and frameworks.

What is an observable?

Observables are simply a function that are able to give multiple values over time, either synchronously or asynchronously. You can also consider Observables as lazy Push collections of multiple values.

Observables provide support for passing messages between parts of your application. They are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values.

We can subscribe to an observable and get values synchronously or asynchronously.

Below is an example of how to create and Observable:

var observable = Rx.Observable.create((observer: any) =>{

   observer.next("This is an Observable");

})

observable.subscribe((data)=>{
   console.log(data);    // output - "This is an Observable"
});

What is an observer?

Observers are just objects with three callbacks, one for each type of notification that an Observable may deliver.

An Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next , error , and complete.

Below is an example of Observer and values retrieved after being Subscribed to it:

const observer = {
 next: x => console.log('This is next value: ' + x),
 error: err => console.error('Observer got an error: ' + err),
};

observable.subscribe(observer);

//OR

observable.subscribe(observer => {
  observer.next(10);
  observer.error("something went wrong");  
});

What are Angular Elements?

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

A custom element extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. The browser maintains a CustomElementRegistry of defined custom elements, which maps an instantiable JavaScript class to an HTML tag.

Live Example of Angular Elements :- Angular Elements Working Example

The custom elements standard is currently supported by browsers like Chrome, Opera, and Safari. To be able to use it Firefox and Edge polyfills are available. The Angular Elements functionality is available with the package @angular/elements.

In order to keep track of all available custom elements the browser maintains a registry in which every elements needs to be registered first. In this registry the name of the tag is mapped to the JavaScript class which controls the behavior and the output of that element.

What is Angular Universal or Angular SSR?

Angular Universal is mechanism provided by Angular team by which you can render your single page angular application on server instead of Browser. Typical Angular applications are Single-Page Applications (aka SPA's) where the rendering occurs on the Browser. This process can also be referred to as client-side rendering (CSR).

Angular Universal is a very helpful and SEO friendly approach for modern web applications.

The Angular Universal provides 2 options:

Server Side Rendering : In this method the requested page will be completely rendered on server and send to the browser
Pre-Rendering : In this method you have to provide a list of routes you want to pre-render then by using the pre rendering command and the routes mentioned it will complete the Build with fully rendered HTML pages
To add Angular Universal to your project use below command:

ng add @nguniversal/express-engine

What are Service Workers in Angular?

Service Worker in Angular is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy. They intercept all outgoing HTTP requests made by the application and can choose how to respond to them.

Service Workers helps in improving your application's performance.

To add Service Workers in your Angular application use below command:

ng add @angular/pwa

Checkout this Article: It covers complete Steps to Add Service Worker in Angular Application

What is Lazy Loading in Angular?

Lazy Loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles. When the user navigates through the app, the bundles are loaded as required.

Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.

Below is an example route for a lazy loaded module:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule'}
];

What is a Shared Module in Angular?

Shared modules in Angular helps you write more organized code in less time, helping you be more productive. Shared modules are an ideal spot to declare components in order to make them reusable. You won’t have to re-import the same components in every module—you’ll just import the shared module.

Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your app.

Below is an example of a Shared Module:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { SharedRoutingModule } from "./shared-routing.module";
import { SharedComponent } from "./components/shared/shared.component";

@NgModule({
 declarations: [SharedComponent],
 imports: [CommonModule, SharedRoutingModule],
 exports: [SharedComponent]
})

export class SharedModule {}

What is DOM Sanitizer in Angular?

Dom Sanitizer in Angular helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

Below are the different methods Provided by Angular for Sanitization and make sure any user data is appropriately escaped for this security context.

//default sanitize data
abstract sanitize(context: SecurityContext, value: string | SafeValue): string | null

//sanitize html
abstract bypassSecurityTrustHtml(value: string): SafeHtml

//sanitize css
abstract bypassSecurityTrustStyle(value: string): SafeStyle

//sanitize scripts
abstract bypassSecurityTrustScript(value: string): SafeScript

//sanitize url
abstract bypassSecurityTrustUrl(value: string): SafeUrl

//sanitize resource urls
abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl

Checkout other Articles in this series:

Part 1 of this series :- Angular Interview Questions Part 1

Part 2 of this series :- Angular Interview Questions Part 2

Part 3 of this series :- Angular Interview Questions Part 3

🔥🔥 Typescript New Version Features

Stacksjar — Mon, 29 Aug 2022 10:17:00 +0000

TypeScript is a programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language.

Typescript announced its Beta version 4.3 on 1st April 2021, to install this version you could use bellow command

npm install typescript@beta

Template String Type Improvements
New version introduces template literal types for contextually typed template literal expressions.Due to which when inferring to a template literal target type, typescript now permits the source type to also be a template literal type.

Below are some examples of improved assignment relations:

type Color = "red" | "blue";
type Quantity = "one" | "two";

type SeussFish = `${Quantity | Color} fish`;
// same as
//  type SeussFish = "one fish" | "two fish"
//         | "red fish" | "blue fish";
…or match patterns of other string-like types.

declare let s1: `${number}-${number}-${number}`;
declare let s2: `1-2-3`;

// Works!
s1 = s2;

Always-Truthy Promise Checks
Added support for throwing error for missing await in conditionals

static Index Signatures
Index signatures allow us set more properties on a value than a type explicitly declares. With latest version index signatures can now be declared as static.

Import Statement Completions
Improved Auto-imports statements, made easier and more reliable, When user start writing an import statement that doesn’t have a path, typescript will provide them with a list of possible imports. When user commit a completion, it’ll complete the full import statement, including the path that user were going to write.

Below is the example of auto imports with latest version of typescript

Editor Support for @link Tags
TypeScript can now understand @link tags, and will try to resolve declarations that they link to. What this means is that you’ll be able to hover over names within @link tags and get quick information, or use commands like go-to-definition or find-all-references.

For example, you’ll be able to go-to-definition on bar in @link bar in the example below and a TypeScript-supported editor will jump to bar‘s function declaration.

/**
 * This function depends on {@link bar}
 */
function foo() {

}

function bar() {

}

Union Enums Cannot Be Compared to Arbitrary Numbers
Solved issue about Certain enums are considered union enums when their members are either automatically filled in, or trivially written. In those cases, an enum can recall each value that it potentially represents.

In the new version, if a variable with a union enum type is compared with a numeric literal that it could never be equal to, then the type-checker will issue an error.

enum E {
 A = 0,
 B = 1,
}

function doSomething(x: E) {
 // Error! This condition will always return 'false' since the types 'E' and '-1' have no overlap.
 if (x === -1) {
  // ...
 }
}

//As a workaround, you can re-write an annotation to include the appropriate literal type.

// Include -1 in the type, if we're really certain that -1 can come through.
function doSomething(x: E | -1) {
 if (x === -1) {
  // ...
 }
}


//You can also use a type-assertion on the value.
function doSomething(x: E) {
 // Use a type asertion on 'x' because we know we're not actually just dealing with values from 'E'.
 if ((x as number) === -1) {
  // ...
 }
}

Alternatively, you can re-declare your enum to have a non-trivial initializer so that any number is both assignable and comparable to that enum. This may be useful if the intent is for the enum to specify a few well-known values.

enum E {
 // the leading + on 0 opts TypeScript out of inferring a union enum.
 A = +0,
 B = 1,
}

If you want to read the complete article you can checkout here.

Happy Coding!

For more Details Checkout the Article here:- Typescript New Version Features

Css Selectors for Input Ranges

Stacksjar — Mon, 29 Aug 2022 10:09:00 +0000

In this post we are going to check Css Selectors for input ranges. This selectors would not be known by many of us.

We all use input elements in our projects and must be aware of input type="number" this defines a field for entering number.

This allows in restricting user to enter any other character other than numbers. When we use the tag input and give its type attribute value of "number" as below

<input type="number">

This gives us below output

This input box comes with the 2 buttons on the right side which we can use to increase or decrease the number entered in the input.

We can set the min and max values for the number to be entered in the input as below

<input type="number" min="2" max="5">

This will restrict the user to enter only numbers that are between 2 and 5 as we have specified in the min and max attributes of the input.

Now we can use the CSS Selector to detect if the user has not entered between the specified min and max values and apply css for the same.

html

<input type="number" min="2" max="5">

css

input:in-range {
  border: 1px solid green;
}

input:out-of-range {
border: 1px solid red;
}

The above css code will check all the values entered in the Input Box, If the number entered in the input box is not between the range specified by min and max values it changes the color of input box to red as below

If the number entered is between the min and max values it will change the input box's color to green as below

This was the usage of in-range and out-of-range css selectors, hope you find this usefull.

Happy Coding!

Checkout Complete Article Here: Psuedo Selectors for Inputs in Css

List of Best GitHub Repos for Web Developers

Stacksjar — Thu, 11 Aug 2022 21:40:50 +0000

In this post we are going to check best GitHub Repositories for Web Developers to learn fundamentals of Coding and Boost Productivity. List of the most Useful GitHub Repos are as below

Node.js Best Practices

GitHub: https://github.com/goldbergyoni/nodebestpractices

Watch: 1.7k Star: 61.8k Fork: 6k

Website: https://twitter.com/nodepractices/

This repos consists of All the Node.js Best Practices and Projects Structures for your Node.js development. This repo supports multiple languages in which you can read.

This repository is a summary and curation of the top-ranked content on Node.js best practices, as well as content written here by collaborators

It is the largest compilation, and it is growing every week - currently, more than 80 best practices, style guides, and architectural tips are presented. New issues and pull requests are created every day to keep this live book updated.

They are open for contribution checkout their Guidelines for contributing to the repo. This Contribution may include fixing code mistakes, helping with translations, or suggesting brilliant new ideas.

This repo includes below:

Project Structure Practices
Error Handling Practices
Code Style Practices
Testing And Overall Quality Practices
Production Practices
Security Practices
Performance Practices
Docker Best Practices

Html5-Boilerplate

GitHub: https://github.com/h5bp/html5-boilerplate

Watch: 2.7k Star: 49.3k Fork: 11.4k

Website: https://html5boilerplate.com

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

This project is the product maintainer over 10 years of iterative development and community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.

You get various options to download and use this for you development check out the GitHub page.

You can also checkout the live website from here html5-boilerplate

You Don't Know JS (YDKJS)

GitHub: https://github.com/getify/You-Dont-Know-JS

Watch: 5.9k Star: 135k Fork: 26.8k

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is a book series there are two editions to it.

These books are being released here as drafts, free to read, but are also being edited, produced, and published through O'Reilly.

This books will be focusing on below topics:

Scope & Closures
Objects & Classes
Types & Grammar
Sync & Async
ES.Next & Beyond

Airbnb JavaScript Style Guide()

GitHub: https://github.com/airbnb/javascript

Watch: 3.9k Star: 107k Fork: 20.6k

This GitHub Repo is well structured for almost every aspects of JavaScript.

This repo also supports multi language translation feature, which means you can read it from here under different languages.

Below are the points cover in this GitHub Repo

Types
References
Objects
Arrays
Destructuring
Strings
Functions
Arrow Functions
Classes & Constructors
Modules
Iterators and Generators
Properties
Variables
Hoisting
Comparison Operators & Equality
Blocks
Control Statements
Comments
Whitespace
Commas
Semicolons
Type Casting & Coercion
Naming Conventions
Accessors
Events
jQuery
ECMAScript 5 Compatibility
ECMAScript 6+ (ES 2015+) Styles
Standard Library
Testing
Performance
Resources

RealWorld

GitHub: https://github.com/gothinkster/realworld

Watch: 1.6k Star: 55.4k Fork: 4.9k

While most "todo" demos provide an excellent cursory glance at a framework's capabilities, they typically don't convey the knowledge & perspective required to actually build real applications with it.

RealWorld solves this by allowing you to choose any frontend (React, Angular 2, & more) and any backend (Node, Django, & more) and see how they power a real world, beautifully designed fullstack app called "Conduit".

Over 100 implementations have been created using various languages, libraries, and frameworks.

This Repo consists of step-by-step tutorials for all of stacks that teach you how to go from git init all the way to the production ready application.

Front End Checklist
GitHub: https://github.com/thedaviddias/Front-End-Checklist

Website: https://frontendchecklist.io/

Watch: 1.4k Star: 48.3k Fork: 4.8k

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

It is based on Front-End developers' years of experience, with the additions coming from some other open-source checklists.

This Repo is also available in different other languages checkout the GitHub page

So this was an github collection of repositories which included one of the most useful github repositories.

Hope you have found this post Useful.

Happy Coding!

Read Complete Article Here:- https://stacksjar.com/post/best-github-repos-for-web-developers

Top Javascript Frameworks 2022

Stacksjar — Thu, 11 Aug 2022 21:28:00 +0000

In this post we are going to check top javascript frameworks 2021 that we should get our Hands on. Below is the list of top javascript frameworks to learn in 2021 and check its pros and cons.

Angular

Angular is an open source development platform, built on TypeScript by Google. Angular is a component-based framework for building scalable web applications.

Angular consists of a collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more.

Angular is a suite of developer tools to help us develop, build, test, and update our code.

Advantages of Angular:

Limited SEO options
Steeper learning curve

React JS

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Advantages of React JS:

Easy to learn and Use
Creating Dynamic Web Applications Becomes Easier
Reusable Components
Performance Enhancement
The Support of Handy Tools
SEO Friendly
Its a JavaScript Library

Disadvantages of React JS:

The high pace of development
Poor Documentation
Focused only on View Part
JSX having steep learning curve

Vue JS

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

Advantages of Vue JS:

Tiny size
Virtual DOM rendering and performance
Reactive two-way data binding
Single-file components and readability
Integration capabilities and flexibility
Solid tooling ecosystem
Easy to learn
Concise documentation
Disdvantages of Vue JS:

Reactivity complexity
Lack of support for large-scale projects
Risk of over flexibility
Limited resources

Ember JS

Ember.js is an open-source JavaScript web framework, utilizing a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

Advantages of Ember JS:

Ember CLI
Community
Ember Octane
Convention over configuration
Stability sans stagnation

Disdvantages of Ember JS:

Tough to learn
Highly opinionated
Sluggishness in popularity

Backbone JS

Backbone.js is a JavaScript library with a RESTful JSON interface and is based on the model–view–controller application design paradigm. Backbone is known for being lightweight, as its only hard dependency is on one JavaScript library, Underscore.js, plus jQuery for use of the full library.

Advantages of Backbone JS:

Fast to pick up
Easy customizable
Javascript structure
Lightweight
Flexible
Performance Control

Disdvantages of Backbone JS:

Productivity
Memory Leaking
Required basic tool to create architecture structure
Data binding

Read Complete Article here:- https://stacksjar.com/post/top-javascript-frameworks-to-learn-in-2021

✨10 Html Tags to make Life Easier

Stacksjar — Sat, 06 Aug 2022 16:08:20 +0000

Meter Tag
The Meter tag in HTML allows us to represent the data in a graphical format without doing much of coding. The meter tag is used to measure data within a given range. It defines a scalar measurement with range. It is also known as a gauge. It can be used to display metrics info such as quantity of something or showing ratings or marks etc.

Below is an example of Meter Tag

<h2>Stacksjar.com</h2>
<hr>

<br>
<label for="disk_c">Best Web Development Articles</label>
<meter id="disk_c" value="8" min="0" max="10">8 out of 10</meter><br>
<br>
<label for="disk_c">Web Development Memes</label>
<meter id="disk_c" value="6" min="0" max="10">6 out of 10</meter><br>
<br>
<label for="disk_c">Quotes for Web Development Articles</label>
<meter id="disk_c" value="4" min="0" max="10">4 out of 10</meter><br>

Below is the Output for Meter Tag

Wordbreaker Tag
The wordbreaker tag in HTML is used to break a sentence within a paragraph at a particular instance or after a particular work as per our requirements. This tag will come in effect for responsive purposes when we resize the window we will see that the text inside the tag will begin in new line apart from being randomly broken from anywhere between sentence.

Below is an example of Wordbreaker tag

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.
</p>

Below is the Output of Wordbreaker tag

Link Tag that Dials Numbers
If we include "tel" keyword in value of "href" attribute of link tag followed by the number, it will allow the device to initiate a call. The device will call the number when user clicks on the Link. This functionality works on mobile devices, tablets uses software's like skype, face time or devices which supports cellular calling.

Below is the Output of Link Tag that dials numbers.

<a href="tel:1234567890">Call Us</a>

Fieldset Tag and Legend Tag

The fieldset tag in HTML is used to specify a group of form elements. And the Legend Tag is used to define the title for the child contents. The legend elements are the parent element. This tag is used to define the caption for the fieldset element.

Below is an example of Fieldset tag and Legend Tag

<legend>
<form>
  <fieldset>
    <legend style="float:right">Sign Up:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="password">password:</label>
    <input type="password" id="password" name="password"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Below is the Output of Fieldset tag and Legend Tag

Open Link in New Tab

The "target" attribute of link tag allows us to decide whether the link should be opened in new tab or the same tab the user is in. If we pass in the value "_blank" to the target attribute it will open the link in new tab when user clicks on the particular link

<a href="https://stacksjar.com/memes" target="_blank">Web Development Memes</a>

Code Tag
The code tag in html allows to define a fragment of code in the html. Which will be displayed in a code editor view/format in the browser.

Below is the example of Code tag


function print() {

 console.log("High Quality Practical Resources to skill up your Web Development Career and Boost your           Productivity");

}

Below is the Output of Code tag

Keyboard Tag
The kbd tag is also know as keyboard tag. HTML keyboard tag represents the part of inline text which indicates the user keyboard input, voice input, or any other text entry device input. The keyboard text renders on the browser in default monospace font. This tag is used when a document needs to display the text which user should enter exactly from his keyboard.

Below is the example of keyboard tag

<p>Save this File by Pressing <kbd>Ctrl + S</kbd></p>

Below is the Output of keyboard tag

Read Complete Article here:- 10 Html Tags to make Life Easier

💎Free Wordpress Themes for your Website💎

Stacksjar — Sat, 06 Aug 2022 16:07:20 +0000

What is ThemesRain?

ThemesRain is a marketplace where you can purchase both, premium and free versions of WordPress themes to design a website that is both professional and simple to create. Each website designed using the ThemesRain template is retina-ready and designed to reach out to larger audiences with enhanced search engine optimization, responsive design, and innovative designing.

If you are wondering whether it is perfect for your business, then keep on reading. Below we'll mention some of the pros and cons of ThemesRain WordPress themes, which will help your business create a niche for itself.

Pros

● Themes listed on ThemesRain are highly customizable

● You get the best deal with ThemesRains

● Enhance safety for payment transactions

● User-friendly and simple designs for quick installations

● Highly responsive design which works across any platform

● SEO-optimized designs to improve your ratings

Cons

● Designing, developing and maintenance of website based on WordPress can be challenging

● Though some WordPress themes are free, you may need to purchase plugins to get the best results

● SEO-based features of WordPress can be difficult to understand for beginners

Product Categories Of ThemesRain (Premium and Free)

ThemesRain offers a wide range of pre-designed WordPress themes that are suitable for a variety of businesses. Most businesses suffer due to a lack of professional websites which can direct more business and clients towards them. A professional website not only builds trust among customers but also helps you become a part of the never-ending business world. Having said that not everyone is well-versed with coding and creating a website for businesses can be a tough nut to crack.

If you think that you can hire a person who is well-versed with coding languages, then it's well and good, but not every business has a budget set aside for website developers, in that case, you need an alternative and that’s where WordPress themes by ThemesRain come in. All themes designed by ThemesRain are designed for people with limited to no knowledge of coding. With easy demo and one-click installation, you get to design a professional website which is your way to make a name for yourself and your business.

In case you are wondering whether, ThemesRain has a template for business, then check out below for different types of businesses they cater to. We are sure there is one theme that is perfect for your business:

● Restaurant Websites

● Construction & Real Estate Websites

● Beauty Industry Websites

● Interior Design Websites

● University & Institute Websites

● Sports Websites

● Legal Firm Websites

● Travel Blogs

● Flower Business Websites

● News Agency Websites

● Medical Websites

● Cryptocurrency Websites

● Funeral Business Websites

● Car Mechanic Websites

● Health Websites

All the themes that we have mentioned are available in premium and free versions. But we urge you to invest in a premium version that allows you to reap the full benefits of WordPress themes with all the features, plugins, and add-ons.

Get Discounts from Here:- Free Wordpress Themes

Enable Together Mode in Microsoft Teams

Stacksjar — Sat, 06 Aug 2022 16:06:21 +0000

Microsoft has launched a new feature for their teams application. Together mode is one of the feature of new meeting experience in Teams app. The together mode uses AI segmentation technology to digitally place participants in a shared background. This makes you feel like you’re sitting in the same room with everyone else in the meeting or class as shown in image above. Below is the difference between the normal meeting experience and together mode meeting experience.

Who Can Use Together Mode in Teams?
The Together Mode feature is available to all users. As of now, it is available for the desktop version only but will be extended to the Android/iOS Teams application soon mentioned by Microsoft Teams. As seen in the picture above, the Together Mode feature will be launched with an auditorium view. This view provides a semblance to people gathered in an auditorium, while you watch the audience as a speaker. More views are expected to be launched as the feature evolves.

How do you get team mode together?
Open Microsoft Teams, Click on profile icon > About > Version – Now you can see the current version of MS-Teams make sure you are updated to latest version.

Now Click on profile icon > Settings > Put a check mark in “Turn on New Meeting Experience”

Then In Teams Go-to your calendar, Click on Meet Now > if the new meeting experience is enabled, user find the meeting controls at top of the window.

Microsoft ensures that the Teams app will now segment the faces using Artificial Intelligense (AI) and bring everyone together. This feature requires at least need 4 participants from same tenant to enable Together Mode in Microsoft Teams. Together mode stays greyed out until the 4th participant joins the call. Microsoft states that the gallery view can fit up to 49 users max at present.

In addition - Dynamic View, Large gallery view, Live reactions, video filters are also features of new meeting experience

Advantages of Together Mode
The primary benefit of Together Mode in Microsoft Teams is being able to see all the members of the meeting together as if they are one room or class and sitting together. It can discard the old classic video call feature where you can see one people at a time with a boxed view which nullifies to see just a restricted number of people at a time is eased. When you make a normal Teams video conference, the person who is talking frequently appears on the meeting screen with the boxed view. The rest of the persons in the meeting are in the background and are virtually ignored until they start talking in the meeting. This new feature ‘Together Mode’ acknowledges this issue. You can easily view all the people present on the call as well as read their body language and reactions during the meeting, just like we do can in physically with ease of our homes. Also this advantage is otherwise very difficult in their home environments or different backgrounds.

Read Complete Article Here:- Enable Together Mode in Microsoft Teams

✨Useful Css Shorthand Properties

Stacksjar — Sat, 06 Aug 2022 16:05:39 +0000

In this post we are going to check the most useful and commonly used Css Shorthand Properties which will help us in our productivity.

Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS background property is a shorthand property that's able to define the values of background-color, background-image, background-repeat, and background-position. Similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand.

These are Top 5 Useful CSS Shorthand Properties

Shorthand Property for FONTS

Before:

 font-style: italic;
 font-weight: bold;
 font-size: 18px;
 font-family: 'Bree Serif', serif;

After:

 font: italic bold 18px Bree Serif, sans-serif;

Shorthand Property for BACKGROUND

Before:

 background-color: white;
 background-image: url(images/background.jpg);
 background-repeat: no-repeat;
 background-position: top right;

After:

 background: white url(images/background.jpg) no-repeat top right;

Shorthand Property for MARGIN

Before:

 margin-top: 10px;
 margin-right: 4px
 margin-bottom: 10px;
 margin-left: 4px;

After:

margin: 10px 4px 10px 4px;

Shorthand Property for LIST

Before:

 list-style-type: circle;
 list-style-position: inside;
 list-style-image: url(pointer.jpg);

After:

list-style: circle inside url(pointer.jpg);

Shorthand Property for BORDER

Before:

  border-width: 1px;
  border-style: solid;
  border-color: gray;

After:

border: 1px solid gray;

Hope you find this post Useful.

Read Complete Article Here: Useful Css Shorthand Properties

✨Web Developement Quotes | Developer Slangs

Stacksjar — Fri, 05 Aug 2022 21:38:56 +0000

“If you think math is hard, try web design.”
-Trish Parr

“Design is not just what it looks like and feels like. Design is how it works.”
-Steve Jobs

“If you think good design is expensive, you should look at the cost of bad design.”
-Ralf Speth

“If you do good work for good clients, it will lead to other good work for other good clients. If you do bad work for bad clients, it will lead to other bad work for other bad clients.”
-Michael Bierut

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”
-Antoine de Saint-Exupéry

“Digital design is like painting, except the paint never dries.”
-Neville Brody

“Socrates said, “Know thyself.” I say, “Know thy users.” And guess what? They don’t think like you do.”
-Joshua Brewer

“I want to make beautiful things, even if nobody cares, as opposed to ugly things. That’s my intent.”
-Saul Bass

“Good design is all about making other designers feel like idiots because that idea wasn’t theirs.”
-Frank Chimero

“I strive for two things in design: simplicity and clarity. Great design is born of those two things.”
-Lindon Leader

“Content precedes design. Design in the absence of content is not design, it’s decoration.”
-Jeffrey Zeldman

“There is no such thing as a boring project. There are only boring executions.”
-*Irene Etzkorn

“Websites promote you 24/7: No employee will do that.”
-Paul Cookson

“It’s not how good you are, it’s how good you want to be”
-Paul Arden

“Great web design without functionality is like a sports car with no engine.”
-Paul Cookson

“Good design is obvious. Great design is transparent.”
-Joe Sparano

“Websites should look good from the inside and out.”
-Paul Cookson

“The idea of waiting for something makes it more fascinating”.
-Andy Warhol

Get Random Quotes Here: Stacksjar Quotes

🎨Top 12 Color Palette Tools | Best Color Picker Tools

Stacksjar — Fri, 05 Aug 2022 21:38:26 +0000

In this post we are going to check top 12 color palettes tools available in the market for free. You can use this color picket tool for free for your next project.

Html Color Codes

Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names. Let's go!

Website: HTML Color Codes

Pros and Cons of HTML Color Codes
...

HueSnap

HueSnap is a color sharing community for creatives, focused on allowing users to create palettes through snapping colors from images or now, using our color tool.

Website: HueSnap

Pros and Cons of HTML Color Codes
Pros

Create Customized Palettes:
Snap colors from your uploaded images or use the color wheel to create a customized palette.
Share Your Creations
Share your created palettes with the community and find color inspirations for projects.
Sync between devices
Access your color palettes through Desktop or your devices on iOS or Android.

ColourLovers
Share Your Color Ideas & Inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

Website: ColourLovers

Pros and Cons of Colour Lovers
...

Colormind
Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.Different datasets are loaded each day, check back tomorrow for even more color inspiration. Visit the blog for tech info or have a look at our API

Website: Colormind

Pros and Cons of Colormind:
Colormind has a REST API. The API allows you to access all the features that you see on Colormind.io.
The API is free for personal and non-commercial use.

ColorHunt
Color Hunt provides Color Palettes for Designers and Artists. Discover the newest hand-picked palettes of Color Hunt

Website: ColorHunt

Pros and Cons of Color Hunt
...

Eggradients
Eggradient is a color collection tool. The collection builds to make designer life easy. Generating the cool gradients is time-consuming. In this collection, the designer finds what exactly they want.

Website: Eggradients

Pros and Cons of Eggradients
...

Khroma
Khroma is an AI-based color tool built specifically for designers. With Khroma, you get to train an AI algorithm by choosing 50 colours that you like. These colours are then used to train a neural network that can recognise thousands of other similar colours. Based on your preferences, the model generates an endless combination of color palettes.

Website: Khroma

Pros and Cons of Khroma
...

Read Complete Article Here:- Top 12 Color Palette Tools | Best Color Picker Tools

📚Angular Interview Questions Part 2

Stacksjar — Fri, 05 Aug 2022 21:27:00 +0000

In this article we are going to see a well curated list of angular interview questions 2021 and answers for experienced as well as freshers

What is AOT compilation?

For this Angular provides two types of compilers JIT and AOT. JIT stands for Just in Time, and AOT stands for Ahead of Time.

We can use either JIT or AOT compiler for building our application.

//To use JIT compiler for Build run
ng build

//To use AOT compiler for Build run
ng build --prod

What are the advantages of AOT?

How are Angular expressions different from JavaScript expressions?
Like JavaScript expressions, Angular expressions can contain literals, operators, and variables. Unlike JavaScript expressions.

Angular expressions can be written inside HTML. Angular expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.

Angular expressions support filters, while JavaScript expressions do not.

How are observables different from promises?

Observables:

Emit a single value at a time.
Are not lazy: execute immediately after creation.
Are not cancellable.
Don’t provide any operations.
Push errors to the child promises.

Explain the concept of Dependency Injection?

There are basically three types of dependency injection:

Describe the MVVM architecture.

Discuss the advantages and disadvantages of using Angular?
Below are the advantages and disadvantages of Angular.

Advantages of Angular:

Limited SEO options
Steeper learning curve

What is ngOnInit? How to define it?

The ngOnInit() method is defined in a component class as below:

class MyComponent implements OnInit {
  ngOnInit() {
    // some code
  }
}

What is ViewEncapsulation in Angular?

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

Angular provides there types of View Encapsulation. They are as follows:

Read Complete Articles Here:-

Part 1 of this series :- Angular Interview Questions Part 1

Part 2 of this series :- Angular Interview Questions Part 2

Part 3 of this series :- Angular Interview Questions Part 3