DEV Community: Babloo Kumar

Retrieval - Augmented Generation (RAG)

Babloo Kumar — Mon, 15 Jul 2024 19:06:50 +0000

Retrieval-Augmented Generation (RAG) systems are a class of models that combine elements of both retrieval and generation in natural language processing (NLP). These systems integrate retrieval-based methods with traditional generation-based models like GPT (Generative Pre-trained Transformer).

It represents a significant advancement in NLP by bridging the gap between retrieval-based approaches (focused on factual accuracy and relevance) and generation-based models (focused on language fluency and coherence). They are increasingly used in various applications, including dialogue systems, question answering, and content generation tasks.

[Fig1. Diagram of the RAG System (Reference image is taken from the internet)]

Here’s a breakdown of how RAG systems typically work (taking a simple example of chatbot querying the private knowledge base or collection of documents which could be in different formats):

For code simplicity and learning purpose, I will be using langchain (Orchestrator)- very minimal , AzureOpenAI (for embedding & gpt-4 models) and FAISS (local vector DB)

First step _ is store the documents into the vector db using embedding model, popularly known as _Ingestion. To do below steps has to be followed:

# load the document --> split the document into chunks --> create embeddings --> store in vector database

1 - Split the entire knowledge base or collection of documents in chunks, chunks basically represents the single piece of context to be queried.

    pdf_path = "Vectors-in-memory/2210.03629v3.pdf"
    loader = PyPDFLoader(file_path=pdf_path)
    documents = loader.load()
    text_splitter = CharacterTextSplitter(
        chunk_size=1000, chunk_overlap=30, separator="\n"
    )
    docs = text_splitter.split_documents(documents=documents)

2 - Use embedding model to transform each chunks into vector embeddings.

  embeddings = AzureOpenAIEmbeddings(
    azure_deployment=os.environ["AZURE_EMBEDDING_OPENAI_DEPLOYMENT"],
    openai_api_key=os.environ["AZURE_EMBEDDING_OPENAI_KEY"],
    azure_endpoint=os.environ["AZURE_EMBEDDING_OPENAI_API_BASE"],
    openai_api_type=os.environ["AZURE_EMBEDDING_OPENAI_API_TYPE"],
    openai_api_version=os.environ["AZURE_EMBEDDING_OPENAI_API_VERSION"],
 )

3 - Store all the vector embeddings into the vector database.

    vectorstore = FAISS.from_documents(docs, embeddings)
    vectorstore.save_local("faiss_index_react")

Next work on the query( or chatbot question part), which is popularly known as Retrieving. The retrieval aspect involves retrieving relevant information or contexts from a large corpus of text based on a given query or input. This retrieval is typically performed using information retrieval techniques, where documents or passages most relevant to the input are selected.

4 - Embed the query(which is asked from the chatbot) using the same embedding model. See the below code,

    chat = AzureChatOpenAI(
        openai_api_key="xxxxxxd8a815xxxxxxxxxxxxx",
        azure_endpoint="https://testmodel.openai.azure.com/",
        openai_api_type="azure",
        azure_deployment="GPT4",
        openai_api_version="2024-05-01-preview",
        temperature=0,
        max_tokens=None,
        timeout=None,
        max_retries=2,
    )
   #Let below be the query from the chatbot
   query = "What is machine learning?"

   new_vectorstore = FAISS.load_local(
      "faiss_index_react",embeddings,allow_dangerous_deserialization=True
   )

   template = """Use the following pieces of context to answer the question at the end.
    If you don't know the answer, just say that you don't know, don't try to make up the answer.
    Use three sentences maximum and keep the answer as concise as possible.
    Always say "Thank you for Asking!!!" at the end of the answer.

    {context}

    Question: {question}

    Helpful Answer:"""

  custom_rag_prompt = PromptTemplate.from_template(template)

  rag_chain = (
      {"context": new_vectorstore .as_retriever(), "question": RunnablePassthrough() }
      | custom_rag_prompt
      | chat
    )

    res = rag_chain.invoke(query)
    print(res)

5 - Use the resulting vector to run the query against the index in the vector DB.
Vector DB performs Approximate Nearest Neighbor for the query embedding and it returns the context, the procedure returns the vectors which are similar in a given latent space.

6 - Now map the results into the prompt and pass it to the LLM(in this case AzureChatOpenAI, which has Gpt-4 model deployed). Once the relevant information is retrieved, it is combined with the input query or prompt to generate a coherent and contextually relevant response. This generation process often involves models like GPT (or its variants), which are capable of generating fluent and contextually appropriate text.

The key innovation of RAG systems lies in the effective integration of these two components—retrieval and generation. By leveraging retrieval to provide contextually rich inputs to the generation model, RAG systems aim to produce responses that are not only fluent but also more grounded in relevant knowledge or information from the retrieval process.

How Modern Browsers Work?

Babloo Kumar — Mon, 03 Apr 2023 04:58:49 +0000

Google published a series of articles some years ago about "Inside look at modern web browser". It's a great read.
You guys might have already read but worth refreshing.

Part - 1 CPU, GPU, Memory, and multi-process architecture
Part - 2 What happens in navigation
Part - 3 Inner workings of a Renderer Process
Part - 4 Input events from the browser's point of view

Best Practices for Performant Angular Applications - #Part 1

Babloo Kumar — Sat, 30 Jan 2021 07:47:09 +0000

This article outlines the practices we should generally use in angular applications to have highly performant and cleaner code base.
In this series of articles I'll be posting one practice at time.
Scope of this series article will be limited to Angular, Typescript, RxJs and @ngrx/store.

Today lets talk about observables, From coding aspect, it's very important to understand observables and how do we use it. If we use it correctly we can probably reduce the damage we do to the overall performance of the app and save lot of memory and CPU usage at run time.
Some of the best practices are mentioned below, and trust me these are not complicated at all, it's like developing good habit or bad habit and it will automatically be reflected in your day to day activities.

1. Subscribe in template

Avoid subscribing to observables from components and instead subscribe to the observables from the template.

Why it's important ?

async pipes unsubscribe themselves automatically and it makes the code simpler by eliminating the need to manually manage subscriptions. It also reduces the risk of accidentally forgetting to unsubscribe a subscription in the component, which would cause a memory leak. This risk can also be mitigated by using a lint rule to detect unsubscribed observables.
This also stops components from being stateful and introducing bugs where the data gets mutated outside of the subscription.

Before

// template
<p>{{ textToDisplay }}</p>
// component
meTheObservable
    .pipe(
       map(value => value.item),
       takeUntil(this._destroyed$)
     )
    .subscribe(item => this.textToDisplay = item);

After

// template
<p>{{ textToDisplay$ | async }}</p>
// component
this.textToDisplay$ = meTheObservable
    .pipe(
       map(value => value.item)
     );

2. Clean up subscriptions

When subscribing to observables, always make sure you unsubscribe from them appropriately by using operators like take, takeUntil, etc.

Why it's important ?

Failing to unsubscribe from observables will lead to unwanted memory leaks as the observable stream is left open, potentially even after a component has been destroyed / the user has navigated to another page.
Even better, make a lint rule for detecting observables that are not unsubscribed.

Before

meTheObservable
    .pipe(
       map(value => value.item)     
     )
    .subscribe(item => this.textToDisplay = item);

After

Using takeUntil when you want to listen to the changes until another observable emits a value:

private _destroyed$ = new Subject();
public ngOnInit (): void {
    meTheObservable
    .pipe(
       map(value => value.item)
      // We want to listen to meTheObservable until the component is destroyed,

       takeUntil(this._destroyed$)
     )
    .subscribe(item => this.textToDisplay = item);
}
public ngOnDestroy (): void {
    this._destroyed$.next();
    this._destroyed$.complete();
}

Using a private subject like this is a pattern to manage unsubscribing many observables in the component.

Using take when you want only the first value emitted by the observable:

meTheObservable
    .pipe(
       map(value => value.item),
       take(1),
       takeUntil(this._destroyed$)
    )
    .subscribe(item => this.textToDisplay = item);

Note:
The usage of takeUntil with take here. This is to avoid memory leaks caused when the subscription hasn’t received a value before the component got destroyed. Without takeUntil here, the subscription would still hang around until it gets the first value, but since the component has already gotten destroyed, it will never get a value — leading to a memory leak.

3. Avoid having subscriptions inside subscriptions

Sometimes you may want values from more than one observable to perform an action. In this case, avoid subscribing to one observable in the subscribe block of another observable. Instead, use appropriate chaining operators. Chaining operators run on observables from the operator before them. Some chaining operators are: withLatestFrom, combineLatest, etc.

Before

firstObservable$.pipe(
   take(1)
)
.subscribe(firstValue => {
    secondObservable$.pipe(
        take(1)
    )
    .subscribe(secondValue => {
        console.log(`Combined values are: ${firstValue} & ${secondValue}`);
    });
});

After

firstObservable$.pipe(
    withLatestFrom(secondObservable$),
    first()
)
.subscribe(([firstValue, secondValue]) => {
    console.log(`Combined values are: ${firstValue} & ${secondValue}`);
});

Why it's important ?

Code feel/readability/complexity : Not using RxJs to its full extent, suggests developer is not familiar with the RxJs API surface area.

Performance: If the observables are cold, it will subscribe to firstObservable, wait for it to complete, THEN start the second observable’s work. If these were network requests it would show as synchronous.

Conclusion

Developing applications is a journey on the road not taken and there's always room to learn and improve the things. The optimizations techniques mentioned above are good place to start and applying these patters consistently will make you and your users happy with less buggy and performant application.
In the next part I would take another topic and discuss on it.

Angular 10 Deep Dive

Babloo Kumar — Sat, 25 Jul 2020 18:58:01 +0000

Angular 10, the latest major version of angular has just been released. It's time to discover what's new available for us to explore and enhance the experience.

What’s in this release?

In this article, I'll touch up almost everything noteworthy in this new release. I'll also go through what's changed around the angular as a platform, including Framework, Angular Material and the CLI.
I'll try here to dig deeper into the release notes for Angular 10.0.

Angular 10 is already here, just four months after version 9. Of course during this short time period, there’s not that much that has changed. Still, there are quite a few noteworthy features, in addition to the large number of bug fixes brought by this release.As a reminder, the Angular team tries to release two major versions per year, so Angular 11 should arrive this fall.

Support for TypeScript 3.9.x

Keeping upto date with the JavaScript Ecosystem we have made a few updates to the dependencies of Angular to stay synchronized with the JavaScript ecosystem.
So the very first thing that makes me happy about this release of Angular is the fact that it supports TypeScript 3.9.
Angular 10 has dropped support for TS 3.6, 3.7 and 3.8! I hope this should not be the major hold back for you.

Thanks to its support for TS 3.9.x and other improvements in the compiler CLI, type-checking is faster than ever in Angular 10, which should be positive for most projects out there; especially larger ones.

TSLib 2.0

Additionally, Angular 10 also upgraded to TSLib 2.0. For those who don’t know, TSLib is an official library providing TypeScript helper functions that can be used at runtime. TSLib works in combination with the importHelpers flag of “tsconfig.json”; when enabled, it allows the compiler to generate more condensed/readable code. Anyways, nothing to worry about; TSLib hasn’t changed much.
Starting with version 10 you will see a new tsconfig.base.json. This additional tsconfig.json file better supports the way that IDEs and build tooling resolve type and package configurations.

TSLint v6

TSLint has been updated to v6.

Stricter settings [optional]

Angular 10 brings the possibility to create stricter projects right at creation time, which is great and should certainly be used for all new projects. To create a project with stricter defaults, use:
ng new --strict
This will allow you to detect issues much sooner at the build time itself, lot of time & effort can be saved.
This new option enables TypeScript strict mode (which you should all enable on your projects!).
Next to that, it also enables strict Angular template type checking.
It also lowers the budgets in “angular.json” quite drastically:
See the pic.

This is good as it will encourage new users to pay attention to the bundle size of their applications. Default bundle budgets have been reduced by ~75%.

It Configures your app as side-effect free to enable more advanced tree-shaking.

It also enforces a stricter TSLint configuration which bans “any” (“no-any” is set to true), and also enables quite a few interesting rules provided by codelyzer. Note that even though strict, you can still go much further with TSLint. For instance, here’s the config of one of my projects, which you can use as starting point.

I feel that this new "strict" option is amazing, but sadly its an optional flag. For making it optional i imagine that the rationale is that by being more lenient by default, Angular feels less scary at first?

Anyways, if you do create a new project, please enable this and go even further; you’ll thank me later.

Configuration Layout

This is new TypeScript configuration layout. With this new release, the TypeScript configuration provided by default in new projects has changed. There’s now a “tsconfig.base.json” file in addition to “tsconfig.json”, “tsconfig.app.json” and “tsconfig.spec.json”.
We have included all these configuration files to better support the way IDEs and build tools look up the types and compiler configuration. If you would have worked on Visual Studio Professional for developing any tool/app you can understand easily.
With the new setup, “tsconfig.json” simply contains TypeScript project references based on the so-called “solution style” brought by TypeScript 3.9, which is great to improve compilation times and enforce a stricter separation between parts of the project:

In this case, the separation is there to have clean isolation of application code (taken care of by “tsconfig.app.json”) from tests (handled by “tsconfig.spec.json”).

If you look at the “tsconfig.base.json” file, then you’ll find the bulk of the TypeScript configuration:

Note that this one was generated using the strict option discussed in the previous section.
As you can see above, this file only configures TypeScript compiler and Angular compiler options; it doesn’t list/include/exclude files to compile.

The answer is indeed in the “tsconfig.app.json” file, which lists the “main.ts” and “polyfills.ts”:

If you have an existing project without this layout, then you should probably review your TypeScript configuration in order to stay aligned and benefit.

Now Let's move to new item for discussion.

NGCC

In case you haven’t done this yet (this was already true with NG9), make sure that you have a postinstall script in your “package.json” file to execute NGCC right after an installation:

Note that in this release, NGCC is more resilient. Previously, it couldn’t always recover when one of its worker processes crashed. So if you sometimes saw issues with NGCC hanging, this should now be fixed.
There were also quite a lot of improvements made to NGCC, including performance-related ones, which is clearly every ones biggest pain point around NGCC.

New Default Browser Configuration

The browser configuration for new projects to exclude older and less used browsers.

Web browsers move faster than ever. Angular follows course and now uses an updated browserslist file (.browserslistrc).
As explained in the official blog post, the side effect of the new configuration is that ES5 builds are disabled by default for new projects.
Of course, at this point it doesn’t make much sense anymore to generate ES5 code. Modern Web browsers support at the very least ES2015. If you still use Internet Explorer or UC Browser, then it’s clearly time to let go of the past!
To get the exact list of supported Web browsers, just execute the following command in your project:

npx browserslist

The output is generated based on the contents of the “.browserslistrc” file at the root; by default it now looks as follows (V10 Defaults):

Bazel

Angular Bazel has left Angular Labs now. Support for Bazel is not part of the Angular project anymore. Bazel will never be the default build tool in Angular CLI after all.

@angular-devkit/build-angular 0.1000.0)

The name and version nomenclature hides important piece of information around it (the way Angular Apps are built).
The new version has bought lot of good features, all are covered below -

The coolest one (if you’re using SASS that is) is the fact that build-angular will now rebase relative paths to assets.

As stated in the commit, previously, paths like url(./foo.png) referenced in stylesheets and imported in other stylesheets would retain the exact URL. This was problematic since it broke as soon as the importing stylesheet was not in the same folder. Now, all resources using relative paths will be found.

Another hidden gem in that release is the fact that build-angular now dedupes duplicate modules that Webpack can’t handle. This is done through a custom Webpack resolve plugin.

Few more are listed below

Incremental template type checking

In this release, the compiler CLI is now able to perform template type checking incrementally. Hopefully this will save quite a few trees.

CanLoad

Previously, CanLoad guards could only return booleans. Now, it’s possible to return a UrlTree. This matches the behavior of CanActivate guards.
Note that this doesn’t affect preloading.

Service Workers

The default SwRegistrationStrategy has been improved. Previously, there were cases where the Service Worker never registered (e.g., when there were long-running tasks like intervals and recurring timeouts).

Internalization & Localization (I18N/L10N)

Previously, only one translation file was supported per locale. Now, it is possible to specify multiple files for each locale. All of those then get merged by message id. If you are using you would have got my point.

Angular Material

Lot of important fixes has been done for the Angular material. For the detailed list please see the release notes
Some of the new stuffs included -
Angular Material now includes a new date range picker. To use the new date range picker, you can use the mat-date-range-input and mat-date-range-picker components.

Angular Team Fixit (Bug fixes galore)

As mentioned a few weeks back, the Angular team has invested a lot of time and effort in bug fixing and backlog grooming. They’ve decreased their issue count by > 700 issues inlcuding framework, tooling & components, which is quite impressive.
One of fact that enabling strict template type checking caused issues with routerLinks because their underlying type didn’t include null/undefined. Another one that was fixed is the KeyValuePipe, which didn’t play along well with the async pipe.

While we’re on templates, note that the language service of Angular now supports more array-like objects such as ReadonlyArray and readonly property arrays for *ngFor loops.

Deprecations and removals

The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running yarn or npm install for Angular packages and libraries. These formats are no longer needed as any down leveling to support ES5 is done at the end of the build process.
Based on feedback from the community, we have deprecating support for older browsers including IE 9, 10, and Internet Explorer Mobile.

There are quite a few deprecated elements such as ReflectiveInjector, CollectionChangeRecord, DefaultIterableDiffer, ReflectiveKey, RenderComponentType, ViewEncapsulation.Native, ngModelwith Reactive Forms, preserveQueryParams, @angular/upgrade, defineInjectable, entryComponents, TestBed.get, etc.

Classes using Angular features without an Angular decorator are not supported anymore

Up to version 9, it was okay to have a class using Angular features without specifying one of the decorators (@Component, @Directive, etc).

With Angular 10, it is now mandatory to add an Angular decorator if a class uses Angular features. This change impacts all cases where you have components extending from a base class and one of the two (i.e., parent or child) is missing an Angular decorator.
Why is this change mandatory? Simply put, because Ivy needs it!
When there’s no Angular decorator on a class, the Angular compiler doesn’t add extra code for dependency injection.
As stated in the official doc, when the decorator is missing from the parent class, the subclass will inherit a constructor from a class for which the compiler did not generate special constructor info (because it was not decorated as a directive). When Angular then tries to create the subclass, it doesn’t have the correct info to create it.

In View Engine, the compiler has global knowledge, so it can look up the missing data. However, the Ivy compiler only processes each directive in isolation. This means that compilation can be faster, but the compiler can’t automatically infer the same information as before. Adding the @Directive() explicitly provides this information.

When the child class is missing the decorator, the child class inherits from the parent class yet has no decorators of its own. Without a decorator, the compiler has no way of knowing that the class is a @Directive or @Component, so it doesn't generate the proper instructions for the directive.
The nice thing about this change is that it brings more consistency into the Angular world (and consistency is good :p). Now things are simple: if you use Angular features, then you must add a decorator.

To give you an example, the following code won’t compile with Ivy:

Before:

@Component({
selector: 'base-menu',
template: '

'
})
class BaseMenu {}

export class SettingsMenu extends BaseMenu {}

After: (this will be valid code for compilation)

@Component({
selector: 'base-menu',
template: '

'
})
class BaseMenu {}

@Component({
selector: 'base-menu',
template: '

'
})
export class SettingsMenu extends BaseMenu {}

To fix the issue, you need to add a decorator to the SettingsMenu class.

This schematic also decorates classes that use Angular field decorators, including:
- @Input()
- @Output()
- @HostBinding()
- @HostListener()
- @ViewChild() / @ViewChildren()
- @ContentChild() / @ContentChildren()

Before:

class Base {
@Output()
countChanged = new EventEmitter();
}

@Directive({
selector: '[myDir]'
})
class Dir extends Base {
}

After:

@Directive() // schematic adds @Directive()
class Base {
@Output()
countChanged = new EventEmitter();
}

@Directive({
selector: '[myDir]'
})
class Dir extends Base {
}

Mandatory generic type for ModuleWithProviders

In previous releases, ModuleWithProviders already accepted a generic type, but it was not mandatory. With NG 10, the generic argument is required.

It’s a good thing for type safety anyways, so hopefully you already had the parameter defined:

If you stumble upon the following error because of a library that you’re using:

"error TS2314: Generic type 'ModuleWithProviders' requires 1 type argument(s)."

Then you should contact the library author to get it fixed as ngcc can’t help there. A workaround there is to set skipLibChecks to false.

Other breaking changes

Here are notable breaking changes:

Resolvers behave differently; those that return EMPTY will now cancel navigation. If you want to allow navigation to continue, then you need to make sure that your resolvers emit a value; for instance using defaultIfEmpty(...), of(...) and the like.
Service worker implementations that rely on resources with Vary headers will not work like they did previously. Vary headers will be ignored. The proposed “solution” is to avoid caching such resources as they tend to cause unpredictable behavior depending on the user agents. Because of this, resources may be retrieved even when their headers are different. Note that cache match options may now be configured in NGSW’s config file.
Property bindings such as [foo]=(bar$ | async).fubar will not trigger change detection if the fubar value is the same as the previous one. The workaround if you rely on the previous behavior is to manually subscribe / force change detection or adapt the binding in order to make sure that the reference does change.
The following format codes of formatDate() and DatePipe have changed; apparently the previous behavior was incorrect for day periods that crossed midnight.
The function that stands behind the UrlMatcher utility type (function alias) now correctly states that its return type may be null. If you have a custom Router or Recognizer class, then you need to adapt those.
Additional occurrences of ExpressionChangedAfterItHasBeenChecked can now be raised by Angular for errors that it didn’t detect before.
Angular now logs at error level when it notices unknown elements / property bindings in your templates. These were previously warnings.
Reactive forms’s valueChangeshad a bug with FormControls that were bound to inputs of type number (they fired twice since 2016! A first time after typing in the input field and a second time when the input field lost focus). Now, number inputs don’t listen to the change event anymore, but to the input event. Don’t forget to adapt your tests accordingly. Note that this breaks IE9 compatibility, but that’s not a problem for anyone.
The minLength and maxLength validators now make sure that the associated form controls values have a numeric length property. If that’s not the case, then these won’t be validated. Previously, falsy values without a length property (e.g., false or 0) were triggering validation errors. If you rely on that behavior, then you should add other validators like min or requiredTrue.

Upgrading

As usual, there’s a complete upgrade guide available and ng update will help you out: https://update.angular.io/#9.0:10.0l3
If you do the upgrade manually and still use Protractor (just in case), then don’t forget to update protractor to 7.0.0+ as previous versions had a vulnerability.

Conclusion

In this article, I’ve tried to explore the new features of Angular 10, as well as the deprecations, removals and breaking changes.

All in all, it’s clearly a rock solid one with tons of bug fixes and a few gems.

As usual, we can only be thankful for all the efforts made by the Angular team and the community that surrounds it!

Babloo Kumar

A Complete Guide for Flex

Babloo Kumar — Sun, 21 Jun 2020 12:30:12 +0000

The "Flexible Box" or "Flexbox" or "Flex" Layout, makes it easier to design flexible responsive layout structure without using float or positioning. It offers alternative to Floats for overall appearance of web page. Flex gives us the complete control over the alignment, direction, order and size of our boxes. Flex is divided into two parts i.e. flex containers (responsible for styling of full box i.e. Parent Element) and flex items (responsible for individual item in a box i.e. Child elements).
Below image shows the parent container(flex containers) and child items(flex items). The blue box is container which hold the child items(in orange colors).

Below image displays the properties for the parent containers and child items.

Section 1:

Below are the properties of the Parent flex Container:
Flex-direction, Justify-Content, Align-Items, Flex-Wrap, Align-Content.
Each property is explained in detailed in below read.

display - It defines a flex container; It can have block or inline depending on the value provided. It enables a flex context for all its direct children.
Sample e.g.

display: flex (this is for block)
display: inline-flex (this is for inline)

Container can be styled as below for the flex.

Property: flex-direction

Flexbox is mainly single-direction layout concept. Flex can put it's child items either in horizontal rows or vertical columns.

flex-direction can have below values:

(i) flex-direction: row

It's the default value and it displays child items from left to right in ltr and Right to Left in rtl.

(ii) flex-direction: row-reverse

it displays the child items from right to left in ltr; left to right in rtl

(iii) flex-direction: column

It displays the child items from top to bottom.

(iv) flex-direction: column-reverse

It displays the child items from bottom to top.

flex-direction can be used as below (sample code):

.container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

Property: justify-content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

Justify content can have below values, see the below diagrams to have better understanding how items will be placed:

(i) justify-content: flex-start

The flex-start value aligns the flex items at the beginning of the container (this is default).

(ii) justify-content: flex-end

The flex-end value aligns the flex items at the end of the container:

(iii) justify-content: center

The center value aligns the flex items at the center of the container.

(iv) justify-content: space-around

The space-around value displays the flex items with space before, between, and after the lines. If we say is short equal space will be between an element and after the element.

(v) justify-content: space-between

The space-between value displays the flex items with space between the lines. In short space will be only between two items.
See first element and last element, it will help in differentiating between "space-around" & "space-between".

justify-content can be used as below (sample code):

.container {
  display: flex;
  justify-content: flex-start| flex-end | center| space-around | space-between;
}

Property: align-items

The align-items property is used to align the flex items.
This defines the default behavior for how flex items are laid out along the cross axis(perpendicular axis) on the current line.

Align items can have below values, see the diagrams underneath to have better understanding:

(i) align-items: flex-start

The flex-start value aligns the flex items at the top of the container.

(ii) align-items: flex-end

The flex-end value aligns the flex items at the bottom of the container.

(iii) align-items: center

The center value aligns the flex items in the middle of the container.

(iv) align-items: stretch

The stretch value stretches the flex items to fill the container (this is default).

(v) align-items: baseline

The baseline value aligns the flex items such as their baselines aligns.

Below is the sample code through which align-items can be applied.

.container {
  display: flex;
  align-items: flex-start| flex-end | center| stretch | baseline;
}

Property: flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not.By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

Flex-wrap can have below values, please see the diagrams underneath to have better depth understanding.

(i) flex-wrap: nowrap

The nowrap value specifies that the flex items will not wrap (this is default).

(ii) flex-wrap: wrap

The wrap value specifies that the flex items will wrap if necessary.

(iii) flex-wrap: wrap-reverse

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.

Below is the sample code for flex-wrap:

.container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Property: align-content

The align-content property is used to align the flex lines.This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

Note: this property has no effect when there is only one line of flex items.

align-content can have below values, please see the underneath diagrams to have better understanding.

(i) align-content: flex-start

The flex-start value displays the flex lines at the start of the container.

(ii) align-content: flex-end

The flex-end value displays the flex lines at the end of the container.

(iii) align-content: center

The center value displays display the flex lines in the middle of the container.

(iv) align-content: space-around

The space-around value displays the flex lines with space before, between, and after them

(v) align-content: space-between

The space-between value displays the flex lines with equal space between them.

(v) align-content: stretch

The stretch value stretches the flex lines to take up the remaining space (this is default).

Below is the sample code to use align-items:

.container {
  display: flex;
  align-content: flex-start| flex-end | center | space-around | space-between| stretch;
}

Section 2: ...

Now let's see the properties which are applicable for the flex items (children of the flex container).
flex-items can have below properties to style themselves individually.
"order, Align Self, Flex Grow, Flex Shrink, Flex Basis, Flex( shorthand for flex grow, flex shrink & flex basis)".
Each property is defined in brief in the below read.

Property: order

By default, flex items are basically laid in the order in which they are defined in the markup.
Order property determines the order in which they appear in the flex container, so without changing the html markup we can re arrange (re-order) in the flex container.

Default value of order is 0. See below example, Suppose we have 4 boxes, by default value of order will be 0 for all.

Now if we want to rearrange the boxes, for example(See below figure) if we want to place 2nd box at the first place and 3rd box at the end. First Lets see how to put 2nd box at the first place. If we give the value of order less than 0 i.e. -1 or -2, -3 ..., it will be come at the first place. Similarly when we have to put the 3rd box at last place , we have to give the value of "order" more than 0 i.e. 1 or 2 , or 3, .... basically based on the integer value (ascending) the boxes get sorted in horizontal direction(flex-direction: row) or vertical direction(flex-direction: column).

