Forem: Dimitar Stoev

Reactive Forms in Angular

Dimitar Stoev — Wed, 31 May 2023 13:05:53 +0000

I am yet to see an Angular application without some kind of a form. The power of Internet two is the ability to create user content and express ourselves. Nothing of that could happen without the communication between the front end and the back end technologies.

I am not going to talk about protocols, network or REST. I am going to dive a little bit into the ways of Angular to collect the information.

Two ways to do it - template driven and reactive forms.

I am talking about Angular Reactive forms today.

What is the difference between template driven and reactive forms?

Good question!

The name “template driven” forms comes from the way they are structured. It follows a declarative approach where the form itself and the validations are defined in the HTML.
Reactive forms take a more programmatic approach, where you validate and define using TypeScript.
Template driven forms use Two-way data binding to communicate with their “model”
Reactive forms use form controls that are treated as streams of data - aka. Observables that can be observed and reacted upon.
Compared to Reactive forms, you have limited control with Template driven forms.

How do I prefer to use them?

I find template driven forms useful in controlling the UI ( like a checkbox for example ). Conditional rendering based on some specific input.

Less complex forms, although I am starting to switch to “Always reactive forms”.

Reactive forms are easier to work with. Even though the set up is heavier and the complexity is a little bit more, Angular reactive forms are way too powerful and have to offer so much.

Another thing I like more about Reactive forms is they tend to be more “structured”. It is strict and maintainable. I don’t have to look in the entire HTML template in order to find all I want.

Controlling the entire form in the component class is just great. This is the way it should be.

Setting up Reactive Forms

In order to use the reactive forms you have to set up the module and import the dependencies.

It is done through the ReactiveFormsModule from the @angular/forms. This provides all the necessary classes and functions for our reactive forms to work.

With this we will have the option to use some special binding such as formGroup, formGroupName, ngSubmit and more.

One of the most important classes I am going to import is the FormBuilder. A class that comes with great features:

control () - you can create individual form control. It returns a FormControl
group () - this is the main method to create the form group.An object that utilizes the keys as form control names. It returns a FormGroup
array () - A method that returns a FormArray instance. Incredibly powerful

You can even nest FormGroups!

But what exactly is Form Control and Form Groups?

FormControl

This is the building block of reactive forms. It represents an individual input field within the form and tracks its value, validation status and every used interaction.

One thing I want to mention is that FormControl is a class that extends AbstractControl.

We bind it to the template with the formControlName and use the correlated name or we just provide the entire control. It goes directly to the input element.

Some useful methods I want to present to you are:

valueChanges - observable that fires every time a value is changed
setValue - sets a new value for the form control
patchValue - it acts the same as setValue when it comes to FormControls
updateOn - FormHooks that represents the update strategy
setValidators, removeValidators - useful methods to control the validators of the FormControl

What about FormGroups?

While FormControl represents an individual input field, FormGroup allows you to group related form controls together. It allows you to manage the state, validation and values as a single entity.

It is way easier to keep track of the validity of the entire form you have.

How does it do it?

While we instantiate the new FormControl we can provide some arguments in the constructor. One of them is the ValidatorFn. A function that receives a control and synchronously returns a map of validation errors if present, otherwise null.

Form Builder

A helper class provided by the Reactive Forms module that simplifies the entire process of building the form.

It offers declarative ways to build complex forms.

The most important method here is the group - accepts an object which contains all the keys and corresponding inner control types.

One other great feature is that we can dynamically create and modify form controls!

Dynamic Forms

Reactive forms just shine here!

Let’s say we are building a form that needs to be dynamic. We need an address, but we are not sure how many addresses people have. What is the solution?

We allow multiple ones.

But how do we do it if we said we define the form itself in the FormBuilder.

Easy. We use the power of arrays. FormArrays!

That’s a class that represents an array of multiple FormGroups or FormControls. It also provides methods to add or remove such.

The initial setup could be a little tricky if you are doing it for the first time. I remember it was a little bit confusing when I was trying to do it.
We add controls with the push() method and removeAt() to .. well… to remove.

console.log(address.at(0).value); // Access the value of a specific control

The Flow

Let’s show the flow of creating everything in images. I guess it’s going to be useful to visualize it.

we import the reactive form module
define the form builder
create the form group
set up arrays ( if any )
bind to the HTML
control the events and submission

Easy!

Repository

If you already follow me, you know there would be a repo with the code.

Have a look here.

https://github.com/dimitar-stoev/dimitar-stoev-tutorials/tree/reactive-forms

You can check a custom Validation function, set up based on my preferred Angular application structure and more.

Don’t forget to “star” the project. It would be awesome!

Conclusion

Reactive forms are the best way to handle complex logic and data.

It’s my preferred way of creating user interactions. Although I sometimes use template driven forms, it’s on very rare occasions.

Reactive forms are dynamic, reactive ( I know, I know ) and more declarative.

Play around and find out!

Creating Dynamic Components in Angular

Dimitar Stoev — Sun, 14 May 2023 13:46:07 +0000

Getting started

Hey, Angular fans, and

Здравейте, приятели!

I am diving more into Dynamic Components and the importance and crucial role they play in developing flexible Angular applications.

I happened to “meet” them relatively late in my Angular career and as far as I see, there aren’t too many articles and content in general about it.

So.. what is it?

Why do we need it?

When could we benefit from it?

I am going to define the Dynamic Components for you and make a contrast to static components, highlighting their advantage and use case.

Second - we will dive a little bit more on how to manage them.

So what am I going to show you and build for you?

Definition and Information

The difference with standard components is that when we talk about dynamic ones, we mean they are not defined at build time, but at run time.

This allows us to create components based on user input or dynamic data.

They are not defined in the template, but rather rendered dynamically.

Perfectly flexible and reusable.

Creating a Dynamic Component

The initialization of the Dynamic Components is straightforward and you already know how to make one.

You generate a component through the CLI and register it in a module as usual.

Nothing new here!

For components that I plan to use dynamically, I usually register them as standalone components.

I have talked to some people who thought that dynamic components are some special components, but that’s wrong.

It’s the same component, just the way we render and create it is different.

The component is just rendering information based on inputs.

I know it’s nothing interesting, but it’s to get the idea.

The HTML is as follows

The basic “widget” component is looping through the config and displays the key as title and the value of information as paragraph.

Beautiful, right?

Now let’s go to the interesting part.

We have three buttons and every one of them calls the method of dynamic component creation for a certain type. Based on the type we “pull” the correct data. I am not going to use a service here and mock a response. Just simple constant data.

Since we are grabbing the “container” we have to “clear” it in every call. If we don’t, we will end up with multiple components.

Now let’s see what is “component” and “inputs”.

We see that we are extracting the data from optionsByType().

The powerful thing is you can load any type of component and any type of data. Making it truly dynamic.

This is perfectly enough for Angular to create the component for us.

You can check the repo listed below and see everything as it is.

Use cases

Using dynamic components depends on the situation. Some of the most real world use cases are

Dynamic Forms - creating a dynamic section or fields
Modals | Dialogs - not every time a library is needed or sufficient
Widgets - not as simple and stupid as the current app I am showing you ( I hope so )
Data visualization - rendering different charts and data ( personal favorite )
Conditional rendering - you can show components depending of the user input )

