Forem: Ahmed Atef

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

Ahmed Atef — Tue, 29 Sep 2020 13:47:28 +0000

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
	MDN Reference	I use this reference all the time for HTML and HTML5
	webSiteSetUp	for our hands, very good pdfs and images

`CSS`

	WEBSITE	DESCRIPTION
	MDN Reference	reference for CSS and CSS300
	Animate.css	CSS library that lets you understand CSS animation and add it easy
	can I use	support tables for front-end technologies for desktop or mobile browsers.
	Responsive Grid System	this website Generate html and CSS codes for a responsive web content.
	clippy	Tool for making clip-paths

`Fonts`

	WEBSITE	DESCRIPTION
	Google Fonts	Best resource for free and easy-to-use web fonts. Has an enormous library of fonts.
	Fontsquirrel	The best, 100% free fonts for commercial use. Another well-known huge font library.
	MyFonts	Very largest library of premium fonts

`Colors`

WEBSITE	DESCRIPTION	BY
Flat UI Colors	use it before starting your project for choosing a flat design color.
Material Palette	Inspired in material design. Generate your palette and download it and with some icons if you need.
UI Gradients	A collection of gradients for you to choose from and downloadable too.
grayscale	You can set generate your whole palette so that each color has the same range of color values	Kevin Kirchner
97palettes	collection of the primary colors for the most used applications	Ami Amigo

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, Twitter, LinkedIn 👈

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

Ahmed Atef — Tue, 22 Sep 2020 06:01:27 +0000

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
TLS
SSL
CORS
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 Source: ccPixs.com

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.

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

Image Source: wikipedia.com

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.

Image Source: cloudflare.com

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.

How SSL works?

it like the new TLS based on the concept of the handshake 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.

Image Source: morioh.com

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?

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.
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.
if the server specifies the Methods it will compare the request method with its example Access-Control-Allow-Methods: PUT, DELETE.

Image Source: keycdn.com

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’;

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, Twitter, LinkedIn 👈

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

Ahmed Atef — Wed, 16 Sep 2020 18:53:28 +0000

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”

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.

What are the docker components?

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

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
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

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.

👉 YouTube, Twitter, LinkedIn 👈

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

Ahmed Atef — Fri, 11 Sep 2020 11:03:35 +0000

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.”.

What Makes up a PWA?

Web Manifest
Service Worker
Static website

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.

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.
Re-engageable, maintain engagement with the user by push notifications.
shareable Can easily be linked via a URL.
Behave like native apps

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 web scraping and how it works?

Ahmed Atef — Thu, 03 Sep 2020 19:56:39 +0000

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.

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

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

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

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