DEV Community: Inam Ul Haq

How Emails Reach an Inbox

Inam Ul Haq — Sun, 05 Dec 2021 17:44:13 +0000

What happens when you send a message on let's say Twitter? Leaving Twitter's business logic, the answer is simple. The message gets stored in a database with the ids of the sender and the receiver. Whenever needed, messages can be retrieved and displayed. It's easy, right? Well, emails are not!

Let's now see how emails reach an inbox/mailbox.

Bob sends an email to Sarah

Let's say Bob uses Gmail and Sarah uses Yahoo. Bob writes an email for Sarah and hits the send button.

Before going further, let me introduce two types of servers involved in this whole Email business; SMTP (Simple Mail Transfer Protocol) server and IMAP (Internet Message Access Protocol) server.

POP, an alternative to IMAP, can also be used, but we will discuss that another day.

SMTP

SMTP servers send and receive emails. For the most part, SMTP servers do what's called relaying. After receiving and processing the email, the server tries to move (relay) the email to its destination. A destination can be another SMTP server or if the server itself is the destination, a directory/folder on the same server.

An email may pass through several SMTP servers before reaching its destination.

IMAP

IMAP is simple. It just retrieves the emails from where SMTP left them and makes them available to be used by Email Clients. You might remember configuring your Email Client like Thunderbird to use your mailbox provider's provided IMAP settings. Some Email Clients do it automatically though.

When Bob and Sarah signed up for their respective mailbox providers (Gmail and Yahoo), both got accounts on their providers' SMTP and IMAP servers.

Now coming back to Bob and Sarah

After all the routing and DNS business, Bob's email reaches his SMTP server (Gmail). SMTP server processes the email and finds out its destination which is Yahoo's SMTP server. It then relays the email to Yahoo's SMTP server.

Yahoo's SMTP server receives the email and determines that it itself is the destination server. The server then just move the email to Sarah's mailbox (directory/folder) which is on the same server.

Sarah's mailbox has a new Email. Sarah's IMAP server makes the email available to be fetched by Email Clients. And Email Clients, checking up with the IMAP server after a specified interval, find out Sarah has a new email. Sarah gets a notification and now she can read it 🙌

Ask any question in the comments and I'll try to answer it!

Follow me on twitter @MeInamUlHaq

Also, checkout Free Email Verifier which I built.

Why I like Tailwind CSS with React?

Inam Ul Haq — Mon, 08 Feb 2021 14:17:38 +0000

I've been using Tailwind CSS with React for some months now. I've used it on my website inambe.dev and several of my clients' websites.

Here in this post, I'll be laying out what I liked about using Tailwind CSS with React and why I still want to use it for my future projects.

This post is mainly about Tailwind CSS not React.

Tailwind CSS

Tailwind is a utility-first CSS framework. What utility-first, in the case of Tailwind, means is that framework itself won't style any element but provide CSS utilities, in the form of CSS classes, for you to design UI yourself with consistency.

Unlike Bootstrap, which provides pre-styled elements' classes (like btn and form-control) with limited configuration capability, Tailwind doesn't style any element and also provides a great configuration capability.

Likes

I will not list the obvious likes of utility-first frameworks.

Configuration

Tailwind can very easily be configured to the extent that two websites would never look like that they're designed with the same framework. If you've ever been on the internet; you know a bootstrap website when you see one.

We can change or extend colors, fonts, spacing, breakpoints (for responsive design), and every other thing we have utilities for, without losing consistency. All in a single file. We can disable plugins we don't need or extend it with our own ones.

Tailwind provides utilities through its plugin system.

Responsive design

Responsive design is always the hardest job for me. Tailwind makes designing UI for different screen sizes a bliss! It has what is called a mobile-first approach to build the UI.

This one is the most important factor why I have and will use Tailwind.

// make font size large on screen size '768px' and above
<p className="text-base md:text-lg"></p>

Sane defaults

Even though we can configure Tailwind in almost any way possible, it has very nice and sane defaults. Its defaults can cater most of the needs for my projects by default.

For example, the spacing, I've never changed it for any of my projects because it works just as I need them to be even though I can change that.

Most of the times, I just change fonts and colors in the configuration file and I'll be ready to start developing.

VSCode extension

One of the most frustrating things that a utility-first framework can present is keeping track of the classes and remembering its names but this VSCode extension has, for the most part, solved it for me.

This extension provides many useful features like autocomplete, linting, and hover previews which can make developing with Tailwind a wonderful experience.

Directives

Directives are one of the most important features of Tailwind, which mostly helps with each project's needs without restricting anything. They can be used in many ways and for many purposes.

@apply directive is the one that I've used the most so far. We can create our own utility classes composing utility classes provided by Tailwind using @apply directive:

.btn {
  @apply py-2 p-4 font-medium;
}

