Building a greener web: where code meets sustainability to shape a better digital future. 🌍🌱
https://www.learnwithgurpreet.com/ Artificial intelligence is becoming part of everyday work. From writing emails to creating reports and analyzing data, AI tools are helping people work faster than ever. But as AI becomes more common, one important question keeps coming up. Who is responsible when AI makes a mistake? This is why more companies are focusing on AI governance and transparency. What…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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"…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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,…
https://www.learnwithgurpreet.com/ 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)…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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 You can directly install different web services as part of Synology packages from the Synology package…
https://www.learnwithgurpreet.com/ Exciting news! This project has been featured in the Official Eleventy Starter Projects . 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…
https://www.learnwithgurpreet.com/ 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.…
https://www.learnwithgurpreet.com/ 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! 😊 What is Digital waste? Digital is Physical , it is quite important to…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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,…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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. OS selection in Raspberry PI…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ Prerequisite Day 1 - Your first week in NodeJS Day 2 - Your first week in NodeJS Day 3 - Your first week in NodeJS Day 4 - Your first week in NodeJS Day 5 - Your first week in NodeJS 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…
https://www.learnwithgurpreet.com/ As promised, this is my fifth article of Your first week in NodeJS web article series. Prerequisite Day 1 - Your first week in NodeJS Day 2 - Your first week in NodeJS Day 3 - Your first week in NodeJS Day 4 - Your first week in NodeJS Quick recap In my previous article, I explained how to implement a template engine to get dynamic variables into your HTML file.…
https://www.learnwithgurpreet.com/ Prerequisite Day 1 - Your first week in NodeJS Day 2 - Your first week in NodeJS Day 3 - Your first week in NodeJS 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…
https://www.learnwithgurpreet.com/ Prerequisite Day 1 - Your first week in NodeJS Day 2 - Your first week in NodeJS 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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'];…
https://www.learnwithgurpreet.com/ 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,…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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.…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…
https://www.learnwithgurpreet.com/ 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…