Take your Docker skills to the next level in Part 2 of our guide. Learn how to write Dockerfiles, manage containers and images, use volumes and networking, and orchestrate multi-service apps with Docker Compose. Discover best practices to build production-ready applications with Docker.

Docker Explained: Advanced Concepts & Best Practices (Part 2)| Tech Tips By Moh

Docker Explained: Advanced Concepts & Best Practices (Part 2)

Learn Docker step by step in this beginner’s guide. Discover what Docker is, why developers use it, key benefits, and how it differs from virtual machines. Follow along with installation instructions, basic Docker commands, and your first container setup .everything you need to start mastering Docker.

Docker explained: A complete beginner's guide (part1) | Tech Tips By Moh

Docker explained: A complete beginner's guide (part1)

<h2>1.Introduction &amp; Why Next.js?</h2> When working with React, you quickly realize that building fast, SEO-friendly, and production-ready applications can be challenging. React is fantastic for creating dynamic user interfaces, but it doesn&rsquo;t give you built-in solutions for things like server-side rendering (SSR), static site generation (SSG), or file-based routing. This is exactly where Next.js comes in. Next.js is a React framework that gives developers powerful tools to build modern web applications. With Next.js, you can pre-render pages on the server, optimize performance out of the box, and even build APIs directly inside your project. That means you don&rsquo;t just write front-end code, you get a complete full-stack experience without leaving the React ecosystem. In this blog, we&rsquo;ll take a step-by-step approach to explore the core features of Next.js. From setting up your first project to building routes, fetching data, and finally deploying your app to production, you&rsquo;ll learn how Next.js makes web development both simpler and more powerful.<h2>2.Quick Setup :Create Your First Next.js App</h2> Before diving into the powerful features of Next.js, let&rsquo;s start with the basics: creating your very first Next.js project. The setup process is surprisingly simple, thanks to the official tool provided by the Next.js team. This tool takes care of everything for you installing dependencies, configuring the project structure, and preparing scripts to run your app locally. All you need to do is run a single command in your terminal. Open your terminal and type the following command:<pre><code>npx create-next-app@latest my-next-app</code></pre> This command does a few important things: <ol> <li>It uses npx, a tool that comes with Node.js, to download and run the official Next.js project generator.</li> <li>It installs all the dependencies you&rsquo;ll need, including React and Next.js itself.</li> <li>It creates a new folder called my-next-app with a ready-to-use project structure inside.</li> </ol> Once the setup is finished, navigate into your project folder and start the development server:<pre><code>cd my-next-app
 npm run dev</code></pre>By running npm run dev, you&rsquo;re starting a local development server. By default, this server runs at http://localhost:3000. Open that address in your browser, and you&rsquo;ll see a welcome page generated by Next.js. This page confirms that everything is working correctly, and your project is ready to explore. At this point, you already have a working Next.js application without writing a single line of code. This is one of the biggest advantages of using frameworks like Next.js: they handle the setup and configuration so you can focus on building features. With the boilerplate project ready, the next step is to explore how pages and routing work in Next.js and that&rsquo;s where the real fun begins.<h2>3.Pages &amp; Routing Simplified:</h2> One of the standout features of Next.js is its file-based routing system. In traditional React apps, you usually need a library like React Router to handle navigation between pages. But in Next.js, the process is much simpler: any file you add inside the pages/ directory automatically becomes a route in your application. This eliminates the need for complicated configuration and makes routing incredibly intuitive. For example, let&rsquo;s create a new page called about.js inside the pages/ folder:<pre><code>// pages/about.js
