DEV Community: Abddelrahman Saad

Accessibility in Front-end

Abddelrahman Saad — Wed, 31 Aug 2022 18:18:20 +0000

One of the skills that people are not interested in, and I personally did not give it the utmost importance.

I was talking to one of my colleagues at the office and I asked him from his point of view, what are the skills that distinguish one person from the other?

In the midst of a lot of talks, he said the Accessibility, at the time, frankly, I was not interested in it

Let me explain, the Accessibility in Front-end is how I can control the components through any external device, such as the mouse, the keyboard, or maybe a tablet pin or headphones.

and guess what maybe from voice recognition

Ask yourself how to make the components easily accessible for any user, from any device the user can use, and how to make it easier for him to use it.

For example, if he eats and wants to move through the keyboard, how to understand which part he wants to go to it first?

How do I make this part accessible through the keyboard; because there are tags, the attribute tabindex must be entered, also sometimes it is necessary to put a keypress event for example.

Suppose he is blind!! Shouldn't we make him able to use the site?

maybe we can add voice recognition to grasp what he wants.

there are a lot of examples but I'll leave it to your imagination ;)

these details distinguish one developer from another, however, it adds fun to the work.

Have a productive day ❤️

How to use GitHub as a team member.

Abddelrahman Saad — Tue, 14 Sep 2021 15:20:39 +0000

One of the most essential tool you will definitely work with as a developer is GitHub.

Because there's so much interesting stuff GitHub provides to us,
today I'll explain to you how it looks like to working with a team on a project on GitHub, I'll tell you what you can do because i was in your shoes before and struggled to understand what should i do exactly.

I assume that you know what is Git and GitHub because today i won't explain them, I'll be more focused on how to use it with your team.

Great, let get the ball rolling.

By and large you probably have a tasks you have to implement,
so the first thing you need to do is creating a new branch for the task with convenient name.
most of the time it will be the type of improvement you will do in this branch (i.e. Fix, Feat, Bug,) followed by the name of the feature you going to develop.

Suppose that you have a new feature to implement is about building user login functionality so we can name the branch to be something like that:

Feat/login

"Feat" is a shortcut for Feature and followed by the name of the feature, you should be descriptive and following the best practice.

let's go to the next step.

After creating the branch locally and on GitHub then you need to checkout to the branch ( switch to the new branch ), with this command " git checkout Feat/login ".
have you switched?

No! don't panic this usually happens, sometimes the branch does not appear but you can write this command "git fetch" to force git look for changes then write this command "git branch -a" to see if appeared in branches list.

Now checkout again you will be switched.

After that you have to pull in the original code from the master branch to the new branch and that's because if there's another team member who pushed a new improvement to the master you can get it to avoid conflict. if you didn't do that you will be prone to conflicts and bugs, i warned you.

This is awesome, now you are totally ready to start coding.

Have you finished your task? Really? I'm surprised at how active you are.

Now it's the time to push our code to our "Feat/Login" branch.

Write the " add . " command and after that, you have to commit the changes.
But pay attention to your commit messages, choose the right words that describe what changed with this commit especially if you make many commit "Micro-commits",

to let your team leader or anyone who is looking at your code knows what you changed.

Micro-Commits is one of the strategies you could use to give thorough steps about changes, such as " Form Created ", " CSS Applied ", and so on.

Wait a second don't push it yet, please pull the code again from the master "git pull origin master", you don't know if there's anything changed while you were implementing your login feature, right? especially if the task took a lot of time and your team is big.

Have you pulled the code? now you're ready to push your code to the new branch you created " git push origin Feat/login "

Finlay, select the new branch on GitHub then you will find a message telling you if you want to make a new pull request

Click on it and you will be redirected to the second page to check if you have a conflict.

Pull request simply you're saying to your colleague that you have changed the code and you want them to review and merge it with the master

That's it, not hard but effective.

Now your feature is created and ready to be tested by the testers. after they approve it they will merge it with the master to go live.

congrats buddy you really did a great job and deserve a holiday.

6 Useful Methods For Javascript Objects ✨

Abddelrahman Saad — Thu, 03 Dec 2020 23:35:59 +0000

Hello guys, today we're going to explore the most used object methods with javascript.

let's div deep directly.

1-Object.values()

return array of the object's values

