Learn with Gurpreet Blog

Advanced prompting techniques

2026-04-02T00:00:00Z

If you often get confused when someone ask you to use Context prompt vs. Devil’s advocate prompt, you are on right place. Below guide will help you to identify different prompt types with examples.

Context Engineering

Context engineering is the practice of providing AI with specific, relevant information to improve output quality, while prompt engineering focuses on how you phrase your request.

Help me draft a technical proposal for implementing an agentic workflow solution for our client’s customer service platform. The audience is the client’s CTO and VP of Engineering who are evaluating multiple vendors. Reference the discovery meeting notes from last week where they mentioned their current response time is 4 hours and they want to reduce it to under 30 minutes, plus the competitive analysis document showing what their main competitor is doing. Keep it to 2 pages maximum and focus on our AI platform capabilities rather than general consulting services.

Role-Based Prompting

Without a defined role, AI produces generic responses that lack the specialized perspective and depth needed for enterprise technology decisions.

Example Prompt

Act as a senior technical architect who has led 15+ enterprise AI platform implementations across retail, finance, and healthcare. You’re known for being pragmatic and focusing on sustainable solutions over quick fixes. I’m working on designing an agentic workflow system using Node.js and Next.js for a client’s customer service automation. Can you review my proposed architecture and identify potential scalability issues I should address before development begins?

Devil’s Advocate Prompts

AI systems are programmed to be helpful and agreeable, which means they will naturally affirm your ideas and proposals rather than question or challenge them.

Example Prompt

Play devil’s advocate on my proposal to migrate our legacy Node.js monolith to a microservices architecture with agentic workflows. What would a skeptical CTO argue against this plan, specifically around the risks of introducing Al agents into production systems that currently handle customer transactions?

Few-Shot Prompting

Few-shot prompting is the technique of including concrete examples in your prompt to demonstrate the exact pattern, format, or style you want the AI to replicate.

Style of the Prompt

A developer at X company needed AI to generate consistent commit messages for their Node.js project. Instead of writing “create brief, imperative commit messages,” they showed the AI three examples: “Add user authentication middleware,” “Fix memory leak in event handler,” and “Update API response formatting.” The AI immediately started producing commit messages in the same concise, imperative style without any additional explanation needed.

Example Prompt

My team at x company is launching an internal newsletter about AI platform updates where they are planning to launch “Context-Aware Code generation” flow. Following are two examples of the style I want you to follow and also apply brand guidelines for future newsletters. “Example 1: We’ve just rolled out semantic search across our enterprise AI platform. What does this mean for you? Instead of hunting for the exact keyword, you can now ask questions naturally and get relevant results instantly. Think of it as having a conversation with your data rather than interrogating it.” “Example 2: Our agentic workflows just got smarter with multi-step reasoning. The system can now break down complex tasks into logical steps, execute them in sequence, and adapt if something changes midway. It’s like having a digital teammate who actually thinks through problems with you.” I want you to generate new announcement about a feature called “Context-Aware Code Generation” that helps developers write node.js and next.js code faster and understanding their project structure.

Effective iterative refinement follows a three-part loop: evaluate what worked and what didn’t in the output, diagnose the specific issue (whether it’s tone, structure, depth, accuracy, or focus), and refine by crafting a targeted follow-up prompt that addresses that gap.

Example Prompt

Rewrite this documentation in a conversational tone that a frontend developer new to agentic workflows would understand.

Dusting off the lens: Why I’m returning to photography in 2026

2026-01-19T00:00:00Z

For a long time, my camera sat in its bag, a silent witness to the moments I stopped capturing. Life happened, priorities shifted, and that creative spark that used to drive me out of bed at dawn for the perfect light began to flicker and, eventually, fade.

But as 2026 begins, I’ve realized that losing a passion doesn’t mean it’s gone forever. It just means it was waiting for the right season to return.

A Look Back to Move Forward

The catalyst for this comeback was revisiting my past work. I recently revived my portfolio, and seeing those captured memories reminded me of the “why” behind my art. Every image held a story, a technical challenge overcome, or a quiet emotion frozen in time.

What’s Next?

2026 isn’t about chasing likes or following fleeting trends. It’s about the joy of the process. Whether I’m shooting digital, film, or just experimenting with light, I’m committed to keeping the lens cap off this time.

Next.js 15 build once, deploy many: Achieving environment-agnostic builds with the app router

2026-01-15T00:00:00Z

In enterprise software engineering, the “Build Once, Deploy Many” philosophy is the gold standard for reliability. The goal is simple: compile your code into a single artifact and move that identical bundle through your testing environments (DEV, SIT) all the way to Production.

In many Next.js setups, developers rebuild the app for every environment to inject different API keys. This is a mistake. It wastes time and introduces the risk that the code you tested in SIT isn’t exactly the code you shipped to PROD.

With Next.js 15 and the App Router, we can break this cycle.

Strategic Use Case: Market-Specific Scaling

This architecture is particularly powerful for organizations operating across multiple regions or brands.

The Scenario: You have a single codebase for a Next.js application that must serve different markets (e.g., UK, USA, and Germany). Each market has its own Azure Web App instance, unique API endpoints, different currency formatting, and localized feature flags.

The Solution: Instead of running three separate builds, which would result in three different versions of the truth, you build the application one time. You then deploy that same universal artifact to three separate Azure Web Apps. The unique “Market Behavior” is injected via Azure App Settings at runtime.

[ Universal Build Artifact ]
           |
           +-----> [ Azure Web App: UK ]  --> Config: GBP, UK-API, Metric
           |
           +-----> [ Azure Web App: USA ] --> Config: USD, US-API, Imperial
           |
           +-----> [ Azure Web App: GER ] --> Config: EUR, DE-API, Metric

Project Architecture and Infrastructure

To manage a “Build Once” workflow effectively, your architecture needs to be modular and your infrastructure needs to support runtime configuration.

The Foundation: Turborepo

Using Turborepo allows you to manage your Next.js application alongside shared UI libraries and utility packages. It ensures that your builds are fast, but more importantly, it helps you package your application as a standalone workspace that is ready for deployment.

Infrastructure: Azure Web Apps

For this strategy, we use Azure Web Apps. Azure allows us to set “Application Settings” (environment variables) that are injected into the Node.js process at runtime. This is the “hook” we use to change behavior without changing the code.

Deployment Strategy: The Promotion Pipeline

Instead of building in every stage, we use a linear promotion strategy:

Build: Create a universal artifact (Docker image or .next folder).
Deploy to DEV: Inject DEV environment variables.
Promote to SIT: Use the same artifact, but inject SIT variables.
Promote to PROD: Use the same artifact, but inject PROD variables.

[ Code Push ]
      |
[ CI Build Stage ] -> (Generates 1 Agnostic Artifact)
      |
      +-----> [ Deploy to Azure DEV ] -> (Inject DEV Config)
      |              |
      |       [ QA Approval ]
      |              |
      +-----> [ Promote to Azure SIT ] -> (Inject SIT Config)
      |              |
      |     [ Business Sign-off ]
      |              |
      +-----> [ Promote to Azure PROD ] -> (Inject PROD Config)

How to Avoid `NEXT_PUBLIC_` for Agnostic Builds

The biggest technical hurdle is the NEXT_PUBLIC_ prefix. Next.js inlines these values during the build process. If you use NEXT_PUBLIC_API_URL, that URL is hardcoded into your JavaScript files. You can’t change it without rebuilding.

The SSR-First Approach (Recommended)

In Next.js 15, the most efficient way to handle environment-agnostic URLs is to render them on the server. Since Server Components run on the Node.js runtime, they have direct access to process.env at the moment the request happens.

By using SSR, your environment variables are read from the Azure App Service settings at runtime, ensuring the client receives the correct URL without any extra network requests.

// app/components/ClientRequester.tsx
export default function Page() {
  // This value is read on the server at request time.
  // It is NOT inlined during the build.
  const apiUrl = process.env.API_BASE_URL;

  return (
    <main>
      <h1>Data Dashboard</h1>
      <DataList endpoint={apiUrl} />
    </main>
  );
}

Fallback: The Client-Side Configuration Provider

While SSR is preferred for initial data fetching, you might still need configuration available deep inside interactive Client Components (like a chat widget or analytics script). In these cases, you can use a Context Provider to pass server-side values down to the client.

// components/ConfigProvider.tsx
'use client';

import React, { createContext, useContext } from 'react';

const ConfigContext = createContext({ apiBaseUrl: '' });

export function ConfigProvider({ children, config }) {
  // 'config' is passed from a Server Component to this Client Component
  return (
    <ConfigContext.Provider value={config}>
      {children}
    </ConfigContext.Provider>
  );
}

export const useAppConfig = () => useContext(ConfigContext);

You wrap your application in the layout.tsx, passing the variables from the server:

// app/layout.tsx (Server Component)
export default function RootLayout({ children }) {
  const runtimeConfig = {
    apiBaseUrl: process.env.API_BASE_URL,
    analyticsId: process.env.ANALYTICS_ID
  };

  return (
    <html>
      <body>
        <ConfigProvider config={runtimeConfig}>
          {children}
        </ConfigProvider>
      </body>
    </html>
  );
}

Purging SSG Pages After Deployment

Next.js 15 uses Static Site Generation (SSG) to pre-render pages. However, if your SIT environment has different data than PROD, your static pages might show “stale” information after deployment.

To fix this, we use On-Demand Revalidation. Your deployment pipeline should trigger a “purge” as its final step to force Next.js to regenerate pages using the new environment’s data.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function GET(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');

  if (secret !== process.env.REVALIDATION_TOKEN) {
    return NextResponse.json({ message: 'Invalid token' }, { status: 401 });
  }

  // Force a purge of the entire site cache
  revalidatePath('/', 'layout');
  return NextResponse.json({ revalidated: true });
}

Infrastructure Cost Factors

By shifting to this model, the financial profile of your project changes. While there are slight increases in some areas, the overall ROI is significantly positive.

CI/CD Compute Savings (Major Decrease)

In a multi-market setup, if you have 10 markets and 3 environments (DEV/SIT/PROD), a traditional model would require 30 separate builds. With this approach, you run 1 build and 30 simple “copy-paste” deployments. This reduces your CI/CD runner bill (GitHub Actions/Azure DevOps) by up to 90%.

Market Launch Velocity (Operational Savings)

The cost of “Time to Market” is reduced. Launching in a new country no longer requires a new CI/CD pipeline configuration or a new build process. You simply spin up a new Azure Web App, point it to the existing artifact, and set the App Settings.

Storage and Registry (Slight Increase)

You will store a single, slightly larger “Standalone” artifact in a registry (like Azure Container Registry or GitHub Packages). However, storing one universal image is often cheaper than storing dozens of environment-specific images that share 99% of the same code.

Developer Productivity (Hidden Savings)

The “Cost of Debugging” drops. When a bug is reported in the German market but not the UK market, you know with 100% certainty that the code is identical. This allows your team to focus strictly on configuration or data issues, cutting down investigation time.

Outcomes

Market Agnostic Core: Your core logic remains clean and independent of regional logic.
Bit-for-Bit Consistency: Guaranteed parity across every market and every environment.
Rapid Global Rollouts: Deploy updates to all global markets simultaneously using the same verified artifact.
Significant Reduction in CI/CD Spend: Minimized compute hours for build agents.

Trade-offs and Risks

Risk	Mitigation
Server Load	Reading from `process.env` is extremely fast in Node.js, but ensure your layout doesn’t perform heavy computation on every request. Leverage Next.js caching for data-heavy components.
Security Risk	Ensure that only “Public-safe” keys (like API URLs or Analytics IDs) are passed to the `ConfigProvider`. Never include sensitive secrets like Database passwords or Private API keys.
Complexity	Requires a one-time setup of the `ConfigProvider` and the implementation of a secure Revalidation webhook in your CI/CD pipeline.
Waterfall Effect	If using the client-side fetch fallback, the UI may show a loading state. Using the SSR-first approach mitigates this by injecting the config directly into the initial HTML.

Conclusion

Building once and deploying many is more than just a convenience; it is a professional standard that ensures your Next.js 15 applications are robust and predictable. By decoupling your configuration from your build process and prioritizing SSR for environment variables, you create a pipeline that is fast, safe, and truly environment-agnostic.

Internal Reference

Ready to automate this global rollout? Read my follow-up guide: “Automating Next.js 15 Deployments: A Build Once, Deploy Many GitHub Actions Guide” to see how to build the pipeline that handles this multi-market promotion.

Automating Next.js 15 deployments: A build once, deploy many github actions guide

2026-01-15T00:00:00Z

In my previous guide, “Next.js 15 Build Once, Deploy Many: Achieving Environment-Agnostic Builds with the App Router”, we discussed the architectural shift toward runtime configuration. Now, it is time to put that theory into practice.

To achieve a true “Build Once, Deploy Many” workflow, your GitHub Actions must be structured to separate the expensive Build phase from the lightweight Deploy phase.

The Strategy: Artifact Promotion

In a standard pipeline, developers often run npm run build for every environment. This is inefficient. Instead, we will:

Build the application once in a “Standalone” mode.
Upload that bundle as a GitHub Artifact.
Download and push that same bundle to Azure DEV, SIT, and PROD.

The Pipeline Visualized

[ CI/CD RUNNER ]
       |
 [ Job: Build ] ---------------------> [ Artifact Storage ]
 (npm build + zip)                            |
       |                                      |
 [ Job: Deploy DEV ] <------------------------+
 (Download + Azure Push)                      |
       |                                      |
 [ Job: Deploy SIT ] <------------------------+ (Manual Approval)
 (Download + Azure Push)

The GitHub Actions Workflow

This YAML configuration utilizes GitHub Environments to manage promotion logic and secrets for different Azure targets.

name: Next.js 15 Promotion Pipeline

on:
  push:
    branches: [main]

jobs:
  # --- STAGE 1: BUILD ---
  build:
    name: Build Universal Artifact
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: Install & Build
        # Note: No env variables are passed here!
        run: |
          npm ci
          npm run build

      - name: Package Standalone Output
        # We prepare the standalone folder for Azure
        run: |
          cp -r .next/static .next/standalone/.next/static
          cp -r public .next/standalone/public
          cd .next/standalone && zip -r ../../site.zip .

      - name: Archive Artifact
        uses: actions/upload-artifact@v4
        with:
          name: nextjs-universal-bundle
          path: site.zip
          retention-days: 5

  # --- STAGE 2: DEPLOY TO DEV ---
  deploy-dev:
    name: Deploy to DEV
    needs: build
    runs-on: ubuntu-latest
    environment: Development
    steps:
      - name: Get Artifact
        uses: actions/download-artifact@v4
        with:
          name: nextjs-universal-bundle

      - name: Push to Azure DEV
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'myapp-dev-web'
          publish-profile: $
          package: site.zip

      - name: Trigger Revalidation
        run: curl -X GET "https://myapp-dev-web.azurewebsites.net/api/revalidate?secret=$"

  # --- STAGE 3: DEPLOY TO SIT ---
  deploy-sit:
    name: Promote to SIT
    needs: deploy-dev
    runs-on: ubuntu-latest
    environment: SIT # Set this to require manual approval in GitHub
    steps:
      - name: Get Artifact
        uses: actions/download-artifact@v4
        with:
          name: nextjs-universal-bundle

      - name: Push to Azure SIT
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'myapp-sit-web'
          publish-profile: $
          package: site.zip

      - name: Trigger Revalidation
        run: curl -X GET "https://myapp-sit-web.azurewebsites.net/api/revalidate?secret=$"

Key Technical Considerations

Standalone Output: For this pipeline to work, your next.config.js must have output: 'standalone'. This tells Next.js to package only the essential files required for a production server, significantly reducing the size of your site.zip.
Manual Approvals (The Gatekeeper): By using environment: SIT, you can go to your GitHub repository settings and add “Required Reviewers.” This prevents the code from moving from DEV to SIT until a Lead Developer or QA Engineer clicks “Approve.”
Azure Application Settings: Since we are no longer using NEXT_PUBLIC_ variables, you must go to the Azure Portal > Configuration for each Web App and manually add your API_BASE_URL. The Next.js server will read these at runtime via the SSR approach we established.

Benefits of this Pipeline

Speed: Deployments to SIT and PROD take seconds because the build step is skipped.
Integrity: You are guaranteed that the code running in SIT is identical to the code tested in DEV.
Cost: You save significant GitHub Actions “Minutes” by only building once per commit.

If you haven’t yet configured your application to handle runtime variables without NEXT_PUBLIC_, check out my companion article: Next.js 15 Build Once, Deploy Many: Achieving Environment-Agnostic Builds with the App Router.

Your simple guide to google's AI tools in 2026: practical uses for everyday life

2026-01-14T00:00:00Z

It is early 2026, and Google has fundamentally shifted from offering simple “chatbots” to providing “AI Agents”—tools that don’t just talk but actually do things.

The Core “Brain”: Gemini 3

Gemini 3 is the engine behind almost everything Google does. In 2026, it is split into three main “modes” depending on what you need:

Gemini 3 Flash (The “Fast” Model): Now the default for everyone. It’s incredibly quick and handles daily tasks like summarizing emails, answering questions, and identifying objects in your photos.
Gemini 3 Pro (The “Thinking” Model): Used for complex logic. If you are coding a website, solving high-level math, or need “Deep Research” (where the AI spends several minutes browsing the web to write a report), this is the one you use.
Gemini Nano: This lives entirely on your phone. It doesn’t need the internet, making it perfect for private tasks like summarizing a voice recording or protecting you from scam calls in real-time.

The Creative Studios: Flow & Nano Banana

These are the specialized tools for when you want to create something visual.

Google Flow (AI Filmmaking)

What it is: An all-in-one “orchestration” tool for video. It combines Google’s video model (Veo 3) and music model (Lyria) to help you make actual movies.
The Use Case: You want to make a 30-second trailer for a book you wrote.
The Situation: You describe the scene (“A rainy street in London, 1920s style”) and Flow generates the video, the background music, and even the voiceover. It keeps the “characters” looking the same from one shot to the next.

Nano Banana (AI Image Editing)

What it is: This is the quirky name for Google’s newest image generation model. It is built for speed and “impossible” edits.
The Use Case: Changing your photos without needing Photoshop.
The Situation: You have a photo of yourself at home but want to see how you’d look with a different hairstyle or standing on a beach in Bali. You “doodle” over your hair or the background and tell Nano Banana what to change. It keeps your face perfectly consistent while changing everything else.

The “Doing” Tools: Agents & Workspace

In 2026, AI has moved into “Agentic” territory, meaning it can take action on your behalf.

NotebookLM (The Research Partner)

What it is: You upload your documents, and it becomes an expert on them.
The Situation: You have a 50-page lease agreement. Instead of reading it, you upload it to NotebookLM and ask, “Does this lease allow pets, and what is the notice period for moving out?” It answers only based on that document.

AI Mode in Search (The Buyer Agent)

What it is: Google Search no longer just gives you links; it can now help you buy things.
The Situation: You search for “the best hiking boots for wide feet under $150.” The AI finds the best pair, checks if they are in stock at a nearby store, and—with the new Universal Commerce Protocol—can even start the checkout process for you.

Google Vids & Workspace

What it is: AI inside Docs, Slides, and the new video app, “Vids.”
The Situation: You have a boring spreadsheet of sales data. You open Google Vids, and it automatically turns that data into a professional-looking video presentation with a voiceover and charts.

Summary: Which tool should you use?

If you want to…	Use this tool:
Write an email or plan a trip	Gemini 3 Flash (The “Fast” model)
Edit a photo of yourself into a new scene	Nano Banana
Create a cinematic video with sound	Google Flow
Analyze a large pile of PDFs/Notes	NotebookLM
Shop and compare products	AI Mode in Search

A look at the AI promise humanoid robots

2025-10-30T00:00:00Z

