DEV Community: Bhavik Mistry

Release 0.4 final release

Bhavik Mistry — Tue, 12 Dec 2023 17:41:03 +0000

Now this is my final blog post of Release 0.4.

Issue 1(Resolving Time Display Problem)

The maintainer like my contribution and merge that contribution to the main branch.
This is my pull request: https://github.com/ShivamMadlani/chatApp/pull/8

Issue 2(Integrating a Map for Pickup Locations)
After doing the last commit I thought of doing some improvement in user interface, enable easy pickup location selection, and enhance overall usability.

Key Changes and Features
The latest update includes seamless geolocation integration, automatically fetching users' current positions. Two new buttons, "Select Spot" and "Confirm Location," enhance user interaction. Distance Calculation dynamically computes and shows the distance between the user's location and pickup spots, displayed alongside location buttons. Interactive Map Markers highlight selected spots for an engaging experience. The updated styling ensures a cohesive and visually pleasing appearance for both the map and location buttons.

This is the code I have inserted for Select spot button and confirm location button:

// New buttons for selecting and confirming a pickup location
<button
  className={`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg ${selectedSpot ? '' : 'cursor-not-allowed'}`}
  onClick={handleSelectLocation}
  disabled={!selectedSpot || isLocationConfirmed}
>
  Select Spot
</button>

<button
  className={`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg ${isLocationConfirmed ? '' : 'cursor-not-allowed'}`}
  onClick={handleConfirmLocation}
  disabled={!isLocationConfirmed}
>
  Confirm Location
</button>

This is was my final file that I have created: https://github.com/hamitsehjal/CampusCart-FRONTEND/blob/main/src/pages/Map.jsx

This was my both pull request which show my over all implementation of Map:
https://github.com/hamitsehjal/CampusCart-FRONTEND/pull/41
https://github.com/hamitsehjal/CampusCart-FRONTEND/pull/47

Issue 3(Implementing ESLint and Resolving Errors)

In this final part I have resolve the remaining lint errors.
Below are few errors examples that I have resolved:
1. eslint-disable-next-line Usage
In the file tests\integration.js, we encountered an error related to an unused variable done. By researching, we discovered that adding done() on line 110 resolves this issue. This is a common practice in asynchronous testing frameworks.

2. Unused Function Elimination
We identified an unused function generateUID and responsibly removed it from the codebase. Cleaning up unused code enhances code maintainability and readability.

3. Unsafe Usage of Return Statement
An error related to the unsafe usage of a return statement in the server\check_output_directory.js file was resolved. This was achieved by understanding that placing a return statement in a finally block can lead to unexpected behavior.

Then I have added the the rules and global variable to the .eslintrc.js file:

globals: {
    Tools: true,
  },
  rules: {
    "no-prototype-builtins": "off",
    "no-unused-vars": [
      "error",
      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
    ],
    semi: ["error", "always"],
    "no-cond-assign": ["error", "always"],
    curly: "error",
    "no-unsafe-finally": "off",
  },

Then after when I run eslint . --fix command all the lint error get resolved.
This is my pull request:https://github.com/lovasoa/whitebophir/pull/297

This is all i have done in my 0.4 release.

Release 0.4 Progress

Bhavik Mistry — Tue, 12 Dec 2023 16:45:02 +0000

Progress on Issue 1(Resolving Time Display Problem)

The first step in addressing the time display issue was to conduct a comprehensive walkthrough of the entire repository. I wanted to pinpoint where the time-related code resided, and it didn't take long to discover its existence within the view/script file.

Research and Solution Implementation
Now that I knew more precisely where the issue was, I set out to find a reliable and effective fix. The suggested method required figuring out the time difference between the message sending time and the current time using JavaScript's Date() object.
Here's a snippet of the code I have added to tackle the issue:

function formatTimestamp(time) {
  const messageTime = new Date(time);
  if (isNaN(messageTime.getTime())) {
    throw new Error("Invalid date");
  }

  // Your formatting logic here based on the expected format
  const options = { weekday: "long", hour: "2-digit", minute: "2-digit" };
  return messageTime.toLocaleString([], options);
}

