DEV Community: Omar Hussein

Finalizing my Vue.js Context Menu

Omar Hussein — Mon, 11 Dec 2023 06:42:43 +0000

In the previous posts, we discussed laying the foundation, overcoming challenges, and leveraging Vue slots for flexibility and reusability. Now, let's explore the latest advancements, including the integration of built-in keyboard shortcuts and ensuring compatibility with the project's dark theme.

Advancements and Integrations:

Reusing the Action Component:
To enhance the user experience and streamline interactions, I reused the action component provided by the FileBrowser project. This component comes equipped with built-in keyboard shortcuts for fundamental actions like delete, move, and copy, providing a consistent and familiar experience for users.
Keyboard Shortcuts for Efficiency:
Not much was needed to be done in terms of keyboard shortcuts. The project already has these features built-in and adding the context-menu allowed for enhanced productivity and making the browser interface even more user-friendly.
Dark Theme Compatibility:
Considering the diverse preferences of users, ensuring compatibility with the dark theme was important. I made sure the styling of the context menu seamlessly integrated with the project's dark theme.

Looking Ahead:

Potential Vue.js Upgrade:
As the Vue.js ecosystem evolves, it's essential to consider future upgrades. While contemplating a move from Vue 2 to Vue 3, early assessments indicate that the transition might be relatively smooth. Vue 3 introduces powerful features and optimizations, and fortunately, the changes required for our context menu seem minimal.
Ongoing Refinement:
The journey doesn't end here. Continuous refinement is key to adapting to evolving user needs and maintaining a high-quality user experience. Future steps include addressing user feedback, exploring additional features, and staying aligned with the project's overall development roadmap.

Conclusion:

From the initial design considerations to the integration of keyboard shortcuts and dark theme compatibility, every step aimed at elevating the user interface and making interactions with FileBrowser seem more natural and consistent with other file browsers. I look forward to future enhancements, potential upgrades, and the continual evolution of this essential feature in the FileBrowser project.

If you have any questions, feedback, or suggestions, feel free to reach out or open an issue with the FileBrowser project. I've been really enjoying working on this project and I regularly check for issues I can address!

Enhancing my Vue.js Context Menu component

Omar Hussein — Mon, 11 Dec 2023 06:09:41 +0000

In my previous blog post, I wrote about implementing a custom context menu in Vue.js for the FileBrowser project. I covered the initial steps, from understanding project requirements to creating a basic structure for our context menu component. Now, let's dive into the progress made, overcoming challenges, and refining the approach for a more flexible and reusable solution.

Progress and Challenges:

Basic Logic and Right-Click Functionality:
The initial focus was on establishing the fundamental logic to handle the menu popup triggered by a right-click event. This involved capturing the right-click event and toggling the visibility of our context menu. This step lays the foundation for a responsive and interactive user experience.
Creating the Menu - A Stylish Twist:
One challenge was deciding how to construct the menu itself. After some exploration, I found that customizing the style of the existing action component within the context menu was the optimal solution. Doing so helps with the overall design and consistency of the project.
Separation of Concerns with Vue Slots:
To keep the codebase clean and maintainable, we can make use of Vue slots. This approach allows for better separation of concerns, enabling encapsulation of the menu's structure and behavior within the component while providing users the flexibility to customize the content through slots, allowing future developers to tailor the context menu to specific needs in different areas of the application.

The Vue Slot Advantage:

Flexibility:
Vue slots allow developers to inject content into predefined areas of a component. This flexibility is essential for the context menu, as it allows users to seamlessly add custom options, icons, or other elements without modifying the core functionality.
Reusability:
By using Vue slots, the context menu becomes inherently more reusable. Whether it's within the FileBrowser project or another Vue.js application, the context menu can adapt to various requirements without sacrificing its core functionality.
Maintainability:
Separating concerns using Vue slots contributes to the maintainability of our code. Developers can easily comprehend and modify specific aspects of the context menu without disrupting its overall behavior. This modularity is key for ongoing development and future enhancements.

