DEV Community: Friyad

Docker in 2026: The Practical Notes That Help You Actually Understand It

Friyad — Fri, 24 Apr 2026 15:37:35 +0000

Everyone is talking about AI.

But if your application doesn’t run consistently across environments, none of it matters. That’s where Docker still plays a critical role in modern development.

Over the past weeks, I’ve been learning Docker deeply and documenting everything in a structured way, including commands and the concepts behind how Docker works.

What’s inside the notes?

What is Docker?
What is Containerization?
Difference between VM vs Containers
Pros & Cons of Containerization
Docker Architecture
Docker Registry vs Docker Hub

Core Concepts

Dockerfile
RUN vs CMD
COPY vs ADD
Docker Image & Layers
Tags

Networking & Ports

Port Binding
Why it matters
How it works (simple explanation)

Docker Network

Why we need it
Key idea

Docker Compose

Why we need it
How it solves real problems

Volumes (Very Important)

What problem it solves
How it works
Types:
- Named Volumes (recommended)
- Bind Mounts
How to use

Advanced Concepts

Profiles
Docker Commands
Common Docker Flags
Important Videos & Resources
Extra concepts you should know
Interview questions

⚠️ This is NOT a complete Docker course.

But if you're:

A beginner trying to understand Docker
A developer stuck in tutorial loops
Someone confused about dev vs production setups

👉 This will save you hours (or even days).

🔗 Access the full notes here: https://iridescent-busby-1ec.notion.site/Docker-Notes-d3acf16e711a49e38aa5db560ec84d38

If you find it useful, feel free to share your thoughts or ask questions. I’d be happy to discuss and improve it further.

A Story of The Birth of Cloud Computing

Friyad — Fri, 07 Feb 2025 12:13:07 +0000

Nowadays we don't have to worry about hosting an application. But, how did it become possible?

After the Dot-com Bubble burst in the early 2000s, many companies, like Pets.com, shut down. But, in this challenging time, Amazon managed to survive and grow up.

At the time, Amazon faced a unique problem: their servers were heavily utilized during peak seasons like Christmas, requiring them to purchase large amounts of hardware, such as storage and memory, to handle the increased traffic. But, during off-peak seasons, this expensive hardware remained unused. This causes them big losses.

That's why Amazon thought to make use of this massive unused storage, and memory. They planned to sell this unused memory and storage to other people. People can buy this storage and memory from Amazon but will pay only what they have used.

To address this inefficiency, Amazon came up with a revolutionary idea: why not offer this excess server capacity to other businesses and individuals? By doing so, customers could rent Amazon's powerful servers and pay only for what they used. That makes the no need for upfront investment in hardware.

From this intention, in 2006 they launched AWS EC2 (Elastic Compute Cloud)—a game changer. Which gives access to other people to use Amazon's powerful computer.

It marked the true birth of cloud computing as we know it today.

.
.
.

Interestingly, the concept of cloud computing was first introduced by J.C.R. Licklider in the 1960s. He envisioned a network that could provide access to data and programs from anywhere, which is remarkably similar to what cloud computing achieves today.

Thanks to this revolutionary innovation, we can now host applications without worrying about hardware, enabling businesses to scale faster, reduce costs, and focus on innovation.

RIYAD HOSSAIN
Fullstack Developer
Top-rated Freelancer @ Upwork | 3+ Years of experience_

Make a smart button! 😀 using plain HTML5 + Tailwind CSS button with proper hover effects and transitions

Friyad — Mon, 13 May 2024 18:18:46 +0000

In this article, we'll create a sleek and interactive Smart Button using plain HTML5 and Tailwind CSS. This Smart Button is perfect for quick user actions, adding a touch of sophistication and functionality to any website. A button plays a key role in providing a smooth user experience for any website.

View Live Demo

Before we get started, let's take a moment to understand Tailwind CSS. Tailwind CSS is a popular open-source CSS framework that follows a utility-first methodology, offering a wide range of utility classes for styling elements. With Tailwind CSS, we can easily create modern and responsive UI components without writing custom CSS.

