Forem: Lenvin Gonsalves

Beyond Prompts: How Git Hooks Steer AI Coding Agents in Production

Lenvin Gonsalves — Sun, 05 Apr 2026 20:39:45 +0000

TLDR: At Fleek, both engineers and non-engineers build internal tools using AI coding agents. We found that instruction files alone aren't enough - the AI follows them most of the time, but not always. Git hooks gave us a deterministic enforcement layer on top. This post walks through how we designed them and why the error messages matter more than you think.

The Problem

We run an internal tools platform - a monorepo with 10+ sub-applications. The people building on it range from senior engineers to business team members who have never written code before and use Claude Code as their primary development tool.

In a traditional engineering team, you enforce standards through code reviews and tribal knowledge. An engineer sees a failing hook and thinks: "Ah right, I need to fix that." They have context. They know the codebase.

An AI agent has none of that. It doesn't know your conventions. And even if you spell everything out in an instruction file - it might still get it wrong.

Heuristic vs Deterministic

There are two ways to enforce rules in an AI-assisted codebase: you can tell the AI what to do (heuristic), or you can make it impossible to do the wrong thing (deterministic).

When you write a rule in CLAUDE.md like "use @fleekit/logger instead of console.log", you're giving the AI a strong suggestion. But it's heuristic. The AI will follow it most of the time - maybe 90%, maybe 95%. But in a complex enough codebase, with enough contributors, it will eventually skip it.

A pre-commit hook that scans staged files for console.log and blocks the commit is deterministic. It fires every time. It doesn't forget. It doesn't make exceptions. The AI's code simply cannot reach the repository without passing the check.

CLAUDE.md = "Here's how we do things" (guidelines)
Git hooks = "You literally cannot do it any other way" (enforcement)

You need both. The instruction file teaches the AI the right way. The hook catches it when it forgets.

Hook Errors Are Prompts

Here's something nobody talks about: the error message IS the prompt engineering.

When a hook blocks a commit, the AI reads the error output and uses it to fix the problem. That means the quality of your error message directly determines whether the AI self-corrects or spirals into wrong fixes.

Traditional hooks are designed for humans. They output something like:

Error: console.log not allowed

A human thinks: "Oh right, we use a custom logger." They bring their own context.

An AI sees that and has no idea what to do. It might remove the log entirely. It might replace it with process.stdout.write. It might ask the user for help.

Now look at how we designed our hook output:

╔══════════════════════════════════════════════════════════════╗
║                console.log DETECTED — commit blocked        ║
╚══════════════════════════════════════════════════════════════╝

Found console.* calls in app code:

  apps/large-buyer/fe/pages/index.tsx:42: console.log(data)

RULE: Use @fleekit/logger instead of console.* in app code.

  import { createLogger } from "@fleekit/logger";
  const log = createLogger("my-tool");
  log.info({ key: "value" }, "Message here");

Three things happen here:

States the rule - use @fleekit/logger
Shows exactly where the violation is - file, line number, content
Gives the replacement code - import, initialization, usage

The AI reads this error, understands the constraint, and fixes it correctly on the first retry. No human needed. The hook error became the prompt.

This changes how you design hooks. You're not writing error messages for engineers anymore. You're writing them for an AI that will parse the output, extract the rule, and apply the fix. Be explicit. Be complete. Show the solution, not just the problem.

Keeping Documentation Alive

Hooks can enforce more than just code quality - they can keep your AI's own context accurate.

Every app in our monorepo has a CLAUDE.md - a file that describes the tool's purpose, data model, business logic, and gotchas. This is what gives the AI context when it works on a tool.

The problem: documentation rots. In every codebase I've worked on, docs start strong and then drift. Code changes, but the docs don't update. Six months later, the docs are actively misleading.

We wrote a pre-commit hook that checks: if you changed code in an app, did you also update the app's CLAUDE.md?

If the CLAUDE.md doesn't exist at all, the commit is blocked:

╔══════════════════════════════════════════════════════════════╗
║              MISSING CLAUDE.md — commit blocked             ║
╚══════════════════════════════════════════════════════════════╝

The following app(s) have code changes but no CLAUDE.md:
  • apps/large-buyer/

Every app must have a CLAUDE.md describing its purpose,
data sources, business logic, and gotchas.

TO FIX: Create apps/large-buyer/CLAUDE.md before committing.

If it exists but wasn't updated alongside code changes, you get a warning:

⚠ CLAUDE.md not updated for:
  • apps/large-buyer/CLAUDE.md

Consider updating it if your changes affect the tool's behavior.

This creates a feedback loop:

AI reads CLAUDE.md to understand the tool
AI makes code changes
Hook asks: "Did you update the docs?"
AI updates CLAUDE.md
Next AI session reads the updated CLAUDE.md

Documentation stays alive because the system demands it at commit time. Not through discipline, not through code review reminders - through deterministic enforcement.

This is the highest-ROI hook we built. A few lines of bash, and every tool's context file stays accurate. It works for AI sessions. It works for human engineers. It works for the business team member who used Claude to add a button and now has to at least acknowledge that the tool's docs might need an update.

Why Not Use Claude Code's Built-in Hooks?

Claude Code has its own hooks - PreToolUse, PostToolUse, and others - that intercept the AI's actions in real-time. So why not use those?

Scope. Claude Code hooks see individual tool calls - this file is being edited, this command is being run. Git hooks see the changeset - the aggregate of everything that happened.

A Claude Code hook can't answer: "Did this branch touch multiple apps?" or "Did code change but documentation didn't?" Those questions require comparing all staged files against branch history. That's a git-level concern.

More importantly, git hooks apply to everyone - every engineer, every AI tool, every CI system. They're universal.

The right approach is to use both. Claude Code hooks for real-time guidance. Git hooks for deterministic enforcement on the output.

What We Learned

Error messages are prompts. The better your error output, the fewer retries the AI needs. State the rule, show the violation, provide the fix command.
Block, don't warn. We initially made some hooks advisory. The AI ignored every single warning. If it's important enough to check, block the commit.
Every hook needs a bypass. We use SKIP_{CHECK_NAME}=1 environment variables. Sometimes humans know better, and a hook shouldn't become an obstacle for someone who understands the tradeoff.
The documentation hook has the highest ROI. It costs almost nothing and keeps context files accurate for every future session - human or AI.

We run 9 hooks total across pre-commit, commit-msg, and pre-push. They enforce branch naming, prevent secret leaks, ensure one app per branch, validate commit message format, check repo structure, and more. Not all of them are interesting enough to write about - but together, they form a deterministic layer that makes AI contributions reliable at scale.

If your team is using AI coding agents, your git hooks are now part of your AI strategy. The instruction file teaches the AI your conventions. The hooks enforce them. Treat them accordingly.

Originally published at lenvingonsalves.com

Learn basic Web Components

Lenvin Gonsalves — Tue, 20 Apr 2021 09:05:17 +0000

Even though web components have been losing steam in recent days, they have a lot of advantages. One of them is writing framework-agnostic components, which is a boon provided how frequently frameworks lose their popularity in js land.

Many organizations have projects with front-ends using different frameworks, and by writing basic components like buttons, modals as web components, we can greatly increase code re-usability. Web components are not here to replace frameworks like React, Vue, and Angular, but are to be used along with frameworks

Using web components also allows encapsulating the styling to the component (Using the shadow DOM), which helps a lot in larger projects where we need to be careful about styles overriding (by duplicate class names). This functionality is provided by libraries like styled-components, but it's nice to see this natively supported.

In this tutorial, we will be creating two components, a user card and a modal. Using the Rick & Morty API, the web page will load the data and then insert the web component into the DOM. The same will be repeated as the user scrolls down.

Creating the User Cards

The Card will display two details about the character, its image & name, along with a button using which we will open the modal.

To create the web component, we will need to first create a template in markup.

<template>
    <style>
        /** Styles to be added **/
    </style>
    <!-- Mark up describing the component will go here -->
</template>

After the template is defined, we will now need to create a class that extends from either HTMLElement or HTMLUListElement, HTMLParagraphElement, etc. If we use the former, the component will be an autonomous custom element, inheriting the minimum properties required. If we use the latter classes, the component will be a customized in-built element, inheriting additional properties.

A web component that inherits from HTMLUListElement would have left & top margin like most lists have.

<!-- Autonomous custom element -->
<user-card>
</user-card>

<!-- customized in-built element -->
<div is='user-card'>
</div>

It is important to note that the way of using the custom elements will depend on what class is the custom element inheriting from (refer to the code-block above). In this article, we would define the element to inherit from HTMLElement.

class UserCard extends HTMLElement {

  constructor() {
    super();
  }

}

The above is the minimal amount of code required to declare a custom-element class, in order to make it available to the DOM, we need to define it in the CustomElementRegistry as follows.