The idea of a personal humanoid robot is captivating. Imagine a machine in your home that can fold your laundry, do the dishes, and vacuum the floors. This technology promises to free up hours of your time, allowing you to focus on other things, or even act as a helpful assistant for those with mobility issues. It sounds like the future we have all been waiting for. However, there appears to be a significant gap between this appealing vision and the current state of the technology.

The Dream of a Robot Housekeeper

The dream being sold is powerful. We are shown a humanoid robot, standing over five feet tall, that can live in your house and manage your chores. It looks like a human, with ten fingers to carefully put away laundry or handle dishes from start to finish. It could water your plants on a perfect schedule, find the lost TV remote, and tidy up the house. When its work is done, it quietly returns to its dock to charge. The promise is that you may never have to do chores again.

The Problem: A Gap Between Promise and Reality

For a product this advanced, a high price tag is expected. Whether it is a large one-time purchase or a monthly subscription, early adopters are often willing to pay for cutting-edge technology. The real issue is not the cost. The problem is the massive gap between what the product is promised to do and what it is actually capable of doing today.

What Can the Robot Actually Do?

When we look closer at the demonstrations, a different picture emerges. It turns out that 100 percent of the impressive tasks shown are often remotely controlled by a human. An operator in another room, wearing a virtual reality headset, is manually guiding the robot to perform every action.

The tasks the robot can perform on its own, or autonomously, are much simpler. In reality, its autonomous skills might be limited to basic commands like walking over to a door to open it, or to take a single empty cup from a person’s hand and walk away with it. Everything else we see, from folding laundry to loading a dishwasher, is not the robot’s own intelligence at work.

The “AI Promise Problem” in Modern Tech

This situation is part of a larger trend in the world of artificial intelligence. We are in an age of selling the dream before the product is actually finished. Companies make big promises about what their AI can do, creating hype and taking pre-orders for a vision that is still far from reality. This has been seen with several recent AI gadgets that promise a revolutionary new way of doing things but fail to deliver on that potential when they reach customers.

The Privacy Trade-Off

How do these robots learn tasks they cannot do? The solution offered is often an “expert mode.” When the robot fails at a task, you can schedule a remote employee to take control. This person will look through the robot’s cameras and listen through its microphones, seeing and hearing everything in your home, to complete the task. This action is then used to teach the robot’s AI. This means that to get the product you were promised, you may have to be comfortable with remote strangers viewing the inside of your private spaces.

The Big Questions for Early Adopters

This raises serious questions. Are people willing to pay a high price, give up their privacy, and serve as beta testers for an unknown number of years, all in the hope that the product will someday achieve the dream?

Beyond the privacy concerns, the robot itself has limitations. It may be slow, a bit clumsy, and too weak to carry anything heavy. There are also safety risks. What if the robot makes a mistake with something dangerous, like dropping a glass object or, more seriously, mixing up medications?

Conclusion: We Want the Dream, Not the Gap

The dream of a helpful robot assistant, like Rosie the Robot from the Jetsons, is something many of us want. We want AI to be used for productive, useful tasks that make our lives better. The issue is not the dream itself. The issue is the enormous, and very difficult, gap between that future dream and the unfinished, unproven products being sold to us today.

The hard truth about running Next.js at scale

2025-10-10T00:00:00Z

Next.js has quickly become one of the most dominant frameworks for frontend fullstack development. It’s great for shipping MVPs fast, but here’s the big question: is it equally good for production-grade applications? Let’s break it down and talk about the trade-offs you might face when using the Next.js stack.

Quick note: this write-up is based on my recent project experience, not ChatGPT or any AI-generated content 😉

The “Vercel Way”

As you probably know, Next.js is developed and maintained by Vercel. That means there are areas where Next.js nudges you toward doing things the Vercel way. If you don’t, well, be ready to spend some time searching (or asking your favorite AI assistant).

Vercel shines when it comes to build performance and caching. It helps you ship projects blazingly fast, with build times that are hard for most competitors to match. But this convenience has a price tag. Hosting large-scale enterprise apps on Vercel can be expensive.

My Experience

We’re building an enterprise application and chose Next.js as our framework. The infrastructure runs on Azure Web Apps. The first deployment taught us an important lesson: Next.js needs to be switched to a standalone output build when you’re not hosting on Vercel.

Yes, there’s a configuration in next.config.js that allows you to generate a standalone build instead of the default one tailored for Vercel/Netlify. Once we enabled that, things worked as expected.

Coming from a Java or backend-heavy background, you’re probably familiar with the idea of build once, deploy everywhere. With Next.js (or React), it works differently.

After scouring forums, I noticed many developers struggling to build Next.js apps outside Vercel. Each environment (DEV/STAGE/PROD) typically requires a rebuild. It’s doable, but not exactly the advertised or preferred path.

Still, I decided to give it a shot. Here’s what we did:

Renamed all public environment variables starting with NEXT_PUBLIC_ to PUBLIC_ because Next.js inlines NEXT_PUBLIC_ variables at build time, which makes them static. For example: process.env.NEXT_PUBLIC_KEY gets replaced with a fixed value during build.
Split our env. variables into two categories:
1. Public (PUBLIC_)
2. Secret (SECRET_)

Now, how do you access PUBLIC_ variables on the client side?

We solved it by creating an API endpoint that fetches these variables at runtime:

"use server";

import { NextResponse } from "next/server";

// Example usage: /api/env?key=PUBLIC_API_URL
// Note: Only PUBLIC_ variables are exposed on the client

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const key = searchParams.get("key");

  if (!key) {
    return NextResponse.json({ error: "Missing query param: key" }, { status: 400 });
  }

  if (!key.startsWith("PUBLIC_")) {
    return NextResponse.json({ error: "Only PUBLIC_ variables are accessible" }, { status: 403 });
  }

  const value = process.env[key];

  if (!value) {
    console.log("env-variable", "GET", "not found", { key });
    return NextResponse.json({ error: `Env variable ${key} not configured` }, { status: 404 });
  }

  return NextResponse.json({ [key]: value });
}

With these changes, we were able to generate a dist folder (standalone build) that works across multiple environments with runtime variables. No more rebuilding for every environment.

SSG and SSR Challenges

By default, Next.js pages are SSR (Server-Side Rendered). That was our next challenge. During build time, API calls in async components were being executed and responses cached, which caused outdated data issues.

We also had some SSG (Static Site Generation) pages facing the same problem, stale content that wouldn’t refresh automatically.

Next.js doesn’t cache pages as simple HTML. Instead, it stores JSON metadata chunks. To solve this, we added a post-deployment cache purge strategy. Basically, we created an API route to call Next.js’s internal revalidatePath method whenever we needed to refresh cached content.

// api/revalidate/route.ts

"use server";

import { NextResponse } from "next/server";
import { headers } from "next/headers";
import { revalidatePath } from "next/cache";

export async function POST(req: Request) {
  try {
    const secret = process.env.REVALIDATE_SECRET;
    const headersList = await headers();
    const authHeader = headersList.get("authorization");

    if (authHeader !== secret) {
      return NextResponse.json({ error: "Not Authorized" }, { status: 401 });
    }

    const reqBody = await req.json();
    const paths = reqBody.paths || ["/"];

    for (const p of paths) {
      await revalidatePath(p);
    }

    return NextResponse.json({ revalidated: paths });
  } catch (error) {
    console.error("Error parsing request body:", error);
    return NextResponse.json({ error: "Failed to parse request body" }, { status: 400 });
  }
}

This gave us a reliable way to control cache invalidation after deployments.

Bonus tip

Make sure when you are deploying to Azure Web Apps, CDN enablement is not that easy. Since Next.js comes with its own compress policy (gzip) it won’t allow you to easily use Azure frontdoor as a CDN solution.

You have to do some tweaks.

# Create a ruleset in Azure Frontdoor

Name: RuleSetName

IF
  - Condition: Request file extension
  - Operator: Equal
  - Value:
    - js
    - css
    - woff
    - woff2
    - ttf
    - eot
    - otf
    - ico
  - String transform: To lowercase
  
THEN
  - Action: Response header
  - Operator: Append
  - Header name: x-cache-version
  - Header value: v1 (treat it as a version number)
AND THEN
  - Action: Route Configuration Override
  - Override Origin group: no
  - Caching: Enabled
  - Query String caching behavior: Use Query String
  - Compression: Enabled
  - Cache behavior: Override always
  - Days: 1
  - Hours: 0
  - Minutes: 0
  - Seconds: 0
AND THEN
  - Action: Response header
  - Operator: Overwrite
  - Header name: Cache-Control
  - Header value: public, max-age=31536000, immutable
AND THEN
  - Action: Request header
  - Operator: Delete
  - Header name: Accept-Encoding
  
Stop evaluating remaining rules: Checked

Above configurations enable caching for all your mentioned files in IF condition for 1 year

I would like to express my gratitude to Frank Mueller and Vikas Chawla for their assistance in writing the cache rules.

Conclusion

Modern frameworks like Next.js look sleek and make development feel effortless. But once you move into enterprise territory, you’ll run into bottlenecks that require extra effort, research, and debugging.

The good news? with the right strategies, like standalone builds, smart env. variable handling, and cache revalidation, you can absolutely make Next.js production ready.

How to shrink docker images from gigabytes to megabytes

2025-09-16T00:00:00Z

As developers, we often focus on building and shipping features. However, the efficiency of our delivery pipeline is just as important. One key aspect of this is the size of our Docker images. Large images can lead to slower deployments, increased storage costs, and potential security vulnerabilities. This guide will walk you through several practical steps to significantly reduce the size of your Docker images. It’s possible to take a very large image, for example 1.2 GB, and shrink it down to a mere 10 MB.

Why Bother with Image Optimization?

You might wonder why you should care about the size of your Docker images. Here are a few compelling reasons:

Faster Deployments: Smaller images mean quicker uploads and downloads from container registries. This translates to faster deployment times, especially in a continuous integration and continuous delivery (CI/CD) environment.
Improved Scalability: When your application needs to scale up, smaller images allow new instances to start much faster.
Enhanced Security: Bloated images often contain unnecessary packages and libraries, which can increase the attack surface of your application.
Reduced Storage Costs: Storing large images in container registries can become expensive over time.

Tip 1: Choose a Minimal Base Image

The foundation of your Docker image is the base image. Starting with a large base image is like building a house on a massive, unnecessary foundation.

For example, a standard node:latest image can be over 1 GB. A much better alternative is to use an Alpine Linux based image, such as node:alpine. Alpine is a lightweight Linux distribution designed for security and resource efficiency.

Example Dockerfile (Before):

# Dockerfile

FROM node:latest
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

Example Dockerfile (After):

# Dockerfile

FROM node:alpine
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

For even more aggressive optimization, consider using “distroless” images from Google. These images contain only your application and its runtime dependencies, without a package manager, shell, or other programs you would expect to find in a standard Linux distribution.

Tip 2: Leverage Layer Caching

Docker builds images in layers. Each instruction in your Dockerfile creates a new layer. Docker can cache these layers and reuse them in subsequent builds if the files and instructions have not changed. To take advantage of this, structure your Dockerfile to copy over files that change less frequently first.

For a Node.js application, the package.json and package-lock.json files change less often than your source code. By copying them first and installing dependencies, you can avoid reinstalling dependencies every time you change your code.

Example Dockerfile:

# Dockerfile

FROM node:alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]

Tip 3: Use a `.dockerignore` File

The Docker build context includes all the files in the directory where you run the docker build command. To avoid sending unnecessary files to the Docker daemon, use a .dockerignore file. This is similar to a .gitignore file and tells Docker which files and directories to exclude.

Example .dockerignore:

# .dockerignore

node_modules
npm-debug.log
.env

Tip 4: Combine `RUN` Commands

Each RUN command in a Dockerfile creates a new layer. Even if you remove files in a later RUN command, those files still exist in the previous layer, and the image size will not decrease. To avoid this, combine multiple RUN commands into a single command using the && operator.

Example Dockerfile (Before):

# Dockerfile

