Aroyan
2 years ago
committed by
GitHub
commit
c2574c3787
244 changed files with 6774 additions and 240 deletions
@ -0,0 +1,93 @@ |
||||
Our last guide was about the [basics of authentication](/guides/basics-of-authentication), where we discussed authentication, authorization, types of authentication, authentication factors, authentication strategies, and so on. |
||||
|
||||
In this guide today, we will be learning about basic authentication, and we will see how we can implement Basic Authentication in Node.js. We have a [visual guide on the basic authentication](/guides/basic-authentication) and an illustrative video, watch the video below or continue reading: |
||||
|
||||
<iframe src="https://www.youtube.com/embed/mwccHwUn7Gc" title="HTTP Basic Authentication" /> |
||||
|
||||
## What is Basic Authentication? |
||||
Given the name "Basic Authentication", you should not confuse Basic Authentication with the standard username and password authentication. Basic authentication is a part of the HTTP specification, and the details can be [found in the RFC7617](https://www.rfc-editor.org/rfc/rfc7617.html). |
||||
|
||||
Because it is a part of the HTTP specifications, all the browsers have native support for "HTTP Basic Authentication". Given below is the screenshot from the implementation in Google Chrome. |
||||
|
||||
 |
||||
|
||||
|
||||
## How does it Work? |
||||
Now that we know what basic authentication is, the question is, how does it work? The answer is: it is controlled by the response of the server. |
||||
|
||||
### Step 1 |
||||
When the browser first requests the server, the server tries to check the availability of the `Authorization` header in the request. Because it is the first request, no `Authorization` header is found in the request. So the server responds with the `401 Unauthorized` response code and also sends the `WWW-Authenticate` header with the value set to `Basic`, which tells the browser that it needs to trigger the basic authentication flow. |
||||
|
||||
```text |
||||
401 Unauthorized |
||||
WWWW-Authenticate: Basic realm='user_pages' |
||||
``` |
||||
|
||||
If you notice the response, we have an additional parameter called `realm`, which is just a value assigned to a group of pages that share the same credentials. |
||||
|
||||
The browser might use Realm to cache the credential. In the future, when there is an authentication failure browser will check if it has the credentials in the cache for the given realm of the domain, and it may use the same credentials. |
||||
|
||||
## Step 2 |
||||
Upon receiving the response from the server, the browser will notice the `WWW-Authenticate` header and will show the authentication popup. |
||||
|
||||
 |
||||
|
||||
## Step 3 |
||||
After the user submits the credentials through this authentication popup, the browser will automatically encode the credentials using the `base64` encoding and send them in the `Authorization` header of the same request. |
||||
|
||||
### Step 4 |
||||
Upon receiving the request, the server will decode and verify the credentials. If the credentials are valid, the server will send the response to the client. |
||||
|
||||
So that is how Basic Authentication works. |
||||
|
||||
## Basic Authentication in Node.js |
||||
I have prepared the sample project in Node.js, which can be found on GitHub [kamranahmedse/node-basic-auth-example](https://github.com/kamranahmedse/node-basic-auth-example). If you look at the codebase of the project, we have two files `index.js` with the following content: |
||||
|
||||
```javascript |
||||
// src/index.js |
||||
|
||||
const express = require('express'); |
||||
const authMiddleware = require('./auth'); |
||||
|
||||
const app = express(); |
||||
const port = 3000; |
||||
|
||||
// This middleware is where we have the |
||||
// basic authentication implementation |
||||
app.use(authMiddleware); |
||||
|
||||
app.get('/', (req, res) => { |
||||
res.send('Hello World!'); |
||||
}); |
||||
|
||||
app.listen(port, () => { |
||||
console.log(`App running @ http://localhost:${port}`); |
||||
}) |
||||
``` |
||||
|
||||
As you can see, it's just a regular express server. `authMiddleware` registration is where we have all the code for "Basic Authentication". Here is the content of the middleware: |
||||
|
||||
```javascript |
||||
// src/auth.js |
||||
const base64 = require("base-64"); |
||||
|
||||
function decodeCredentials(authHeader) { |
||||
// ... |
||||
} |
||||
|
||||
module.exports = function(req, res, next) { |
||||
// Take the header and decode credentials |
||||
const [username, password] = decodeCredentials(req.headers.authorization || ''); |
||||
|
||||
// Verify the credentials |
||||
if (username === 'admin' && password === 'admin') { |
||||
return next(); |
||||
} |
||||
|
||||
// Respond with authenticate header on auth failure. |
||||
res.set('WWW-Authenticate', 'Basic realm="user_pages"'); |
||||
res.status(401).send('Authentication required.'); |
||||
} |
||||
``` |
||||
|
||||
And that is how the basic authentication is implemented in Node.js. |
||||
@ -1,3 +1,9 @@ |
||||
# Column Databases |
||||
|
||||
A **<u>columnar database</u>** is a database management system (DBMS) that stores data in columns as opposed to rows. The main advantage of columnar databases over row-oriented ones is their **<u>faster performance</u>**; this is due in large part to them accessing less memory to output data. This column structure can store more data in a smaller amount of memory. And because the initial data retrieval is done on a column-by-column basis, only the columns that need to be used are retrieved. This grants columnar databases like **Cassandra DB** their ability to scale efficiently and handle large amounts of data. |
||||
A **<u>wide-column database</u>** (sometimes refered to as a column database) is similar to a relational database. It store data in tables, rows and columns. However in opposite to relational databases here each row can have its own format of the columns. Column databases can be seen as a two-dimensional key-value database. One of such database system is **Apache Cassandra**. |
||||
|
||||
**Warning:** <a href="https://en.wikipedia.org/wiki/Wide-column_store#Wide-column_stores_versus_columnar_databases">note that a "columnar database" and a "column database" are two different terms!</a> |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://cassandra.apache.org/_/index.html'>Apache Cassandra</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=J-cSy5MeMOA'>Apache Cassandra Database - Full Course for Beginners</BadgeLink> |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Mitigation strategies |
||||
# Mitigation Strategies |
||||
|
||||
This section is mainly relevant to the cloud design patterns that help you build scalable solutions. Have a look at the [Cloud Design Patterns](https://learn.microsoft.com/en-us/azure/architecture/patterns/) docs by Microsoft and this video covering [the throttling, retry and circuit breaker patterns](https://www.youtube.com/watch?v=0HoTGgb5oFg) |
||||
|
||||
@ -1 +1,43 @@ |
||||
# Compiling apps |
||||
# Compiling Apps |
||||
|
||||
# gcc |
||||
|
||||
The GNU Compiler Collection (GCC) is a compiler system produced by the GNU Project supporting various programming languages also known as GCC. GCC is a key component of the GNU tool chain and the standard compiler for most Unix-like operating systems. Compiler Collection is a set of compilers and development tools available for Linux and an array of other operating systems. It includes support primarily for C and C++. It provides all of the infrastructure for building software in those languages from source code to assembly. |
||||
|
||||
"What is GCC used for?" GCC is a toolchain that compiles code, links it with any library dependencies, converts that code to assembly, and then prepares executable files.It is responsible for the conversion of the “high level” source code in the respective language and ensuring that it is semantically valid, performing well formed optimizations, and converting it to assembly code (which is then handed off to the assembler). |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://courses.cs.washington.edu/courses/cse451/99wi/Section/gccintro.html'>Intro to GCC</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.javatpoint.com/gcc-linux'>GCC Linux</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/gcc-command-in-linux-with-examples/'>GCC Commands</BadgeLink> |
||||
|
||||
# make |
||||
|
||||
The GNU Make is a tool which enables and controls the creation of executables and other non-source files of a program from the program's source files. |
||||
Make builds the program from a file called the makefile, which lists each of the non-source files and how to compute it from other files. When you write a program, you should write a makefile for it, so that it is possible to use Make to build and install the program. |
||||
|
||||
"What is make used for?" Make enables the end user to build and install your package without knowing the details of how that is done -- because these details are recorded in the makefile that you supply. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://makefiletutorial.com'>Makefile Tutorial</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.gnu.org/software/make/manual/'>Documentation for make</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cs.swarthmore.edu/~newhall/unixhelp/howto_makefiles.html'>Using Make and writing Makefiles</BadgeLink> |
||||
|
||||
# sbt |
||||
|
||||
sbt is an open-source build tool for Scala and Java projects, similar to Apache's Maven and Ant. Its main features are: Native support for compiling Scala code and integrating with many Scala test frameworks. Continuous compilation, testing, and deployment. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scala-sbt.org/1.x/docs/'>Sbt Documentation</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scala-sbt.org/1.x/docs/sbt-by-example.html'>Sbt By Example</BadgeLink> |
||||
|
||||
# gradle |
||||
|
||||
Gradle is a build automation tool known for its flexibility to build software. A build automation tool is used to automate the creation of applications. The building process includes compiling, linking, and packaging the code. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/gradle/index.htm'>Gradle Tutorial</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://tomgregory.com/gradle-tutorial-for-complete-beginners/'>Gradle for absolute beginners</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://gradle.org/guides/'>Gradle Guides</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,9 @@ |
||||
# Tcpdump |
||||
|
||||
`tcpdump` is a command line tool used for analysing network traffic passing through your system. It can be used to capture and filter packets and display them in a human-readable format. The captured information can be analysed at a later date as well. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.tcpdump.org/manpages/tcpdump.1.html'>tcpdump Documentation</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://opensource.com/article/18/10/introduction-tcpdump'>Basic Introduction to Tcpdump</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://danielmiessler.com/study/tcpdump/'>50 ways to isolate traffic with Tcpdump</BadgeLink> |
||||
<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7bsQP9sKHrs'>Interpreting Tcpdump output and data</BadgeLink> |
||||
@ -1 +1,6 @@ |
||||
# Iptables |
||||
|
||||
IPtables is a command-line firewall utility that uses policy chains to allow or block traffic that will be enforced by the linux kernel’s netfilter framework. Iptables packet filtering mechanism is organized into three different kinds of structures: tables, chains and targets. |
||||
|
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.hostinger.in/tutorials/iptables-tutorial'>Iptables tutorial</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://erravindrapawadia.medium.com/iptables-tutorial-beginners-to-advanced-guide-to-linux-firewall-839e10501759'>Beginners to Advanced Guide Iptables</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Strace |
||||
# strace |
||||
|
||||
`strac` is a useful diagnsotic, debugging tool for unix based operating systems. It traces the system calls and signals a processs uses during its lifetime. And usually returns the name of the each system calls , its arguments and what it returned. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://strace.io/'>Strace Official Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Page' href='https://man7.org/linux/man-pages/man1/strace.1.html'>Strace — Linux manual page</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Uname |
||||
|
||||
Uname is a short form of Unix name and it helps to print the system information for both hardware and software in the current running system. |
||||
|
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.tutorialspoint.com/unix_commands/uname.htm'>Uname Command Tutorial</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.howtoforge.com/linux-uname-command/'>Uname Tutorial For Beginners</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://linuxize.com/post/uname-command-in-linux/'>Uname Command In Linux</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Ufw |
||||
# UFW |
||||
|
||||
UFW, or *uncomplicated firewall*, is command-line based utility for managing firewall rules in Arch Linux, Debian and Ubuntu. It's aim is to make firewall configuration as simple as possible. It is a frontend for the `iptables` firewalling tool. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://manpages.ubuntu.com/manpages/trusty/man8/ufw.8.html'>ufw Documentation</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.linux.com/training-tutorials/introduction-uncomplicated-firewall-ufw/'>Basic Introduction to UFW</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/ufw-essentials-common-firewall-rules-and-commands'>UFW Essentials</BadgeLink> |
||||
@ -1 +1,9 @@ |
||||
# White grey listing |
||||
# White Listing vs Grey Listing |
||||
|
||||
White listing is a process of adding an email to an approved sender list, so emails from that sender are never moved to the spam folder. This tells an email server to move messages to the inbox directly. |
||||
|
||||
`Greylisting` is a method of protecting e-mail users against spam. A mail transfer agent (MTA) using greylisting will "temporarily reject" any email from a sender it does not recognize. If the mail is legitimate, the originating server will try again after a delay, and the email will be accepted if sufficient time has elapsed. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cblohm.com/blog/education-marketing-trends/what-is-email-whitelisting/'>Basic Introduction to whitelisting</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.wikipedia.org/wiki/Greylisting_(email)'>Detailed Introduction to greylisting</BadgeLink> |
||||
|
||||
@ -1,8 +1,9 @@ |
||||
# Ansible |
||||
|
||||
Ansible is an open-source configuration management, application deployment and provisioning tool that uses it's own declarative language in YAML. Ansible is agentlesse, meaning you only need remote connections via SSH or Windows Remote Management via Powershell in order to function |
||||
Ansible is an open-source configuration management, application deployment and provisioning tool that uses its own declarative language in YAML. Ansible is agentless, meaning you only need remote connections via SSH or Windows Remote Management via Powershell in order to function |
||||
|
||||
|
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.ansible.com/'>Ansible Website</BadgeLink> |
||||
<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.ansible.com/'>Official Documentation</BadgeLink> |
||||
<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://www.ansible.com/resources/get-started'>Ansible Getting Started Guide</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=9Ua2b06oAr4'>Ansible Full Course for Beginners</BadgeLink> |
||||
|
||||
@ -1 +1,12 @@ |
||||
# Monit |
||||
|
||||
Monit is a small Open Source utility for managing and monitoring Unix systems. Monit conducts automatic maintenance and repair and can execute meaningful causal actions in error situations. |
||||
|
||||
Monit has the ability to start a process if it is not running, restart a process if not responding, and stop a process if uses high resources. Additionally, you can also use Monit to monitor files, directories, and filesystems for changes, checksum changes, file size changes, or timestamp changes. |
||||
|
||||
With Monit, you can able to monitor remote hosts’ TCP/IP port, server protocols, and ping. Monit keeps its own log file and alerts about any critical error conditions and recovery status. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mmonit.com/monit/'>Monit Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://mmonit.com/monit/documentation/monit.html'>Monit Official Documentation</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.tecmint.com/monit-linux-services-monitoring/'>Monit Tutorial</BadgeLink> |
||||
|
||||
@ -1,3 +1,6 @@ |
||||
# Application Monitoring |
||||
|
||||
Application monitoring refers to the practice of making the status and performance of a given *application* visible. This may include details such as stacktraces, error logs, and the line of code implicated in a given failure. When combined with Infrastructure monitoring, this can provide a complete picture of what is happening in your system, and why. |
||||
|
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/applying-basic-vs-advanced-monitoring-techniques/'>Applying Basic vs. Advanced Monitoring Techniques</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/why-legacy-apps-need-your-monitoring-love-too/'>Why Legacy Apps Need Your Monitoring Love, Too</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Logs management |
||||
# Logs Management |
||||
|
||||
Log management is the process of handling log events generated by all software applications and infrastructure on which they run. It involves log collection, aggregation, parsing, storage, analysis, search, archiving, and disposal, with the ultimate goal of using the data for troubleshooting and gaining business insights, while also ensuring the compliance and security of applications and infrastructure. |
||||
|
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://sematext.com/guides/log-management'>Introduction to Logs Management</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://devops.com/log-management-what-devops-teams-need-to-know/'>Log Management: What DevOps Teams Need to Know</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/logging-for-kubernetes-what-to-log-and-how-to-log-it/'>Logging for Kubernetes: What to Log and How to Log It</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Monitoring |
||||
|
||||
DevOps monitoring entails overseeing the entire development process from planning, development, integration and testing, deployment, and operations. It involves a complete and real-time view of the status of applications, services, and infrastructure in the production environment. Features such as real-time streaming, historical replay, and visualizations are critical components of application and service monitoring. |
||||
|
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.atlassian.com/devops/devops-tools/devops-monitoring'>DevOps Monitoring</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://thenewstack.io/the-hows-whys-and-whats-of-monitoring-microservices/'>The Hows, Whys and Whats of Monitoring Microservices</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Availability |
||||
|
||||
Availability is the percentage of time that a system is functional and working as intended, generally referred to as uptime. Availability can be affected by hardware or software errors, infrastructure problems, malicious attacks, and system load. Many cloud providers typically offer their users a service level agreement (SLA) that specifies the exact percentages of promised uptime/downtime. Availability is related to reliability in this sense. For example, a company might promise 99.99% uptime for their services. |
||||
|
||||
To achieve high levels of uptime, it is important to eliminate single points of failure so that a single device failure does not disrupt the entire service. High availability in the cloud is often achieved by creating clusters. Clusters are groups of devices (such as servers) that all have access to the same shared storage and function as one single server to provide uninterrupted availability. This way, if one server goes down, the others are able to pick up the load until it comes back online. Clusters can range from two servers to even multiple buildings of servers. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Course' colorScheme='green' href='https://codster.io/en/blog/high-availability-in-the-cloud/'>How High Availability Works in the Cloud</BadgeLink> |
||||
<BadgeLink badgeText='Course' colorScheme='green' href='https://www.sqlservercentral.com/articles/cloud-computing-basics-achieving-high-availability-2'>Techniques for Achieving High Availability</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# What is typescript |
||||
# What is Typescript |
||||
|
||||
TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://thenewstack.io/what-is-typescript/'>What is TypeScript</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/typescript/'>W3Schools – TypeScript Tutorial</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.tutorialspoint.com/typescript/index.htm'>Tutorials point – TypeScript Tutorial</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=d56mG7DezGs'>TypeScript Crash Course for Beginners</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Why use typescript |
||||
# Why use TypeScript |
||||
|
||||
TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include.Static typing – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value. Object-oriented programming – TypeScript supports object-oriented programming concepts like classes, inheritance, etc. Compile time checks – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime. Code editor support – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors. Use existing packages – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://linguinecode.com/post/5-reasons-why-to-use-typescript'>linguinecode - Reasons to use TypeScript</BadgeLink> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/'>Codemotion - Reasons to use TypeScript</BadgeLink> |
||||
|
||||
@ -1 +1,11 @@ |
||||
# Structural typing |
||||
# Structural Typing |
||||
|
||||
Type compatibility in TypeScript is based on structural subtyping. `Structural typing` is a way of relating types based solely on their members. This is in contrast with nominal typing. |
||||
|
||||
TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004'>Structural typings — Medium</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.typescriptlang.org/docs/handbook/type-compatibility.html'>Structural typings — Typescriptlang</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=kWtwsX_rT3k'>Structural typing video for Beginners</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Type inference |
||||
# Type Inference |
||||
|
||||
In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.typescriptlang.org/docs/handbook/type-inference.html'>Type Interface - typescriptlang</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=3ui_st7rtfA'>Type Inference video for Beginners</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Union types |
||||
# Union Types |
||||
|
||||
In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example, `(type1 | type2 | type3 | .. | typeN)`. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html'>Union Types - typescriptlang</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=uxjpm4W5pCo'>Union Type video for Beginners</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Builtin types |
||||
# Builtin Types |
||||
|
||||
The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.tutorialspoint.com/typescript/typescript_types.htm'>TypeScript Types - Tutorialspoint</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Nt9ajBrqV_M'>Builtin Type video for Beginners</BadgeLink> |
||||
@ -1 +1,10 @@ |
||||
# Type guard |
||||
# Type Guard |
||||
|
||||
A type guard is a TypeScript technique used to get information about the type of a variable, usually within a conditional block. Type guards are regular functions that return a boolean, taking a type and telling TypeScript if it can be narrowed down to something more specific. Type guards have the unique property of assuring that the value tested is of a set type depending on the returned boolean. |
||||
|
||||
TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and the `in` operator, which is used to determine if an object contains a property. Type guards enable you to instruct the TypeScript compiler to infer a specific type for a variable in a particular context, ensuring that the type of an argument is what you say it is. |
||||
|
||||
Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://blog.logrocket.com/how-to-use-type-guards-typescript/'>Types Guards - Blog</BadgeLink> |
||||
|
||||
@ -1 +1,4 @@ |
||||
# Typescript basics |
||||
# Typescript Basics |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e'>Typescript a Beginners Guide</BadgeLink> |
||||
<BadgeLink colorScheme='green' badgeText='Compiler' href='https://www.typescriptlang.org/play'>Typescript Playground</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Angularjs vs angular |
||||
# AngularJS vs. Angular |
||||
|
||||
AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angularjs.org/'>AngularJS Website</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink> |
||||
@ -1 +1,12 @@ |
||||
# Angular components |
||||
# Angular Components |
||||
|
||||
Components are the main building block for Angular applications. Each component consists of: |
||||
|
||||
* An HTML template that declares what renders on the page |
||||
* A TypeScript class that defines the behavior |
||||
* A CSS selector that defines how the component is used in a template |
||||
* Optionally, CSS styles applied to the template |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/component-overview'>Angular Components Overview</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x5PZwb4XurU'>Standalone Components in Angular</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Angular templates |
||||
# Angular Templates |
||||
|
||||
A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-overview'>Understanding Templates</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/template-syntax'>Template Syntax</BadgeLink> |
||||
@ -1 +1,6 @@ |
||||
# Angular modules |
||||
# Angular Modules |
||||
|
||||
Modules in Angular act like a container where we can group the components, directives, pipes, and services, related to the application. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/architecture-modules'>Introduction to Modules</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Dependency injection |
||||
# Dependency Injection |
||||
|
||||
Dependency Injection is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/dependency-injection'>Understanding Dependency Injection</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/guide/dependency-injection-in-action'>Dependency Injection in Action</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Ng build |
||||
|
||||
The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications. |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/build'>Ng Build - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=VB6WuCPDwz0'>Building an Angular project</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Ng serve |
||||
|
||||
ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically. How do Angular builds? After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app. |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/serve'>Ng serve - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=-w-RfHcLt5U'>Running a project with ng serve</BadgeLink> |
||||
@ -1 +1,8 @@ |
||||
# Ng generate |
||||
|
||||
ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice. |
||||
|
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/generate'>Ng generate - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=NlHlu_zzmo4'>Angular cli generate component</BadgeLink> |
||||
@ -1 +1,10 @@ |
||||
# Ng test |
||||
|
||||
ng test is used to runs unit tests in angular project. |
||||
|
||||
`ng test <project> [options]` | `ng t <project> [options]` |
||||
|
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/test'>Ng test - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=n1O_eRwzRKA'>Angular Ng test commands</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Ng e2e |
||||
|
||||
End-to-end testing (E2E) of Angular applications is performed using the Protractor testing framework, which is created by the Angular team themselves. Protractor can perform end to end tests on Angular applications that are running in a real browser by interacting with it, similar to that of an end-user. |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/e2e'>Ng e2e - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=3vFnhzEGfew'>Angular cli generate component</BadgeLink> |
||||
@ -1 +1,11 @@ |
||||
# Ng new |
||||
|
||||
`$ ng new [name]` |
||||
|
||||
That’s the default usage of the command and creating a new project folder with name. The project which is created in that folder is containing: |
||||
|
||||
The default Angular project, All dependencies installed in node_modules folder , Testing files for each components |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli/new'>Ng New - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=NdEpZezptkQ'>ng New command</BadgeLink> |
||||
@ -1 +1,9 @@ |
||||
# Angular cli |
||||
# Angular CLI |
||||
|
||||
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command |
||||
|
||||
`npm install -g @angular/cli` |
||||
|
||||
<ResourceGroupTitle>Free Resources</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://angular.io/cli'>Angular CLI - Angular.io</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='watch' href='https://www.youtube.com/watch?v=mZnzX3J5XKI'>Angular CLI - setup</BadgeLink> |
||||
@ -1 +1,9 @@ |
||||
# Reactive forms |
||||
# Reactive Forms |
||||
|
||||
Reactive Forms in angular are those which used to handle the inputs coming from the user. We can define controls by using classes such as FormGroup and FormControl. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/reactive-forms'>Reactive forms - Angular</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.javatpoint.com/angular-reactive-forms'>Angular Reactive Forms</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.digitalocean.com/community/tutorials/angular-reactive-forms-introduction'>How To Use Reactive Forms in Angular</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=8k4ctDmVn7w'>Reactive Form in Angular</BadgeLink> |
||||
@ -1 +1,11 @@ |
||||
# Template driven forms |
||||
# Template Driven Forms |
||||
|
||||
A Template driven form is the simplest form we can build in Angular. It is mainly used for creating simple form application. |
||||
|
||||
It uses two-way data-binding (ngModel) to create and handle the form components. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/forms'>Building a template-driven form</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://codecraft.tv/courses/angular/forms/template-driven/'>Template-Driven Forms</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=whr14XxB8-M'>Template driven form</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=cVd4ZCIXprs'>Template driven form Validations</BadgeLink> |
||||
@ -1 +1,11 @@ |
||||
# Forms |
||||
|
||||
Forms are used to handle user inputs in many applications. It enables users from entering sensitive information to performing several data entry tasks. |
||||
|
||||
Angular provides two forms to hadle user inputs: reactive forms and template-driven forms. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://angular.io/guide/forms-overview'>Introduction to forms in Angular</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/angular/angular_forms.asp'>Angular Forms</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=-bGgjgx3fGs'>Angular Forms Tutorial</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=hAaoPOx_oIw'>Building Forms in Angular Apps</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Lazy loading |
||||
|
||||
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/lazy-loading-ngmodules'>What is Lazy loading ? - Angular.io </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=JjIQq9lh-Bw'>Angular Tutorial - Lazy Loading</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Routing |
||||
|
||||
Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/routing-in-angular-9-10/'>What is Routing ? - Geeksforgeeks </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/router'>Explanation of Routing ? - Angular.io </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Nehk4tBxD4o'>Angular Tutorial - Routing and Navigation</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Dependency injection |
||||
# Dependency Injection |
||||
|
||||
Dependency Injection (DI) is a design pattern that creates the dependencies of a class and provides those objects to the class when required. Angular being a nice framework, provides a built-in dependency injection mechanism that creates and provides a runtime version of a dependency value using dependency injectors. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/dependency-injection'>What is Dependency Injection ? - angular.io </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=OFPIGlxunL0'>Introduction of Dependency injection</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Services remote data |
||||
# Services |
||||
|
||||
Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/tutorial/toh-pt4'>Adding Services in Angular</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/tutorial/toh-pt6'>Get Data from Server</BadgeLink> |
||||
|
||||
@ -1 +1,13 @@ |
||||
# Lifecycle hooks |
||||
|
||||
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. 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. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution. |
||||
|
||||
Your application can use lifecycle hook methods to tap into key events in the lifecycle of a component or directive to initialize new instances, initiate change detection when needed, respond to updates during change detection, and clean up before deletion of instances. |
||||
|
||||
The following life cycle hooks of angular are : |
||||
|
||||
`OnChanges` , `OnInit` , `DoCheck` , `OnDestroy` , `AfterContentInit` , `AfterContentChecked` , `AfterViewInit` , `AfterViewChecked` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://angular.io/guide/lifecycle-hooks'>What is Life Cycle Hooks? - Angular.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/angular-lifecycle-hooks/'>The life cycle hooks of angular - Blog </BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Ngxs |
||||
|
||||
Ngxs is a state management pattern for the Angular framework. It acts as a single source of truth for our application. Ngxs is very simple and easily implementable. It reduce lots of boilerplate code . It is a replacement for Ngrx. In Ngrx we are creating state, action, reducer, and effects but in Ngxs, we are creating only state and actions instead of all of this. Like Ngrx, Ngxs is also asynchronous and when we dispatch any action we can get a response back. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.ngxs.io/'>What is NGXS ? - Ngxs.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@knoldus/introduction-to-ngxs-state-management-pattern-library-for-angular-ec76f681ceba'>Details about NGXS - Medium </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SGj11j4hxmg'>Practise of NGXS</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,8 @@ |
||||
# Ngrx |
||||
|
||||
Ngrx is a group of Angular libraries for reactive extensions that implements the Redux pattern and it’s supercharged with RXJS. |
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ngrx.io/'>What is NGRX ? - ngrx.io </BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://ahmedrebai.medium.com/introduction-to-state-management-with-ngrx-and-angular-91f4ff27ec9f'>Details about NGRX - Medium </BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=f97ICOaekNU'>Practise of NGRX</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,9 @@ |
||||
# State management |
||||
# State Management |
||||
|
||||
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/'> Angular state management made simple with NgRx</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.syncfusion.com/blogs/post/angular-state-management-with-ngrx.aspx'>Angular State Management with NgRx</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Directive |
||||
|
||||
Directives are the functions that will execute whenever the Angular compiler finds them. Angular Directives enhance the capability of HTML elements by attaching custom behaviors to the DOM. |
||||
|
||||
From the core concept, Angular directives are categorized into three categories: Attribute Directives, Structural Directives, and Component Directives. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.freecodecamp.org/news/angular-directives-learn-how-to-use-or-create-custom-directives-in-angular-c9b133c24442/'>Create a custom directive - Freecodecamp</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=AoN56g6UAsE'>Create a custom directive video for Beginners</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Pipe |
||||
# Custom Pipes |
||||
|
||||
Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Read' colorScheme='yellow' href='https://angular.io/guide/pipes-custom-data-trans'>Create a custom pipe - angular.io</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=P2587FN4Y0w'>Create a custom pipe video for Beginners</BadgeLink> |
||||
@ -1 +1,9 @@ |
||||
# Prototypal inheritance |
||||
# Prototypal Inheritance |
||||
|
||||
The Prototypal Inheritance is a feature in javascript used to add methods and properties in objects. It is a method by which an object can inherit the properties and methods of another object. Traditionally, in order to get and set the Prototype of an object, we use Object.getPrototypeOf and Object. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain'>JavaScript MDN Docs</BadgeLink> |
||||
<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://www.geeksforgeeks.org/prototypal-inheritance-using-__proto__-in-javascript/'>GeeksForGeeks – JavaScript Tutorial</BadgeLink> |
||||
<BadgeLink badgeText='Official Website' colorScheme="blue" href='https://javascript.info/prototype-inheritance'>The Modern JavaScript Tutorial</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/prototype-inheritance'>Prototype Inheritance</BadgeLink> |
||||
|
||||
@ -1 +1,18 @@ |
||||
# Builtin objects |
||||
# Built-in objects |
||||
|
||||
Built-in objects, or "global objects", are those built into the language specification itself. There are numerous built-in objects with the JavaScript language, all of which are accessible at the global scope. Some examples are: |
||||
- `Number` |
||||
- `Math` |
||||
- `Date` |
||||
- `String` |
||||
- `Error` |
||||
- `Function` |
||||
- `Boolean` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects'>Built-in Objects</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects'>Standard built-in objects</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialride.com/javascript/javascript-built-in-objects.htm'>JavaScript Built-in Objects</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/javascript-built-in-objects/'>Built-in Objects</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/YLCtw8Ms5Q4'>JavaScript Built-in Objects</BadgeLink> |
||||
|
||||
@ -1 +1,10 @@ |
||||
# Explicit type casting |
||||
# Explicit Type Casting |
||||
|
||||
Type casting means transferring data from one data type to another by explicitly specifying the type to convert the given data to. Explicit type casting is normally done to make data compatible with other variables. Examples of typecasting methods are `parseInt()`, `parseFloat()`, `toString()`. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion'>Type conversion</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/explain-typecasting-in-javascript'>What is typecasting in JavaScript</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.c-sharpcorner.com/article/type-conversions-in-javascript/'>Type Conversion</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.scaler.com/topics/javascript/type-conversion-in-javascript/'>Type casting</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/VQLYiFqetZM'>Data Type Conversion</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Implicit type casting |
||||
# Implicit Type Casting |
||||
|
||||
Implicit type conversion happens when the compiler or runtime automatically converts data types. JavaScript is loosely typed language and most of the time operators automatically convert a value to the right type. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.geeksforgeeks.org/javascript-type-conversion/'>GeeeksForGeeks - JavaScript Tutorials</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.w3schools.com/js/js_type_conversion.asp'>W3Schools - JavaScript Tutorials</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.tutorialspoint.com/explain-typecasting-in-javascript'>TutorialsPoint - JavaScript Tutorials</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dev.to/promisetochi/what-you-need-to-know-about-javascripts-implicit-coercion-e23'>What you need to know about Javascript's Implicit Coercion</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Indexed collections |
||||
|
||||
Indexed Collections are collections that have numeric indices i.e. the collections of data that are ordered by an index value. In JavaScript, an array is an indexed collection. An array is an ordered set of values that has a numeric index. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/javascript-indexed-collections/'>Indexed Collections</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections'>What is Indexed collections?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/indexed-collections-in-javascript'>Indexed collections in JavaScript</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/XYq9QpgAx8g'>Javascript Arrays</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Keyed collections |
||||
# Keyed Collections |
||||
|
||||
Keyed collections are data collections that are ordered by key not index. They are associative in nature. Map and set objects are keyed collections and are iterable in the order of insertion. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Keyed_collections'>Keyed collections</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/es6-keyed-collections-maps-and-sets/'>ES6 keyed collections- Maps and sets</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-use-javascript-collections-map-and-set/'>How to use Keyed collections</BadgeLink> |
||||
<BadgeLink badgeText='Watch' href='https://youtu.be/4UqSqF4foy4'>Creating keyed collection</BadgeLink> |
||||
@ -1 +1,8 @@ |
||||
# Structured data |
||||
|
||||
Structured data is used by search-engines, like Google, to understand the content of the page, as well as to gather information about the web and the world in general. |
||||
|
||||
It is also coded using in-page markup on the page that the information applies to. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data'>Google Developers docs</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Is loosely equal |
||||
# isLooselyEqual |
||||
|
||||
[isLooselyEqual](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality) checks whether its two operands are equal, returning a `Boolean` result. It attempts to convert and compare operands that are of different types. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality'> Loosely Equality (==) Operator</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/comparison'>Comparsion - javascript.info</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Is strictly equal |
||||
# isStrictlyEqual |
||||
|
||||
[isStrictlyEqual](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality) checks whether its two operands are equal, returning a `Boolean` result. It always considers operands of different types to be different. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality'> Strictly Equality (===) Operator</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/comparison'>Comparsion - javascript.info</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Same value zero |
||||
|
||||
[SameValueZero](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality) equality determines whether two values are functionally identical in all contexts with +0 and -0 are also considered equal. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value-zero_equality'> Same-value-zero equality</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Same value |
||||
|
||||
[SameValue](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is) equality determines whether two values are functionally identical in all contexts. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is'> Same-value equality using Object.is()</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Labeled statements |
||||
# Labeled Statements |
||||
|
||||
JavaScript label statements are used to prefix a label to an identifier. It can be used with `break` and `continue` statement to control the flow more precisely. |
||||
|
||||
A label is simply an identifier followed by a colon`(:)` that is applied to a block of code. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label'>JavaScript MDN Docs</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.tutorialspoint.com/What-are-label-statements-in-JavaScript'>Tutorialspoint – JavaScript Tutorial</BadgeLink> |
||||
@ -1 +1,10 @@ |
||||
# Break continue |
||||
|
||||
`break` statement, without a label reference, can only be used to jump out of a loop or a switch block. |
||||
|
||||
`continue` statement, with or without a label reference, can only be used to skip one loop iteration. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue'>JavaScript MDN Docs - continue statement</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break'>JavaScript MDN Docs - break statement</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.w3schools.com/js/js_break.asp'>W3Schools – JavaScript Tutorial</BadgeLink> |
||||
|
||||
@ -1 +1,34 @@ |
||||
# Utilizing error objects |
||||
|
||||
When a runtime error occurs, a new `Error` object is created and thrown. With this `Error` object, we can determine the type of the Error and handle it according to its type. |
||||
|
||||
## Types of Errors: |
||||
|
||||
Besides error constructors, Javascript also has other core Error constructors. |
||||
|
||||
- [`AggregateError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AggregateError) |
||||
- [`EvalError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError) |
||||
- [`InternalError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError) |
||||
- [`RangeError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError) |
||||
- [`ReferenceError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError) |
||||
- [`SyntaxError`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError) |
||||
|
||||
## Example |
||||
|
||||
```js |
||||
try { |
||||
willGiveErrorSometime(); |
||||
} catch (error) { |
||||
if (error instanceof RangeError) { |
||||
rangeErrorHandler(error); |
||||
} else if (error instanceof ReferenceError) { |
||||
referenceErrorHandle(error); |
||||
} else { |
||||
errorHandler(error); |
||||
} |
||||
} |
||||
``` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error'>Error Object - MDN</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling'>Control flow & Error handling - MDN</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Omparison operators |
||||
# Comparison Operators |
||||
|
||||
Comparison operators are the operators that compare values and return true or false. The operators include: `>`, `<`, `>=`, `<=`, `==`, `===`, `!==` and `!===` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.w3schools.com/js/js_comparisons.asp'>W3Schools - JavaScript Tutorials</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators'>JavaScript MDN Docs</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators'>Comparison operators</BadgeLink> |
||||
|
||||
@ -1 +1,5 @@ |
||||
# Bigint operators |
||||
# BigInt Operators |
||||
|
||||
Most operators that can be used with the `Number` data type will also work with `BigInt` values (e.g. arithmetic, comparison, etc.). However, the unsigned right shift `>>>` operator is an exception and is not supported. Similarly, some operators may have slight differences in behaviour (for example, division with `BigInt` will round towards zero). |
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#bigint_operators'>BigInt Operators</BadgeLink> |
||||
|
||||
@ -1 +1,9 @@ |
||||
# String operators |
||||
# String Operators |
||||
|
||||
In addition to the comparison operators, which can be used on string values, the concatenation operator (`+`) concatenates two string values together, returning another string that is the union of the two operand strings. |
||||
|
||||
The shorthand assignment operator `+=` can also be used to concatenate strings. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#string_operators'>JavaScript MDN Tutorials</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/operators#string-concatenation-with-binary'>String Concatenation - JavaScript.info</BadgeLink> |
||||
@ -1 +1,13 @@ |
||||
# Conditional operators |
||||
|
||||
Conditional oprator also known as Ternary operator is the only JS operator that takes three operands. |
||||
|
||||
The operator can have one of two values based on a condition. |
||||
|
||||
Syntax: |
||||
|
||||
`condition ? val_for_true : val_for_false ` |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#conditional_operator'>JavaScript MDN Docs</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.w3schools.com/js/js_comparisons.asp'>W3Schools - JavaScript Tutorials</BadgeLink> |
||||
|
||||
@ -1 +1,18 @@ |
||||
# Defining calling functions |
||||
# Defining and Calling Functions |
||||
|
||||
**Defining:** |
||||
- JavaScript function *declarations* are made by using the `function` keyword. |
||||
- Functions can also be defined by saving function *expressions* to a variable. "Arrow" functions are commonly used in this way. |
||||
|
||||
**Calling:** |
||||
- When a function is defined, it is not yet executed. |
||||
- To call and invoke a function's code, use the function's name followed by parentheses: `functionName()`. |
||||
|
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#defining_functions'>Defining Functions</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#calling_functions'>Calling Functions</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_function_definition.asp'>Function Definitions</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,5 @@ |
||||
# Default params |
||||
# Default Parameters |
||||
|
||||
Default function parameters allow named parameters to be initialized with default values if no value or `undefined` is passed. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters'>Default Parameters - MDN Docs</BadgeLink> |
||||
|
||||
@ -1 +1,5 @@ |
||||
# Rest params |
||||
# Rest Parameters |
||||
|
||||
The rest parameter syntax allows a function to accept an indefinite number of arguments as an array, providing a way to represent [variadic functions](https://en.wikipedia.org/wiki/Variadic_function) in JavaScript. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Rest parameters MDN documentation' href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters'>Rest Paremeters - MDN Docs</BadgeLink> |
||||
|
||||
@ -1 +1,7 @@ |
||||
# Arguments object |
||||
|
||||
The arguments object is an Array-like object accessible inside functions that contains the values of the arguments passed to that function, available within all non-arrow functions. You can refer to a function's arguments inside that function by using its arguments object. It has entries for each argument the function was called with, with the first entry's index at 0. But, in modern code, rest parameters should be preferred. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
|
||||
<BadgeLink colorScheme="yellow" badgeText="Read" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments">The arguments object - MDN Docs</BadgeLink> |
||||
|
||||
@ -1 +1,10 @@ |
||||
# Built in functions |
||||
|
||||
- A JavaScript **method** is a property containing a **function definition** . In other words, when the data stored on an object is a function we call that a method. |
||||
- To differenciate between properties and methods, we can think of it this way: **A property is what an object has, while a method is what an object does.** |
||||
- Since JavaScript methods are actions that can be performed on objects, we first need to have objects to start with. There are several objects built into JavaScript which we can use. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialspoint.com/javascript/javascript_builtin_functions.htm'>JavaScript Built-in Functions</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dev.to/elpepebenitez/built-in-methods-in-javascript-4bll'>Built-in Methods in Javascript</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tutorialride.com/javascript/javascript-built-in-functions.htm'>Built-in Functions:</BadgeLink> |
||||
@ -1 +1,6 @@ |
||||
# Function borrowing |
||||
# Function Borrowing |
||||
|
||||
Function borrowing allows us to use the methods of one object on a different object without having to make a copy of that method and maintain it in two separate places. It is accomplished through the use of `.call()`, `.apply()`, or `.bind()`, all of which exist to explicitly set this on the method we are borrowing. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme="yellow" badgeText="Read" href="https://medium.com/@ensallee/function-borrowing-in-javascript-4bd671e9d7b4">Function borrowing</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# This in a method |
||||
# this in a method |
||||
|
||||
Methods are properties of an object which are functions. The value of this inside a method is equal to the calling object. In simple words, this value is the object “before dot”, the one used to call the method. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://javascript.info/object-methods#this-in-methods'>`this` in methods</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>Short and clear post about the `this` keyword</BadgeLink> |
||||
|
||||
@ -1 +1,8 @@ |
||||
# This in a function |
||||
# this in a function |
||||
|
||||
The keyword `this` when used in a function refers to the global object. |
||||
|
||||
*Note: in a browser window the global object is the `window` object.* |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>this in a function</BadgeLink> |
||||
@ -1 +1,8 @@ |
||||
# Using this alone |
||||
|
||||
The keyword `this` when used alone refers to the global object. |
||||
|
||||
*Note: in a browser window the global object is the `window` object.* |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>this Alone</BadgeLink> |
||||
@ -1 +1,6 @@ |
||||
# This in event handlers |
||||
# this in event handlers |
||||
|
||||
The keyword `this` when used in an event handler refers to the element that received the event. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/js/js_this.asp'>this in Event handlers</BadgeLink> |
||||
@ -1 +1,6 @@ |
||||
# This in arrow functions |
||||
# this in arrow functions |
||||
|
||||
The keyword `this` when used in an arrow function refers to the parent object. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/66518020/javascript-this-keyword-and-arrow-function'>this keyword and arrow function</BadgeLink> |
||||
@ -1 +1,7 @@ |
||||
# Explicit binding |
||||
|
||||
Explicit binding is when you use the `call` or `apply` methods to explicitly set the value of `this` in a function. Explicit Binding can be applied using `call()`, `apply()`, and `bind()`. |
||||
|
||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/swlh/javascript-this-ac28f8e0f65d'>Explicit Binding</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/@msinha2801/explicit-binding-rule-for-this-keyword-in-js-712405b0a11'>Explicit Binding rule for this keyword</BadgeLink> |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue