Forem: Ganesh Patil

Simplifying Proxies and Bruno Integration - A Developer's Guide

Ganesh Patil — Wed, 16 Jul 2025 07:28:59 +0000

A proxy is a simple server that sits between your device and the internet. It acts as a middleman, forwarding your requests to external servers and returning their responses, offering added security, privacy, and sometimes faster performance.

There are two main types of proxies:

Forward Proxy (Client-side)
Reverse Proxy (Server-side)

In this guide, we’ll walk you through what proxies are, the differences between forward and reverse proxies, and how to configure a proxy in Bruno to enhance your API testing workflows.

Understanding Proxies

At its core, a proxy server is just another computer that stands between your device and the target server on the internet. Instead of your request going directly to the destination, it first goes to the proxy. The proxy then forwards your request, receives the response, and sends it back to you. Think of it as a helpful go-between for your online communications.

Why do we need such a middleman?

Anonymity & Privacy: They hide your actual IP address from the destination server, making your online activity harder to track. The destination server only sees the proxy's IP.
Security: Proxies can filter malicious traffic, block access to dangerous sites, or serve as a first line of defense against attacks.
Content Access: They can help bypass geographical restrictions or network blocks by acting as a gateway from an allowed location.
Performance (Caching): Proxies can store copies of frequently accessed web pages or files. If multiple users request the same content, the proxy can serve it directly from its cache, speeding up load times and saving bandwidth.
Monitoring & Logging: In corporate environments, proxies can log internet usage for security audits, policy enforcement, and troubleshooting.

Forward Proxies (Client-side)

A Forward Proxy is what most people typically think of when they hear the term "proxy." It sits in front of one or more client devices (like your computer or a corporate network) and acts on their behalf to send requests out to the internet.

How it works: Your computer (client) sends a request to the forward proxy. The forward proxy then sends that request to the destination server on the internet. The destination server sees the proxy's IP address, not yours.

Common Uses:

Corporate Networks: Companies use forward proxies to filter web content, enforce security policies, cache frequently accessed data, and monitor employee internet usage.
VPNs & Anonymizers: Many VPN services and anonymity tools operate as forward proxies, routing your traffic through a different server to hide your location.
Geographical Unblocking: Accessing content restricted to certain regions by routing through a proxy located in that region.

Reverse Proxies (Server-side)

A Reverse Proxy works differently. Instead of sitting in front of the client, it sits in front of one or more servers (like your web servers or API servers). It receives all incoming requests from the internet and then forwards them to the appropriate backend server. The client making the request never directly interacts with the backend servers.

**How it works:** A client (e.g., your browser, or Bruno testing an API) sends a request to a domain (e.g., `api.yourcompany.com`). This request hits the reverse proxy. The reverse proxy then directs the request to the correct internal server that can fulfill it, returning the response back to the client.

Common Uses (especially in enterprise for APIs):

Load Balancing: If you have multiple API servers, a reverse proxy can distribute incoming traffic across them, preventing any single server from being overwhelmed and ensuring high availability.
Enhanced Security: It hides the internal network structure, shielding backend servers from direct attacks. It can also handle SSL/TLS encryption (SSL Offloading), preventing direct exposure of certificates on backend servers.
Caching: Just like forward proxies, reverse proxies can cache static or frequently requested content, reducing the load on backend servers and improving response times.
API Gateway Functionality: Many modern API gateways are built on reverse proxy principles, handling authentication, rate limiting, request/response transformation, and routing for microservices.
URL Rewriting & Routing: They can manipulate URLs or route requests to different backend services based on the URL path, enabling flexible API architectures.

How to Configure Proxy in Bruno

Bruno provides flexible proxy configuration options at both the global (main settings) and collection levels. This allows you to tailor your testing environment to various network setups, from personal use to complex corporate proxies.

Main Settings (Global Proxy)

These settings act as your default. If no specific collection proxy is configured, Bruno will use these.

Access: Go to Bruno's general settings.

`xMode` (Off/On/System Proxy):
- `Off` : No global proxy is used by default.
- `On` : Bruno will use the proxy details configured below for all requests.
- `System Proxy` : Bruno attempts to automatically detect and use your operating system's proxy settings. Convenient for corporate environments where system-wide proxies are set.
`Protocol` (HTTP/HTTPS/SOCKS4/SOCKS5): Specifies the protocol Bruno will use to communicate with the proxy server.
- `HTTP` : Standard protocol for web traffic.
- `HTTPS` : Secure, encrypted communication with the proxy.
- `SOCKS4` : A generic proxy protocol for various network traffic.
- `SOCKS5` : An advanced SOCKS protocol supporting authentication and UDP traffic.
`Hostname` (e.g., `proxy.example.com`): The IP address or domain name of your proxy server.
`Port` (e.g., `3000` , `8080`): The specific port number on which the proxy server listens for connections.
`Auth` (Username/Password):
- `Username` : The username required to authenticate with the proxy server.
- `Password` : The password required to authenticate with the proxy server.
`Proxy Bypass` : A comma-separated list of hostnames or IP addresses that Bruno should connect to *directly*, bypassing the configured proxy. Useful for internal APIs or specific services that don't need to go through the proxy.

Collection Level Proxy

