The Art of the Justified Verse (Announcing shakeeb-justify v2.0.0!)

If you’ve ever tried reading Urdu poetry on a standard web page, you’ve probably felt a slight twitch in your eye.

Traditional Urdu typography—especially when draped in the elegant, cursive curves of the Nastaliq script—isn't meant to just sit left-aligned like a random grocery list. It’s an art form. Historically, divans and lit-magazines have printed Urdu poetry with strict, gorgeous visual structures. Both edges of a line are perfectly aligned (fully justified), couplets (sher) stay tightly bound, and stanzas leave just the right amount of breathing room.

But standard web layout tools like CSS text-align: justify? They look at Urdu script, panic, and completely break the aesthetic.

Frustrated by this, I embarked on a journey that started as a small, hacky code snippet years ago and has officially evolved into a fully grown, zero-dependency NPM package.

Today, I’m thrilled to announce the release of shakeeb-justify v2.0.0!

Sneak-peek

Here is the story of how it was built, why it exists, and how you can use it to give your web-based poetry the royal treatment it deserves.

The Origin Story: Nostalgia and the 2021 Hack

Back in 2021, I just wanted a way to display standard ghazals online without losing their visual soul. Urdu poetry has distinct structural rules:

1. Lines must be justified (both left and right edges aligned perfectly).
2. Couplets need to stick together.
3. It needs to handle Right-to-Left (RTL) rendering safely without causing layout explosions.

My initial solution was a simple script. It worked by wrapping lines into divs, calculating widths, and letting the browser do its best. It was local, keeping it alive for nostalgia's sake in the GitHub commit history, but it had limitations. It only handled basic single and double columns. If someone wanted to render complex classical poetic structures, they were out of luck.

Fast forward to recently: I decided it was time to stop gatekeeping this functionality in an old repository. I ripped the layout engine apart, rewrote it for performance, namespaced the CSS to prevent annoying style conflicts (.shakeeb-justify), and packaged it neatly onto NPM.

Step-by-Step: The Anatomy of a Poetry Layout Engine

Building version 2.0.0 required turning abstract poetic rules into strict, programmatic logic. Under the hood, the library parses plain text, HTML paragraphs (<p>), or line breaks (<br>), sanitizes them, and builds a rock-solid grid system using semantic tables (which provide the cleanest, most backward-compatible rendering for justified RTL texts).

We didn't stop at standard couplets. Version 2.0.0 introduces native semantic support for classical poetic forms:

• Ghazal / Qat'a: Classic double or single-column structures.
• Mukhammas (5-line stanzas): Supports standard spacing, custom "3+2" groupings, or a "mixed layout" that places 4 lines in two columns and isolates the final line at the bottom for dramatic emphasis.
• Musaddas (6-line stanzas): Perfect for Marsiya layouts, letting you group all 6 lines together or run a "4+2 mixed layout" (4 lines in two columns, followed by a closing single-column couplet).

To prevent weird hover artifacts, gaps between stanzas are calculated using empty spacer rows instead of messy padding blocks. And to prevent regressions, I even threw in a Jest unit-testing suite to make sure future changes don't accidentally wreck your carefully aligned layout.

Quick Start: How to Use It

I wanted shakeeb-justify to be ridiculously easy to implement—whether you are a hardcore JavaScript developer or someone just setting up a simple blog.

1. Installation

If you're using modern build tools, grab it via NPM:

npm install shakeeb-justify

And import it into your script:

import { ShakeebJustify } from 'shakeeb-justify';

// Run it!
ShakeebJustify.apply();

If you prefer a simpler approach, just drop the CDN link directly into your HTML file:

<script src="https://cdn.jsdelivr.net/npm/shakeeb-justify@2.0.0/dist/shakeeb-justify.min.js"></script>

(The library automatically triggers on DOMContentLoaded, so you don't even have to call it manually! For dynamic/AJAX content, just trigger ShakeebJustify.apply() manually.)

2. Writing the Markup

The library looks for specific class names and formats whatever text is inside them. You don't need to format your raw text with complex tags—just paste it as-is.

Standard Ghazal (Single Column, automatic gap every 2 lines):

<div class="sher">
خوگر قربت و دیدار پہ کیسی گزرے
کیا خبر اس کے دل زار پہ کیسی گزرے
ہجر میں اس ترے بیمار پہ کیسی گزرے
دور کیا جانیے بد کار پہ کیسی گزرے
</div>

Two Columns (Side-by-Side Misras):

<div class="sher2">
ہر ایک بات پہ کہتے ہو تم کہ تو کیا ہے
تمہیں کہو کہ یہ اندازِ گفتگو کیا ہے
</div>

More formats can be seen in the docs page (link in the end).

3. Getting Fancy with Stanzas and Custom Patterns

Want a Musaddas with a mixed layout (4 lines side-by-side, 2 lines below)? Easy:

<div class="musaddas-mixed">
</div>

What if you have a wild, non-traditional form? Say hello to the data-pattern attribute. You can declare exactly when the layout engine should insert a visual break using a simple + separator:

<div class="sher" data-pattern="3+2">
...
</div>

Features You (And Your Readers) Will Love

• Zero Dependencies: Clocking in as an incredibly lightweight library, it won't bloat your website's load times.
• Copy-Friendly Outputs: Have you ever tried copying poetry from a web table and ended up pasting a scrambled mess? I fixed that. shakeeb-justify injects hidden newlines into the DOM, ensuring that when your readers highlight and copy a poem, it preserves its perfect line-breaks when pasted into WhatsApp, Twitter, or Notepad.
• Optional Copy Buttons: Want to make sharing even easier? Just pass the data-copy attribute to automatically generate seamless clipboard copy buttons for your readers.
• WordPress/Gutenberg Compatible: It integrates naturally into standard web layouts and custom CMS setups.

What's Next?

Getting version 2.0.0 live on NPM and polishing up the GitHub repository feels like a massive milestone for a project that began out of sheer frustration with standard web formatting.

Check out the live documentation and demo page to see the layouts in action. If you love poetry, typography, or just clean code, feel free to dive into the GitHub Repo, star it, open an issue, or contribute!

Let's make the Urdu web look as beautiful as the literature written for it.

I've already integrated it in 8+ apps of mine, some web apps, some android (hybrid) apps, a few scripts on top of it and even Google Chrome extension. Will be publishing it soon.

If you want to integrate it in your website/blog/app, and facing some difficulty, let me know in the comments. :)

Cloud Hosting Explained for Frontend Developers: GCP, AWS, VPS, Buckets, Cloud Run and More

There is a particular moment every frontend developer eventually encounters.

You have built the application. It works beautifully on localhost:4200. Your React, Angular, or Vue frontend is polished. Your Node.js API works. The database works. Everything works.

Then someone asks:

“Can you show me the live application?”

And suddenly, you are reaching for your laptop.

This post is for exactly that situation.

