Welcome!

I've gathered some tips and tricks regarding front-end development during the creation of many projects and i've put them all here in case somebody will benefit fom them. This article contains general web-dev tips, Angular 2+ snippets but not ES6ish javascript (since the internet is covered with these articles).

General Frontend tips

Controlling opacity

On your css when you apply colors to different elements with Hex values (e.g. #FFFFFF), you can add 2 more aditional characters in the end, to specify the opacity of the color.

Here's an example

.foo {
    color: #FFFFFF50
}

In this example, the foo div gets a white color with 50% opacity.

Quick and dirty margins or spacings

Instead of putting space between elements with margin like below.

<div>
    <p style="margin-left: 10px;">foo</p>
</div>

You can give space between elements's textNodes with the   keyword like this

<div>
    <p>&nbsp;&nbsp;foo</p>
</div>

CAREFUL 👉   can be only applied to textNodes of elements and not actual elements, textNodes are considered the non HTML children of the corresponding element.

Copying large objects from Google Chrome Devtools 🕸

When you console.log an object and want to copy it to the clipboard do these steps.

1. Right click on the object 👉 save as temporary variable
2. Run this command on the console: copy(temp1)

Angular tips

Prettier ngClass

Some people use this type of ngClass 👇

<div [ngClass]="active ? 'activated' : '' "></div>

You can do this instead

<div [ngClass]="{'activated': active}"></div>

Why?

• Why not?
• You can have multiple comparisons
• You get rid of ternary operators

First change on ngOnChanges

When using ngOnChanges, you should know that there is a firstChange property (https://angular.io/api/core/SimpleChange) that tells you whether the change was before or after ngOnInit. This results in less logic on the constructor and more logic on ngOnInit which is a recomended way to develop applications in Angular.

Conclusion

I'm planning to make this list bigger and bigger over time, so any suggestion or tip would be appreciated and posted along with the corresponding credit to the author. Feel free to leave a comment if this helped you or you liked it!