These settings allow you to override the global proxy configuration for a specific collection of requests.

Access: In your Bruno collection, find its settings.

`Config` (global/enabled/disabled):
- `global` : Use the global proxy settings defined in Bruno's main settings.
- `enabled` : Activate collection-specific proxy settings. Bruno will use the Hostname, Port, Protocol, and Auth configured within this collection.
- `disabled` : Do not use any proxy for this collection, even if a global proxy is enabled.
All other fields (Protocol, Hostname, Port, Auth, Proxy Bypass) function identically to the global settings, but apply only to this specific collection.

Why both levels? This flexibility is key for an API testing tool. You might have:

A global corporate proxy for most external requests.
A specific collection of tests for an internal API that should bypass the proxy.
Another collection for a client whose API requires a different, dedicated proxy.

Wrap Up

Proxies are a fundamental component of modern networking, offering crucial benefits like enhanced security, improved privacy, and optimized performance for both clients and servers. With Bruno's intuitive proxy configuration options, you're well-equipped to handle complex network environments.

Your APIs deserve better conversations - join the Bruno Discord.
Happy proxy testing with Bruno! 🚀

Complete Bruno Product Walkthrough ❤️

How to Automate API Testing with Bruno CLI and Jenkins

Ganesh Patil — Thu, 10 Jul 2025 11:51:03 +0000

Jenkins is a powerful open-source automation server that enables continuous integration and continuous delivery (CI/CD) for software development workflows. It provides a robust platform for automating build, test, and deployment processes across multiple environments and platforms.

Bruno CLI integrates seamlessly with Jenkins pipelines to automate API testing workflows. This guide will walk you through setting up automated test execution using Jenkins CI.

✅ Prerequisites

A running Jenkins instance (local or remote).
Bruno CLI installed.
The NodeJS Plugin installed in your Jenkins environment.
A Git repository containing your Bruno collections and a Jenkinsfile.

🧑‍💻 Local Development Setup

If you're using macOS, you can use the following setup to configure Jenkins in your system.

Step 1: Install Jenkins via Homebrew

Run the following command on the terminal to install Jenkins.

brew install jenkins-lts

The jenkins-lts package installs the Long Term Support version of Jenkins, which is recommended for stability.

Step 2: Start the Jenkins Service

After installation, start the Jenkins service using Homebrew's services command:

brew services start jenkins-lts

Step 3: Access Jenkins in Your Browser

Jenkins typically runs on port 8080. Open your web browser and navigate to:

http://localhost:8080

You will be greeted with the "Unlock Jenkins" screen.

Step 4: Unlock Jenkins and Install Plugins

Retrieve the initial admin password: The Jenkins console will display the path to the initial admin password. You can also find it by running:

   cat /Users/Shared/Jenkins/Home/secrets/initialAdminPassword

Copy this password.

Paste the password: In the browser, paste the copied password into the "Administrator password" field and click Continue.
Install suggested plugins: On the next screen, choose Install suggested plugins. This will install a set of essential plugins required for most Jenkins functionalities.
Create First Admin User: After the plugins are installed, you'll be prompted to create your first admin user. Fill in the details and click Save and Finish.
Jenkins is Ready: Click Start using Jenkins to access your Jenkins Dashboard.

🤖 Automate API Testing with Jenkins

Now, let's start with automating the API testing workflow with Jenkins and Bruno CLI. This section will guide you for structuring your Bruno collection, the sample Jenkinsfile, and the initial setup you need to configure.

Step 1: Organize Your Bruno Collections

Ensure your Bruno collections and environment files are properly organized within your Git repository. A typical structure looks like this:

your-api-project/
├── Jenkinsfile
├── collections/
│   ├── authentication/
│   │   ├── login.bru
│   │   └── logout.bru
├── environments/
│   ├── development.bru
│   ├── ci.bru
│   └── production.bru
└── bruno.json

Step 2: Configure Node.js in Jenkins

Before running Bruno CLI, you need to ensure Jenkins can access a Node.js runtime environment.

Install the NodeJS Plugin:
- Navigate to Manage Jenkins > Plugins.
- Select the Available plugins tab, search for NodeJS, and install it.

Configure a Node.js Installation:
- Go to Manage Jenkins > Tools (under System Configuration).
- Scroll down to the NodeJS installations section and Click Add NodeJS.
- Provide a descriptive Name (e.g., Node.js 18). This exact name will be used in your Jenkinsfile.
- Check Install automatically and select your desired Node.js version (e.g., NodeJS 18.20.8).
- Crucially, ensure the checkbox "Provide Node & npm folder to PATH" is checked. This ensures node and npm commands are available to your pipeline.
- Click Save.

Step 3: Create Your Jenkinsfile

Create a file named Jenkinsfile in the root of your Git repository. This file defines the steps of your CI pipeline.