Now let's get started!

1. Install Tailwind CSS:

Make sure you have Tailwind CSS installed. If you don't have you can use it via CDN.

<script src="https://cdn.tailwindcss.com"></script>

or Install it according to your tach see Tailwind CSS Website

In my case, I am using plain HTML doc. For quick, I have added tailwind CDN.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Smart Button</title>
</head>
  <body>
  </body>
</html>

2. Create a wrapper (optional):

Create a wrapper using div to center the button to make sure that it is easily visible.

<div class="bg-yellow-100 h-screen w-full overflow-hidden flex justify-center items-center">

</div>

Output:

3. Make the basic HTML structure:

As we know we use HTML to create the structure of websites. We have to make button the structure first.

 <button class="">
<!-- Two span tags to create text slide animation while hovering -->
      <div class="">
        <span class="">Click Now</span>
        <span class="">Click Now</span>
      </div>

<!-- SVG for Right Arrow with its container -->
      <div class="">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow" class="stroke-white">
          <g
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path d="M1 7h16M11 1l6 6-6 6"></path>
          </g>
        </svg>
<!-- Div to create background slide animation while hovering -->
        <div class=""></div>
      </div>
<!-- Div to create background slide animation while hovering of the button (root) -->
      <div class=""></div>
    </button>

Output:

4. Apply styles on the structure:

Since we are using tailwind CSS and we already have the HTML structure made then we just have to apply the tailwind CSS style to the HTML structure using classes.

<button class="group flex justify-center items-center gap-6 px-12 py-4 bg-purple-600 text-white font-mono font-semibold text-xl relative overflow-hidden rounded-xl border-4 border-black hover:border-purple-600 shadow-[4px_8px_0px_#000] hover:shadow-[0px_0px_0px_#000] transition-all duration-200 uppercase">
      <div class="relative overflow-hidden z-[1] transition-all duration-200">
        <span class="group-hover:translate-y-full inline-block transition-all duration-200">Click Now</span>
        <span class="absolute inset-0 -translate-y-full group-hover:translate-y-0 inline-block transition-all duration-200">Click Now</span>
      </div>

      <div class="w-12 aspect-square rounded-full border-2 border-white group-hover:border-purple-600 flex justify-center items-center bg-purple-600 z-[1] transition-all duration-200 relative overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow" class="z-[1] stroke-white group-hover:stroke-purple-600 transition-all duration-200">
          <g
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path d="M1 7h16M11 1l6 6-6 6"></path>
          </g>
        </svg>
        <div class="absolute inset-0 bg-white rounded-full translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
      </div>
      <div class="absolute inset-0 bg-black -translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
    </button>

5. Final code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Smart Button</title>
</head>
<body>
  <div class="bg-yellow-100 h-screen w-full overflow-hidden flex justify-center items-center">

    <button class="group flex justify-center items-center gap-6 px-12 py-4 bg-purple-600 text-white font-mono font-semibold text-xl relative overflow-hidden rounded-xl border-4 border-black hover:border-purple-600 shadow-[4px_8px_0px_#000] hover:shadow-[0px_0px_0px_#000] transition-all duration-200 uppercase">
      <div class="relative overflow-hidden z-[1] transition-all duration-200">
        <span class="group-hover:translate-y-full inline-block transition-all duration-200">Click Now</span>
        <span class="absolute inset-0 -translate-y-full group-hover:translate-y-0 inline-block transition-all duration-200">Click Now</span>
      </div>

      <div class="w-12 aspect-square rounded-full border-2 border-white group-hover:border-purple-600 flex justify-center items-center bg-purple-600 z-[1] transition-all duration-200 relative overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow" class="z-[1] stroke-white group-hover:stroke-purple-600 transition-all duration-200">
          <g
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path d="M1 7h16M11 1l6 6-6 6"></path>
          </g>
        </svg>
        <div class="absolute inset-0 bg-white rounded-full translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
      </div>
      <div class="absolute inset-0 bg-black -translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
    </button>

  </div>
