Forem: Himani Mehra

React notes

Himani Mehra — Fri, 18 Jul 2025 04:47:02 +0000

🧠 Emmet (Shortcuts for HTML/CSS)

What: A shortcut tool in editors like VS Code to write HTML/CSS faster.
Why: Saves time by expanding short code into full HTML/CSS.
HTML Example:
ul>li*3
➜ Expands to:
CSS Example:

m10

➜ Expands to:

margin: 10px;

Usage: Just type and press Tab.
Library vs Framework

Library: 👉 You call the code when needed (You decide when and where to use it.) 👉 You are in control. (e.g., React, Lodash)

Framework:
👉 Framework calls your code.
👉 It controls the flow. (It tells when to run your code — you just “plug in” your logic.)
(e.g., Angular, Next.js)
✅ Why React is a Library?

React only handles the UI (view).
You decide how the rest of the app works.
It doesn’t force structure or tools.

🧩 Tools You Choose in React:

Routing: react-router-dom
State: useState, Redux, Zustand, Recoil
Data Fetching: fetch, axios, React Query, SWR
Forms: Formik, React Hook Form
Styling: CSS, SCSS, Tailwind, styled-components
Testing: Jest, React Testing Library, Cypress
Build Tools: Vite, Webpack, CRA, Next.js

🎯 Summary: React is flexible — it’s a UI library, not a full framework.

🧠 So… is Vue a library or a framework?
➡️ Vue 2: Mostly considered a library (like React) — focuses on the view layer.
➡️ Vue 3 with ecosystem (Vuex, Vue Router, CLI): Becomes a framework.
React Vue 2 — library ; Vue 3 + Tools Framework-ish ; Angular — Full Framework

🧠 How does the browser know about document, createElement, etc.?
These come from Browser APIs, not from JavaScript itself.

🔧 How it works:

The browser has a JavaScript engine (like Chrome’s V8).
The browser provides built-in objects like: — window — document — console — localStorage — fetch, etc.
These are called Web APIs — part of the browser environment, not core JavaScript.

📌 Example:

const div = document.createElement(“div”);

document comes from the DOM API.
It’s not part of core JS — it’s provided by the browser when JS runs in the browser.

⚠️ Note:
If you run JavaScript outside the browser (like in Node.js),
→ You won’t get document or window — because there’s no DOM.

✅ In short:
JS runs inside the browser’s environment,
and the browser gives extra objects (like document) via Browser APIs.

We can inject react library with a bare minimum thing

What is CDN?

🧠 What is a CDN?

CDN = Content Delivery Network

It’s a network of distributed servers that deliver files (JS, CSS, images) from the nearest location to the user — making websites faster and more reliable.

🌍 Real-world example:

When you visit a site using a CDN:

If you’re in India, the content may load from a server in Mumbai
If you’re in the US, it loads from a New York or LA server
This minimizes latency and speeds up loading.

📦 How does it relate to React?

React can be included via CDN links instead of installing via npm.

Example:

<script src=”https://unpkg.com/react@18/umd/react.development.js"></script>
<script src=”https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

🧠 Real-life example of using a CDN:

Let’s say you want to use a **carousel/slider** in your web app.

Instead of downloading the whole library,
you can just include its **CDN link** in your HTML:

html
<! — Slick Carousel CSS →

<! — Slick Carousel JS →

🚀 Why use CDN links?

Quick setup — no build tools needed
Great for testing or small apps
No need to install Node.js or npm
⚠️ Not ideal for large/production apps → Use bundlers like Vite or Webpack for better control.

A CDN serves files faster from nearby servers.

React’s CDN version lets you use React by just adding tags — no installation required.</p> <p>🧠 What is <code>crossorigin</code> in a <code><script></code> or <code><link></code> tag?<br> The <code>crossorigin</code> attribute tells the browser how to handle <strong>cross-origin requests</strong> — when you’re loading files from a <strong>different domain</strong> (like a CDN).</p> <p>— -</p> <p>🌍 Example:<br> </p> <div class="highlight"><pre class="highlight html"><code><span class="nt"><script </span><span class="na">src=</span><span class="s">”https://unpkg.com/react@18/umd/react.development.js"</span> <span class="na">crossorigin</span> <span class="nt">></script></span> 🧠 What does *“different domain”* mean in `crossorigin`? It means the file (like a script or image) is **NOT hosted on your website**, but coming from **another server**. — - 🌐 Example: You made a website: 👉 `https://myportfolio.com` Now, you add this: </code></pre></div> <p><br> html</p> <script src=”https://unpkg.com/react@18/umd/react.development.js" crossorigin>

📦 That script is from https://unpkg.com — a different domain.

So: myportfolio.com ≠ unpkg.com → cross-origin request
Different domain” means the file is loaded from another website/serve

🧠 Shortest React program (with CDN):

<!DOCTYPE html>
<html>
<head>
<script src=”https://unpkg.com/react@18/umd/react.development.js"></script>
<script src=”https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
<div id=”root”></div>
</body>
</html>|
✅ This runs without any build tools (like npm, Vite, etc.)
✅ Just open in browser — you’ll see: Hello React

why? Because in console write React and it give React object (like windows object). Also React is a global object

React is just a peice of JS code written by meta developers.

Why 2 files : React and ReactDOM ; because react is not just limited to browsers. Thers is react native for mobile, react 3D as well, react also used in rendering engines.

So react@18 is core library of react
react-dom: the web version of react

Heading using React
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script
    crossorigin
    src="https://unpkg.com/react@18/umd/react.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  ></script>
</html>
<script>
  const heading = React.createElement("h1", {}, "Heading using react"); // it taskes 3 argument - 1.the tag 2.object 3.value
</script>
// h1 comes from the core library of react
now heading is created, now we need to put heading into the root element

  <script>
    const heading = React.createElement("h1", {}, "Heading using react");
    const root = ReactDOM.createRoot(document.getElementById("root")); //this tells react what is the root element inside my app. Also here we used ReactDOM because now we are manipulating DOM
    root.render(heading) // passing react element inside the root
  // So this render method takes react element and injects it into the DOM and modifies it
  </script>
🧠 Is `createElement` an API?

Yes — `React.createElement()` is a **React API**.

