DEV Community: ~AlleAmiDev~

Display Colorful Tweets in Your Angular App

~AlleAmiDev~ — Wed, 18 Mar 2020 16:06:56 +0000

A simple library to color #hashtags and @mentions in your posts

It’s very common for front-end developers to work on social feed functionalities.
In many cases, it is possible to use embedded code or widgets to display recent tweets or posts, but sometimes clients might require a custom interface. That’s what happened to me this week.

The Problem

I had to work on an animated Twitter feed and I was requested to assign a specific color to hashtags and mentions in the text.
However, as the whole tweet comes from the API as a string, I had to come up with a functional way of processing the text to extract words starting with # and @ and give them a different color from the rest of the text.
So, I created a small library!

Introducing Hashtag-Mention-Colorizer

Hashtag-Mention-Colorizer is a small library that exposes an Angular pipe. You can use it to find hashtags and mentions in your strings and color them by passing the color code as a parameter for the pipe.
You can install it with the command:

npm i hashtag-mention-colorizer

And then include it in your preferred module:

import { HashtagMentionColLibModule } from 'dist/hashtag-mention-col-lib';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HashtagMentionColLibModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now the hmcolor pipe will be ready to use in the app templates.

A Quick Example

So, let’s say we want to find all the hashtags and mentions in this text:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  text1 = 'Hello! @AlessiaAmitrano here! Check out my amazing new #angular #library ! ';
  text2 = '#frontend @devLifeUk #developer ';
}

We can use the pipe to achieve this!

If we don’t pass a specific color to it, it will apply a standard light blue color to all the hashtags and mentions in the text. We can try it out by using this template:

<div class="container">
  <article class="card">
    <div class="header">
      <img src="assets/me.png" alt="" />
      <div class="header-text">
        <span class="name">~AlleAmiDev~</span>
        <span class="nickname">@AlessiaAmitrano</span>
      </div>
    </div>
    <span [innerHTML]="text1 | hmColor"></span>
    <span [innerHTML]="text2 | hmColor: '#18BE63'"></span>
  </article>
</div>

As you can see, for text1, I use the pipe without declaring a custom color. On the contrary, with text2, I specify I want to apply the color ‘#18BE63’.
Attention: The pipe only works by passing the processed string to an HTML element through the [innerHtml] property.
The result will be the one in the cover image!

Et voilà! You can check out the complete code in the library’s GitHub repo.

Originally published on Medium.

How to Display Colorful Tweets in Your Angular App | by Alessia Amitrano | Better Programming

Alessia Amitrano ・ Mar 17, 2020 ・
Medium

How I Got Rid of State Observables in Angular

~AlleAmiDev~ — Tue, 25 Feb 2020 17:43:29 +0000

When developing a complex SPA in Angular, using a state management library makes things so much easier.

The app store acts as a single source of truth and contains all the data that is fundamental to the correct functioning of the app. Thanks to the store, I can access or edit this data from any smart component (or container).

However, it can be frustrating to deal with all the subscriptions to the store; many times I have to deal with multiple @Select() in a single component, each of which returns an Observable of its correspondent property in the app store.

And for each of these Observables, I need to create a subscription that will be destroyed at the end of the component lifecycle…that’s a lot of code!

But what if we could get rid of all the Observables?

In the simplest cases, we can avoid explicit subscriptions using the async pipe, which will subscribe to the Observable and read the last value emitted for us.

Suppose that we have a @Select() decorator like this:

@Select(ListState.SelectAllItems) listItems: Observable<string[]>;

We can use it immediately with the async pipe in our HTML:

<ul>
 <li *ngFor="let item of listItems | async">
   {{item}}
 </li>
</ul>

On the other hand, many cases require us to subscribe to the Observables in our components so that we can use the values they emit in other methods.

(To learn about how to set up a store and see the above examples in a project, you can read my article How to Create a Simple Store in Angular.)

Introducing @ngxs-labs/select-snapshot

@ngxs-labs/select-snapshot is an experimental feature for NGXS developed by NGXS Labs.

Even though it’s still not part of the official NGXS package, it is likely to become an official feature shortly. The package allows us to replace the @Select() decorator with @SelectSnapshot().

But what’s the difference between them?