window.customElements.define("user-card", UserCard);

That's it, we can now start using <user-card>, but currently there is nothing defined in the class, we will start by first defining the template (which we discussed earlier). Then define the constructor to do the follows -

When the custom element is added to the DOM, create a shadow DOM, which would be a child of the custom component.
Attach the node created from the template into the shadow DOM.

/** Defining the template **/
const template = document.createElement("template");
template.innerHTML = `
  <link rel="stylesheet" href="userCard/styles.css">
  <div class="user-card">
    <img />
    <div class="container">
      <h3></h3>
      <div class="info">
      </div>
      <button id="open-modal">Show Info</button>
    </div>
  </div>
`;

The markup defined above will help us create a card that looks like this -

/** Defining the constructor **/
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

In the constructor, we are using attachShadow to attach a shadow DOM to the current node, then to the shadow DOM, which is accessed using shadowRoot we will append a child, which is a clone of the template we defined earlier.

So far, the web component should be looking as follows

const template = document.createElement("template");
template.innerHTML = `
  <link rel="stylesheet" href="userCard/styles.css">
  <div class="user-card">
    <img />
    <div class="container">
      <h3></h3>
      <div class="info">
      </div>
      <button id="open-modal">Show Info</button>
    </div>
  </div>
`;

class UserCard extends HTMLElement {

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

}

window.customElements.define("user-card", UserCard);

The next step would be to define the life cycle, which should sound familiar if you have some React knowledge. For brevity, we will be focusing only on two methods

connectedCallback()
attributeChangedCallback()

ConnectedCallback()

This method is called when the custom element gets mounted on the DOM, this is when we should be defining event listeners, networks calls to fetch data, intervals & timeouts.

To clean up the intervals, timeouts when the custom element is unmounted, we would have to use the disconnectedCallback().

attributeChangedCallback()

This method is called when any attribute to the custom element changes (or an attribute is assigned). The method is only called when the attributes defined in the getter observedAttributes() change their value.

For the user-card component, these methods will be implemented as follows -

  static get observedAttributes() {
/** Even though we have other attributes, only defining key here
 as to reduce the number of times attributeChangedCallback is called **/
    return ["key"];
  }
  connectedCallback() {
/** Attaching an event-listener to the button so that the 
openModal() methods gets invoked in click, openModal will be 
defined later **/
    this.shadowRoot
      .querySelector("#open-modal")
      .addEventListener("click", () => this.openModal());
  }

  attributeChangedCallback(name, oldValue, newValue) {
/** Updating the DOM whenever the key attribute is updated,
 helps in avoiding unwanted DOM updates **/
    if (name === "key") {
      this.shadowRoot.querySelector("h3").innerText = this.getAttribute("name");
      this.shadowRoot.querySelector("img").src = this.getAttribute("avatar");
    }
  }

Creating the Modals

Creating the modal component is similar to creating the user-card component.

The code for the modal -

const modalTemplate = document.createElement('template');
modalTemplate.innerHTML = `
  <link rel="stylesheet" href="modal/styles.css">
  <div class="modal">
  <div class='modal-content'>
  <button id='close' class='close'>Close</button>
  <img></img>
  <h3></h3>
  <p></p>
  </div>
  </div>
`;

class Modal extends HTMLElement {

  static get observedAttributes() {
    return ['key'];
  }

  constructor() {
    super();
    this.showInfo = false;
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(modalTemplate.content.cloneNode(true));
  }

  connectedCallback() {
    this.shadowRoot.querySelector('#close').addEventListener('click', () => {this.remove()});
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if(name==='key'){
      this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
      this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');
      this.shadowRoot.querySelector('p').innerHTML = `
      Gender: ${this.getAttribute('gender')}
      <br/>
      Status: ${this.getAttribute('status')}
      <br/>
      Species: ${this.getAttribute('species')}
      `}
  }

}

window.customElements.define('user-modal', Modal);

To invoke the modal, we will need to define openModel in the user-card component. openModal will create the user-modal node and assign all the attributes the user-card had received to the modal, then attach it to the DOM.

  openModal() {
    const userModal = document.createElement("user-modal");
    userModal.setAttribute("name", this.getAttribute("name"));
    userModal.setAttribute("avatar", this.getAttribute("avatar"));
    userModal.setAttribute("status", this.getAttribute("status"));
    userModal.setAttribute("species", this.getAttribute("species"));
    userModal.setAttribute("gender", this.getAttribute("gender"));
    userModal.setAttribute("key", this.getAttribute("key"));
    document
      .getElementsByTagName("body")[0]
      .insertAdjacentElement("afterend", userModal);
  }