socket.on("new_message", (data) => {
  try {
    // Assuming data.time is in the format "H:mm"
    const [hours, minutes] = data.time.split(":");
    const messageTime = new Date();
    messageTime.setHours(parseInt(hours, 10));
    messageTime.setMinutes(parseInt(minutes, 10));

    if (isNaN(messageTime.getTime())) {
      throw new Error("Invalid date");
    }

    const formattedTime = formatTimestamp(messageTime.toISOString());

    appendMessage(data.sender, data.text, formattedTime);
  } catch (error) {
    console.error("Error parsing date:", error);
  }
});

I have done with the issue 1 and now waiting for the feedback and approval of the maintainer.

Progress on Issue 2(Integrating a Map for Pickup Locations)

In order to comprehend the complexities of map integration, I conducted extensive study. In order to understand the best practices and acquire insights into utilizing maps within our CampusCart application, I dug into the Google Cloud Platform.

I implemented the map feature by taking specific actions after conducting the research. I have added a new file, Map.jsx, to the CampusCart-FRONTEND repository's src/pages directory. The map functionality is incorporated using this file as a base.

Using the "@react-google-maps/api" package, I optimized integration and made Google Maps embedding easier. The first commit demonstrates the development of Map.jsx by creating a basic code structure for the map to be displayed and interactive buttons that allow users to quickly indicate where they will be picked up.

This is my Map.jsx file:

import React, { useState } from 'react';
import { GoogleMap, LoadScript, MarkerF } from '@react-google-maps/api';

const Map = () => {
  const mapContainerStyle = {
    width: '80%',
    height: '400px',
    borderRadius: '20px'
  };

  const locations = [
    { name: 'Seneca Newnham Campus', position: { lat: 43.796064317162404, lng: -79.34858433530803 }, address: '1750 Finch Ave E, North York, ON M2J 2X5' },
    { name: 'Seneca Markham Campus', position: { lat: 43.850033105714054, lng: -79.36710996197064 }, address: '8 The Seneca Way, Markham, ON L3R 5Y1' },
    { name: 'Seneca King Campus', position: { lat: 43.95435741446387, lng: -79.51980213157469 }, address: '13990 Dufferin St, King City, ON L7B 1B3' },
  ];

  const [selectedLocation, setSelectedLocation] = useState(null);

  const handleLocationClick = (index) => {
    const location = locations[index];
    setSelectedLocation(location);
  };

  const handleShowAllClick = () => {
    setSelectedLocation(null);
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        gap: "20px",
        paddingBottom: "20px",
      }}
    >
      <h1 className='font-bold pt-4 text-2xl font-serif'>Select The Location</h1>
      <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}>
        <GoogleMap
          mapContainerStyle={mapContainerStyle}
          zoom={selectedLocation ? 15 : 10}
          center={selectedLocation ? selectedLocation.position : { lat: 43.850033105714054, lng: -79.36710996197064 }}
        >
          {locations.map((location, index) => (
            <MarkerF
              key={index}
              position={location.position}
              onClick={() => handleLocationClick(index)}
            />
          ))}
        </GoogleMap>
      </LoadScript>

      <div className="grid grid-rows-4 grid-flow-col gap-4">
        {locations.map((location, index) => (
          <button
            key={index}
            className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg'
            onClick={() => handleLocationClick(index)}
          >
            {location.name}
          </button>
        ))}

        {/* Button to show all locations */}
        <button
          className='bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg'
          onClick={handleShowAllClick}
        >
          Show All
        </button>
      </div>

      {selectedLocation && (
        <div>
          <div style={{ backgroundColor: 'Red', padding: '10px', borderRadius: '8px' }}>
            <p className='text-white font-bold'>{selectedLocation.address}</p>
          </div>
        </div>
      )}
    </div>
  );
};

export default Map;

Progress on Issue 3(Implementing ESLint and Resolving Errors)

To start, I carefully examined the repository structure, noticing both client-side and server-side code residing in the root of the repository. With this understanding, I proceeded to explore the official ESLint documentation to ensure a seamless integration into the project.

With this I have setup ESLint and created .eslintrc.js file.
This is my .eslintrc.js file:

module.exports = {
  env: {
    commonjs: true,
    es2021: true,
    node: true,
  },
  extends: "eslint:recommended",
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
  rules: {  /* Add your rules here */ },
};

Then after I run the command eslint . command it showed me the below errors:

At the moment I just have solved the errors related to no-undef means the variables are not define.

In the next step I will dealt with the other errors.

Release 0.4 Planning

Bhavik Mistry — Mon, 11 Dec 2023 22:42:47 +0000