Now lets take an example where i want to put all the boxes in random fashion. How do we do it? Answer is simple, assign the value of "order" for each block in the ascending order. Box with lowest value of order will be in the left most and box with highest value of order will be in the right most. See below example for reference.

Property: align-self

This is used to style individual child item in the flex container. Styling is done basically with respect to cross axis here. Suppose flex-direction is row for the container , so all child items are places horizontally like below.

now each child item can be styled in vertical direction(cross axis) using "align-self" property moved up, down, center etc.

Please see below possible values for align-self, and diagram underneath to have better understanding:

(i) align-self: flex-start

The flex-start value displays the individual item at the start of the container.

(ii) align-self: flex-end

The flex-end value displays the individual item at the end of the container.

(iii) align-self: stretch

The stretch value stretches the individual item to take up the remaining space.

(iv) align-self: baseline

The baseline value aligns the individual items such as their baselines aligns.

Below is the sample code to use align-self:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Property: flex-grow

This give ability for the individual child item to grow proportionally.It dictates what amount of the available space inside the flex container the item should take up. Default value of flex-grow is 0(zero). In this it takes width based on the individual content width and extra space remains empty.

If all child items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

Lets see some examples to have better understanding:

(a) Among 4 available boxes with flex-grow value (0) , all will be displayed based on the content width. Now suppose 3rd box(3rd child item) has flex-grow property 1 (one) and other boxes(child items i.e. 1, 2, 4) have flex-grow property 0, then all the child items with flex-grow value 0 will take space based on content width and the remaining available space is occupied by the 3rd box (child item).
Please see below figure for better understanding.

(b) Now lets take another example, where child items (1,2,4) have flex-grow property value 1 each and child item 3 has flex-grow property value 2. So remaining space of flex-container is divided into 5 equal parts. Now based on the flex-grow value equivalent proportion of width will be allocated. Item 3 gets 2/5 (40%) of remaining space.
Please see below diagram for better understanding.

Similarly suppose child items(1, 3) has flex-grow value 3 and child items(2, 4) has flex-grow value 2. Now the remaining space of flex container will be divided into 10 equal parts (3 + 3 + 2 + 2). And share of child item 1 & 3 would be 3/10 each of remaining space and share of child items 2 & 4 would be 2/10 each of remaining space.

(c) Lets take one more example to have better understanding. Suppose flex-grow value for child-item 1, 2, 4 is 1 each and for child item-3 is 4. Now the remaining space of flex container will be divided equally in 7 parts. And share of child item 3 would be 4/7 remaining space.
Please see below diagram for better illustration.

Property: flex-shrink

This property gives flexibility to allow child flex-items to shrink by some degree. Here negative values are not allowed. The shrinking happens with respect to the other items available in the flex-container. Like shrinking 2nd child item by 3 times w.r.t to other child items. It's always relative to other items in the container.
Now lets see some example to understand more in depth.

(a) flex-shrink : 1
(this is the default value and it allows all the child items to shrink by some degree, depends on the browsers implementation). See the below diagram for better illustration.

Here all the child items have flex-shrink value 1 , so all will shrink with some degree.

(b) Lets see the below diagram

Here child items 1, 2, 6 have shrink value 1. And child items 3, 4, 5 have shrink value 0. Now items 3, 4, 5 are not allowed to shrink , however 1, 2, 6 will shrink with same degree.
Here also if shrink value is custom like child items with shrink property value 2, 3 ,4 ...and so on then shrinking will happen proportionally with each other.

Property: flex-basis

It provides the initial length of the child items.It defines the default size of the child item without the remaining space around it is distributed. It can be defined in percentage or some magic number or it can be auto. If set to 0, the extra space around child item isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value.

See the below example illustration to understand in depth and visualize different possibilities.

(a)

(b)

(c)

Property: flex

This is shorthand for flex-grow, flex-shrink and flex-basis combined. The flex property sets the flexible length on flexible items.
lets see some examples to understand in depth and visualize different possibilities.

(a)

(b)

(c)

(d)

To Conclude, i would say flex is good option (not only option)to position our elements. I hope you had good learning time. Now it's time to utilize the learned skills to try some hands on. To take flex to next level try making Holy Grail layout, or Hexagon layout, or Flexbox grids and comment how did you achieve. If you have some other layout which you feel we can achieve through flex, comment and do let me know.

Space Complexity

Babloo Kumar — Wed, 27 May 2020 14:38:21 +0000

Whenever we write an algorithm or we want to perform analysis of an algorithm, we need to calculate the complexity of that algorithm. But when we calculate complexity of any algorithm, it does not give us the exact amount of resources required to accomplish it. So instead of taking the exact amount of resource, we represent that complexity in a general form (Asymptotic Notation) which produces the basic nature of that algorithm. We use that general form (Asymptotic Notation) for analysis process.
Asymptotic notation of an algorithm is a mathematical representation of it's complexity. In asymptotic notation, when we want to represent the complexity of an algorithm, we use only the most significant terms in the complexity of that algorithm and ignore least significant terms in the complexity of that algorithm (Here complexity can be Space Complexity or Time Complexity).

For example- Consider the following time complexities of two algorithms.

Algorithm 1 : 4n^2 + 4n + 1
Algorithm 2 : 10n^2 + 8n + 3

Generally, when we analyze an algorithm, we consider the time or space complexity for larger values of input data (i.e. 'n' value). In above two complexities(time & space), for larger value of 'n' the term '4n + 1' in algorithm 1 has least significance than the term '4n^2', and the term '8n + 3' in algorithm 2 has least significance than the term '10n^2'.
Here, for larger value of 'n' the value of most significant terms ( 4n^2 and 10n^2 ) is very larger than the value of least significant terms ( 4n + 1 and 8n + 3 ). So for larger value of 'n' we ignore the least significant terms to represent overall time or space required by an algorithm. In asymptotic notation, we use only the most significant terms to represent the time/space complexity of an algorithm.