RUN apt-get update
RUN apt-get install -y some-package
RUN rm -rf /var/lib/apt/lists/*

Example Dockerfile (After):

# Dockerfile

RUN apt-get update && \
    apt-get install -y some-package && \
    rm -rf /var/lib/apt/lists/*

Tip 5: Implement Multi Stage Builds

Multi stage builds are a powerful feature for creating small, secure images. The idea is to use one stage for building and compiling your application, and a second, much smaller stage for the final runtime environment.

For a React application, you can use a node image to build the static files, and then copy those files into a lightweight nginx image to serve them.

Example Dockerfile:

# Dockerfile

# Build stage
FROM node:alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Production stage
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Tools for Optimization

Here are a couple of tools that can help you analyze and optimize your Docker images:

Dive: A tool to explore a Docker image, layer contents, and discover ways to shrink the size of your Docker/OCI image.
Slim: A tool that can minify your container images by up to 30 times and improve their security.

By following these tips and using these tools, you can significantly reduce the size of your Docker images, leading to a more efficient and secure development and deployment process.

FFmpeg: The one-liner to rule all media files

2025-08-27T00:00:00Z

TL;DR

FFmpeg is a powerful command-line tool to handle all your media needs. Use it to quickly convert formats, create GIFs, resize images, trim videos, and extract audio right from your terminal. It’s the fast, free, and scriptable alternative to heavy video editing software.

Introduction to the Library

FFmpeg is a complete, cross-platform solution to record, convert, and stream audio and video. It’s the engine behind major platforms like YouTube and Netflix. While it can seem complex due to its command-line interface and numerous parameters, knowing the right commands can make it an invaluable tool for any media-related work. It originated in the early 2000s and has since become a cornerstone of internet video.

Installation Process

Here’s how to install FFmpeg on different operating systems:

macOS

The easiest way to install FFmpeg on a Mac is by using Homebrew, a package manager for macOS.

Open the Terminal app.
If you don’t have Homebrew installed, run the following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Once Homebrew is installed, you can install FFmpeg with this command:

brew install ffmpeg

Windows

Download the latest FFmpeg build from the official website. The builds from gyan.dev are recommended.
Extract the downloaded .7z file using a tool like 7-Zip.
Rename the extracted folder to FFmpeg and move it to the root of your C: drive (C:\FFmpeg).
Add FFmpeg to your system’s PATH environment variable:
- Search for “Edit the system environment variables” in the Start Menu and open it.
- In the System Properties window, click on “Environment Variables”.
- Under “System variables,” find and select the “Path” variable, then click “Edit.”
- Click “New” and add the path to the bin folder inside your FFmpeg directory: C:\FFmpeg\bin.
- Click “OK” to close all windows.
Open Command Prompt and type ffmpeg to verify the installation.

Linux

You can use your distribution’s package manager to install FFmpeg.

Debian/Ubuntu:

sudo apt update
sudo apt install ffmpeg

Fedora/CentOS:

sudo dnf install ffmpeg

Arch Linux:

sudo pacman -S ffmpeg

Important Commands

Here are some of the most common and useful FFmpeg commands:

Image Resizing

To resize an image, you can use the scale filter. To maintain the aspect ratio, you can specify one dimension and set the other to -1.

ffmpeg -i input.jpg -vf scale=320:-1 output.png

This command resizes input.jpg to a width of 320 pixels while maintaining the original aspect ratio.

GIF Creation

You can easily create a GIF from a video. The following command creates a high-quality GIF from a specific portion of a video.

ffmpeg -ss 30 -t 3 -i input.mp4 -vf "fps=10,scale=320:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 output.gif

-ss 30: Starts the GIF 30 seconds into the video.
-t 3: Makes the GIF 3 seconds long.
fps=10: Sets the frame rate to 10 frames per second.
scale=320:-1: Resizes the GIF to a width of 320 pixels.
The palettegen and paletteuse filters create a custom color palette for better quality.
-loop 0: Makes the GIF loop infinitely.

Video Format Changes

Converting a video from one format to another is straightforward.

ffmpeg -i input.mp4 output.avi

This command converts an MP4 file to an AVI file. You can also specify video and audio codecs, bitrates, and other options for more control over the output.

Other Useful Commands

Extract Audio:

ffmpeg -i input.mp4 -vn output.mp3

Cut a Video:

ffmpeg -i input.mp4 -ss 00:00:30 -t 00:00:30 output.mp4

Compress a Video:

ffmpeg -i input.mp4 -vcodec libx264 -crf 23 output.mp4

Use Cases

FFmpeg is incredibly versatile. Here are some of its key use cases:

Media Conversion: Convert audio and video files between various formats.
Video and Audio Editing: Trim, crop, merge, and apply filters to media files.
Streaming: Stream live video and audio content over the internet.
Screen Recording and Capture: Record your computer screen, capture video from webcams, and record audio from microphones.
Automation: Integrate FFmpeg into scripts to automate repetitive multimedia tasks.
Watermarking: Add text or image watermarks to your videos.

Why companies are moving away from NextJS?

2025-06-16T00:00:00Z

TL;DR

Companies are shifting away from Next.js because of concerns about increased complexity, vendor lock-in, performance limitations at scale, and the flexibility offered by alternative frameworks like Astro, Remix, or pure React solutions with Vite. While Next.js remains a powerful tool, it’s not always the best choice for all projects.

The Rise and (Partial) Fall of Next.js

Next.js has been the darling of the frontend community for years. And why wouldn’t it be? It’s easy to use, SEO-friendly, and simplifies tasks like server-side rendering (SSR) and static site generation (SSG). But lately, a surprising number of companies have started exploring or outright migrating to alternatives. What’s happening here?

Let’s unpack the factors behind this shift.

Too Much Complexity for Simple Needs?

You know what? Next.js started as a straightforward framework. It was a breath of fresh air: just a pages directory and minimal configuration. But things have changed—dramatically. Over the years, Next.js has grown increasingly feature-rich, making it sometimes overly complex for simpler projects.

Companies working with straightforward landing pages or static sites started questioning if they needed the entire Next.js toolset. After all, not every website requires SSR or complex routing. Imagine buying a Swiss Army knife only to use the corkscrew, feels a bit excessive, right?

The Vendor Lock-in Problem

One significant concern cropping up lately is vendor lock-in. Next.js has increasingly become intertwined with Vercel’s ecosystem; it’s practically built to run seamlessly on Vercel. Sure, you can run Next.js elsewhere, but you’ll often miss out on key optimizations or ease-of-use perks.

This dependence has made some companies wary, especially those who prefer flexibility or have strict vendor policies. They want to know they’re not boxed into a single hosting provider if pricing or performance demands shift.

Performance Concerns at Scale

Let’s talk scalability. At small to medium scales, Next.js feels lightning-fast and buttery-smooth. But when you’re dealing with hundreds of thousands of pages or heavy workloads, cracks begin to appear. Companies at enterprise scale have reported longer build times, problematic deployments, and diminishing returns on productivity.

Building massive projects in Next.js can lead to slower development cycles and increased complexity when handling build times and incremental static regeneration. This friction has pushed some developers to look elsewhere.

Alternative Frameworks: Less is Sometimes More

Companies have started noticing other frameworks like Astro, Remix, SolidStart, or pure React setups with Vite. These offer intriguing advantages:

Astro provides unparalleled performance and flexibility by shipping zero JavaScript by default—ideal for content-heavy sites.
Remix shines with its simplicity, predictable routing, and full control over server-side data loading without the heavy overhead.
Vite with vanilla React has gained fans for its sheer simplicity and blazing-fast dev experience, especially when SSR isn’t crucial.

The appeal of a leaner, more focused architecture has caught developers’ attention, pulling companies away from the heavyweight nature of Next.js.

Real-World Example: Shopify’s Shift

Take Shopify, for instance. Shopify famously moved their Hydrogen frontend away from Next.js to Remix. The reasoning? Remix offered a simpler, cleaner way to handle dynamic commerce features and a better developer experience at Shopify’s scale.

Moves like Shopify’s haven’t gone unnoticed, causing others in similar positions to reconsider their own framework choices.

When Does Next.js Still Shine?

This doesn’t mean Next.js has suddenly become irrelevant—far from it! It still excels in many situations:

Complex, interactive sites needing SSR and seamless SEO
Projects tightly coupled with Vercel’s deployment platform
Medium-scale web apps benefiting from Next’s ecosystem of plugins and integrations

But the takeaway here is simple: Next.js is not the silver bullet it once seemed.

Wrapping Up: What’s Next (Pun Intended)?

Ultimately, deciding whether Next.js is right for your company comes down to your specific needs. But the industry trend is clear—companies crave simplicity, flexibility, and scalability. Next.js might check many boxes, but when it falls short, alternatives are increasingly ready and compelling.

So, honestly, is it time for you to reconsider your frontend choice too?

Mono repo vs. micro front-ends with Next.js

2024-07-01T00:00:00Z

In the world of web development, the architecture of your project can significantly influence its scalability, maintainability, and performance. Two popular approaches in contemporary development are the mono repo and micro front-ends. Each has its distinct advantages and potential drawbacks, and choosing the right one can be pivotal to the success of your project.

Mono Repo

A mono repo, short for monolithic repository, is a version control strategy where all the code for multiple projects is stored in a single repository. This approach centralizes code management, making it easier to share code, tools, and libraries across different projects. The mono repo strategy has been famously adopted by large organizations like Google, Facebook, and Microsoft due to its ability to streamline development processes and enhance code reuse.

When to Choose a Mono Repo?

Single App Deployment: It involves deploying the entire application as a unified entity rather than dividing it into separate apps. This approach simplifies the release process with a single CI/CD pipeline, ensuring consistency across the application and reducing compatibility issues. It enables atomic updates, where all changes are deployed simultaneously, simplifying versioning and ensuring application-wide consistency.^[1]
Unified Scaling Needs: Since we have a single application, it is not possible to scale individual modules separately, such as the catalog flow versus a static page. Instead, everything must be scaled together as one unified application.
Change Management: When your change management strategy fine with deploying the entire application rather than individual modules, single deployment is ideal. This approach ensures that all updates and changes are applied uniformly across the application, maintaining consistency and simplifying version control. It eliminates the need to manage separate deployment processes for different modules, streamlining the release process and reducing the potential for compatibility issues.
SPA Behavior: Next.js ensures a uniform navigation experience throughout the application, contrasting with page refreshes required when switching between different parts of the application.
Centralized State Management: Managing global state and shared resources like authentication state becomes simpler across the entire application.
Performance: Some components, such as Header, Footer, and Navigation, are consistently shared across different parts of the application. This can be achieved by using layouts in Next.js, allowing for dynamic rendering of pages while keeping these common components static.

Example Architecture of Mono Repo

my-mono-repo/
├── web-application/
│   ├── app/
│   │   ├── authentication/
│   │   │   ├── page.js
│   │   │   ├── login.js
│   │   │   ├── register.js
│   │   ├── catalog/
│   │   │   ├── page.js
│   │   │   ├── product.js
│   │   ├── static-pages/
│   │   │   ├── page.js
│   │   │   ├── about.js
│   │   ├── layout.js
│   │   ├── page.js
│   ├── public/
│   │   ├── favicon.ico
│   ├── styles/
│   │   ├── globals.css
│   ├── next.config.js
│   ├── package.json
├── packages/
│   ├── package1/
│   │   ├── index.js
│   ├── package2/
│   │   ├── index.js
│   ├── package.json
├── turbo.json
├── package.json
├── README.md

In this structure:

my-mono-repo/ is the root directory.
web-application/ contains the app/ directory, which is part of the Next.js App Router.
- The app/ directory includes subdirectories for authentication/, catalog/, and static-pages/, each with their respective files such as page.js (required for Next.js pages) and other specific components or pages like login.js, register.js, product.js, etc.
- layout.js is used for layout components.
- page.js in the root of app/ is the main entry point for the application.
The public/ directory is for static assets like favicon.ico.
The styles/ directory is for global styles, such as globals.css.
next.config.js is the configuration file for Next.js.
package.json in web-application/ is for the web application’s dependencies and scripts.
packages/ contains subdirectories package1/ and package2/, each with their index.js files, and a root package.json for package configurations.
The root directory contains turbo.json for Turbo Repo configuration, package.json for root dependencies and scripts, and README.md for project documentation.

This structure aligns with Next.js conventions and should help you organize your Next.js application within your mono repo setup.

Micro Front-Ends

Micro front-ends are a front-end development approach where a web application is divided into smaller, independent fragments. Each fragment, or micro front-end, is developed, tested, and deployed independently by different teams. This architecture mirrors the principles of microservices on the backend, aiming to bring modularity, flexibility, and scalability to the front-end. Micro front-ends are particularly beneficial for large-scale applications where different teams need to work on different parts of the application simultaneously without interfering with each other’s work.

When to Choose Micro Front-Ends?

Modularity and Independence: Each micro front-end is developed, tested, and deployed independently, allowing teams to work autonomously without impacting other parts of the application. Teams can choose the best tools and technologies for their specific micro front-end, leading to more innovative and optimized solutions.
Scalability: Different parts of the application can be scaled independently based on demand. For example, the catalog flow can be scaled separately from a static page, optimizing resource utilization. Load times can be improved by delivering only the necessary parts of the application to users, enhancing the overall user experience.
Separation of Concerns: Since each of the application can be managed independently, simplifying maintenance and updates without impacting other parts of the system.

Example Architecture of Micro Front-Ends

my-mono-repo/
├── web-application/
│   ├── authentication-app/
│   │   ├── app/
│   │   │   ├── page.js
│   │   │   ├── login.js
│   │   │   ├── register.js
│   │   ├── public/
│   │   │   ├── favicon.ico
│   │   ├── styles/
│   │   │   ├── globals.css
│   │   ├── next.config.js
│   │   ├── package.json
│   ├── catalog-app/
│   │   ├── app/
│   │   │   ├── page.js
│   │   │   ├── product.js
│   │   ├── public/
│   │   │   ├── favicon.ico
│   │   ├── styles/
│   │   │   ├── globals.css
│   │   ├── next.config.js
│   │   ├── package.json
│   ├── static-pages-app/
│   │   ├── app/
│   │   │   ├── page.js
│   │   │   ├── about.js
│   │   ├── public/
│   │   │   ├── favicon.ico
│   │   ├── styles/
│   │   │   ├── globals.css
│   │   ├── next.config.js
│   │   ├── package.json
├── packages/
│   ├── package1/
│   │   ├── index.js
│   ├── package2/
│   │   ├── index.js
│   ├── package.json
├── ingress.yaml
├── turbo.json
├── package.json
├── README.md

In this structure:

The ingress.yaml file configures an NGINX ingress controller to route traffic to different services based on the URL path.
Requests to /authentication-app are routed to authentication-service.
Requests to /catalog-app are routed to catalog-service.
Requests to /static-pages-app are routed to static-pages-service.

Conclusion

In summary, it completely depends on project needs like, change management cycles, team structure, etc. to choose one or the other approach. Choosing a single deployment approach ensures simplicity and consistency throughout your application’s updates. However, it requires careful coordination and may have limitations in scalability compared to deploying apps separately.

Also, there are other ways exists that can bring all your MF apps together for example: Module federation, shell-app concept.

This doesn’t mean we are bound to deploy everything together, you can still deploy shared packages separately. ↩︎

Styling options in NextJS 13+ (server side and client side)

2024-05-14T00:00:00Z

Styling choices in Next.js can be confusing. Some prefer CSS modules, while others opt for the popular Tailwind CSS.

Next.js 13+ now comes with server-side components, which can cause issues with certain UI libraries that aren’t set up for server-side rendering (SSR). Although you can render components on the client side instead, it might not be the best fit for Next.js 13+.

In this article, we’ll explore the different styling options Next.js offers out of the box, following their official recommendations.

CSS modules

In Next.js, CSS modules are seamlessly integrated. You can designate module-specific styles by adding the .module.css extension. This feature automatically generates distinct class names tailored to each module, facilitating the use of identical class names across various modules.

For instance, within the app directory, importing CSS modules is straightforward, allowing for styling across your project.

// app/dashboard/layout.js

import styles from './styles.module.css';

export default function DashboardLayout({children}) {
  return <section className={styles.dashboard}>{children}</section>;
}

/* app/dashboard/styles.module.css */

.dashboard {
  padding: 24px;
}

TailwindCSS (recommended)

It’s a CSS framework, prioritising utility-first principles, endorsed by the Next.js team. It provides the flexibility to utilize their predefined classes and theme. Additionally, you have the option to customize your theme either by extending the existing classes or substituting them entirely. Setting up Tailwind CSS in your Next.js app is straightforward with guidance available in Next.js’ own documentation. Here’s the link.

Global styles

If you are coming from tradition background and what to stay with but also what to work with NextJS 13. This option is for you.

For example, you can refer to the stylesheet named app/global.css

body {
  padding: 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

Which can further be included one time in the root layout app/layout.js and work like traditional applications

// These styles apply to every route in the application
import './global.css';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

CSS-in-JS (currently not fully supported in SSR)

As per NextJS documentation, CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. However the team to is working on it to make it possible to work in both ways.

I would personally don’t recommend since it will bring lot of hassle in production applications and also not good in performance with growing application.

External StyleSheets

This criteria is useful when you are relying on some third party CSS which has its own style guidelines and can be used by just including them.

import 'bootstrap/dist/css/bootstrap.css';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  );
}

SASS

This could be your next go-to option (following Tailwind CSS) if you seek control over your CSS and desire dynamic behavior. It offers the ability to create custom themes, grids, and more. However, it does come with a learning curve, as not everyone may be familiar with SASS.

References

NextJS Documentation

State handling in React JS

2024-04-11T00:00:00Z

React’s component-based architecture enables developers to create reusable, composable UI elements. However, as applications grow in complexity, managing the state of these components becomes crucial for maintaining a predictable and efficient user experience.

In React, state refers to the data that determines a component’s behavior and rendering. It encapsulates the current state of a component and influences its appearance and interactions. Understanding how to manage state effectively is fundamental to building robust and scalable React applications.

In this article, we’ll dive into the fundamentals of state handling in React, exploring various techniques and best practices for managing state within components. We’ll cover local component state, and application level state handling techniques with libraries like Redux, Zustand, and Context API. By the end, you’ll have a comprehensive understanding of which path to choose for difference scenarios.

State Management Flow Chart

Case	Use Case	Example
useState (component)	Scoped to a single component	`selected` state in `Single Component` (product-variations/index.jsx) The property is used only in this component.
useState (page)	Scoped to a single page	`isOverlayOpen` state in `CustomizationContainer` (customization-component.js) The property is part of an object that is passed as a prop to AddToCartModalComponent (and no further).
Context API	Prop drill is needed for more than one level	PDP, where we might have component/page state for "selected option set" and some deep component needs to know about it.
Zustand/Redux	Needed across the application and is based on user action, whether that be: - Direct input (Eg. deliveryInfo.phone) - Selection of explicit options (Eg. fulfillmentDate) - Selection of implicit options (Eg. storeId) - System assigned value that can’t be querieddirectly (Eg. orderId)	In addition to the use case-specific examples at left, you can find the rest of the global store in /stores
SWR Hook	- Managing data fetching and server managed state - `useSWR` is able to fetch backend data, as well as manage caching for redundant requests - Supports traditional HTTP requests as well as graphQL queries.	-
URL query params	When page level state needs to be set from outside of the page.	Passing an orderId from an email, etc.

Application Flow

Application flow with selection of state management options

With the help of above example, you can decide which path to got with.

Nextcloud on synology docker 2024

2024-01-25T00:00:00Z

NextCloud is a widely used hosting solution that offers an integrated office suite, allowing users to utilize the platform in a manner similar to services such as Dropbox and Google Drive.

The application can be hosted in two ways on Synology.

Using Web station

synology web station

You can directly install different web services as part of Synology packages from the Synology package center and host them as a website using Web Station.

Using Docker

On the other hand you can use docker approach to host nextcloud which is more controlled and clean. You can either use Container Manager or directly ssh into your Synology NAS and run docker container. This method is preferred because most vendors update their docker images.

Using Docker method also enables you to move your NextCloud setup in future to different system or machine without facing much challenges.

Step 1

Create new folder namely nextcloud under the root level docker folder. Inside the nextcloud folder create two more folders called, data and config.

synology file station

Step 2

Now that we have required folders in place, its time to run docker container.

I suggest opting for the ssh method to run the container instead of relying on the Container Manager since configuring it through the Container Manager didn’t yield successful results for me.

$ docker run -d \
  --name nextcloud
  -e TZ=Europe/Berlin \
  -p 8080:80
  -v /volume1/docker/nextcloud/config:/var/www/html/config \
  -v /volume1/docker/nextcloud/data:/var/www/html/data \
  nextcloud

Above command will spin-up the nextcloud container on port 8080, you can access the application on http://<your_synology_ip>:8080/

Note: This version will be running on Apache as a server inside the container and using SQLite for the database.

If you are looking for more robust version or want to enable the caching, I would suggest to use docker-compose.json version with redis. Please follow Official documentation.

Eleventy resume builder

2024-01-05T00:00:00Z

Exciting news! This project has been featured in the Official Eleventy Starter Projects.

11ty resume template lighthouse scores

View Demo

For the past couple of years, I’ve been utilizing 11ty as the framework for my personal projects. It has quickly become my preferred tool because it avoids unnecessary JavaScript when it’s not essential.

Prior to adopting 11ty, I relied on Gatsby for my personal blogs and static-generated applications. However, Gatsby introduces a lot of asynchronous JavaScript during the build process. In contrast, 11ty doesn’t mandate any runtime JavaScript in the browser to run your statically generated content. The effectiveness also depends on how you manage your content.

Despite searching the internet, I couldn’t find a quick starter for my online resume project, not even on the official 11ty start page. Consequently, I decided to invest some time in creating one and making it available as a starter project for a broader audience.

Feature

Fully Customizable
Semantic HTML
Theming with TailwindCSS (Dark/Light)
Accessible (WCAG AA)
Self-Contained (no external resources)
Search Engine Optimized (meta, JSON-LD, etc…)
100% Lighthouse score across all the areas

The complete source code, along with guidance on configuring and customizing the project, is available on Github.

Resources

Starting my journey to veganism in 2024

2023-12-04T00:00:00Z

Welcome to the month of resolutions 🏆

This article is a personal account of my quest for a greener and more compassionate future, highlighting the joys, challenges, and the profound sense of purpose that comes with going vegan in the year ahead.

Embarking on a transformative journey into 2024, my New Year resolution is a commitment to embrace a vegan lifestyle. Join me as I share the profound impact of this decision on my health, and the environment. Discover the benefits of a plant-based diet, explore sustainable living practices, and gain insights into the power of mindful, eco-friendly choices.

The Decision to Go Vegan

After pursuing 4+ years of vegetarian food journey now I am thinking to become vegan for betterment of our planet earth as well as for various health benefits (I’ll talk about it later in this article).

Health and Wellness Benefits

Adopting a vegan lifestyle, which involves abstaining from the consumption of animal products and by-products, can have various health and wellness benefits. It’s important to note that individual experiences may vary, and a well-balanced vegan diet is essential to ensure nutritional adequacy.

Community and Support

Connecting with Like-minded Individuals

From social media groups and forums to local meet-ups and events, we delve into the diverse avenues through which individuals can connect with others who share a passion for vegan living.

Personal narratives, challenges, and successes are not only a source of inspiration but also potent tools for advocacy. By sharing experiences, individuals contribute to the collective narrative of veganism, fostering understanding and empathy among a broader audience.

Conclusion

I am going to try this journey as I care about nature and our planet earth. I will do my best to continue this journey beyond 2024.

Stay tuned; I’ll be sharing updates on my journey.

World wide waste

2023-09-11T00:00:00Z

I recently finished a book called World Wide Waste by Gerry McGovern. The author helps organizations reduce data waste by designing simpler, lighter, and more environmentally friendly websites and apps.

Thank you, Holger Hellinger, for the recommendation; reading it was indeed worthwhile! 😊

world wide waste book cover

What is Digital waste?

Digital is Physical, it is quite important to understand whatever you download/upload on the web is all impacting our planet Earth. Single byte causes load on the server which generates CO₂. I often do research to benchmark my projects on tools where I get information about my carbon footprints. You can check my previous article “7 ways to make your website more accessible and sustainable” to get some idea about how Digital is playing a role in Sustainability and how it can be improved.

Define Sustainability Goals

It is always good to reflect on the carbon footprints you are leaving behind. Have you done so far, here are some key things you can consider.

Check your phone

Less is more, use your phone only when it is required. Don’t just unlock your phone to check if are there any new emails, or tweets. I believe you will get notified when there is any.

Location services are not always required to be enabled, you can even put your phone on airplane mode (maybe while sleeping).

Think twice before downloading new Apps, especially those free apps that have thousands of running ads.

Plug your phone on charging when it goes down to 50%, it will help to keep your battery healthy for a longer period.

Use Dark mode, it can save up to 30% of battery time.

Do you own a website?

HTML and CSS

HTML and CSS define the layout of your webpage, and what colors will be shown to the users. There are n number of frameworks out there in the market of open-source that you can use to make your web development faster. These frameworks and libraries can easily kill your website’s performance and bloat with a lot of unnecessary code that you might not need at all.

Learn with Gurpreet is developed using custom CSS and 11ty framework which only helps to pre-render all the pages and I am using Vercel to deploy my application. There is no need to have 100KB of JavaScript to support page transitions user states and whatnot.

There is no harm in using libraries like ReactJS, but make sure you really need it. You can build the solution without it.

Wikipedia estimated that they save 4.3 terabytes a day of data bandwidth for their visitors. With that, they saved having to plant almost 700 trees to deal with the yearly pollution that would have been caused.

Images

Before adding an image to your website, make sure that does something useful which you can’t do with text. Every time you add something, plan your next move to delete something so you can maintain the overall code footprints.

There are situations where you surely need images to showcase the information. For Example: AirBnb, if they remove images from their platform they can’t survive.

Videos

They are even worse, a 30-second video can easily weigh 3MB, so one second of video would cost 300KB. Whereas, 1000 words of text is about 6KB. Imagine, 1 second of video has as much impact on the environment as 50,000 words of text.

Ten hours of high-definition movies consume more energy than all the English language articles on Wikipedia put together, according to The Shift Project.

Custom Fonts

Most of the time system fonts will fulfill your needs. You don’t need custom font unless you own a brand and you need to keep your brand identity the same across all the platforms.

If you really want to use custom fonts then try variable fonts which will help you to generate different variations from a single font file.

How to prevent Digital waste?

There are multiple approaches to address this challenge. To begin, it’s not always necessary to keep pace with the latest tech gadgets. For instance, your mobile phone can serve you well for 4-5 years, and the carbon footprint generated during its production is equivalent to what it emits over that time.

Electric vehicles (E-vehicles) don’t offer a silver bullet for CO₂ emissions. The battery production process consumes significant resources, and these vehicles need to traverse multiple production units, contributing to pollution.

Prioritize Quality: Opt for items built to last, as the environmental cost of production is high.

Beware of ‘Free’: Nothing truly comes without a cost; free applications often extract payment in the form of your data.

Avoid Major Brands: Many renowned brands operate at a distance, making it challenging to reduce costs when sourcing products from thousands of kilometers away.

AI Complements, Doesn’t Replace Humans: While AI has its merits, it should not completely replace human involvement. Keep your cognitive skills engaged in routine tasks.

Conclusion

We need to gain mastery over digital technology, as failing to do so will result in it controlling us. We must actively shape its use, or it will shape our lives. Ultimately, it’s imperative to maintain control over the digital realm.

Link to the book and author’s page

The rise of digital minimalism

2023-06-23T00:00:00Z