At the build time, Tailwind will replace @apply and its proceeding utility classes with their respective CSS styles. The above code in a CSS file would produce:

.btn {
  padding: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
}

Performance

One of the concerns we can have about a utility-first framework is that how it handles the unused utilities, which can greatly increase the size of CSS bundle.

Luckily, Tailwind can purge (remove from output CSS bundle) unused utilities with just changing/adding couple of lines of configuration.

For example, I've this configuration in one of project's Tailwind configuration file, which purges unused utilities from output CSS bundle:

...
purge: [
  "./src/**/*.js",
]
...

Conclusion

Tailwind with React has proven to be a very joyous experience for me to develop websites and apps with, due to reasons I've listed in the post.

URL trailing slash — Gatsby

Inam Ul Haq — Sun, 07 Feb 2021 07:35:35 +0000

URL trailing slash can present some problems for Gatsby websites that probably can hurt your SEO. Find out these problems and their solution.

Recently I was updating my website inambe.dev and building my blog, Belog. After doing most of the programming stuff, I relaxed a bit to do Google its job and well rank my website on the first page of Google 😀.

A few days later, I checked my Google Search Console to see how many pages Google has found and indexed from my website and the result was quite disappointing, to say the least. See for yourself:

19 (NINETEEN)! pages were excluded from indexing. Now, that's not necessarily wrong because it serves a purpose. There are times when you do not want a page to be indexed. But, that's never my intention for any page. So how this happened?

Trailing slash

Trailing slash is a forward slash / at the end of a URL. People have a difference of opinion whether it's good or bad. But I really never ever gave it a thought, I just used the choices that Netlify and Gatsby has by default. Now there were some problems.

Problem#1

Netlify ~~redirects~~ redirected all the URLs without trailing slash to the same URL with the trailing slash. So, for example, /contact would be redirected to /contact/. That's a problem because when Google Bot finds the /contact link on my home page and proceeds to index it, Netlify ~~redirects~~ redirected Google Bot to /contact/.

6 of my pages were affected by this problem. You can see that in the screenshot I attached above. (the one titled Page with redirect)

Problem#2

I was using a Gatsby plugin to automatically generate the sitemap for my website. This plugin mentioned all the pages with trailing slashes in them.
The problem with that was, Google Bot identified each page two times; one from links on my website, which were without trailing slashes, and one from sitemap, which had trailing slash.
So Google Bot was like "yeah, I kinda found your pages, but they're not present in the sitemap, and also they redirect me 😔"

Problem#3

The last one, bear with me, please. Since I was setting the canonical URL meta tag on each page, I was setting ... yes, you guessed it, without the trailing slash! which was returning a redirect HTTP response. Essentially canonical URLs weren't working, and Google Bot was having a rough time in the field on that day.

Solution 🎉

The solution was simple, and I did not have a choice either (I'll tell you why). I had to embrace the trailing slash. I changed all the links on my website to add trailing slash in them.

I also needed to add trailing slash on dynamically generated pages. I have this function in my code. Notice the trailing slash:

module.exports.getBlogURL = slug => {
    return `/blog/${slug}/`
}

Why didn't I had a choice to remove the trailing slash all together?

Because that's how Gatsby routing works. If you see a Gatsby build of a website, it has folders named after the slug of the pages and index.html files in them, which loads automatically when we hit the slug on the website. It's just like, well, a regular static site, and that's exactly what Gatsby claims to be; a static site generator.

Why didn't I notice it earlier?

Because when we're surfing a Gatbsy website, it doesn't work as a regular static site. It works like React Router, and we can easily forget how Google Bot would treat the website.

Computer Networking & HTTP

Inam Ul Haq — Sat, 13 Jun 2020 20:48:26 +0000

Series: How WWW works?

WWW(World Wide Web) is so popular nowadays that apart from websites and web applications, even mobile apps and computer games won't work without it.

HTTP(Hypertext Transfer Protocol) is the main protocol behind WWW and some people even use the words HTTP and WWW interchangeably.

I believe almost all web devs know about HTTP and WWW but some don't explore (or they're not taught) about another part of WWW which is computer networking. This is because computer networking is often considered as a Computer Science(academic) subject and self-taught web devs rarely need to know this.

Computer Networking & HTTP

HTTP only defines rules for communication between server and client(internet browser) but for communication we need to connect to other computers first. That's where computer networking protocols come in.

Internet browsers use computer networking protocols and HTTP to provide us the greatness and usefulness of WWW

TCP/IP and UDP are two popular computer networking protocols used to connect computers, so they can communicate. Both of these protocols are implemented in most of the operating systems out there. All the DNS and Socket stuff happen in these protocols.