Today we will be discussing more about Space Complexity. Space complexity is amount of memory of a system required to execute a program to produce some legitimate output. Similar to Time Complexity, Space Complexity is often expressed asymptotically in Big O Notation such as O(1), O(log n), O(n), O(n log n), O(n^2), O(n^3), O(n^y), O(2^n), O(n!) where n is a characteristic of the input influencing space complexity and O is the worst case scenario growth rate function.

Why it's important to know the space complexity? Answer to this is, the computational device has limited memory and our overall cost increases with the increase in storage. So it's very important to know beforehand the amount of space required for the size of input data set.
For any algorithm, memory is used for the following purpose:

To store Variables (constant values, temporary values).
To store program instructions(or steps).
For the program Execution.

Mathematically if we put in equation, space complexity can be defined as,

Space Complexity = Auxiliary Space + Input space

Most of the times, Auxiliary Space is confused with Space Complexity. However, Auxiliary Space is the extra space or the temporary space used by the algorithm during it's execution.

When a program is under execution, it uses computational device memory for three main reasons:

Instruction Space: When the code is compiled we need to keep in the memory somewhere, so that it can be executed afterwards. Instruction Space is the place where it is stored.
Environmental Stack: It is used to store the addresses of the partially called functions. It means, Sometimes an algorithm(function) may be called inside another algorithm(function). In such a situation, the current variables are pushed onto the system stack, where they wait for further execution and then the call to the inside algorithm(function) is made.
For example, If a function A() calls function B() inside it, then all the variables of the function A() will get stored on the system stack temporarily, while the function B() is called and executed inside the function A().
Data Space: It is the place where data, variables, and constants are stored by the program and it is updated during execution.

When we want to perform analysis of an algorithm based on its Space complexity, we usually consider only Data Space and ignore Instruction Space as well as Environmental Stack.That means we calculate only the memory required to store Variables, Constants, Structures, etc.

Cheat sheet, to keep it handy.
Below is the list of some common Space Complexity terms, which we knowingly or unknowingly use in our day to day coding. It is arranged in order of there execution time when their input size increases.

S.NO	Big O Notation	Name
1.	O(1)	Constant Space Complexity
2.	O(log n)	Logarithmic Space Complexity
3.	O(n)	Linear Space complexity
4.	O(n log n)	Linearithmic Space Complexity
5.	O(n^2)	Quadratic Space Complexity
6.	O(n^3)	Cubic Space Complexity
7.	O(n^y)	Polynomial Space Complexity
8.	O(2^n)	Exponential Space Complexity
9.	O(n!)	Factorial Space Complexity

For better understanding See the below graph, it's combination of all the graphs for different Space Complexities, You can clearly see with the increase in input data set how space complexity varies. Based on the amount of input data set choose your algorithm wisely.

Now let's see the calculation part of the space complexity through some examples,
For calculating the space complexity, we need to know the value of memory used by different types of datatype variables, which generally varies for different operating systems, but the method for calculating the space complexity remains the same. For example - Generally (not always) C Programming Language compiler requires the following:

Type	Size
bool, char, unsigned char, signed char, __int8	1 byte
__int16, short, unsigned short, wchar_t, __wchar_t	2 bytes
float, __int32, int, unsigned int, long, unsigned long	4 bytes
double, __int64, long double, long long	8 bytes

However you are always free to choose some sample unit (like T size) for same type of variables to calculate the size.
Now lets take some example and decode how to calculate space time complexity:

Example 1-

  {
     int z = a + b + c;
     return(z);
  }

In the above expression, variables a, b, c and z are all integer types, hence they will take up 4 bytes each, so total memory requirement will be (4(4) + 4) = 20 bytes, this additional 4 bytes is for return value. And because this space requirement is fixed for the above example, hence it is called Constant Space Complexity.
If any algorithm requires a fixed amount of space for all input values then that space complexity is said to be Constant Space Complexity or O(1) space complexity.

Example 2- It's bit complex than first one,

  // n is the length of array a[]
  int sum(int a[], int n)
    {
    int x = 0;      // 4 bytes for x
    for(int i = 0; i < n; i++)  // 4 bytes for i
    {   
        x  = x + a[i];      
    }
    return(x);
    }

In the above code, 4*n bytes of space is required for the array a[] elements.
4 bytes each for x, n, i and the return value. Hence the total memory requirement will be (4n + 12), which is increasing linearly with the increase in the input value n, hence it is called as Linear Space Complexity or O(n) Space Complexity.

Example 3- When you implement binary search, You will find total memory requirement will be something similar in terms of log(n). Hence it is called as Logarithmic Space Complexity or O(log n) Space Complexity.
In practical on day to day basis,
LOGSPACE is the set of problems that can be solved by a deterministic Turing machine using only O(log n) memory space with regards to input size. Even a single counter that can index the entire n-bit input requires log n space, so LOGSPACE algorithms can maintain only a constant number of counters or other variables of similar bit complexity.

Example 4- Let's take an example of merge sort

   function mergeSort(arr) {
    if (arr.length === 1) {
      return arr;
    }

    const center = Math.floor(arr.length / 2);
    const left = arr.slice(0, center);
    const right = arr.slice(center);

    return merge(mergeSort(left), mergeSort(right));
   }

   function merge(left, right) {
     const results = [];

     while (left.length && right.length) {
      if (left[0] < right[0]) {
        results.push(left.shift());
      } else {
        results.push(right.shift());
      }
    }

    return [...results, ...left, ...right];
  }

here, the memory requirement will be some constant *( n * log (n)). Hence it is called Linearithmic Space complexity or O(n log n).

