DEV Community: Ali Taha Shakir

Get started with Web Development, HTML Part-1

Ali Taha Shakir — Fri, 02 Apr 2021 12:54:04 +0000

Hello everyone. The aim of this article is to provide basic HTML knowledge and get you familiar with common tags and statements which you need to get started with your first HTML page.

DOCTYPE

Document type declaration also known as DOCTYPE informs the browser about markup language in which the current page is written in.

It is the first line in every HTML page and is written as:

<!DOCTYPE html>

html

Truth be told, I don’t know exactly why the <html> tag is used. But I know it is a common practice to use it as a wrapper for all your other tags except DOCTYPE.

You should also include lang attribute in your <html> tag to declare language of web page and to assist search engines and browsers

<!DOCTYPE html>
<html lang="en">

</html>

head

<head> section contains the information about the page which is readable by browsers, search engines, and other sites.

Some common things which are included in <head> are:

Meta tags (useful to search engines)
Title tag (page title, shows up in your browser tab)
Link tag (use to link your CSS files in HTML page)
Script tag (use to link you JavaScript file in you HTML page)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta property="og:title" content="Example page title." />
        <meta property="og:description" content="Example page description." />
        <meta property="og:image" content="url to your image" />

        <title>Page title</title>
    </head>
</html>

body

Everything which is visible on your page comes inside the <body> tag. Most of the tags which we will go through are used in <body> tag

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta property="og:title" content="Example page title." />
        <meta property="og:description" content="Example page description." />
        <meta property="og:image" content="url to your image" />

        <title>Page title</title>
    </head>

    <body>
        <!-- page content comes here -->
    </body>
</html>

Conclusion

We went through basic HTML tags which occur on almost all HTML pages and made a skeleton boilerplate for our HTML file. In the next article of this series we will go through the tags which are used in <body> tag and are used to layout your page.

Thanks for Reading.

If you enjoyed this post please share, and follow me on DEV.to or Twitter if you would like to know as soon as I publish a post! 🔥

Should developers write blogs?

Ali Taha Shakir — Fri, 26 Mar 2021 13:18:04 +0000

This post is a humble suggestion rather than a discussion on why you should start to write a blog as soon as possible?

Writing a blog is not a one day job, it is a commitment that you keep working on.

When I made the decision to start blogging, among other things my primary inclination was to give back to the awesome community which has given me so much. I am here, because many people knowing or unknowingly have helped me, and I am hoping that I and my content can help others in the same manner.

Furthermore, writing is unavoidable, as a developer I have to produce some type of content in written form regularly. It could be a brief for a project, product release notes, or a simple git commit messages. Since easy to understand and concise technical writing takes practice, it made sense to make proactive effort to practice it. Writing a blog is a perfect opportunity to get some practice.

There are many reasons for how blogging is helpful . In no particular order here are a few:

Blogs become my online notes

I started my career as designer then transitioned into development. As I started to learn JavaScript I realized that my brain was not wired as a developer and it was hard for me to process and retain information and concepts that I have learned.

Writing a blog post about a particular topic made me learn about it more extensively than just watching a tutorial, and everything that I have learned, I have noted it in my blog post which I can refer to whenever I need a refresher on that topic.

Giving back to community

While learning, I found the most useful resource usually were the articles written by other developers who worked through the steps on how to use something. While technology is always changing and evolving, if you have something to share, then share it even if you think it's obscure or might not be useful, there's always someone else who is working on something similar.

Even if you are a new developer with little experience, write what you have learned from your experience, perhaps it's useful to another developer with less (or even more) experience following their own skills development path.

It looks professional and validates your knowledge

In tech world, developer of any experience or education can fall prey to developer impostor syndrome, despite external evidence proving otherwise. Writing blogs about what you know is an easy way to bring your knowledge to everyone. It validates your knowledge to you and others.

The topics you choose to write about, make it easy for potential employers and clients to appraise you. They can better determine the depth of knowledge you have, and how you can be helpful to them.

Conclusion

Above, I have stated a few reasons on why you should start blogging. I am sure other people have their own interesting reason on why you started blogging and I would love to hear them.

Thanks for Reading.

If you enjoyed this post please share, and follow me on DEV.to or Twitter if you would like to know as soon as I publish a post! 🔥

map() Array Method

Ali Taha Shakir — Mon, 22 Feb 2021 16:00:33 +0000

Lets take a look at JavaScript map() method.

The map() method executes a callback function for each element of array. That callback function accepts between one and three arguments:

Current Value (required) - The value of the current array element being processed in loop.
Index (optional) - The current element's index number.
Array (optional) - The array map() was called upon.