Repository

Dynamic Components are something that is not usually the first choice for many devs out there.

You need to play with them in order to understand them relatively well.

Here is the promised repo you can check. A simple “project”, but enough to get you started!

Thanks for reading!

How I use NgTemplateOutlet in Angular - Part 1

Dimitar Stoev — Sun, 07 May 2023 08:56:54 +0000

Introduction

This is a directive that is always neglected and people tend to not use it. Either because they do not fully understand the use cases or simply because they don’t know they exist. I have seen it! I know!

When I first encountered it I wasn’t really sure where and why I would need it when I could simply create another component, or a switch case.

It brings dynamic to your template and you can create reusable components with ease.

It’s great for performance reasons and simplicity.

Getting Started with NgTemplateOutlet

What exactly is ngTemplateOutlet?

It is a structural directive that allows you to render templates dynamically. Pieces of HTML that is used to define the user interface of a component.

Of Course in 99% of cases you will import the commonModule itself and not specifically the NgTemplateOutlet, but I wanted to highlight to you where exactly it is.

First, we define the template - in our case it is #details and I want to point out that this is not the position it will be rendered! We are merely defining it. The position it will be rendered is where the ng-container is located with the correct variable. The template is NOT rendered by default.

Angular will replace the content in the ng-container with the information we have inside the template

Understanding the Directive

Behind the scenes Angular is creating a new view and setting variables for the template we create. This directive takes an object as its input and Angular creates a new scope for us. It fills the template with the information we provide inside

Under the hood Angular creates a template and we can reuse it in different conditions.

What is different with that Directive is that it has its context. We can pass data and work with the template dynamically.

Let’s give an example:

As you can see in the example - I define a property called “user_name” inside the ng-template and assign it to “name”. And that name is passed from the “context” in the ngTemplateOutlet.

I have to admit that the first time I encountered that I was a bit confused, but after a while it all makes sense.

Usage of NgTemplateOutlet

As I stated in the title - it is the way I usually use the ngTemplateOutlet. And the most often use case I do use it for is to create and control tables.

I will explain more on this, but let’s mention another use case - it could be used for rendering dynamic information and to reuse code in the template, if you don’t want to create another component.

Simple and yet effective. Since you can pass information, you create your mini separate component directly in the template.
Another use case I sometimes find myself is to “separate” logic in the template.

Let's describe it as a “method” in the HTML template. It’s great since I can provide params into the “function” and it works perfectly.

It's great to divide logic.

Conclusion

In part two I will create a demo repo with examples on the way I use it for tables.

I have been planning on this for a long time, because I always wanted to create a configurable table I would use on many occasions and on many projects.

I am going to build it and publish it as a package, in order to reuse it myself.

There are great and awesome libraries out there, but I always find unique cases that force me to fight the library in order to get something done.

So in a sense I am gonna build it for myself, but hey, if you find it useful - I am happy!

Stay tuned, follow and feel free to contact me.

Using HttpClient, HttpBackend and Observables to consume RESTful APIs

Dimitar Stoev — Sun, 23 Apr 2023 11:17:09 +0000

Introduction

Angular is an incredible framework and I love working with it!

Playing around and browsing the source code is an incredible learning opportunity.

One essential feature is the ability to send requests and receive data from the backend server.

What is an application that doesn’t do that?

In order to create modern and interactive solutions today with Angular, we need to know the basics of HttpClient and HttpBackend.

What is HttpClient

So, what exactly is HttpClient and why do we need it at all? Why not use simple fetch to do the requests?

It is a built-in Angular service that does some work for us. It makes it easy to send HTTP requests to a server, handle the response and in simpler words - it’s a tool that helps us to communicate with the backend.

If we open the repository of Angular in GitHub we can see that the file is relatively big and has a bunch of stuff in there.

With HttpClient we get the following important methods - GET, POST, PUT and DELETE. Let’s check an example to illustrate what is going on.

When we create an instance of HttpClient we can call the method “get” and pass two arguments - url and an object with some options. Some of them are self explanatory and I am not going to dive too much on them today, but I want to point out something!

Have a look at the responseType. Here it is defined as ‘blob’ and from that we get a response of Observable that contains a HttpEvent of type Blob.

Defining it is not required by default, but keep in mind if you are working with specific type of data.

Let’s look of this example:

I want to fetch some users and want my response to be of that type. How do I do it?

I can simply define the type of the request itself.

Check it out here

Once the request has been returned, you can subscribe and work with it.

Important thing I want to share is under the hood Angular uses XHR. The XHR object is a built-in JavaScript object that allows us to send and receive HTTP requests.

Why use HttpClient to make requests, when you can use fetch()

Well.. this is open for a debate and some people actually prefer using the fetch(), rather than the HttpClient.
HttpClient handles a lot of details such as setting headers, encoding data and handling the cookies by default. It adds consistency to the codebase.

Another thing is that Angular is built around the idea of reactive paradigm. And HttpClient is no different. It returns an Observable as we saw in the code earlier.

It also has some built in support for interceptors
it has some additional methods - such as HEAD, OPTIONS and PATCH
it supports working with non-JSON data format out of the box
customizable

If using fetch() you have to add that abstraction yourself.

What is HttpBackend

Most people haven’t used it, some haven’t heard of it.

If we browse the src folder in the http folder in the official Angular repo we can see a file named “backend.ts”

What is that?

As we can see it is an abstract class. Simple interface that provides us with the only bare minimum of the HTTP client. No fancy features. No interceptors, no response mapping.

To use it, you have to create a new instance of HttpClient and pass an instance of HttpBackend.

It provides a low-level interface for sending HTTP requests and receiving responses and that alone could be useful in some cases where you need more control over the behavior of HTTP requests.

Some cases could be:

getting the bare minimum and implementing custom HTTP behavior
improved performance and size, since a lot of the features are just missing
very specific custom and complex request

That leads to manually handling eros and parsing your responses.

I have seen this implementation myself only once and most of the time you will know you need it.

In like 99% of cases.. you probably don’t.

I am interested - have you implemented it and in what conditions?

Important note - when using the HttpBackend you must know that it bypass as of its nature the interceptor chain

This could be useful if you need to create requests that you don’t want to go through the interceptors.

You won’t need to create some fancy solutions and handle conditionals logic.

Just create a service and do the requests you need through it!

The Holy Observable

Observables play an incredibly important role in working with HttpClient and HttpBackend in Angular.

As we saw, the request returns Observable of specific type.

I have written a little article on how I usually work with Observables and I am planning to go a lot deeper in the future and create some cheat sheets for all of us to use.

If that is something of your interest.. a follow would be nice.

Conclusion

So much to learn and so many different implementations and ideas.

Incredible framework with incredible power.

I absolutely love working with it and am eager to learn all the time.

HttpClient and HttpBackend are incredible tools that allow us to make complex and interactive applications.

All the features we get from HttpClient do a lot of the heavy work for us and implementing it is as easy as possible.

Thank you for your time and don’t forget to follow me for more!

How I work with Observables in Angular

Dimitar Stoev — Sat, 15 Apr 2023 13:15:31 +0000

Introduction