In today’s fast-paced digital world, finding balance and decluttering our digital lives has become increasingly important. Digital minimalism offers a solution to combat information overload, reduce screen time, and create a healthier relationship with technology. In this blog post, we’ll explore the concept of digital minimalism and provide practical tips on how readers can declutter their digital lives and find balance in the digital age.

Understanding Digital Minimalism

Define digital minimalism: Explain that digital minimalism is a philosophy that advocates for intentionally and selectively using digital tools and technologies to optimize well-being and focus on what truly matters.

Discuss the benefits: Explore how digital minimalism can enhance mental well-being, increase productivity, improve relationships, and foster creativity.

Assessing Your Digital Clutter

Conduct a digital audit: Encourage readers to evaluate their digital footprint, including apps, social media accounts, emails, and digital subscriptions.

Identify digital distractions: Help readers identify time-consuming and attention-draining digital activities that they can minimize or eliminate.

Decluttering Your Digital Life

Streamline your apps and devices: Suggest deleting unnecessary apps and organizing remaining apps into folders for easy access.

Clean up your inbox: Provide tips for organizing and decluttering email inboxes, such as unsubscribing from newsletters, creating filters, and using productivity tools.

Manage digital subscriptions: Encourage readers to review their digital subscriptions and cancel those they no longer use or find value in.

Reducing Screen Time

Establish digital boundaries: Encourage readers to set designated screen-free times or “digital detox” days to create space for other activities.

Implement device-free zones: Suggest creating device-free zones at home or during specific activities, such as meals, family time, or before bedtime.

Utilize screen time tracking tools: Recommend apps or features that track screen time usage, helping readers become more aware of their digital habits.

Cultivating Digital Mindfulness and Balance

Promote digital mindfulness: Emphasize the significance of staying fully present and engaged in real-life activities, like hobbies, exercise, or quality time with loved ones, while minimizing digital distractions.

Prioritize meaningful connections: Encourage readers to focus on quality interactions by fostering meaningful relationships offline and reducing excessive social media consumption.

Explore offline activities: Provide a list of engaging offline activities readers can try, such as reading books, pursuing hobbies, practicing mindfulness or meditation, or participating in community events.

Conclusion

Embracing digital minimalism paves the way for reclaiming our time, focus, and overall well-being in the digital era. By streamlining our online presence, cutting down on screen time, and fostering a harmonious equilibrium between the digital and real worlds, we can establish a healthier and more purposeful relationship with technology. By integrating these actionable suggestions into our daily routines, we can experience heightened productivity, enhanced mental well-being, and a more satisfying existence in our digitally interconnected society.

Some information is collected from chatGPT

Dockerizing a react app in simple steps

2023-05-21T00:00:00Z

Docker allows you to package your React app along with its dependencies and configuration into a container. This ensures that the application runs consistently across different environments, including development, testing, and production.

As we know docker containers are lightweight and encapsulate the entire application stack, including the operating system, runtime environment, and dependencies. This makes it easy to move your React app between different systems and platforms without worrying about compatibility issues.

Let’s quickly check how can we ship our react application via docker.

Step 1: Create a Dockerfile

Start by creating a file named Dockerfile in the root directory of your React app. The Dockerfile defines the steps needed to build a Docker image for your application.

Step 2: Specify the base image

In the Dockerfile, specify the base image you want to use. For a React app, you can use a lightweight Node.js base image. For example, you can use the official Node.js Docker image:

FROM node:14-alpine

Step 3: Set the working directory

Set the working directory inside the Docker image where your application code will be copied. Create the directory if it doesn’t exist.

WORKDIR /app

Step 4: Copy package.json and package-lock.json (or yarn.lock) files

Copy the package.json and package-lock.json (or yarn.lock if you’re using Yarn) files to the working directory of the Docker image.

COPY package*.json ./

Step 5: Install dependencies

Run the package manager (npm or yarn) to install the dependencies specified in the package.json file.

RUN npm install

Step 6: Copy the application code

Copy the rest of the application code to the Docker image’s working directory.

COPY . .

Step 7: Build the React app

Run the build command for your React app. This will create a production-ready bundle.

RUN npm run build

Step 8: Expose a port

If your React app needs to listen on a specific port, use the EXPOSE instruction to specify the port number.

EXPOSE 3000

Step 9: Specify the command to run

Define the command to run when the Docker container starts. Typically, you’ll use the CMD instruction to run a server that serves the built React app. For example, if you’re using serve as the server, you can use the following command:

CMD ["npx", "serve", "-s", "build"]

Step 10: Build the Docker image

Open a terminal or command prompt, navigate to the directory containing the Dockerfile, and run the following command to build the Docker image:

docker build -t your-image-name .

Replace your-image-name with the desired name for your Docker image. Run the Docker container: Once the image is built, you can run a container based on that image. Use the following command:

docker run -p 3000:3000 your-image-name

Replace your-image-name with the name you provided when building the image.

Your React app should now be Dockerized and running in a Docker container accessible at http://localhost:3000.

Note: The above steps provide a general outline for Dockerizing a React app. Depending on your specific project requirements, you may need to make adjustments to the Dockerfile or add additional configuration.

How to setup mac terminal

2023-03-21T00:00:00Z

Let’s quickly start with the forgotten package on Mac operating system Homebrew.

Install Homebrew

Open you Mac terminal and install the package with following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

After the installation it will ask you to add homebrew to your path, if not please follow the process given below (replace [username] with your username):

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/[username]/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Install iTerm2

Because I don’t like default terminal 😜

brew install --cask iterm2

Install Git

I believe you have git already installed on your Mac, if not please follow the command:

brew install git

Install Oh My Zsh

Fun time begins, this utility helps us to make our terminal prompts more intuitive.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Install PowerLevel10K Theme

After installing Oh My Zsh, its time to make it more interesting by installing another package called PowerLevel10K.

git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k

After installing, please open your ~/.zshrc file in your preferred code editor and change the following line:

ZSH_THEME="powerlevel10k/powerlevel10k"

Now, please restart your iTerm2 or perform source ~/.zshrc to reflect changes.

Note: You need to install Meslo Nerd Font as well, it will be part of PowerLevel10K theme only, please press y when it ask.

Configure PowerLevel10K

Ideally, you have been asked to set PowerLevel10K theme, but in case you want to make any additional changes, feel free to use following command:

p10k configure

Change iTerm2 Colors to My Custom Theme

Step 1: Open iTerm2

Step 2: Download color profile (it will be added to Downloads folder):

curl https://raw.githubusercontent.com/learnwithgurpreet/mac-dev-env-setup/main/nightking.itermcolors --output ~/Downloads/nightking.itermcolors

Step 3: Open iTerm2 preferences

Step 4: Go to Profiles > Colors

Step 5: Import the downloaded color profile (nightking)

Step 6: Select the color profile (nightking)

Install Auto suggestion Plugin

Clone this repository into $ZSH_CUSTOM/plugins (by default ~/.oh-my-zsh/custom/plugins)

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

After installing, please open ~/.zshrc file and modify the plugins line to what you see below:

plugins=(git zsh-autosuggestions)

Update VSCode Terminal Font (Optional)

Open settings.json of your vscode and add "terminal.integrated.fontFamily": "MesloLGS NF"

We are done!

I believe you will like your terminal more than before 😍

Resources

Track web traffic anonymously

2022-06-27T00:00:00Z

Implementing analytics on any web platform is not a difficult job but keeping it privacy-focused is. Considering the privacy of individual users, we should always think twice before considering any platform. I would like to divide this article into two main categories. First, we will talk about some industry-leading analytics tools, second will jump on open source solutions.

Industry-leading tools

You must have seen Google Analytics on many websites, which is one of the free^* solutions for developers. When it comes to privacy, Google is not a good option to opt for, you can check my previous article: Can we use Google services without compromising privacy?.

Some sites are enabled with Google Ads as well as Google Analytics which is helping the Google algorithm to get the most out of it. Google keeps cookies on your browser which helps Google to track your activities, even on other sites.

Going with free options like Google, you might not be sure how Google will use your data. Since you took free service you need to pay the cost by data.

On the other side, we have some paid options like Adobe Analytics. It comes with great features, but having adobe analytics on a web platform is not an easy job for small businesses. Adobe comes with its license cost, which is not easy to procure for small businesses.

Mostly these tools keep your data on their own servers (Eg. SAAS), so you don’t have direct control over your data. In some cases it is fine, but in countries like Germany where data privacy laws are very strong you need to inform end-users that all information you are taking from them and where it is going to be used.

Open source solution

I recently came across an open-source analytics tool called umami.is which is a self-hosted solution. It gives you full access to the data which is being collected from end-users. By default, this tool collects data in an anonymous manner, without creating any third-party cookie.

Their goal is to provide you with a friendlier, privacy-focused alternative to Google Analytics and a free, open-sourced alternative to paid solutions.

Umami tool example screenshot

Screenshot from umami.is

Data that is being collected by the tool can be exposed over a public URL so that your website users can also see that is being stored in analytics. Example: https://app.umami.is/share/ISgW2qz8/flightphp.com.

You can find more about this tool on their website: https://umami.is/docs/features.

Resource

There are some alternatives available for Google analytics that works like Umami.

Matomo

Matomo It comes with flexibility, which helps you to define your own custom measures. Like umami, it offers on-premises hosting which is free.

Open web analytics

Open Web Analytics is the free and open-source web analytics framework that lets you stay in control of how your instrument and analyze the use of your websites and application.

Plausible

Like Umami, Plausible is slightly new in open-source analytics tools. It is fast, and only collects a small amount of information - that includes numbers of unique visitors and the top pages they visited, the number of page views, the bounce rate, and referrers. Plausible is simple and very focused.

7 ways to make your website more accessible and sustainable

2022-05-21T00:00:00Z

I recently gave a talk in my organization Publicis Sapient, hence thought to write a blog post to extend my message to a wider audience.

We often talk about sustainability and try to decrease our CO₂ footprints by driving eco-friendly cars, going vegan, etc., but when it comes to the web we always think of using more powerful servers and memories (RAM) so our web platform always is available to users.

There is no problem having such expectations but at the same time, we forget about the environment and other key factories which are left behind.

If the Internet was a country, it would be the 7th largest polluter
sustainablewebmanifesto.com

Before going further, you need to understand your Digital Carbon Foot Print

During the pandemic, we increased our digital carbon footprint. From an organization’s perspective, its digital footprint grows when they produce content, shares marketing updates, hosts virtual workshops, etc.

A single image on a webpage can emit as much as 50 grams of CO₂e (e = “equivalent” to include greenhouse gases beyond just carbon dioxide.)

It looks very small, but imagine, a page having 5 images, will produce 225 grams of CO₂e which is sufficient for an electric car to drive up to 10 Kms.

Everything that makes your page faster, more accessible or easier to find, reduces your web-services carbon footprint.

1. Web Accessibility

It is a basic right of the user to be presented with an accessible platform over the internet. Accessibility should be implemented for all users.

Keyboard Support: Mostly people are using the mouse when it comes to scrolling or navigating through webpages, but there is a large number of people (including me) who still navigate webpages with the help of a keyboard. It makes it easier to navigate through form fields, hyperlinks, etc.
Native vs. Custom elements: HTML5 has introduced lots of out-of-the-box web-accessible tags: <dialog /> <meter /> <mark /> . It is time to start switching to these tags since most modern browsers have support for them.
NEVER forget **alt** attribute: We are in the year 2022 and still some CMS and authors are forgetting to provide alternate text (AKA alt attribute) in images. This text plays a crucial role when it comes to screen readers. It is also fine if you don’t have an appropriate description or if an image is being used for decoration only then keep it blank.
**<table>** vs. **<div>**: It is important to understand the usage of both tags, <table> should use to render tabular data only, for example, user records, etc. On the other side, <div> should only be used to define page layouts and content divisions.

Nevertheless, your website should follow WCAG standards in order to serve user needs.

2. Search Engine Optimization (SEO)

Most users these days search content on search engines like Google, DuckDuckGo, Bing, etc. Hence, the application should have good SEO implementation. It helps to reduce the CO₂ footprints because the faster you search for what you need the lower CO₂ will get produced.

Try to keep your content short and to the point.
Avoid image to show text based content, if needed please use proper alt attributes to describe what is being shown in the image.
Try to adapt schema.org guidelines.
Schema example of Video Object can be found on schema.org.

3. Copy Writing

Like SEO, you can achieve good or appropriate traffic by adding proper copy to your web pages. In case you are not sure about your content, hire content writers, and get your text converted to local languages.

As per WCAG, easy language is mandatory/required for some public offices like in Germany. See here: https://www.stadt-koeln.de/leben-in-koeln/soziales/informationen-leichter-sprache?kontrast=schwarz

4. Autoplay Videos

Some websites, especially news and media are showing auto-play videos. Sometimes, you don’t even want those videos to run on your browsers, still, they are coming.

The better option is to have a video transcript available even before clicking on the play button. Especially users who are using screen readers can upfront check the content of the video before really going through the entire video and downloading that 10MB of data.

Video transcript example from w3.org

Latest privacy enforcing browsers like Brave, and Firefox has features to restrict auto-play-related problems. As a user, you can also contribute by using such strict modes in browsers.

Note: By using strict modes in browsers you might not able to use all the websites properly.

5. Custom vs. System fonts

Every client wants their platform to adhere to their brand guidelines and sometimes to achieve that we ended up with a bunch of custom fonts that simply decrease the page load time. Not only that but it also increases the carbon footprint by draining your battery.

If you are using google fonts you need different variations for each instance to support different char-sets (languages). See below:

/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2)
    format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9,
    U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2)
    format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2)
    format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9,
    U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2)
    format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Google fonts are heavily being used on web applications. In recent times, a website was fined by the German court for leaking visitors’ IP addresses via Google fonts.

Source: https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/

Longer Rendering time

When we are using custom fonts, they tend to be downloaded in every request (yes you can cache them). Imagine a website has 3 fonts in 3 different variations, which means your browser has to down 3x3, 9 fonts in total.

Language support

Systems fonts come with out-of-the-box support for all the locales, wherein if you are using custom fonts, you might not get support for all local languages.

Variable fonts

Instead of adding different fonts for features like weight, width, and optical size, you can simply use variable fonts, and create your own variations in CSS:

/* Variable weight */
font-variation-settings: 'wght' 375;

/* Variable Italics */
font-variation-settings: 'ital' 1;

/* Variable Slant */
font-variation-settings: 'slnt' 14;

/* Optical Size */
font-variation-settings: 'opsz' 36;

See Example here: v-fonts.com/fonts/helvetica-now-variable

6. Green Web Hosting

Hosting also plays important role in the overall carbon footprint. You can control this by choosing a Green hosting provider, there are some providers who are using energy from natural resources.

Secondly, you can also restrict yourself by occupying fixed server resources and memory allocations. Instead, choose pay as you go since it dynamically calculates your needs and bill you accordingly.

For Example, ionos.com runs its servers on Green energy resources.

7. Dark Mode

Some mobile users are having OLED screens that use less battery, which is useful when it comes to dark modes. It simply turns the pixels off wherever black color is needed vs. lightening up them in black color. A classic example is to detect a user’s machine preference and choose the preferred one.

@media (prefers-color-scheme: dark) {
  :root {
    --color-light: #111;
    --color-dark: #fefefe;
  }
  img[src*='.png'] {
    filter: invert(1);
  }
}

It also helps readers who love reading before going to bed 😃

GoTo platform

You don’t need to be a technology expert to run an online business. Digital.com does the research for you, comparing the best products, services, and software to start or grow your small business website or online store.

Digital.com clarifies your options as you choose the right services to run your business – saving you time and money. Digital.com stands out because our team of researchers, writers, and experts have experience running online businesses and using software to meet their business goals.

Real-life experience is the foundation of Digital.com’s reviews:

They obtained trial accounts for each product so that our researchers could experience the onboarding process and user flow.
They interview power users of each product in order to incorporate their practical and long-term experience.
They summarize every user review available on the web using artificial intelligence to gauge overall user sentiment for each software product.
They devote weeks of researching, writing, and editing to develop each analytical review.
With this extensive research and testing, their team determines an overall Editor’s Rating to simplify your search.

At Digital.com, their team of experts have spent thousands of hours testing and utilizing all the tools available on the market in order to create and maintain their website. You can visit their site to view the free informational guides and resources they have created to help you with your digital needs.

Resources

How to secure a raspberry pi on your network

2022-05-14T00:00:00Z

If you are planning to expose your RaspberryPi over the internet, you should consider these security guidelines.

Installation

Use the official Image tool: You often find RaspberryPi images online from various sources. When it comes to security and privacy I would consider the official RaspberryPi imager to install RaspberryPi OS.

raspberry pi OS selection

OS selection in Raspberry PI Imager

Password and SSH: Use advance options and change the default password. In case you are going to use it with SSH then consider enabling it while the installation process itself.

raspberry pi advanced options

Enabling SSH and new password from Advanced options. However, you can later add SSH option by creating ssh file (without any extension) on the root.

Update and Upgrade all packages: The fact of having an open-source system is you will get lots of updates, I would recommend updating packages even after a fresh install. Log in with SSH and perform sudo apt update -y && sudo apt upgrade -y this command will first pull a list of the latest packages and followed by the installation.

Note: If you want to check what all packages are being installed, simply remove -y from the end of both commands.

Auto Updates

In the above-mentioned command, I showed you how to install the latest packages, but you need to do it manually. What if I give you an option where you don’t need to perform manually but your Raspberry Pi will do it for you like Windows/Ubuntu.

# Install following package
$ sudo apt install unattended-upgrades -y

# After installation open following file
$ sudoedit /etc/apt/apt.conf.d/50unattended-upgrades

# Add following given two lines
"origin=Raspbian,codename=${distro_codename},label=Raspbian";
"origin=Raspberry Pi Foundation,codename=${distro_codename},label=Raspberry Pi Foundation";

raspberry pi auto updates

Adding auto-update script configurations

These two lines will enable the package to pull the latest updates from Raspberry Pi official distros.

User Management

Since now we are up to date with our packages and auto-updates, it’s time to set up user rights.

Raspberry Pi comes with a default user pi which every hacker is aware of. To get rid of the obvious chance to get hacked is to create a new user.

# First, create new user (gurpreet is a new user)
$ sudo adduser gurpreet

# Now add your user to the admin group
$ sudo gpasswd -a gurpreet adm

# Also, provide sudo access to your user
$ sudo gpasswd -a gurpreet sudo

I would suggest to test newly created user by opening new terminal window and try login, before closing your existing window.

Try: sudo whoami to check sudo user and it should return root as output.

Job is not done here, we need to lock the default pi user as well.

$ sudo passwd -l pi

It will lock pi the user. We will not delete this user since some packages have pi user hard-coded users to perform admin-related operations.

Firewall setup

After user management, you are quite safe than a normal Raspbian setup. Before opening your Raspberry Pi over the network, you should perform the following steps.

By default Raspberry Pi has open lots of ports for communication, sometimes hackers use these ports to get into your Raspberry Pi. In order to check, you can perform netstat -an command and see how many ports are open.

There are some packages that you can install to add a firewall, sometimes it gets very difficult to set up. I would recommend a package called UFW which is quite easy to set up and is being widely used by industry-leading hosting companies like Digital Ocean.

$ sudo apt install ufw -y

After the installation, enable SSH as a very first thing because I believe you will be logged in via SSH.

$ sudo ufw allow 22/tcp comment "SSH"

Default SSH port is 22 hence we need to enable it first. Tip: You can put a comment at the end, it will help you to understand the reason for enabling it when you open multiple ports.

You simply add more ports to the list, like 80/tcp for any web server related operation like
Nginx, etc…

After adding all required ports, please enable ufw the firewall by triggering the following command.

$ sudo ufw enable

It will immediately enable defined firewall rules on your Raspberry Pi. You can anytime check these defined rules with a command.

$ sudo ufw status numbered

UFW status

ufw status command output

Important: Before exiting, test your firewall setup by login in in new tab.