That sounds a lot like forEach() method. But where forEach() method is allowed to mutate the original array and will always return undefined, map() method will always utilize the return values and actually returns a new Array of the same size.

Considering that we have the following array below:

const numbersArray = [1, 2, 3, 4, 5];

Let’s apply foreach() method on above array.

Note: that you would never return from a forEach() method as the return values are simply discarded:

numbersArray.forEach((number, index) => {
    return numbersArray[index] = number * 2;
});
console.log(numbersArray);

result will be:

numbersArray = [2, 4, 6, 8, 10]

Now here’s an example with map() method:

const numbersTimesTwo = numbersArray.map(number => {
    return number * 2
})
console.log(numbersTimesTwo)

result will be:

numbersTimesTwo = [2, 4, 6, 8, 10]

Let’s look at another example: say you received an array which contains multiple objects – each one representing a student. The thing you really need in the end, though, is an array containing only the id of each student.

// What you have
let students = [
  { id: 12, name: 'Chadwick Boseman' },
  { id: 18, name: 'Chris Hemsworth' },
  { id: 27, name: 'Chris Evans' },
  { id: 56, name: 'Scarlett Johansson' }
];

// What you need
[12, 18, 27, 56]

There are multiple ways to achieve this. You might want to do it by creating an empty array, then using forEach() method to push the id in an empty array

let studentsIds = [];
students.forEach(function(student) {
  studentsIds.push(student.id);
});

OR we can make this simpler and use map() method

let studentsIds = students.map(function(student) {
  return student.id
});

Alternatively, you can use the ES6 arrow function representation for simplifying the code:

const studentsIds = students.map(student => student.id);

If you enjoyed this post please share, and follow me on DEV.to or Twitter if you would like to know as soon as I publish a post! 🔥

forEach() Array Method

Ali Taha Shakir — Mon, 15 Feb 2021 15:44:26 +0000

JavaScript provide us with several built in functions to work with arrays which are know as Array Methods. Lets take a closer look at JavaScript forEach() method.

The forEach() method executes a callback function for each element of array. That callback function accepts between one and three arguments:

Current Value (required) – The value of the current array element being processed in loop
Index (optional) – The current element’s index number
Array (optional) – The array forEach() was called upon

Considering that we have the following array below:

const numbersArray = [1, 2, 3, 4, 5];

Lets apply forEach() method to numbers array, you need a callback function (or anonymous function):

numbersArray.forEach(function() {
    // code
});

The function will be executed on each element of the array. It requires the current value parameter which represents the element of an array which is currently being processed in loop:

numbersArray.forEach(function(number) {
    console.log(number);
});

This is the minimum required syntax to run forEach() method.

Alternatively, you can use the ES6 arrow function representation for simplifying the code:

numbersArray.forEach(number => console.log(number));

If you enjoyed this post please share, and follow me on DEV.to or Twitter if you would like to know as soon as I publish a post! 🔥

Select HTML elements using JavaScript

Ali Taha Shakir — Mon, 08 Feb 2021 15:28:51 +0000

If you want to make changes to the website or an app after it is loaded you need to do so by changing the elements inside the DOM.

We will go through JavaScript methods which you can use to select elements in the DOM.

document.getElementsByName()
document.getElementsByTagName()
document.getElementsByClassName()
document.querySelectorAll()
document.querySelector()
document.getElementById()

document.getElementsByName() is not used that often but it is available. Basically what it does is that it selects all the element in DOM which is assigned a name property and you specify that name property inside those parenthesis.
ref: w3schools

document.getElementsByTagName() is used to select elements by tag name, for example you can get a list of all the div’s on your HTML page using this selector.
ref: w3schools

document.getElementsByClassName() is same as .getElementsByTagName() but this time we target elements using class. You specify the class name in parenthesis and it will get all those elements which have that class property assigned to them.
ref: w3schools

document.querySelectorAll() and document.querySelector() allows you to target a specific ID, Class, or a Tag Name. The difference in .querySelectorAll() and .querySelector() is that .querySelectorAll() target all the elements in HTML which matches the ID, Class, or a Tag Name that you have specified in parenthesis. While .querySelector() only targets the first element that matches the ID, Class, or a Tag Name.
ref: w3schools
ref: w3schools

document.getElementById() perhaps on of the most used command from all the selectors targets a specific ID which you have mentioned in the parenthesis.
ref: w3schools

Conclusion
We went through total of six(6) JavaScript methods in which we have four(4) methods that returns one or more elements and two(2) methods that return single element.

If you enjoyed this post please share, and follow me on DEV.to or Twitter if you would like to know as soon as I publish a post! 🔥