In this blog post, I'll discuss three GitHub issues I'll be working on related to ESLint, integrating map and fixing time display format in open source projects for my release 0.4.

Issue 1: Time Display Problem

Problem:
The time displayed under messages in the application is not rendering correctly. This issue aims to address the timestamp inconsistencies and ensure accurate and consistent display.

Next Steps:
To address this issue, my plan includes:

Familiarizing myself with the project repository and need to do research on how can I
Review and refactor code responsible for rendering message timestamps. Ensure consistent and user-friendly timestamp formatting.
Implement a real-time update mechanism for message timestamps. Utilize appropriate libraries or technologies for efficient real-time updates.
Conduct thorough testing to confirm resolution. Verify accuracy and consistency of timestamps.
Handle time zones for global users. Address visual inconsistencies or alignment issues in message display.

Issue 2: Adding Pick Up Location to the Campus Cart Project

Problem:
This is issue involve the implementation of the Google map from where the user can select the pick up location for their grocery pickup.

Next Steps:
To address this issue, my plan includes:

Get familiar with Google Map API and Google cloud platform.
How to add the Google Map into the application.
Add the 3 pick up location for the grocery pick up.

Issue 3: lovasoa/whitebophir - Implementing ESLint and Resolving Errors

Problem:
This issue involves implementing ESLint in the repository and addressing errors that may arise during the process. Also have to add ESLint job to the CI.yml file

Next Steps:
To tackle this issue, my approach includes:

Researching the repository's current code quality and potential ESLint configurations.
Integrating ESLint into the project and configuring it appropriately.
Identifying and resolving any errors or warnings reported by ESLint.
Collaborating with the repository maintainers and community to ensure the changes align with project goals.

My Hacktoberfest Journey: A Recap of Contributions and Learnings

Bhavik Mistry — Mon, 27 Nov 2023 18:07:41 +0000

I had an amazing experience starting my open-source journey during Hacktoberfest. It was full of obstacles, educational opportunities, and worthwhile contributions. I'll walk you through my three contributions to open-source projects during Hacktoberfest in this blog post recap and give an update on my progress so far.

1. My Journey into Open Source: A Hacktoberfest Contribution to Curio

In my first blog post, I shared the excitement of diving into the vast world of GitHub repositories during Hacktoberfest. Navigating through numerous projects, I found myself drawn to Curio. The contribution focused on improving the documentation by creating templates for issue reporting and pull requests. The experience allowed me to understand the importance of clear and standardized contributions and appreciate the collaborative nature of open source.

2. Navigating the Open Source Seas: My Second Hacktoberfest Contribution to Turbo NextUI Starter

My second journey took me to the turbo-nextui-starter repository, where I discovered that the CONTRIBUTING.md file was missing. Inspired to improve contributors' access to the project, I took on the task of producing this important file. The emphasis of the contribution was on creating a friendly environment for collaboration, rather than just coding. It was a worthwhile learning experience to carefully consider the different ways that people engage with the project when creating the CONTRIBUTING.md file.

3. Contributing to Open Source: Adding Prettier Feature to Live-ATC

In my third blog post, I documented my contribution to the Live-ATC repository by addressing Issue #9 – adding a Prettier feature. This involved integrating Prettier to maintain consistent code styling and readability. The implementation process included installing Prettier, configuring formatting rules, creating a .prettierignore file, and finally, submitting a pull request. The approval of the pull request marked the successful integration of the Prettier feature into the project.

Reflection

I've improved my technical abilities and developed a greater awareness of the inclusive and cooperative nature of the open-source community as a result of my Hacktoberfest experience. Every input brought with it special difficulties and chances for development. My path covered a variety of project development facets, from upgrading documentation to generating a CONTRIBUTING.md file and incorporating a code formatter.

Key Learnings:

Collaboration: Engaging with maintainers and fellow contributors showcased the collaborative spirit of the open-source community. Receiving feedback and having pull requests approved and merged was immensely rewarding.
Documentation: Understanding the importance of clear and thorough documentation became evident in each contribution. Creating templates and guidelines streamlined the contribution process for both users and maintainers.

I look forward to continuing my journey in open source, armed with the knowledge, experiences, and connections gained during Hacktoberfest.

Adding Code Formatting to Whitebophir Project: A Journey of Contribution

Bhavik Mistry — Sat, 25 Nov 2023 08:36:13 +0000

