DEV Community: Alaa Courdova

[Boost]

Alaa Courdova — Thu, 05 Dec 2024 16:04:09 +0000

Join us for the next Frontend Challenge: December Edition!

dev.to staff for The DEV Team ・ Dec 4

#devchallenge #frontendchallenge #javascript #css

easy way to memorize Shorthand Property for padding and margin

Alaa Courdova — Sun, 05 Mar 2023 13:35:42 +0000

you want to write the shorthand for the padding property but you can't memorize it ?

I created a gif with hand gesture I use it each time to know the right order of the property

as you can see move your hand clockwise top right bottom left and that is the right order for the shorthand

hope it helps

Using Styles and StyleUrls Component Properties in Angular

Alaa Courdova — Sun, 29 Jan 2023 16:35:49 +0000

Problem
repeating a style is common while coding , for example: - container , font-style buttons ..etc.

As angular component is separated (CSS and HTML) , We face a repetitive code and if we need to change a style we needs to change many time for minor change -maybe-

✨Solution

styleUrls: ['./component1.scss',
'../component2.scss']

@Component({
  selector: 'component',
  templateUrl: './component.html',

  styleUrls: ['./component1.scss',
    '../component2.scss']
})

export class Component implements OnInit {
  ngOnInit(): void {
  }
}

so if the style we need is existing in a different component we can add the path of CSS , better than copying the style code

what to do when you can't typedef 'any' .. ?

Alaa Courdova — Mon, 21 Nov 2022 10:18:41 +0000

It's best practices to not let your code with no type :

let address;
let name;

this code above doesn't say much about how the address will be presented !

will it be one line:-

"address": "22 Rue du Grenier Saint-Lazare\n75003 Paris\nFrance"

series of structured attributes :

{
  "address": {
    "street": "22 Rue du Grenier Saint-Lazare",
    "postalCode": "75003",
    "city": "Paris",
    "countryCode": "FRA",
    "country": "France",
    "text": "22 Rue du Grenier Saint-Lazare\n75003 Paris\nFrance"
  }
}

that's why it is important to add type to your code , but on other hand 'any' is a type too ??

is it ok ?

No!.. as 'any' type on typescript is not doing us any favor it also doesn't provide much knowledge about the structure that we sending to a function ... unit test ... API call .. etc.

so to prevent this happening, I add a tslint rule on the project file tslint.json:
"no-any": [true, {"ignore-rest-args": true}],

this rule alarm developer to 'any' type used it is very cool ..

Note
If "ignore-rest-args": true is provided rest arguments will be ignored.
this rule will effect the all file , so if you touched an old file while adding this lint rule you need to add types to all variables with 'any' type

Passes

let foo: object;

Fails

let foo: any;

for more details :

palantir.github.io

I came cross challenging situations when a function takes an attribute , but due to 'any' type or no-type at all the attribute was once string the other call number !! it is confusing

so what to do Now !!

I found that we can use 'union type' it is like you can add both types to a single variable

value: string | number;

that's do the trick ! and you can add as much type as you want using '|' pipe sign.

I am not sure if it is a good practice , but don't over use it :D

Hope it was useful.