It’s a method provided by the React library to **create React elements** (UI building blocks) without using JSX.

— -

🔧 Syntax:

js
React.createElement(type, props, children)

if we do:
console.log(heading); // it is plain JS object

// so the react code that meta developers wrote is taking : "h1", {}, "Heading usi

How To Make Parallel API calls in VueJS Applications — Typescript Version

Himani Mehra — Sun, 17 Dec 2023 04:54:42 +0000

In web applications, all the data you show on the page should reside somewhere, for example, cache, database, storage account, etc. You need to fetch the data from the different sources and do some processing and then render the data on the UI. All the data can be accessed through APIs nowadays and most of the time the format would be in the JSON format.

Sometimes, making one API call is not enough you might need to get the data from different sources and these sources might be different APIs. We can make all the calls in parallel to decrease the latency of the application.

In this post, we will see how to make parallel API calls in Vue applications (written in typescript) using Fetch and Axios. You can do API calls with either of these.

Prerequisites
Example Project
API Endpoints
UI Implementation and Integration
Call The APIs with Fetch and Promise.all
Call The APIs with Axios and Promise.all
Demo
Summary
Conclusion

There are some prerequisites for this article. You need to have NodeJS installed on your laptop and know-how HTTP works. If you want to practice and run this on your laptop you need to have these on your machine.

Please go through these links if you are new to web development and make sure you understand how UI and API work together.

How To Develop and Build Vue.js App With NodeJS

How To Make API calls in Vue.JS Applications

Example Project
Here is the example project in which we are making three API calls and combining them and loading the table. Those three calls take different times to complete.

// clone the project
git clone…

How I created my own digital cursive writing notebook..

Himani Mehra — Wed, 22 Nov 2023 07:11:58 +0000

After successfully hosting a project (Paletto). I started searching for a new project idea. One day, my friend ordered a pen tablet for note-taking. We were both excited to use it and opened MSPaint and Google Keep.
We tried sketching, writing words, using technical jargon, and creating flowcharts, arrows, and other figures commonly used in note-making. It felt like being a toddlers, knowing what to write but struggling with how to write. Then searched for a site where we could practice alphabets, numbers, or sketches but only plain canvas was available. And from there emerged an idea for my next project i.e. Practice Digital Handwriting.

Now this is unlike my previous project (https://www.paletto.org/), where I made a blueprint and noted down what users were unsatisfied with competitors, here the only thing I searched was the user base/customer demographic that will use the product and found out they were one of these:-

Online teachers/educators
Students/professionals making notes (The very purpose, my friend bought the pen tablet)
School kids might be practicing cursive writing online as well

In this project, idea was clear to give users a canvas space for them to practice and improve their handwriting. This is where I went wrong in planning and organizing my project as I directly started coding without making a blueprint of what my landing page would be, would it be directly canvas or a welcome page. I have written about** Developing Forward Visionary** in my blog for Domain Hosting.
Moving on to the technical details, We will be going backward i.e. from the final page to the landing page, as I want to keep a real experience rather than showcasing to the reader that it is a smooth journey like we first go to landing page then click on this card then canvas is displayed "NO".
The landing page was developed at last😅.
Now we will go through the actual journey of development. I am going to follow a template because the final goal was to have a better, easy and smooth user experience:

What I coded
Found out the flaws during critical analysis of code and UI.
Working on the flaws and improving the code and UI.

So first I coded a plain canvas and hardcoded alphabets (A-Z) on it.

Flaws:

1.) I was able to write with the mouse but when I was trying to
write with a pen table (which was the center point of making
this project). The cursor was getting disappeared, in
technical terms, the event listeners was unable to recognize
this event.
2.) I hardcoded the alphabet, leaving users with no choice of
practicing anything but capital alphabets.
3.) The color of the alphabets in the canvas was too dark and I
was unable to see the letters I had traced.
4.) The default font was Sans-serif, but the font has to be
something related to free handwriting having free and loose
strokes.
5.) While making any mistake, there was no option to erase or
clear the screen and most importantly user might want to see
only his traced part and not the printed alphabets on canvas.

So to tackle the first and the prime issue I searched and found mousedown, mousemove, mouseup would not work for an external connected pen.
Extra event listners that needs to be added in the code were touchstart, touchmove, touchend:

canvas.addEventListener('mousedown', handleWritingStart);
canvas.addEventListener('mousemove', handleWritingInProgress);
canvas.addEventListener('mouseup', handleDrawingEnd);
canvas.addEventListener('mouseout', handleDrawingEnd);

canvas.addEventListener('touchstart', handleWritingStart);
canvas.addEventListener('touchmove', handleWritingInProgress);
canvas.addEventListener('touchend', handleDrawingEnd);
clearButton.addEventListener('click', handleClearButtonClick);

function getMosuePositionOnCanvas(event) {
  const clientX = event.clientX || event.touches[0].clientX;
  const clientY = event.clientY || event.touches[0].clientY;
  const { offsetLeft, offsetTop } = event.target;
  const canvasX = clientX - offsetLeft;
  const canvasY = clientY - offsetTop;
  return { x: canvasX, y: canvasY };
}

To tackle the second flaw, brainstorming was done around how many options should be provided, and decided to provide users with the following cards to practice:

1.) Uppercase alphabets (A-Z)
2.) Lowercase alphabets (a-z)
3.) Numbers (0–9)
4.) Special characters
5.) Giving an upload option so that the user can upload any image
and practice sketching.

Now to give these many options and have spaceous writing areas, I took inspiration from my previous project Paletto, to divide the screen in the left and right section. The leftsection is scrollable and has all the option cards whereas the right section is fully dedicated to writing practice:

<div class="container hidden" id="first-card-section">
        <div class="left-section" id="options">
            <div class="paper-section" onchange="startPractice()">
                <div class="option_paper" data-option="uppercase">ABC</div>
                <div class="option_paper" data-option="lowercase">abc</div>
                <div class="option_paper" data-option="numbers">123</div>
                <div class="option_paper" data-option="special">$*/</div>
                <div class="option_paper" data-option="upload">
                    <input type="file" id="imageInput" accept="image/*">Upload </div>
        </div>
        <div id="right-section" class="right-section">
            <div class="canvas-space">
                <canvas id="drawing-area" class="drawing-area" height="500" width="950"></canvas>
                <canvas id="overlay-canvas" class="drawing-area" height="500" width="950"></canvas>
            </div>
        </div>