export default function About() {
 return &lt;h1&gt;About Us&lt;/h1&gt;
}</code></pre>Now, if you open your browser and navigate to http://localhost:3000/about, you&rsquo;ll instantly see the &ldquo;About Us&rdquo; page. You didn&rsquo;t have to set up any router manually the routing is handled automatically by Next.js. This approach also works for nested folders. If you create a file at pages/blog/index.js, it becomes available at /blog. If you add another file at pages/blog/post.js, it will be accessible at /blog/post. Each folder and file maps directly to a URL path, which keeps your project structure organized and predictable. Next.js also supports dynamic routing. Instead of creating a separate file for every possible page (like /blog/post1, /blog/post2, etc.), you can define a dynamic route using square brackets. For example:<pre><code>// pages/blog/[id].js
 export default function BlogPost({ params }) {
 return &lt;h1&gt;Blog Post: {params.id}&lt;/h1&gt;
}</code></pre>With this setup, visiting /blog/hello will render &ldquo;Blog Post: hello&rdquo;, and /blog/123 will render &ldquo;Blog Post: 123&rdquo;. This flexibility allows you to create scalable applications without duplicating code for every route. In short, the routing system in Next.js combines simplicity with power. Beginners love it because they don&rsquo;t have to deal with complex configuration, while advanced developers appreciate the flexibility it brings for building dynamic, real-world applications. With routing covered, the next step is learning how to style your Next.js pages effectively.<h2>4.Styling CSS Modules &amp; Built-In CSS Support:</h2>Designing a modern web application isn&rsquo;t just about functionality it&rsquo;s also about presentation. Clean, attractive, and consistent styling plays a huge role in user experience. With plain React, you have many options for styling, such as global CSS files, CSS-in-JS libraries, or frameworks like Tailwind CSS. Next.js takes this a step further by giving you built-in support for CSS and an incredibly useful feature called CSS Modules.By default, you can import a global CSS file (like styles/globals.css) into your project, and the styles inside it will apply to the entire application. This is useful for setting up base styles, such as typography, body background, or resetting margins and paddings. However, for individual components and pages, global styles can become messy, because styles can accidentally overlap and affect unrelated parts of your app.That&rsquo;s where CSS Modules shine. A CSS Module is simply a CSS file where all class names are scoped locally by default. This means the styles you define in a module only apply to the component that imports them. No more accidental collisions! Let&rsquo;s look at a quick example:<pre><code>/* styles/Home.module.css */
.title {
 color: blue;
 font-size: 2rem;
 text-align: center;
 }</code></pre><pre><code>// pages/index.js
import styles from '../styles/Home.module.css'
export default function Home() {
 return &lt;h1 className={styles.title}&gt;Welcome to Next.js!&lt;/h1&gt;
 }</code></pre>Here, the class .title is automatically scoped to the Home component, so you don&rsquo;t need to worry about it affecting another part of your app. Another advantage of CSS Modules is that they keep your styles organized. As your project grows, you can create separate CSS Modules for each page or component. For instance, you might have Header.module.css for your header, Footer.module.css for your footer, and so on. This approach ensures that your styling remains clean, modular, and easy to maintain. Of course, Next.js doesn&rsquo;t limit you to just CSS Modules. You can still use other approaches, like global CSS files, Sass/SCSS, styled-components, or Tailwind CSS. The beauty of Next.js is that it integrates smoothly with most popular styling solutions, giving you the freedom to choose what works best for your project. In short, styling in Next.js is both flexible and powerful. Beginners can start with the built-in options like CSS Modules, while more advanced developers can integrate their favorite tools. In the next section, we&rsquo;ll move from styling the UI to one of the most critical aspects of web development: fetching data.<h2>5.Fetching Data getStaticProps vs getServerSideProps:</h2> Almost every web application needs to fetch data: blog posts from a database, products from an API, or user information from a server. In plain React, data fetching is typically done on the client side using useEffect or similar hooks. While this works, it comes with a major downside: the content isn&rsquo;t available until after the JavaScript runs in the browser. This means slower load times and weaker SEO, because search engines may not see your content immediately. Next.js solves this problem with pre-rendering. Instead of waiting for the browser to fetch data, Next.js can fetch it in advance either at build time or on every request. This ensures your users (and search engines) see fully rendered pages immediately. The two main functions that power this system are getStaticProps and getServerSideProps. <h3>getStaticProps (Static Generation):</h3> This function is used when you want to fetch data at build time. Next.js runs it during the build process and generates static HTML pages that include the fetched data. This is great for content that doesn&rsquo;t change often, like blog posts, documentation, or marketing pages. Example:<pre><code>// pages/index.js