This is a subject that is intimidating for a lot of folks out there and I have heard people explain it’s just too hard. In the beginning when I first started learning Angular I was having the same feelings. Like… What the hell? Why do I even need this Observable thing?

I managed to love it now and I prefer to always go reactive and always consider using RxJS as my goto approach first.

But with great powers, you know the rest.

There are many ways to deal with a single problem and this approach is my preferable one.

In the next lines I am going to talk about how I like to work with Observables and how I prefer to handle data.

This is part of my Angular series and it would be great if you subscribe / follow. It shows me that these articles are actually helpful to someone.

What to expect?

Observables and declaring them
Subscribing to them with Async pipe
Working on data with Pipes
Combining pipes in the HTML template
Working demo showing all of the above

What are Observables?

An observable. Simply put - a producer of data, a pipe that is delivering information on a consumer. It produces the value and delivers it when asked to.

There are certain types of Observables. We have cold ones and hot ones. Streaming data when asked and streaming data regardless of potential subscribers respectfully.

The observable itself plays a very central part of the reactive programming that is used in the framework. It is used often to manage asynchronous data, HTTP requests for example, inputs, and custom logic.

The “Observable” interface that the class implements, defines a set of methods and properties that allow us to interact with the observable, subscribe to the emissions and handle any errors. It includes a completion event as well.

When we subscribe to an observable, it creates a new subscription object. This object is used to control and manage the interaction between the observable and the subscriber.

It is important to point out that unsubscribing is an important part of the working flow of working with Observables. Especially if we are talking about hot observables that are sending data regarding the user interaction.

The “async” pipe is doing this for now and it is my preferred way to deal with Observables.

Another thing that RxJS is providing us with is the ability to manipulate the data before passing it to the consumer. We have various operators to choose from that have different behaviors.

Using Async pipe

When it comes to my personal preferences I usually prefer to define the Observable in my class and use the async pipe in the template.
This is great, since it automatically does subscribing and unsubscribing to it. Getting the data is easy and handling it is easy as well.

Let’s get to the examples. We have a list of users and we want to iterate over it. Our task is to list the information to our user.
You can check the entire source code in the repo, but I am going to provide snippets here.

I usually create the services, the interfaces and then declare the observable with the correct type in the .ts file. Subscribing is done with the async pipe.
In this example I am getting the entire list of users.

Angular is using the pipe and subscribes to this observable under the hood. The data is loaded and when delivered - rendered.

We are going to implement routing and loading single data usage. RxJS is going to help us here.

Loading single user

The moment a user is clicked in the list we are using routerLink to change the route and load the data of the specific user. We will load status and description. Nothing more for our little demo, but I am going to highlight my approach on controlling the data there.

I am using from operator here to convert my USERS array to an observable stream and ‘find’ to return either the found user or an error using the throwError

Many ways to handle the id of the route, but I am going to use something simple for this. I want to showcase the template and the combination with the *ngIf directive.

I am still using the onPush change detection and the user is an observable of User type. The control of the data is reactive.

Let’s say I want to list the active users. We have a property that sets their “status”. I would go with the following - since I already have the users, I could just pipe them again and filter it there.

Fast and clean!

In the provided repo below, you can check a functionality that adds users, update the UI automatically on update using BehaviorSubject and Observable.

The template is rendered with an async pipe as well.

How to use Observables and Pipes together in Angular?

I love pipes. I try to use them as much as possible. I know not every time is the best time to use them and sometimes it’s just not the case.

But let’s say you have a response and get that users. But you need to arrange the data in specific order.

What do you do?
I could do the job perfectly with a custom Pipe here. I get Users[] and return Users[].

Let’s see an example.

I am reworking the template in order to handle null users. Chaining pipes is just too great!

One thing I usually do as well is combine all these Observables into one. I am using combineLatest in this example to use it as a single variable in the template.

The template:

Demo project

The entire source code is in a repo on my GitHub profile. Every example here is there and you can check the interactions and the way it is structured.

Here is the link

GitHub repository

I am planning to expand this into a bigger demonstration project with design, functionality and some patterns and practices, so if you are interested in that - follow and “star” the project.

Thank you in advance!

Conclusion

I really love working with Observables, Subjects, BehaviourSubjects and pipes. When I start a feature, I always try to plan in advance and I try to plan as reactively and declaratively as possible.

In the project I listed above, I am planning to create a full application with best practices and every article I write for Angular is going to be referred to and implemented in the project ( whenever is possible of course ).

Thank you and good luck!

My Personal Takes on How to Pass a Tech Interview

Dimitar Stoev — Sun, 02 Apr 2023 10:14:20 +0000

Introduction

I know it’s scary to a lot of people, but knowing how to pass an interview is a skill on its own. While technical skills and experience are certainly important, there are many other factors that can influence a hiring decision.

Soft skills can make a significant difference in how well you can perform in a tech interview and can lead to a better result. Communication, attitude and personality could be crucial.

By the end of the post, you will have a better understanding of how to approach a tech interview and increase your chances of success. This strategy works both for junior developers and more advanced ones.

To whom do I write this article?

I want to make one thing clear before I continue with the article. This article IS NOT for someone who is just trying to get into tech for money or for someone who just wants to “cheat” the system.

This article is for people who are passionate about their work and love what they do, but have some problems managing their interviews.

This article is for people who don’t just want to be programmers, but want to get further ahead.

These tips could be used not only for passing an interview, but also to expand your knowledge and improve yourself.

Ok, so let’s get it all started.

Why do soft skills matter?

If you try to compare yourself to other programmers, you will usually find several other people that are WAY smarter and better than you. And that’s absolutely fine! To be in the 1% of top programmers is something that most of us probably don’t even want.

When you apply for a job, you can’t just expect and hope that someone will notice your CV. At some companies, most CVs don't even get to HR. There is an algorithm that makes the initial decisions. If you pass that phase, there is a good chance your CV is going to be compared to the best candidates for the job.

How would I fight that? Are you going to leave it all to chance?

You know soft skills are important, but how to show them if you are not even picked for an interview?

Be prepared and organized

Let’s start with the more trivial information. Research the companies you are applying to.

I have always been against the idea of mass spam and apply to every single job out there. If you are looking for specific positions, try to search for the right position, not just every open one.

There are way too many companies out there and you need to take your time to find the right one. Pick just a few. Below ten is perfect in my opinion.

When you do that, check everything possible about them, find the people who take the decisions on social media, learn what they think about topics that are interesting to you and so on.

Try to feel the culture.

Engage!

Engage with them, talk to them and prepare a cover letter individually for every single company. Don’t copy and paste. Be serious about it!

You are not spamming companies, you are looking for the best place possible for you. You want to be happy at that company and working with like minded people. That's how you are going to be productive and you will enjoy working.

Communicate clearly and confidently

This is a hard one, since it takes the most time. It’s not something that you can change in a day, but it is something that will improve every area of your life.

When you engage with people on social media or recruiters, you need to show that you are a professional and bring real value. People have to know you are capable of taking decisions and sticking by them.

Show that you have an opinion on topics, even if they are controversial. I would avoid politics tho..

If you engage with the right people and when you start to promote yourself, they would already know you. That’s something other candidates won’t have.