My second open-source contribution to the "Whitebophir" project concentrated around introducing code formatting as a means of improving project quality. This blog post explains the actions I took, and the valuable lessons I learned in the process. It emphasizes that contributing to open source goes beyond writing code and highlights how the project can be improved overall.

The Issue

The journey began with a specific issue: Link to Issue #291. I have requested to integrate code formatting into the project and incorporate it into the continuous integration (CI) workflow.

Planning and Setup

Install Prettier

Install the Prettier into the machine locally:

npm install --save-dev prettier

Prettier Configuration

The first step was to introduce Prettier, a popular code formatter, to the project. I added a .prettierrc file with the following configurations:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80
}

Ignoring Unnecessary Files

To ensure Prettier didn't interfere with certain files, I created a .prettierignore file:

package.json
package-lock.json
node_modules/
.DS_Store
*.html

Integrating Prettier into Package.json

I updated the package.json file to include Prettier scripts:

"prettier": "prettier . --write",
"prettier-check": "prettier . --check"

Implementation

With the groundwork laid, it was time to incorporate Prettier into the project's CI workflow.

CI Workflow Update

I modified the .github/workflows/CI.yml file to include a step for Prettier:

format:
  runs-on: ubuntu-latest

  steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Install dependencies
      run: npm install

    - name: Run Prettier check
      run: npx prettier --check .

Challenges and Learnings

CI Configuration
Configuring CI workflows can be intricate. I faced challenges in ensuring Prettier worked seamlessly within the CI environment. Debugging and refining the workflow was an enlightening experience.

Pull Request

My pull request, Link to Pull Request #292, encapsulates the entire journey. The addition of code formatting not only improves the project's consistency but also sets the stage for future contributors.

Resolving React Hook Error and Building a Simple Todo List Page

Bhavik Mistry — Sat, 25 Nov 2023 00:45:57 +0000

Hello fellow programmers! I invite you to read this blog post as I share the details of my recent experience making contributions to the open-source "-React-Learning-Project." My effort was centered around fixing a React Hook error. I'll walk you through the steps I took to fix the problem while sharing my experience, and I'll explain how creating a simple Todo List page was a crucial part of the solution.

Background