JS code:-

function startPractice(selectedOption) {
  const canvas = document.getElementById("drawing-area");
  const ctx = canvas.getContext("2d");
  let content = "";
  if (selectedOption === "uppercase") {
    content = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  } else if (selectedOption === "lowercase") {
    content = "abcdefghijklmnopqrstuvwxyz";
  } else if (selectedOption === "numbers") {
    content = "0123456789";
  } else if (selectedOption === "special") {
    content = "!@#$%^&*(){}[]:;?/<>";
  } else if (selectedOption === "image") {
    const img = new Image();
    img.onload = function () {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    img.src = "./images/sample.png";
  }
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = '30px "classic notes", cursive';
  ctx.textBaseline = "middle";
  ctx.textAlign = "center";
  const numPerRow = 6;
  const charWidth = canvas.width / numPerRow;
  const charHeight = canvas.height / Math.ceil(content.length / numPerRow);
  for (let i = 0; i < content.length; i++) {
    const char = content[i];
    const col = i % numPerRow;
    const row = Math.floor(i / numPerRow);
    const x = col * charWidth + charWidth / 2;
    const y = row * charHeight + charHeight / 2;
    ctx.fillText(char, x, y);
  }
}

To tackle the third flaw , I reduced the opacity of the canvas area. But a major issue arose from it, the opacity of the tracing pen also reduced, and again both the opacity being the same I was unable to see and differentiate between writing and printed letters.
So from there emerged the idea of having two canvases (one over the other) rather than one.

The first canvas will have the printing stuff (letters, numbers etc) with low opacity and the second canvas will be placed exactly over the first one having opacity as 1( i.e the written stuff would be fully visible):

<div class="canvas-space">
      <canvas id="drawing-area" class="drawing-area" height="500" width="950"></canvas>
      <canvas id="overlay-canvas" class="drawing-area" height="500" width="950"></canvas>
  </div>

To tackle the Forth flaw ** of font-family, I googled what are the most commonly used freehand writing fonts and got "Classic Notes.ttf", "Classic Notes.ttf" and "Classic Notes.ttf". I downloaded all these files (can view the code and all the files in my **Github). Found Classic Notes.ttf to be the most suitable for free and loose strokes.

.dropdown-container {
    height: 50px;
    width: 150px;
    border-radius: 10px;
    background-color: #517dd4;
    color: white;
    font-size: 20px;
    font-family:"classic notes";
}
  @font-face {
    font-family:"Life-Lessons";
    src: url("Life-Lessons.ttf") format("truetype");
  }

To tackle the fifth flaw, it was easy to identify the basic tools required for a canvas as we have been using various graphics editors like MS Paint since the early stages of our school. I came to the conclusion to have 3 options:-

1.) Clear all- To clear the canvas and give a fresh writing area
to the user.
2.) Eye icon- To hide/show the printed stuff(letters, numbers,
etc) allowing users to see and compare their
handwriting with the printed ones.
3.) Color Gradient- As there is an image upload option, the user
may use different colors to sketch out the
uploaded image.

So these three items were kept in a widget design and after coding it , during the testing process found out that everytime for clearing or using any of the three icon I have to move my hand to a significant distance towards right in the pen tablet. Hence I decided the make the widget draggable/ movable throughout the screen for easy access and better user experience:

<div id="draggable-container">
            <div class="options-container">
                <button id="clear-button" class="clear-button" type="button"> <img class="eraser" src="./images/eraser.png" />
                </button>
                <button id="hide-canvas" class="hide-canvas" type="button"> <img class="eraser" src="./images/hide.png" />
                </button>
                <button id="color-button" class="color-button" type="button"> <img class="paint" src="./images/color.png" />
                    <input type="color" id="colorPicker" style="display: none;"></button>
            </div>
        </div>

CSS:-

#draggable-container {
    user-select: none;
    cursor: pointer;
    touch-action: none;
    position: absolute;
    top: 17%;
    left: 84%;
    transform: translate(0, 0);
    user-select: none;
    cursor: pointer;
    touch-action: none;
}

Images showing the feature for eye icon working:

traced some alphabets:-

used the eye icon (hide/show) feature to compare:-

var isDragging = false;
var offset = { x: 0, y: 0 };
var draggableContainer = document.getElementById("draggable-container");
draggableContainer.addEventListener("mousedown", (e) => {
  isDragging = true;
  offset.x = e.clientX - draggableContainer.getBoundingClientRect().left;
  offset.y = e.clientY - draggableContainer.getBoundingClientRect().top;
});
draggableContainer.addEventListener("mousemove", (e) => {
  if (isDragging) {
    draggableContainer.style.left = e.clientX - offset.x + "px";
    draggableContainer.style.top = e.clientY - offset.y + "px";
  }
});
document.addEventListener("mouseup", () => {
  isDragging = false;
});
draggableContainer.addEventListener("touchstart", (e) => {
  isDragging = true;
  offset.x = e.touches[0].clientX - draggableContainer.getBoundingClientRect().left;
  offset.y = e.touches[0].clientY - draggableContainer.getBoundingClientRect().top;
});
draggableContainer.addEventListener("touchmove", (e) => {
  if (isDragging) {
    e.preventDefault();
    draggableContainer.style.left = e.touches[0].clientX - offset.x + "px";
    draggableContainer.style.top = e.touches[0].clientY - offset.y + "px";
  }
});
document.addEventListener("touchend", () => {
  isDragging = false;
});

In the above JS code, notice "isDragging" is set to false by default and then added event listeners to make to movable throughout the screen.

After this much, I was happy to finish the project, but soon some questions popped up in my mind:

1.) What is the user wants to try one alphabet multiple times,
because its not possible to get a grip of anything in one
shot.
2.) I forgot to cover cursive writing templates for
"kindergartners" or "preschoolers."