Joining all the parts together

The components have been placed in the following folder structure

In the index.html both the components are imported and a script to fetch the characters data from the Rick and Morty API is defined.

Once the data is fetched, for every character, a user-card node is created, attributes are assigned, and then inserted into the DOM as follows -

await fetch(`https://rickandmortyapi.com/api/character?page=${page}`)
        .then((_) => _.json())
        .then((_) => {
          _.results.forEach((user, index) => {
            max = _.info.pages;
            const nodeToBeInserted = document.createElement("user-card");
            nodeToBeInserted.setAttribute("name", user.name);
            nodeToBeInserted.setAttribute("avatar", user.image);
            nodeToBeInserted.setAttribute("status", user.status);
            nodeToBeInserted.setAttribute("species", user.species);
            nodeToBeInserted.setAttribute("gender", user.gender);
            nodeToBeInserted.setAttribute("key", user.id);
            document
              .getElementById("details")
              .insertAdjacentElement("beforeend", nodeToBeInserted);
          });
        });
      page++;
    };

An event listener to fetch more data when the user reaches the end of the page.

  window.addEventListener(
      "scroll",
      () => {
        const {
          scrollTop,
          scrollHeight,
          clientHeight
        } = document.documentElement;
        if (scrollTop + clientHeight >= scrollHeight - 5 && max >= page) {
          loadData();
        }
      },{ passive: true });

This is it! The end result is in the code sandbox below

Conculsion

I hope this article gave you a good glimpse of web components.

If you are interested in knowing more, please check out Web Components at MDN

Edit - As the pointed comment below, creating the Web Component can be made simpler -

Comment on Learn basic Web Components

Danny Engelman Apr 20 '21

One thing nearly everyone does is due to incorrect documentation:

constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

can be written as:

constructor() {
    super() // sets and returns 'this'
      .attachShadow({ mode: "open" })  //sets and return this.shadowRoot
      .append(template.content.cloneNode(true));
  }

Note the use of append and appendChild. In most examples appendChilds return value is never used. append can added multiple text-nodes or elements.

And the global template.innerHTML isn't necessary either:

constructor() {
    super()
      .attachShadow({ mode: "open" })
      .innerHTML = ` ... any HTML here... `;
  }

Docs also say you "use super() first in constructor"

That is incorrect also.

You can use any JavaScript before super(); you just can not use this until it is created by the super() call

</div>

Trying C++, OpenGL with WASM

Lenvin Gonsalves — Fri, 18 Dec 2020 19:37:01 +0000

Disclaimer: This post is meant to put out my experience of using OpenGL with C++ & WASM. I know there is WebGL that could be used instead of what I've done, but I was really curious about WASM and wanted to learn more about it. So I decided to give life to my university's Computer Graphics project by porting it to WASM.

I hope my experience of learning how to use C++, OpenGL & WASM might be of some use to you.

What we are building

Setting up

The first most step is to download emscripten and set it up, You can find the instructions here.

After that, you need to be sure that you have appropriate files installed for C++ & OpenGL, in most Linux distros all the required packages are already present.

Making the C++ program ready for WASM

The OpenGL project I had done for my university was a train that translates (moves) along the x-axis, and this was supposed to be controlled by the user.

I directly compiled the program to WASM and included it in my project, it worked fine on computers (I could control the train using the keyboard), but the problem was on mobile devices.

So I had to expose two functions from the C++ program to the javascript, it was done as follows -

extern "C" void EMSCRIPTEN_KEEPALIVE move_train_forward() { 
    angle -= 0.01f;
    glutPostRedisplay();
 }

 extern "C" void EMSCRIPTEN_KEEPALIVE move_train_backward() { 
    angle += 0.01f;
    glutPostRedisplay();
 }

where angle is the position of the train, and glutPostRedisplay() causes the program to re-render. The two functions would move the train forward and backward.

Also, you'd want to make sure you are importing emscripten.h into your C++ program.

#include <emscripten.h>

After this, we are ready to compile the program to WASM.

emcc main.cpp -lGL -lGLU -lglut  -s WASM=1 -s LEGACY_GL_EMULATION=1 -O3 -o index.js