What's Next?

With the foundation laid and initial challenges conquered, our next steps will involve expanding the range of context menu options, refining the styling further, and conducting more extensive testing. In the upcoming blog post, I'll detail the evolution of the context menu and enhancing its capabilities.

Implementing a Custom Context Menu in Vue.js

Omar Hussein — Mon, 04 Dec 2023 04:00:25 +0000

Crafting a user-friendly interface is a constant task that requires ongoing refinement. As part of a project I've been recently enjoying working on, I decided to enhance FileBrowser with a new user-interface feature by introducing a custom context menu. This addition aims to empower users with quick access to relevant actions and streamlining their interaction with the application and making feel a lot more like a real file browser you would get on a desktop.

Task Overview:

My goal is to create a custom context menu that dynamically appears in the bottom right corner of the screen upon a user's right-click. This context menu will not only cater to the specific needs of the FileBrowser project but will also intelligently adjust its position to stay within the viewport.

Preparing for the Feature Addition:

Understanding FileBrowser Requirements:

Start by thoroughly understanding the FileBrowser project's current structure and user interface. Identify areas where a context menu would provide valuable functionality, such as file management actions or navigation shortcuts.

Creating a Custom Vue Component:

Design a Vue component responsible for the custom context menu. This component should encapsulate the menu's structure, styling, and behavior. Utilize the template, script, and style sections to keep your code organized.

Defining Context Menu Options:

Identify the specific actions the context menu should offer. These should map directly to the operations that are available in the header menu of FileBrowser to make access to these operations easier. Each option should have a label, possibly an icon, and a corresponding callback function.

Handling Dynamic Positioning Logic:

Implement logic to dynamically calculate the context menu's position. Account for factors such as window dimensions, menu dimensions, and cursor coordinates. This ensures the menu remains visible and accessible within the user's viewport.

Integration with Golang Backend:

If required, establish communication between the Vue.js frontend and the Golang backend of FileBrowser. Define API endpoints for backend interactions triggered by context menu actions.

Thorough Testing:

Rigorously test the custom context menu component across various scenarios. Verify its responsiveness, correct positioning, and the proper execution of each menu option. Conduct integration tests to ensure seamless communication with the backend.

Documentation and Code Comments:

Document the Vue component and describe how to use it, customize it, and the integration with the FileBrowser backend. Include clear code comments to aid future developers in understanding and maintaining the context menu functionality.

Breaking Language Barriers: Contributing to FileBrowser's Arabic Localization

Omar Hussein — Mon, 27 Nov 2023 21:39:04 +0000

Recently, I found myself drawn to FileBrowser, a web file browser built with Golang and Vue.js, and I decided to make my first contribution. However, my approach was a bit unconventional—I didn't dive into the code immediately. Instead, I leveraged my proficiency in Arabic to enhance the project's Arabic translation file. In this blog post, I'll share my experience of breaking language barriers and contributing to FileBrowser through non-code means.

The Project: FileBrowser

FileBrowser is a versatile web file browser that seamlessly integrates Golang's backend strength with Vue.js's frontend agility. Its user-friendly interface and robust features make it a popular choice for those seeking an open-source file management solution. Recognizing the global nature of open-source projects, the FileBrowser team actively encourages contributions from users around the world, including efforts to improve language translations.

My Contribution: Arabic Translation Refinement

As a native Arabic speaker, I found an opportunity to contribute to FileBrowser that aligned with my linguistic strengths. I refining the Arabic translation file for the project, aiming to make the user interface more accessible and user-friendly for Arabic-speaking users.

In my initial contribution, I focused on:

Language Accuracy: Ensuring that the translated text accurately conveyed the intended meaning in Arabic, maintaining clarity and coherence.
Consistency: Aligning terminology and phrasing throughout the interface to create a consistent and seamless user experience.
Cultural Sensitivity: Adapting expressions and text to be culturally appropriate, addressing the nuances of the Arabic language with its regional variations and dialects.