It’s always better to hire a professional you know, than to expect to find a good match out of the blue.

Showcase your knowledge

Okay, I will lose some readers, but writing is the best way to get a job. And not only tech jobs, but any job.

I am new to writing and I even get some offers out of thin air because of it. I occasionally write articles about Angular and people expect me to know Angular, even before talking to me at all. That’s a power out there!

It doesn’t matter the field you are in. It’s not just tech. It has applications in a variety of fields. If you know something - share it. You accomplish two important things that way:

You show your domain and when people engage with you, you don’t need to prove anything. They already know you know.

You are shifting the interview and the conversation from “Does this guy know about it?” to “Okay, he is a professional, let’s see if the personality can match the culture”

The hardest part is already behind you!

You help people that start today!

I believe this is also important. You face challenges that a lot of other people are facing as well. Help as many people as you can.

The fulfillment is great!

Let’s summarize. Demonstrating the softs skills you have before applying even for the job is bringing you so much value, it’s unbelievable. Too many people are not playing the bigger game and if you start now - you are way ahead already!

Demonstrate your technical skills

This is where most of the stuff can go very wrong! Getting here is not a small task and I can argue for a long time that soft skills are important as much as technical ones. But a lot of people assume that the technical part of the interview is .. well.. only technical.

This part of the interview needs the best of your soft skills!

Let’s take two examples

Example one: The experience

We have this guy who has a ton of experience. Almost ten years, working as a back end engineer. He usually gets the job done fine, nothing fancy, nothing great. He is developing his technical abilities, but doesn’t give a dime for his social and soft skills.

Working like that leads to bad companies and people don’t like to work with him too much. He is not very sharing either.

When he goes to interviews, he smashes the technical one, but he ends up all the time at bad companies. That leads him to being average and he starts to show signs of “not caring” enough. Why is that?

I believe it’s an easy answer. Soft skills are skills that could be learned and it’s not just “that’s the way I am, take it or leave it”. Well.. most people won’t take it.

Don’t just assume you got the job, only because you know a lot. Many people do. It’s not enough even in this demanding market. Great companies want great people.

Example two: The great character

A person with around three years of experience, but with great soft skills. He always tries to teach somebody, and share knowledge all the way. Demand from himself.

He always expects more from himself and this leads to better communication. He is not writing articles, but he is always talking to people. He is engaging in network events and even led some small conferences in his hometown.

He is the guy that works around half the day and the other half is helping people. Great personality.

Who do you think is more respected and has the better job?

Easy answer, I know.

The interview

When you get to that part, show your passion for the technology. You have written articles, you have talked to people, you have managed to understand the language.

Show that!

Don’t just answer questions. When they ask you about something, expand it, talk with understanding.

And question back!

Ask questions about how they use the technology they ask you about. Ask questions about implementation and architecture in the project they have. Show the interest you have gained while developing the company beforehand.

Try to understand where you are going before even opening and cloning the repository. Act as you are part of the team already.

Those interviewers are real people who have the same passion ( most of the time ) as you. Engage in conversation and not just Q&A.

When they ask you what you would do in a particular situation, ask them back. They have that question for a reason. Learn how they did it and why. Be curious.

Your attitude should change from “he is above me and I have to prove myself worth it” to “We are both technology lovers and I want to make sure I am getting in the right company”.

No better way to do that than to ask the right questions.

Additional tips

Some of this will cost money, but the harsh reality is that no matter what some fake gurus are telling you. You can’t make it all for free.

Let’s make it in a bullet points

website - make it your own and share to other platforms
professional email - don’t use your Gmail account. It’s not serious.
github account - take some time to make it look good
professional image for your social media accounts - use one for all
share and network offline as well - a lot of good offers come by by people you know in real life

Follow up after the interview. Don’t forget to follow up if time passes by.

You need to know what happened and feedback is important to you. Be serious about it.

Summarizer

Passing an interview it's a skill. You will manage after passing a few with no problem. You can learn the asked questions and pass every single one of them.

But doing that is a game of chance and luck. I don’t believe in that way of doing “life”. You need to take control of your own life and career.

Advance your soft skills, advance your writing skills and talk to people A LOT. Engage as much as possible. Show yourself to the world.

Be the picker. You choose the companies that you work for. Not chance.

It takes a lot of time, but it’s worth it.

Good luck!

What is CommonModule in Angular

Dimitar Stoev — Sun, 26 Mar 2023 10:41:12 +0000

Introduction

Hey there and thanks for stepping by!

So what is CommonModule? You have seen it, you know it delivered the *ngIf, *ngFor and so on, but what else do we have?

In the docs it says it’s reexported again with BrowserModule.. but why?

What is CommonModule in Angular

To understand what exactly is CommonModule we should first make it clear what exactly is a module and what it does for us.

In Angular we say we create modular applications because we scope and group together different entities. Through modules we declare and provide those same entities.

While our application grows it requires more features and more segregation. Defining every feature in a separate logical block is a good practice we should all follow.

To use components and directives from that module we need to provide its existence to Angular. That means to import it in other modules that require those components.

So to summarize and explain, the CommonModule is an Angular module that contains and exports Angular components, directives and pipes.

Checking app.module.ts is enough to understand why reexporting it in BrowserModule is enough to have access to CommonModule components in the app module.

I am not going to dive into the BrowserModule today, but keep in mind that BrowserModule must be imported only once, since it provides services that are essential to launch and run a browser application. And you don’t need that for your feature modules.

Do you need CommonModule if you don’t need CommonModule?

When you create a new module by using the Angular CLI, it automatically adds CommonModule to the imports. But since we already know that it is just for exporting basic utilities, you can safely delete it and everything should work just fine.

So.. Do you delete it if you are not going to use anything from it? Well, I always leave it there, but I will leave that decision up to you.

The CommonModule is acting as every other module out there.

If you have a SharedModule, you can import and export your CommonModule there and importing the SharedModule is going to be sufficient to have access to all CommonModule components, directives and pipes.

It could be useful, if you are planning to optimize your imports.

Inside the CommonModule

I believe that to have a good understanding, you have to check the source, rather than the docs.

The documentation is great for first look and getting started, but to understand the technology behind, you have to check the github repo.

Let’s check the directive first. If we go to the common package in the official Angular repo, we can see an index file that exports all Angular directives.

NgClass - add or remove CSS classes from an HTML element based on a boolean expression
NgComponentOutlet - dynamically render a component based on a provided component type
NgFor - loop through an array or iterable and render a template for each item
NgForOf - a variation of NgFor
NgForOfContext - a class that represents the context in which NgForOf is rendered and it provides properties and methods for accessing information about the current item being rendered
NgIf - conditionally renders HTML elements based on a boolean expression
NgIfContext - a class that represents the context in which - NgIf is rendered and it provides properties and methods for accessing information about the current state of the directive
NgPlural - conditionally render HTML elements based on a numeric value and provides support for multiple plural forms
NgPluralCase - used inside of NgPlural to define a template for a specific plural case, such as “one”, “few”, or “many”
NgStyle - add or remove CSS styles from an HTML element based on a boolean expression
NgSwitch - conditionally renders HTML elements based on a provided value, and it supports multiple cases
NgSwitchCase - used inside of NgSwitch to define a template for a specific case value
NgSwitchDefault - used inside of NgSwitch to define a template that is rendered when none of the cases match the provided value
NgTemplateOutlet - render a template dynamically by specifying the template reference to be rendered