export async function getStaticProps() {
 const time = new Date().toISOString()
 return { props: { time } }
}
export default function Home({ time }) {
 return &lt;p&gt;Page generated at build time: {time}&lt;/p&gt;
}</code></pre>HTML Content to Copy
If you build and deploy your app, the page will always show the same time until you rebuild it. <h3>getServerSideProps (Server-Side Rendering):</h3> This function runs on every request. Instead of generating pages once at build time, Next.js executes the function whenever a user requests the page. This is perfect for data that changes frequently like dashboards, real-time statistics, or personalized content. Example:<pre><code>// pages/server-time.js
export async function getServerSideProps() {
 const time = new Date().toISOString()
 return { props: { time } }
}
export default function ServerTime({ time }) {
 return &lt;p&gt;Page generated on server at: {time}&lt;/p&gt;
}</code></pre>Now, every time you refresh the page, you&rsquo;ll see a new timestamp because the data is fetched on the server for each request. <h4>So, when should you use each one?</h4> <ul> <li>Use getStaticProps when your data is stable and doesn&rsquo;t change often. This makes your pages fast and highly cacheable.</li> <li>Use getServerSideProps when your data changes frequently or depends on the user&rsquo;s request. This ensures the user always sees the latest information.</li> </ul> By mastering these two functions, you unlock one of the biggest advantages of Next.js: delivering fast, SEO-friendly pages without sacrificing dynamic data. In the next section, we&rsquo;ll move to another powerful feature of Next.js: API Routes, which allow you to build backend endpoints directly inside your project.HTML Content to Copy
<h2>6.API Routes Build a Backend Within Your Frontend</h2> One of the most powerful features of Next.js is its ability to handle API routes directly within the same project. Traditionally, frontend and backend code are kept separate: you build the UI in one place and host the server logic somewhere else. But with Next.js, you can write backend API endpoints inside your app itself no need for an extra backend server! This is especially useful for small to medium projects where you want everything in one place. Creating an API route is straightforward. Inside the pages/api directory, you can create files that automatically become API endpoints. For example, if you create a file called hello.js inside pages/api, it will be accessible at <a href="http://localhost:3000/api/hello">http://localhost:3000/api/hello</a>. Example:<pre><code>Javascript:
// pages/api/hello.js
export default function handler(req, res) {
 res.status(200).json({ message: "Hello from Next.js API!" });
}</code></pre>When you visit this route in your browser or send a request to it, you&rsquo;ll receive a JSON response with the message. You can add any logic you want here querying a database, sending emails, or handling form submissions. Each API route behaves like a mini serverless function that runs on demand whenever it&rsquo;s called. This built-in API system is what makes Next.js so unique. Instead of juggling multiple repos or deploying separate services, you can keep your frontend and backend code in a single codebase. While this might not replace a fully dedicated backend for large-scale apps, it&rsquo;s a fantastic solution for most projects from prototypes to production-ready apps. <h2>7.Deployment Basics with Vercel:</h2> Once you&rsquo;ve built your Next.js app and tested it locally, the next step is to deploy it so others can access it online. While you can host a Next.js app on many platforms, the easiest and most seamless option is Vercel, the company that actually created Next.js. Vercel is designed with Next.js in mind, so deploying your app is often just a matter of a few clicks. To deploy with Vercel, you simply need to connect your GitHub (or GitLab/Bitbucket) repository to Vercel. Every time you push code to your repository, Vercel automatically builds and redeploys your app. This makes your workflow incredibly smooth: develop locally, push changes, and see them live almost instantly. Here&rsquo;s how simple it can be: <ol> <li>Go to <a href="www.vercal.com">vercel.com</a></li> <li>Sign in with GitHub and import your project.</li> <li>Vercel will detect that it&rsquo;s a Next.js app and set everything up automatically.</li> <li>Within seconds, your app will be live on a public URL.</li> </ol> The best part? Vercel also gives you Preview Deployments for every pull request or branch. This means you can share a live preview link with your teammates or clients before merging code into the main branch. It&rsquo;s like having a staging environment built in for free. While Vercel is the default choice for most Next.js apps, you&rsquo;re not locked into it. You can also deploy to other platforms like Netlify, AWS, or even a custom Node.js server. But for a smooth, beginner-friendly, and Next.js-native experience, Vercel is hard to beat. <h2>8.Best Practices &amp; Tips for Next.js Developers:</h2> Now that you&rsquo;ve seen how Next.js works and how to deploy it, let&rsquo;s talk about some best practices and tips that will help you write cleaner, more efficient, and more maintainable applications. These are not hard rules, but following them will make your development process smoother and your app more reliable. <h4>1.Keep Components Small and Focused:</h4> Instead of creating massive components that do everything, break your UI into small, reusable components. This makes your code easier to read, test, and maintain. <h4>2. Use Static Generation (SSG) and Server-Side Rendering (SSR) Wisely:</h4> Next.js gives you powerful rendering options. Use SSG for content that doesn&rsquo;t change often (like blogs or docs) and SSR for dynamic content (like dashboards). This ensures fast performance and good SEO. <h4>3. Take Advantage of API Routes:</h4> If you need backend logic, don&rsquo;t spin up a whole separate server. Use Next.js API routes to handle simple requests like authentication, form submissions, or fetching data from third-party APIs. <h4>4. Optimize Images with Next.js &lt;Image&gt; Component:</h4> Always use the built-in &lt;Image&gt; component instead of the standard &lt;img&gt; tag. This ensures images are optimized, responsive, and served in modern formats automatically. <h4>5. Leverage Dynamic Imports for Large Libraries:</h4> If you&rsquo;re using big libraries (like charts or maps), don&rsquo;t load them on the initial page load. Instead, use dynamic imports so they load only when needed. This reduces bundle size and improves performance. <h4>6. Monitor Performance and Errors:</h4> Use tools like Vercel Analytics, LogRocket, or Sentry to monitor how your app performs in production. This helps you catch issues early and keep your app reliable. By following these best practices, you&rsquo;ll be well on your way to becoming a stronger Next.js developer. Remember: code readability, performance, and maintainability are just as important as writing something that &ldquo;works.&rdquo; <h2>9.Conclusion &amp; Next Steps:</h2> Congratulations! &nbsp;You&rsquo;ve now gone through the essentials of Next.js from understanding why it&rsquo;s a powerful framework, to learning its features, deployment, and best practices. By now, you should have a solid grasp of how to build fast, SEO-friendly, and production-ready applications with Next.js. But remember, this is just the beginning. The real learning comes when you start building projects on your own. Every new feature you add, every problem you face, and every bug you fix will deepen your knowledge of Next.js. Here are some good next steps you can take: <ul> <li>Build a personal portfolio website with Next.js.</li> <li>Create a blog using Static Generation.</li> <li>Experiment with API routes for handling forms or authentication.</li> <li>Try deploying multiple apps on Vercel and explore analytics.</li> </ul> The world of web development is moving fast, and Next.js is one of the tools leading this change. By staying curious, practicing consistently, and following best practices, you&rsquo;ll soon find yourself building amazing projects that not only work well but also scale beautifully. If you&rsquo;re eager to dive even deeper, I highly recommend checking out the official Next.js Documentation at <a href="nextjs.org/docs">nextjs.org/docs</a>. It&rsquo;s an excellent resource that covers advanced features, edge cases, and real-world examples. Whenever you feel stuck or want to explore a new feature, the docs should always be your first stop. Final Thought: You don&rsquo;t need to learn everything at once. Start small, build often, and improve step by step. The more you build, the better you&rsquo;ll get.

