## **Before you going on!**
Every day I find new references in various categories and this makes me confused to decide which and when to use
I will now prepare this article to choose the reference most relevant to its genre.
>**Note**: know that each reference here has a unique aspect of any other reference in the same category, and I will update it when I find any other good reference.


# `HTML`
| |                                  WEBSITE                                   |                                          DESCRIPTION |
| :--------- | :------------------------------------------------------------------------: | ---------------------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lvz2dr9gb5bk443o59u2.png) | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | I use this reference all the time for HTML and HTML5 |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lb5929lfrveagz0bplmd.png) |        [webSiteSetUp](https://websitesetup.org/html5-cheat-sheet/)         |             for our hands, very good pdfs and images |

# `CSS`
| |                                   WEBSITE                                   |                                                               DESCRIPTION |
| :--------- | :-------------------------------------------------------------------------: | ------------------------------------------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lvz2dr9gb5bk443o59u2.png) | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) |                                              reference for CSS and CSS300 |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/25j6lor8yzxf52sqz0jy.png) |            [Animate.css](http://daneden.github.io/animate.css/)             |        CSS library that lets you understand CSS animation and add it easy |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/811sah5yr0x5iupzi1e4.png) |                      [can I use](https://caniuse.com/)                      | support tables for front-end technologies for desktop or mobile browsers. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/maixoeibygleuo74srqs.png) |       [Responsive Grid System](http://www.responsivegridsystem.com/)        |    this website Generate html and CSS codes for a responsive web content. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iygl2x9k8fdj6m3eztbj.png)|                 [clippy](https://bennettfeely.com/clippy/)                  |                                                Tool for making clip-paths |

# `Fonts`
| |                    WEBSITE                    |                                                                         DESCRIPTION |
| :--------- | :-------------------------------------------: | ----------------------------------------------------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/98km103w67l9gponpb4y.png) | [Google Fonts](https://www.google.com/fonts)  | Best resource for free and easy-to-use web fonts. Has an enormous library of fonts. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r7qwzr3bty0ig7ra3uvo.jpg) | [Fontsquirrel](https://www.fontsquirrel.com/) | The best, 100% free fonts for commercial use. Another well-known huge font library. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5xx19wi8ozkpefp2fvv3.png) |      [MyFonts](http://www.myfonts.com/)       |                                               Very largest library of premium fonts |

# `Colors`
|                                                                                 |                       WEBSITE                       |                                             DESCRIPTION                                             |                                     BY |
| :------------------------------------------------------------------------------ | :-------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | -------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e1fmm2prf8ku21ukrxkv.jpg) |     [Flat UI Colors](http://flatuicolors.com/)      |                use it before starting your project for choosing a flat design color.                |                                        |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/83zfl4dywyg7rceqcipj.png) | [Material Palette](http://www.materialpalette.com/) | Inspired in material design. Generate your palette and download it and with some icons if you need. |                                        |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qafmw8q2dlcv39qv4o2k.png) |       [UI Gradients](http://uigradients.com/)       |               A collection of gradients for you to choose from and downloadable too.                |                                        |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tge1z9l7cyzpr0hgjupc.png) |       [grayscale](https://grayscale.design/)        |    You can set generate your whole palette so that each color has the same range of color values    | [Kevin Kirchner](https://dev.to/kevnk) |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i92mjlr98memgpav33f1.png) |      [97palettes](http://www.97palettes.com/)       |                  collection of  the primary colors for the most used applications                   | [Ami Amigo](https://dev.to/hondohondo) |


## Conclusion:
If you have any good, and unique references feel free to add them to the comments.

I hope that I have fulfilled the importance of this topic, don't forget to see the following updates for this article.

If there is any question, please feel free and contact me or leave it in the comments.

To see similar works and also very important for every developer or cognitive researcher, you can do so by following me on different social networks. 
             👉 [YouTube](https://www.youtube.com/channel/UCLjVsnrcH8J1166ctA0pwEg/), [Twitter](https://twitter.com/AhmedAtefWD1), [LinkedIn](https://www.linkedin.com/in/ahmed-atef-dev/) 👈

Before you going on!   Every day I find new references in various categories and this makes...

Unique resources for web developers (html, CSS, font, color)

Ahmed Atef

# What is Web Security?
The web is not safe for every user, Daily we hear about websites becoming unavailable because of denial of service attacks, or displaying changed information on their pages.
These articles are essential for understanding web security basics.

Those articles summarize the most common attacks and explain the countermeasures every web application should implement.

Essentially, these articles provide you with the knowledge needed to create better and safer web applications.

# Different Sorts of Web security:
- [HTTPS](#https)
- [TLS](#tls)
- [SSL](#ssl)
- [CORS](#cors)
- [CSP](#csp)
- *OWASP (Security Risks) >> I will explain it in part II of this series*
- *Hashing Algorithms >> I will explain it in part III of this series*
   - MD5
   - SHA
   - scrypt
   - bcrypt

![Image](https://dev-to-uploads.s3.amazonaws.com/i/cqrt4s4bdtbav4zdjgbc.jpg)
Image Source: <a href=”https://www.ccpixs.com/”>ccPixs.com</a>

## HTTPS
It is the secure version of HTTP, the full name of this protocol is Hypertext transfer protocol secure, which is the primary used to send data between a web browser and a website.

No one else can access the data, Because It uses TLS protocol to encrypt communications, I will explain it at the coming topic.

### How HTTPS work?
It uses encryption communication protocol, named Transport Layer Security (TLS), was known as Secure Sockets Layer (SSL).

this encryption uses two keys, one names public key and the other one names private key.

1. **public key**: this shared between the browser and website.
2. **private key**: this key used to decrypt information encrypted by the public key and it not shared out of the server.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v3m6r9s1ardfcq54m5l1.png)
Image Source: <a href=”https://lmo.wikipedia.org/wiki/Transport_Layer_Security”>wikipedia.com</a>

## TLS
it is the most protocol in use and designed to facilitate privacy, data security for communications over the internet, the use case of TLS is encrypting the communication between application and servers, emails, messaging voice by use (VoIP).

### How TLS work?
Any application or website to use the TLS it must have to install the TLS certification (also known as an “SSL certification”) on the base server, by issued to the person or the organization that own the Domain to install it on the base server.

It contains very important information about the owner, private and public keys to use in decrypt and encrypt the communication.

this process named TLS handshake 🤝 its steps :
- determined the version of the TLS will use during the session.
- Authenticate the identity of the server by using the TLS certificate.
- Generate the Session key for use during the session after the handshake process ended.

This topic needed a farther explanation for this I will make an article about it, and I will add a link to it here.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ejetj9dw0rxjlw9fzoh.jpg)
Image Source: <a href=”https://www.cloudflare.com/learning/ssl/what-is-ssl/“>cloudflare.com</a>

## SSL
Secure Sockets Layer (SSL), an encryption-based internet security protocol, it was founded for the ensuring of the integrity and privacy of the connections of the internet by the Netscape company at 1995, nowadays it names [TLS](#tls).

### How SSL works?
it like the new TLS based on the concept of the handshake [TLS](#tls).

### What is the difference between TLS and SSL?
SSL is the older version of the TLS, the name changed after the Internet Engineering Task Force (IETF) be the owner of the SSL development after Netscape, some developer nowadays uses the SSL and TLS to referring for the same thing.

> **_Notice_** Since 1996 SSL not have any new update and this makes it very vulnerability to hacker attacks and all modern browsers no longer support it, they only support TLS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pqo28v3i4ophzcsj5mbt.jpg)
Image Source: <a href=”https://morioh.com/p/3d5ffc21ace4”>morioh.com</a>

## CORS
Cross-Origin Resource Sharing (CORS) is a mechanism that uses HTTP headers to specify which outer origin have access to the local assets and how can access it that is mean we can make a white list for the allowed Cross-Origins that has access to our assets.

the server must have a way to handle the outer requests and this what we will discuss now.

### How CORS works?
1. when the site makes a get request to get resource from the out server, the browser adds a header that contains the origin like the example `Origin: http://www.example.com`.

2. The server receives the preflight request and searches in its white-list for Access-Control-Allow-Origins about the giving origin and sends to the browser option call, then the browser will determine if the actual request is safe to send or not, example `Access-Control-Allow-Origin: http://www.example.com` or this header `Access-Control-Allow-Origin: *` will allow any request to take the resource.

3. if the server specifies the Methods it will compare the request method with its example `Access-Control-Allow-Methods: PUT, DELETE`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ap6h63yendjwje9twx81.jpg)
Image Source: <a href="https://www.keycdn.com/support/content-security-policy">keycdn.com</a>

## CSP
Content Security Policy is more security layer that helps in detect and mitigate different sort of militias attacks like (Cross-Site Scripting (XSS), data injection attacks, ClickJacking, ETC...).

- **Cross-Site Scripting (XSS)**: it a vulnerability that allows the hacker to inject a militias code in the base website and it is for making the client execute it to take sensitive data like cookies, session’s info and site-specific information, That happens because web app does not use enough validation or encoding, The user’s browser cannot detect the malicious script is untrustworthy.

- **data injection attacks:** is a malicious code injected in the network which fetched all the information from the database to the attacker and the number one type of it is the SQL injection.

- **Click Jacking:** or “UI redress attack” is when an attacker tricks a user into clicking on a button or link on another page that uses multiple transparent or opaque layers when he intended to click on the top-level.

### How CSP works?
it use Directives concept that’s every Directive have to specify where resources can load from, preventing browsers from loading data from any other locations.

**Most used Directives are:**

- **default-src:** the default policy for loading (JavaScript, images, CSS, AJAX requests, ETC...) example `default-src ‘self’ cdn.example.com;`

- **img-src:** defines sources for images example `img-src ‘self’ img.example.com;`

- **style-src:** defines sources for CSS files example `style-src ‘self’ css.example.com;`

- **script-src:** defines sources for JavaScript files example `script-src ‘self’ js.example.com;`

- **connect-src:** defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource, If it makes any connections to a host, that’s not allowed here, the browser will respond with a 400 error example `connect-src ‘self’;`

- **Multi-label directives defines:** `default-src ‘none’; script-src ‘self’; connect-src ‘self’; img-src ‘self’; style-src ‘self’;`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/365bjszwzgj4plz05a29.jpg)

## Conclusion:
I hope that I have fulfilled the importance of this topic, and I explained to you the first steps to progress and gain knowledge in this broad field, and I will periodically add any new information on this topic in this series so that all developments in this area kept abreast.

not Forget to read the following supplement from the articles on this topic.

If there is any question, please feel free and contact me or leave it in the comments.

To see similar works and also very important for every developer or knowledge researcher, you can do this by following me on the various social networks 👉 [YouTube](https://www.youtube.com/channel/UCLjVsnrcH8J1166ctA0pwEg/), [Twitter](https://twitter.com/AhmedAtefWD1), [LinkedIn](https://www.linkedin.com/in/ahmed-atef-dev/) 👈

What is Web Security?   The web is not safe for every user, Daily we hear about websites bec...

Web security knowledge you must understand it (Part I: HTTPS, TLS, SSL, CORS, CSP)

at the beginning, know that docker has a fundamental concept nowadays, and a container is a useful tool for packing, shipping and running applications with no specific hardware or software, but before the start, we must know the difference between “Virtual machine” (VM) and “Container”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxtg46kxc9mcfebyxwc4.png)
## What are the containers and VMs?

first, the goal for the two is the same, and it is Isolate an application and its dependencies in a standalone unit that can run anywhere

**Virtual Machines:** A VM is an emulation of a real computer that works and executes programs like a real computer. VMs run on top of a physical machine using a hypervisor.

**hypervisor:** is a piece of software or hardware that is used to control the functioning of virtual machines. Hypervisors themselves run on physical computers, referred to as the “host machine.” Hypervisors provide the virtual hardware resources they need, like RAM and CPU. They split these resources between VMs. So if a virtual machine is running a heavy application, the hypervisor will allocate more resources to it and the virtual machine does not have direct access to the hardware only by the hypervisor.

**Containers:** The one big difference between containers and VMs is that containers *share* the host system’s kernel with other containers, unlike the VMs that everyone uses its operating system, This means that each container has a separate workspace from the other containers resource and shares the host kernel with other containers.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/us4k6arqptu9qqsk67k4.png)
## What are the docker components?

- Docker Engine
- Docker Client
- Docker Daemon
- Dockerfile
- Docker Image
- Union File Systems
- Volumes
- Docker Containers
- Docker Registry


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jtt3v2enfifo3wz5aos0.png)
# How does Docker work?

### Docker Engine:

Is the layer on which Docker runs. Its primary responsibility manages containers, images, builds, and more.

### Docker Client:

its layer for the user to communicate with the Docker Daemon, it’s like a UI for Docker.

### Docker Daemon:

runs in the host computer, execute the commands sent by the Docker Client - like creating, running, and distributing containers.

### Dockerfile:

The Docker File is where we write the steps or instructions to create a Docker Image. Some types of instructions:

- ENV for creating environment variables > ENV API-URL [www.example.com](http://www.example.com/)
- RUN for executing commands > RUN apt-get -y update
- COPY files from out or in docker workspace dir to another director > COPY . /usr/src/my-app

### Docker Image:

A Docker image is a file comprising multiple layers. These layers created with instructions from Docker-file. This image is used to implement the code in a Docker container. An image is a complete, executable version of an application that, when a Docker user launches an image, it can become one or multiple instances of that container and images are read-only, Docker adds a read-write file system over the read-only file system of the image to create a container.

### Union File Systems:

It’s used to create images, and Docker images stored as a series of read-only layers. When we start the container, Docker takes the read-only image and adds a read-write layer on top. If the container in-progress changes to an existing file, then the file copied from the base read-only layer to the top-level read-write layer where the changes applied.

### Volumes:

They are directories (or files) outside of the default Union file system and exist as regular directories and files on the host file system to save data and share data between containers.

### Docker container:

The Docker container encapsulates the application software, so it contains everything the application needs to run. It includes application icon, operating system, runtime, system tools, system libraries, etc.
Docker containers created from Docker images. Docker creates a network interface so the container can talk to the local-host, attach an available IP address to the container, and perform the operation you specified to run your application when the image selected. Once the container has been created, you can run it in any environment without the need to make changes.

### Docker Registry:

It’s a server-side application that stores and lets you distribute Docker images. The registry is open source and we use it to:

- Control tightly where your images are stored
- be the owner for the image publication pipeline
- Integrate image storage and deployment tightly into your internal development workflow

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u7uljoas4ne10lfjtnn7.jpg)
# Conclusion:

Docker is a powerful technology that every software developer should learn and use because there is no limit as before to run applications on specific requirements for software or hardware.

If there is any question, please feel free and contact me or leave it in the comments.

To see similar works and also very important for every developer or cognitive researcher, you can do so by following me on different social networks. <br>
👉 [YouTube](https://www.youtube.com/channel/UCLjVsnrcH8J1166ctA0pwEg/), [Twitter](https://twitter.com/AhmedAtefWD1), [LinkedIn](https://www.linkedin.com/in/ahmed-atef-dev/) 👈

at the beginning, know that docker has a fundamental concept nowadays, and a container is a useful to...

Docker from the crust to the core, what and how it Works


![Alt Text](https://images.unsplash.com/photo-1484069560501-87d72b0c3669?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80)

#**What is the Progressive Web App (PWA)?**
Progressive Web App (PWA) is a way to server the web application as if it a native app on all Versions of devices with the different operating systems without making various editions of the main app for each System, And Wikipedia says about PWA
“Progressive Web App (PWA) is a term used to denote a new software development methodology. Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience.”.

![Alt Text](https://images.unsplash.com/photo-1586527155047-b4639ecd6127?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80)

#**What Makes up a PWA?**
* Web Manifest
* Service Worker
* Static website

![Alt Text](https://images.unsplash.com/photo-1586190022484-455f9692c4d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)

#**How Progressive Web App (PWA) work?**
Any PWA contains some steps that happen for the first time when the user adds it to the device, and others that happen regularly when the application is offline or connected to the Internet, which makes it behave like the original applications now I will give you these steps.

- the website asks the user to add as an icon on the home screen of their phones based on how frequently they visit the website.
- when the user accepts the request after that the website cache the manifest, static website data, and the server workers in the local storage of the browser that makes it faster after initial loading
- Then PWA sends a web application manifest to the system containing:
    - knew The name of the web application
    - Links to the web app icons or image objects
    - The preferred URL to launch or open the web app
    - The web app configuration data
    - The default orientation of the web app
    - The option to set the display mode, e.g. full screen
- Then it was time for the better part, the role of the service worker that is can respond to Web / HTTP requests By Implement a programmable network proxy. It can cache content when that service is Unavailable, serve that content later in the document and check if a remote server is available. Service workers operate separately from the context of the main document, and the server worker life cycle divided into three steps:
    - **Registration:** Registration involves telling the browser the location of the service worker in preparation for installation.
    - **Installation:** if there is no service worker instilled, the Installation occurs in the browser for the Progressive Web app, or if there is needed update to the service worker.
    - **Activation:** if all the PWAs pages are closed the Activation occurs so that there is no conflict happen between the previous version and the updated one. since only a single service worker can be active for a domain.


![Alt Text](https://images.unsplash.com/photo-1582070763274-dbeb2ef35190?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=982&q=80)

# What are the Features of the Progressive Web App (PWA)?

- Progressive, for every user, needs on the browser, on the device, offline, online.
- Can work offline
- Fast, after initial loading
- Always up to date
- Installable, without the use of an App Store.
- Responsive, For all devices
- Safe, Served via [HTTPS](https://en.wikipedia.org/wiki/HTTPS).
- Re-engageable, maintain engagement with the user by push notifications.
- shareable Can easily be linked via a URL.
- Behave like native apps

![Alt Text](https://media-exp1.licdn.com/dms/image/C4E12AQF8slpeJDeJZA/article-inline_image-shrink_1000_1488/0?e=1604534400&v=beta&t=TL3p15wOI4gq17YaEwYYyTCfFag6K9rO7ysi-rkJnRg)

#**Conclusion:**
in the end, PWA is a very powerful technology that very important for every web developer must learn and use based on the Features we describe before, Who knows, this could be your speciality.


What is the Progressive Web App (PWA)?   Progressive Web App (PWA) is a way to server the...

What is the Progressive Web App (PWA) and how it works?


![Alt Text](https://media-exp1.licdn.com/dms/image/C4E12AQFFXRRp2Urp6w/article-inline_image-shrink_1000_1488/0?e=1604534400&v=beta&t=36omjGyrsCEsOV2eQGXCdgaFCmmBaq5Z2tFNKWZkV3A)

#**What is web scraping?**
Web scraping is a way to take some data from a large amount of data on the website and export it in different types of shapes such as JSON, CSV, Excel sheets and various extensions depending on the application or framework we use all of this for the purpose of analyzing that data to draw conclusions and comparisons from it.

![Alt Text](https://media-exp1.licdn.com/dms/image/C4E12AQGxCLqM0OABSg/article-inline_image-shrink_1000_1488/0?e=1604534400&v=beta&t=q07Nae-k3HJnw8X62wD2Rt6yOqbZW7gsUFNMluOeTMU)

#**How does web scraping work?**
* the web scraping first take one or more websites URL
* then the scraper loads the HTML page, and if you use advanced scrapper it will render the entire page including CSS and JavaScript
* than scraper extract all the page data or specific element base on what we need
* then it will export the data in CSV, Excel, JSON or any other sport extinctions


![Alt Text](https://media-exp1.licdn.com/dms/image/C4E12AQF1W4KocY7PyQ/article-inline_image-shrink_1000_1488/0?e=1604534400&v=beta&t=HlQKHz64OZwYdNj2v6tWA2M9OYNSTFgAld3iI8Ph5rM)

#**What are the uses of web scraping?**
* Scraping data from websites to generate leads
* Scraping product data from sites like Amazon for competitor analysis
* Scraping product details for comparison shopping
* Scraping financial data for market insights and research
* Scraping jobs websites to find most Appropriate for clients
* there are a lot of things to use scraping with that is based on the person who uses it



![Alt Text](https://media-exp1.licdn.com/dms/image/C4E12AQF8lR0VSumZ0Q/article-inline_image-shrink_1000_1488/0?e=1604534400&v=beta&t=SdYCvj6JS5gel5IQ2IP8ouNYa9eC44-_z0CZIPS9eUY)

#**What do I need as a programmer to learn it?**

* Basic knowledge in programming languages like python or JavaScript
* Basic knowledge in a framework that is for scraping and this is some example for python (Scrapy, PySpider, Selenium)
* Basic Html knowledge that is for knew the type of element in the target web site to scrape it
* Basic CSS or XML knowledge that for use it to select the HTML * elements from the website by the framework tools
* (Optional) basic knowledge in the regular expression to search for the HTML elements in the website

![Alt Text](https://media-exp1.licdn.com/dms/image/C4E12AQF8slpeJDeJZA/article-inline_image-shrink_1000_1488/0?e=1604534400&v=beta&t=TL3p15wOI4gq17YaEwYYyTCfFag6K9rO7ysi-rkJnRg)

#**Conclusion:**
in the end, web scraping is an important topic and easy to learn by some basic knowledge you can begin to work in this niche



What is web scraping?   Web scraping is a way to take some data from a large amount of dat...

blog summary

1296

Articles reactions

33016

Articles views

55

Comments

506

Followers

Articles

Unique resources for web developers (html, CSS, font, color)

Unique resources for web developers (html, CSS, font, color)

Web security knowledge you must understand it (Part I: HTTPS, TLS, SSL, CORS, CSP)

Web security knowledge you must understand it (Part I: HTTPS, TLS, SSL, CORS, CSP)

Docker from the crust to the core, what and how it Works

Docker from the crust to the core, what and how it Works

What is the Progressive Web App (PWA) and how it works?

What is the Progressive Web App (PWA) and how it works?

What is the web scraping and how it works?

What is the web scraping and how it works?