Let’s do the same for the pipes

AsyncPipe - subscribe to an Observable or Promise and render the emitted or resolved value in the template
CurrencyPipe - format a numeric value as currency according to a specified currency code and format
DATE_PIPE_DEFAULT_OPTIONS - constant that defines the default options for the DatePipe, such as the format and locale
DATE_PIPE_DEFAULT_TIMEZONE - constant that defines the default timezone for the DatePipe
DatePipe - format a date value according to a specified format and timezone
DatePipeConfig - interface that defines the configuration options for the DatePipe, such as the format and timezone
DecimalPipe - format a numeric value as a decimal according to a specified format
I18nPluralPipe - allows you to internationalize the pluralization of text based on a numeric value and a set of pluralization rules for different locales
I18nSelectPipe - allows you to internationalize text based on a given value and a set of translations for different locales
JsonPipe - transform a JavaScript object into a JSON string
KeyValue - iterate over the properties of an object and render a template for each key-value pair
KeyValuePipe - transform an object into an array of key-value pairs, which can be used with other pipes or directives
LowerCasePipe - transform a string into lowercase
PercentPipe - format a numeric value as a percentage according to a specified format
SlicePipe - slice an array or a string and return a portion of it based on a start and end index
TitleCasePipe - transform a string into title case, which means that the first letter of each word is capitalized
UpperCasePipe - transform a string into uppercase

Conclusion

The CommonModule is an essential module in Angular that provides us with powerful tools that allows us to save time and effort in implementing common functionality and improve the consistency and maintainability of the code.

You can further expand and increase the utility of the CommonModule by adding more features to it. Since it's just a module, you import and re-export it again with extended functionality.

The Angular team is providing us with directives and pipes that are very crucial for building scalable and maintainable applications.

Using forRoot() and forChild() in Angular

Dimitar Stoev — Sun, 19 Mar 2023 11:19:10 +0000

Introduction

Hey there, Angular enthusiasts and new learners! I want to dive a little bit today in some Angular patterns and methods that you probably have already seen.

I am going to talk about managing dependencies and configuration information.

A pattern for singleton services that allows us to have control over the providers through the application cycle and modules.

I am talking about forRoot and forChild.

Sit back, relax and let’s explore and dive a little bit into these powerful methods.

What is forRoot in Angular and why do we need it?

When we create a service with Angular version above 6, Angular creates an object in our @Injectable with a property provideIn: ‘root’

Of Course we are perfectly free to change the ‘root’ with any module we want. This means UserService won’t be available unless we import the Module we specify in the “provideIn”.

I can be more generic and say that forRoot is used to provide configuration data that's needed to initialize a module and its components. This configuration data can be anything from environment variables to API keys, and it's used to set up the application in a specific way.

The biggest use case most developers talk about is the static method forRoot in RouterModule. This is the method that configures the entire routing module for your application and Angular creates it globally.

The method itself returns ngModule with optional providers.

Some time ago I wrote an article about how I structure my Angular application. I will use that to give you examples on RouterModule forRoot and forChild methods.

You can read the article here or on my website:

https://www.stoev.dev/blog/how-i-structure-my-angular-applications

As you can see here in the imports I call this forRoot method and pass as arguments the routes I have defined earlier. This method is static and Angular is requiring some arguments.

static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>

When Angular is creating the application it is creating the routing system and it is available through the existence of the application.

Typically forRoot is used only once in an application and it’s always called in the root module.

Create your own forRoot()

It is by convention, but you can use any name you want. You are perfectly free to create your own forRoot method and put it in your module. After all, a module is a class.

Here it is an example on how to provide an instance of a core module and be sure that it is only called once!

As I said, this method could be called anything, but I am calling forRoot() because of a convention. It can take arguments as well.

For example I can pass initial configuration data to the module and therefore its components.

Let’s do just that.

What is forChild in Angular

forChild is very similar to forRoot.

Following the router example it is important to point out that this static method is loaded in the feature modules usually that are being loaded into the root module. It allows us to configure the feature modules without affecting the entire application.

Let’s point out that lazy modules create new instances of the services and providers when the module itself is loaded. This is because Angular uses another Injector to create the modules. A separate one.

In the case of the RoutingModule forChild() is not creating the routing service. It is a necessary method when we have multiple routing modules.

Let’s see an example. This is the lazy module we have implemented previously.

You can create a similar method for yourself in the class and when you can pass only the feature specific services and providers.

Differences between forRoot and forChild

Okay, let’s discuss and examine some of the differences. I am going to concentrate on the RouterModule here, since that is mostly used and it could be useful also for understanding how it works. Let’s point out first what the similarities are.

Declares the router information
Manages the routes

One difference is that forRoot is typically used for the entire application while forChild is used in feature modules.

Another key difference is that forRoot registers the router services, while forChild does not!

It could be said also that they have different scope, frequency of use and access to services and providers.

Conclusion

In conclusion, forRoot() and forChild() are powerful methods in Angular that are used to configure modules and their components. While both methods are similar in their purpose, they have key differences that make them unique and valuable in different contexts.

By using forRoot and forChild effectively, you can ensure that your Angular application is properly configured and ready to handle all of its requirements.

Dont’s miss a beat

I hope you found this post on forRoot and forChild in Angular helpful! If you want to stay up to date on the latest tips and tricks for Angular development, be sure to subscribe to my blog and follow me on social media.

How to grow your career as a web developer in 2023

Dimitar Stoev — Mon, 13 Mar 2023 14:02:36 +0000

Introduction

Are you a web developer looking to take your career to the next level? Whether you're just starting out or you've been in the field for a while, there are always new opportunities to learn and grow.
In today's rapidly evolving digital landscape, web development is a constantly evolving field. As technology continues to advance, there is an increasing demand for skilled developers who can create innovative and responsive websites and applications.

To stay competitive in this field, it's essential to keep up with the latest trends and technologies and continually refine your skills. In this article, we'll explore some practical strategies for growing your career as a web developer, from honing your technical skills to building a strong professional network.

Whether you're looking to advance in your current position, explore new job opportunities, or strike out on your own as a freelancer or entrepreneur, the tips and advice in this article can help you achieve your goals and succeed in the dynamic and exciting world of web development. So, let's get started with the Takeaways:

Avoid generic and overused advice. Instead, focus on actionable strategies that are specific to your goals and career aspirations
Soft skills are just as important as technical skills in web development. Communication, collaboration, and problem-solving are essential for success in this field
Don't rely on someone else to teach you everything. Take ownership of your own learning and seek out resources and opportunities to grow your skills and knowledge
Write for yourself or the community. Creating content can help you establish yourself as an expert in your field and build a strong online presence
Consider mentoring someone else as soon as possible. Not only does it help someone else learn and grow, but it can also help you develop leadership and communication skills
Overcome the impostor syndrome. Many web developers experience feelings of self-doubt and insecurity, but it's important to recognize your own strengths and accomplishments and embrace a growth mindset

Now let’s dive deeper and explain myself.