The process involved a meticulous review of the existing translation strings, making adjustments for linguistic precision and cultural context. My goal was to enhance the overall usability of FileBrowser for Arabic-speaking users.

The Impact:

While my contribution may not involve lines of code, it has an impact on the accessibility and inclusivity of FileBrowser. A well-crafted translation ensures that users, regardless of their language preference, can navigate and utilize the application effectively. In the case of Arabic-speaking users, this means a more seamless and natural experience, fostering a stronger connection with the software.

Future Plans:

My initial contribution to FileBrowser through language translation is just the beginning. I am excited about the potential for further collaboration with the project. Future plans include:

Ongoing Refinement: Continuously refining and updating the Arabic translation to accommodate changes in the project and user feedback.
Code Contributions: Actively participating in adding features to FileBrowser and contributing to the growth of the project.

Conclusion:

Contributing to open-source projects goes beyond writing code. My experience with FileBrowser showcases that leveraging non-code skills, such as language proficiency, can have a meaningful impact on the project's accessibility and user experience.

Empowering Caddy: User Friendliness with Case-Insensitive Caddyfiles

Omar Hussein — Sat, 25 Nov 2023 06:39:18 +0000

An interesting project that I recently contributed to is Caddy, a fast and extensible multi-platform HTTP/1-2-3 web server with automatic HTTPS, written in the language I'm currently exploring, Golang. My contribution and pull request address case-insensitive support to special prefixes in the Caddyfile, along with the ability to recognize files with a '.caddyfile' suffix, all inspired by a reported issue.

The Issue:

Issue #5909 on the Caddy GitHub repository sheds light on a limitation that Caddy encountered when handling Caddyfiles with specific prefixes. The issue reported that Caddy failed to recognize files with the 'caddyfile' suffix and did not handle these files in a case-insensitive manner. This presented a hurdle for users attempting to configure Caddy with files having different casing or using the '.caddyfile' suffix.

The Contribution:

The recent contribution to Caddy addresses the reported issue by introducing two key features:

Case-Insensitive Support for Special Prefix Case Caddyfile:

With this enhancement, Caddy now supports special prefixes in the Caddyfile in a case-insensitive manner. This means that users can employ different casings for these prefixes without affecting the configuration, providing a more flexible and user-friendly experience.

Support for '.caddyfile' Suffix, Also Case Insensitive:

Another notable addition is the support for the '.caddyfile' suffix. Caddy can now recognize and handle files with this suffix seamlessly. Moreover, the recognition process is performed without being case-sensitive, ensuring a consistent and intuitive user experience.

Handles Extension Check Without Case Sensitivity:

The contribution also addresses the broader issue of handling file extensions without case sensitivity. This ensures that Caddy can accurately identify and process Caddyfiles, regardless of the casing used in the file names.

These improvements not only resolve the reported issue but also enhance the overall usability of Caddy, making it more adaptive to diverse user preferences and naming conventions.

Reasons to Contribute:

The pull request associated with this contribution aligns with the core principles of open-source collaboration, offering several compelling reasons to merge the changes into the Caddy codebase:

Enhanced User Flexibility: Case-insensitive support for special prefixes and '.caddyfile' suffix empowers users to configure Caddy with greater flexibility, accommodating various naming conventions and preferences.
Improved File Recognition: Caddy's ability to recognize and handle files in a case-insensitive manner contributes to a smoother user experience, preventing potential configuration errors due to case discrepancies.
Community-Driven Progress: This contribution reflects the collaborative spirit of the open-source community, where users actively participate in refining and expanding the capabilities of the tools they rely on.

Conclusion:

Contributing to Caddy provided me with a hands-on opportunity to apply and reinforce my newfound golang skills. This recent enhancement not only resolves a specific issue but also contributes to the continual improvement of Caddy as a versatile and user-friendly web server. As you explore the world of open-source development, remember that every contribution, big or small, plays a vital role in shaping the future of the projects we depend on.

Automating Releases with GitHub Actions

Omar Hussein — Sat, 25 Nov 2023 06:29:50 +0000

Developing a static site generator (SSG) Command Line Interface (CLI) tool called TILvert was a fun experience. As I wrapped up the final lines of code, the next logical step was to share it with the world. This led me to publish TILvert to NPM, and in this blog post, I'll share the process, highlighting how I automated the release using GitHub Actions. You can find the npm package here.

Step 1: Preparing for NPM Publication

Before diving into the automation magic, I needed to make sure TILvert was polished and ready for public consumption. This involved thorough testing and ensuring that my package was not only functional but also user-friendly.

Testing and Validation

I reached out to friends and colleagues to act as beta testers, providing them with early versions of TILvert. Their feedback proved invaluable in identifying and fixing bugs, improving the user interface, and refining the overall user experience.

Step 2: Obtaining an NPM Access Token

To publish a package to NPM, you need to authenticate yourself. NPM provides access tokens for this purpose. Here’s how you can obtain one:

Visit the NPM website:
Go to the NPM website and sign in or create an account if you haven’t already.
Access Tokens:
Navigate to your account settings, and under the "Tokens" tab, generate a new token. Remember to give it the necessary permissions for publishing.
Keep it Secret:
Treat your access token like a password. Never share it publicly, and keep it secure.

Step 3: Integrating GitHub Actions for Automation

With TILvert ready and the NPM access token in hand, the next step was to automate the release process using GitHub Actions. This would ensure a seamless and consistent deployment every time a new version was ready.

Creating the GitHub Actions Workflow

Create a .github/workflows directory:
Inside your project, create a directory named .github/workflows.
Workflow YAML file:
Create a YAML file within this directory, for example, release.yml. This file defines the workflow.

name: Release
on:
  push:
    branches:
      - "master"

jobs:
  release:
    timeout-minutes: 10
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.TOKEN }}
      - uses: pnpm/action-setup@v2
        with:
          version: 7
      - uses: actions/setup-node@v4
        with:
          node-version: "20.x"
          registry-url: "https://registry.npmjs.org"

      - name: Install dependencies
        run: pnpm install --no-frozen-lockfile

      - name: Lint
        run: pnpm run lint

      - name: Format
        run: pnpm run prettier

      - name: Test
        run: pnpm run test

      - name: Build
        run: pnpm run build

      - name: Create release branch
        run: |
          git config user.email "77292466+omalk98@users.noreply.github.com"
          git config user.name "Omar Hussein"
          git checkout -b release
          git add -f dist/ package.json
          git commit -m "Create release branch"
          git push origin release --force

      - name: Publish
        run: pnpm publish --no-git-checks
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

This workflow triggers on every push to the main branch, installs dependencies, and publishes the package to NPM.

Setting up GitHub Secrets:

In your GitHub repository, go to "Settings" -> "Secrets and variables" -> "actions" and add a secret named NPM_TOKEN with the value being your NPM access token.

Step 4: Documentation and User Instructions

A crucial aspect of a successful release is clear documentation. Ensure that users can easily understand how to install and use TILvert. This is all available in the README.md file.

Install

$ pnpm install -g tilvert
# or using the release branch
$ pnpm install -g https://github.com/omalk98/TILvert.git#release

Uninstall

$ pnpm uninstall -g tilvert

Usage

$ tilvert [flags/options] <path>

Conclusion

Publishing TILvert to NPM and automating the release with GitHub Actions has been a rewarding process. With each new version, users can benefit from the latest features and improvements without hassle. I hope this guide inspires you to share your creations with the world and streamline your release process.

Optimizing Excalidraw: Simple File Size Reduction Tactics

Omar Hussein — Thu, 23 Nov 2023 15:27:47 +0000

Excalidraw is a versatile and user-friendly platform for creating diagrams, sketches, and collaborative drawings. As with any software, users and developers are constantly looking for ways to enhance its performance and efficiency. In this post, I'll explore my recent contribution to Excalidraw that addresses a crucial issue and significantly improves the file size of drawings.