We are setting LEGACY_GL_EMULATION=1 because I am using an old version of OpenGL, feel free to skip it if you are using a newer version. The output is a js and wasm file, you'll need to use the js file in your HTML.

you can also compile the C++ program to a complete HTML, JS & WASM project by changing the command to

emcc main.cpp -lGL -lGLU -lglut  -s WASM=1 -s LEGACY_GL_EMULATION=1 -O3 -o index.html

Emscripten generates everything for you, you just need to run the project on a local server to see the result. But since we are planning to add much more functionality, we are just going to choose the js option.

Writing the HTML & JS

We need to create a canvas element, the output from the C++ program will be drawn on this canvas. Right after that, we are calling the js generated by Emscripten.

    <canvas id="canvas"></canvas>
    <script type="text/javascript">
      var canvas = document.getElementById("canvas");
      var Module = {
        canvas
      };
    </script>
    <script src="index.js"></script>

To control the train on mobile devices, I thought It'd be fun to control it using the accelerometer. The following code does it.

      const accelerometer = new Accelerometer({ frequency: 30 });
      accelerometer.addEventListener("reading", () => {
        const { x } = accelerometer;
        if (x > 0) {
          _move_train_forward();
        } else if (x < 0) {
          _move_train_backward();
        }
      });
      accelerometer.start();

Here _move_train_forward and _move_train_backward are the functions that we wrote in the C++ program (Emscripten adds the _ in the beginning). I've used the same methods to control the train via buttons as well.

The rest of the code is available in the Codeandbox above. I'm going to stop here, let me know if you have any doubts! Thanks for taking the time to read through this article.

Creating a spell checker plugin for Gatsby

Lenvin Gonsalves — Sat, 12 Dec 2020 19:58:08 +0000

I occasionally write blogs at my website, lenvingonsalves.me, but with a lot of spelling mistakes. Since I use a code editor to write most of my content, using Grammarly is not an option.

Being the developer that I am, I couldn't help but follow the first law of our religion

If a task takes 5 minutes to do manually, and takes 5 hrs to automate, then you must automate it.

So, from there I thought of creating a Gatsby plugin, that would find out spelling mistakes in the content I write, and then show it to me. This would also provide a very good learning experience for me, as I have never created a Gatsby plugin that dealt with remark & markdown.

How to use it

For now, I haven't published the plugin in npm, because it still needs a lot of work. If you are curious, you can clone the plugin from the Github repository here

After that, navigate to the root of the project, install the dependencies using yarn or npm. Once you are done installing, link it. Here are the steps for yarn users

yarn && yarn link

Then navigate to your gatsby project's directory and run

yarn link gatsby-remark-hunspell