Avoid generic and overused advice

Are you tired of reading generic articles and blog posts that offer little new information? Why do I believe there are too many generic articles and blog posts? It seems like everyone is writing for the Google algorithm these days, resulting in repetitive advice that doesn't truly help you grow as a web developer. For example - create your own website, solve problems on websites like hackerrank and leetcode, work with people that are smarter than you and so on. You get the point. This is just the tip of the iceberg.

This is absolutely great and will definitely make you better. But to get on the next side of the river… well.. it’s not enough. It will make you above average and if you are just starting out - it will probably increase your chances by a factor of.. a lot.

But I have managed to obtain some information from people around me who are way above average and also have examined people in the field. I even have a number in percentage that I calculated from my own experience. I will share it later in the article.

I will also give you a few bad examples on why you need to push it further.

The Soft skills

Reliability, owning your words and problems and strong character. Read that again and let’s start explaining.

Software development is working with people for people. We stay in front of the machine and execute command after command but let’s not forget that we are mostly working as teams and clients. There are three main characteristics in my opinion that go beyond all others.

Reliability

People need to know that they can count on you. If you show yourself and stay to your word, you will grow not even in software.

In the Internet technology world, if people can rely on you it means you are going to grow as a leader. Growing as a leader means you will be part of bigger and more important decisions.

Managers will feel more comfortable with a less knowledgeable, but reliable person, thank someone who knows his domain, but has character problems.

Stay to your words! That lead us to:

Owning your words and problems

I get it. You want to be the best! I want to be the best too, but let’s face it - it’s not possible. We will make mistakes, even if we don’t like it.

Another great skill is to show you own your mistakes. If you step and fall, acknowledge that and ask for help. Or if someone points out an error you have made - don’t act in your defense. Learn and go on! Improve and adapt!

Strong character

What I mean by that - I mean that you have to be strong enough to acknowledge your mistakes and have the ability to ask for help. Overcome your ego and act as stoically as possible!

Arguments will come at a certain point. There is no way to go through life and not encounter different opinions on how to achieve something.

Learn to discuss and provide arguments. Learn to explain yourself and present the approach. Also learn to retrieve information. If the opposite idea is just better - use it.

leaders empower!

It's funny - the “aha” moment I had when I understood and found out about myself. I am not just a code monkey and just a junior is the moment I said with confidence - “I don’t know and I have no idea how to implement that” with confidence. Nobody knows everything.. and no one should try to.

The bad example from Real life

I had a colleague I worked with in the past that lacked the three of these characteristics. He changed so many projects around the company. Nobody wanted to work with him. He was a horrible guy and I really couldn’t understand why he wasn’t fired.

He thought he was a great dev, always acting as a “dev God”, but he wasn’t reliable, he didn’t own his mistakes and he absolutely didn’t act as a man.
He raged quit at least four projects, because someone wasn’t taking his arguments and acted as a spoiled child.
It doesn’t matter if you are smart enough. If you suck as a person, nobody will want to work with. What is the point in being great then..?

Don’t rely on someone to teach you

Because not many people will care enough to do so. You may find that person, but don’t expect it from a company.

I met a guy in the past that was trying to learn to code and started applying to companies as soon as possible. That’s great, but he had a major flow. He expected that he needs to know the bare minimum and they will teach him the rest.

I was like - “Dude.. what the ..?”

People hire to produce a product or a service and to make money in the end.

Programming is hard. Real hard. If their business is not around teaching people how to code, don’t expect someone to teach you anything.

People act as there are “self thought devs” and “not self thought devs”. I don’t understand that thinking. Every dev is self thought. You can have a mentor to guide you and help you, but nobody is going to teach you anything, if that is not in their job description.

I have had mentors in the past. Even then it’s not certain they will be good enough. My mentor didn’t really care enough..

Take as much as possible from the projects and the people that work in that project. Examine the code, learn why and how it’s all linked together. Ask specific questions on subjects you are not fully understanding.

Write for yourself or the community

We are getting to the interesting part. I started to learn and really understand what I do the moment I started to write everything down.

It’s easy to get the illusion you are learning only when you are watching some video tutorial or you are reading the documentation.

You forget almost everything about it.

Trust me with this one!

I have so many notebooks around me and have written so many docs for some topics I was learning.

I started writing everything for myself and 95% of the stuff I have written are private and not in “article format”. It’s just an explanation of what I am learning about.

But writing works. It clarifies your thoughts. It forces you to examine and dive deeper because at some point you encounter a problem you can’t really describe.

That forces you to go lower and deeper.

You will forget some stuff, but it will be easier to retrieve again and certainly you will remember a lot more than just browsing around.

Coding and writing! Best combo!

Bad example from my experience

I want to give two examples on why you can’t rely only on years and problems you encounter. I can give you actually a lot more, but you will get the point.

The first one is seven years of development. PHP developer who was working on numerous projects through the years, but never actually learned anything new. He believed that working alone is enough. The moment he tried to find a new job - he quickly learned that he was not the best candidate for a lot of the jobs. A lot of years, you may think, he will find a job the moment he wants. Well, the moment I am writing this article, it’s been a year and he is still in the same job. Still refusing to believe it’s his fault.

I have the years, they are wrong

The second example is kind of the same. Five years, but still the same picture. This guy thinks he is great, but is always asking someone for advice and can’t really act on his own. Even for the basic problems.

A man with three years less is helping and advising him.

Can you guess who is being promoted soon? The more “senior” one or the more “mid” dev?

Mentor someone

How can I mentor someone if I am not that great as well? Well… you will have to prepare the information beforehand, learn it and try to present it in a digestible format.

That’s connected to writing.

In order to teach someone, you have to know your stuff. In order to know it, you have to obtain every information possible. That means you will have to learn a lot!

You become better by teaching others.

Do you remember how we said that nobody is going to teach you anything? In my experience it’s true.

And the moment you become that person.. oh boy. You will be skyrocketing yourself to the Moon. The competition is almost non-existent here.

Believe me - it’s hard! People love to take the easy road.

DULCIUS EX ASPERIS

As the Romans were saying - it’s way Sweeter after difficulties.

Overcome the impostor syndrome

It's scary to start mentoring and teaching someone. I know, I know..

There are people out there that are way smarter than you and me. So much smarter.
But remember that we grow and learn all the time. And we live in a world that has a place for everyone. We can do better. We can be better.

Even if there are haters, that doesn’t mean we are not helping someone who is just starting out.

Never be embarrassed of not knowing something. There are always going to be gatekeepers and there are always going to be haters, but nothing’s gonna matter in 150 years, right?

So why should that stop us from expressing ourselves and learning and teaching?

Conclusion

I promised you a number. In my own experience and the collective information of the people around me I came up with a number. It’s not an official research, but a simple gathering of information that showed me that of almost 200 people, only 3 did what I am describing ( I am not including myself here ). - It means only 1.5% of the people actually do this and let me tell you this.

These people may not be the best programmers in the world ( although I can say they are way above average ), but also take leading roles, people respect them and have a great career.
It may be luck or a coincidence, but people feel them as authorities.