assume we've got this object and we need to get the values only.

  const car = {name:'Audi', model:'a4', year:2020}
  const values = Object.values(car)
  console.log(values)
  //output ['Audi', 'a4', 2020]

2-Object.keys()

it's the opposite of the first function it return array of the object's Keys(names)

  const car = {name:'Audi', model:'a4', year:2020}
  const keys = Object.keys(car)
  console.log(keys)
  //output ['name', 'model', year]

easy, right?

3-Object.assign()

it's Useful for merging or cloning objects

  const car = {name:'Audi', model:'a4', year:2020}
  const details = {color:'red', type:'Coupe', year:2021}


  const combined = Object.assign({},car,details)
  console.log(combined)
  //output {name:'Audi', model:'a4', color:'red', type:'Coupe', year:2021}

Note Here: if both objects have the same property, it will take the value of the second object

4-Object.entries()

return array for each key:value pairs in object wrapped in array

  const car = {name:'Audi', model:'a4', year:2020}
  const items= Object.entries(car)
  console.log(items)
  //output [ [name:'Audi'], [model:'a4'], [year:2020] ]

5-Object.freeze()

it makes the object no longer able to change

  const car = {name:'Audi', model:'a4', year:2020}
  Object.freeze(car)

  car.year = 2021
  console.log(car)
  //output [ [name:'Audi'], [model:'a4'], [year:2020]

Note Here: to check if the object is frozen or not use Object.isFrozen(car), if frozen it will return true, and false if not

6-Object.seal()

Similar to Object.freeze() but the difference is this lets you change the property of the object as long they are writeable (Not methods) But not delete or add new

  const car = {name:'Audi', model:'a4', year:2020}
  Object.seal(car)

  //this will work
  car.year = 2021
  console.log(car.year) // output 2021

  //this will Not work
  delete car.year
  console.log(car.year) // output 2021

Note Here: to check if the object is sealed or not use Object.isSealed(car), if sealed it will return true, and false if not.

That's it for today, I hope this was useful to you.
Thank you, and have a productive day❤️

8 Useful Javascript Array Methods✨

Abddelrahman Saad — Sat, 14 Nov 2020 23:12:02 +0000

Hello guys, today we're going to explore the most used array methods with javascript

Such as (push, shift, filter, reduce, and more..)

I assume you know that array is a data type used for storing lists of almost any other data types such as(Objects, Strings, Numbers, etc...)

So let's begin with the first method

1-Push()

push is straightforward it used to add a new element to the end of the array.

Let's give it a try.

Start with declaring the array:

let arr = [  1,  2,  3  ];

here we got an array with numbers, now let's add another element to the end of the array with push

then print to the console to see what happened.

arry.push(4)

console.log(arry)

if you following along with me you're going to see the output

 //[  1,  2,  3,  4  ]

easy right?

Now let's move to the second method.

2-Pop()

pop is easy also, it removes the last element in the array.

with the same array, we declared before, after adding the new element, let's remove it.

you remember that push added the element at end of the array ha!

then with pop() as we said it removes the last element which is at the end of the array.

let arr = [ 1,  2,  3,  4 ];

arry.pop()

console.log(arry)

// output [ 1, 2, 3 ];

3- shift()

Shift is the opposite of pop, it removes the first element in the array.

let arr = [ 1,  2,  3,  4 ];

arry.shift()

console.log(arry)

// [  2,   3,  4 ];

4 - unshift()

it adds new element at the beginning of array.

let arr = [ 1,  2,  3, ];

arry.unshift(4)

console.log(arry)

// [  4,  1,   2,   3  ];

now let's move to another set of methods which so useful for work with javascript arrays.

5-filter()

filter loops through the array and return another array with one or many elements match the criteria.

what does this mean!

let me tell you an example

imagine you got an array of users,

and function responsible to find and return users that have the same name passed to it.

let users = [ { name: 'ahmed',  age: 20 },  { name: 'khalid',  age: 27}];

function getUsers(name){
//find the users with name
}

so you got variable with requested name,

now we can use filter to find these user/s :

let users = [ { name: 'ahmed',  age: 20 },  { name: 'khalid',  age: 27}];

function getUsers( name ){
  let requestedUsers = users.filter((user) => { 
     return user.name === name
  })
console.log(requestedUsers) 
// output  [ { name: 'ahmed',  age: 20 } ]
}

what is going on here is we use filter to loop throughout the whole array and find any user got name equal to the name passed to the function then return an array with element/s that match the criteria.