While the former returns an Observable we need to subscribe to, the latter subscribes to the store for us and returns the last value emitted! To see it in action, let’s install the package:

npm install @ngxs-labs/select-snapshot

And then, let’s include it in our appModule:

@NgModule({
declarations: [
AppComponent,
ListContainerComponent,
ListItemInputComponent,
ListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
NgxsModule.forRoot([ListState]),
NgxsReduxDevtoolsPluginModule.forRoot(),
NgxsSelectSnapshotModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Now we can replace the @Select() decorator:

//@Select(ListState.SelectAllItems) listItems: Observable<string[]>;
@SelectSnapshot(ListState.SelectAllItems) listItems: string[];

And use the value emitted from the store without subscribing!

<ul>
 <li *ngFor="let item of listItems">
   {{item}}
 </li>
</ul>

Enjoy!

(This article has been originally published on Medium.)

What Nobody Told You About Being a Great Developer

~AlleAmiDev~ — Mon, 24 Feb 2020 20:51:12 +0000

All the roles I’ve had in these past years as a web developer have taught me something. I have met developers of many different kinds, strong and weak personalities, desirable and undesirable colleagues.

All of them had something to teach me about our job, whether good or bad, and I still learn new things every day.

However, two personalities left a big trace in my professional growth: the worst and the best developer I’ve ever worked with. Both of them were in a higher position than I was in two of my past roles, but not all of them gained my respect.

I will briefly describe them for educational purposes, assigning them camel case nicknames:

BestDev

Self-taught full-stack web developer of a small creative company, lead of multiple projects and mentor to many other developers.

They read new things every day because they know they must never stop learning and perfecting their skills. They are not at the peak of their career but everybody respects them for two reasons:

They explain the reasons for their choices to producers and other developers and they accept criticism.
They will always make sure other developers in the office can intervene on a project in the case they are not available.

WorstDev

Middle-aged IT manager of a small company. They think they have reached the peak of their career for two simple reasons:

Nobody around them has any sort of dev knowledge, so nothing they say is ever questioned.
They have created legacy code that is so intricate, They’re the only one who can understand it, which make them fundamental for the survival of the company.

Obviously, I left WorstDev’s company after 6 months, as I tried to improve the tech stack and the communication in the company but hit a wall. After months of struggle on my side, it became clear that the company could not and had no intention to challenge WorstDev’s supremacy.

Sometimes it’s easier to pretend all is fine.

I left Italy and accepted a position in London, where I started to work as a junior front-end under the lead of BestDev. I was provided with the best tools to work, flexible hours, and a steep learning curve.

It hasn’t been easy but BestDev has pushed me to be always better, including me in scoping sessions, showing me how to do things if they were not around. I worked with them for almost two years before taking the risk and looking for new opportunities to prove to myself I could make it.

Now that I work in another company and I’ve gained more expertise, I have created my “Mantra of the Good Developer” to apply every day, which can be summarised in three career-changing points.

Career-Changing Points

1. Make yourself replaceable

You will say: “What? I don’t want to be replaceable! I don’t want to lose my job!”

Yes, I know, and that’s exactly why it’s so important. Would a good company ever fire a lead developer that instructed their teammates about how to handle emergencies? No.

Would it fire a developer that takes care of training their junior colleagues? No. Why?

Because the company can rely on them.

I’ve been in the position of not being able to fix a critical bug because WorstDev was out of office and nobody knew how their code worked, the credentials to access the website’s database, and so on.

They had created a bottleneck, a situation in which every important change had to be made by them and them alone and all the production would stop if by any chance they weren’t in.

When I worked with BestDev, they made sure I knew how to tackle emergencies. They shared their knowledge with me, educating me about how to make the right choices, thus increasing my professional value for the company.

Any employer of sound mind would recognize the key role of such a personality.

2. Help everybody but keep some things to yourself

Helping other developers is the best way to learn. It’s important for you to test your knowledge and consolidate it.
But it is also essential to establish a relationship with your colleagues and gain their respect. You want to be considered as someone who would help if things get nasty and a good mentor for those who have less experience.

That is what BestDev was for me. Whatever question I had, they had an answer for it plus useful resources to allow me to dive deeper.
WorstDev? Never gave me tasks that went beyond my expertise. Never shared knowledge with me.

Nevertheless, helping as much as you can doesn’t mean sharing all of your knowledge.

There are some cases where it’s better to keep very advanced practices to yourself, so that you’ll be able to surprise the higher ranks with your expertise. In other words:

Never let them take you for granted.

I try to read technical articles every day because I want to always know more to show that I’m a professional who’s growing constantly. It’s easy to be a mediocre developer, but it’s difficult to be a good one.

You’ll never get if you never ask

When I got my first job in London, I was so grateful for the opportunity I got that I would have never asked for more. That’s why I didn’t even dream of asking for a good laptop.

In my previous role, worstDev had taken the new laptop that was meant to be my work one and gave me their old one. I had basically acknowledged that in order to gain experience, I had to be treated like I wasn’t worthy of respect.

Until a now good friend, who was my superior when I moved to the UK, told me that I’d never get anything without asking. To that, I replied that I had nothing to prove that I deserved it. I wasn’t an exceptional developer, I just worked hard every day to grow.

He told me something I’ll never forget, something that I will say to you now.

“It’s your right to ask. You show you deserve it with your everyday work and also, if you sell yourself cheap, you will be treated as such.”

Obviously, this doesn’t mean asking for absurd raises or crazy expensive laptops. But it’s important to show that you know your value and what is necessary for you to do a good job.
In some cases, your requests won’t be fulfilled but hey, you’ve got nothing to lose!

An employer that offers you a low wage or bad working tools is an employer who is not showing respect for your skills and by accepting a similar treatment you show lack of self-respect.

I asked for a new laptop and received it in a couple of weeks. I kept doing my best to pay the company back for the trust they had in me and learned that I have to respect myself and ask for respect.

Conclusion

I hope I was able to show you the importance of these three concepts I try to apply every day.

Ever since I started to apply them, I’ve never stopped learning and feeling more and more confident in my capabilities. I hope my experience will help you too in making the best of your skills!

A New Way of Dispatching Actions With Ngxs for Angular

~AlleAmiDev~ — Mon, 24 Feb 2020 18:12:12 +0000

Another fundamental priority in development is trying to limit the use of boilerplates to the minimum. In general, it’d be good practice to keep the code as simple as possible and to avoid verbosity to keep technical debt under control.

For me, there’s nothing more frustrating than a file with hundreds of lines of code, and that’s why I’m always looking for ways to write in a cleaner and clearer way. In this piece, I’ll show you a better way to dispatch actions to an Angular NgXs Store.

The problem

Writing boilerplate code for our state management can be a long process. If we’re working on a complex app with a wide range of operations handled by the Store, we might need tens of different @Select() functions (as well as Action declarations).
When it comes to dispatching actions from our components, we can easily find situations like this below, where we’re dispatching multiple updates to the Store to perform a series of different actions before routing to the success page:

The Solution: Introducing the Dispatch Decorator

@ngxs-labs/dispatch-decorator is another interesting experimental feature for NGXS developed by NGXS Labs.

Even though it’s still not part of the official NGXS package, it’s likely to become an official feature shortly. The package allows us to use the @Dispatch decorator without injecting the Store in the constructor of our component. Moreover, it helps us writing code that is much more compact.

We can install it using the script:
npm i @ngxs-labs/dispatch-decorator

And we can include it in our app.module.ts:

import { NgModule } from '@angular/core'; import { NgxsModule } from '@ngxs/store'; import { NgxsDispatchPluginModule } from '@ngxs-labs/dispatch-decorator'; @NgModule({ imports: [ NgxsModule.forRoot(CartState, ProductState), NgxsDispatchPluginModule.forRoot() ] }) export class AppModule {}

Now, we’re ready to replace our calls to the Store with the @Dispatch decorator:

import { Dispatch } from '@ngxs-labs/dispatch-decorator'; export class PurchasePageComponent { @Input() defaultState: any; constructor() {} showSuccessPage(): void { this.resetAllStates(); this.goToPage(['success']); } @Dispatch() resetAllStates = () =>[ new ResetAnimationState(this.defaultState), new ResetPurchaseState(), new HideHeader(), new ResetAnswers(), new ResetCartState(), new ResetCarouselState(), new ResetUserState() ]; @Dispatch goToPage = (route: any) => new RouterGo({path: route}); }

Much better. Enjoy!