HTTP clients leverage these computer networking protocols to connect to different HTTP servers (like Facebook's) and then talks to them in HTTP.

TCP/IP is the most popular computer networking protocol for WWW, so I'll be using TCP/IP to represent the computer networking protocol for rest of the post.

Introduction to HTTP

HTTP is a client-server architected protocol where the client and server can share information and ask each other to do a certain task(s) using agreed-upon language.

HTTP defines words, manners, and rules for communication between client and server.

HTTP Request

An HTTP request is simply a text written using rules defined by HTTP. HTTP clients make a connection, often using TCP/IP, to the server for sending the HTTP request.

Example:

GET / HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.google.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

Let's see what HTTP request above tells the server(which it's being sent to).

The first line of an HTTP request is a special line called request-line. In the example above it is saying that the request is a GET request, to the / document(web page address), using 1.1 version of HTTP.

Headers

All the lines after the request-line (until an empty line or end of the request) are HTTP Headers(Header for singular). Headers are written in colon-separated key:value pairs. Headers are used to share information and/or instruct client or server to do a certain action(s). In the example above Host header is used to tell the server that we're looking for www.google.com (a single server can have more than one host), and other headers for other kinds of information.

HTTP Response

HTTP server responds to an HTTP request, interpreting it, with an HTTP response, which is sent to the client using the connection the server received the request from. HTTP response then will be interpreted by the HTTP client.

Example:

HTTP/1.1 200 OK
Content-Encoding: gzip
Accept-Ranges: bytes
Age: 322343
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Sat, 23 May 2020 05:20:54 GMT
Etag: "3147526947"
Expires: Sat, 30 May 2020 05:20:54 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (bsa/EB18)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 648

<!doctype html>
<html>
...
</html>

You may notice how the HTTP request and response examples are pretty similar; headers and first special line.

The first special line in an HTTP response is called the status-line. In the example above it is saying that the response is using 1.1 version of HTTP and the HTTP status code is 200 with the phrase OK.

You may notice there is some content after headers and a line break; it's a response body(a request can have it too). HTTP request/response body is often interpreted as instructed in headers as in the example above, Content-Type header tells the client that response type is text/html; charset=UTF-8 thus client will treat it as an HTML page.

*line break after headers indicates that headers have ended
*custom/non-standard headers are allowed in both request and response

HTTP Transaction Lifecycle

backdrop: you use the internet browser to request www.google.com