if you got this function the next two functions the almost the same.

6-find()

The one and the only difference between this and filter() is instead of looping through the whole array and return an array with requested element/s,

it loops until it finds the first element matched the criteria then it stops the loop and returns the element only
-not inside an array.-

7-findIndex()

Same as find(), loop until it found the first element matched the criteria but instead of returning the element itself returns the index of the element.

I'm not laying at you as I said they almost the same right?😉

8-map()

It loops through the array but here it returns a new array with the needed value only from the old one.

hold one and let me explain.

Again with our user's array but here I added id fields to each user for the sake of example:


let users = [  { id: 1,  name: 'ahmed',  age: 20 },   { id: 2, name: 'khalid',  age: 27}  ];

Imagine you need to send this array to users but you don't want to expose the ids and ages of users or the users interested only in names.
so desired output would be [ "ahmed", "khalid" ].

here come the main roles of the map function:


  let names = users.map( ( user )=>{ 
     return user.name 
  })
console.log( names ) 
// output  [ " ahmed ",   "khalid"  ]

Got it?

it returns a new array from the original one -without touch the original-, but it only returns the desired fields from the original array.
you need names of users so got the names only in a new array

9-reduce()

reduce is different from anyone, it comes with terminology such as reducer & accumulator.

-The reducer is what action or the operation will perform in order to get to one value at the end.

-The accumulator is the value that we end with, in other words, it's what we depend on for the next iteration.

please don't give that face and let's talk code instead.🙃

imagine you have this array of books with names and the total sold items of each one and you need to get the total sold items overall.

const books = [
   {title:'awesome book', sold:8},
   {title:'new book', sold:12},
   {title:'great book', sold:4},
]

let me write the function and I will describe it to you


 const totalSold = books.reduce((accu, book) => { return accu + book.sold}, 0)

the accu parameter changes to the returned value of the previous iteration, but when we start the function there's no previous iteration,
do you notice the 0, its the initial value for first execution -it's not a must -

So the returned value from the first iteration would be 8

0 + 8 The initial value + sold items for awesome book

In the next iteration, the accu parameter changed to the returned value from the previous iteration which is 8
so the result of the iteration going to be 20

8 + 12 the accu parameter + sold items for new book

In the last iteration, the accu changed to 20 which is the returned value from the previous iteration,
so the result of the last iteration going to be 24

20 + 4 the accu parameter + sold items for great book.

Finally, there's no iteration so the returned value from the reduce function would be the last returned value which is 24.

I hope that was good enough to wrap your head about reduce.

that's was a summary for most used javascript array methods
if you want an advanced article please let me know in the comments.

Thank you, and have a productive day❤️

3 Unique Javascript Window APIS ✨

Abddelrahman Saad — Wed, 11 Nov 2020 19:42:36 +0000

Javascript has a powerful built-in API that makes our life easier as developers.

Today we're going to cover 3 of them.

Note: These APIS are experimental so you need to check of the browser support them first before using it in production

1-navigator.Online:

Lets you check the user internet connection, return false if the connection is lost and true when it back

if( !navigator.online ) {
console.log(" You're offline, check your connection. 🔴")
} else {
console.log(" Your connection is back 🟢")
}

2-navigator.language:

Lets you get the language of the browser


console.log(navigator.language)

 //output en-Us

3-navigator.geolocation:

Lets you get the location of the device


navigator.geolocation.getCurrentPosition(displayPosition)

function displayPosition(position){
  console.log('Latitude:' + position.coords.latitude)

  console.log('Longitude:' + position.coords.longitude)
}

 //Latitude: 40.1294478
//Longitude: 41.34804699999998

That's it, Have a productive day ❤️

Unique tip for CSS ✨

Abddelrahman Saad — Mon, 09 Nov 2020 16:45:55 +0000

Hello guys, I've found a very useful tip I didn't know before and I would like to share it with you.

Have you tried before to make a shadow for a transparent picture and the final outcome became something like that😒

and you want it to be something like that🤩

Ok here's the way you can achieve the awesome result✨

instead of

box-shadow: 2px 4px 6px #ff8429

do it like this