Discover Next.js in this practical guide from routing and data fetching to building and deploying modern apps. Perfect for beginners to intermediate developers, with clear examples and tips.

Next.js Guide: From Basics to Deployment | Tech Tips By Moh

Next.js Guide: From Basics to Deployment

<h2>Live Progress Updates in Long-Running Backend Tasks: Polling vs WebSocket</h2> When your backend is handling long tasks like crunching big files, training a model, or working with AI APIs showing just a spinner until it&rsquo;s done is painful for users. A better way? Show live progress updates while the task is running, so users know something is happening. &nbsp; <h3>Why Live Updates Matter:</h3> Nobody likes waiting in the dark. Imagine uploading a 500-page PDF and staring at a loader for minutes. Instead, if the app shows progress updates after each page, users stay engaged and can even start using partial results before everything finishes. It makes the whole experience feel faster and more interactive. <h3>Method 1: Polling</h3> How it works The frontend keeps asking the backend every few seconds: &ldquo;What&rsquo;s the progress now?&rdquo; 1. User starts a task. 2. Backend processes the work. 3. Progress is stored (e.g., in Redis) with a unique ID. 4. Frontend hits a &ldquo;progress&rdquo; endpoint on repeat. 5. Backend returns the current status until the task is done. &nbsp; Pros: Super easy to implement. Works everywhere, no special setup. Cons: More network traffic (lots of repeated requests). Updates are tied to the polling interval, not truly real-time. &nbsp; <h3>Method 2: WebSocket</h3> How it works Instead of asking again and again, the frontend opens a WebSocket connection. From there, the backend can push updates instantly as they happen. Typical flow: 1. Frontend opens a WebSocket connection. 2. Backend runs the task and streams progress updates over that connection. 3. Frontend updates the UI immediately. Pros: Real-time updates with no delay. Less network overhead. Perfect for live dashboards, chat apps, and AI progress updates. Cons: More complex to set up and scale. Requires support on both frontend and backend. &nbsp; <h3>Practical Example:</h3> Here&rsquo;s a simple Python example to simulate progress: import time for i in range(101):&nbsp; # 0 to 100% &nbsp;&nbsp;&nbsp; time.sleep(0.2)&nbsp;&nbsp; # simulate work &nbsp;&nbsp;&nbsp; # send progress via cache (Polling) or WebSocket <ul> <li>With Polling, you&rsquo;d write progress to cache and let the frontend check it on intervals.</li> <li>With WebSocket, you&rsquo;d push progress directly to the client every step.</li> </ul> <h3>When to Use Polling vs WebSocket</h3> Polling is a good fit when: <ul> <li>Setting up WebSockets is hard in your environment. </li> <li>You don&rsquo;t need instant updates.</li> </ul> WebSocket is better when: <ul> <li>You want real-time, no-delay updates. </li> <li>You&rsquo;d like to cut down on repeated HTTP calls.</li> <li>Your app is interactive (chat, live feeds, dashboards).</li> </ul> <h3>Conclusion:</h3> Live progress updates change the way users experience your app. Whether it&rsquo;s AI, data crunching, or file handling showing progress in real time keeps users confident and engaged. Polling is simple and reliable; WebSocket is faster and more interactive. Pick the one that fits your setup best. Pro Tip: Using Django? Try Django Channels for WebSockets and Redis for progress tracking in both approaches.