Now this was a tricky situation, honestly I started feeling overwhelmed 😓.
Because again there were multiple tasks to be done like for individual aphabets , canvas only displaying 'A' let say 20 times, then 'B' till 'Z'. Then canvas only displaying 'a' let say 20 times, then 'b' till 'z'. Then canvas only displaying '0' let say 20 times, then '1' till '9' and so on for special characters. So I need to have 26 cards (uppercase alphabets) + 26 cards (lowercase alphabets) + 10 cards(numbers) + 20 cards(special characters : "! @ # $ % ^ & * ( ) { } [ ] : ; ? / < > ") and how can I forget the cursive writing template.

After sometime I took a breath and said lets breakdown the problem and pick the alphabets part, lets achive it first and applied a for loop to form a grid of 26 upper case alphabets:

JS code:-

for (let asciiCode = 65; asciiCode <= 90; asciiCode++)

HTML:-

<div class="image-grid" id="image-grid-1"></div>

CSS:-

.image-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }

      .card {
        flex: 0 0 calc(12.5% - 10px);
        margin: 7px;
        box-sizing: border-box;
        width: 95px;
        height: 120px;
        word-break: break-all;
      }

      .card img {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

Now, during this process, I figured out the UX for displaying all the cards and that was to have another grid and yes that was the landing page of my project (which initially I talked about that was developed at last😅).

So now the flow is: on landing page of the project, user will see a grid like:

Then on-click on any card, we will get the second grid (will show some):

uppercase grid:-

special characters grid:-

cursive writing template grid:-

Now on click on any card say from second card (lowercase) of the landing page , you selected letter 'b' to practice. So in the canvas it will be displayed like:

HTML:-

<div class="card-grid">
        <div class="card" data-option="uppercase" id="uppercase-card">ABC</div>
        <div class="card" data-option="lowercase" id="lowercase-card">abc</div>
        <div class="card" data-option="numbers" id="numbers-card">123</div>
        <div class="card" data-option="special" id="special-card">$*/</div>
        <div class="card" data-option="upload">Upload</div>
        <div class="card gap-class" data-option="image" id="image-card-1"> Cursive Writing</div>
    </div>
    <div class="image-grid" id="image-grid-1"></div>

    <div class="second-card-grid" onclick="showSubHeading()">

    </div>
    <div class="sub-headings" id="subheadingEl">
        <span class="uppercase_second_card common" onclick="redirectToUppercaseCards()">A-Z</span>
        <span class="lowercase_second_card common" onclick="redirectToLowercaseCards()">a-z</span>
        <span class="numbers_second_card common" onclick="redirectToSpecialcaseCards()">0-9</span>
    </div>

JS:-

// JS code for uppercase , similarly others were achived
document.getElementById('uppercase-card').addEventListener('click', displayUppercaseCharacters);

function displayUppercaseCharacters() {
  const secondCardGrid = document.querySelector('.second-card-grid');
  const container = document.querySelector('#first-card-section');
  const cardGrid = document.querySelector('.card-grid');
  let canvas = document.getElementById('drawing-area');
  let ctx = canvas.getContext('2d');
  secondCardGrid.innerHTML = '';

  for (let asciiCode = 65; asciiCode <= 90; asciiCode++) {
    const char = String.fromCharCode(asciiCode);
    const card = document.createElement('div');
    card.classList.add('card');
    card.textContent = char;
    card.addEventListener('click', function () {
      container.classList.remove('hidden');
      cardGrid.style.display = 'none';
      secondCardGrid.style.display = 'none';
      const lettersPerRow = 7;
      const letterSize = 28;
      const canvasWidth = canvas.width;
      const canvasHeight = canvas.height;
      const columnSpacing = canvasWidth / lettersPerRow;
      const rowSpacing = canvasHeight / Math.ceil(26 / lettersPerRow);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (let j = 0; j < 26; j++) {
        const row = Math.floor(j / lettersPerRow);
        const col = j % lettersPerRow;
        const x = col * columnSpacing + (columnSpacing - letterSize) / 2;
        const y = row * rowSpacing + (rowSpacing - letterSize) / 2;
        ctx.font = `40px "classic notes", cursive`;
        ctx.fillText(char, x, y);
      }
    });
    secondCardGrid.appendChild(card);
  }
}

Similarly for all items (Refer my Github to see the logic). And that's how I achieved a comprehensive and detailed flow. Most importantly, now it was organized. Now one more thing, say a user selects wrong card my mistake and want to choose another one so to achieve this functionality I kept some options on the top of the canvas :

HTML:-

<div class="sub-headings" id="subheadingEl">
        <span class="uppercase_second_card common" onclick="redirectToUppercaseCards()">A-Z</span>
        <span class="lowercase_second_card common" onclick="redirectToLowercaseCards()">a-z</span>
        <span class="numbers_second_card common" onclick="redirectToSpecialcaseCards()">0-9</span>
    </div>

JS:-

function redirectToUppercaseCards() {
  const container = document.querySelector('#first-card-section');
  container.style.display = 'none';
  const secondCardGrid = document.querySelector('.second-card-grid');
  secondCardGrid.style.display = 'block'
}

function redirectToLowercaseCards() {
  const container = document.querySelector('#first-card-section');
  container.style.display = 'none';
  const secondCardGrid = document.querySelector('.second-card-grid');
  secondCardGrid.style.display = 'block'
}

function redirectToSpecialcaseCards() {
  const container = document.querySelector('#first-card-section');
  container.style.display = 'none';
  const secondCardGrid = document.querySelector('.second-card-grid');
  secondCardGrid.style.display = 'block'
}

To see the github process of pushing the code, coding practices such as constantly pushing the code refer my article on Paletto and to learn domain hosting (host the project live) refer the article on Domain Hosting.

Some learnings:

Initially when the project was started, I was not aware of the fact that it can expand to this extent, hence made it in simple JS, HTML,CSS.
Later when it expanded , realized that it would have been easier if a framework is used like Vue.js, react etc as it has a concept of different components. So the three pages (first grid , second grid , canvas area) were three different components (say three different vue files) , and on back button we need to just hide/show the components.

Conclusion

:
Concluding this journey, an idea originated from the inability to write and affinity to improve, finding a tool for it , and when not getting a complete package to practice, developed one not only for myself but for a larger user base. There were some hiccups, and obstcales during the project development, some later realization to use generic code and frameworks, but its fine these learning will be helpful in making the next project easier to develope, organised, and successful.

I have improved my writing a lot and have started making online notes.What about you?😄

Building Beyond the Web: Crafting Chrome Extension 'Screenshot Pro'

Himani Mehra — Wed, 22 Nov 2023 07:11:49 +0000

After making some major projects (Paletto , Practice-digital-handwriting, etc), hosted live on my website. whose main purpose of these projects was to encourage as many people as possible to use it and derive maximum benefits from it. What could be a more effective means to reach the public than a Chrome extension ?

We all use Chrome extensions for various purposes, I personally use many of them to ease out my work. The idea for full page screenshot popped up due to the fact that during my previous project development, for UI/UX review, I was constantly referring some friends (coders and non-coders)to give feedback, so that I have a holistic approach of user perspective. For that, we constantly share the screenshots and at times need to send screenshots of a single page in two parts(upper and bottom section) which at some point started creating inconvenience (hundreds of such screenshots have been shared so far). So from there aroused the idea of having my own Chrome extension that takes full page screenshots 😇 and I translated my ideas into a coding language and created an extension: Screenshot Pro.

But before Screenshot Pro, I need to have knowledge about :

1.) How Chrome extension code is written, and what are the
practices we need to follow?
2.) What is the difference between a normal project code and
Chrome extension code? Is there a certain protocol we need to
follow?
3.) How to publish Chrome extension?
4.) Okay if published, what is the featured tag, and how to apply
for feature tag?

So started my journey of searching going through different sites , best would be to go through google documentation, going through the comment sections of the competitors and what the users were unsatisfied with. I came to the following conclusion:

1.) Less is more: I searched for competitors and while going through the comment section one thing common was too complicated. Exactly for a full page screenshot why to give too many functionality? So my extension simply captures the screenshot till the end of the page and downloads .png file as: screenshot.png.

2.) The project for the Chrome extension needs to have the
following files:-
1.) manifest.json:The manifest.json file is essential for
Chrome extensions as it contains crucial configuration
details, such as extension metadata, permissions, scripts,
icons, and more. It provides the necessary information for
the proper integration and functioning of the extension
within the Chrome browser.
2.) background.js: This file is a script used in Chrome
extensions to run tasks in the background, separate from
the user interface. It is specified in the manifest.json
file and is crucial for handling background processes,
event listeners, and maintaining extension state.
3.) content.js: This file is used to inject scripts into web
pages. It is specified in the manifest.json file and serves
as a content script, allowing the extension to interact
with and modify the content of web pages. This file is
essential for implementing features that require
manipulation or enhancement of the webpage's DOM (Document
Object Model) and enables seamless integration of the
extension's functionality with the content of visited web
pages.
4.) popup.js and popup.html : In a Chrome extension,
popup.js and popup.html typically work together to create
the popup interface that appears when a user clicks on the
extension icon in the browser's toolbar.
5.) Other JS files : This is very important to note that
if we require any external js file , we cannot simply embed
it putting script . But the whole file needs to be
included (download the file in the project section) in the
project. It is one of the major differences between v2 and v3
update of chrome extension (Read about it).

So let's dive deep down into the technical details:-
manifest.json file:-

{
  "name": "Screenshot Pro : Full page screenshot",
  "description": "Complete Page Screenshot",
  "version": "2.0.0",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_popup": "popup.html",
    "default_title": "SnapScreen",
    "default_icon": {
      "16": "images/icon48.png",
      "48": "images/icon16.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "https://*/*",
    "http://*/*"
  ]
}

-name: "Screenshot Pro : Full page screenshot"

description: "Complete Page Screenshot"
version: "2.0.0" (initially it was 1.0.0)
manifest_version: 3
icons: Icon images for different sizes (16x16, 48x48, 128x128 pixels).
action: Defines the default popup, title, and icon for the extension's browser action.
default_popup: "popup.html" - the HTML file for the extension popup.
default_title: "SnapScreen" - default title for the extension.
default_icon: Icon images for different sizes used in the browser action.
background: Specifies the service worker script "background.js" for background tasks.
permissions: Requests permission for the "scripting" API.
host_permissions: Specifies permissions for accessing content on "https://" and "http://" URLs.

Note: The three images with sizes 16x16, 48x48, and 128x128 pixels are specified in the default_icon property of the manifest.json file to provide icons for different contexts within the Chrome browser, such as the toolbar, extension management page, and the Chrome Web Store.

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'captureScreenshot') {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          let activeTab = tabs[0];
          chrome.scripting.executeScript({
              target: { tabId: activeTab.id },
              files: ['html2canvas.js']
          }, () => {
              chrome.scripting.executeScript({
                  target: { tabId: activeTab.id },
                  files: ['content.js']
              });
          });
      });
  }
});

Above code sets up a listener in a Chrome extension. When a message with the action 'captureScreenshot' is received, it queries the active tab, injects two scripts ('html2canvas.js' and 'content.js') into the tab, triggering a process, possibly related to capturing a screenshot. Similary you can go through other files such as popup.js and popup.html in my Github, it contains the readme.md file as well for detailed information. Have explained the major and important files above.

Once the extension is developed and tested, next milestone is to sucessfully publish it. I followed the below steps and the we will talk about the mistakes I made and learnings:

Step I: Go to Publish in the Chrome Web Store from here.
Step II: Follow the step very clearly defined there:

Step III: Use this image resizer: ImageResizer, very useful while resizing
the promo icons, marquee promo title, screenshots etc.

Once everything is done and zip file is uploaded and you click on "Publish", there will a popup saying "It might take some time to review the code and publish, you will be notified". After three days or so I got a mail that my request has been rejected and when I got into details, it was because I asked for extra permissions from google:

"permissions": [
    "scripting",
    "storage",
    "activeTab"
  ]

where as only first one was needed😅. I removed extra permissions and published again and after few days got a mail: Congrats! your extension has successfully been published:

Mistakes and learnings:

Extension name were not appealing : Initially named as 'Snapscreen ', extension was published but still there was something missing that is the on searching my extension it was not coming anywhere on top (ofcourse it was newly published having 0 users or ratings). But still detaching myself from the developer mindset having fancy names, thought from the perspective of the normal user. For eg. if anyone wants to capture a screenshot, what he or she will search of course the term "screenshot" needs to be there in the name. Hence I changed the name to Screenshot Pro.
Icons & screenshots were unattractive and lacked aesthetic appeal: My images either for icons or screenshots were not relatable to the topic and had pixelation issues, causing a lack of clarity and visible breaks. Hence, instead of just uploading my icons and images, I created them using HTML and CSS and then uploaded them. After the updates were done in naming and images, I applied again for version: 2.0.0 and got successfully published within a day.
Featured badge: Apply for the feature badge ASAP, becasue firstly once you apply it takes a lot of time to get the badge and secondly it is important as it makes your extension more authentic and free from any malware:-

Permissions : Google reviewers are very strict about the permissions you seek for your extension, the very reason my application got rejected for the first time I applied.
While testing noticed that for some websites extension is capturing successfully and for some, it is not (very rare). Thought it would be a coding issue. I opened the console and in the network tab noticed CORS error 302 permission denied. Then realized some website due to security purposes have taken up precautionary measures by denying the access.

Taking screenshot successfully (you can cross verify from this link and the image below):

In the below image notice instead of images, blank white boxes are there, It is due to CORS (see the image and very by this link):-

Conclusion:

I embarked on creating the "Screenshot Pro" Chrome extension to simplify full-page screenshots. My journey involved understanding Chrome extension coding, prioritizing simplicity, and learning from mistakes. I realized the importance of appealing names, attractive icons, and clear images, whole JS files need to be included in V3 version . Key files like manifest.json, background.js, and content.js played crucial roles. Applying for the featured badge enhanced authenticity. Despite challenges like permission rejections, the process taught valuable lessons. It's not only the coding you learn but the whole process of what was done (code and images without review) , what could have been avoided (extra permissions), and what more needs to be done(naming and creating images using HTML,CSS, applying for feature badge).

You can access the code from my Github. Try using Screenshot Pro😀

Paletto: Turning Job Search Frustrations into a Colorful Success

Himani Mehra — Wed, 22 Nov 2023 07:10:03 +0000

During my resume-building process for the job hunt, I created five projects:-

But a common mistake that I made while working on all these projects was to just go to YouTube and Google and take references (typical college mindset). I was in a hurry to add as many projects as possible (to compensate for my low industry work experience, about 1.5 years). Soon I realized that my resume was not shortlisted by any company. Frustrated by receiving rejection emails daily, stating, "Unfortunately, we are proceeding ahead with other candidates" I googled and discovered that it's not the quantity but the quality that matters. Projects may not necessarily be top-notch and something no one has ever made. When there are nearly 27 million developers worldwide it's not possible. But the right mindset would be: Not to copy/paste, but rather pick an idea from scratch, work upon it, and develop a different spectrum of that idea. Search for the competitors. Go to the comments section(if there is any )and filter out the points people are unsatisfied with. Then start a project around that idea. Also having projects that are accessible to others on a live website, allows users to interact with them.

One such project developed is Paletto.

Desktop view

mobile view

How I built the project based on my idea, making adjustments along the way by removing, changing, and adding elements as needed during the ongoing development?

Initially, there was a static image, and I was working on fetching the colors correctly but soon I realized that this project will be hosted soon and open for the users to play and interact with it. So from these images, the idea of upload for Desktop and upload and camera for Mobile mode:-

<input type="file" id="user-image-input" accept="image/jpeg, image/png">
<img class="upload-icon" id="upload-user-image" src="./images/cloud-upload.png">
      <div class="left-header" id="header"></div>
      <div id="uploaded-image-container" class="image-container">
        <img id="user-image" class="styled-image">
        <button id="do-user-image" class="do-it-button" style="display: none;">See color palette</button>
      </div>

Now again a conflict was there: If an image has many colors where to keep the upload button so as to avoid the user's effort of scrolling again and again to the top for multiple uploads? Hence the solution was to separate out upload section and canvas display section. I divided them into left-column and right-column:

<div class="container">
    <div class="left-column">
    </div>
    <div class="right-column">
      </div>
    </div>

Moving on, the idea was to keep this color palette as the color card we use for painting out homes as it will be easy for developers as well as the common public to relate (Hence, I avoided using deep technical UX/UI that would be difficult for the user).

Secondly how and what information to display along with color?
Initially, only the color was displayed (without the bottom part showing color codes), and the hex code appeared on hover, which could be copied by clicking on the color card. Then, I realized that users might need the RGB code or HSL code. I attempted to include all three codes on the color card, but it made the design look cluttered. The only solution was to separate the codes from the color. For UI/UX inspiration, I searched on Dribbble (a nice website for web design) and referred to examples. Afterward, I used Figma to ensure precision in color height, width, font adjustments, and other design elements.

Finally added the color codes at the bottom of the respective color. Now my color card = color + color codes. So the flow is to copy any color the user need to click on the code, that is it

function outputColors(colors) {
    var output = document.getElementById('output');
    var colors_list = document.createElement('ul');
    colors_list.id = 'colors';
    for (var c in colors) {
        var color = colors[c];
        var colorBox = document.createElement('li');
        var upperColorBox = document.createElement('div');
        upperColorBox.className = 'color-box';
        upperColorBox.style.backgroundColor = color;
        upperColorBox.dataset.hexCode = color;
        var hexCode = document.createElement('div');
        hexCode.className = 'hex-code';
        hexCode.textContent = color;
        hexCode.addEventListener('click', function () {
            var code = this.textContent;
            copyToClipboard(code);
            var codeBox = this;
            codeBox.textContent = 'Copied!';
            setTimeout(function () {
                codeBox.textContent = code;
            }, 1000);
        });
        var rgbCode = document.createElement('div');
        rgbCode.className = 'code';
        rgbCode.textContent = getRGBCode(color);
        rgbCode.addEventListener('click', function () {
            var code = this.textContent;
            copyToClipboard(code);
            var codeBox = this;
            codeBox.textContent = 'Copied!';
            setTimeout(function () {
                codeBox.textContent = code;
            }, 1000);
        });
        var hslCode = document.createElement('div');
        hslCode.className = 'code';
        hslCode.textContent = getHSLCode(color);
        hslCode.addEventListener('click', function () {
            var code = this.textContent;
            copyToClipboard(code);
            var codeBox = this;
            codeBox.textContent = 'Copied!';
            setTimeout(function () {
                codeBox.textContent = code;
            }, 1000);
        });
        var hexCode = document.createElement('div');
        hexCode.className = 'code';
        hexCode.textContent = color;
        hexCode.addEventListener('click', function () {
            var code = this.textContent;
            copyToClipboard(code);
            var codeBox = this;
            codeBox.textContent = 'Copied!';
            setTimeout(function () {
                codeBox.textContent = code;
            }, 1000);
        });
        colorBox.appendChild(upperColorBox);
        colorBox.appendChild(hexCode);
        colorBox.appendChild(rgbCode);
        colorBox.appendChild(hslCode);
        colors_list.appendChild(colorBox);
    }
    output.innerHTML = "<h2 style='text-align: center;'></h2>";
    output.appendChild(colors_list);
}