Similarly, we can have quadratic and other complex space complexity as well, as the complexity of an algorithm increases.

But we should always focus on writing algorithm code in such a way that we keep the space complexity minimum.

To conclude, i would say, better the space complexity of an algorithm better will be performance of it. Before finalizing the algorithm for your programming code the worst case scenario should be considered. It would help in longer terms with respect to scalability and sustainability of the overall system and it will help in keeping the resources in healthy condition without burning out.

If you have some algorithm and want to calculate the space complexity, put the code in the comment section and we can decode together.

Time Complexity

Babloo Kumar — Tue, 26 May 2020 14:14:19 +0000

In the programming, when we have a problem there are many ways to solve it. But which is the best way and how do we decide to pick the right algorithm.
Algorithms are set of instructions(or steps) which tells what to do and how to do it.
Some algorithms finishes within a second, another takes minutes with even smaller data sets. How do we compare different performances and come to conclusion?
Answer to this is to measure the time complexity of an algorithm. Time complexity represents number of times a statement is executed. The execution time of the code does not depend only upon the algorithm, it depends upon certain factors like programming language, operating software, processing power, etc etc. However, Keeping in mind the system configuration to be constant, time complexity is calculated on the execution of algorithm itself and its input.

To express the time complexity "Big O Notation" terminology is used. It is a function of input size (n) of Big O Notation, where n is input and O is the worst case scenario growth rate function.

Cheat sheet, to keep it handy.
Below is the list of some common time complexities terms, which we knowingly or unknowingly use in our day to day coding. It is arranged in order of there execution time when their input size increases.

S.NO	Big O Notation	Name
1.	O(1)	Constant Time Complexity
2.	O(log n)	Logarithmic Time Complexity
3.	O(n)	Linear Time complexity
4.	O(n log n)	Linearithmic Time Complexity
5.	O(n^2)	Quadratic Time Complexity
6.	O(n^3)	Cubic Time Complexity
7.	O(n^y)	Polynomial Time Complexity
8.	O(2^n)	Exponential Time Complexity
9.	O(n!)	Factorial Time Complexity

let's go one by one, decode & define them to have better understanding.

(1) O(1): When our algorithm takes same time regardless of the input size we term it as O(1) Or constant time complexity. It means even though we increase the input , the time remains same.
Example- add 2 numbers, find if a number is divisible by 2 or not.
See the below graph to have more understanding.

(2) O(log n): When input grows time increases linearly up to certain point and then becomes almost constant w.r.t horizontal axis. It means even though input increases drastically after certain interval of time it will take constant time.
Logarithmic time complexities usually apply to algorithms that divide problems in half every time. For instance, let’s say that we want to look for a "book" word in a dictionary. For that we need not to go through all the words before & after it. We just need to eliminate at every stage till we reach the word "book".

Open the book in the middle and check the first word on it.
If the word that you are looking for is alphabetically more significant, then look to the right. Otherwise, look in the left half.
Divide the remainder in half again, and repeat step #2 until you find the word you are looking for.

Example - Binary Search
See the below example to have better understanding.

(3) O(n) : When input grows , the algorithm takes proportionally longer time to complete the operation. Linear time algorithms imply that the program visits every element from the input.
Example - to find maximum in an array. When the size of the input grows, time also grows proportionally.

This can be usually identified when the function has single for loop.
See the below graph to have better understading.

(4) O(n log n): Linearithmic time complexity, it’s slightly slower than a linear algorithm. However, it’s still much better than a quadratic algorithm.
Example, sorting algorithms like MergeSort, depicts this time complexity.

See the below graph, it's combination of all the graphs for different time complexities, in practicality, algorithms with Linearithmic time complexity are one of the well appreciated algorithm.

(5) O(n^2): In this type of algorithms, the time it takes to run grows directly proportional to the square of the size of the input, means when 1 unit of input grows, it takes 2 unit of time, 2 unit of input takes 4 unit of time and so on.
In most of the scenarios and particularly for large data sets, algorithms with quadratic time complexities take a lot of time to execute and should be avoided.
This can be identified when the function has nested for loop or two inner for loops.
Example - printing two dimensional arrays, or bubble sort.

See the below graph to have better understanding.

(6) O(n^y): Polynomial time complexity is represented as O(n^y), when y > 1. here n is input , y is exponential integer greater than 1. As you already saw, two inner loops almost translate to O(n^2) since it has to go through the array twice in most cases. Are three nested loops cubic? If each one visit all elements, then yes! And that terms out to be Cubic Time Complexity O(n^3).

Usually, we want to stay away from polynomial running times (quadratic, cubic, n^y, etc.) since they take longer to compute as the input grows fast. However, they are not the worst :) .

(7) O(2^n): In exponential time algorithms, the growth rate doubles with each addition to the input (n), often iterating through all subsets of the input elements. Any time an input unit increases by 1, it causes you to double the number of operations performed. Basically calculations performed by an algorithm double every time as the input grows.
Example- Creating subset of string like 'abc' , 'abcd', 'abcd.....z'

See the below graph to have better understanding.

(8) O(n!): Factorial is the multiplication of all whole numbers from our chosen number down to 1.
Example: 5! = 5 x 4 x 3 x 2 x 1 = 120
it grows when input increases
20! = 2,432,902,008,176,640,000
With small increase in input data set there is huge increase in the execution time. We should stay away from such algorithms as much as possible.

These were the basics Time Complexity terms you might come across daily while programming or writing algorithms.

Next step would be to deep dive to decode the function and write down time complexity of each line and summation of it, will give the exact time complexity of the program code which you have written.

To conclude, i would say, better the time complexity of an algorithm better will be performance of it. Before finalizing the algorithm for your programming code the worst case scenario should be considered. It would help in longer terms with respect to scalability and sustainability of the overall system.