I remember this from my college days. Our final-year exams were approaching, and just before the exams, the university conducted the viva and project presentations. Technically, the presentations happened at our colleges, but the examiners were sent by the university.

I was leading a group of five, and there were several groups presenting their final-year projects.

And believe me, every single project was demonstrated on the developer's own laptop, running locally.

localhost.

The examiner would sit there, the developer would open the laptop, start the frontend, start the backend, make sure the database was running, and then say, “Sir, this is our project.”

It always struck me as a little strange.

We had spent months building these applications, but when it was finally time to show them, they were still trapped inside our laptops.

And I think this is a real gap that many developers don't even realise they have.

Not because deploying an application necessarily requires some complicated cloud architecture. It doesn't.

You don't need to become a DevOps engineer just to put your project on the internet.

You simply need to take that extra step and ask:

“What happens if this thing I've built actually goes live?”

Because the moment your application moves from localhost to a real URL, something changes.

It stops being “some code I built on my computer.”

It becomes something people can actually open, use, share, test, break, recommend, and remember.

It starts looking less like a college project and more like a product.

And that shift is much more important than most developers realise.

Maybe you already know Firebase Hosting. Maybe you have deployed something to Vercel. Maybe you have used Hostinger and know your way around a VPS. But the moment someone says GCP, AWS, Compute Engine, EC2, Cloud Storage, S3, Cloud Run, containers, IAM and networking, it starts sounding less like web development and more like a job for someone who has memorised the entire cloud console.

It is not.

The trick is to stop thinking about cloud providers as hundreds of unrelated services.

There is a much simpler mental model.

Once you understand that model, AWS and GCP stop looking like completely different worlds.

---

First: what does “cloud hosting” actually mean?

At the simplest level, your application needs somewhere to live.

There are two very different questions hidden inside that sentence:

What exactly am I putting online?

and

Who is responsible for keeping the computer running?

Those two questions explain most of the cloud-hosting landscape.

Suppose you have a frontend application.

After running:

npm run build

you might end up with something like:

dist/
├── index.html
├── styles.css
├── main.js
├── assets/
└── ...

Those are just files.

A browser can download them and run the JavaScript.

But a Node.js backend is different.

A Node.js server actually needs a runtime. Something has to start Node, keep it alive, accept requests and deal with crashes, scaling and networking.

That distinction is the foundation of everything that follows.

---

The easiest mental model: three ways to host

For a frontend developer, think about hosting as three broad approaches.

Approach	What you get	What you manage	Examples
Managed static hosting	A place to serve built HTML/CSS/JS	Almost nothing	Firebase Hosting, Vercel
Virtual machine	A blank Linux computer	Almost everything	GCP Compute Engine, AWS EC2, Hostinger VPS
Managed application/container platform	A place to run your application without managing the server yourself	Your application/container	Google Cloud Run and similar services

This is where things become much easier.

A Hostinger VPS, a GCP Compute Engine VM, and an AWS EC2 instance are conceptually very close.

A Firebase Hosting site, an S3 static website, and a static frontend deployed through another managed hosting service solve a different problem.

And something like Cloud Run sits somewhere else again: you provide an application/container and the platform takes care of much of the infrastructure underneath it.

---

Wait... isn't a VPS already “cloud”?

Yes.

And this is one of the reasons cloud terminology can be confusing.

When you rent a Hostinger VPS, you are essentially getting your own virtual Linux machine.

You can SSH into it.

You can install Node.js.

You can install Nginx.

You can run:

pm2 start server.js

You can configure domains.

You can configure SSL.

You can restart services.

You can inspect logs.

You can break everything at 2 AM and then discover that the problem was one line in an Nginx configuration file.

That last part is optional, but surprisingly educational.

Conceptually, GCP and AWS can give you the same kind of machine.

On GCP, you use Compute Engine.

On AWS, you use EC2.

So the mental map looks like this:

What you already know	GCP	AWS
VPS / virtual Linux machine	Compute Engine	EC2
Object/file storage	Cloud Storage	S3
Managed application/container hosting	Cloud Run	AWS has several services in this category, such as ECS/Fargate
Managed frontend hosting	Firebase Hosting	Various AWS/frontend hosting options

The names change.

The underlying ideas do not.

---

So what is a “bucket”?

This is another word that makes cloud sound unnecessarily mysterious.

A bucket is essentially a storage container for files.

Think of it as a cloud storage area designed for applications rather than a folder sitting on your laptop.

For example, a bucket might contain:

images/
avatars/
videos/
backups/
reports/
documents/

GCP calls its object-storage service Google Cloud Storage.

AWS calls its object-storage service Amazon S3.

So:

GCP Cloud Storage bucket ≈ AWS S3 bucket

This does not mean they are literally the same product. It means they occupy the same conceptual place in the architecture.

And this distinction matters:

A bucket is fundamentally a storage system.

It is not a Linux server.

You do not SSH into an S3 bucket.

You do not open a terminal inside a Cloud Storage bucket and run:

node server.js

It has no job running there waiting for your Node.js application.

That is the key difference.

---

Then why do people talk about putting websites in buckets?

Because a frontend built with React, Angular, Vue or plain HTML/CSS/JS can be nothing more than a collection of static files.

For example:

index.html
main.js
styles.css
logo.png

The browser downloads those files.

No Node.js process is required to render the page.

So the deployment can look conceptually like this:

Your laptop
    |
    | npm run build
    v
Compiled frontend files
    |
    v
Cloud storage / static hosting
    |
    v
Browser

That is fundamentally different from:

Browser
   |
   v
Nginx
   |
   v
Node.js
   |
   v
Database / APIs

The first is primarily serving files.

The second is running an application.

---

Firebase Hosting suddenly makes more sense

If you have used Firebase Hosting, you have already experienced the easier side of this architecture.

You might run:

firebase init

configure your hosting directory and then:

firebase deploy

And... that's it.

No Ubuntu installation.

No PM2.

No Nginx configuration.

No manually maintaining a web server.

That is why Firebase Hosting feels so dramatically easier than a VPS.

The infrastructure still exists somewhere underneath.

You simply aren't being asked to operate most of it yourself.

And this is an important distinction:

Firebase Hosting is not the same thing as manually creating a Google Cloud Storage bucket and treating that bucket as your website server.

Firebase provides a managed hosting experience.

That is exactly why it is so attractive to frontend developers.

---

Now imagine doing the VPS approach on GCP

Suppose you want the exact environment you had on Hostinger.

You could create a GCP project and then provision a Compute Engine VM.

The VM is your server.

You connect to it through SSH.

Inside that machine, you can do familiar things:

sudo apt update
sudo apt install nginx

Install Node.js.

Clone your application:

git clone <your-repository>

Install dependencies:

npm install

Run your Node application:

pm2 start server.js

And configure Nginx to proxy requests to something like:

localhost:3000

At this point, you are essentially using GCP as a VPS provider.

There is nothing wrong with that.

In fact, it is a very useful way to understand the relationship between traditional hosting and cloud infrastructure.