Then add gatsby-remark-hunspell to the gatsby config.js, it should be in the gatsby-transformer-remark object.

    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-hunspell`,
           ]
         }
      }

Then start your development server, the errors in the markdown will be shown in the following way.

Implementation

I was able to put up a first version of the plugin. To be honest, I have taken a lot of inspiration from Gatsby's official plugins. The plugin does the following -

Traverses the nodes in Markdown AST generated by gatsby-transformer-remark
If the node is of type paragraph, list, heading, or blockquote, then find its child node which contains the text.
From the text, remove all special characters (including ', which is not good) and then split it into an Array using space as the delimiter
Here, we will be passing each word to the Nodejs library called nodehun which is a wrapper around Hunspell (It is a spellchecker used in a lot of other applications)
If there are suggestions we add them to the suggestion array.
Then we create a node in the markdown AST with all the suggestions for the paragraph, blockquote, etc

This is only a brief explanation, you can check out the source code here, which is having comments to help you understand.

Drawbacks

There are a few drawbacks, and here are the improvements that will be made -

On projects with too many markdown files, it runs out of memory, I need help to understand and fix this.
Use a better regular expression to remove special characters from the words before passing them to Hunspell.
Need to work on the style such that it doesn't look like Grammarly
Need to provide an option to run this plugin only in development or staging environments.

Thanks for taking the time to read through my experience of creating a gatsby plugin

Generating Pdf documents in React

Lenvin Gonsalves — Mon, 09 Nov 2020 10:51:29 +0000

Initially, I thought, it would be easy to generate pdf from React, as there are libraries available for each and everything in npm (Even fart noises). The problem isn't the lack of libraries, but the problem was they weren't meant for my use-case. Let us first go through the existing solutions.

If you are here only for the final code, skip to the result.

React-pdf

This is probably the best library to use if you are printing something similar to a newspaper, resume, or magazine, It has many components which can be put together, and then exported as a pdf, but if you plan on re-using your existing react components or even something as trivial as a table, then you are out of luck. You can find the library here

Advantages

Easy to use API.
Works even in react-native.
Has a pdf viewer as well.
Exports the pdf in multiple ways.

Disadvantages

Can't use existing React components (Like tables).
You can only use the components provided by the library.

React to PDF

This library is more suited to my use case, as it supported using custom components, which meant no rewriting components (Yay!). But the drawback was, it would generate a pdf with all the components on a single page (no page breaking) and the pdf just contains a screenshot of the components. You can find the library here

Advantages

You can use any existing components.
You just need to pass the ref of the component to be printed.

Disadvantages

PDF is not vectorized ( You can't select the text in a PDF viewer).
IF you have a lot to put in the PDF, then the output will have a very long single page.

url-to-pdf-api

Using this library, you can easily set up a microservice which will take the required URL as a query parameter, along with page size & various other customization options. You can find the library here

Advantages

A single microservice can be used across all the applications in an organization.
The code isn't at the mercy of browsers.

Disadvantages

Setting up a microservice for just generating a PDF can be a deal-breaker for some cases.

Finding an easier approach

Well, as sad I was, I still had to implement this save as pdf functionality. After some brainstorming, I came up with the following approach.

Create a new window (which will contain only the components to be printed).
Get the components required (Passing refs as props or by using getElementById).
Clone the components to the new window (with styles).
Trigger print from the new window.

In short, we are creating a new HTML document, with only the components we want to print.

Implementation

We will iterate the implementation by writing pseudocode, and then converting it step by step to real code.

function PrintButton({ refsToPrint }) {

  const printFunction = () => {
      //TODO : Add functionality to print passed nodes (refs)
  };

  return <button onClick={printFunction}> Print </button>;
}

As you can see, we will be taking only one prop, which is the refs to the components that need to be printed (refsToPrint), the input will be in a form of an array [ref1, ref2 ...]. You can assign a ref to a component in the following way

function App(){
    const tableRef = React.useRef()

    return(
        <table ref={tableRef}>
          // TODO - complete code for table
        </table>
    )
}

And pass the refs to the PrintButton component (The component which will generate the PDF) as follows, For brevity, in this tutorial, we will be passing only one ref (only printing one table/component).

    <PrintButton refsToPrint={[tableRef]}>

Now, let's fill the PrintButton component's printFunction function. We will be creating a new window, write the basic HTML tags like body, title, head. Then we will get the body node via getElementById and use appendChild to add the clone of the component. Then we will use print() to call the browser's print option (which will have the Save as PDF option).

  const printFunction = () => {
    const printWindow = window.open("", "", "height=400,width=800");
    printWindow.document.write(
      "<html><head><title>Page Title</title></head><body id='print-body'>"
    );
    const body = printWindow.document.getElementById("print-body");
    refsToPrint.map((ref) => {
      const clone = ref.current.cloneNode(true);
      return body.appendChild(clone);
    });
    printWindow.document.write("</body></html>");
    printWindow.document.close();
    printWindow.print();
  };

But the problem is, using appendChild() only the markup is cloned into the new document. For getting the styles, we can use the getComputedStyles DOM method.

    refsToPrint.map((ref) => {
      const clone = ref.current.cloneNode(true);
      clone.styles.cssText = document.defaultView.getComputedStyle(ref.current, null);
      return body.appendChild(clone);
    });

Here again, the problem is that only styles of the topmost node will be copied, the child nodes will not get their styles. To overcome this problem, we will have to iterate over each child node and copy the styles, for this we will introduce a new function deepCloneWithStyles.

  const deepCloneWithStyles = (node) => {
    const style = document.defaultView.getComputedStyle(node, null);
    const clone = node.cloneNode(false);
    if (clone.style && style.cssText) clone.style.cssText = style.cssText;
    for (let child of node.childNodes) {
      if (child.nodeType === 1) clone.appendChild(deepCloneWithStyles(child));
      else clone.appendChild(child.cloneNode(false));
    }
    return clone;
  };

  const printFunction = () => {
    const printWindow = window.open("", "", "height=400,width=800");
    printWindow.document.write(
      "<html><head><title>Page Title</title></head><body id='print-body'>"
    );
    const body = printWindow.document.getElementById("print-body");
    refsToPrint.map((ref) => {
      const clone = deepCloneWithStyles(ref.current);
      return body.appendChild(clone);
    });
    printWindow.document.write("</body></html>");
    printWindow.document.close();
    printWindow.print();
  };

Now, we have implemented a way to print as PDF without using any library. The user is now free to get the PDF in A4, A3, Letter, Portrait, Landscape, or in whatever way he/she requires.

Result

You can copy the code from the sandbox below, If you have any improvements, suggestions, or doubts, Hit me up at lenvingonsalves@gmail.com

How to use semantic HTML tags - 1

Lenvin Gonsalves — Mon, 13 Jul 2020 17:19:44 +0000

Learn when to use <nav />, <article /> & <aside />

There are numerous articles on explaining semantic HTML, but there are very few articles that will help you decide on which tag to use.

You just need to ask yourself some questions to decide on what tag to use.

`<nav />`

Will the element be a major navigation block that the users will primarily rely on to navigate around the website? If yes then you should be using the <nav /> tag.

The HTML 5 specification defines <nav /> as:

The nav element represents a section of a page that links to other pages or parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

It is important to not abuse the <nav /> tag. If the footer and the header have the same links, then you should skip enclosing the footer with the nav tag.

If your website has pagination (and it is the only way to navigate between the pages), then it is necessary to enclose the pagination buttons with the nav tag. Similarly, a Table of content, Breadcrumbs can be enclosed in nav.

`<article />`

Does the content (in its entirety) make sense on its own? Then you need to enclose it in an article tag. The content can be News article, weblog or forum post, comment on an article, sidebar
widget, etc, with a heading… The best example of an article would be a post on an RSS feed.

The HTML 5 specification defines <article /> as:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

It is also very common for a lot of people to get confused between <article /> and <section />. A simple hack I use is to ask myself these questions.

Does the content make sense on its own? If so, it should be enclosed in an article.
Are the content related to each other? If it is a group of related content, like comments in a blog post, each comment should be enclosed in an article, and all these articles should be enclosed around a single section.

`<aside />`

Is the content related & required to understand the content of the page? If it is related & is not required, then you can enclose these content in an <aside /> tag. The content can include Sidebar, comments section, pull-quote, glossary, advertising, footnote, etc.

The HTML 5 specification defines <aside /> as:

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

A lot of people don't know that you can place aside inside an article. As long as it is content that relates to the article, but even if the content is not available, the article would still make sense, then it can be placed in an aside.

Many argue that the sidebar & advertisements shouldn't be placed in an aside. Because, your website can be about cats, but the ads might be for the pizza, which is not at all related to cats.

Unless your cats look like this

`<conclusion />`

I haven't completed penning down my opinion on semantic HTML tags yet😎, this post will be followed by a part 2 very soon 😀

Please leave your feedback in the comments below, It'll help me grow as a writer. 🥰

How to host a website on the Dark web

Lenvin Gonsalves — Fri, 10 Jul 2020 18:54:21 +0000

There is a lot of misconception around the dark web, and most of the people think that it is not possible to create their website on Dark web (The Onion network). Today we will set up a website in the Onion/Tor network for free (With our own home server).

As you can see above, I have created my website in the Tor network, and I've accessed it using the Tor Browser.

This tutorial consists of three steps

Preparing your computer (Not a real step)
Installing & Configuring nginx
Installing Tor
Configuring the Tor server

Ingredients

An old computer (You can try on AWS EC2, but I've not tried it there) 💻
A stable internet connection 🌐
2 hours ⌚
Comfort using terminal ⌨

Instructions

To begin with, find a spare computer that can be used as a server (If you don't have one, you can try following the tutorial on an AWS EC2 or similar service). Also, you do not need a static IP for your dark web website.

To follow the tutorial, You will need to install a Linux based OS on the server (we will refer your spare computer/cloud computer as a server from now), I have tested the below steps on Ubuntu 18.04 Server LTS and I recommend that you also use the same. Ubuntu 20.04 doesn't seem to work well with Tor.

It is also recommended to use SSH to connect to your server since there will be no GUI, you will not be able to open this article on the server and copy-paste the commands. Typing the commands out will be time taking & also very error-prone.

In this article, I will not explain how to use & configure SSH but you can refer the below link to understand & use SSH.

How To Use SSH To Connect To A Remote Server In Linux Or Windows

Important: Make sure you are running as root throughout the tutorial.

sudo su

Let's get our hands dark 😎

Installing & Configuring nginx

The role of nginx is to serve the HTML files and assets (act as a web server).

apt update
apt install nginx

The above commands will update the server & install nginx. To start the nginx server

service nginx start

To check the status of the nginx server

service nginx status

To confirm if the nginx server is working. We will make a GET request to the server using curl. Before that, you'll need to know what is your IP address.

ifconfig

The output will be similar to this

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        inet6 ::1  prefixlen 128  scopeid 0x10<host>
        loop  txqueuelen 1000  (Local Loopback)
        RX packets 134  bytes 21230 (21.2 KB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 134  bytes 21230 (21.2 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

wlp9s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet your-ip-address  netmask 255.255.255.0  broadcast ###.###.#.###
        inet6 ####::####:####:####:####  prefixlen 64  scopeid 0x20<link>
        ether ##:##:##:##:##:##  txqueuelen 1000  (Ethernet)
        RX packets 6379  bytes 8574482 (8.5 MB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 3518  bytes 506008 (506.0 KB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

Find your IP address in inet your-IP-address. Note it down, using that now make a curl request.

curl your-IP-address:80

The console should print out the HTML code of the default nginx page. You can also check if nginx is working by typing the IP address of the server in your browser.

To add your custom page, follow the steps from their official documentation. Beginner's guide - nginx

Installing Tor

Installing Tor (not just the browser) allows your computer to communicate with the Tor network. Before installing Tor, we will have to install apt-transport-https, so that we can use source lines with https://

apt install apt-transport-https

Important: The below commands are for Ubuntu 18.04 only
If you are running other OS, please find the commands here, from Tor's official, site. We will now open the sources file to add the Tor sources.

touch /etc/apt/sources.list.d/
nano /etc/apt/sources.list.d/

Once the editor is open, add the following sources to the file

deb https://deb.torproject.org/torproject.org bionic main
deb-src https://deb.torproject.org/torproject.org bionic main

After exit & saving, type the following in the terminal. This is to add the gpg key used to sign the Tor packages.

curl https://deb.torproject.org/torproject.org/A3C4F0F979CAA22CDBA8F512EE8CBC9E886DDD89.asc | gpg --import
gpg --export A3C4F0F979CAA22CDBA8F512EE8CBC9E886DDD89 | apt-key add -

Finally, now we install Tor and also a package which will help to keep the signing key current.

apt update
apt install tor deb.torproject.org-keyring

Similar to nginx, Tor can be started & checked by the following commands

service nginx start
service nginx status

Setting up the tor server

Now that we have nginx & Tor up and running, we will have to configure Tor so that our server acts as a Tor server (Your server will not be used as a relay node)

For this, we will have to edit the torrc file. The torrc is the configuration file for your Tor, the power of the file is such that, you can alter Tor to act as a proxy server & contribute to the Tor network (Not in this tutorial). In this tutorial, the torrc will be configured to act as a tor webserver (onion service).

nano /etc/tor/torrc

In the torrc file, Go to the middle section and look for the line

############### This section is just for location-hidden services ###

And uncomment the following lines.

HiddenServiceDir /var/lib/tor/hidden_service/
HiddenServicePort 80 127.0.0.1:80

In these lines,

HiddenServiceDir will tell Tor where to save the private_key & hostname of your Tor website (They are information about your dark website). The private key stored is very important & could be used to impersonate you. In case you change your server, you just need to copy-paste your private key into the new server.
HiddenServicePort lets you specify a virtual port (that is, what port people accessing the website will think they're using) and an IP address and port for redirecting connections to this virtual port.

To apply this new configuration, Stop the Tor service and start it again by typing the following commands.

service tor stop
service tor start

Now check the status of the tor service to see if the changes are working & valid.

service tor status

If things are looking good, proceed to the next step, otherwise, you might have made a mistake in editing the .torrc file.

At this point, your dark website must be running. But we don't know what is the URL, to get it, run the following command

cat /var/lib/tor/hidden_service/hostname

The URL to your all-new dark website will be printed in the console. To test if it's working

curl -v --socks5-hostname localhost:9050 http://your-onion-domain.onion

The URL is actually your-public-RSA-key.onion. Tor has a different way of identifying websites, i.e. via their public RSA key.

You might notice that the URL generated, is very long and you might be wondering how to create custom hostname (i.e. Custom RSA public key). I will be creating an article on this topic very soon.

Now let's celebrate on your first dark website 🎉. Also please share your thoughts in the comments 😁 (For example, you can ask me to add instructions on "how to add your custom page in nginx")