pipeline {
    agent any // Run the pipeline on any available Jenkins agent
    stages {
        stage('Checkout Code') {
            steps {
                // Clones the repository to the Jenkins workspace
                checkout scm
            }
        }
        stage('Setup Node.js & Install Bruno CLI') {
            steps {
                // Makes the Node.js installation (configured in Jenkins Tools) available
                tool 'Node.js 18' // Use the exact name configured in Jenkins Global Tool Configuration
                echo 'Verifying Node.js and npm versions...'
                sh 'node -v' // Verify Node.js is on PATH
                sh 'npm -v'  // Verify npm is on PATH
                echo 'Installing Bruno CLI globally...'
                sh 'npm install -g @usebruno/cli' // Install Bruno CLI
                sh 'bru --version' // Verify Bruno CLI installation
            }
        }
        stage('Run API Tests') {
            steps {
                // Ensure Node.js is available if this stage runs in a separate context
                tool 'Node.js 18'
                echo 'Executing Bruno API tests...'
                // Run tests with 'ci' environment and generate an HTML report
                sh 'bru run --env ci --reporter-html results.html'
            }
        }
        stage('Archive Test Results') {
            steps {
                echo 'Archiving test report...'
                // Save the generated HTML report as a build artifact
                archiveArtifacts artifacts: 'results.html', fingerprint: true
            }
        }
    }
    post {
        // Actions to run after the main pipeline stages complete
        always {
            echo 'Pipeline finished.'
        }
        success {
            echo 'API Tests Passed Successfully!'
        }
        failure {
            echo 'API Tests Failed! Check console output for details.'
        }
    }
}

Step 4: Configure Jenkins Pipeline Job

Create a New Jenkins Job:
- From the Jenkins Dashboard, click New Item.
- Enter an Item name (e.g., bruno-api-tests-pipeline).
- Select Pipeline as the item type and click OK.