The important question is:

Why use a giant cloud platform if you are going to operate it exactly like a VPS?

That is where the next level begins.

---

The cloud-native approach: stop managing the machine

Imagine your Node.js application is packaged as a container.

Conceptually, your container says:

“This is my application. Here is the runtime it needs. Here is how it starts.”

For example, a simplified Dockerfile might look like:

FROM node:20

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 8080

CMD ["node", "server.js"]

Now you can give that application to a managed service such as Google Cloud Run.

Instead of saying:

“Here is a Linux machine. Please let me configure it.”

you are effectively saying:

“Here is my application. Please run it.”

That is a major conceptual shift.

With a traditional VM, you manage the server.

With a managed container platform, you focus much more on the application.

---

What happens when you deploy to Cloud Run?

A command such as:

gcloud run deploy --source .

can trigger a managed deployment workflow.

Conceptually, the platform takes your source, builds the application into a deployable container, stores the resulting image in cloud infrastructure, and deploys it as a Cloud Run service.

You do not normally need to configure an Nginx reverse proxy yourself.

You do not need to install PM2 manually.

You do not need to maintain an Ubuntu machine yourself.

The platform manages much more of the underlying infrastructure.

This is much closer, conceptually, to the experience frontend developers are used to from services such as Firebase Hosting and Vercel.

The difference is that Cloud Run is designed specifically to run applications and services, not merely serve static frontend files.

---

Now the really important question: where does my Node.js + frontend application go?

Suppose you have:

Frontend
  |
  | Angular / React / Vue
  |
  v
Compiled HTML/CSS/JS

and:

Backend
  |
  | Node.js / Express
  |
  v
API

They do not have to be hosted in the same place.

In fact, separating them is extremely common.

One possible architecture is:

                  USERS
                    |
                    v
             Frontend Hosting
          HTML / CSS / JavaScript
                    |
                    v
              Node.js API
                    |
                    v
                Database

Your compiled frontend could live on Firebase Hosting or another static hosting platform.

Your Node.js backend could run on Cloud Run.

Your images and other large files could live in Cloud Storage.

Your database could be a completely separate managed database service.

Suddenly “the cloud” is not one giant magical place.

It is simply several specialized services connected together.

---

GCP vs AWS: the names change, the architecture doesn't

The same mental model works remarkably well when switching providers.

What you need	GCP	AWS	Simple explanation
Virtual machine	Compute Engine	EC2	A Linux computer you manage
Object storage	Cloud Storage	S3	Store files and objects
Managed containers	Cloud Run	ECS/Fargate and related services	Run applications without managing a traditional server
Static frontend hosting	Firebase Hosting / other options	S3 + CloudFront or other frontend services	Serve built frontend assets

Now imagine an examiner or interviewer asks:

“How would you deploy a Node.js application on AWS?”

You do not need to panic and memorise 47 AWS services.

Ask yourself one question:

Do I want to manage a machine?

If yes, you're looking at something like EC2.

If you want a more managed application platform, you start looking at services such as ECS/Fargate and related managed compute options.

The underlying architectural decision remains the same.

---

S3 is not “AWS's version of a VPS”

This misconception causes a lot of confusion.

S3 is primarily object storage.

EC2 is compute.

Those words are worth remembering:

Storage is where files live.

Compute is where programs run.

That distinction alone will take you surprisingly far in cloud understanding.

For example:

S3
 └── index.html
 └── main.js
 └── styles.css
 └── images/

EC2
 └── Linux
 └── Node.js
 └── Nginx
 └── PM2
 └── Your application

One is primarily a place for objects.

The other is a computer running software.

---

So what should you actually use?

Here is the practical decision table.

Your situation	Sensible starting point
Pure HTML/CSS/JS website	Static hosting
Compiled React/Angular/Vue frontend	Firebase Hosting, Vercel or another static hosting platform
Frontend + simple Node.js API	Static frontend + managed backend such as Cloud Run
Need complete control over Linux	GCP Compute Engine / AWS EC2 / VPS
Need to store images, videos, backups or files	Cloud Storage / S3
College project that needs a live URL	Managed hosting is usually the easiest route
Production backend where you don't want to maintain Linux manually	Managed application/container platform
Need unusual OS-level configuration	VM/VPS

The best cloud service is not the one with the most impressive-sounding name.

It is the one that gives you exactly the amount of control you actually need.

---

And this matters enormously for students

There is another reason to learn this.

A surprisingly large number of student projects technically work but are never actually demonstrated as products.

The examiner sees:

npm start
localhost:4200

And suddenly the impressive AI recommendation engine, database integration, authentication system and beautiful UI are trapped inside one laptop.

That is a missed opportunity.

A live deployment changes the conversation.

Instead of saying:

“Sir, this is my project. It works on my laptop.”

you can say:

“Here is the production URL.”

That tiny difference changes the perception of the project.

The same applies when applying for jobs.

A resume saying:

“Built an e-commerce application using Angular, Node.js and MongoDB.”

is one thing.

A recruiter being able to click:

Live Demo

is something else entirely.

You have moved from describing a project to showing evidence that it exists.

That is one of the simplest ways to make a project feel more real.

---

The simplest cloud map to remember

Forget the giant cloud diagrams for a moment.

Remember this:

                     CLOUD
                       |
        +--------------+--------------+
        |              |              |
        v              v              v
     STORAGE         COMPUTE       MANAGED APP
        |              |              |
        v              v              v
    GCS / S3       GCE / EC2      Cloud Run /
                                  ECS/Fargate

Then ask:

Do I need to store files?

Think bucket/storage.

Do I need a computer I control?

Think VM/EC2/Compute Engine/VPS.

Do I need to run an application without managing the whole machine?

Think managed application/container service.

And for a normal compiled frontend?

Think static hosting.

That is the map.

The cloud console looks complicated because it exposes a huge universe of possibilities.

You do not have to use the whole universe.

You just need to identify which problem you actually have.

---

As a note, keep this with you: 

“For a static frontend, I wouldn't provision a VM just to serve compiled HTML, CSS and JavaScript. I'd use managed static hosting. For the Node.js API, if I don't need OS-level control, I'd prefer a managed container platform such as Cloud Run. If I actually need full Linux-level control, then I'd provision a Compute Engine VM. For application assets and uploaded files, I'd use object storage such as Cloud Storage.”

Now you're someone who understands why the services exist.

And that is the real goal.

You do not need to become a cloud engineer overnight.

You just need to stop thinking of AWS and GCP as giant confusing websites and start seeing them as collections of familiar building blocks:

files, computers, applications, networks and managed services.

Once you see those building blocks, the names become much easier.

Now comes the interesting part: when you have a real Node.js + frontend project sitting on your laptop, how would you personally choose between a VPS, Compute Engine, S3/Cloud Storage, Firebase Hosting, Cloud Run or something like Vercel?

What would you deploy first — and why?

Shakeeb
Rab raakha 👋

---