Prevent brute-force attack

After enabling our Raspberry Pi with firewall protection, I would still recommend enabling brute-force protection.

These days systems are capable enough to perform millions of calculations in a fraction of seconds. Hence some hackers are using such CPU processing to guess passwords. If your password is easy to guess, there could be a chance you were attacked by a brute-force attack.

To prevent our Raspberry Pi from a brute-force attack we need to install another package that will protect it from it.

$ sudo apt install fail2ban -y

After installing it you need to configure it for your personal use.

# Open fail2ban configuration file

$ sudoedit /etc/fail2ban/jail.local

# Add following information

[DEFAULT]
bantime = 1h
banaction = ufw

[sshd]
enabled = true

The above profile will disable the access for such users which are trying to guess your password more than 5 times.

Once you are done, please enable the service sudo systemctl enable fail2ban

Useful commands

$ sudo systemctl --type=service // List of all services

$ sudo systemctl --type=service --status=active // List of all active services

$ sudo systemctl disable <service-name> // Disable service

$ sudo systemctl enable --now <service-name> // It will enable the given service (right away, you don’t have to restart pi)

Top 5 ways to structure a frontend project

2021-09-11T00:00:00Z

While working on the open-source projects you get very little chance to structure the project, but you still can set some guidelines upfront and stick to them.

READMe file

Readme plays a crucial role in your project. Right from new team members to new teams, it helps you to understand about project/module.

It is important to set up README.MD meaningfully. Below are some example sections which can be part of your README file.

Project Title

The file should have a project/module name as a title, where people can easily relate to it.

Explanation

Write something about the project or module, like some introduction to the project.

Installation Guide

Provide clear installation steps so new team members can easily set up. Make sure you address Mac/Linux vs. Windows path problems and other important points like node version etc.

carbon

Example screenshot

.gitignore file

Every technology has its own project structure and standards. These standards help you to decide on what all project files are required and what all is actually needed only on your local machine or can be generated automatically by the build tool.

I would recommend creating a new project repository via the GUI tool on GitHub so you get the option to select the relevant .gitignore file.

Github Project Board (Kanban)

Sometimes while working on an open-source personal project you get very little time to keep track of your progress. I would suggest creating a Kanban board to track your progress.

kanban board

Kanban board on github

Branching strategy

main: Branch where you can keep your final code which includes all production code.

release: Branch where you can push your changes right after production release.

feature: On-going branch where you can push your features. However, you can create another branch fix for defects.

Editor choice

My personal editor choice is VSCode since it has support for almost all languages. Not only web projects but you can also work on native projects, like Flutter or ReactNative.

Feel free to share your own project experience and the tools you are using.

Day 6 (last) - Your first week in NodeJS

2021-08-10T00:00:00Z

Prerequisite

Overview

During the course of this series, we have already developed a Node.js application that can be deployed on the cloud.

There are some providers which provide cloud hosting for Node.js applications, we will be using one of those called Heroku.

Heroku is one of the good options I found in the market which comes with a free DEV account, which you can leverage to start working on small projects or POCs.

Start with account creation

To use Heroku, you defiantly need an account which can be done from here.

Once you have your Heroku account up and running, please create a project after login into your account.

create a new app

All you need is a unique name here which will become a sub-domain of Heroku, in my case, it will be https://not-failing.herokuapp.com/

Start with Heroku git setup

Heroku-hosted projects are also based on a git revisioning system, you can simply take checkout of your project and commit your changes.

Since we already have our project developed, we can simply convert it into a Heroku project.

Install the Heroku CLI

Download and install the Heroku CLI.

If you haven’t already, log in to your Heroku account and follow the prompts to create a new SSH public key.

$ heroku login

Create a new Git repository

Initialize a git repository in a new or existing directory

$ cd my-project/
$ git init
$ heroku git:remote -a not-failing

Deploy your application

Commit your code to the repository and deploy it to Heroku using Git.

$ git add .
$ git commit -am "make it better"
$ git push heroku master

Existing Git repository

For existing repositories, simply add the heroku remote

$ heroku git:remote -a not-failing

Since we have the .env file on our system and node_modules, don’t forget to create a .gitignore file with the following content.

You would also need to migrate your .env file variables and their values to Heroku environment variables.

There are two ways to set them, let’s check the command line.

$ heroku config:set MONGO_HOST=my_hostname
$ heroku config:set MONGO_PASS=my_password
$ heroku config:set MONGO_USER=my_username
$ heroku config:set MONGO_DB=my_db_name

You can later check your config variables by typing $ heroku config:get MONGO_HOST

Before pushing your code you need to make the following changes in the app.js file.

// app.js

// Add a condition to render "dotenv" package only on local
if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}

// Get PORT from process variables (to get Heroku PORT)
const PORT = process.env.PORT || 3000;

// Replace hardcoded PORT with variable.
app.listen(PORT);

I believe your App is up and running on Heroku now, like mine 😃

welcome page

running app

Hope you liked the series, feel free to drop a comment in case you want me to create another series on another topic.

Useful Links

Day 5 - Your first week in NodeJS

2021-08-09T00:00:00Z

As promised, this is my fifth article of Your first week in NodeJS web article series.

Prerequisite

Quick recap

In my previous article, I explained how to implement a template engine to get dynamic variables into your HTML file.

We used static data to show and save users in memory, now we will connect our application to MongoDB for better features and sustainability.

What is NoSQL?

Big data changed how we used to think of databases and storage, we used to have relational databases like MYSQL, SQLServer, etc. but now we have another technique to store data called NoSQL.

It stores data in documents in the form of JSON, instead of tables with rows and columns and it works very well with JavaScript (Node.js). This is what data looks like in the MongoDB database.

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  }
]

When we are not sure about the data structure or what kind of data is expected we can blindly choose the NoSQL approach and the industry-leading option is to go with MongoDB.

MongoDB Integration

We will be using MongoLabs for our MongoDB database setup which comes with the free tier option.

You can go to https://account.mongodb.com/account/login and claim your free account. You can follow the given steps to create a new database.

create project

Create a new project

save project

Save project with members (default is logged-in user)

create database

Create your first database

select plan

Select free plan

Once you create your cluster, it will take some time for the initial deployment.

create a database user

Now you need to create a user for your database

MongoDB Integration

Now your database is ready with username/password. Let’s install the mongoose npm package on our local. $ npm install mongoose

Note: To save your MongoDB details, you need to have a file with the name .env, which allows you to send these values in process.env or Node.js environment variables.

MONGO_HOST=my_hostname
MONGO_PASS=my_password
MONGO_USER=my_username
MONGO_DB=my_db_name

You will get above information in MongoDB connect option like mongodb+srv://my_username:my_password@my_hostname/my_db_name?retryWrites=true&w=majority

After creating the .env file you need to install a couple of packages, please refer to the package.json file below:

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "dotenv": "^10.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "mongoose": "^5.13.5",
    "nodemon": "^2.0.12"
  }
}

Now we are ready to change our app.js file with MongoDB changes.

First, you need to require the dotenv package to get MongoDB credentials from .env or process.env.

require("dotenv").config()

After requiring the package you will get access to all environment variables like this: const { MONGO_USER, MONGO_HOST, MONGO_PASS, MONGO_DB } = process.env;

Now we will connect the application with MongoDB, it requires the below steps:

require('dotenv').config();
const mongoose = require('mongoose');

// connect to the database
async function connectDB() {
  const {MONGO_USER, MONGO_HOST, MONGO_PASS, MONGO_DB} = process.env;
  await mongoose.connect(
    `mongodb+srv://${MONGO_USER}:${MONGO_PASS}@${MONGO_HOST}/${MONGO_DB}`,
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useFindAndModify: false,
      useCreateIndex: true
    }
  );
}

connectDB();

We need to require the mongoose package, and then followed by mongoose.connect() we will connect our current to our MongoDB instance.

It’s an async operation, you can use promise or async/await functions.

Once you are done with the connection, we will define our Schema and Modal.

Schema is required to let MongoDB know what kind of collections you are going to store into documents.

// Create Schema for users
const usersSchema = new mongoose.Schema({
  age: Number,
  name: String,
  email: String
});

// Create Modal for users
const UsersModal = new mongoose.model('users', usersSchema);

As I explained in my previous article, _id will be autogenerated by MongoDB.

Please refer to the following updated app.js file (reset of the project setup will remain the same):

require('dotenv').config();
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();

// connect to the database
async function connectDB() {
  const {MONGO_USER, MONGO_HOST, MONGO_PASS, MONGO_DB} = process.env;
  await mongoose.connect(
    `mongodb+srv://${MONGO_USER}:${MONGO_PASS}@${MONGO_HOST}/${MONGO_DB}`,
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useFindAndModify: false,
      useCreateIndex: true
    }
  );
}

connectDB();

// Create Schema for users
const usersSchema = new mongoose.Schema({
  age: Number,
  name: String,
  email: String
});

// Create Modal for users
const UsersModal = new mongoose.model('users', usersSchema);

app.set('view engine', 'ejs');

app.use((req, res, next) => {
  res.append('Access-Control-Allow-Origin', ['*']);
  res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.append('Access-Control-Allow-Headers', 'Content-Type');
  if (req.url.includes('/api')) {
    res.append('Content-Type', 'text/json');
  }
  next();
});

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use('/assets', express.static('assets'));

const getUserInfo = id => {
  return USER_DATA.filter(obj => obj._id === id);
};

// Get list of users, and set data
app.get('/', (req, res) => {
  UsersModal.find({}, function (err, docs) {
    if (err) {
      res.status(500).send(err);
    }
    res.render('index', {
      data: docs
    });
  });
});

// Get single user by id, and set data
app.get('/user/:id', (req, res) => {
  UsersModal.findOne({_id: req.params.id}, function (err, doc) {
    if (err) {
      res.status(500).send(err);
    }
    res.render('user', {
      data: doc
    });
  });
});

// Loading view of contact page
app.get('/contact', (req, res) => {
  res.sendFile(`${__dirname}/contact.html`);
});

// RESTFul API Services

// get all users
app.get('/api/users', (req, res) => {
  UsersModal.find({}, function (err, docs) {
    if (err) {
      res.status(500).send(err);
    }
    res.send(docs);
  });
});

// get single user by id
app.get('/api/user/:id', (req, res) => {
  UsersModal.findOne({_id: req.params.id}, function (err, doc) {
    if (err) {
      res.status(500).send(err);
    }
    res.send(doc);
  });
});

// delete single user by id
app.delete('/api/user/:id', (req, res) => {
  UsersModal.findOneAndDelete({_id: req.params.id}, function (err, doc) {
    if (err) {
      res.status(500).send(err);
    }
    res.send(doc);
  });
});

// update single user by id
app.put('/api/user/:id', (req, res) => {
  const {name, age, email} = req.body;
  if (req.params.id) {
    UsersModal.updateOne({_id: req.params.id}, {name, age, email}, function (err, doc) {
      if (err) {
        res.status(500).send(err);
      }
      res.send(doc);
    });
  } else {
    res.status(500).send('id is missing in params');
  }
});

// add new user
app.post('/api/user', (req, res) => {
  const {name, age, email} = req.body;

  if (name && age && email) {
    UsersModal.create(
      {
        age,
        name,
        email
      },
      function (err, doc) {
        if (err) {
          res.status(500).send(err);
        }
        res.send(doc);
      }
    );
  } else {
    res.status(500).send('error, user not added.');
  }
});

app.listen(3000);

Useful Links

Day 4 - Your first week in NodeJS

2021-08-08T00:00:00Z

Prerequisite

Quick recap

I believe by now you are already comfortable with core modules of Node.js and have created your own RESTFul API service.

It’s time to create a front-end now, which you can use to show users information which we developed in the last article.

Template engines

Node.js has by default support for template engines, you can add these template engines as an npm package and start using them. It helps to send dynamic data on a template file which you can further process (server-side) and render as an HTML page.

Serve `html` file as response

// app.js

const app = require('express')();

app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});

app.get('/contact.html', (req, res) => {
  res.sendFile(`${__dirname}/contact.html`);
});

app.listen(3000);

We are serving .html files based on user requests. But you can’t send anything dynamic in these files, and for that, you need a template engine.

To serve dynamic content, we will be using the ejs templating engine which is recommended because it is very fast.

You can install it by using $ npm install ejs. Now we have ejs installed, let’s quickly make some changes to our app.js file to integrate it.

You have to do a couple of things here since the EJS template engine looks for the views folder, we will create the views folder under the root folder of our application.

// package.json

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "nodemon": "^2.0.12"
  }
}

// users.json

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  }
]

Partials

<!-- views/user.ejs -->