The issue (#12) reported a React Hook error, indicating the misuse of a React Hook without importing it from the 'react' library. To address this issue, I created a new file, TodoList.js, under the src/components directory. The goal was not only to fix the error but also to enhance the project by adding a functional Todo List feature.

Fixing the React Hook Error

The error was related to using React Hooks without proper import statements. I addressed this by importing the useState hook from the 'react' library at the beginning of the TodoList.js file. This ensured that React Hooks were correctly utilized within the component.

import React, { useState } from "react";

Implementing the Todo List
I proceeded to build a simple Todo List page using React. Here are the key components of the implementation:

State Management: I utilized the useState hook to manage the state of the todo items and the input for adding new todos.
Adding Todos: Implemented the handleAddTodo function to add a new todo to the list when the "Add" button is clicked.
Deleting Todos: Created the handleDeleteTodo function to remove a todo when the "Delete" button is clicked.
Toggling Todo Status: Implemented the handleToggleTodo function to toggle the completion status of a todo when the checkbox is clicked.

  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  const handleAddTodo = () => {
    if (newTodo.trim() !== "") {
      setTodos([...todos, { text: newTodo.trim(), checked: false }]);
      setNewTodo("");
    }
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  const handleToggleTodo = (index) => {
    const newTodos = [...todos];
    newTodos[index].checked = !newTodos[index].checked;
    setTodos(newTodos);
  };

This is the complete src/components/TodoList.js file.

Testing and Measuring Progress

During the development process, I thoroughly tested the Todo List functionality to ensure that it worked as expected. I measured my progress by checking off the tasks mentioned in the issue and verifying that the React Hook error was resolved.

This is my Pull Request #14

Contributing to Open Source: Adding Prettier Feature to Live-ATC

Bhavik Mistry — Fri, 24 Nov 2023 09:14:39 +0000

During my search for the third repository to contribute to, I stumbled upon liv-atc repository. In this repository I worked on Issue #9, involved adding a Prettier feature to the project. This blog post will detail the process I followed, the solution I implemented, and the impact of my contribution.

Understanding the Issue

The topic of discussion for issue #9 was how to integrate Prettier into the project. Prettier is a popular code formatter that aids in keeping a codebase's coding styles uniform. Enforcing a set of formatting rules was intended to improve the project's code quality and readability.

Solution Implementation

To implement the Prettier feature, I followed these key steps:

1. Install Prettier:

I started by installing prettier using the command given below:

npm install --save-dev prettier

2. Prettier Configuration

Next, I created a .prettierrc file at the root of the project. This file defines the formatting rules that Prettier should apply. Here is a snapshot of the configuration:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}

These configurations ensure consistent code styling, including aspects like indentation, line length, and the use of single quotes.

3. Prettier Ignore

Next, I created a .prettierignore file to specify files and directories that should be excluded from Prettier formatting. This helps in avoiding unnecessary modifications to certain files. The contents of the file were:

package.json
package-lock.json
node_modules/
.next

4. Pull Request

After implementing the Prettier feature locally and ensuring that it worked seamlessly with the project, I created a pull request #11. Which is later approved by the maintainer of the repository.

Navigating the Open Source: My Second Hactoberfest Contribution to turbo-nextui-starter

Bhavik Mistry — Tue, 21 Nov 2023 08:21:03 +0000

During my search for the second repository to contribute to, I stumbled upon godkingjay's turbo-nextui-starter repository. Interestingly, there was no CONTRIBUTING.md file in this repository. This motivated me to work on this repository. This blog post documents my specific contribution to the project, focusing on the creation of the CONTRIBUTING.md file.

Issue Identification

The issue I tackled was succinctly described in Issue #1, which called for the addition of a CONTRIBUTING.md file. This file plays a crucial role in guiding potential contributors on how to engage with the project, making the contribution process more accessible and streamlined.

What i have learned to fix this issue?

To address this issue effectively, I needed to familiarize myself with the project's contribution guidelines and understand the expectations set by the maintainers. Learning how to structure a meaningful CONTRIBUTING.md file required research into best practices for open-source projects and understanding the specific needs of turbo-nextui-starter.

Crafting Solution

To resolve the issue, I generated a CONTRIBUTING.md file. This file serves as an extensive guide for contributors, divided into two primary sections: "I Have a Question" and "I Want to Contribute." The former offers guidelines for asking questions, urging users to search for existing issues before creating new ones. The latter provides clear, step-by-step instructions to guide potential contributors through the forking and pull request process.

Reflection on the contribution

Working on this issue was a valuable experience. It wasn't just about coding but also about creating a welcoming environment for collaboration. Crafting the CONTRIBUTING.md file required thoughtful consideration of the diverse ways people interact with the project, from asking questions to submitting code changes. The templates I added aim to streamline these interactions, making it easier for both contributors and maintainers.

This is my Pull Request.

My Journey into Open Source: A Hactoberfest Contribution to Curio

Bhavik Mistry — Tue, 21 Nov 2023 06:47:37 +0000

Embarking on my open-source journey during Hacktoberfest was both thrilling and challenging. As a growing developer, this event provided me with a stimulating chance to explore the vast world of GitHub repositories and offer significant contributions. The vast amount of projects can be overwhelming for newcomers, but after careful exploration, I stumbled upon a project that caught my interest - Curio. I became interested in the Curio repository and will discuss my experience working on a particular issue for Curio in this blog post.

The Contribution

I decided to contribute by making improvements to the documentation after carefully considering the project. An issue had previously been created especially for documentation work. Acknowledging the significance of thorough documentation in any open-source project, I saw a chance to improve issue reporting and pull request submission through the creation of templates.

Crafting a Solution

To address the issue, I created two essential templates - one for reporting the issues and another for pull requests.

1.ISSUE_TEMPLATE.md:

---
name: Bug Report
about: Report a bug to help us improve
---
## Bug Report
**Describe the bug:**
A clear and concise description of what the bug is.
**To Reproduce:**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
**Expected behavior:**
A clear and concise description of what you expected to happen.
**Screenshots:**
If applicable, add screenshots to help explain your problem.
**Additional context:**
Add any other context about the problem here.

2.PULL_REQUEST_TEMPLATE.md

**Description:**
Describe your changes in detail.

**Issue:**
Closes # (if applicable)

**Type of change:**
- [ ] Bug fix
- [ ] New feature
- [ ] Code refactor
- [ ] Documentation update

**Checklist:**
- [ ] My code follows the style guidelines of this project.
- [ ] I have tested my changes.
- [ ] I have updated the documentation accordingly.
- [ ] My changes generate no new warnings or errors.

**Screenshots (if applicable):**

**Additional context:**
Add any other context about the pull request here.

These templates aimed to streamline the process for users contributing to Curio, ensuring that bug reports and pull requests follow a standardized format.

Reflections on the Contribution

Working on this issue was a valuable experience. It allowed me to delve into the project's documentation structure, understand the importance of clear and standardized contributions, and improve my skills in writing effective templates.

The collaborative nature of open source was evident throughout the process. Engaging with the Curio, receiving feedback, and ultimately having my pull request approved and merged (PR #85) was immensely rewarding.

Testing with TxtToHTML Project

Bhavik Mistry — Tue, 14 Nov 2023 21:01:30 +0000

As developers, we are aware of how crucial testing is to promising the stability and dependability of our code. I'll discuss my experience incorporating testing into the TxtToHTML project, a tool that creates HTML from text and markdown files, in this blog post. I'll go over the testing framework, the tools selected, how it was set up, what I learned, and how testing affected the project.

Testing Framework and Tools

I choose the popular Jest testing framework for JavaScript/Node.js projects for the TxtToHTML project. Jest is well-known for its speed, ease of use, and integrated features like mocking and snapshot testing. Within the JavaScript community, it is widely used and offers a user-friendly testing environment.

Jest:
Jest is an interesting framework for testing JavaScript applications, emphasizing ease of use. It is created by Facebook and is intended to be simple to use and set up. JavaScript apps, such as our Node.js project, are especially well suited for testing with Jest.

Why Jest:

Ease of Use: Jest's straightforward setup and minimal configuration make it easy for developers to get started with testing.
Fast Execution: Jest runs tests in parallel, providing quick feedback on the codebase's health.
Built-in Features: Jest comes with built-in functionalities like mocking, snapshot testing, and code coverage, reducing the need for additional tools.

Setting Up Jest in TxtToHTML

Setting up Jest in the TxtToHTML project was a seamless process. Here's a step-by-step guide to help other developers set up Jest in their projects:

Install Jest:

npm install --save-dev jest

Update Package.json: Add the following script to your package.json file to run Jest:

"scripts": {
  "test": "jest"
}

Create Jest Configuration: Jest can be configured through a jest.config.js file. Here's a basic configuration:

// jest.config.js
module.exports = {
  testEnvironment: 'node',
};

Update .eslintrc.js file: Add the following env to the .eslintrc.js file:

env: {
   jest: true,
},

Write Tests: Create a test directory in the root of your repository and add the test files. You can have a look at my test directory.
Run Tests: Execute the following command to run tests:

npm test

Writing Test Cases:

While writing test cases for TxtToHTML, several insights emerged:

Insights:

Comprehensive Coverage: Writing tests forced me to consider various code paths, ensuring comprehensive coverage. I had to think about "good" and "bad" values, different input scenarios, and potential edge cases.
Function Behavior: Tests helped clarify the expected behavior of functions. Defining test cases for specific inputs and understanding the anticipated outcomes enhanced my understanding of each function's purpose.

Lessons Learned and Future Testing

This testing journey with TxtToHTML was a valuable learning experience. Here are some key takeaways:

Importance of Testing: Testing aims to increase trust in the codebase in addition to identifying bugs. Extensive testing serves as a safeguard, enabling code modifications without the concern of impairing current functionality.
Jest as a User-Friendly Framework: For JavaScript projects, Jest is a great option because of its powerful features and ease of use, like built-in mocking and snapshot testing.
Test-Driven Development (TDD): While not strictly adhering to TDD, writing tests before or alongside the implementation proved effective in catching issues early and guiding the development process.

Streamlining Code Quality with Linters, Formatters, and Editor Integration

Bhavik Mistry — Fri, 03 Nov 2023 03:54:02 +0000

It's critical in the world of web development to keep code clear, understandable, and free of errors. In order to do this, I set out to enhance my project, TxtToHTML, by combining ESLint and Prettier, two powerful tools. With the use of these tools, I could automatically style the code and enforce coding standards, creating a more unified and manageable codebase.

Choosing the Right Tools

Linter: ESLint
ESLint was my choice for a JavaScript linter. ESLint is a popular and highly configurable linter that assists in enforcing coding standards and identifying common code errors. It provides a wide range of rules and plugins to adjust to the needs of individual projects.

Formatter: Prettier
I chose Prettier, a code formatter that enforces consistent code style, for code formatting. Code is automatically formatted by Prettier, ending arguments over preferred formatting. It works with popular code editors and supports a number of languages with ease.

Setting Up the Tools

ESLint Configuration

I set up ESLint in my project using the following .eslintrc.js configuration:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {},
};

This configuration expands on the ESLint recommended rules and includes basic definitions for the environment. The parserOptions define compatibility with the most recent version of ECMAScript. If more rules are required, they can be added.

Prettier Configuration

My Prettier configuration in .prettierrc is as follows:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "insertPragma": false,
  "proseWrap": "preserve",
  "requirePragma": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "printWidth": 100
}