The Issue:

Excalidraw users may have encountered a common concern regarding the size of save files, libraries, and the clipboard. Issue #7169 on the Excalidraw GitHub repository highlights the problem, pointing out that even small drawings could result in file sizes as large as 612K. The issue context notes that, upon inspecting the .excalidraw file with a text editor, the JSON structure is "prettified," contributing to the larger file sizes. The user suggests that minifying the .excalidraw files could save substantial space without sacrificing usability.

The Contribution:

The proposed solution comes in the form of a modification to the JSON.stringify function, ensuring that the output to the file does not include unnecessary spacing, essentially minifying the JSON. This change results in a notable reduction in file size for save files, libraries, and when copying to the clipboard.

To put this improvement into perspective, a simple test file exhibited a reduction from 31.4kb to 17.1kb. User reports indicate that the reduction becomes even more significant as drawings increase in complexity. For instance, the original issue mentioned a file size reduction from 612K to 296K when using the jq -r tostring command to minify the .excalidraw file. Notably, the minified file still opens seamlessly in the browser.

Reasons to Merge:

The pull request containing this modification presents compelling reasons to merge the changes into the Excalidraw codebase:

Reduces Size on Local/Cloud Storage:

Minifying the .excalidraw files leads to a substantial reduction in file size, addressing the concern of large storage requirements. This optimization not only benefits individual users but also contributes to more efficient cloud storage solutions.

Faster Saving on Slow Connections:

The reduced file size directly translates to faster saving, especially for users with slower internet connections. This improvement enhances the overall user experience by minimizing the time required to save and load drawings.

Conclusion:

Excalidraw continues to evolve, thanks to the active contributions of its community. The recent pull request to minimize the size of .excalidraw files is a example of how user feedback and developer expertise come together to enhance the platform's performance. By addressing the issue of inflated file sizes, Excalidraw becomes an even more efficient and user-friendly tool, catering to the diverse needs of its growing user base.

Enhancing TILvert: GitHub Actions CI and Release Workflow

Omar Hussein — Fri, 17 Nov 2023 20:38:55 +0000

Introduction

Continuous Integration (CI) has become a crucial aspect of maintaining project quality and stability. In this blog post, I'll share how I went about setting up GitHub Actions CI Workflow for my TypeScript Static Site Generator (SSG) app, TILvert, and the subsequent release workflow.

Setting Up GitHub Actions CI Workflow

To ensure the reliability of TILvert, I decided to implement a CI workflow using GitHub Actions. The main.yml file in the .github/workflows directory outlines the steps for linting, testing, and building the project on every pull request to the master branch.

# main.yml

name: CI
on:
  pull_request:
    branches:
      - "master"

jobs:
  lint:
    # ... (steps for linting)

  test:
    # ... (steps for testing)

  build:
    # ... (steps for building)

The workflow includes three jobs:

linting
testing
building

Each job is configured to run on an Ubuntu environment and utilizes the pnpm package manager for dependency management.

Comparing with My Partner's Repo

Collaborating on a project with a partner introduced me to different testing setups and CI configurations. While my project uses Vitest for testing, my partner's repo employed a different testing framework, Jest. Writing tests for a project I didn't create required understanding their codebase and testing conventions. It was a valuable experience that helped better understand testing practices others prefer to use and encouraged me to adopt a more versatile approach. Pull Request

Reflection on CI Implementation

Now that I've set up CI for TILvert, I appreciate the seamless integration of GitHub Actions into my workflow. The automatic execution of linting, testing, and building processes on each pull request provides quick feedback, enabling me to catch issues early in the development cycle. CI has become an important part of my development process, boosting my confidence in the project's stability and ensuring a consistent code quality standard.

Release Workflow for TILvert

In addition to CI, I implemented a release workflow to automate the process of creating a release branch on the master branch push.

# release.yml