slug: cloud-hosting-explained-frontend-developers-gcp-aws-vps-cloud-run

og title: Cloud Hosting Explained for Frontend Developers – GCP, AWS, VPS, Buckets & Cloud Run

og description: Confused by GCP, AWS, VPS, S3, Cloud Storage, buckets and Cloud Run? This beginner-friendly guide explains cloud hosting for frontend developers, including how to deploy built HTML/CSS/JS frontends and Node.js backends without getting lost in cloud complexity.

keywords: cloud hosting, cloud hosting for beginners, cloud hosting for frontend developers, cloud computing for frontend developers, GCP for beginners, Google Cloud Platform, AWS for beginners, Amazon AWS, GCP vs AWS, VPS vs cloud hosting, Hostinger VPS, GCP Compute Engine, AWS EC2, Google Cloud Run, AWS S3, Google Cloud Storage, cloud storage bucket, what is a cloud bucket, S3 bucket, GCP bucket, Cloud Run Node.js, Node.js cloud hosting, Node.js deployment, deploy Node.js app, deploy frontend app, frontend deployment, static website hosting, static hosting, Firebase Hosting, Firebase vs GCP, Vercel vs cloud hosting, React deployment, Angular deployment, Vue deployment, HTML CSS JavaScript hosting, host compiled frontend, frontend and backend hosting, full stack cloud hosting, cloud hosting explained, cloud computing explained, AWS EC2 vs S3, GCP Compute Engine vs Cloud Run, VPS vs EC2, VPS vs Compute Engine, S3 vs Cloud Storage, serverless hosting, managed hosting, cloud deployment for students, student project deployment, deploy college project, live project for interview, localhost to production, deploy project online, cloud deployment for beginners, cloud architecture for beginners

Fastest audio & video conversion | Perfect automation tools and commands that I use regularly

Ffmpeg is a gigantic library with customizations that makes people like me happy. I'm a man of 'give me life customization' kind, so it's a treat for me. 

I do the same when I build my own software and apps - most people don't even realize what I keep hidden in my apps, because layman don't need them or don't want to go into complexities of learning them. But for power users it's a blessing.

Ffmpeg is backbone of every video/audio/downloader tool out there. Every app that you see for YouTube download, Audio or Video manipulation online, be it web app, android app, iOS app or desktop app, it's all based on ffmpeg more or less.

Anyway, over the years I have accumulated quite a lot of ffmpeg commands that I use, and when I make something work/tweak perfectly according to my liking, it goes into number of note taking apps that I have (scattered everywhere). 

This blog post is to keep a track of all those commands so that I can come back here and pick those instead of going through my stuff looking for 'that perfect command' again.

Mp4 to Mp3 (or any other format)

Simple and useful, one format to another.

ffmpeg -i input.mp4 -vn output.wav

The vn flag is optional - it's to say `video no` meaning drop the video. Of course you can convert video to another video format, or audio to another audio format or any permutation that you like.

Slow down the video/audio

I have experimented quite a lot of things, stretching the time and the pitch shift etc. What gives us exact speed control is knowing your source, which is usually 41 or 48 kHz. 

Here's the command for an audio file that goes kaboom.

ffmpeg -i input.mp4 -vn -af "asetrate=24000,aresample=48000" output_slow.wav

Watermark your video

Simple watermark that goes from bottom to top; Semi-transparent. Adjust font-size, weight and text as per your liking. This also has voice enhancement commands, if you want you can skip them.

ffmpeg -i input.mp4 -vf "drawtext=fontfile='C\:/Windows/Fonts/arial.ttf':text='ShakeebAhmad':fontcolor=white@0.65:fontsize=18:x=(w-text_w)/2:y=h-mod(t*120\,h+text_h)" -af "loudnorm=I=-16:LRA=11:TP=-1.5" -c:v libx264 -preset medium -crf 18 -c:a aac -b:a 192k -movflags +faststart output.mp4

Remove silences from audio

Adjust the 0.5 threshold if you want, but this is the standard that everyone uses. 

ffmpeg -i master_audio.flac -af silenceremove=stop_periods=-1:stop_duration=0.5:stop_threshold=-40dB output_no_silence.flac

Less than this and people will feel suffocated. 

Flac is considered a lossless quality format by the way. So if you want exact copy of audio from a video, use video to audio conversion and choose flac as the output format.

Enhance the audio

Sometimes the audio you record (or generated via a TTS) isn't that clear or loud.  The following command will make your WAV audio louder, crisper, and clearer, you can combine volume normalization, high-pass filtering (to remove low-end muddy frequencies), and a treble boost.

ffmpeg -i input.wav -af "highpass=f=200, lowpass=f=4000, equalizer=f=3000:width_type=h:width=1000:g=5, loudnorm=I=-16:TP=-1.5:LRA=11" output.wav

This one is designed to treat audio heavily by cutting off frequencies outside a specific "telephone" or communication range, whereas the following command focuses on preserving the full, natural richness of the voice while surgically removing background noise.

Enhance and Reverb

ffmpeg -i input.mp3 -af "afftdn, anequalizer=c0 f=100 g=-10 w=100 t=1|c0 f=200 g=3 w=100 t=1|c0 f=3000 g=3 w=200 t=1, alimiter=limit=0.9" output_clean.mp3

• afftdn: Automatically samples the track to filter out steady background noise.
• anequalizer: Cuts muddy low frequencies below 100Hz (like table thumps), bumps 200Hz (adds radio-host warmth), and bumps 3000Hz (adds presence and vocal clarity).
• alimiter: Standardizes the overall volume so it sounds professionally mastered.

If you want to use best of both worlds (the above 2 enhance commands) - use this:

ffmpeg -i input.wav -af "afftdn, anequalizer=c0 f=100 g=-10 w=100 t=1|c0 f=200 g=3 w=100 t=1|c0 f=3000 g=3 w=200 t=1, loudnorm=I=-16:TP=-1.5:LRA=11" output_perfect.wav

Reverb: Reverb (reverberation) simulates the acoustics of a real physical space. When you sing in a bathroom or a church, the sound bounces off the walls. Duplicating tracks on top of each other with a tiny delay is an old trick to simulate this (e.g. using Audacity), but FFmpeg has a built-in room simulator filter called aecho.

For your future singing tracks, use this command to add a smooth, rich vocal space:

ffmpeg -i input.mp3 -af "afftdn, aecho=0.8:0.88:40:0.4" output_singing.mp3

What this command does:

• aecho=0.8:0.88:40:0.4: The 40 represents a 40-millisecond delay (perfect for a thick, doubling "studio" reverb effect), and 0.4 is the volume of the reflection so it doesn't drown out your original voice.

Remove Silences from Video with Audio

So, you have a video that you just want to roughly chop up without doing any actual editing. This is where auto-editor comes in. It's an open-source CLI for automatic video editing.

Run the following command:

auto-editor.exe "input.mp4" --edit audio:threshold=-35dB

This roughly means:

• Audio below -35 dB is considered silence
• The corresponding video frames are removed
• The corresponding audio is removed as well
• The remaining video and audio stay synchronized

One caveat: -35dB may be too aggressive or too lenient depending on your recording. You may need to adjust the threshold depending on how much background noise is present and how quiet the speech gets.

YouTube video

There's another lib made on top of ffmpeg, for everything YouTube or any online video grabbing. You'll see a port of it in every language. It's called `yt-dl` or another famous fork of it, `yt-dlp`. 

You can get the whole video or a part of it. Example:

yt-dlp -f "(bestvideo+bestaudio/best)[protocol!*=dash]" --external-downloader ffmpeg --external-downloader-args "ffmpeg_i:-ss 815 -to 903" "https://youtu.be/gwjFSonRzno"

// or in general with ffmpeg, for a stream/localserver/downloadable video:
ffmpeg -ss 00:42:10 -i "http://127.0.0.1:<port>/<id>/0" -t 10 -c:v libx264 -crf 18 -c:a aac clip.mp4

meaning -ss 00:42:10 = seek to 42 minutes 10 seconds before reading the input; -i "http://127.0.0.1:<port>/.../0" = specifies the local streaming URL as the input; -t 10 = process only 10 seconds of video from the selected starting point; -c:v libx264 = encode the video using the H.264 codec; -crf 18 = set H.264 quality (lower = higher quality/larger file; 18 is very good visually); -c:a aac = encode the audio using AAC; clip.mp4 = output filename.

Will keep adding commands here. Until then, thanks for the visit.

Rab raakha. 

Rekhta Reader & Downloader (Web App) – Thousands of Books on Mobile and Desktop

I come bearing good news today. By now you have already guessed it from the title, and I strongly suspect some of you have been waiting impatiently for the day a proper Rekhta tool with an actual user interface would finally arrive.

This post is also available in Urdu here.

What can I say? The things we like for ourselves, we like for our friends as well. And I like sharing.

So, without further ceremony, here it is:

Rekhta Reader & Downloader

A complete tool that allows you to read and download books from Rekhta.org on both desktop and mobile devices.

Let us take a quick tour of the tool.

As soon as you open the application, you will be greeted with an interface similar to this:

Requirements

Before using this tool, you must install a CORS bypass extension in your browser.

Download the extension here. I have included the complete usage instructions again near the end of this article, so if anything feels unclear, you will find a detailed guide there as well.

You can also see the complete workflow in the diagram below. ( Full-size image )

Extension page for reference:

When the extension is active, its logo appears in color. If it turns black, the extension is disabled.

Back to the tool itself.

Paste the URL of a book into the first field and click GO. The book pages will immediately open inside the reader for browsing and reading.

Search Books Directly — No Need to Visit Rekhta Separately

You can search Rekhta's book collection directly from within the application.

As you can see, the search results appear right inside the tool. Simply click the book you want to open and close the dialog window afterwards.

Click on any page image and start reading. This lets you browse a book before committing to downloading the whole thing — which may save some of us from downloading a dozen books simply because they looked interesting.

Clicking the PDF button downloads the entire book.

I will repeat the usage instructions again near the end of this article, though the screenshots above should already make things fairly self-explanatory.

Before that, however, it might be worth explaining how this tool came into existence in the first place.

The Story Behind This Tool (and a Few Dry Technical Details)

A while back, inspired by the work that Falsafi Bhai and Muhammad Umar Bhai had done on Urdu Mehfil, I put together a Node.js (JavaScript) version of the tool. It worked, and I used it regularly, but it came with three rather annoying problems:

1. It still had to be run from the command line. There was a graphical interface at one point, but it never really worked properly.
2. It only worked on a computer. So whenever a book was needed, the routine was always the same: open the laptop first, then download the book.
3. There was no reading facility. One had to download books blindly. And before downloading a dozen books out of sheer curiosity, it is usually nice to know whether a book is actually worth reading in the first place.

The original plan was to package the entire JavaScript library as an NPM package. Partly because it would be useful, and partly because it seemed like a good opportunity to gain some experience in that area as well.

Then, as often happens with side projects, life intervened and the idea quietly slipped out of mind.

I remember mentioning it to Umar Bhai during a private conversation on Mehfil. A few months later the idea resurfaced, so naturally I opened Mehfil again and started digging through the old discussion threads to refresh my memory and reconstruct the project's history.

Eventually I landed on Muhammad Umar Bhai's GitHub profile and discovered that he had already published a JavaScript version of the tool.

Suffice it to say, I sat there feeling slightly defeated.

(For the record, the Windows version of this tool still exists and continues to work perfectly well. The only catch is that it has no graphical user interface. Think of it as a traditional command-line application that you run through Command Prompt. Not particularly difficult, but an interface certainly makes life easier.)

Then fate decided to intervene.

Looking back at that old codebase sparked a new idea: why not port the entire thing to the frontend and make it work directly as a web application? If successful, everything could happen inside the browser without requiring users to install or run anything complicated.

There was, however, one obstacle.

Browser security policies generally do not allow one website to freely interact with another website's resources. In technical terms, the browser gets quite protective and starts throwing what developers lovingly call CORS errors.

To work around that limitation, I considered two possible solutions and built support for both into the web application.

1. Proxy Backend
   The first approach was to use a proxy backend. In simple terms, a backend service fetches the data on your behalf and returns the response to the application. Since the browser sees the request as originating from your own backend, it usually has no reason to object. In theory, this should solve the problem quite neatly. For the sake of accuracy, I should mention that I never fully tested this route in production. My expectation is that it should work It works with reverse proxy, but because the real challenge involves loading images rather than ordinary API responses, there is always the possibility of running into the same CORS restrictions further down the chain. Which brings us to the second and far simpler workaround...
2. CORS Bypass Extension
   This is by far the easiest solution. Browser extensions exist specifically for bypassing CORS restrictions, and several of them are freely available. Install one, enable it when needed, and the application can access the resources it requires. The extension linked in this article is the one I have been using myself.

As inelegant as browser workarounds sometimes feel, they have one undeniable advantage: they save everyone from setting up servers, configuring proxies, maintaining infrastructure, and generally turning a simple reading tool into a full-time engineering project.

Note: As of late Aug, 2026 - rekhta server has tried to block us but it's their backend - as expected. That's why I had made this 'proxy-first' from the get go . The reverse proxy works perfectly fine now. I have a proxy of my own, you can setup yours too, or if you want I can write a simpler solution for layman as well.

In the end, the goal was not to build a monument to software architecture. The goal was much simpler:

Open a book. Read a book. Download a book if you want.

Preferably from a phone while lying comfortably on a sofa.

How to Use the Tool

To use the tool, simply follow the steps below in order.

1. Install a CORS bypass extension. Download it here .
   
   If you intend to use the tool on Android, make sure you are using a browser that supports extensions. One such browser is Kiwi Browser. Kiwi Browser for Android You can download the APK from the Assets section of the release page, or obtain it from any other trusted source you prefer.