Second color's RGB code is copied on-click:-

Coming back to the left section again.
Users will not only upload the image and copy codes. There was something missing. Yes, and that was proving them with some other functionality. How I started thinking about what all users can do with this color palette??

1.) Users may need more shades of a particular color.
For instance, if a user wants a shade similar to a specific red
color or has a photo with a beautiful red shade but wants
something slightly lighter or darker, I incorporated Google and
Cooler palettes. Users can simply visit the provided links,
click on the shade they desire, and easily implement it.
(Google Palette🔗Coolors Palette🔗)

2.) Users may need to click on the screenshot of the color palette
from the specific photo or the image they have uploaded. (
*Screenshot⭳ *)

3.) Users may want to download the color palette for future
reference, not just the screenshot including the image but
specifically the color palette. ( SVG⭳ and ASE⭳ ).

<div class="button-container">
        <span class="clickable-text" id="download-button">SVG⭳</span>
        <span class="clickable-text" id="download-ase-button">ASE⭳</span>
        <span class="clickable-text" id="take-screenshot">Screenshot⭳</span>
        <span class="clickable-text" id="google-palette-button">Google Palette🔗</span>
        <span class="clickable-text" id="generate-coolors-button">Coolors Palette🔗</span></div>

Now during the ongoing project development, I recognized the significance of incorporating sample images. This proves especially useful for users who may not have an image readily available or prefer to quickly assess the website's functionality without uploading their own. To facilitate this, I included four sample images:-

<div class="last-sec">
        <div class="second-sub">
          <div class="need-sample">No image?</div>
          <div class="need-sample-2">Try these :</div>
        </div>
        <div class="sample-image" id="sample-image">
          <img class="sample-img" id="imageId-1" src="./images/images.jpg">
          <img class="sample-img" id="imageId-2" src="./images/samplee.webp">
          <img class="sample-img" id="imageId-3" src="./images/download.jpg">
          <img class="sample-img" id="imageId-4" src="./images/room.jpg">
        </div>
      </div>

Js:-

const sampleImages = document.querySelectorAll('.sample-img');
const targetImage = document.getElementById('coke');

sampleImages.forEach(sampleImg => {
    sampleImg.addEventListener('click', function () {
        targetImage.src = this.src;
        console.log(targetImage.src);
        const imageId = this.id;
        do_it(imageId);
    });
});

Similarly was tracking, testing, and developing the mobile mode as well (mostly CSS and some JS functions).
Note: Always remember to frequently push the code to GitHub (small but useful advice).

After my project was ready, I followed these steps (You can also my blog on: "Domain hosting" if you want to host this project live) :

Step I: Push the code to Github.
Step II: Go to settings ➝ pages
Step III: Select branch as "main" and click on save.

Select "main" branch:-

After a minute or so, There will be a message on top stating: Your website is live at dummywebsite.github.io. And the project is hosted, ready to use, and play.

Conclusion:

In building Paletto, I discovered that quality outweighs quantity. Initially, I replicated projects, but job rejections prompted me to seek uniqueness. So, I developed Paletto from scratch, considering users at every turn. I determined where to place buttons, drawing inspiration from home paint cards. Deciding which color codes to display took careful thought, and reviewing designs on Figma provided insights. Paletto isn't just about colors; it's a journey. Integrating useful features like downloads and sample images made it a practical, interactive tool. Taking it online was the finishing touch, transforming code into something accessible to everyone.

How I did my first opensource contribution and so can you?

Himani Mehra — Wed, 22 Nov 2023 07:02:17 +0000

It was 3 months since I left my job as a frontend developer and during the process of job hunt, A new fear crept into my head :

It's been a long time since I last had hands-on practice making changes in large company repositories, risking the loss of real industry experience.

2.Debugging code in a big repository with a substantial codebase and fixing it

The best option for overcoming this fear was either to get a job ASAP 😝 or opensource contribution till you get one (a job).
I started with the latter one. Went through many projects like Github, Apache, Gitlab, etc.

I decided to contribute to Gitlab as, it has very nice and detailed documentation and articles about the process of open source contribution, how to set up GDK (Gitlab Development Kit)in local, even about the commit messages, MR procedure, etc.

Areas where I faced issues:

I use Windows, but the local setup (cloning the repository and running the service in local) has to be done in Linux. So installed Linux OS as well, and cloned the repo but didn't work.

Solution 💡

GitLab has its own vscode. Hence every time I work on any issue assigned to me, I proceed with the following steps:
1.) login to Gitpod.
2.) Go to Developing GitLab with GDK on Gitpod (here). From here
you'll get the username and password (you can change it
later).
3.) Gitlab vscode will get open and in the terminal :

Some useful commands :

gdk start (to start gitlab developement kit)
gdk doctor (run this command if the service is not up even after gdk start )

Then I used to get some suggestions like :

bundle install (bundle file is a single, relocatable file that contains all the artifacts , needed to run your application)
bundle fund
Then we can access the service as https://local.host/3000/ Note: UI will not immediately reflect , It will take some time from 30 sec to 2 minutes and page will automatically refresh after every 5 seconds:-

After the local setup is done, I extensively focussed on searching, filtering, and grabbing the issues based on my tech stack.
Some of the tickets and their merge requests (MR) successfully deployed to production:-