To sum it up - being in the top is way harder and growing there requires skills that exceed our comfort zone.
To start writing blogs, teaching, leading conferences and so on is not something people imagine when it comes to coding.
Having great debugging skills and writing tests is awesome, but unfortunately not enough.

it really depends where you see yourself in five years. Everything takes time and it’s damn hard.

I wish you luck!

How I Set Up Husky Pre-Commits in Angular Projects in Just 3 Simple Steps in 2023

Dimitar Stoev — Tue, 07 Mar 2023 07:12:41 +0000

Are you tired of finding code issues after they've made their way into your project? It's like finding a sock in the laundry after you've already put it in the dryer. You wish you could catch problems before committing your code, right? Well, you're in luck! In this article, I'll show you how to set up Husky pre-commits for your Angular projects, allowing you to catch issues before they become a bigger problem.

Before we dive in, let's talk about why you need Husky. Most developers don't think about code quality until it's too late, but I believe in taking a proactive approach to code quality. By setting up Husky pre-commits, you can catch issues before they make their way into your codebase, saving you time and hassle down the line.

Great! Now that we have set up Husky, let's take it a step further and integrate Commitzen. With Commitzen, we can ensure that our commit messages are consistent, descriptive, and follow a standard format. This makes it easier for other developers to understand the changes that have been made to the codebase.

Integrating Commitzen with Husky is a simple process that can make a big difference in your development workflow. Let's get started!

Step 1: Setting Up Commitizen

As mentioned earlier, Commitizen is a tool that helps you write standardized commit messages using the conventional commits specification.

To get started, we need to install Commitizen as dev dependencies. In your terminal, run the following command:

npm install commitizen --save-dev

Once installed, we need to add a new script to our package.json file

"scripts": {
   "commit": "cz"
}

When you make a commit, you'll be prompted to fill out some information about your commit, such as the type of change, a short description, and a longer description. The prompts are designed to guide you in writing a well-formatted commit message that follows the conventional commits specification.

Once you've filled out the prompts, your commit message will be automatically formatted based on the conventional commits specification. You can check this by running the git log command. I absolutely LOVE that!

Step 2: Setting Up Husky Pre-Commits

Ensures Code Quality Before Committing!

By setting up Husky pre-commits for your Angular projects, you can catch issues before they make their way into your codebase. This ensures that your code is of high quality before committing it to your repository.

npm install husky --save-dev

npx husky install

We will install husky after node module installation with:

"scripts": {
   "postinstall": "husky install"
}

Step 3: Setting Up Tests with Husky

In order to run tests, we need to set up a script that can be executed with a single command. In this case, we'll be using the "test:headless" script. This script is used to run tests in a headless browser environment, which means that there is no graphical interface for the browser. This makes it faster and more efficient to run tests.

This command will run tests using the Angular CLI's built-in testing framework. We've added the "--watch=false" flag to ensure that the tests only run once, rather than in watch mode, which would keep the tests running continuously.

"scripts": {
   "test:headless": "ng test --watch=false --browsers=ChromeHeadless"
}

To add the pre-commit hook, we'll use the "npx husky add" command. Here's an example:

npx husky add .husky/pre-commit "npm run test:headless"

Finally: Test your setup

With Husky pre-commit and linting set up, you can now test your setup to ensure it's working as expected. To do this, make a change to one of your .ts files and attempt to commit your changes.

Advice

Take Control of Your Code Quality!

By following these three simple steps, you can set up Husky pre-commits for your Angular projects and start catching issues before they make their way into your codebase. Don't wait until it's too late to start taking proactive measures for code quality. With Husky pre-commits, you can catch issues early, enforce code quality standards, and streamline your development process.

How I structure my Angular applications

Dimitar Stoev — Mon, 27 Feb 2023 10:39:02 +0000

Introduction

Hey there! I am your friendly neighborhood Angular developer. The one who's always tinkering with code, trying to make things faster, better, and more efficient. I've been around the block a few times when it comes to structuring Angular applications, and I'm here to share what I've learned with you.

Now, I don't want to brag, but I've seen my fair share of poorly-structured Angular apps. You know the ones I'm talking about - they're slow, buggy, and downright painful to work with. But fear not! With the tips and tricks I'm about to share, you'll be able to structure your Angular applications like a pro.

So, why is structure so important? Well, think about it this way - would you rather have a cluttered, disorganized mess of code to work with, or a streamlined, easy-to-navigate application that just makes sense? I know which one I'd choose (hint: it's not the mess).