These settings ensure consistent code formatting, such as single quotes, two spaces for indentation, and a maximum line width of 100 characters.

VSCode Integration

To integrate these tools into Visual Studio Code (VSCode), I used the .vscode/settings.json configuration:

{
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true
}

These settings enable automatic code formatting and linting on save. The default formatter is set to Prettier, ensuring consistent formatting in the editor.

What the Tools Found

After configuring ESLint and Prettier, I ran them on my project, and here's what I discovered:

ESLint: ESLint detected a some problems with the code right away, including possible syntactic errors and unutilized variables. To make sure the code followed the established guidelines, I had to address these problems.

Prettier: Using the specified preferences, Prettier automatically formatted my code. It assisted in fixing inconsistent line breaks, quotation marks, and indentation in code formatting.

I have added both ESLint and Prettier in my Package.json file:

"scripts": {
    "prettier": "prettier . --write",
    "lint": "eslint ."
}

Integration with VSCode

Writing code, when merged with the recommended settings for VSCode, makes formatting and linting easy. VSCode automatically formats the code and highlights linting errors when it is saved. By using this integration, developers can be guaranteed to keep a consistent coding style and spot issues early on.

Key Takeaways

Through this journey of integrating linters, formatters, and VSCode integration, we learned valuable lessons:

- Consistency Matters: Maintaining code consistency and enforcing coding standards through the use of formatters and linters is essential for teamwork.

