Courses on Ghafoor's Personal Blog

Grid and Cards

noreply@example.com (AG Sayyed) — Fri, 10 Oct 2025 17:06:05 +0100

Summary content goes here.

Hbstack Bootstrap Module

It comes with lot of features and components to build modern websites. The main information can be found at Hugomods.

Using Image Grid Shortcode

The shortcode takes a source directory as its input, that should be present in data directory. This file provides a correct path to images along with their title. Path can be local or external URL.

The following shortcode reads the file from a data directory and displays the images.

HugoMods

HB Framework

Razon Yang

Article Cards shortcode

Caution

Content_Panel module

noreply@example.com (AG Sayyed) — Tue, 30 Sep 2025 11:57:45 +0000

Summary content goes here.

what the content panel actually does ✅

The hb.content_panel module wires in a reusable panel that shows up on single-type pages (blog posts, docs pages, etc.). Out of the box it can surface three kinds of extras:

Edit/Source buttons – taken from the repo info you supply, so a reader can jump straight to “view source” or “edit this page” in GitHub/GitLab/etc.
Translation jump list – if you run multilingual content, it auto-lists other language variants.
Comment controls – it can toggle comments globally or per section.

So it’s not required for a page to render, but it enriches every post/doc with these meta actions instead of you wiring them manually each time.

ESLint Setup and Configuration Guide

noreply@example.com (AG Sayyed) — Sat, 20 Sep 2025 14:57:58 +0000

Master ESLint from the ground up! This comprehensive guide covers everything from basic installation to advanced configuration setups. Learn how to enforce coding standards, extend popular style guides like Airbnb and Google, configure rules for different project types, and integrate ESLint seamlessly into your VS Code workflow for consistent, high-quality JavaScript development.

🎯 What is ESLint

ESLint is a static code analysis tool for identifying and fixing problems in JavaScript code. It helps developers:

Test Driven Development Setup With Jest in VS Code

noreply@example.com (AG Sayyed) — Fri, 19 Sep 2025 09:26:07 +0000

Test Driven Development (TDD) is a software development approach where tests are written before the actual code. This method helps ensure that the code meets its requirements and behaves as expected. In this guide, we will set up a TDD environment using Jest, a popular testing framework, in Visual Studio Code (VS Code). This setup is divided into several steps to help get started with TDD effectively. Assuming you have Node.js and npm installed, follow these steps:

Spell Check

noreply@example.com (AG Sayyed) — Fri, 19 Sep 2025 00:24:23 +0000

Summary content goes here.

📝 Introduction to Spell Check in VS Code

Spell check is an essential feature for maintaining the quality and professionalism of your Markdown documents. In Visual Studio Code (VS Code), you can setup spell check functionality using extensions that help identify and correct spelling errors as you write. Two extensions that are widely used for this purpose are “Code Spell Checker” and “Spell Right”.

Install a Spell Check Extension:

Conclusion

FAQs

Prettier Setup

noreply@example.com (AG Sayyed) — Mon, 15 Sep 2025 16:40:35 +0000

Summary content goes here.

Overview

Prettier is an opinionated code formatter that supports many languages and integrates with most editors.
It enforces a consistent style by parsing your code and re-printing it with its own rules.
This helps reduce debates about code style and allows developers to focus on writing code.
Prettier can be used with vscode by installing this extension.

Installation

Follow the instructions on the above link provided to install the extension. Then create two empty files in the root of your project.

Courses on Ghafoor's Personal Blog

Grid and Cards

Hbstack Bootstrap Module

Using Image Grid Shortcode

Article Cards shortcode

Content_Panel module

what the content panel actually does ✅

ESLint Setup and Configuration Guide

🎯 What is ESLint

Test Driven Development Setup With Jest in VS Code

Spell Check

📝 Introduction to Spell Check in VS Code

Conclusion

FAQs

IBM DevOps and Software Engineering Professional Certificate

Prettier Setup

Overview

Installation