2. Open the Rekhta Reader web application. Rekhta Reader (https://tools.shakeeb.in/rekhta-reader/)
3. Enable the extension and start using the web application.

If you run into any issues, feel free to leave a comment below. Suggestions and feedback are equally welcome.

These days I find myself reading most books directly inside the tool, and rarely need to download them anymore. On mobile, however, I still download books occasionally simply because the reading experience is sometimes more comfortable that way.

What Comes Next?

This is not my first Rekhta-related project.

Some time ago I released another tool for Rekhta content in the form of a script and an Android application.

Related blog post:

dRekhta – Rekhta Content Scraper for Android (Release)

That project was designed for text content rather than books.

Now that the books side of the equation has been sorted out as well, the plan is to merge the text-focused tool into this same online platform.

The idea is simple: instead of maintaining separate tools for separate tasks, everything should live under one roof.

Once that happens, you will be able to browse and download Rekhta's poetry, short stories, prose content, and books from a single portal.

One search box, one interface, and hopefully a lot less jumping between websites.

UPDATE: The text extraction tool has now been merged into same portal. :)

Whether I can stop myself from adding even more features after that remains an entirely different question.

Shakeeb Ahmad

May 23, 12:35 AM

---

slug: rekhta-reader-downloader-web-app-read-download-urdu-books-mobile-desktop

og title: Rekhta Reader & Downloader (Web App) – Read and Download Thousands of Urdu Books on Mobile and Desktop

og description: Rekhta Reader & Downloader is a simple web application that lets you read Urdu books online and download them for offline use. Works on both mobile phones and desktop computers, with built-in book search and a clean reading experience.

keywords: rekhta reader, rekhta downloader, rekhta book downloader, rekhta books, urdu books online, read urdu books, download urdu books, urdu ebook reader, rekhta web app, rekhta reader online, urdu literature, urdu ebooks, mobile urdu books, desktop urdu books, rekhta reader downloader

Setting Up OCR for Windows and Linux: A Comprehensive Guide