name: Release
on:
  push:
    branches:
      - "master"

jobs:
  release:
    # ... (steps for linting, testing, building)

      - name: Create release branch
        run: |
          git config user.email "77292466+omalk98@users.noreply.github.com"
          git config user.name "Omar Hussein"
          git checkout -b release
          git add -f dist/ package.json
          git commit -m "Create release branch"
          git push origin release --force

This workflow, triggered on a master branch push, ensures that the latest changes are thoroughly tested before creating a release branch. The release branch includes the dist/ directory and the package.json file, ready for installation.

Successful Run

Optional Challenges and Learnings

As an additional challenge, I configured the release workflow to force-push the release branch to the remote repository. This posed some initial challenges related to authentication and permissions, but once resolved, it streamlined the release process. I learned about GitHub Actions secrets and the importance of secure practices in automated workflows.

Conclusion

Integrating CI and release workflows into TILvert has been a rewarding journey. The automated processes have enhanced collaboration, code quality, and overall project reliability. As I continue to iterate on TILvert and explore new features, these workflows will remain integral to maintaining a robust and dependable TypeScript SSG. I encourage fellow developers to delve into GitHub Actions and explore the possibilities it offers for improving their development workflows.

Enhancing Code Quality: Testing in My TypeScript SSG App

Omar Hussein — Wed, 08 Nov 2023 18:58:44 +0000

Developing a robust, error-free open-source project is a goal every developer wishes to achieve. One of the best ways to ensure the reliability and correctness of your codebase is through testing. As I added testing to my TypeScript Static Site Generator (SSG) app, I encountered challenges, made exciting discoveries, and solidified my belief in the power of testing.

Choosing the Right Tools: Introducing Vitest

Selecting the appropriate testing framework is very important. After working with Jest for JavaScript and JUnit for Java in the past, I opted for Vitest for my TypeScript SSG app TILvert. Vitest is a fast, modern, and efficient testing framework for JavaScript and TypeScript projects. It offers a clean and simple syntax, making it easy to write and understand test cases and since it uses the same syntax as Jest, I felt right at home.

Setting Up Vitest in My Project: A Step-by-Step Guide

Implementing testing in your project might seem daunting, but with the right guidance, it becomes manageable. Here's a detailed guide on how I set up Vitest in TILvert:

Installation:

npm install --save-dev vitest

Configuration:

Although Vitest comes with sane defaults for small projects, you may wish to add some configuration to modify your testing behavior.

Create a vitest.config.js file in your project directory to configure Vitest. Define your test files and other necessary configurations.

Example configuration:

export default {
  files: ['src/**/*.test.ts'],
  // Other configuration options...
};

Writing Test Cases:

Write test cases using Vitest's simple syntax. Ensure thorough coverage of your codebase, testing different functionalities and edge cases.

import { describe, expect, test } from "vitest";
import { sum } from "./my-math.ts";