Learn how to improve user experience in long-running backend tasks with live progress updates. Compare Polling vs WebSocket and choose the best real-time solution.

Live Progress Updates in Long-Running Backend Tasks: Polling vs WebSocket | Tech Tips By Moh

Live Progress Updates in Long-Running Backend Tasks: Polling vs WebSocket

<h2>Remove Image Background and Blend Images Using Python</h2>


 Looking to elevate your Python image processing skills? In this guide, you'll learn how to remove the background from an image using Python and blend it with another image using NumPy. It’s a simple yet powerful technique I recently shared in a video tutorial.


<h3>🎬 What This Tutorial Covers</h3>


 We'll walk through the process of combining two powerful Python libraries — rembg and NumPy — to create clean, professional-looking image composites. This is perfect for:


<ul>
 <li>Automating image post-processing workflows</li>
 <li>Creating thumbnails and social media visuals</li>
 <li>Building tools for AI/ML datasets</li>
 <li>Designing profile images or marketing content</li>
</ul>

<h3>📌 Step 1: Remove the Image Background with rembg</h3>


 The <a href="https://github.com/danielgatis/rembg" target="_blank" rel="noopener noreferrer">rembg Python library</a> lets you remove an image’s background using deep learning — no manual editing needed.


To remove a background:

<ol>
 <li>Install the rembg library using pip.</li>
 <li>Read the image file in binary mode.</li>
 <li>Pass the binary data to the remove function from rembg.</li>
 <li>Convert the output into an image and save it in PNG format.</li>
</ol>


 This results in a clean, background-free image that you can easily layer or reuse.