<!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" />
    <title>Welcome | <%= data.name %></title>
    <style>
      body {
        background-color: cornflowerblue;
        text-align: center;
        font-size: 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h1 {
        font-size: 3rem;
      }
      ul li {
        list-style: none;
        display: inline-block;
        margin: 0 10px;
      }
      a {
        font-size: 1.2rem;
        color: white;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      ul.users {
        margin: 0;
        padding: 0;
      }
      ul.users li {
        display: block;
        margin-bottom: 1rem;
      }
      .container {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <h1>Welcome | <%= data.name %></h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <div class="container">
      <h2>User details</h2>
      <p><strong>Age: </strong><%= data.age || "N/A" %></p>
      <p><strong>Email: </strong><%= data.email || "N/A" %></p>
      <p><a href="/">&LessLess; Back</a></p>
    </div>
  </body>
</html>

<!-- views/index.ejs -->

<!-- index.html -->
<!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" />
    <title>Welcome</title>
    <style>
      body {
        background-color: cornflowerblue;
        text-align: center;
        font-size: 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h1 {
        font-size: 3rem;
      }
      ul li {
        list-style: none;
        display: inline-block;
        margin: 0 10px;
      }
      a {
        font-size: 1.2rem;
        color: white;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      ul.users {
        margin: 0;
        padding: 0;
      }
      ul.users li {
        display: block;
        margin-bottom: 1rem;
      }
      .container {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my webpage</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <div class="container">
      <h2>Active Users</h2>
      <ul class="users">
        <% data.forEach(function(user){ %>
        <li>
          <a href="/user/<%= user._id %>"><%= user.name %> (<%= user.age %>)</a>
        </li>
        <% }); %>
      </ul>
    </div>
  </body>
</html>

<!-- contact.html -->

<!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" />
    <title>Contact</title>
    <style>
      body {
        background-color: cornflowerblue;
        text-align: center;
        font-size: 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h1 {
        font-size: 3rem;
      }
      ul li {
        list-style: none;
        display: inline-block;
        margin: 0 10px;
      }
      a {
        font-size: 1.2rem;
        color: white;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>Contact me on Twitter @gsin11</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <p>This page is running on awesome Node.js sever!</p>
  </body>
</html>

Server file `app.js`

// app.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
let USER_DATA = require('./users.json');

app.set('view engine', 'ejs'); // setting up template engine to ejs

app.use((req, res, next) => {
  res.append('Access-Control-Allow-Origin', ['*']);
  res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.append('Access-Control-Allow-Headers', 'Content-Type');
  if (req.url.includes('/api')) {
    res.append('Content-Type', 'text/json');
  }
  next();
});

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

function makeId(length) {
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

const getUserInfo = id => {
  return USER_DATA.filter(obj => obj._id === id);
};

app.get('/', (req, res) => {
  res.render('index', {
    data: USER_DATA
  });
});

app.get('/user/:id', (req, res) => {
  res.render('user', {
    data: getUserInfo(req.params.id)[0] || {}
  });
});

app.get('/contact', (req, res) => {
  res.sendFile(`${__dirname}/contact.html`);
});

// RESTFul API Services

// get all users
app.get('/api/users', (req, res) => {
  res.send(USER_DATA);
});

// get single user by id
app.get('/api/user/:id', (req, res) => {
  res.send(getUserInfo(req.params.id));
});

// delete single user by id
app.delete('/api/user/:id', (req, res) => {
  const index = USER_DATA.findIndex(obj => obj._id === req.params.id);
  res.send(USER_DATA.splice(index, 1));
});

// add new user
app.post('/api/user', (req, res) => {
  const {name, age, email} = req.body;
  if (name && age && email) {
    USER_DATA = [
      ...USER_DATA,
      {
        _id: makeId(24),
        age,
        name,
        email
      }
    ];
    res.send(USER_DATA);
  } else {
    res.status(500).send('error, user not added.');
  }
});

app.listen(3000);

Snapshots

contact page

user details

Middleware and static assets

You have seen in the above templates we are using CSS as inline, in this segment we will include CSS files as static assets as well as images.

First, we need to move inline CSS styles to an external stylesheet.

/* assets/styles.css */

body {
  background-color: cornflowerblue;
  text-align: center;
  font-size: 16px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
  font-size: 3rem;
}
ul li {
  list-style: none;
  display: inline-block;
  margin: 0 10px;
}
a {
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
ul.users {
  margin: 0;
  padding: 0;
}
ul.users li {
  display: block;
  margin-bottom: 1rem;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

Now we can include styles.css files <link href="/assets/styles.css" rel="stylesheet" type="text/css" /> in all templates and HTML files.

Now we need to inform our server that we are going to load the static files. By using the app.use function we can call express.static middleware to include static files.

// add this in your app.js

app.use('/assets', express.static('assets'));

Now you can restart your server and will see another request in networks for the CSS file. Similarly, you can include images/videos, etc.

You can create more routes with add/delete user functionality as follow:

Create a new route /user/add followed by a form to add new users.
Provide a button to delete an existing user by invoking API user/:id with the DELETE method.

Useful Links

ejs template engine

Day 3 - Your first week in NodeJS

2021-08-07T00:00:00Z

Prerequisite

I believe you have already read my previous article where I explained, how to spin up a Node.js server instance, serve HTML/JSON data via an endpoint, basic routing, npm, and nodemon from creating custom modules, event handling, and file read/write operations. Let’s jump on today’s topic and write the code together.

Start with express.js

It’s one of the most popular routing systems. It can be integrated with many template engines. It also contains a middleware framework, which helps to enhance security features.

Just install express with $ npm i express:

// app.js

const express = require('express');
const app = express();

app.listen(3000);

With the above code, your express.js server is ready to serve requests on the 3000 port. But it won’t serve any request alone unless you provide proper routing to it.

express.js routes

Routes are a very important part of the express.js setup. It helps you to make your entire architecture modularize. See below express, where you will see how we gonna server HTML and JSON requests together from a single server instance.

// app.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('This is homepage');
});

app.get('/contact', (req, res) => {
  res.send('This is contact page');
});

app.get('/api/users', (req, res) => {
  res.setHeader('Content-Type', 'text/json');
  res.send(
    JSON.stringify([
      {
        id: 3,
        username: 'demo_user',
        email: 'demo@demo.com',
        phone_number: '+49 123 4567 890'
      },
      {
        id: 2,
        username: 'james',
        email: 'james@demo.com',
        phone_number: '+49 765 111 999'
      }
    ])
  );
});

app.listen(3000);

Creating REST API

Similarly, we can now create our rest API to handle user-specific requests: Since we are not using any database, we can create a static JSON file for initial set of users users.json.

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  }
]

Now we have users.json in place we need two new packages.

body-parser - To get form-data from POST request.
objectid - To create dynamic unique _id (You can skip, when you have a database in place. eg: MongoDB, Firebase, etc.)

// app.js

const express = require('express');
const bodyParser = require('body-parser');
const objectid = require('objectid');

const app = express();

let USER_DATA = require('./users.json');

app.use((req, res, next) => {
  res.append('Access-Control-Allow-Origin', ['*']);
  res.append('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.append('Access-Control-Allow-Headers', 'Content-Type');
  res.append('Content-Type', 'text/json');
  next();
});

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

// get all users
app.get('/api/users', (req, res) => {
  res.send(USER_DATA);
});

// get single user by id
app.get('/api/user/:id', (req, res) => {
  res.send(USER_DATA.filter(obj => obj._id === req.params.id));
});

// delete single user by id
app.delete('/api/user/:id', (req, res) => {
  const index = USER_DATA.findIndex(obj => obj._id === req.params.id);
  res.send(USER_DATA.splice(index, 1));
});

// add new user
app.post('/api/user', (req, res) => {
  const {name, age, email} = req.body;
  if (name && age && email) {
    USER_DATA = [
      ...USER_DATA,
      {
        _id: objectid(),
        age,
        name,
        email
      }
    ];
    res.send(USER_DATA);
  } else {
    res.status(500).send('error, user not added.');
  }
});

app.listen(3000);

The initial set of users will be loaded from the file then you can add/remove users based on API requests.

`GET` request

You can use postman software to make these requests to check your API:

http://localhost:3000/api/users

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  }
]

`POST` request (Add user)

http://localhost:3000/api/user

// data

{
  "name": "Gurpreet Singh",
  "age": "21",
  "email": "yes@demo.com"
}

// response

[
  {
    "_id": "610ec10c78f7665bfa2cbf11",
    "age": 28,
    "name": "Bobbi Cannon",
    "email": "bobbicannon@dragbot.com"
  },
  {
    "_id": "610ec10ca916e321b1363301",
    "age": 33,
    "name": "Downs Burns",
    "email": "downsburns@dragbot.com"
  },
  {
    "_id": "610eca22f75a370000000001",
    "age": "121",
    "name": "Gurpreet Singh",
    "email": "yes@demo.com"
  }
]

`DELETE` request (delete user)

http://localhost:3000/api/user/<id>

http://localhost:3000/api/user/610eca22f75a370000000001

// response

[
  {
    "_id": "610eca22f75a370000000001",
    "age": "121",
    "name": "Gurpreet Singh",
    "email": "yes@demo.com"
  }
]

Note: Since we are not using any real database, hence this server only keeps data unless you restart.

You can practice the last method of REST PUT in order to update any user record.

Happy coding!

Day 2 - Your first week in NodeJS

2021-08-04T00:00:00Z

Prerequisite

Day 1 - Your first week in NodeJS

I believe you have already read my previous article where I explained, the basics of Node.js, from creating custom modules, event handling, and file read/write operations. Let’s jump on today’s topic and write the code together.

Creating a Server

In the current world, people are looking for de-coupled systems/architectures solutions where each and every module can run independently and be responsible. These systems can be stateless or stateful (we will read about it later). These servers can be categorized into two segments, Client and Server.

Client (front-end)

The client is where we invite end users, it can be a Mobile App or a Website. When someone is hitting https://google.com they are looking at the front-end of Google. The client platform is then responsible to get data from Server (backend APIs) or sometimes the backend renders the frontend code (like WordPress does) which we also call Traditional or Monolith structure.

Server (backend)

Node.js brought a big change in backend systems wherein people are not heading towards micro-service architecture. Servers/APIs are getting powerful and solving a single problem at a time. Headless architecture is one of its kind which can run without and state and gives expected output.

Let’s quickly jump on client-side server creation. We will use the core Node.js module for this server.

We will divide this into two sections, request and response.

request and response

Request and Response architecture

JSON response example

// app.js

const http = require('http');

const server = http.createServer((request, response) => {
  response.writeHead(200, {'Content-Type': 'application/JSON'});
  response.end(JSON.stringify({name: 'John', employee_id: 'DS123'}));
});

server.listen(3000, '127.0.0.1', () =>
  console.log('Server is started on http://127.0.0.1:3000')
);

To run the above file you need to run $ node app.js in your console and you will see a response in JSON format.

It is important to understand response headers here, If you check I am sending the request back with the “application/JSON” header but in string. http module only supports string responses but can be distinguished by headers.

http://127.0.0.1 equivalent to http://localhost, IP is required when you want to run your application on Local Networks.

HTML response example

<!-- index.html -->

<!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" />
    <title>Welcome</title>
    <style>
      body {
        background-color: cornflowerblue;
        text-align: center;
        font-size: 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h1 {
        font-size: 3rem;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my webpage</h1>
    <p>This page is running on awesome Node.js sever!</p>
  </body>
</html>

// app.js

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
  console.log(`request made: ${request.url}`);
  response.writeHead(200, {'Content-Type': 'text/html'});
  const readStream = fs.createReadStream(`${__dirname}/index.html`, 'utf8');
  readStream.pipe(response);
});

server.listen(3000, '127.0.0.1', () =>
  console.log('Server is started on http://127.0.0.1:3000')
);

Output

webpage output

homepage

You can see in the above example, we had to add inline styles for the page. We will cover external styles in the next article.

Don’t panic it’s just a start, we will go through more robust and better ways of doing this.

Routing

I’ll quickly touch upon core http module routing since we will read these routes in detail when we get on the express.js topic.

Routing is nothing but letting users redirect from one page to another. It also helps to divide code into authorized vs. non-authorized pages.

We will quickly create another HTML page so users can navigate through these two different pages.

<!-- index.html -->
<!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" />
    <title>Welcome</title>
    <style>
      body {
        background-color: cornflowerblue;
        text-align: center;
        font-size: 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h1 {
        font-size: 3rem;
      }
      ul li {
        list-style: none;
        display: inline-block;
        margin: 0 10px;
      }
      a {
        font-size: 1.2rem;
        color: white;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my webpage</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <p>This page is running on awesome Node.js sever!</p>
  </body>
</html>

<!-- contact.html -->
<!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" />
    <title>Contact</title>
    <style>
      body {
        background-color: cornflowerblue;
        text-align: center;
        font-size: 16px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      h1 {
        font-size: 3rem;
      }
      ul li {
        list-style: none;
        display: inline-block;
        margin: 0 10px;
      }
      a {
        font-size: 1.2rem;
        color: white;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>Contact me on Twitter @gsin11</h1>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
    <p>This page is running on awesome Node.js sever!</p>
  </body>
</html>

// app.js

const http = require('http');
const fs = require('fs');

const server = http.createServer((request, response) => {
  let readStream;
  const url = request.url;

  console.log(`request made: ${url}`);
  response.writeHead(200, {'Content-Type': 'text/html'});

  if (url === '/contact') {
    readStream = fs.createReadStream(`${__dirname}/contact.html`, 'utf8');
  } else {
    readStream = fs.createReadStream(`${__dirname}/index.html`, 'utf8');
  }

  readStream.pipe(response);
});

server.listen(3000, '127.0.0.1', () =>
  console.log('Server is started on http://127.0.0.1:3000')
);

home page

homepage

contact page

Contact Page

Node Package Manager (NPM)

NPM is the world’s largest software registry. Open-source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

NPM comes as the default package manager with Node.js and gives access to install third-party packages.

We will be using an express package in order to make our Node.js server better from a routing perspective and well as to keep the code more managed and modular.

To start with npm you need to run the $ npm init -y command, it will create a file called package.json which will keep track of all the packages we install later.

Installing NodeMon

You have noticed before whenever we were making any changes to our app.js file we had to restart our node.js server. Well, this new package NodeMon will be able to resolve this problem.

You can install this package with npm install nodemon and you will see another directory created with some packages called node_modules.

directory structure

We will now quickly open our package.json file and make the following changes:

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "nodemon": "^2.0.12"
  }
}

Instead of running your server with $ node app.js you can now run $ npm start, it will use the start command mentioned under scripts object in package.json.

Now if you make any changes to your app.js file it will automatically restart your Node.js server.

Useful Links

Day 1 - Your first week in NodeJS

2021-08-03T00:00:00Z

I believe you know something about Node.js before starting this course, just to refresh your memory. Node.js is a JavaScript runtime, built on Chrome’s V8 JavaScript engine. Node.js uses an event-driven, non-blocking model that makes it lightweight and efficient.

Node.js package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Let’s jump on Day 1 agenda now.

1. Installation

You can simply go to the official Node.js website and download the latest stable version (LTS) based on your OS.

download node

download nodejs page

After the installation, you can simply open your terminal/command prompt, to check if it’s running or not.

$ node --version
// v14.16.1 (in my case)

In addition to the above, you can also go to any editor and create a file app.js (or any name).

// app.js
console.log('node is working');

Now run this file using Node.js

$ node app.js
// node is working

You have installed Node.js on your machine 🏆

2. Global Objects

After installing Node.js, let’s quickly touch upon Global objects which we can use without any objection and third-party imports. These objects/functions are nothing but built-in into Node.js objects. If you are already working on JavaScript you defiantly know about some of these objects like (console, setInterval, setTimeout, etc.).

The main difference between JavaScript (window) vs. Node.js global objects is, you can’t get access to the screen-related function example: scroll, style, etc.

You can try following code examples in Node.js

// app.js
setTimeout(() => {
  console.log("5 seconds have passed");
}, 5000);

// Run this code again
$ node app.js

Another useful global object is process, we will use this a lot in further lessons. process holds the latest state of your Node.js running process. It gives you access to read which environment your server is running or you can set custom environment variables while starting your server.

The common use case is to store credentials inside process to later use them in your program.

// Setting process variable
$ export DB_NAME=demo_db
$ export DB_PASSWORD=yes_you_are_right

// Run your app
$ node app.js

// app.js
const {DB_NAME, DB_PASSWORD} = process.env
console.log(DB_NAME); // demo_db
console.log(DB_PASSWORD); // yes_you_are_right

3. Modules + `require()`

So far (above), we wrote everything in a single file, which is good for practice programs and all. If you want to work on a real project where you might have other teams/people surrounding you and working on the same project, then recommended approach is to work with modules.

Modules are nothing but an approach to split your code into different-2 re-usable pieces.

It can be a file or a function within the same file, you must have heard of the philosophy of pure-functional programming where every function is responsible to do a single job.

Let’s take an example, you want to count the `length` of an array.

// Create a new file next to your app.js
// count.js

const count = arr => {
  return arr.length;
};

Now you have count.js in place, it’s time to make it re-usable for the application.

Before calling it a module, we need to make some changes to the count.js file.

// count.js

const count = arr => {
  return arr.length;
};

module.exports = count; // It will export this component as a module

Since we have the count module ready to include, let’s call it in app.js.

// app.js

const count = require('./count'); // including `count` function as a module
console.log(count([1, 98, 22, 41])); // return: 4

You can send multiple modules from your single file.

// utils.js

const add = (a, b) => {
  return a + b;
};

const sub = (a, b) => {
  return a - b;
};

const getDatabaseName = () => process.env.DB_NAME;

module.exports = {
  add,
  sub,
  getDatabaseName
};

// You also change your public function names
module.exports = {
  plus: add,
  minus: sub,
  DBName: getDatabaseName
};

// app.js

const utils = require('./utils');

console.log(utils.add(1, 2)); // result: 3
console.log(utils.sub(2, 1)); // result: 1
console.log(utils.getDatabaseName()); // result: demo_db

4. Event emitting

Like the above-defined module, we have some built-in core Node.js modules available to use. One of the examples is the events module.

Similar to JavaScript click/onChange events Node.js has the capability to define your own events which can be used when needed.

// custom-events.js

const events = require('events');
const utils = require('./utils');

const eventEmitter = new events.EventEmitter();

eventEmitter.on('showSum', (a, b) => {
  console.log(`Sum is: ${utils.add(a, b)}`);
});

module.exports = eventEmitter;

Our event emitter module is now ready, let’s use it in our application.

// app.js

const customEvents = require('./custom-events');
customEvents.emit('showSum', 1, 2); // Sum is: 3

5. Read/Write/Steam files

After learning event handling in Node.js let’s do a quick check on file handling with Node.js core module fs.

Let’s read the file first in order to try the fs module. But first, we need a file to read. Let’s create a file first.

Read operation ()

// Inside the same directory
$ touch read.txt
$ vim ./read.text  // Add some content and save the file.

// app.js

const fs = require('fs');

const readMeFile = fs.readFileSync('./read.txt', 'utf-8');
console.log(readMeFile); // File contents

Write operation

// app.js

const fs = require('fs');

const readMeFile = fs.readFileSync('./read.txt', 'utf-8');
fs.writeFileSync('./read-new.txt', readMeFile);

The above statement will simply read the contents from the read.txt file write another file read-new.txt with its content.

There are two ways to read/write files, synchronous/asynchronous, we are using sync. method to read the file. It prevents the program execute unless it reads the entire file.

On the other hand, fs.readFile can read files asynchronously, sometimes we use this method too.

Let’s quick touch upon async. file read operation:

const fs = require('fs');

fs.readFile('./read.txt', 'utf-8', (err, data) => {
  if (err) {
    console.error(err);
  }
  console.log(data);
});

console.log('Am I first?');

// Result:
// file content
// Am I first?

In the example above you can see, text outside the readFile operation logged first. Async. operation is beneficial when your further operations are independent of the file read/write operations.

Hope you like the starting of the series, stay tuned for further posts in this series.

Happy reading!

Useful Links

How to write short javascript code?

2021-07-28T00:00:00Z

We have been writing JavaScript for quite a while now, I know some of you have never used short syntax JavaScript statements for example: if/else vs. ternary statement.

In this article, I’ll show some shorthand conditional, looping, or operator statements that can be used in your daily coding practices.

1. Empty an array

const arr = ['Charlie', 'John', 'James'];
arr.length = 0; // arr will be []

2. Filter odds

// Traditional/Old style
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const arr2 = [];

for (let i = 0; i < arr.length; i = i + 1) {
  if (arr[i] % 2 === 0) {
    arr2.push(arr[i]);
  }
}

console.log(arr2); // [ 2, 4, 6, 8 ]

// New/Better way
arr.filter(value => value % 2 === 0); // [ 2, 4, 6, 8 ]

3. Combine arrays

const arr1 = [1, 2, 3, 4];
const arr2 = [5, 6, 7, 8];

[...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6, 7, 8]

4. Delete vs. Splice

We often face instances where we need to remove an element from an array. Removing an element from an array can be painful sometimes when you still get the same length of array event after deleting an element.

// delete
const arr = [1, 2, 3, 4];

console.log(arr.length); // 4
console.log(arr); // [1,2,3,4]

delete arr[2];
console.log(arr.length); // 4
console.log(arr); // [1,2,<1 empty slot>,4]

// splice
console.log(arr.length); // 4
console.log(arr); // [1,2,3,4]

arr.splice(2, 1);
console.log(arr.length); // 3
console.log(arr); // [1,2,4]

5. Get unique

const arr = [4, 1, 2, 2, 11, 4, 3, 1, 9, 1, 0, 3];

const newArr = [...new Set(array)];
console.log(newArr); // Result: [ 4, 1, 2, 11, 3, 9, 0 ]

6. Logical AND/OR

let subscribed = true;
subscribed && 'Yes'; // Result: Yes

subscribed = false;
subscribed || 'No'; // Result: No

7. Convert String to Number

// Simply add `+` before writing the variable

const myStringNumber = '5.12';
+myStringNumber + +'5'; // Result: 5.12 // Result: 5

8. Condition in chain

const data = {
  name: 'John'
};

console.log(data.name); // Result: John
console.log(data.class); // Result: undefined

// Problem
console.log(data.class.name); // Result: Uncaught Exception TypeError: data.class is undefined

// Solution
console.log(data.class?.name || 'not found'); // Result: not found

I don't know javascript but ReactJS

2021-07-25T00:00:00Z

Isn’t it weird to witness such a scenario where someone can code the ReactJS component but when you ask them to bind an onClick event in Vanilla JavaScript they can’t?

It’s been more than 5 years since I am taking interviews for front-end developers and gradually the trend is changing towards Frameworks/Libraries.

I am not against using any library or framework, I know it makes your development cycle faster and gives you some kind of pre-defined architecture where you can follow best practices but we shouldn’t forget the basics.

BASICS OF JAVASCRIPT

People find JavaScript a bit tricky language to learn. Keep in mind, all these frameworks and libraries are also built on JavaScript and if you want to get more out of it you need to learn the basics.

I would suggest directly starting with ES6 (ECMAScript) since the latest browsers support it and you can use a transcompiler like Babel if you need to support legacy browsers.

Organization’s point of view

Client awareness: If your clients are coming with such asks to implement a new framework or library, it’s a good opportunity to do quick requirements check instead of directly jumping on implementation.

Create needs: I believe in enabling people to work on basics instead of running behind fancy frameworks. There is no harm/shame when someone is working on a vanilla JavaScript project, so start discussing new ES12 features.

Useful Links

up-and-running-with-es6

CORS in NextJS

2021-07-19T00:00:00Z

Setting up CORS is always a challenge for people who are not really from server-side application backgrounds. Luckily it wasn’t the case for me, but Vercel.

I have a couple of projects on Vercel where I can host client-side applications built on ReactJS, NextJS, Gatsby, etc. Recently I found you can host serverless functions on Vercel as well.

These serverless functions are nothing but open up NodeJS server-side script access. You can create a server and run it on Vercel as well as send emails and whatnot.

How to setup NextJS API

npx create-next-app --example with-mongodb with-mongodb-app
# or
yarn create next-app --example with-mongodb with-mongodb-app

Example from with-mongodb

In the above command, you will get the NextJS project set up inside with-mongodb-app directory.

Now we have our application ready, it’s time to set up the MongoDB instance.

You can use mongodb.com to set up a free account with limited space.

MongoDB setup

Once you have your MongoDB instance ready, feel free to rename and edit env.local.example to .env.local

Set each variable on .env.local:

MONGODB_URI - Your MongoDB connection string. If you are using MongoDB Atlas you can find this by clicking the “Connect” button for your cluster.
MONGODB_DB - The name of the MongoDB database you want to use.

Run Next.js in development mode

npm install
npm run dev

# or

yarn install
yarn dev

The application should be up and running on http://localhost:3000

CORS setup

After setting up the database and server, now it’s time to set CORS settings.

Create vercel.json under the root folder.

{
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" }, // Change this to specific domain for better security
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}

The above change will work for GET requests but you will face problems while making PUT and POST requests. For this, we need to make one more change.

Go to /api/index.js file.

export default async (req, res) => {
  const { method } = req

  // This will allow OPTIONS request
  if (method === "OPTIONS") {
    return res.status(200).send("ok")
  }
}

GitHub copilot - future of programming?

2021-07-10T00:00:00Z

There were a couple of questions that came to my mind when I saw this first. In this article, I’ll go through an example of the Copilot peer programming plugin for VSCode.

What is GitHub Copilot?

If you have noticed a recent post by Github, Copilot is an AI engine that helps you to write programs. It is a smart autocomplete peer programming bot that can smarty understand simple English and write code.

// find images without an alt attribute
// and give them a red border

The above code will create a program that directly can find missing alt attribute images and perform the following action.

// find images without an alt attribute
// and give them a red border
function nonAltImages() {
  const images = document.querySelectorAll('img');
  for (let i = 0; i < images.length; i++) {
    if (!images[i].hasAttribute('alt')) {
      images[i].style.border = '1px solid red';
    }
  }
}

import React from 'react';
import {render, fireEvent} from '@testing-library/react';

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <button onClick={() => setCount(currCount => currCount + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
}

// a unit test that asserts that count increases when the button is clicked
it('increments count', () => {
  const {getByText} = render(<Counter />);
  const button = getByText('Increment');
  fireEvent.click(button);
  expect(getByText('Count: 1')).toBeInTheDocument();
});

Will AI replace developers?

Alone AIs aren’t capable of anything unless you start teaching them. There is no second thought that Copilot is very powerful and has support for industry-leading frameworks and libraries, but it still can’t replace humans.

Will you lose your job?

Copilot is very new into the industry and seems very fascinating to see a bot writing code for you, but it has very limited features. It can write simple code snippets for you but for large scale programs, companies still need talent like you 😃

Conclusion

I like new things in the programming or tech world to try, whether it’s a framework, library, or tool like Copilot. This tool can help people in their future project developments, but can’t replace humans. I can see people will defiantly start using this tool in their regular day-2-day work (like we adapt to autocompletion of code syntax tools).

PiHole on docker

2021-05-21T00:00:00Z

This article is my follow-up article to Up and running with RaspberryPi with Docker. In the previous article, I showed how you can configure docker and docker-compose on your RaspberryPi.

Let’s check how to restrict external traffic from your RaspberryPi with PiHole using docker and docker-compose.

Installation

The first step to defining a place where you want to install PiHole. In my case, I am going to keep it under the ~ path.

$ cd ~
$ mkdir pihole
$ cd pihole
$ touch docker-compose.yml

Once you create the docker-compose.yml file inside the pihole directory, add the following code into it.

$ nano docker-compose.yml

version: '3'

services:
  pihole:
    container_name: pihole
    image: pihole/pihole:latest
    ports:
      - '53:53/tcp'
      - '53:53/udp'
      - '67:67/udp'
      - '80:80/tcp'
    environment:
      TZ: 'America/Chicago'
      WEBPASSWORD: 'strongPassword'
    volumes:
      - './etc-pihole/:/etc/pihole/'
      - './etc-dnsmasq.d/:/etc/dnsmasq.d/'
    cap_add:
      - NET_ADMIN
    restart: unless-stopped

After saving the docker-compose.yml file, you can run the following command to bring your PiHole server up and running.

$ docker-compose up --detach

Initial run will take some time since it will download the PiHole image from docker.

After a successful run, you can check PiHole instance is running on RaspberryPi as a docker service.

# Try following commands to check PiHole service

$ docker ps
# To check the list of running containers

$ docker images
# To check PiHole image

If you have static IP defined configured in my previous article then you can access PiHole, at http://192.168.0.4/admin

Configure devices

After the installation of PiHole now we need to map other devices to use PiHole as the default gateway. For that, you can go to the network/Wifi settings of your individual devices and add 192.168.0.4 IP address to the DNS list (should be on top). See the example below:

network setup

DNS settings on MAC

Thanks for following the tutorial, happy coding!

Up and running with raspberrypi with docker

2021-05-19T00:00:00Z

How to configure RaspberryPi with docker and docker-compose. I am personally using it for my local hone projects where I can run these projects without interfering RaspbianOS image.

System Requirements

Raspberry Pi 4 (for better performance)
32GB memory card
LAN cable to connect your RaspberryPi with local network

Installation

The first step is to install the Raspbian OS image on your memory card. I would suggest going with RaspberryPi official page to download the Raspberry Pi Imager. I recommend using this imager because it can directly fetch the latest OS image from RaspberryPi’s website.

raspberry_pi_imager

Select OS while formatting your SD card

After installing it, you need to enable your RaspberryPi with ssh. Go to your SD card drive and create an ssh file by typing the touch ssh command. This file will enable ssh so you can access it throughout your home network.

It is advisable to update the app of the packages after initial installation.

# log into your RaspberryPi with default password: raspberry
$ ssh pi@ip-address-of-your-rpi

# update and upgrade all local packages
$ sudo apt-get update
$ sudo apt-get upgrade

Assign static IP (optional)

It is always easy to work with static IP. You can assign a static IP address to your RaspberryPi to open the application from the same IP. Following are the steps which you can follow to setup:

# Open following file
$ sudo nano /etc/dhcpcd.conf

# Add following lines at the top of the file
interface eth0
static ip_address=192.168.0.4/24  # In my case, static IP address is: 192.168.0.4
static routers=192.168.0.1  # Add your router's IP address
static domain_name_servers=8.8.8.8 8.8.4.4  # Default Google DNS

To reflect the changes, please reboot your RaspberryPi with sudo reboot.

Install docker

After assigning static IP, you can now proceed with docker installation.

Step 1

Download the docker bash file on your local and run it with sudo.

# It will download the docker installation file and save it as get-docker.sh
$ curl -fsSL https://get.docker.com -o get-docker.sh

# Now run the installation docker command
$ sudo sh get-docker.sh

Step 2

It will take some time to install docker. Once it’s done, you can now add your user to the docker group, which is an optional step but helps you run docker commands without adding sudo it.

$ sudo usermod -aG docker ${USER}

# Be Careful, now onwards you will run all the commands with sudo rights
$ sudo su - ${USER}

Step 3

Once it’s done you can now run docker --version it should show the installed version.

# In my case
Docker version 20.10.6, build 370c289

You can also try to run a hello-world docker image with the following command:

$ docker run hello-world

Install docker-compose

For large-scale projects or where you need multiple docker images to run or containers, you need a tool called docker-compose. It allows you to run your Docker images behind the scene.

First, you need to install the docker-compose by typing the following command:

Make sure you have python3 and python3-pip.

# to install python3 and python3-pip
$ sudo apt-get install -y python3 python3-pip

$ sudo pip3 install docker-compose

Thanks for following the tutorial, happy coding!

My react stack for 2021

2021-05-08T00:00:00Z

My ReactJS tech stack in which you might be interested. I will showcase what options are available in the market to start on a ReactJS based application.

ReactJS (with TypeScript)

People often use create-react-app for their ReactJS projects. The default setup comes with ES6 syntax, but you can also switch your default installer to install TypeScript-based ReactJS App.

# Default install command
$ npx create-react-app my-app

# With typescript
$ npx create-react-app my-app --template typescript

It will help you to make your JavaScript code less error-prone since it validates data types and a lot more during the development time.

React Router

When it comes to developing medium to large-scale applications, I would prefer to use React Router. This helps you to define your routes for your single-page application projects. React Router is a collection of navigational components that compose declaratively with your application. Whether you want to bookmark URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.

$ npm i react-router

State Management

There are two kinds of state management we have in ReactJS based applications.

Component State

It is also known as an internal state of a component, which can be managed by your component itself. For example, you can use the useState() react hook to manage the state in a functional component. Similarly, by using react lifecycle methods you can manage the state in the class component.

Application State

The application-level state is similar to the component state but works on the application level. For example, if you want to change the shopping cart count when someone adds a product to the cart. You need an application-level shared state which can work as a single source of truth for your application state. There are a couple of options to go with but I prefer using Redux library. It is a powerful library to handle a predictable state for your application. You can install this library as the initial setup of your ReactJS project.

# This command provides react boilerplate with redux
$ npx create-react-app my-app --template redux

# For existing ReactJS projects
$ npm i redux

Tip: You can explore redux-toolkit in 2021

Component Library

An application should have consistent behavior across all the pages. There are a good amount of free/open-source component libraries available in the market, for example, ChakraUI, MaterialUI, or AntDesign.

Form Handling

When it comes to handling user inputs, forms are required. Forms can easily mess up your project. I would suggest carefully choosing form-library in order to add validations and state handlings. There are some form libraries to choose from. I would prefer to go with React Hook Form or Formik. Both libraries are very performance-oriented and have good community support. You can easily customize them, and use them as per your needs.

Testing

One of the most important parts of every project. It’s been a couple of years since I came across React Testing Library (RTL) which comes as the default testing library inside your create-react-app project. This builds on top of the DOM Testing Library by adding APIs for working with React components.

You can use this library in your old ReactJS project as well

$ npm i -D @testing-library/react

Storybook

Storybook is an isolated library that can help to showcase ReactJS based components from the end-user perspective. It simplifies building, documenting, and testing UIs. You can develop presentational components even without having backend services in place.

# Following command will automatically detect your project type
$ npx sb init

NextJS

NextJS comes with lots of built-in features which will surely take time to build if you want to build them from scratch. It has default support to server-side rendering which helps you to make better SEO-friendly applications. It also has built-in support for TypeScript.

$ npx create-next-app

Do we really need class components anymore?

2021-04-21T00:00:00Z

ReactJS is a mature enough library that becomes the first choice for developers. When ReactJS got launched it had a strong concept of class components. The reason they were popular was because of their life cycle methods. With the ease of these life cycle methods, you can trigger your custom event at the right time.

Before it was clear when you need a stateful component goes with a class component otherwise functional component.

In this post, I call it modern React as it changed a lot over the period of time. Don’t go with the assumption of stateful vs. functional components. Functional components can also be stateful components.

Do you want to know why?

Rendering JSX

import React from 'react';

const FunctionalComponent = () => {
  return <h1>Hello, world!</h1>;
};

import React, {Component} from 'react';
class ClassComponent extends Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

You can see in the above example, we are trying to render a single string which is not a challenge in FunctionalComponent. But ClassComponent makes it more complex.

Handling state

When it comes to handling states in ReactJS, it is debatable which type of component to go with. For example, I am working on a legacy project with React 15.x.x then I would definitely go with the class component. Because it gives me ReactJS life cycle methods which help to handle component state.

We can handle the state with React hooks since React 16.8 within functional components.

/* State handling with class component */

import React, {Component} from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    // Initial state
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div>
        <p>count: {this.state.count} times</p>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          Click
        </button>
      </div>
    );
  }
}

/* State handling with the functional component, using react hooks */

import React, {useState} from 'react';

const FunctionalComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
};

That was easy, right?

We can do much more with React hooks. See below:

Lifecycle Methods

Let’s talk about React lifecycle methods now. These methods are the backbone of ReactJS. I still can recall when someone asked me about these methods in one of the interviews. These methods were only part of React.Component before but now are available with Hooks.

On Mount (componentDidMount)

/* Class component */

import React, {Component} from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }
  componentDidMount() {
    fetch('some-api.com/user')
      .then(response => response.json())
      .then(data => this.setState({name: data}));
  }

  render() {
    return <h1>{`Hello, my name is ${this.state.name}`}</h1>;
  }
}

/* Functional component, using react hooks */

import React, {useState, useEffect} from 'react';

const FunctionalComponent = () => {
  const [name, setName] = useState('');
  useEffect(() => {
    fetch('some-api.com/user')
      .then(response => response.json())
      .then(data => setName(data));
  }, []);

  return <h1>{`Hello, my name is ${name}`}</h1>;
};

See, how easy it is to call an API within a functional component using useEffect.

Note: The second parameter of the useEffect hook is basically listening to an array of items on which you want to re-run your hook.

On Unmounting (componentWillUnmount)

In some instances, where you need to clear your timers and de-allocate memory on the unmount.

/* Class component */

import React, {Component} from 'react';

class ClassComponent extends Component {
  componentDidMount() {
    const element = document.getElementById('someId');
    element.removeEventListener('click', this.onLinkClick);
    element.addEventListener('click', this.onLinkClick);
  }

  componentWillUnmount() {
    const element = document.getElementById('someId');
    element.removeEventListener('click', this.onLinkClick);
  }

  onLinkClick = () => {
    /* Something in this function */
  };

  render() {
    return <button id="someId">I am button</button>;
  }
}

/* Functional component, using react hooks */

import React, {useEffect} from 'react';

const FunctionalComponent = () => {
  function onLinkClick() {
    /* Something in this function */
  }

  useEffect(() => {
    element.removeEventListener('click', onLinkClick);
    element.addEventListener('click', onLinkClick);
    return () => {
      element.removeEventListener('click', onLinkClick);
    };
  }, []);

  return <button id="someId">I am button</button>;
};

Conclusion

There are some areas where you might need class components. However, I prefer to go with functional.

In the example above you have seen, we can gain everything by using the functional components. In case your current project is running on class components, don’t worry there is no harm to that. Perhaps, I would recommend using functional components over class.

Nevertheless, the ReactJS community is still supporting class components and there is no hard rule to avoid them.

Useful links

Aria is not my thing

2021-03-27T00:00:00Z

I am reading a lot about accessibility guidelines and met/working with some people who are responsible to deliver accessible experiences. Accessibility is something that you can’t just archive by adding aria attributes to your DOM elements. After all, there is no need to add the aria attribute if you are using the correct DOM element while building your website.

(Mis)use of aria-* attributes

Web developers often treat accessibility as the last check-in of their component development life cycle. When they test their component in screen readers, they found some unexpected behaviors. To fix these problems they start adding aria attributes to their DOM elements which make the entire DOM structure heavier and confusing.

For example, what tag would you prefer to use to define your button?

<!-- with button tag? -->
<button>My button</button>

<!-- with div tag? -->
<div tabindex="0" role="button" aria-pressed="false">
  My button
  <div></div>
</div>

In the above code, you are creating a button with a div tag and adding JavaScript overhead to keep track of aria-pressed to announce the correct state of the button.

You got it right, the first step to achieving accessibility is your DOM structure. Using semantic HTML tags, you can directly inform the screen readers to read what they are supposed to read. I have also seen developers who are adding aria-label to their link tags, which leads screen readers to read the same text twice.

Following are some semantic HTML attributes that behave the way they are defined and you don’t need any extra support for aria tags.

Examples

<!-- Buttons -->
Bad Practice 🚫
<div tabindex="0" role="button" aria-pressed="false">
  My button
  <div>
    Good Practice ✅
    <button name="submit-btn" type="submit">My button</button>

    <!-- Links -->
    Bad Practice 🚫
    <a href="#" aria-label="Link tag">Link tag</a>

    Good Practice ✅
    <a href="#" aria-label="Click for checkout page">Link tag</a>

    <!-- Checkboxes -->
    Bad Practice 🚫
    <span
      role="checkbox"
      id="chkPref"
      aria-checked="false"
      onclick="changeCheckbox()"
      onKeyPress="changeCheckbox()"
      tabindex="0"
      aria-labelledby="chk1-label"
    >
    </span>
    <label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">
      Remember my preferences
    </label>

    Good Practice ✅
    <input type="checkbox" id="chk1-label" />
    <label for="chk1-label">Remember my preferences</label>
  </div>
</div>

It is still debatable when it comes to accessibility, there is no wrong/right but there is a balance that you need to maintain to give a better experience to a wide range of users.

Tips

Keep your DOM elements semantic
Avoid using aria-* attributes
Keep logical sequence to your DOM elements
Don’t hide content unless required
Keep your layout and fonts responsive in size

Thanks for reading my article!

Node.js login service (express.js + passport)

2021-03-19T00:00:00Z

These days I often see developers struggle or invest too much time to create proper authorization modules in their Node.js based applications. With this detailed tutorial, you will be able to create your authorization module which can be used in any route or sub-route of your application.

Let me take you through the step-by-step setup.

You can check running application here

Project structure

# Create the following project structure

app
|-- includes
- header.ejs
|-- public
|-- styles
- global.css
|-- views
- index.ejs
- login.ejs
- register.ejs
|- index.js
|- passport-config.js
|- package.json
|- .env
|- .gitignore

After having the above structure in place, it’s time to configure npm by triggering npm init (will update this file later while installing new modules)

Install packages

Please install the following packages with node commands.

$ npm i bcrypt ejs express express-flash express-session passport passport-local

$ npm --save-dev i dotenv nodemon

So basically I installed some of the modules as dependencies and two modules are installed as DEV dependencies only since they are not required in the final application bundle.

Your package.json the file should look like this now.

{
  "name": "nodejs-login-service",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "NODE_ENV=development && nodemon index.js",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "engines": {
    "node": "10.16.2"
  },
  "dependencies": {
    "bcrypt": "^5.0.1",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "express-flash": "0.0.2",
    "express-session": "^1.17.1",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0"
  },
  "devDependencies": {
    "dotenv": "^8.2.0",
    "nodemon": "^2.0.7"
  }
}

Server setup

// index.js

// This is only require on local machine
if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}

const bcrypt = require('bcrypt');
const express = require('express');
const passport = require('passport');
const flash = require('express-flash');
const session = require('express-session');
const initPassport = require('./passport-config');

// Initialize Passport module
initPassport(
  passport,
  email => users.find(user => user.email === email),
  id => users.find(user => user.id === id)
);

// Initialize express.js
const app = express();

// Setup template engine to ejs
app.set('view-engine', 'ejs');

// Setup static path for global.css file include
app.use(express.static(__dirname + '/public'));

app.use(express.urlencoded({extended: false}));
app.use(flash());
app.use(
  session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false
  })
);
app.use(passport.initialize());
app.use(passport.session());