describe("Test Math Logic", () => {
  test("Test Sum", () => {
    expect(sum(1, 2, 3).toBe(6);
  });
});

Running Tests:

Execute tests using the following command:

npx vitest

Alternatively, if you have Vitest installed locally you may run the vitest command, or if it is included in package.json and installed, you can add a runner in the package.json file.

"scripts": {
    "test": "vitest --run",
    "test:watch": "vitest --watch"
}

Lessons Learned and Aha Moments

While writing test cases for TILvert, I had several "aha!" moments. I realized that some of my logic was generating incorrect HTML tags in specific scenarios. This discovery not only improved my understanding of the code but also enhanced the overall user experience. Additionally, I encountered minor bugs that had gone unnoticed during the development phase. These bugs, once surfaced by the tests, were promptly fixed, ensuring a smoother user experience.

Key Takeaways

As for the future, I am convinced that testing will be a fundamental part of my projects. The assurance it provides in terms of code quality and reliability is unparalleled. I will continue exploring new testing frameworks and tools, ensuring that my open-source projects are of the highest quality and provide an exceptional user experience.

Integrating testing into TILvert was a challenging yet rewarding experience. It not only improved the app's reliability but also deepened my understanding of the codebase. I encourage fellow developers to embrace testing in their projects, as it is a vital step toward creating robust and dependable software solutions.

Preparing Your TypeScript Project for Consistent Contribution

Omar Hussein — Sat, 04 Nov 2023 05:14:59 +0000

Developing a TypeScript project can be exciting, but as your codebase grows, maintaining consistency and quality becomes crucial. To streamline your development process and making sure code integrity remains a priority, integrating tools like ESLint, Prettier, Husky pre-commit hooks, and configuring .vscode extensions.json settings can boost your workflow significantly.

Setting the Stage: Prettier Formatter

Before diving into the details, let’s assume you’ve already integrated Prettier into your project. Prettier ensures consistent code formatting and can be easily customized to fit your team’s preferences. If you haven’t added it yet, make sure to do so and configure it according to your project’s needs.
Simply install it with pnpm or npm and setup your preferred config in the .prettierrc file.

pnpm i prettier

Step 1: ESLint Setup

ESLint is a powerful tool for identifying and fixing common coding issues. To get started, install ESLint and its TypeScript parser:

npm install eslint @typescript-eslint/eslint-plugin eslint-config-standard-with-typescript eslint-plugin-import eslint-plugin-n eslint-plugin-prettier eslint-plugin-promise --save-dev

Next, create an ESLint configuration file in your project’s root directory:

npx eslint --init

Follow the prompts to set up your ESLint configuration. Ensure you select TypeScript as the project type and choose the appropriate options based on your project requirements.

Step 2: Husky Pre-commit Hooks

Husky allows you to set up Git hooks easily. Git hooks enable you to run scripts before committing changes. To integrate Husky into your project, install it using npm:

npm install husky --save-dev
npx husky add .husky/pre-commit "npm lint && npm prettier"

Once Husky is installed, add the same pre-commit hook to your package.json file:

"husky": {
  "hooks": {
    "pre-commit": "npm run lint && npm run prettier"
  }
}

This configuration runs ESLint on staged .js and .ts files, fixes any issues automatically, and stages the changes for commit.

Step 3: .vscode Extensions.json Settings

Visual Studio Code provides a powerful extension system that enhances the editor’s functionality. You can configure these extensions on a per-project basis using .vscode/extensions.json. Create this file in your project’s .vscode directory if it doesn’t exist already.

Here's an example of .vscode/extensions.json for TypeScript development:

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-typescript-tslint-plugin"
  ]
}

In this configuration, I recommend three extensions:

dbaeumer.vscode-eslint: Integrates ESLint into VS Code, highlighting and fixing issues directly within the editor.
esbenp.prettier-vscode: Provides Prettier integration, ensuring consistent code formatting as you code.
ms-vscode.vscode-typescript-tslint-plugin: Offers TypeScript and TSLint support, aiding in identifying and fixing linting errors in your TypeScript code.

By configuring these extensions, you enhance your development environment and ensure a seamless coding experience.
Wrapping Up

Integrating ESLint, Prettier, Husky pre-commit hooks, and configuring .vscode extensions.json settings can significantly improve your TypeScript project’s quality, consistency, and overall development experience. By following these steps and customizing the configurations to fit your specific needs, you can optimize your workflow, catch errors early, and collaborate more effectively with your team.

Docusaurus: Copying the sitemap feature

Omar Hussein — Fri, 03 Nov 2023 04:17:50 +0000

In my last post i talked about Docusaurus's sitemap generator feature that enhances the search engine optimization (SEO). By understanding its logic and flow, I successfully implemented a similar functionality tailored to my own application. I will do a quick walkthrough of my implementation, explaining the key decisions made during the process.

1. Understanding the Docusaurus Sitemap Generator Logic

Docusaurus's sitemap generator is designed to filter out specific routes based on exclusion criteria, ensuring that only SEO-friendly pages are included. Avoiding the exclusion criteria for now, I replicated this logic in my own implementation, focusing on two essential components:

a. Sitemap Construction:

To construct the sitemap, I utilized the popular npm package "sitemap." This package facilitates the creation of a structured sitemap, ensuring that each URL is correctly formatted with trailing slashes and base URLs. The use of the SitemapStream class enabled seamless construction and formatting of the sitemap content.

b. Integration and Usage:

I integrated my custom sitemap generator into my SSG application, similar to how it is seamlessly integrated into Docusaurus. This integration allows the sitemap generation process to be part of my build workflow, ensuring that an up-to-date sitemap is generated each time I update my website content.

2. Implementation Details

a. Initialization:

I initiated the sitemap generation process by initializing essential variables and validating the presence of the site's URL in the application configuration. This step ensures that the sitemap contains accurate and relevant URLs.

b. Sitemap Generation:

Valid routes, which passed the exclusion checks, were formatted with appropriate trailing slashes and base URLs. These formatted routes were added to the sitemap stream. Once all valid routes were added, the sitemap stream was converted into a string, representing the final structured sitemap content.

c. Getting the Routes:

One of the important steps was to get the route links dynamically. To achieve this, I designed a recursive mechanism that reads the output directory of my SSG application. By recursively traversing the directory structure, I gathered a map of all the files and their respective locations within folders. I then passed this information to the sitemap generator function which uses the paths as links.

The End

Understanding the inner workings of Docusaurus's sitemap generator gave me with valuable insights into creating SEO-friendly sitemaps for static websites and be able to generate the map dynamically based on the files rather than manually adjusting the map.

Docusaurus: Understanding the sitemap feature

Omar Hussein — Fri, 03 Nov 2023 01:05:41 +0000

Docusaurus, the popular static site generator, simplifies the process of building documentation websites. Among its powerful features is the sitemap generator, a vital component for enhancing a site's search engine optimization (SEO).

Exploring the Code

1. `isNoIndexMetaRoute` Function:

This function is crucial for determining whether a specific route should be excluded from the sitemap. It checks the HTML head of a page for a meta tag with the name "robots" and the content "noindex". If found, the route is excluded from the sitemap. This ensures that pages marked as 'noindex' in their meta tags are not included in the generated sitemap.

2. `createSitemap` Function:

Input Parameters: The function takes several parameters, including siteConfig (Docusaurus configuration), routesPaths (an array of route paths), head (HTML head content for each route), and options (plugin options for the sitemap).

Exclusion Logic: The function filters out routes that should not be included in the sitemap. Routes ending with 404.html are excluded, as are routes matching patterns specified in ignorePatterns from the options. Additionally, routes with 'noindex' meta tags, identified by isNoIndexMetaRoute, are excluded.

Sitemap Construction: This process uses a popular npm package by the obvious name of sitemap. The included routes are formatted with appropriate trailing slashes and base URLs. The function constructs a sitemap using the SitemapStream class and writes the formatted routes into the sitemap.

3. Integration and Usage:

This sitemap generator function is typically integrated into Docusaurus build processes or plugins. It generates a structured sitemap for the entire documentation website, improving its discoverability by search engines.

Understanding the Flow

Initialization: The function begins by initializing necessary variables and checking if the site's URL is provided in the configuration. If not, an error is thrown to ensure the URL is properly set.

Exclusion Checks: The function checks each route for exclusion criteria. If a route matches any exclusion condition (404 page, ignore patterns, or 'noindex' meta tag), it is skipped from the sitemap generation process.

Sitemap Generation: Valid routes are formatted, including trailing slashes and base URLs, and added to the sitemap stream. The sitemap stream is then converted to a string and returned as the final output.

Conclusion

Understanding the inner workings of the Docusaurus sitemap generator gives valuable insights into how SEO-friendly sitemaps are created for static websites. By examining the logic and flow of the code, this helps me understand how to integrate this logic into my own SSG application, which I will talk about in my next post!