Harvard CS50 introduction to C programming language and the fundamentals of programming concepts such as Data Types, Operators, Conditional and Loops

In this part of Harvard CS50 course we will be having a deep dive into a new programming language called C.

C is a very traditional, old and text based language that can do a lot.  
We will have a look at functions, conditions, loops and other features of this language in order to understand how the building blocks of every software work.

Let's dive deep with this piece of "Hello World" code in C:

```c
#include <stdio.h>

int main(void)
{
    printf("Hello World \n");
}
```

In this snippet of C code, the part that catches our eyes right away is the printf("Hello World");  
This is the actual part that prints the "Hello World" string.

Now C, unlike JavaScript, is a **compiled language**.  
This means, that this piece of code needs to be transformed into binary code.  
We have learned about binary code in [Week 0 of this course](https://maxdyy.com/post/cjz88luj8i897091025rqbbvv).

To do the compiling of our code, we need a **compiler program** that will take the input (our source code), and produce the input (the binary version of our code).

So to do that, first we need to save our code inside of a C file "hello.c", and using the terminal ([Stop Fearing the Terminal](https://maxdyy.com/post/cjq55ogviox5d0a840tv4xuc3)).   
We can use "clang" command (C language) and tell it to take our hello.c file as the input and produce a compiled binary hello file:

```shell script
clang -o hello hello.c
```

Now to run our code we can type this in the same terminal:

```shell script
./hello
```

and the result should be

```text
Hello World
```

**Congrats! This is how you write, compile and run code in C!**


Now let's start experimenting with strings.  
**Strings are a sequence of zero or more characters in double quotes ("hello", "2020", "$%^").**

Now from here we are going to use the [CS50 Library for C](https://cs50.readthedocs.io/library/c/) in order to get some custom functions.  
Or you can use the [CS50 sandbox](https://sandbox.cs50.io/) in your browser.  
I'm going to stick with the sandbox for the convenience.  

Let's improve our program by adding some new features!   
We want our program to ask the name of the user and then say "Hello, username".  


```c
#include <cs50.h>
#include <stdio.h>

int main(void)
{
    string answer = get_string("What's your name?\n")
    printf("Hello, %s \n", answer);
}
```

Here, we have imported the **<cs50.h>** library first.  
Then we have defined our function as before.  
We have created a new string named **answer** that contains the result of **get_string** function.  
And as the last thing we are printing the "Hello, " string with the **answer**.  

After compiling our code (we can skip using clang with arguments and use **make** instead) with

```shell script
make hello
```

we can run our updated function with 

```shell script
./hello
```

which should ask us

```text
What's your name?
```

and after we have entered our name (in my case Max) and pressed enter, the result should be

```text
What's your name?
Max
Hello, Max
```

**So yeah, that's it, simple as that!**

So as we can see in our example, **C is a strongly typed language**.  
This means that we need to explicitly tell what type of data we are storing in our variables.  

```c 
string myString = "hello";
int myNumber = 1;
```

Data types are needed when we declare our variables, but when we want to change the value, we can just assign a new one like so

```c
myString = "hello again";
myNumber = myNumber + 1;
```

In C we also have other features common to other languages like conditions

```c
if (myNumber < 5) 
{
    printf("your number is less than 5")
}
else if (myNumber == 5)
{
    printf("your number is 5") 
}
else
{
   printf("your number is more than 5") 
{
```

Here we can see the equality operators being used:  
**<** First operand less than second operand  
**>** First operand greater than second operand

And the **else** also equals to **(myNumber == 5)**   
**==** First operand equal to second operand

In C there are also **loops**.
A loop executes a block of code as long as it's boolean expression is true.

```c
int myNumber = 0;
while (myNumber < 5) 
{
    printf("hello, world\n");
    myNumber = myNumber + 1;
}
```

This loop will be executed 5 times, each time it will print **hello, world** and increase myNumber by 1.  
On the fifth run myNumber will be 5 so the **(myNumber < 5)** expression is no longer *true* making the loop stop.

```text
hello, world
hello, world
hello, world
hello, world
hello, world
```

There is also a **for** loop, that is a bit more mechanical to write, but it can do just what we have done before with the **while** loop.  

```c
for (int i = 0; i < 5; i++)
{
    printf("hello, world\n");
}
```

So here the **i = 0** is the same as declaring **int myNumber = 0;**  
The **i < 5;** is the boolean expression that must be *true*, same as **myNumber < 5**  
And the increment of our counter **i++** at the end of each loop, same as **myNumber = myNumber + 1;**  

The result is the same:

```text
hello, world
hello, world
hello, world
hello, world
hello, world
```

In C we have a whole list of data types besides strings and int, and here are some of the most used:  

**bool** Boolean, a value of *true* or *false*  
**char** Character, which is a single character  
**double** Double, a decimal number with double precision  
**float** Float, a decimal number with single precision   
**int** Integer, stores a number  
**long** Long, a data type that has a bigger storage size  
**string** String, a sequence of zero or more characters in double quotes  


And here it is, the initial blocks o C programming language.  
All this concepts are also common to other languages, so it's a good idea to learn them!


HARVARD CS50 - Data Types, Operators, Conditional and Loops

Harvard CS50 introduction to Computer Science explains how computers works, form binary system of 1 and 0 to videos on our screens!

**What computer science is?**

Computer science is about problem-solving, and very often solving problems as a team and using computers.
Computers are very simple, at the end of the day, it’s a tool that rather has o, not electricity.
And electricity is the main resource to drive all the technology.

So by deciding if there is electricity or not, we can define a binary system, and computers speak this exact language of 0s and 1s which is called binary.
This binary language is a direct mapping between no-electricity/0 and electric/1.


**But if computers can only do zeros and ones, how they can do useful things?**

In the same way, we have different numerical patterns.
For example 123 for us, humans are “one hundred twenty-three”,  computers can also recognize patterns but based on places 1, 2, 4, 8, 16, 32, etc.
Therefore computers are using the powers of two, not surprisingly binary.

 Therefore for a computer, a representation of the number 3 is the following:

| Position | 2 | 1 |
|----------|---|---|
| Value    | 1 | 1 | 

The representation of number 4 is the following:


| Position | 4 | 2 | 1 |
|----------|---|---|---|
| Value    | 1 | 0 | 0 |


So theoretically we can represent any number that we want with binary, only if we have enough bits.


**But what are these bits?**

Bits are slots that can store a binary value, so for example if I have 3 bits I can store a value up to 7 if all of the themes are storing a 1.

**All of this is amazing, but how do we store more useful information in binary? How do we get from 0 and 1 to letters?**

We just need to agree that any letter has a constant value, let’s say letter A is 65, B is represented by 66 and C is 67, and so on.
This system is called **ASCII, or American Standard Code** for Information Interchange.
So this is how we can represent HI! In ASCII and binary

| Symbol | H       | I       | !      |
|--------|---------|---------|--------|
| ASCII  | 77      | 73      | 33     |
| Binary | 1001000 | 1001001 | 100001 |



But ASCII cannot represent all the symbols that we use for communication, therefore we started to use something called Unicode, where we can use one or two or three or even four bytes. So eight bits or 16 bits, 24 bits, or even 32 bits to represent characters. And now, we can represent thousands or even millions of characters. Unicode is often a specific version of it called UTF-8.


Now once we solved the problem of communication via binary, **how can we represent colors and therefore images with our binary system?**

Our screen is made of pixels, which are little dots and all images that we see on our screen are a sequence of pixels each lighting with a specific color.
So we can use also a system that says to each pixel in which color should it light up, and this system is called **RGB - red, green, blue**.
This system uses 3 bytes, each byte to specify how much of a color between Red Green and Blue should a pixel display.
So we can say that each byte can go from a range of 0 to 255, where 0 means no color and 255 means most of the color.


Let’s say we want a nice pastel orange color, now an RGB representation of such a color would be 255, 178, 71.

| Red   | Green | Blue|
|-------|-----|-------|
| 255 | 178 | 71 |

So in this case, we would say to our pixel, give us a maximum of the red, being 255, give us 178 of green and 71 of blue, therefore RGB(255, 178, 71).

And we can conclude that **every image, video, or user interface in our computers is a collection of data in RGB code system that is then translated into binary**.


HARVARD CS50 - From binary to letters and colours

YDNjQ - "You Don't need jQuery" - DOM Manipulation in plain JavaScript

**YDNjQ - "You Don't need jQuery”** is a series of plain JavaScript snippets that will show you how much you can do without using any library and especially jQuery.

Today we are going to take a look at DOM manipulation
DOM manipulation is the basis of everyday Front-End tasks and in this blog post, we are going to have a look at how plain JavaScript can help us.


**Creating a DOM element**

With jQuery we were used to create DOM elements by passing a string representing our element to the $ function, like this: 
```js
$('<div>hello</div>')
```

In plain JavaScript we can use document.createElement() method, which takes a tagName (div, p, section, etc.) and creates the corresponding HTML element.

Now, let's recreate the following jQuery elements structure 

```js
$('<div><span>hello</span></div>')
```

in plain JavaScript.

First, we need to create the parent div element and the child span element for our text.

```js
const parentDiv = document.createElement('div');
const childSpan = document.createElement('span');
```

Then we need to add our text, I like using a dedicated DOM method document.createTextNode(), that creates a text node.

```js
const textNode = document.createTextNode('hello');
```

Now, let's combine them using the Node.appendChild() method, which adds a given node to the end of the list of the specified parent node.

```js
parentDiv.appendChild(childSpan).appendChild(textNode);
```

And this is our result when we call parentDiv:

```html
<div>
	<span>hello</span>
</div>
```



**Removing a DOM element**

So what if we need to remove an element? In jQuery we used to select the element and call the remove() function like this: $('div').remove()
In plain JavaScript, we can achieve the same result following a similar, but just a bit more verbose path.

First we select the element we want to remove:

```js
const elToRemove = document.querySelector('div');
```

If you've missed it, here is a quick introduction to [plain JavaScript selectors](https://www.dmukhovskyy.com/blogPost/cjoopoadyfwf40932gv89w2u4).

Then we step up off the selected element, using the parentNode method, and then we call the removeChild method and pass it to the previously selected element.

```js
elToRemove.parentNode.removeChild(elToRemove);
```

_Easy!_


**Cloning a DOM element**

Sometimes we just need to clone an entire DOM element, in jQuery we used the handy $.clone() method.
In plain JavaScript, we have the cloneNode() method, which takes an optional boolean as an argument, which allows us to clone also child elements.

```js
const elToClone = document.querySelector('div');
const cloneEl = elToClone.cloneNode(true);
```

Now, because we passed a true to cloneNode method, the cloneEl is an exact deep clone of the whole selected element, including all the attributes and child nodes.
If we would decide not to pass true to the method, our cloneEl would be a copy of only the elToClone, without child nodes.


Here you have it, basic DOM manipulation in plain JavaScript. 

YDNjQ - DOM Manipulation

Knowing how to use the Termina and Bash commands can make a huge difference in your productivity, here you can read about some of the most used commands.

Oh my gosh! **The terminal**, that black thing where you write commands for everything, even for navigating directories or for creating and deleting files.

I remember the days as a Junior Software Engineer, when I used to be intimidated by the terminal and when using the terminal for creating new files was considered a *superior knowledge*. 

Nowadays, I would say that knowing your way around the terminal, not only makes a good impact on your productivity but also looks impressive from the side.

When I'm working together with other engineers and I see them swiftly using the terminal in their workflow, somehow I get reassured about their professional knowledge.

Anyway, knowing how to use the terminal and bash commands shouldn't be a priority over learning a programming language. I would say it's important and it makes a difference, but if you're a Junior Engineer, consider it as a "nice to have" skill.

Here's a list of the most used commands in my daily workflow:

**Disclaimer** - I'm using iTerm2 for MacOS with Bash (a Unix shell), these commands should work just fine on any Mac and Linux systems, Windows default terminal is different.

If you're using Windows, have a look at my post about [Programming on Windows](https://www.dmukhovskyy.com/blogPost/cjowwtwehv9ba09322ih1lqnm).


**Navigating**

Change directory is probably my most used command for navigation to folders in the system's files structure.

```Bash
cd
``` 

Can be used like:

``` Bash
cd ~/Documents/projects/my-app 
```

For getting back to a higher level folder I use:

```Bash
 cd .. 
``` 

This will bring us to ~/Documents/projects

```Bash
 cd ../.. 
```

Will bring us to  ~/Documents

When I feel lost in the endless folders of enterprise projects I use a magic command:
```Bash
 pwd 
```

Print working directory, which does just that, it prints the path to the folder you're currently in. Also useful for sharing the folder's path with your teammates.


**Creating and Deleting files and folders**

I use the touch command for creating new empty files.

```Bash
 touch index.js 
```

Will create a new index.js file.

For creating a new folder I use the make directory command

```Bash
 mkdir js 
```

Will create a new folder named js.

We can chain two or more commands together using the && operator.

```Bash
 mkdir js && cd js/ && touch index.js 
```

Will create a directory named js, navigate inside that directory, and then create an index.js file inside of it. 

For deleting files I use the remove command

```Bash
rm index.js
```

Will delete the index.js file. But if we want to remove an entire folder, we need to add a recursive option to the remove command

```Bash
 rm -r js 
```

Will delete the whole js folder including the index.js file.



**Opening and Reading files**

If I want to have a quick look at the content of a file, then I use the catenate command.

```Bash
 cat index.js 
```

Will print the content of the index.js file on the terminal screen.

For opening files or folders with the default app, I use the open command.

```Bash
 open js/index.js 
```

I will open the index.js file with Sublime Text, which is set as the default app for js files on my machine.

```Bash
 cd js && open . 
```

Will navigate inside the js folder and then open it with the Finder app.


So here you have it, some of the most basic commands that I use on daily basis in my terminal.

There are many other more powerful commands, like change mode ```chmod``` that sets access permissions of given files, or event the simple ```clear``` that will clear your terminal interface.

But even just the basic knowledge of navigation and manipulation of files will improve your productivity.


Stop Fearing the Terminal

It's not that easy getting started with Web Development. But what does it means to get started with Web Development? For me, it means 3 things...

This morning I received a DM on Instagram saying: 
>Any tips for a new learning aspiring Web Developer?

This question was following me throughout the day because there is no right or best answer to it.

Especially today, where every new entry to this huge industry will inevitably feel overwhelmed and lost in the crazy amount of "things to know" for a good Web Developer.

Based on my experience, I can say that it's not that easy getting started, you'll have to put in the dedication and fight imposter syndrome, especially at the very beginning.  

**But what does it means to get started with Web Development?**

For me it means 3 things:

1.  Understanding if this is **REALLY** for you if you're enjoying what Web Development is.
2.  Learning the **Golden Basics** and proving your knowledge with 2/3 of small projects.
3.  Lending your **first job** as a Junior Web Developer.


Now let's see in detail these steps, which hopefully will clarify a lot of things about what Web Development is.


**Understand if this is REALLY for you**

This is probably the most important part. 
If you're seriously considering Web Development as a possible career path I suggest you get your hands dirty as soon as possible. 

Start reading and watching simple entry-level tutorials about Web Development. 
Get to know what HTML, CSS, and JavaScript look like and get an idea about how an everyday Web Development job feels. 

This part is crucial since it will give you a feeling about what you're going to deal with.

Pay attention to how it feels to you, if you get excited about the code, about how the Web works, if you're curious and want to know more, then chances are - this is really for you.

On the other side, if you feel anxious, the looks of the terminal and code editors scare you, understanding the code and the Web is not just an exciting challenge but an overwhelming effort, chances are this may just not be for you.


**Learn the golden BASICS**

Plain HTML, CSS, and JavaScript are the backbones of Web Development. 
These three, are ideally what you need to know for landing an entry-level job. 

Although you can get a job without knowing JavaScript, especially in smaller companies.
This was my case two years ago, but without JavaScript, you would be probably considered a Web Designer.

So here's a summary of what I recommend learning before looking for a job:

**HTML** - the structure of every web-based site or app. 

Starting with HTML is relatively simple.
Get to know what tags are and how they work. Understand what is the difference between certain tags and their semantics, all of them have a special meaning.

Learn how to use classes and ids in HTML and what's the difference. How to connect external HTML, CSS and JS files to your document via <link /> and <script /> tags.

Understand what HTML attributes are and how to use them.

A very important topic and the one that makes a huge difference between junior and more senior engineers is the attention to writing a semantic and web accessibility compliant HTML.

[Here are some tips for making a difference with Accessibility and Semantics.](https://www.dmukhovskyy.com/blogPost/cjobp6hpg4nxd09326ck46hcf)


**CSS** - the style of your web page.

Cascading style sheets are also a relatively easy topic to get a grasp on. 
CSS is there to "make your HTML look good". You can define it as a set of descriptive rules like font size, color, and background which target a specific element or set of elements on your HTML document. 

There are a lot of things that you can do with CSS, and just the combination of well-written plain HTML and CSS is powerful enough to allow engineers to deliver a well-rounded web-based experience. 

Therefore you should get to know how CSS rules work on HTML elements, and what is the priority of these rules based on their position on the sheet.

Learn how to properly use class and id selectors and their priority levels. How to select multiple elements and how to exclude some of them in specific.

A huge part of CSS is focused on making your website/app responsive.
Learn about CSS media queries, we use them to make our HTML look different, based on the screen size.

Learn how to manipulate the size and position of your elements using CSS Flexbox or Grid structures, which are a must and became a standard for modern web development.

Having a solid knowledge of just basic semantic HTML and CSS will allow you to create simple but at the same time complete web pages. 

At this point, I suggest you find a landing page design and work on recreating it as close as possible in HTML and CSS. This will be your first project to show in job interviews.

**JavaScript** - the mage on the Web.

In comparison to HTML and CSS, JavaScript is a programming language. Therefore it is way more difficult for most beginners to learn and understand it.  On its own, JavaScript can do everything, create and manipulate HTML elements edit CSS styles and add very complex logic.

JavaScript, as also other languages, has different versions in which the language syntax changes substantially. I would suggest you start with JavaScript ES6, also known as ECMAScript 2015. 
This version is now considered the standard and introduced groundbreaking changes for everyday JavaScript use.

Since JavaScript is a complete programming language, learning and mastering it will take years, but here are the starting points for learning JavaScript:

Variables and constants, learn what const, let and var are, the differences, and how we use them.
Operators, basically same as arithmetic operators, like + - / *.
Different data types, what strings, arrays, and objects are, and how to access data stored in an array or an object.
Conditionals are used to control logic behavior in JavaScript and are based on the truth or false results of the condition. We mainly use if-else statements for conditionals, but it's also good to know how to use ternary operators. 
Understand what is the difference between == and === in JavaScript.
Learn what functions are, and what is the difference between an arrow function and a standard function. Understand the scope of JavaScript, and when and where you can access certain data.
Learn what events are (click, onkeydown, onload, etc.) and how to handle them with JavaScript.

I know this might feel overwhelming and no worries if it does, this is a long learning path that requires everyday dedication, research, and perseverance.

As a second project, I would suggest making a simple web app that requires the use of JavaScript, it could be a simple form that receives, saves, and displays names and the age of users and that can be sorted by name alphabetically (a-z and z-a) and by age (low-high and high-low). 
This was an interview question for my first job as a Software Engineer.


**Lending your first job as a Junior Web Developer**

Finally, in my opinion, if you know everything that I've listed before, I would say that you're pretty much ready to start looking for an entry-level job.

One thing that made me understand that I was ready for applying for jobs, was that you'll never really feel ready, there will always be something that you will miss and not know.

*I can say that you're ready only when you're "cool" with being uncomfortable, being tested, and failing technical interviews. Trust me, a failed technical interview is way better than the one you've ever faced.*

Keep in mind, that the people that will interview you are going to highly value your attitude, your passion for learning new technologies, and the ability to write clean and well-thought code. 
Showing the ability to quickly learn new tech and good problem-solving skills are highly valuable for a successful team member.

So here it is, my brief guide on how to get started with Web Development. I haven't mentioned any fancy frameworks like Angular or React, and older established libraries like jQuery on purpose since I believe that learning plain vanilla JavaScript is more valuable in the long run as a Software Engineer.

Frameworks will come and go, at one point React will die and something new will come, but plain JavaScript will always be there and will also help you understand patterns of every other programming language.

How to start with Web Development

How to set up your development environment on Windows

, since chances are, you'll be using Apple Macs and Linux systems during your career, and those all use BASH.  

We need to install **Git for Windows**, which comes with BASH and Git command-line tools.

**Download and install the .exe file from here:** https://git-scm.com/download/win

Once that's done, we need a good and cool-looking terminal.




**The Terminal**

On my mac, I use iTerm2, which can do a lot of nice things, like opening new shells in a split view, very useful if you need to control different tasks at once.

A great terminal for windows is **Hyper**, made by a great company - Zeit.
It has all the things that my iTerm2 has, and it is very lite and customizable since it's made with JavaScript.

**You can download it here:** 
https://hyper.is

Once installed, we would need to tell Hyper to use previously installed BASH instead of MS-DOS.

In the top right corner click on the menu:
```Edit --> Preferences…```

This will open a file called ".hyper.js" which contains a JSON where all Hyper settings live and where you can change the appearance of the terminal like font size, colors, etc.

We need to find the line starting with shell and add the path to previously installed BASH, and change the shellArgs line too.

Should look like this:

```json
shell: "C:/Program Files/Git/bin/bash.exe",

shellArgs: ["-i"],
```

Then reload the terminal by clicking on the menu:
```View --> Full Reload```

*And voila! Your cool terminal is now using BASH!*



**The Editor**

For writing code I mainly use **VS Code by Microsoft**, it's free and it has great tools, you can customize it quite easily with a huge marketplace of extensions at your disposal. 
VS Code also has an integrated terminal that can use the same BASH shell we've installed before.

**You can download it here:** 
https://code.visualstudio.com

And that's it! I've been using this setup this weekend and I didn't feel like I was missing something when compared to my MacBook. 

Of course, some things require a little time to get used to, like Windows shortcuts and desktop tabs management, but that's a matter of time. 

**It felt productive working with this setup. So there cannot be any excuses here, you can develop quite comfortably even on a Windows PC! **

Programming on Windows

YDNjQ - "You Don't need jQuery" is a series of plain JavaScript snippets...

**YDNjQ - "You Don't need jQuery"** is a series of plain JavaScript snippets that will show you how much you can do without using any library and especially jQuery.

JavaScript is a very popular language but it used to have quite a bad reputation until recent years.

The web was dominated by libraries, or more precisely by a specific library - jQuery, but during the last years, JavaScript improved so much that most of the time you can do just fine by using only plain JavaScript.

In this post we are going to talk about selectors, or the Easy Peasy way we used to select elements via the $("element"), $(".class") and $("#id") using jQuery.

**Given the following situation:**

```html
<div></div>
<div></div>
<div></div>

<div class="class"></div>
<div class="class"></div>
<div class="class"></div>

<div id="id"></div>
```

**Selecting all the div elements on this document**

jQuery way
```js
$("div")
```

Plain JavaScript
```js
document.getElementsByTagName("div")
```

**Selecting all the div elements with ".class"**

jQuery way
```js
$(".class")
```

Plain JavaScript
```js
document.getElementsByClassName("class")
```

**Selecting the div element with the "#id"**

jQuery way
```js
$("#id")
```

Plain JavaScript
```js
document.getElementById("id")
```

> But what if we don't want to memorize all the variations based on the selectors that JavaScript seems to impose us to use?

> We want to select something with only one simple way and maybe even the way we do it in CSS.

**No fears Folks!** We don't have to memorize all that and confuse various *getElementsBySomethingSomething*!

Here you go:

```js
document.querySelectorAll("div")

document.querySelectorAll(".class")

document.querySelectorAll("#id")
```

**document.querySelectorAll()** is very smart, and returns a NodeList of elements selected by a given CSS selector. 

Now, you're probably thinking:

> What is an actual NodeList?

And if you have an eye for details you may have noticed that the previous .getElements selector methods returned something that is an HTMLCollection.

*Well they are pretty similar, both are collections of DOM nodes, the only difference is that the first (NodeList) is a more general list that can include various node types, meanwhile the HTMLCollection will include only node elements like div, body, ul, etc.*

So here it is, just a small step towards a cleaner, faster, and more maintainable code on the web.

**I will write more about plain JavaScript and how powerful it alone can be, stay tuned!**

YDNjQ - Selectors

What is Accessibility and Semantics in Web Development and why you should care about it

**Accessibility is an often-underestimated topic in web development.**

Let's be honest, as Front End Software Engineers we are usually more concerned about the functionality of new features, UI, UX and implementation of the last beautiful design.

We prototype new ideas and quick functionalities using a matryoshka of <div/> tags and manipulate them with CSS and JS. Sadly enough, some of these kinds of prototypes can even see the light of a live production server, just because we didn't have enough time to rework our HTML structure and make it more semantic.

> But why should we care about semantics and accessibility if everything looks beautiful and works just fine? 

Making your web app semantic and accessible means making it more descriptive, so everyone will be able to navigate and experience your web app in the way you've designed it.

**Here are some easy ways to make a big difference in the accessibility of your web app:**

1.  Stop using only <div /> elements, instead use more sematic tags like:
	```html
	<header />
	<nav />
	<menuitem />
	<section />
	<article />
	<footer />
	```
	
2.  Use headings tags for page, section and paragraph titles:
	```html
	<h1 />  -  <h6 />
	```

3.  Use alternate text with alt attribute for your images:
	```html
	<img src="logo.png" alt="Company Logo">
	```

4.  You can use a <figure > tag, which also includes a caption and multi-media resources, instead of just <img >:
	```html
	<figure>
	  <img src="tree.png" alt="A tree">
	  <figcaption> A beautiful green tree near a lake.</figcaption>
	</figure>
	```
	
**Some less technical but also easy and important accessibility improvements would be:**

1.   Choose carefully the colors for your web app. About 8% of the world's population has a red-green color deficiency, so using a lot of these colors will make your web app visually difficult to use. 

2.    Make your content as descriptive as possible, for example, make your links descriptive, avoid using generic wordings like "Click here".

These are just a few suggestions about accessibility and about how we can make the web more friendly and accessible for everyone. 

As *collateral damage*, accessibility, and semantic HTML improve **SEO**.

Accessibility and Semantics in Web Development

Everyone is talking about React, Vue and the next super fast and cutting edge library, but you still should learn jQuery and this is why...

**It’s 2018 and You Should Learn jQuery**

Now, you’re probably thinking, 

> Yeah, it’s 2018! Why should I learn jQuery when everyone is talking about React, Vue, and even Angular? 

They say these are more appealing than jQuery,  and they’re right.

The hype around these libraries/frameworks is huge and certainly well-deserved - even this whole website was created with React.

However, the reality is that jQuery is still super popular, and guess what? It’s not going away any time soon, especially if you are going to work with major corporate companies.

I get it, React is attractive. The demand for React engineers is growing. [Google Trends](https://trends.google.com/trends/explore?date=today%205-y&q=%2Fm%2F012l1vxv,%2Fm%2F0268gyp) are telling us that React has surpassed jQuery during last few months. And, don’t get me wrong, learning and using React is a great idea, but you better know what a well-written $( ) can do.

The fact is that most of the bigger companies, and even startups, have used or are still using jQuery at some point in their code. The reason is that it’s not that easy to convert everything to React or maybe they need to support an older browser (yes Internet Explorer) and don’t want to set a WebPack bundler with a Babel compiler and convert that fancy ES6 (that most of your teammates probably aren’t using).

So, let’s take a deep breath and grasp the core of what we really would need to know in jQuery.

**Selectors** are cool and easy if you’re familiar with CSS selectors.

```js
// Select div tag
$(“div”)

// Select element by class
$(“.class”)

//Select an element by id
$(“#id”)
```

Now, when you select an element like this, jQuery is going to return a special jQuery Object, which is the selected element in a collection that looks like an array (weird, but useful).

**Event Listeners** are very useful and quick to use.

```js
// This is a very popular method used to trigger
// custom events. In this case we will alert hey!
// when the selected button is clicked
$(“button”).click(function() {
  alert(“hey!”)
});

// There are plenty of other Event Listeners 
// that are just as easy to use
$(“button”).hover()

$(document).scroll()

$(“input”).keypress()

// And the famous 
$(document).ready()
```

**Animations** – yes, jQuery also has smooth animations and transitions.

```js
// Here we’re adding an animation to a div,
// which will animate it to 0.25 of opacity over 500
// milliseconds, after the click event occurs
$(“button”).click(function() {
  $(“div”).animate({
    opacity: 0.25
  }, 500);
});
```

And, there are a lot more possibilities for making beautiful animations, many of them are there just out of the box.

These are just a few things that jQuery can do, and all of them are proven by a decennial usage all over the internet. And, there is so much more, such as CSS manipulation, advanced DOM manipulation, AJAX request, $(this), and so on.

_I hope, that after reading this blog post, you’ll consider using jQuery. It’s not just a great tool, but it’s also an advantage for your career._

maxdyy - Blog