Configure Job Details:
- In the job configuration page, navigate to the Pipeline section.
- Set Definition to Pipeline script from SCM and Choose your SCM (e.g., Git).
- Enter your Repository URL (e.g., https://github.com/your-org/your-repo.git).
- Specify any Credentials if your repository is private.
- Set Branches to build to */main (or the branch containing your Jenkinsfile).
- Ensure Script Path is Jenkinsfile (this is the default).
- Optional: Under Build Triggers, configure how you want your pipeline to start (e.g., GitHub hook trigger for GITScm polling for automatic builds on push, or Build periodically for scheduled runs using cron syntax).
Click Save to finalize your job configuration.

Step 5: Run and Monitor Your Pipeline

Trigger a Build:
- From your Jenkins pipeline job page, click Build Now (in the left-hand menu) to manually start the pipeline.
Monitor Progress:
- Observe the Build History section to see the status of your builds (green checkmark for success, red cross mark for failure).
- Click on a specific build number, then select Console Output to view real-time logs and detailed execution steps.
View Test Results:
- Once a build that generated results.html completes, navigate to that specific build's page.
- Look for the Artifacts section (usually on the left sidebar or at the top of the build summary).
- Click on results.html to download the report, then open it in your web browser for detailed test outcomes.

🔗 Try the Demo Yourself

We've published the full working collection on GitHub. You can easily clone and use it for demo purposes.

Wrap Up

Automating your API testing workflow can save a lot of time for software developers and QA engineers and cost for organizations. Instead of repeating one task multiple times, you can automate with Bruno CLI and Jenkins to build robust, bug-free, and quality software applications.

Want to explore more about API automation, security, and AI? Join the Bruno Discord Server to connect, learn, and grow with a vibrant tech community!

Complete Bruno Product Walkthrough ❤️

How to Automate API Testing in CI/CD Using GitHub Actions + Bruno CLI 🚀

Ganesh Patil — Wed, 02 Jul 2025 13:37:17 +0000

CI/CD is table stakes for modern dev teams — and if you're building APIs, test automation should be too. GitHub Actions is a fantastic platform for integrating tests directly into your dev flow.

Bruno CLI makes it dead simple to run your API tests as part of every commit and pull request. No more manual testing or flaky setup — just repeatable, scriptable tests that run on autopilot.

⚠️ This guide assumes you’ve already got a GitHub repo with Bruno collections. If not, start here.

✅ Prerequisites

Before you set up the GitHub Action, make sure you’ve got:

A GitHub repo with Bruno collections committed
Some familiarity with GitHub Actions YAML syntax

Organizing Your Bruno Collections

Structure your repo like this:

your-api-project/
├── .github/
│   └── workflows/
│       └── api-tests.yml
├── collections/
│   ├── authentication/
│   │   ├── login.bru
│   │   └── logout.bru
├── environments/
│   ├── development.bru
│   ├── ci.bru
│   └── production.bru
└── bruno.json

Why it matters:

.github/workflows/ → stores GitHub Actions
collections/ → organized Bruno test collections
environments/ci.bru → test-specific environment config

⚙️ GitHub Actions Workflow

Create a file at .github/workflows/api-tests.yml:

name: API Tests

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

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

      - name: Install Bruno CLI
        run: npm install -g @usebruno/cli

      - name: Run API Tests
        run: bru run --env ci --reporter-html results.html

      - name: Upload Test Results
        uses: actions/upload-artifact@v4
        with:
          name: test-results
          path: results.html

What this does:

Runs on push/PR to main
Sets up Node 20, installs Bruno CLI
Executes API tests with ci environment
Uploads the HTML test report as an artifact

Securing Sensitive Data with GitHub Secrets

If you use secrets like API keys or tokens, pass them safely like this:

- name: Run API Tests with Secrets
  run: |
    bru run --env ci \
      --env-var API_KEY=${{ secrets.API_KEY }} \
      --env-var JWT_TOKEN=${{ secrets.JWT_TOKEN }}
  env:
    API_BASE_URL: ${{ secrets.API_BASE_URL }}

To set secrets:

Go to your repo
Settings → Secrets and variables → Actions
Click New repository secret
Add your sensitive keys/tokens

Monitoring & Debugging

✅ Check Build Status

Go to the Actions tab in your repo
You’ll see the workflow listed by commit
Expand any job to view logs and timing

View Test Reports

Download results.html from the test-results artifact
Open in a browser to view full report
You can also emit JUnit format if needed for integration

Try the Demo Collection

We’ve open-sourced a working example at bruno-collections/github-actions.

Final Thoughts

GitHub Actions + Bruno CLI is a killer combo for shipping fast, tested, and reliable APIs. Start with a simple workflow, evolve it as you grow.

Automate it. Test it. Ship it.

Happy testing 🚀

OpenGraph Protocol Explained: Optimize Your Website for Better Social Sharing

Ganesh Patil — Thu, 02 Jan 2025 17:55:14 +0000

Introduction

Have you ever wondered how links shared on social media platforms like LinkedIn, Twitter, or Reddit automatically display a preview, including an image, title, and description of the webpage?

This magic happens thanks to meta tags and the Open Graph protocol embedded in the website's code. Let’s explore this concept with an example:

Let me know if you'd like me to expand this further!

Without meta tags & Opengraph protocol
Using meta tags & Opengraph protocol

1. Without meta tags & Opengraph protocol

Now you can see the shared url is not showing anything and its not good experience for users. Let's see another exaample by using meta tags and Opengraph protocol.

2. Using meta tags & Opengraph protocol

Now if you see this example where shared links showing website preview with title Ganesh Patil | DevGan and etc. because of using meta tags and opengraph protocol.

Introduction

Now lets understand a bit about opengraph and meta tags.

Meta tags

Meta tags are HTML elements that provide metadata about a web page. This metadata can include information about the page’s content, author, description, keywords, and more.
These tags are typically placed within the
section of a webpage and help search engines, social media platforms, and browsers understand and display the page's information accurately.

Common Meta Tags:

<meta charset="UTF-8">: Specifies the character encoding for the document.
<meta name="description" content="Your description here">: Provides a brief description of the page, which can appear in search engine results.
<meta name="keywords" content="keyword1, keyword2">: Lists relevant keywords for SEO.
<meta name="author" content="Author Name">: Identifies the author of the content.

Opengraph Protocol

OpenGraph is a protocol introduced by Facebook that enables web pages to become richer objects when shared across social media platforms.
By using OpenGraph meta tags, you can control how your webpage is displayed when it is shared on platforms like Facebook, Twitter, LinkedIn, and others.

Common OpenGraph Tags:

<meta property="og:title" content="Page Title">
Defines the title of your page as it will appear on social media.

<meta property="og:description" content="Page Description">
Provides a description of the content of the page.

<meta property="og:image" content="URL to Image">
Specifies an image to be displayed when the page is shared. Ideally, this should be a visually appealing image relevant to the content.

<meta property="og:url" content="Page URL">
Sets the canonical URL of the page, ensuring that the correct version is shared.

<meta property="og:type" content="website">
Defines the type of content (e.g., "website", "article", "video", etc.).

Generate Meta tags Automatically

After understanding the meta tags and opengraph protocol, I want to discuss the common developers problem relates to this.

Problem

You have to write repetitive meta tags with suitable description and often people struggle to set image because of size ration and etc. issues are there.

Solution

The solution for this example is having tool which will automate the process of writing meta tags and images related issues as well and where opengraph.xyz tool come into the picture.

How to use OpenGraph Tool

Visit to OpenGraph Tool
Add your website URL inside input box.
It will automatically generate meta tags and opengraph tags for your website.
Add image in [1200x630px] size ratio to show preview of your website.
Copy and Paste the tags inside your head section of index.html file.

If you learn something new from this blog then don't forget to check and support my YouTube channel.

Build Internal tools with ToolJet

Ganesh Patil — Wed, 14 Aug 2024 12:31:17 +0000

ToolJet is a low-code platform enabling developers to rapidly build and deploy custom internal tools. It offers drag-and-drop pre-built components for developers to build complex applications with ease. It also provides a wide range of data sources and APIs. This tutorial aims to integrate data sources with the Tooljet app we will build.

How to Create Tooljet App

Steps
Launch the ToolJet web platform on the browser and select Try for free.
Fill the required information and create an account.
Select Create an app from the left side panel.
Give it a nice name and you are done.

Congrats 😍, you created your first Tooljet app.

Next Step

Now we have successfully created our first app on ToolJet. It's time to integrate data sources. In this tutorial, we use GitHub API as a data source and will incorporate and display the data on Canvas with the pre-built Table component.

Integrate GitHub API with ToolJet

There are three different sections of our app

Left side panel for app controls
Right side panel for components

middle panel is divided into two sub-sections

One is our app canvas
Query panel.

How to Connect with Data Source(GitHub API)

Steps
Click on the Add button from the data source and select REST API.
Add this API (https://api.github.com/users) in the URL input box and click on the run button.
We are successfully able to get the data in JSON format.
Now drag and drop the table component from the right side panel.
Click on the Table component and on the right side you can see the default data remove it.
Write the query `"{{queries.restapi1.data}}"` in the data section.

We can see our data in the table component.

Wrap-up

In this guide, we successfully connected to a data source in ToolJet, fetched data, and displayed it in a Table component. This process can be applied to various data sources and use cases, enabling you to create dynamic and data-driven applications with ToolJet.

DM for Collab ✍🏻 - ganeshpatil.work@gmail.com

OpenSource React Tailwind Portfolio Template

Ganesh Patil — Sat, 13 Jul 2024 12:59:35 +0000

I built a React Tailwind Portfolio template for all the developers looking to build portfolios. You don't need to make everything from scratch you can use this template GitHub Repo which includes the below features.

Complete Responsiveness
Dark Mode
Home Project Blogs YouTube Sections
Deployed on Vercel

Future Enhancement📍

Implement Hashnode & YouTube API
Search component for Blogs section
Nice Ui/UX design

📌Here's a complete guide on YouTube to start with the template!
Support to my Channel!

Mastering CSS3: Strategies for Writing Clean Code and Boosting Performance

Ganesh Patil — Sat, 03 Feb 2024 06:47:22 +0000

Cascading Style Sheet (CSS3) is changing, evolving and continuously there are different ways to write CSS. Some developers choose to write separate files for better understanding or to organize structure, other people write single CSS files. It depends on what kind of project you're working on.

OLD V/S NEW CSS

CSS3 completely changed the way to write CSS and it's more powerful with new features. Including responsive layouts, animations, variables, properties like calc functions, etc.

The old way people wrote CSS and found it difficult to make websites responsive and optimized is now can be done easily.

Examples of Writing Bad CSS

Most of the time people write the same code again and again for example


<div class="item-1"> Hello </h1> 
<h2  class="item-2"> Amazing </h1>
<h3  class="item-3"> Developers </h1>

Now, I want to change the back color of every individual element. I have to write the following CSS code
app.css

.item-1{
background-color: red;
}

.item-2{
background-color: red;
}

.item-3{
background-color: red;
}

Effective Way to Write CSS3

In the previous example, we had to write three different lines to change color right, and now assume you're working with a large codebase and your team lead assigns you the task to change every <h1> element color so you have to find each heading change the color.

app.css

.item-1{
background-color: yellow;
}

.item-2{
background-color: yellow;
}

.item-3{
background-color: yellow;
}

It's time-consuming and a bad way to solve problems.
Here's an effective way to solve this.

Create systemDesign.css as a separate file and add all your styling rules.
systemDesign.css

:root {
--color: red;
--back-color: yellow;
--h1: 32px
--h2: 24px;

 }

/**
* ? You can write all CSS styles here. 
**/

Now let's take the previous example if you have to change the back color of all heading tags all you have to update is a back-color style from the syetmDesign.css file.

index.html

<div class="item-1"> Hello </h1> 
<h2  class="item-2"> Amazing </h1>
<h3  class="item-3"> Developers </h1>

systemDesign.css

:root {
--color: red;
--back-color: yellow;
--h1: 32px
--h2: 24px;
}

/**
* ? Write your CSS classes
**/

.item-1{
   background-color: --var(back-color)
}

.item-2{
   background-color: --var(back-color)
}

.item-3{
   background-color: --var(back-color)
}

Now if you want to change back color just change the variable value and that's it. You can also use the sibling concept of CSS to solve this issue but always use standard practices.

Second Example

Another way is to not repeat your code again and again.

Assume you have two classes .one and .two that require the same properties.

<button class="one"> Web </button>
<button class="two"> Development </button>


.one{

padding: 10px 40px;
margin: 10px;
font-size: 32px;
color: black;
background-color: white;
}

.two{
padding: 10px 40px;
margin: 10px;
font-size: 32px;
color: white; // color changes
background-color: black; // back-color changes
}

You're using the same code here and just two properties are changing back-color and color.

Solutions

.one, .two {
padding: 10px 40px;
margin: 10px;
font-size: 32px;
color: black;
background-color: white;
}

.two{
color: white;
background-color:
}

In CSS, when you use a comma between selectors, it allows you to apply the same set of styles to multiple selectors. This grouping of selectors with a comma is a way to apply a common style block to multiple elements without duplicating the styles for each selector.

I'm a developer who's learning something new every day and sharing his learnings on the dev platform. if you found any wrong code, or typos mistakes I would appreciate it and will fix it ASAP. Let me know in the comments if you find some.

That's it!
Let's chat on Twitter!

Support my YouTube channel 👇

Enough HTML for Beginners!

Ganesh Patil — Thu, 01 Feb 2024 09:39:54 +0000

Hypertext Markup Language(HTML). The difference between HTML and HTML5 is the latest version of the language with new features, powers, and more positive results nothing fancy.

Start with HTML

The below elements that we are going to explore in this article remember no course or guide will teach you the whole programming, the modern way approach is to understand the basics and build and explore.

HTML Document Format
Meta tags
preloading & prefetching
HTML Tags (Self-closing & open-close tags)
Semantic HTML
Forms
Table

1. Document Format

<!DOCTYPE html>
<html lang="en">
  <head>
<!-- meta tags & CSS file goes here -->
    </head>

  <body>
<!-- The body of HTML element -->
  </body>

</html>

The first line tells the browser this is the HTML document.

<!DOCTYPE HTML>

The second line is used for defining the language of the webpage you're building. You can also put another language as well but for best practices, we used en(English) or any one language.

<html lang="en">

Meta tags enable superpower to your project when you share something on social media it automatically shows the preview images and ranks your website on top of Google with targeted keywords.

2. Meta Tags

<!-- Meta Tags -->

<meta name="title" content="Personal blog Page">
<meta name="description" content=" This is a personal blog website.">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

The first two meta tags are used to define the title and description of your webpage and charset meta tags are used to support different characters(emojis) and the rest are for device width so on.
Another approach you can use is Opengraph Protocol which is highly recommended.

3. Preloading and Prefetching

These two techniques are really powerful and even used in next, React and modern web frameworks to optimize resources.

Preloading and prefetching are techniques in HTML to optimize the loading of resources, such as images, scripts, stylesheets, and more, to enhance the overall performance and user experience of a web page.

Preloading:

Preloading is used to load certain resources in advance, before they are needed by the page, to reduce latency and improve performance.

Use the tag with the rel="preload" attribute to specify the resource to be preloaded.

<link rel="preload" href="example-image.jpg" as="image">

Prefetching

Prefetching is used to fetch resources in the background that might be needed for future navigation, improving the loading speed of subsequent pages.

<link rel="prefetch" href="next-page.html">

Self-Closing Tags & Paired Tag

In HTML, elements can be classified into two main types: self-closing tags and paired tags (also known as open and close tags).


<!-- Slef Closing Tags -->
<img src="image.jpg" alt="Description">
<be>
<input type="text">

<!-- Paired Tags-->
<div>
  <h1>This is inside a div.</h1>
  <p>Another paragraph inside the same div.</p>
</div>

These are just basic tags you can explore more tags here!

Semantic HTML

Semantic HTML refers to the use of HTML markup that carries meaning about the structure and content of a web page, making it more descriptive and meaningful both for developers and browsers.

<!-- Semantic HTML Tags -->
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Forms

The forms are an essential part of HTML when it comes to taking input from users for multiple purposes like login, registration, etc.

<form action="demo.php method="get">
 <!-- Email Input -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <!-- Radio Buttons -->
    <label>Gender:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
</form>

We use two methods with form action="demo.php" and method="get". The first action page is executed when the user clicks on the submit button of the form and the data submitted by the user goes to a server that's how the frontend backend communicates in the way.

The second thing is a method and there are different methods like get, post, and delete depending on the need you can use them.

Table

HTML tables are used to display data in rows and columns.


<table>
    <thead>
      <tr>
        <th>Student</th>
        <th>Subject</th>
        <th>Grade</th>
      </tr>
    </thead>
<tbody>
      <tr>
        <td>John Doe</td>
        <td>Math</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>English</td>
        <td>B</td>
      </tr>
</table>

The table will show something like this.

Cool, right!
This is enough HTML knowledge you need as a beginner but this is not complete HTML. You can explore and learn more about it but this important HTML stuff you know.

I appreciate it if someone finds something wrong (Code, typos, grammar mistakes) in the article do share it in the comment will correct it.

Support to my Youtube Channel Here👇

Technical Writer Interview Experience - Devtron

Ganesh Patil — Sun, 28 Jan 2024 18:25:26 +0000

Hey folks, I hope you all doing amazing. This article is not about any technical stuff like JavaScript, Python, etc. This article focuses on my experience for the Technical writer position applied at @devtron_inc company.

How It Started ✨

It all started with a Twitter post containing information about hiring a tech writer role at Devtron. I started searching about what is Devtron and what are requirements of the role are.
Then after doing all my research, I found that Devtron is a great opportunity for me to start with because Devtron is a tool or platform that helps you to set up and monitor all devops things.

Like CI/CD pipeline, dockerization, K8s, etc.
Want to explore Devtron? Here's the platform link.

Interview Process 🎯

There are a total of four rounds there.

Round 1 - Telephonic Interview Call ✅

In this round, the HR manager will connect to you over the call to make sure you're good with communication and ask you about your previous work, introduction, roles, and responsibilities to work, and other introductory questions.

Round 2 - Writing Assessment ✅

In this round, you have to write and solve MCQs. This round consists of 45 grammar questions and correcting the paragraph sequence(Part 1) and (Second part)you have to write on two topics in 200 words each with 30 mins (15 mins each topic).

Round 3

After clearing both rounds there will be a technical round. A senior tech writer will be there to test your technical skills. This interview is 45 minutes long. The interviewer will ask you about

Version Control System
Why we need DevOps
DevOps tools if you know
Small task (not writing)
ABout the company (Make sure you have done all your research)
WHat you know about products

These all are listed questions that the interviewer asked me while interviewing. Also, make sure you know the role requirements, research the Product, and your ideas to solve the problem.

Round 4

This interview is the final with the founder of the company. They will ask you why Devtron, Goals, and personality-oriented questions as well as salary negotiations also done in this round.

Result

I reached round number 3 (Technical Round) and was not selected for the role.

Advise

First listen to the question carefully then answer.
Aware of trends & tools of the market.
Must Do company research.
Practice some Docker, VCS, and a bit about the product.

You can apply for the role from here.
Devtron career

Support my Youtube Channel👇

Tap into Global Markets: 5 Open-Source Tools for Localization in 2024

Ganesh Patil — Fri, 12 Jan 2024 07:26:51 +0000

The world of software development is rapidly growing, and reaching a global audience can be a challenge. Whether you're selling products or offering services, ensuring the best experience for users is crucial. Localization becomes a key ally in connecting users seamlessly with your software.

What is Localization?

Localization involves translating content from one language to another. The primary goal is to make an app multilingual. Although localization can be challenging, advancements in technology have simplified the process.

Localization is about adapting your product or service to different languages and cultures to make it more accessible and appealing to a wider audience. Users prefer content in their local language, and implementing this feature through localization is now more accessible than ever.

Ultimately, localization fosters genuine connections with your global users.

Benefits of Localization

Product localization can benefit businesses in several ways.

Global Reach: Expand your software's accessibility to users worldwide.
Market Expansion: Enter new markets by adapting your software to local preferences.
Increased Adoption: Attract more users by removing language barriers.
Streamlined Communication: Facilitate clearer communication between users and your software.
Improved User Satisfaction: Make users happier by ensuring the software feels familiar and relevant.
Strengthen Product trust: Show your commitment to local markets and build stronger user relationships.
Better market insights: Gain valuable data and feedback from localized user interactions

Why Opensource Tools for Localization?

Open-source tools are community-oriented for better discussion on product innovation and improvements. Open-source tools focus on involving the community to discuss and make the product better. This helps with innovation and improvements.

Cost-Effective: Eliminate licensing fees and reduce overall localization expenses.
Flexibility: Customize tools to align with your workflows and language requirements.
Scalability: Manage localization efforts across various initiatives without limitations.
Community Support: Tap into a global network of developers, translators, and localization professionals for assistance and collaboration
Fostering Innovation: Open-source tools encourage the exploration of new localization approaches and technologies.

5 Open-source Localization Tools to Consider

1. Tolgee

Tolgee is an open-source solution for painless localization. Tolgee provides fast integration to web apps, auto-machine translation, in-context translating, automatic generation of screenshots, and many more features.

Are you curious to know more about Tolgee? Here's the GitHub repo to explore.

2. Pontoon

Pontoon is an open-source translation management system developed by the Mozilla Localization Community. Pontoon provides a web-based interface for software localization to the users. The translations are stored in the Version Control System (Git etc.) to ensure accuracy.

Pontoon provides a context suggestion feature to help efficient localization. Its community-oriented platform, allows people to contribute to their project for improvements.

Here's the GitHub repo to explore.

3. Weblate

Weblate is an open-source, web-based platform for localization that manages the entire process and it's used by over 2,000+ projects.

Weblate offers several features to make the localization process easier, faster, and collaborative. It supports various file formats like websites, strings, content, and code. Weblate provides descriptive analytics on localized projects that can help various areas to improve.

Here's the GitHub repo to explore.

4. i18n-Tasks

i18n-Tasks is an open-source solution for software localization. The problem with efficient translation is solved by the i18n-Tasks which offers more efficient translation. i18n-Tasks able to manage numerous translation files and simplify the process.

It supports several file formats for localization. i18n-Tasks produces high-quality translations for the user and is error-free, clear, and professional. The i18n-Tasks automates the repetitive tasks to work on other business strategies.

Here's the GitHub repo to explore.

5. Traduora

Traduora is an open-source translation management platform. Traduora supports modern automated localization workflow for translation. Traduora offers import and export translation features, auto-translation of the project, and updates.

Traduora allows you to work with the team in a collaborative space once you set up your project. It controls and customizes the entire localization process from API access to workflow.

Here's the GitHub repo to explore.

Wrap up

In a world going digital, language shouldn't be a barrier. These five open-source localization tools empower you to reach global audiences on a budget. In 2024, break down those barriers and deliver exceptional user experiences for everyone.

So, choose your open-source localization tool and start your journey!

FrontEnd in Depth

Ganesh Patil — Fri, 20 Oct 2023 05:31:35 +0000

Introduction

Hey Everyone, Welcome to the new article of the "DEEP DIVE SERIES" where we're focusing on going in-depth to learn a particular technology. The first article has already been published on the platform and here's the link to the article "Deep Dive Into Web Development" Visit and spread love to the community.

There are multiple videos and articles out there about the JavaScript roadmap. In this tutorial, we are exploring JS topics in detail. Web development is a vast field every week you'll see new frameworks coming out and you have to learn that but the fundamentals are the same which is JavaScript.

Basic Fundamentals

The key to a good software engineer or full-stack developer is to know the fundamentals well. The better clarity you have on the fundamentals the easier you solve the problem.

| Programming by definition is problem-solving.

Operators
String
Functions
Loops
Conditional Statements (if, else, nested if-else)
Arrays
Objects
Document Object Model

These are the fundamentals of JavaScript and there are lot to learn in the above-listed topics. Operators (Arithmetic, Comparison, Conditional, Assignment, Bitwise) etc. DOM(Changing HTML elements, Creating new elements, Action Listeners, Events), etc.

Advanced Topics

ES6+ Concepts (const, let, map, set, arrow func, Promises, Array Methods)
Closures
Event Loop
V8 Engine
Call Stack
Prototypes
JSON API format
Import Export Module

These are the most key topics you have to learn as a JavaScript Developer and the interviewer expects you to know these concepts. Learning is not enough proof is important to showcase your ability to work for that you have to build projects along with learning.

| Confidence comes from doing one thing again and again.

Data Structures & Objects

The essential concept of programming as a developer is Data Structures. The arrays, objects, maps, sets, etc are part of DSA in JavaScript.

| This section is for people who want to build a career in JavaScript.

Arrays
Objects
String
Destructing
Mutability
Functions
High Order Functions (Filter, Map, Reduce, Find)

OOPs in JavaScript

Object-oriented programming is a must for every developer whether you're a frontend or backend developer you should know the four pillars of OOP's. The JavaScript OOP's topics include:

Classes and new keyword
this keyword
Method and Properties
Polymorphism
Abstraction
Encapsulation
Inheritance
Getters, Setters

Conclusion

In this tutorial, we cover Basic JavaScript, Advanced topics, DSA, and OOP concepts. These are a complete guide for anyone who wants to explore JavaScript in depth. We are not done here JavaScript is vast you have to learn continuously.

| JavaScript Developers are lifetime students.

Want to connect, Let's chat on Twitter.

Recent Articles 👇

Support My YouTube work here 👇

Deep Dive Into Web Development

Ganesh Patil — Fri, 15 Sep 2023 11:22:28 +0000

Learn What Matters

Introduction

Hey Everyone, I starting with web development where we are going to deep dive into frontend development part one. The second part will focus on the backend area in the next article. We are focusing on concepts that actually matter.

Full stack development is the best path you can follow to get a job in tech because of the availability of content and ease to learn. JavaScript is everywhere from the front end to the back end you can't ignore JS. We are going to start with the basic foundations of web development.

HTML

Hyper-Text Markup Language (HTML) is not limited to the structuring web page. HTML5 is more powerful right now in terms of SEO. There are a lot of things introduced in HTML5 for better results.

Semantic HTML5 (SEO Focus Tags)

1. Navbar

2. Article

3. Strong (Bold)

4. em (Italic)

5. Mark

6. Header

7. Article

Open Graph Protocol
Web Components
Preloading & Prefetching
Forms & Data Validations

The above topics may be completely new for you all or maybe not but it's better to know what exists out there. Open Graph protocol is highly important for anyone who wants to learn web development in depth.

CSS

The latest CSS3 is a complete game changer. You can do everything with it Animations, Responsiveness & everything without any third-party library. Also, one thing you have to keep in mind CSS is a long journey you can't master it without practice so don't fall into a loop of learning everything.

Box Model
Layouts(FlexBox, Grid Layout, Float)
Units (%, px, em, rem, vh, wh)
Calc functions & CSS variables
Responsive Web Development (Media Queries)
Animations (Keyframe, Transform)
CSS preprocessor(SAAS, LESS, PostCSS)

CSS3 is incredible and the only thing you have to do is project building. Learn Advance HTML & CSS for free.

JavaScript

JavaScript is the key. Web development is really easy if you have a good command of JS. React, Next, TypeScript, Node, and all other advance frameworks and libraries build top on JavaScript. There is no perfect roadmap to master JS but required topic you can learn as follows :

Basic Fundamentals
ES6+ Syntax
Template Literals
Functions (Regular + Arrow)
Array Methods (map, sort, filter, forEach )
Shorthand object Property
Destructuring
Fetch API
Async/Await Syntax
Import and Export
Debugging
Webpack and Babel
Closures, Callbacks & Prototypes

React

React is a JavaScript library that provides a fast & Scalable approach for better results in web development. Components reusability, Hooks, and components are core features of react.

File & Folder Structure
Components
JSX (JavaScript XML)
Props & Hooks
State & Events
Conditional rendering
React Ecosystem

These are the required concepts you should know as a front-end developer.

As a Developer Never Stop Learning...!!

Git & GitHub

Version control systems are highly recommended to learn as a developer. Git (CLI System) & GitHub(Web Platform) are popular ones but both are different. The version control system helps you track your code and every change you made in your code.

There are multiple options are available such as Bitbucket & CMVC and many more. Learn Complete Version Control System for free.

Git Basics
Git Branching
Git on the Server
Distributed Git
GitHub
Git Tools

Testing Applications

Testing is required because as a developer you should be able to test & improve the performance of your applications. Jest is an open-source javascript testing framework. There are different platforms that help you to test your web apps but Jest is better to learn.

How to Start Testing Your React Apps Using the React Testing Library and Jest

What Next?

This is the complete guide on frontend development and the next article will be a guide on Backend Development. Everyone has their own path to learn web development but here I shared the common suitable way for everyone.

Stay tuned for the next article. 🎉

Learn with well-structured roadmaps.

Conclusion

Hey Everyone, I'm Ganesh Computer Science student from India. I shared everything about tech. Creating content to document my journey with articles, videos (Youtube), and short content. Connect with me on Twitter.

I create video content on youtube support here 👇