const PORT = process.env.PORT || 3000;
const users = [];

app.get('/', checkAuthenticated, (req, res) => {
  res.render('index.ejs', {name: req.user.name});
});

app.get('/login', checkNotAuthenticated, (req, res) => {
  res.render('login.ejs');
});

app.post(
  '/login',
  checkNotAuthenticated,
  passport.authenticate('local', {
    successRedirect: '/',
    failureRedirect: '/login',
    failureFlash: true
  })
);

app.get('/register', checkNotAuthenticated, (req, res) => {
  res.render('register.ejs');
});

app.post('/register', checkNotAuthenticated, async (req, res) => {
  try {
    const hashedPwd = await bcrypt.hash(req.body.password, 10);
    users.push({
      id: Date.now().toString(),
      name: req.body.name,
      email: req.body.email,
      password: hashedPwd
    });
    res.redirect('/login');
  } catch {
    res.redirect('/register');
  }
});

app.get('/logout', (req, res) => {
  req.logOut();
  res.redirect('/login');
});

function checkAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return next();
  }
  res.redirect('/login');
}

function checkNotAuthenticated(req, res, next) {
  if (req.isAuthenticated()) {
    return res.redirect('/');
  }
  next();
}

app.listen(PORT, () => {
  console.log(`App is running on localhost:${PORT}`);
});

Passport module setup

After configuring express.js-based node.js server it’s time to configure your passport module with passport-local settings.

// passport-config.js

const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcrypt');

function init(passport, getUserByEmail, getUserById) {
  const authenticateUser = async (email, password, done) => {
    const user = getUserByEmail(email);
    if (user === null) {
      return done(null, false, {message: 'No user with that email'});
    }
    try {
      if (await bcrypt.compare(password, user.password)) {
        return done(null, user);
      } else {
        return done(null, false, {message: 'Password incorrect'});
      }
    } catch (e) {
      return done(e);
    }
  };
  passport.use(new LocalStrategy({usernameField: 'email'}, authenticateUser));
  passport.serializeUser((user, done) => done(null, user.id));
  passport.deserializeUser((id, done) => {
    done(null, getUserById(id));
  });
}

module.exports = init;

Local env file setup

SESSION_SECRET=<some random string>

These secret keys shouldn’t be visible to others, so please put this in the .gitignore file.

node_modules
.env

Configure views

<!-- index.ejs -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="../styles/global.css" />
    <title>Welcome <%= name %></title>
  </head>

  <body>
    <%- include('../includes/header', {name: name}); -%>
    <main>
      <h1>Welcome <b> <%= name %> </b></h1>
      <p>You are just logged in using express.js+passport service.</p>
    </main>
  </body>
</html>

<!-- login.ejs -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login Page</title>
    <link rel="stylesheet" type="text/css" href="../styles/global.css" />
  </head>

  <body>
    <%- include('../includes/header', {name: null}); -%>
    <main>
      <% if(messages.error) { %> <%= messages.error %> <% } %>
      <h1>Login</h1>
      <form action="/login" method="POST">
        <span> Login if you have account </span>
        <input type="email" id="email" name="email" placeholder="Email" required />
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Password"
          required
        />
        <button type="submit" class="btn primary large">Login</button>
      </form>
    </main>
  </body>
</html>

<!-- register.ejs -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registration Page</title>
    <link rel="stylesheet" type="text/css" href="../styles/global.css" />
  </head>

  <body>
    <%- include('../includes/header', {name: null}); -%>
    <main>
      <h1>Register</h1>
      <form action="/register" method="POST">
        <span> Register if you don't have account </span>
        <input type="text" id="name" name="name" placeholder="Name" required />
        <input type="email" id="email" name="email" placeholder="Email" required />
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Password"
          required
        />
        <button type="submit" class="btn primary large">Register</button>
      </form>
    </main>
  </body>
</html>

Global includes

<!-- header.ejs -->

<header>
  <a href="/" class="logo">GS</a>
  <button type="button" class="mobile-menu" onclick="toggle(this);"></button>
  <nav>
    <% if(name) { %>
    <p class="bold">Welcome <%= name %></p>
    <a href="/">Home</a>
    <a href="/logout">Logout</a>
    <% } else { %>
    <a href="/login">Login</a>
    <a href="/register">Register</a>
    <% } %>
  </nav>