Automating repetitive tasks like extracting text from images can save valuable time (unless you don't value it, in that case it will save some worthless time). This process, known as Optical Character Recognition (OCR), is a powerful tool for converting text in images into editable formats. Here, I’ll walk you through setting up custom OCR solutions for both Windows (that we all have) and Linux (mostly used in offices) systems, complete with keyboard shortcuts for seamless integration.

I primarily use OCR for Urdu in my personal work, but professionally it is also required for English. Using Google Lens is a fine option, except if you dislike repeating those clicks and key presses just to copy text from an image. And to be honest - I kind of feel bad even for giant corps like Google when I unnecessarily utilize their 'precious' resources.

Why not use a browser extension you ask? Well, because it's limited to browser - and we do need text from other apps as well. You can argue that one can take a screenshot of that app and then go to browser and run OCR, but if you have opened a browser and afford to take a screenshot just for that, why not run Google Lens instead of an extension. You get the point.

---

Background

OCR technology is invaluable for tasks such as digitizing printed documents, extracting text from screenshots, or processing scanned images. By automating OCR, you can:

• Instantly access extracted text.
• Improve productivity.
• Simplify your workflow.

This guide provides a step-by-step walkthrough for setting up OCR on Windows and Linux, ensuring a smooth and user-friendly experience.

---

Introduction

Why Automate OCR?

Manual text extraction is time-consuming and error-prone. Automating the process ensures:

• Faster access to text data.
• Minimal effort for repetitive tasks.
• A consistent and reliable workflow.

How It Works

We’ll create scripts for Windows and Linux that:

1. Capture an image or utilize an existing one.
2. Perform OCR using Tesseract (an open-source OCR engine).
3. Copy the extracted text directly to the clipboard.

---

Setup

Prerequisites

Before getting started, ensure you have the following:

1. Tesseract OCR

   • Download and install from Tesseract’s official page.
   • Install necessary language packs (e.g., -l eng for English, -l ara+eng for Arabic and English).

2. Clipboard Utilities

   • Windows: Use nircmd for clipboard operations.
   • Linux: Install xclip for clipboard management.

3. Screenshot Tools

   • Windows: Use built-in snipping tools or third-party software.
   • Linux: Install flameshot for advanced screenshot functionality.

---

Procedure

For Windows

1. Create the OCR Script

Create a batch file named sstoocr.bat and save it in a convenient location:

@echo off
:: Save clipboard to image
start nircmd/nircmd.exe clipboard saveimage screenshot.png

:: Run Tesseract OCR on the image
tesseract screenshot.png output -l ara+eng

:: Copy extracted text to clipboard
type output.txt | clip

:: Optionally, clean up
:: del screenshot.png
:: del output.txt

2. Assign a Shortcut

1. Place the script on your desktop.
2. Right-click the script and select Create Shortcut.
3. Right-click the shortcut, go to Properties, and under the Shortcut tab, assign Ctrl + Alt + O as the shortcut key.

3. Use the Script

1. Copy an image to the clipboard or take a screenshot.
2. Press Ctrl + Alt + O.
3. The extracted text will automatically be copied to your clipboard.

For Linux

1. Create the OCR Script

Create a shell script named flameshot_ocr.sh:

#!/bin/bash
flameshot gui --raw | tesseract -l eng stdin stdout | xclip -selection clipboard

Make the script executable:

chmod +x flameshot_ocr.sh

2. Assign a Shortcut

1. Open your desktop environment’s keyboard settings.
2. Add a custom shortcut:
   • Command: /path/to/flameshot_ocr.sh
   • Shortcut: Ctrl + Shift + O

3. Use the Script

1. Press Ctrl + Shift + O to open the Flameshot GUI.
2. Select the area to capture.
3. The text will be extracted and copied to your clipboard.

---

Conclusion

By following this guide, you can set up a streamlined OCR solution for both Windows and Linux. With a simple keyboard shortcut, you’ll have quick access to extracted text directly on your clipboard, saving time and effort.

Feel free to customize these scripts to better suit your needs. Happy automating, and may your workflows become ever more efficient!

Building an App Builder - Strategies, Limitations and Available Tools

As a budding app developer, creating an app builder for mobile devices is an exciting idea which I'm giving a lot of thinking since early 2019. However, there are several strategies, and limitations that need to be considered before embarking on this journey. In this blog post, I will explore these aspects in detail.

This would be a brainstorming session for me, where I'd just put all that I've found while researching this subject.

Techniques

Scratchware

Scratchware was an interesting project but is now deprecated. Its technique was unique, where the app was built on the device itself, without any internet connection. However, other app builders mostly build the app on the server. Therefore, it is not necessary that the build part should be on the server.

Scratchware was based on MIT App Inventor as per their website before the deprecation. Showing ads before each build, and giving options to arrange items (buttons, cards, inputs, labels etc.) in rows and columns were really awesome features. For logic, it used Scratch Programming blocks.

APK Editor

Another app builder that is worth mentioning is APK Editor, which uses ARSCLib. Another similar one is APK Explorer Editor, which offers a full version via Fdroid.Other repos for Apk Editor might be using apktool.jar. Apktool is also being used in many Android apps, like revanced. How are they able to run.jar tools is a mystery for me yet, as executing jar requires JRE while Android runs on Dalvik Virtual Machine.

A workaround (or not?) is to use jar library via custom Cordova plugin. Plugin docs suggest it can be done easily. See this suggestion from a stackoverflow answer:

Add lib-file element to your plugin.xml:

<platform name="android">

  <lib-file src="AztecReader.jar" />

</platform>

Anyway, ApkEditor recompiles the app on the device itself, without any internet connection. This approach proves that building an app builder on a mobile device is possible without the need for a server.

Cordova-like Environment

Creating a Cordova-like environment on a mobile device seems difficult. Even though initializing an empty Cordova app within the user's device is possible using Node Mobile or AndroidJs, compiling the APK will be tricky as it would need gradle, java jdk, android build tools, apksigner, etc. The end-users may not have these tools installed on their devices, making it difficult for them to compile the app.

Termux

Java runtime, etc., would be possible using Termux in android, but that would require end-users to have Termux installed, which may be a challenge.

Using a Sample App as a Base

Another approach could be to use a sample app as a base and replace its content at runtime using a user-defined config file. This approach is similar to the Cordova-like environment but is more simplified and straightforward.

Meta-data

One of the most popular strategies for creating an app builder is to use meta-data. In this strategy, the "app" you define is meta-data in a higher-level definition that is interpreted in a host wrapper app. This approach makes it easier to create apps as the app builder is more of a code generator.

Desktop - HTML to APK

A tool I found, and tested but never used in production or even to build anything remotely of any use for myself is Website to APK which is a desktop-based tool. The interface looks like it's built using the C# Windows Form Application. The options are really great, and it's user-friendly. 

Softonic's dev bio hyperlink suggests Pravesh Agrawal as the developer. Web, Github, Twitter.

It seems to be using all the standard tools in the background (probably running a bash script for build instructions). Options to select a URL or a local folder are awesome, along with an icon, splash screen, and setting up Admob ids in presumably pre-configured ad spaces. 

This perfectly depicts the "meta-data" type or a "base app" already set, which is modified based on the user's input. 

Available Tools

There are several tools available for creating an app builder on mobile devices. Some of these tools include: 

AppSheet: AppSheet uses a meta-data strategy to create an app builder. It interprets the higher-level definition in a host wrapper app, making it easier to create apps.

A sample response to the question "Building an App Builder - how do they do it?" on stackoverflow as a reference:

I work at AppSheet. There are two basic approaches an app builder can follow: (a) act as a code generator, or (b) implement an intepreter. In the former case, it spits out code that gets compiled into an executable package that can be installed and run on a device. In the latter case, the "app" you define is meta-data in a higher-level definition that is interpreted in a host wrapper app. Each has its strengths and weaknesses. AppSheet uses the latter approach. — Praveen Seshadri

Thunkable: Thunkable uses a simple drag-drop interface and loads of pre-defined templates and customizations. As far as I remember, It also uses Sratch for programming logic similar to Scratchware.

Andromo: Andromo is an online app builder that lets you create Android apps without any coding. It has a user-friendly interface that makes it easy to build apps.

BuildFire: BuildFire is another online app builder that offers a drag-and-drop interface for creating Android apps.

Conclusion

I'm not really sure which strategy would work the best, but a couple of them looks promising to me. For Android on Android, editing the APK and recompiling might be the easiest one. Although I've to dig deeper to understand how APK editor and the likes do it. It's not just unzip and re-zip of the package, which often results in app corruption. 

A desktop app might be simple, but dependencies should be bundled within the executable in that case, otherwise, it'd again feel like something built for advanced users.

References

Scratchware Pro continued on GitHub

How do I build a Cordova 8.x cordova.jar to include in existing Android app?

Integrating Hybrid App (Cordova) with Native App (Java android app) — Part 1 by pankajbhandari08

Decompile and Modify APKs on the go with APKTool for Android [XDA Spotlight] introduces apktool by Andro Black

Android Studio: Add jar as library? Directly or using mavenCentral as per one of the comments

Including .jar file into cordova plugin with suggestion to add lib-file in plugin

iPhone Users! Here's a Web App for Qaafiyah Expert

Tldr;

If you are in a hurry, here's the link to Qaafiyah Expert - Web:

• https://q.shakeeb.in/

The Web App and its Journey

Right from the beginning when I launched an android app for Qaafiyah Expert (an app to assist Urdu poets with rhymes, meter, dictionary, diary, designing and much more), people were requesting the same for iPhone users. As I was using the cross-platform approach for the app, building the same thing for iPhone wouldn't have taken so long. But the problem was, apple AppStore's pricing. I couldn't afford it. Well, most of us can't.

Anyway, after some research on pricings, I decided to go for a PWA (Progressive Web App), which is an installable app, but you don't need to pay a single penny to Google or Apple whatsoever. 

It does bring some drawbacks, but there are alternatives for most of the incompatible native-app functionalities. For a naïve user though, PWAs and native Android/ios apps are indistinguishable. For instance:

• Visiting a Progressive Web App asks you to "Add it to Home Screen", which is alternative to "Installing an app"
• It does have an icon, just like a native app
• It can work offline using service workers etc.

This PWA for Qaafiyah Expert had been hosted on my domain 'q.shakeeb.in' for quite a while now, as you can see in the "first commit" here. But some of the features were not working as expected, so I didn't announce it "officially." Now that the android app has been completely rewired, performance is improved and speed is optimized, I decided to use the new code-base, modified it for the web-app and deployed it. iPhone users can now finally use this app.

If you are an android user though, I strongly recommend the android version, which has some cool extra features and obvious UX advantages.

Once again, here's the link to the web-app:

Qaafiyah Expert - Live Demo

Hope this will assist in your poetry-writing journey. 

Rab raakha! 👋

Rekhta Content Scraper by Shakeeb Ahmad | For Programmers Only

Note: This is not yet available for non-programmers. Soon I'll make an easy-to-use version for all, iA.

This scraper with Node.js works for both prose and poetry. Check the GitHub repo for installation instructions.

You would need a text file with all the links you want to download the contents from. To get the list of links, you could manually collect all which interests you, or use the following to scrape all links from an author/poet page.

Bookmarklets - One Click Solution to get the links etc.

Rekhta loads 50 links at a time, and if user scrolls, it adds more content to the DOM. This extra fetch has not been automated in my code yet. (Well I tried, but parsing it wasted so much time that I preferred using manual scroll. Just let the page load, then press "end" on your keyboard. Wait for a moment, it will add all the remaining links.)

Anyway, once you have the complete list on the page, you can use the bookmarklets below to copy all of them with a click.

I've been testing this in browser console for a while now, i.e. open browser console, then paste the script, then change the page text to only what I need, then select and copy them manually. 

Later on I decided to use magic of bookmarklets to automate these tasks I've been doing repeatedly: 

• Copy all the links from the Poet/Author page.
• For LitUrdu specifically, turn them into an "object" with required properties (title, author, link, description, text) and copy it.
• Use the "object" to automatically fill-in text-boxes on new Blogger post.

Ultimate plan is to use Blogger API and post it directly, but this bookmarklet approach doesn't hurt much because most of the things I'm doing are just a click away.

Bookmarklets

Drag and drop the links to the bookmarks bar in your browser. (Ctrl+Shift+b to toggle the bar)

CopyRekhtaLinks

Use on author/poet's page to copy all the links to their enlisted work

CopyRekhta{}

Use on individual poem/story page to copy an object with properties (title, author, link, description, text). Modify as per your needs.

BloggerPaste

Use on a new Blogger post after pasting the "object" from rekhta in console. This will fill in all the required fields in the new post automatically.

Magic of Browser Bookmarks - Automate Simple Tasks using JavaScript

As I promised in #LearnedToday, I'm going to show you how much you can achieve with this little bookmark feature in the browsers.

Ever wondered how to easily remove citations from a Wikipedia page? 

What are bookmarks?

The bookmarks in the browsers are to save the links to the pages you wish to visit again, or you just find them useful and save them for later. 

Instead of creating a text file "Imp Links" and saving all the links there (I've done it a lot), you could use the browser's bookmark feature.

The shortcut to bookmark a webpage in most browsers is ctrl+b.

What more can they do?

To sum up, they can run JavaScript on a page. So instead of opening the browser console to do run a couple lines of code, you could create a bookmark and click that instead.

Example?

Whenever I needed to copy something from Wikipedia, I usually had to deal with the references/citations they have. You must've seen those, with squared brackets around numbers, something like this [1] or with a disclaimer like [citation needed], etc. I needed to remove all those. 

Initially, I used to do it in MS Word manually, by Find and Replace. I don't remember that now, doesn't matter anyway. 

Finally, I came to know about these browser bookmarklets, and then a simple regex was enough to do the work for me.

Now I have a simple bookmark. I go to any Wikipedia page, select the text I need, and click the bookmark. Viola! Citations are removed.

How to create a bookmarklet?

Got to Bookmarks Manager

1. Click three vertical dots in the upper right corner > Bookmark > Bookmark Manager

Or chrome shortcut: ctrl+shift+o

Or type in the address bar: chrome://bookmarks/

2. Click three vertical dots in the upper right corner of Bookmark manager (Shows tooltip: Organize) 

3. Add new bookmark

4. It will show a popup with two fields: Name and URL. 

5. Give any appropriate name, and in the URL bar, paste the JavaScript code you want to execute.

6. Click Save. 

You have your bookmarklet ready. 

Show/Hide Bookmarks bar with ctrl+shift+b. Clicking on the name of your bookmark will run the underlying code. 

Any easier way to do this?

If you don't want to go through all those steps, there's a simple tool called Bookmarkleter. Paste your JS code, it will generate a link that you can drag and drop to the bookmarks bar. 

For example, drag and drop the following link to your bookmarks bar. This will allow you to change fonts on any website. 

Set Font

Which bookmarklets am I using?

1. Citation Remover: Removes citations from a Wikipedia page. Drag&drop this link to the bookmarks bar: Citation Remover
2. Set Font: If a website is using bad font, use this. As I use Urdu a lot, and Urdu without Nastaleeq font looks ugly. So I apply any font to the page available in my system. Payami Nastaleeq is the default one for me.
3. Calci: A tiny calculator which returns results of simple arithmetic operations.
4. StyleStripper: Strips all CSS styles from a webpage. Helpful if I don't want to load an entire page I want to copy something from. Also works on most of the sites which disable copying using JavaScript. Click StyleStripper and you can copy the text. 

Misc. bookmarklets I created

QuoraSkip: Skip Quora-enforced 'login' popup by removing added elements and blur overlay.

To those who requested, don't complain now. (Abuzar :D) I have shared it finally. More such tips will follow. Keep visiting! And I know you will. :wink:

Rab Raakha!

PDF to Single Image - A Tutorial by 17 Year Old Me

Back in the days when I had a small Nokia phone, I wanted to do EVERTHING in that tiny device. It wasn't actually mine but because I was going to college, I was more "in need" of it than my sister.

Source: gsmarena.com [1]

The one on your right with maroon border. That was it.

Anyway, with a screen of 144x160px, I wanted to read PDFs which were stored in our desktop + laptop. Lots of books, of almost all genres I was interested in. Interestingly enough, the same neatly arranged folders are copied over to every computer I have used. So I still have all those books, plus what was added later on.

Initially, the idea to "read PDF on phone" was for the Quran, so that I could read it in the Indo-Pak Naskh font. Actually I had a Quran app in it, full text with super fast search engine, but the font used in that wasn't good enough for long tilaawat. In fact, even after getting android phone I've been searching something as fast as that app. I had been a fan of that guy who built it. Just looked it up, he goes by the name of Raza Mahi. His "Mahi Dictionary" was awesome too. All java .jar applications are things of the past now, but he has also moved on and started to build the similar apps for Android now. Good for him. I've linked his website in the references. [2]

So where was I? Yes. As I had difficulty reading the Quran in that app, I selected a PDF copy of Quran which had Arabic text in one column and its Urdu translation side-by-side. I cropped-out the translation part (making the text narrow enough to fit on my phone) and then started thinking about a way to achieve the result.

Necessity is the mother of invention they say, so I came up with two methods (discussed in the booklet below). Will attach the Quran files too for the record. Wow! Time flies. Seems like yesterday to me.

Later on when I converted many books to 'single image' using the same method, I compiled a short tutorial in the form of a booklet. I've left the whole text as is, without any correction in grammar or sentence structure, because

1. It's a reminder of my journey (read the booklet and see for yourself how writing styles change)
2. It's cute. ;)

Here's the summary of the two methods discussed in the booklet:

Method 1: Microsoft Office OneNote + MS Paint

Method 2: PDF to Images + IrfanView

Read the booklet and know how to use them. And remember it's an OLD tutorial.

DOWNLOADS

PDF to Single Image Tutorial (Booklet) : Read online or download

https://archive.org/details/PDFToSingleImageShakes.Ahmad

IrfanView: I came to know later on that this was very popular image-manipulation tool back then, and still is. Its first release was in June 1996. Now it's more powerful than ever. Check its Wikipedia page.[3]

https://www.irfanview.com

PDF to Images Converter: I still use it. Small size, works smoothly.

https://www.weenysoft.com/free-pdf-to-image-converter.html

Enjoy!

Reference

[1] Specifications of Nokia C1-01 via gsmarena [link]

[2] Raza Mahi Team - Old Apps [link]

[3] IrfanView on Wikipedia [link]