- Automation Is Key: Utilizing tools to automate code analysis and formatting streamlines the development process, reduces human error, and saves time.

- Editor Integration Enhances Productivity: Ensuring code quality during development and identifying problems in real-time are made possible by integrating tools with the code editor/IDE.

- Documenting the Setup Is Valuable: Including clear instructions in your CONTRIBUTING.md file enables contributors to set up linting and formatting easily.

Enhancing SEO in TxtToHTML

Bhavik Mistry — Thu, 02 Nov 2023 06:08:54 +0000

TxtToHTML is a simple yet powerful tool that allows you to convert plain text and markdown files into HTML. While the tool was already useful, I decided to take it a step further by adding a crucial feature – Search Engine Optimization (SEO). In this blog post, I'll take you through the process of adding SEO capabilities to TxtToHTML and how it was inspired by Docusaurus.

The SEO Feature

How It Works

The SEO feature I added to TxtToHTML enhances the generated HTML pages by including essential meta tags in the HTML head. These meta tags include titles, meta descriptions, and other critical details that are necessary for SEO. When you share a page on social media or when search engines crawl your content, these tags provide them with valuable information about your content.

Implementation

The implementation of this feature involved modifying two files:
utils.js and index.js.

In the utils.js file, I introduced a metadata object that allows users to specify custom title, description and keywords for their web pages. This metadata is essential for SEO and can be customized for each page being converted.

In the index.js file, I initialized metadata object which contains the variables title, description and keywords.

Checkout the changes here.

Docusaurus Inspiration

Docusaurus, an open-source documentation tool, served as a significant source of inspiration for this feature. Docusaurus excels in SEO capabilities, creating meta tags for every page to enhance search engine discoverability. I recognized the importance of this feature and how it can benefit a wide range of content creators.

Next Steps

The implementation of SEO in TxtToHTML is just the beginning. There's room for further improvement and customization. Here's what's on the horizon:

1. Enhanced Configurability: I plan to provide even more options for users to fine-tune their SEO settings, allowing for greater customization.

2. Documentation:Clear and comprehensive documentation will be created to guide users on how to utilize the SEO feature effectively.

Get Involved

You can get involved by visiting the TxtToHTML GitHub repository. Feel free to create issues, provide feedback, or suggest additional features. Your contributions and feedback are highly valued and will help shape the future of TxtToHTML.