The browser uses TCP/IP protocol, provided by the Operating System, to connect to www.google.com server
The browser prepares and sends HTTP request to the server using connection made in the previous step
The server receives HTTP request
The server interprets HTTP request and responds with HTTP response
The browser receives the HTTP response
Browser interpret HTTP response (e.g. if it's HTML; render it)

*browser is an HTTP client
*server in the post means a web/HTTP server(there are other kinds of servers too)

this post is the rewrite of my last post How HTTP works?

If you didn't get any concept/term from the post, ask me in the comments section.
You can follow me on Twitter

How HTTP works?

Inam Ul Haq — Sat, 23 May 2020 06:42:38 +0000

HTTP is a protocol used for WWW(World Wide Web) which serve us functional websites, web applications, and web APIs. HTTP clients (internet browsers) use TCP/IP or UDP networking protocol with HTTP to provide us the greatness and usefulness of WWW.

Why we need `TCP/IP` or `UDP` with `HTTP`?

HTTP only defines rules for communication between server and client(internet browser) but for communication, we need to connect to other computer first.

TCP/IP and UDP are two popular networking protocols used to connect computers together, so they can communicate. Both of these networking protocols are implemented in most of the Operating Systems out there. All the DNS and sockets stuff happens in TCP/IP and UDP protocols not in HTTP.

HTTP clients leverage these protocols to connect to different servers (like Facebook's) and then talks to them in HTTP. TCP/IP is most popular among others, so I'll be using that for rest of the post.

Introduction to HTTP

HTTP is a client-server architected protocol where client and server can ask each other to do specific tasks using agreed upon language(HTTP). HTTP defines words and manners for communication between client and server e.g. take a look at following HTTP request:



GET / HTTP/1.1
User-Agent: Mozilla/4.0 (compatible; MSIE5.01; Windows NT)
Host: www.google.com
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Connection: Keep-Alive

This request is a GET request, to the www.google.com Host, asking for the / document (document is term used in HTTP for a web page), using 1.1 version of HTTP, along with other instructions/information for the server.

Now server will respond with a HTTP response, according to the request. Response then will be interpreted by the HTTP client. Take a look at the following HTTP response:



HTTP/1.1 200 OK
Content-Encoding: gzip
Accept-Ranges: bytes
Age: 322343
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Sat, 23 May 2020 05:20:54 GMT
Etag: "3147526947"
Expires: Sat, 30 May 2020 05:20:54 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (bsa/EB18)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 648

<!doctype html>
<html>
...
</html>

You can notice there are two kinds of data in the HTTP response; lines of colon separated key:value pairs and raw data; separated by a line break.

Colon separated key:value pairs are called a headers(header for singular). Some standard headers are for instructions(like Connection) and others are for information(like User-Agent).

Raw data is called body of the request or response. body can contain any kind of raw data e.g. html, json, binary files, and form data.

Both request and response can contain HTTP defined standard and non-standard headers and a body.

Most of the time, servers and clients interpret body as instructed in the headers. For example, the response above has a Content-Type: text/html; charset=UTF-8 header which instructs HTTP client to interpret body of the response as HTML which results in a rendered HTML page.

`HTTP` transaction lifecycle

backdrop: you use internet browser to request www.google.com

Browser uses TCP/IP protocol, provided by the Operating System, to connect to www.google.com server
Browser sends HTTP request to the server using connection made in previous step
Server receives HTTP request
Server interpret HTTP request and respond with HTTP response
Browser receives HTTP response
Browser interpret HTTP response (e.g. if it's HTML; render it)

browser is an HTTP client
server in the post means a web/HTTP server(there are other kinds of servers too)

If you didn't get any concept/term from the post, ask me in the comments section.

You can follow me on Twitter

Checkout GetResume, a Free Resume Builder

What is proto? | JavaScript

Inam Ul Haq — Fri, 07 Jun 2019 12:15:35 +0000

You'd probably notice this __proto__ property every time you log an object into the developer console.

In this post, I'm gonna try to explain where this __proto__ comes from, what it contains, and anything in between. So, let's get this __proto__.

First, let's understand how a JavaScript object gets constructed. Once you understand how an object gets constructed, __proto__ property is gonna make a lot more sense than otherwise.

How an `object` get constructed?

A JavaScript object, always, get constructed/produced by a constructor function. Now, you'd probably say "But, object literals? They are not constructor functions."

Well, object literals are just syntactic sugar. You can write objects without using object literals. See the example below, both syntax would produce the same output. The second approach gives us more power(which we won't discuss here) which object literal takes away from us.

// an object using object literal
const person = {
  name: "John",
  age: 30
};

// an object using Object constructor function
const person = new Object();
Object.defineProperties(person, {
  name: {
    value: "John"
  },
  age: {
    value: 30
  }
});

Now that we know that every object, in JavaScript, is constructed by a constructor function, let's get back to the original question.

What is `proto`?

__proto__ is a property, in every JavaScript object, which points to object's constructor function's prototype property. I know it's a bit hard to grasp, but let me simplify it for you.

Every constructor function has this prototype property on them. The picture below shows us Object constructor function's prototype property.

So, every object, we'd construct/produce from Object constructor function, would have __proto__ property pointing to Object constructor function's prototype property.

Example

When we use object literals, as we did in the example below, Object constructor function is used to construct/produce the object. Now that we have a person object constructed/produced from Object constructor function, we can verify that __proto__ from our person object is same as prototype from Object constructor function.

// an object using object literal
const person = {
  name: "John",
  age: 30
};
// verify
console.log(person.__proto__ === Object.prototype); // true

If you didn't understand something from the post, or I missed something, please, let me know.

This is my first ever blog post and I'm open to criticism/suggestions.

How to prevent misuse of a public REST API endpoint.

Inam Ul Haq — Fri, 20 Jul 2018 20:45:31 +0000

I have a REST API for CRUD operations on a database table, where inserting record does not require any authentication. The question is, how can I prevent that endpoint of my API from possible misuse, cause anyone can enter thousands of rows in a minute using a simple script.

I'm using Slim-PHP and JWT.

Thank You.

DEV Community: Inam Ul Haq

How Emails Reach an Inbox

Bob sends an email to Sarah

SMTP

IMAP

Why I like Tailwind CSS with React?

Tailwind CSS

Likes

Configuration

Responsive design

Sane defaults

VSCode extension

Directives

Performance

Conclusion

URL trailing slash — Gatsby

Trailing slash

Problem#1

Problem#2

Problem#3

Solution 🎉

Why didn't I had a choice to remove the trailing slash all together?

Why didn't I notice it earlier?

Computer Networking & HTTP

Computer Networking & HTTP

Introduction to HTTP

HTTP Request

Headers

HTTP Response

HTTP Transaction Lifecycle

How HTTP works?

Why we need TCP/IP or UDP with HTTP?

Introduction to HTTP

HTTP transaction lifecycle

What is __proto__? | JavaScript

How an object get constructed?

What is __proto__?

Example

How to prevent misuse of a public REST API endpoint.

Why we need `TCP/IP` or `UDP` with `HTTP`?

`HTTP` transaction lifecycle

What is proto? | JavaScript

How an `object` get constructed?

What is `proto`?