<h3>📌 Step 2: Blend Foreground and Background with NumPy</h3>


 Once you have the image without a background, you can blend it with a new background image using NumPy. Here’s how the process works:


<ol>
 <li>Resize both the foreground and background images to match in dimensions.</li>
 <li>Convert both images into NumPy arrays and use float values for blending.</li>
 <li>Apply a weighted sum using your preferred blend ratios (e.g., 80% foreground and 20% background).</li>
 <li>Convert the final array back into an image and save it as your final result.</li>
</ol>


 This lets you control how much of each image appears in the final result. You can experiment with different weights for creative effects.


<h3>📦 Full Code and GitHub Repository</h3>


 Want to try it yourself? I’ve published a complete working example you can clone and run. It includes sample images and instructions:



 👉 <a href="https://github.com/mmmohajer/image-overlay-and-grayscale" target="_blank" rel="noopener noreferrer">Image Background Removal and Blending – GitHub Repository</a>


<h3>🌟 Final Thoughts</h3>


 By combining rembg, Pillow, and NumPy, you can create powerful workflows for creative image editing, AI preprocessing, or content generation. Whether you're automating image cleanups or making dynamic visuals, this technique is a great place to start.



 If this tutorial was helpful, feel free to explore more on my GitHub or share this guide with fellow Python enthusiasts!

Learn how to remove image backgrounds using Python’s rembg library and blend images with NumPy for stunning effects. Explore the full code and try it yourself!

Removing Backgrounds and Blending Images with Python: A Simple Guide| Tech Tips By Moh

Removing Backgrounds and Blending Images with Python: A Simple Guide

If you&rsquo;re starting your journey in web development, you&rsquo;ve probably heard advice like this: &ldquo;Learn JavaScript, Python, and C++&mdash;you&rsquo;ll be a full-stack developer in no time!&rdquo; &ldquo;Master frontend and backend together&mdash;it&rsquo;s the fastest way to get a job!&rdquo; It sounds promising, but here&rsquo;s the truth: Trying to learn too many programming languages and frameworks at once is the fastest way to get stuck. <h2>Why Learning Too Many Languages Can Hurt Your Progress</h2> When new developers try to juggle multiple languages like JavaScript, Python, C++, and Java all at the same time, they spread their energy too thin. It&rsquo;s overwhelming, and instead of becoming a master in one area, they end up with surface-level knowledge that doesn&rsquo;t help them land a job or build real projects. This problem is so common that I made a video about it&mdash;watch it now to avoid falling into this trap! <h2>Why You Should Focus on One Language or Framework</h2> Here&rsquo;s the truth: ✅ Depth beats breadth. Learning one language deeply&mdash;like JavaScript with React for frontend or Python with Django for backend&mdash;helps you build real-world projects and solve real problems. ✅ Confidence comes from mastery. When you understand the core concepts of one stack, you&rsquo;ll find it much easier to pick up new tools later, like Docker, Redis, or CI/CD pipelines. ✅ Projects matter more than tutorials. Building a few solid projects teaches you far more than watching endless courses. <h2>How My Mentoring Can Help You</h2> If you feel overwhelmed by all the options, don&rsquo;t worry&mdash;you&rsquo;re not alone. In my mentoring program for aspiring web developers, I&rsquo;ll help you: <ul> <li> Choose the right tech stack based on your goals (e.g., frontend with React or backend with Django). </li> <li> Build hands-on projects that strengthen your skills. </li> <li> Stay focused on what really matters, so you can avoid getting distracted by the latest shiny tools. </li> </ul> The best part? The<a href="https://calendly.com/mohammad-aqd6/30min"> first mentoring session is free</a>&mdash;we&rsquo;ll explore your goals, your current skills, and create a clear, personalized plan for your learning journey. <hr> <h2>👩&zwj;💻 Ready to Start Your Web Development Journey the Right Way?</h2> 🎯 <a href="https://calendly.com/mohammad-aqd6/30min">Book your free mentoring session today</a> and let&rsquo;s build a roadmap for your success.

New web developers often struggle by learning too many programming languages at once. This blog explains why focusing on one language like JavaScript or Python can boost your skills and career faster.

The Biggest Mistake New Developers Make

Recent Blogs