By structuring your Angular application properly, you'll be able to improve its maintainability, make it easier to debug, and even give it a performance boost. Plus, you'll impress all your developer friends with your well-organized code (and who doesn't love a little bit of developer street cred?).

So, without further ado, let's dive in and talk about how to structure your Angular application like a pro.

The importance of structure in Angular applications

Let's talk about the elephant in the room - structure. I know, I know, it's not the most exciting topic in the world. But trust me, when it comes to Angular applications, structure is the backbone that keeps everything running smoothly.

Picture this: you're working on an Angular app that's so disorganized, you can't even find the files you need without a search party. You're sifting through endless lines of code, trying to figure out where everything goes and how it all fits together. Sounds like a nightmare? It is.

But here's the thing - it doesn't have to be that way. With a well-structured Angular application, you'll be able to navigate your code like a pro, making changes quickly and easily. Plus, when you inevitably have to come back to the code months or even years down the line, you'll be thanking yourself for setting up that solid structure in the first place.

Not convinced yet? Well, let me break it down for you. Here are just a few of the benefits of a good structure in your Angular application:

Maintainability: With a well-organized codebase, you'll be able to make updates and changes more quickly, with less chance of breaking anything in the process
Performance: By organizing your code properly, you can optimize the performance of your Angular app, making it run faster and more efficiently
Debugging: When something inevitably goes wrong (and trust me, it will), a good structure will make it much easier to track down the problem and fix it

Don't underestimate the power of a good structure in your Angular application. It may not be the most exciting topic, but it's one that can save you countless hours of frustration and headaches in the long run. Trust me, your future self will thank you for it.

Modular Structure

When it comes to structuring your Angular application, one of the most important things to consider is modularity. By breaking your app into smaller, more manageable modules, you'll be able to keep your code organized and maintainable. Plus, it makes it easier to reuse code and collaborate with other developers.

Here's my suggested modular structure for an Angular app:

The core module contains services and other code that is used throughout the entire application. This includes things like authentication, logging, and other core functionality. By separating this code into its own module, we can ensure that it's available to all other parts of the app.

The shared module contains components, directives, pipes, models, and other code that is shared between multiple feature modules. This includes things like navigation bars, footer sections, and other UI elements that appear on multiple pages. By separating this code into its own module, we can ensure that it's easy to reuse and maintain.

The constant-data folder is a good place to store data that remains constant throughout the application. For example, you might have an array of options that is used in multiple places within the app. Instead of duplicating this array in each component or service that uses it, you can define it once in a file within the constant-data folder and then import it wherever it's needed. This not only reduces duplication of code but also makes it easier to maintain the data if it needs to be updated or changed. It's a good practice to keep your code DRY (Don't Repeat Yourself) and the constant-data folder is one way to achieve that.

In the "feature" module, we have a folder called "components" that we use to store what we call "dumb components". These are components that don't have any business logic or state management of their own, but are purely responsible for rendering data that they receive from a parent component.

For example, let's say we have a "feature" component that needs to display a list of items. We would create a child component called "item-list" and place it in the "components" folder. The "item-list" component would take an input from the parent "feature" component that contains the list of items to display, and simply render them in the template.

By keeping these "dumb components" separate from the "smart components" that have business logic and state management, we can create a clearer separation of concerns and make our code easier to maintain and debug. Plus, by giving each component a clear and specific responsibility, we can make our code more reusable and flexible.

Feature-specific services are services that are used within a specific feature of your application. These services provide functionality that is unique to the feature and are not shared with other parts of the application. By separating feature-specific services into their own folders, you can keep the code for each feature organized and easier to maintain. It also helps to reduce the potential for naming conflicts, as the services are contained within their own folder and are less likely to collide with other services.

Feature-specific services can include data services, which are responsible for retrieving and manipulating data related to the feature, as well as other services that provide specific functionality related to the feature. Using feature-specific services can make your code more modular, easier to understand and maintain, and can help reduce the overall complexity of your application.

Routing and Lazy Loading in Modular Structure

When it comes to organizing your Angular application, modular structure is a great way to keep things organized and maintainable. But there are some additional techniques you can use to make your app even more efficient, such as routing and lazy loading.

Creating and Organizing Routes in Modular Structure

Routing is essentially the process of navigating between different pages or views within your Angular app. And when you're using a modular structure, it makes sense to keep each feature module's routes separate from the rest of the app.

To do this, you can create a separate routing module for each feature module. In that routing module, you can define the routes specific to that feature, so you don't have to worry about all the routes for the entire app being in one giant file.

One of the key benefits of this approach is that it keeps things much more organized and maintainable. You don't have to scroll through a huge file just to find the routes for a specific feature.

Benefits of Lazy Loading and How to Implement it in a Modular Structure

Lazy loading is another technique that can be incredibly useful, especially for larger Angular applications. Essentially, it allows you to load only the parts of your app that are actually needed at runtime, rather than loading everything up front.

So how do you implement lazy loading in a modular structure? Well, it's actually pretty straightforward. You can use the loadChildren property of the Routes object to specify a feature module to load lazily.

In other words, when a user tries to navigate to a particular feature, that feature's module will be loaded only when it's actually needed. This can dramatically improve the performance of your app, especially for users who might not need to use all of its features.

Overall, combining modular structure with routing and lazy loading is a powerful way to create an efficient and maintainable Angular application. So if you're not already using these techniques, it's definitely worth giving them a try!

Conclusion

Well, that's it for my tips on organizing your Angular application using modular structure. I hope you found this blog post helpful, and that you can use these ideas to create more efficient and maintainable apps.

Remember, good organization is crucial for any software project, and Angular is no exception. By breaking your app down into modules, organizing your routes, and using lazy loading, you can create an app that's much easier to work with in the long run.

If you have any questions or comments about this post, please don't hesitate to get in touch! You can find me on Twitter at @Dimitar__Stoev, or you can reach out to me through my contact page.

Thanks for reading, and happy coding!

What is Blockchain

Dimitar Stoev — Fri, 17 Feb 2023 14:27:45 +0000

Introduction

There is a lot of information when it comes to cryptocurrencies, but blockchain in general is a little bit behind. The buzz around money is always topping the news and the media.

Blockchain itself is a complex technology that could be described in an easy way. It is a special kind of computer code that helps keep things safe and fair. We can describe it as a big book or a spreadsheet that can store important information.

It is important to point out that writing to that spreadsheet is permissioned to a specific group, but could be “unlocked” and public. In that way everybody can see the blocks.

The block is the building material in the blockchain. Once the block is filled with information, it’s stored after the previous block in the chain and gives the iconic name of the technology.

Block size

I mentioned the size of the block and now will explain it a little bit further. Different blockchains have different block size limits. The larger the block size limit, the larger is the transaction per second rate. The smaller one is faster, but requires more blocks to make transactions.

Efficiency is one of the most important topics for blockchain and the size of the blocks are important for that.

The Bitcoin block size limit is 1 MB, introduced in 2010.

Types of blockchain

There are a few types of blockchain. Every one of them has specific use cases and users.

Public blockchain

Public blockchains are open in their nature and anybody can use, participate in it. One of the most known are Bitcoin and Ethereum.

Private blockchain

Private blockchains are permissioned. Only a specific group of people that are granted access can participate in it.

Large organizations typically use it for specific internal cases. One example is supply chain management.

Consortium blockchain

A consortium blockchain is a hybrid of public and private blockchains. It is controlled by a group of organizations.

It is often used in finance. Companies can transfer and share data.

How does it work?

The transaction cycle is easy to visual

A person requests a transaction. This is the initialization. It is typically done from a wallet
The transaction is broadcasted to all participant computers in the specific blockchain, called nodes
Nodes validate the transaction. This means it is checked if it violates the rules that are set by the blockchain network. For validating, validators receive a reward. Typically a currency
The transaction is stored and hashed in the block
The block becomes part of the blockchain and cannot be altered in any way
The transaction is complete

Decentralization

This is important for me. The idea of blockchain is to be decentralized. The way it works is that the technology allows the data to be held and spread across many different nodes at various locations.

If somebody tries to change the data, other nodes won’t validate the alternation.

Not a single node can hold the control of the network. No government, no big corporations and no single entity. Public blockchains like Bitcoin are important for freedom and establish an exact and transparent order of events. That leads us to..

Transparency

Everything is perfectly visible in the blockchain. We can check and see every single bitcoin there is and every transaction that has happened.

The data is encrypted and only the holder of the key can decrypt it.

These blocks are immutable and the records are the perfect audit history that allows visibility into past versions of the blockchain.

Privacy

When a user makes a transaction, their unique key, a public key, is recorded in the blockchain. The personal information behind that is hidden and unknown. The only way to decrypt it is by social hacking. The real identity is not of a concern to the blockchain.

The way it works is with public and private keys. A cryptographic key. A string of data that identifies a user and gives access to their wallet. ( the account that stores the information ).

The public key is stored in the blockchain, while the private one works as a digital signature that unlocks the data.

Since there is not a central government or entity that controls the data, the responsibility of storing the private key is to the user. If lost, the access is lost.

Security

Blockchain is secure, but it’s not bulletproof.

If someone tries to update and alter some information, the cross reference of the nodes will point it out immediately. To succeed, the hacker has to have control of over 50% of the nodes.

This is called the “51% attack” and in theory it is perfectly possible and there are cases for such an attack.

But on some blockchains it will require an incredible amount of power and technology, equaling a lot of money, that makes it in a sense impossible.

Future of blockchain

The technology itself has been there since the 90s, even earlier, but it still hasn't been adopted to the extent to be a perfect replacement for a lot of ideas and technologies.

Blockchain has a scaling problem that has to be addressed soon. We have tens of billion devices right now and full adoption is not way near.

I still believe in technology and I know it is going to be part of the future. Maybe not as a payment replacement, but as a store of value.

Digital gold is a perfect term to explain it.

Until we address the scaling problem and the transaction amount per second. Until we build the architecture to have decentralized payments, we are not going to use it in our everyday lives.