</header>
<script>
  function toggle(element) {
    element.classList.toggle('open');
    document.getElementsByTagName('nav')[0].classList.toggle('open');
  }
</script>

Global CSS file

/* public/styles/global.css */

:root {
  --primary: #f8049c;
  --secondary: #fdd54f;
  --body-bg: white;
  --body-font: black;
  --gray: #eee;
}

header {
  height: 60px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  padding: 0 16px;
  position: fixed;
  top: 0;
  background-image: linear-gradient(to right, var(--primary), var(--secondary));
}

nav {
  display: none;
  font-family: 'Open Sans';
  position: absolute;
  width: 100%;
  top: 60px;
  left: 0;
  padding: 8px;
  box-sizing: border-box;
  border-bottom: 3px solid var(--secondary);
  background: var(--body-bg);
}

nav.open {
  display: block;
}

a {
  padding: 4px 8px;
  display: block;
  text-align: center;
  margin: auto 0;
  color: var(--body-font);
  font-weight: 400;
}

a.active {
  font-weight: 700;
}

button.mobile-menu {
  display: block;
  right: 0;
  position: absolute;
  top: 50%;
  width: 45px;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border-width: 0px;
}

button.mobile-menu:before,
button.mobile-menu:after {
  background-color: var(--body-font);
  content: '';
  display: block;
  height: 4px;
  transition: all 200ms ease-in-out;
}

button.mobile-menu:before {
  box-shadow: 0 10px 0 var(--body-font);
  margin-bottom: 16px;
}

button.mobile-menu.open:before {
  box-shadow: 0 0 0 var(--body-font);
  transform: translateY(10px) rotate(45deg);
}

button.mobile-menu.open:after {
  transform: translateY(-10px) rotate(-45deg);
}

a.logo {
  width: 25px;
  height: 25px;
  display: block;
  color: var(--body-bg);
  background-color: var(--body-font);
  box-shadow: 0 0 10px var(--body-font);
  border-radius: 50%;
  line-height: 1.5;
  text-align: center;
  margin-top: 8px;
  padding: 10px;
}

form:not(.no-style) {
  width: 100%;
  max-width: 400px;
  background: var(--body-bg);
  border: 1px solid var(--gray);
  padding: 16px;
  box-sizing: border-box;
  color: var(--body-font);
  border-radius: 4px;
}

.alt-text {
  text-align: center;
  margin: 10px 0;
}

main {
  max-width: 800px;
  margin: 80px auto 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

input {
  margin-top: 20px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1em;
  font-family: 'Open Sans';
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  height: 40px;
}

button.btn {
  color: var(--body-bg);
  font-weight: bold;
  box-shadow: none;
  border: none;
  width: 100%;
  display: block;
  padding: 8px;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
}

.bold {
  font-weight: 700;
}

.link {
  background-color: transparent;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

button.primary {
  background: var(--primary);
}

button.secondary {
  background: var(--secondary);
}

button.large {
  padding: 10px;
  border-radius: 5px;
  font-size: 1.5em;
}

@media (min-width: 768px) {
  nav {
    display: flex;
    position: relative;
    width: initial;
    border-bottom: none;
    margin: auto 0 auto auto;
    background: none;
    left: initial;
    top: initial;
  }

  button.mobile-menu {
    display: none;
  }
}

Show time

It’s time to run the code, open the project in the terminal/command line, and trigger the npm run dev command in order to run the project in dev mode (it will use nodemon).

Deployment

If you find your project is running fine, then you can deploy it on any nodejs based hosting partner. I am using a free Heroku instance to host this project. You can check the running application here: https://nodejs-login-service.herokuapp.com/

Make sure to add environment variables into your pipeline (Config Vars in Heroku)

Express.js + EJS complete solution

2021-03-02T00:00:00Z

People who have less time to invest and are familiar with the Handlebar template engine can quickly set up their website.

Let’s directly jump to work!

Prerequisites

Up and running Node.js

Project structure

# setup project structure

app
|-- public
- styles.css
|-- views
- index.ejs
-- components
- header.ejs
- footer.ejs
|- app.js
|- data.json

Once you create the above file/folder structure we will start configuring our server by installing node modules.

NPM scripts

# initialize npm (please follow the steps)
$ npm init

After executing the above command you will see the package.json file inside the root directory of your project in your case app/package.json.

Now we can start installing our node modules.

$ npm i ejs express

After you install the above two modules, your package.json file should look like this.

/* package.json */

{
  "name": "expressjs-ejs-project",
  "version": "0.0.1",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {},
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1"
  }
}

Server setup

/* app.js */

const express = require('express');
const server = express();
const data = require('./data.json');

const PORT = process.env.PORT || 3000;

server.set('view engine', 'ejs');
server.use(express.static(__dirname + '/public'));

server.get('/', (req, res) => {
  res.render('index', {data: {nav: data.nav, page: data.pages.index}});
});

server.get('/contact', (req, res) => {
  res.render('index', {data: {nav: data.nav, page: data.pages.contact}});
});

server.get('/about', (req, res) => {
  res.render('index', {data: {nav: data.nav, page: data.pages.about}});
});

server.listen(PORT, () => {
  console.log(`Sever is started on ${PORT}`);
});

/* data.json */

{
  "nav": [
    {
      "label": "Home",
      "url": "/"
    },
    {
      "label": "Contact",
      "url": "/contact"
    },
    {
      "label": "About",
      "url": "/about"
    }
  ],
  "pages": {
    "index": {
      "title": "Welcome to my website",
      "details": "Dummy text: Its function as a filler or as a tool for comparing the visual impression of different typefaces"
    },
    "contact": {
      "title": "Welcome to my website | Contact",
      "details": "The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century."
    },
    "about": {
      "title": "Welcome to my website | About",
      "details": "One disadvantage of Lorum Ipsum is that in Latin certain letters appear more frequently than others - which creates a distinct visual impression."
    }
  }
}

<!-- views/index.ejs -->

<!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" />
    <title><%=data.page.title%></title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>

  <body>
    <%- include("components/header"); %>
    <main>
      <h1><%=data.page.title%></h1>
      <p><%=data.page.details%></p>
    </main>
    <%- include("components/footer"); %>
  </body>
</html>

<!-- views/conponents/header.ejs -->

<header>
  <ul>
    <% data.nav.forEach((item)=> { %>
    <li><a href="<%= item.url %>"> <%= item.label %> </a></li>
    <% }) %>
  </ul>
</header>

<!-- views/conponents/footer.ejs -->

<footer>
  <p>Made with ❤️ and ExpressJS and EJS</p>
</footer>

/* public/css/style.css */

body {
  margin: 0 auto;
  padding: 2rem;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  display: inline-block;
  padding: 0.3rem;
}

header,
footer {
  display: flex;
  align-items: center;
  height: 10rem;
}

footer p {
  width: 100%;
  text-align: center;
}

Run your application

After doing all the above stuff, it’s time to run your website on the local machine.

$ npm start

After running the above command you will see you’re server has been started on the 3000 port and accessible through http://localhost:3000/

Wish you all the best, in case you have any question feel free to drop them below or use my contact page.

My first strapi project experience

2021-02-26T00:00:00Z

When I was looking for some NodeJS based powerful CMS I found Strapi as a good example since it is not only popular these days but comes with nearly zero bootstrap footprints.

I would like to categorize my article into three main questions which we generally ask whenever we choose a new framework or library.

What is Strapi?

Strapi is the leading open-source headless CMS that is based on 100% Javascript and fully customizable and developer-first.

Why Strapi?

I am using WordPress for the past 7 years without any complaint but whenever I install it I have to live with its default data types which take too much time to customize. On top of it, you need to have depth knowledge of how it works if you want to add/remove any field.

On the other hand, if you are using Strapi it offers you to define your own content types and data structure. No matter how many/fewer fields you want in your blog or page, you can define them with ease.

Following are the key features that I do like about Strapi:

Technical aspect

Headless CMS
Easy to install and ship
Option to choose database (SQLite, PostgreSQL, MySQL, MariaDB, MongoDB)
Markdown-based Rich text editor (Less text to transport)
Consume API from any REST or GraphQL client

User experience aspect

Seamless experience to create/edit and manage content types.
Runs on NodeJS which makes any JavaScript/NodeJS developer understand.
Developer Friendly (configure based on your project needs without touching the code).
Freedom for content editors to manage content through a user-friendly interface.

My opinion?

After having these many benefits I like to recommend Strapi for small to medium scale projects since it still needs some improvements in order to manage a heavy load of traffic. My opinion is based on some experiments and a hobby project only. Feel free to share your experience.

Useful links

Stay connected, I’ll showcase my Free strapi project hosting set up in my next article.

Host your strapi project

2021-02-25T00:00:00Z

In this article, I will walk you through the Strapi CMS setup on your local machine followed by deploying it to Heroku.

Prerequisites

Install Node.js 12.x (recommended 14.x).
Install PostgreSQL on your local machine. (Tip: I would suggest going with the installer).
install Heroku on your local machine, Check the documentation Here.

Setup local environment

If you want to use Heroku as a deployment server then I would suggest you choose PostgreSQL as a database option (however you have other options too).

Local Postgre database setup

$ psql
$ CREATE DATABASE strapi_db;
$ CREATE USER your_user_name WITH PASSWORD 'strong_password';
$ GRANT ALL PRIVILEGES ON DATABASE strapi_db TO your_user_name;

now you have a database setup on your local machine you are all set to install Strapi on your local machine.

Create Strapi project

Create strapi project by using the following commands:

# Using yarn
$ yarn create strapi-app app

# Using npx
$ npx create-strapi-app app

You can use the --quickstart parameter to go with the default setup which will create an SQLite database. Since we are going to deploy this on Heroku we shouldn’t include this param

After running the above command you can start your local server by running npm run develop and it will ask you to create a local user. You can choose whatever username password you want because it will not gonna be deployed with your application.

strapi login

Strapi Login

Setup Production Environment

Before sending it to Heroku we need to set up production database configurations. By default, Strapi comes with a default config that works for your local setup but we need to do a bit more to make it production-ready.

You will find the local database configuration here: ./config/database.js. Now we need to create another similar set for the production database. Let’s do some re-structuring of files.

Time to Deploy 🤞

Deploy the project:

# connect heroku git repo
$ git init  # in if your directory is not git enabled
$ git remote add heroku https://git.heroku.com/your-app-name.git

# add all your local changes to git
$ git add .

# commit your changes
$ git commit -m "initial commit"

# you need to push your changes to heroku repository
$ git push heroku master

Your application will be available here: <your-app-name>.herokuapp.com/admin

You did it 👏🏻

Facing problems?

Sometimes it doesn’t work on the first attempt, It would suggest following exactly the same steps I mentioned above. Still doesn’t work, let’s do this:

Check if you can run the app on your local system.
Check your environment variable on Heroku heroku config
If everything is fine then try check logs with heroku logs --tail
In case it doesn’t work, leave your query in the comments or Google 😉

Thanks for reading.

Can we use google services without compromising privacy?

2021-02-24T00:00:00Z

Over the period of time, people are aware of what internet privacy is and why it is important.

“Google” is becoming an important part of our lives, from searching anything on Google or watching an interesting video on YouTube you heavily rely on Google services.

There is a question that often comes to my mind why Google is giving it for free?

No, it is not free…!

Basically, when we search something on Google (especially while logged in on Chrome), it tags that particular search to your account. Just imagine you search for “Hotels in New York City”, you just gave your personal information to Google that you are planning to travel to New York (even sometimes with dates).

Not only this but sometimes we search for “How to start on {something}”, you don’t even know that you just compromised your personal interests, your plans everything with Google.

Come on, tell me if there is a way to use Google services without compromising my privacy!

Search Engine: If you are not a big fan of Google search, I would recommend start using https://duckduckgo.com as a search engine.

duckduckgo

This search engine is nothing but gives you full access to your search, so whatever you search here is not monitored by any third-party cookies and is not tracked by any ad services.

Browser: Not only search engines, but you can also change your browsing experience to improve your privacy. I started using Firefox these days and I am very happy with the overall experience. There are several options that you can opt for after installing Firefox.

Mozilla Firefox

Choosing Strict Mode: By choosing this mode you are telling Firefox to prevent you from Social media trackers, Cross-site tracking cookies, etc. (Disclaimer: It may impact the functionality of some sites).

firefox settings

Keep Search suggestions off when you type your search in browser search. You must have seen when you start typing anything in your browser search it immediately gives you results which may be the biggest security concern. Just imagine you accidentally pasted your password or something even more sensitive.

search suggestions

Tor Browser (Onion Routing)

This browser keeps your privacy as a priority. By using onion routing it never discloses your IP address to the destination node. Each packet sending through this browser is encrypted and routed through three nodes (Entry gourd, Middle rely on, Exit rely on).

tor routing

Tor browser is similar to Firefox in experience since it is built on Firefox and provides another level of encryption layer. You can configure your Tor browser by either directly connecting to your Tor services or Configure your own proxy.

tor browser

Disclaimer: I do not endorse this browser for any illegal activities. You still can be caught if you do so.

Please share your feedback in the comment section and let me know if you want more content like this.

Useful links

Are you logging your NodeJS code?

2021-01-16T00:00:00Z

Logs are an essential part of an application, it provides you deep level access of output comes from user inputs. When the application is in production, logs are important to identify the problem if something goes wrong. If you are a developer, have you asked yourself a question, “Am I logging or not?”

Why Logs are important?

No matter how careful we are while developing an application, it is quite difficult to make it 100% bug-free. Even after spending time to find defects in the test cycle, we still won’t be able to catch all of them.

These remaining errors may cause unexpected exceptions in a production environment. In some cases, your application might crash in certain user journeys. It is always a good idea to keep an extra eye on the application flow.

In order to achieve success, we use application logs to check why the application is behaving differently. For this, we have to set up our application to record information about its events and errors. This is what we call a logger, it helps us to identify problems with an application running in production.

Best Practices

Avoid using `console.log()`

There are some important things we need to consider while configuring logs in the application. Adding logs with console.log() won’t stay for a longer period of time. They are available till the time user refreshes the page. console.log() can be used for temporary logging since it provides in-memory logs which can be easily read through the terminal since it uses stdout. Similarly console.error or console.warn can also be used but you can’t store these logs into any file or database.

Hence, console.log doesn’t provide us enough options to use it as a primary logging system. You should consider the proper library to use as a logging system.

Third-party libraries

Dedicated libraries unlike console.log provide us adequate options to define and configure the logging system.

Levels: It offers different levels of logging, example you can use several levels of logging like, info, warn, debug, and error. This helps to filter the problems.
Appearance: You can use different colors and appearances to distinguish your logs. Data types: Not only appearance, but you can also make your logs different in type. Some libraries support JSON format as well.

Winston and Bunyan are two of the most popular logging libraries available for Node applications.

Source, Timestamps, Context

Logging is not only to log text when exception or success comes, there are 3 important aspects that make them more useful when it comes to debugging.

Source: While debugging the application through logs it is important to know what is the source of a particular log. Hence, it is important to keep, hostname, method, the module name.
Timestamps: Timestamps plays a very important role while debugging an application because it helps you to identify at what timeframe error happened. In the world of microservices, it is important to keep timestamps because requests are not sequential but async.
Context: These types of errors/exceptions come based on users’ inputs. For example, when the user is trying to register in an application but registration failed due to he/she is already a registered user or provided email address is wrong etc. So, application behavior was expected but the user was not able to register.

Logging levels

Use different levels of logs to distinguish them, so developers can easily understand them while debugging the application.

Emergency: the system is unusable
Alert: action must be taken immediately
Critical: critical conditions
Error: error conditions
Warning: warning conditions
Notice: normal but significant conditions
Informational: informational messages
Debug: debug-level messages

You can still alter these levels upon your needs.

What shouldn’t be part of logs

There are some obvious mistakes developers does while configuring loggings. One shouldn’t log any PII data while logging requests or exceptions. I would like to share some bad and good examples of logging.

Bad Example 🚫

const express = require('express');
const winston = require('winston');
const app = express();

// configuring logger
const logger = winston.createLogger({
  transports: [
    new winston.transports.Console(),
    new winston.transports.File({filename: 'combined.log'})
  ]
});

app.post('/user/add', (req, res) => {
  try {
    modal
      .addUser({
        email: req.email,
        password: req.pwd
      })
      .then(() => {
        logger.log({
          level: 'info',
          message: `${req.email} with password ${pwd} has been successfully registered`
        });
        res.send(200);
      });
  } catch (err) {
    logger.log({
      level: 'error',
      message: `${req.email} with password ${pwd} wasn't registered`
    });
  }
});

Good Example ✅

const express = require('express');
const winston = require('winston');
const app = express();

// configuring logger
const logger = winston.createLogger({
  transports: [
    new winston.transports.Console(),
    new winston.transports.File({filename: 'combined.log'})
  ]
});

app.post('/user/add', (req, res) => {
  try {
    modal
      .addUser({
        email: req.email,
        password: req.pwd
      })
      .then(response => {
        logger.log({
          level: 'info',
          message: `Success: ${response.data.id} user has been successfully registered`
        });
        res.send(200);
      });
  } catch (err) {
    logger.log({
      level: 'error',
      message: `An exception occurred while registering new user: ${err}`
    });
  }
});

Conclusion

All I can say that it is important to have a proper logging system set up in the application. This can make a developer’s life easier to debug any problem in the production environment with less turnaround time.

How I explained web designing to my grandmother

2020-09-10T00:00:00Z

I would like to share a question that I often asked my grandmother, “What are you doing on this laptop?”. I am sure it is difficult for you also to explain what is web designing to your grandparents.

However, I found a way to explain the same by taking some real-life examples. Firstly, I was looking for something which I can relate to.

A construction site can be a perfect example, where core construction elements can play the role of different elements of programming.

html

HTML

HTML (Bricks): The way we build our pages using HTML, the same way we build building structures by using bricks. is our foundation stone on which we build the whole structure of the page.

javascript

JavaScript

JavaScript (Cement): Don’t forget bricks can’t build the structure alone we need another special element called Cement. With the help of cement, we can create meaningful structures. I can also add dynamic elements by using JavaScript like electricity boards, lights, etc.

css

CSS

CSS (Paint): Since our main structure is ready now, we can now give it a good paint job. CSS plays a similar role in web designing, it provides colors to our web pages.

I am sure you can also explain programming to your loved ones, especially if they are not from a programming background.

Responsive vs. adaptive design

2020-09-06T00:00:00Z

One of the regular topics which usually comes in every discussion before starting a website is actually a bit confusing too.

What is Responsive?

Every site is responsive in behavior until you want to make it adaptive.

Confusing? Let me explain – When you write text on any web page it is responsive, you can open your website on any device/browser text will adjust according to your device width. The problem comes into the picture, the moment you start fixing width in your layouts.

What is Adaptive?

Adaptive layout can’t work without responsive thinking. Yes, Besides your adaptive layouts there is always responsive behavior that works. When your design requires any special treatment for a particular device/orientation it needs to be handled by the adaptive method.

Media queries: Media queries play a very essential role while implementing adaptive designs. You can give special instructions based on target media, for example mobile, tablets, desktops, printers.

Is Responsive Better Than Adaptive?

I would say both methods have their own importance, so there is no sharp edge answer to which one is better. As per industry standards, web developers usually follow Mobile First Approach, which plays an important part while developing a website.

Responsive Grid pattern: You can use bootstrap grid pattern to fasten up your development. It provides Adaptive as well as Responsive behavior.

Closure with clients

It depends upon the client to the client how technical they are, normally they want the website should work on every device and browser. It’s better to start with a responsive approach (mobile-first) so that in case they want anything special on bigger viewports (tablets, desktops) you can easily add.