VSA table: Change the default sort by to 'Duration time' : (Issue) (MR)
VSA table: Change the default sort by to 'Duration time' : (Issue) (MR)
VSA table: Change the default sort by to 'Duration time' : (Issue) (MR)
VSA table: Change the default sort by to 'Duration time' : (Issue) (MR)
VSA table: Change the default sort by to 'Duration time' : (Issue) (MR)

Some Learnings :

Gained confidence in my skills by actively making code changes in the company's codebase.
Experienced (SDE-2 / SDE-3) frontend developers as well as the UX folks were added as reviewers who used to review my code. Got to interact with them. All were very supportive and helpful, providing the implementation guidelines. And there used to be a thread of comments where we discussed till the assigned issue was crystal clear to me.
Faced the main challenge was with writing the test cases:-

Focus on the last pipeline failed: Test coverage was insufficient

Need to be very specific and stick to commit message guidelines as it is one of the reasons for the pipeline to fail apart from test cases.
Role of "prettier": Even if the code has no error (logical, syntactical or runtime). It will not allow to push the code. Reason being the formatting. Hence use npx prettier - - write fileName. It will do the required formatting in the respective file, the we can go ahead with the commit and push process.

Conclusion:

The question lingered: Is it worth it?

From setting up the service, reading articles, and navigating documents throughout the process, to handling my first ticket. Progressing not just in receiving the ticket, but also in debugging it in a large repository, identifying pages in the UI, solving the issue, and creating a Merge Request (MR) with recorded changes - comparing before and after. From writing test cases to ensuring a pipeline with all green ticks, to assigning a senior reviewer and interacting until the issue was crystal clear, leading to approval and merging of my MR into the master branch.
Moving from having one MR merged within 24 hours to having multiple MRs merged and achieving the status of a level 2 contributor in Gitlab. I must say, "Yes, it is worth it."

My Journey to Domain Hosting

Himani Mehra — Wed, 22 Nov 2023 07:01:41 +0000

During my resume-building process for the job hunt, I created five projects:-

Assuming that my resume was strong after completing numerous projects. However, A project doesn't necessarily have to be top-notch or something entirely novel, especially in a world where there are many developers in world. However, the right mindset would be: don't just copy and paste; instead, generate an idea from scratch, work on it, and develop various aspects of that idea. Look for competitors, explore the comments section (if available), and identify points that people are dissatisfied with. Then, initiate a project based on that refined idea.

After creating my first major project ready to live (Paletto), I bought a domain from GoDaddy: paletto.org. Now we will go through the actual journey of hosting my project and all the issues I faced, what alternatives I used:

Step I: Pushed my project on GitHub.

Step II: Go to GoDaddy, and click on the manage DNS button.

Step III: Then click on add new records:

Add new records: IPv4 , www , etc:-

As I mentioned earlier, I believe in sharing both successes and challenges. Unfortunately, the approach mentioned earlier didn't work out for me. It wasn't due to a lack of knowledge, but every time I attempted to add a record, I encountered either a connection timeout or a simple unable to add the record.

Alternative Used:

Searched and found out we can add records via _Cloudflare _as well.

Steps that were followed to successfully add records:

Step I: Login to Cloudflare _as well.
Step II: Click on _add a site button.

Step III: Enter the domain name (without any sub domain).

Step IV: Select a plan, for most applications free plan is fine. Now Cloudflare will scan the domain name for existing DNS records. After a few seconds, it will show all the existing records for my current name server.

Note: These (existing) records will not work for my website since it is located on a different hosting server, hence I deleted all. And even if any required record is deleted, it can be added at any time (Thats the whole point of Cloudflare).

Step V: We need to tell the registrar (GoDaddy in my case)to point to Cloudflare's nameserver, so copy first nameserver.

Then I went to my domain name registrar i.e GoDaddy , then to DNS settings , changed the first name server I copied from Cloudflare, similary done for the second nameserver. Yes that is it.

Important thing to note is unless the website is properly installed and configured to work in https uncheck the automatic https settings:-

Now the last thing to note is, while adding the records, use '@' (shortcut for domain root) and if you want subdomain then add the subdomain name instead of '@' :

So what job Cloudflare did for GoDaddy ?

When you buy a domain (like https://www.paletto.org/), you need a way for people's computers to find the correct place on the internet when they type that address. That's where DNS (Domain Name System) comes in - it's like a phonebook for the internet, translating human-friendly domain names into computer-readable IP addresses.
Now, GoDaddy is where you initially register your domain, and it usually helps manage your DNS settings. However, if you decide to use Cloudflare for your DNS, it means Cloudflare is taking over the job of managing the information that helps direct traffic to your website. So, when you can't add a record on GoDaddy, it's because Cloudflare is now in charge of handling those records instead. You'll need to go to your Cloudflare account to make any changes or additions to your DNS settings.

Step VI: It is the final step and the crucial one.

Go to Github 🠖 Go to the particular project you want to host(Paletto in my case) 🠖 settings 🠖 pages (on left sidebar) 🠖 scroll downto Custom Domain 🠖 add the domain name (www.paletto.org in my case) 🠖 uncheck the enforce https configurations and click on save. Good to go, now you can access your website by clicking on : your website is live at "yourwebsite.com". Carefully see each and every detail mentioned above in the image attached below:

Second Learning (say mistake):

I bought a very specific domain name (paletto.org). The reason I'm saying this is because soon I made two more projects which have no commonality in theme or for say their purpose (one such project is "Practice Digital Writing") So the learning is Develop Forward Visionary as now even my main website name is himanimehra.paletto.org 😅.

Conclusion:

My journey into domain hosting underscored the significance of quality over quantity in the job market. Guided by the principle that "What is seen is sold," I hosted my major project, Paletto, on a GoDaddy domain.

Encountering setbacks during my initial record addition attempt, I turned to Cloudflare as a seamless alternative for managing records. Lessons were learned, notably the importance of a versatile domain name. While paletto had a specific domain (paletto.org), subsequent projects prompted a more forward-thinking approach, resulting in a domain structure accommodating diverse projects, like himanimehra.paletto.org.

This journey not only involved overcoming technical challenges but also highlighted the vital roles of adaptability and foresight in the evolving landscape of domain hosting and project development.