</body>
</html>

GitHub Repo Smart Button

Visit My Portfolio

Happy Coding ✨

Frontend Developer? Here are 10 resources that can make your work easier.

Friyad — Sun, 28 Apr 2024 20:39:45 +0000

Including SVG Shapes, Loader, Waves, Gradient, Blob, Font Finder, CSS animation, and Illustrations

1. https://www.svgshapes.in

A website with 100+ beautiful SVGs. No Attribution required. You can customize their color with solid and gradient. Then use them for your project by downloading them as PNG or Copy as SVG.

2. https://loading.io

A website where you can get the Loaders for your website. Ajax Loader, Animated Icons, Live Background, in GIF / SVG / APNG / CSS / LOTTIE / MP4 & More!

3. https://getwaves.io

Make some waves! A website where you can make Waves for 100% FREE with color and shape customization.

4. https://cssgradient.io/gradient-backgrounds

A website dedicated to Gradient Backgrounds.

5. https://www.magicpattern.design/tools/blob-generator

A website to create Blob for your project.

6. https://www.myfonts.com/pages/whatthefont

Instant font identification powered by the world’s largest collection of fonts. A font finder website. You can find a font from screenshots or other images. It is really helpful when you are not able to identify what font anyone else using.

7. https://undraw.co/search

A website dedicated to Illustrations

8. https://www.cssportal.com/css-column-generator/

CSS Portal is home to many examples of CSS / HTML and how it can be used in website design. Here you'll find all CSS properties and many CSS generators to help with all your design needs.

9. https://svgwave.in/

SVG wave generator with animations

10. https://meshgradient.in/

Beautiful mesh gradient generator

Bonus: https://gradient.style/

Advanced CSS gradient generator

Give them a try and watch your designs come to life! 💻

Happy Coding ✨

FrontendDevelopment #WebDesign #DeveloperTools #codinglife #frontend #developer

First impressions matter! Take your GitHub profile to the next level!

Friyad — Sun, 28 Apr 2024 10:09:37 +0000

Your readme.md is often the first thing visitors see when they land on your GitHub profile. A well-designed readme can leave a positive impression to explore further.

Since the GitHub profile is 2nd resume, everyone should have an updated, well-designed, and clean GitHub profile.

✨ How Can You Update Your Readme.md?

You just have to create a repository with your "GitHub username".
Create a Readme.md file on that repository.
To make your work easier, you can use one of these websites:

Then commit to it and share with us how it looks

Happy coding! 😀

coding #codinglife #developer #frontend

Never choose a technology only for earning $$ money 🤑, you might choose the wrong thing.

Friyad — Tue, 16 Apr 2024 07:24:08 +0000

Never go grocery shopping when you are hungry, you will grab the wrong things. Same as technology, never choose a technology only for earning $$ money 🤑, you might choose the wrong thing.

Hey folks, Riyad Hossain here. Today I am going to talk about "how I will choose a technology, particularly a framework".

Well, you know there is something called "trend" and "competition". These two words are completely related to each other. And when a technology comes up to trend it also creates competition. So if you learn a trending technology you must compete with a large number of people, keep it in mind.

I personally, like this trend. But, I politely disagree with just staying with trending technologies. Because I think I should have to be a trend creator.

You might be thinking trending technologies are used by many companies, everyone is talking about it, etc. And If I learn this technology I might earn a good amount. Yeah, that's good, you can. But, you have to compete with a large amount of people.

Let's say you compete with these people and earn a lot of money using this technology. Still, you should have a concern. If this trend stops what will happen?

That's why I always say, you are choosing a trending technology that's good. But, alongside this trending technology you should learn other technologies that solve your problem though they are not trending right now. Also, you should have to be up to date with the tech community and try to adapt to new technologies that come to the market. Just explore them and try to find interesting things that solve your problems. In this way, you will be 1 step faster than other developers.

technologynews #technology #framework #nextjs #vuejs #developers

developertools #developertips