filter: drop-shadow(2px 4px 6px #ff8429)

That's it, have a productive day❤️

Introduction to recursion (Part 2 Practical)

Abddelrahman Saad — Sun, 08 Nov 2020 23:11:00 +0000

Important Note
Please note that there is a first part that must be read before reading this part
Read from here

Now let's get our hands dirty and make a simple function to demonstrate our idea.
imagine you need to count down from a number till 0 what would you do!!
Yes, a loop gets the number and subtract 1 at every iteration.

so it would be something like that

First, we make a function call count down take the number and make a loop inside it

function countDown(num){
  for(let i = num; I > 0; i--){
     console.log(i)
     console.log('Done')
  }
}

If you invoke this function with a number let's say 4 the output would be
4
3
2
1
0
Done

NOW let's do it recursively

Here where things get exciting🤩

I'll write the function but don't worry I'll walk through it step by step

function countDown(num){
  if(num <= 0){
    console.log('Done');
    return;
  }
  console.log(num)
  num--
  countDown(num)
}

countDown(3)

Please don't freak out, and have another look🧐

The first thing it will check if num is less than or equal to 0 and it's not -it's 3 - then it will skip this part as we also.

Then it will print the number in the console - 3 -
then subtract 1 from the number so it's going to be 2 instead of 3,
until now this is normal to you off course.

In the next part, it will execute itself again but this time with the subtracted number which is now 2 so the countDown function would invoke again with different input.

The first role you remember it arent you?🤔

Different input

The first role to make the function recursion it has to work every time with different input

You passed the first part I'm proud of you 🥳👏

Now let get back to our function.

The function will check again if num is less than or equal to 0 and it's not - it's 2 this time - then it will skip this part again
then it will print the number - 2 -
then subtract 1 from the number which is becoming 1 now after subtraction

and again it will execute itself with the new input 1.

it will do the check again but it will skip the check because it's not less than or equal to 0 - it's 1 -
then print the number and subtract 1 from the number and execute itself again but NOW the number became 0.

Now the if statement will work because the number is equal to 0

This is the second and final part of the recursion functions.

The base case

the function must have a time where it stops and returns a value, or we're going to have an infinite loop.

it will return nothing here but we do it because this part is the most important one and without it as you know it won't stop and your program going to crash undoubtedly

HOLA now you've understood the recursion functions and I didn't cheat you it's simple, right? 🥳

Let's be honest this not what recursion meant to do but here for the sake of simplicity and learning but in real-life scenarios, you would use recursion functions as we said in a big number of items

If you interested I can do an advanced one please let me know in the comments and I'll do it as soon as possible

Thank You, and have a productive day ❤️

Introduction to recursion (Part 1 Theory)

Abddelrahman Saad — Sat, 07 Nov 2020 19:12:12 +0000

Have you ever heard the term recursion function!?

if you're a developer - and you are of course - the answer would be definitely YES!

maybe this term makes you a little bit confused or maybe scared (as I'm at the first sight ) but please calm down it's really easy and very helpful.

We're going to divide this talk into two parts

Theory and Practical

Theory.

In theory, we need to answer 3 questions What, Why, and How.

WHAT?

ok, let's make it as simple as it indeed is.

Recursion is a "function calls itself".
Simply from the body of the function, we use the same function again over and over until reaches a certain result.

Yes, I've heard your question 😃
why would I make a function to call itself again and what the benefits of doing so?

Here we go to the next question

WHY?

recursion as you already guessed (maybe not) is similar to loops.

But when you work with a large number of data (Objects, Numbers, etc.)
loops became a cumbersome process to our program and maybe break it, especially when you make two loops in the same process or loop inside a loop this consumes a lot of resources and slows down the process.

But we as developers always trying to make our code clean, fast, and as efficient as possible, Right?

In this situation recursion becomes handy.

we use it when we got a big number of data we need to loop inside it but you care about the time and readability and efficiency of your code, ok?

let's jump to the last question of theory

HOW?

here's how it works, there are two parts recursion function must have to be a recursion

1-Different input:
we agreed that it's a "function calls itself" so it doesn't make sense to give the function the same input and expect to do a different thing so every time the function executed must have different input.

2-Base case:
because recursion function kinda loop,
and every loop must have a time where it stops and returns a value, or we're going to have an infinite loop.
the time we stop our recursion function is the base case of the function.
so when we say the base case of the recursion function it means the phase that stops and returns its result.

That's it for theory, I hope it was simple, and follow me for more ❤️

The practical part here

https://dev.to/abd_elrahmanmo/introduction-to-recursion-practical-2odm]