DEV Community: Joseph Horace

Compare npm Downloads and GitHub Stars with NPMStars by BasicUtils

Joseph Horace — Thu, 15 May 2025 15:33:11 +0000

As developers, we’ve all asked:

"Is this package actually popular?"

"How does it compare to similar libraries?"

"Is this project actively gaining traction on GitHub?"

The problem is — our signals are scattered.

npm shows downloads.

GitHub shows stars and contributions.

But there's no easy way to view both side-by-side.

That’s exactly why I built NpmStars.

🚀 What Is NpmStars?

NpmStars is a fast, no-login tool that connects the dots between a package’s npm downloads and its GitHub popularity.

It gives you a single dashboard to:

📦 Track npm downloads — daily, weekly, monthly, and total
⭐ Visualize GitHub star growth over time
📊 View side-by-side comparison graphs
🔗 Share or embed trend snapshots anywhere
🧠 No API key, no setup — just search and go

🔍 npmtrends vs star-history vs NpmStars

You may have used tools like:

npmtrends.com — great for comparing download counts
star-history.com — great for visualizing GitHub stars over time

But these tools only show half the story.

You need to bounce between tabs, retype package names, and mentally combine the data.

That’s where NpmStars stands out:

Feature	npmtrends	star-history	NpmStars ✅
npm downloads comparison	✅	❌	✅
GitHub star growth	❌	✅	✅
Combined dashboard view	❌	❌	✅
No login / fast search	✅	✅	✅

With NpmStars, you get both perspectives — together — in seconds.

💡 Why This Matters

A package might have:

📈 High downloads but stagnant stars (legacy usage)
🌱 Low downloads but fast-rising stars (emerging trend)
🛑 Or it may be downloaded often but poorly maintained

When you can see both npm and GitHub data in one view, you get the full picture:

✅ Spot rising libraries early
✅ Pick tools with momentum
✅ Back up decisions with real-world signals

🧪 Real-World Use Cases

🔍 Compare libraries like zustand vs jotai or vite vs webpack
📈 Track the health of your favorite open-source tools
📚 Use embedded graphs in blog posts or documentation
🧠 Make smarter picks for client or team projects

🔗 Try It Now

👉 Visit NpmStars

Start with any package — tailwindcss, express, shadcn/ui, or your own.

💬 I’d Love Your Feedback!

If you find NpmStars helpful — share it, write about it, or let me know what could make it better.

Let’s make evaluating packages faster and smarter 💡

More tools at basicutils.com

Adding and Customizing Tables in React Quill

Joseph Horace — Sat, 11 Jan 2025 19:22:48 +0000

Tables are essential for structuring information in content editors. While React Quill, a React wrapper for QuillJS, is robust and extensible, it lacks built-in table support. This guide will show you how to integrate and customize table functionality in React Quill using third-party modules and configurations.

Why Use Tables in a Rich Text Editor?

Tables allow users to present data clearly and visually within content. They are particularly useful for:

Organizing and comparing information.
Structuring layouts for reports, blogs, or technical documentation.
Enhancing overall content readability.

Integrating table support into React Quill extends its utility for users managing structured data.

Setting Up React Quill

Begin by installing React Quill into your project:

npm install react-quill

Import and configure React Quill in your component:

import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const Editor = () => {
  const [value, setValue] = useState('');

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} />
  );
};

export default Editor;

Adding Table Support with `quill-table`

To add table functionality, use the quill-table module.

Install the Module

npm install quill-table

Configure the Table Module

Import and register the table module with Quill:

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import Table from 'quill-table';
import 'quill-table/dist/quill.table.css';

Quill.register({
  'modules/table': Table,
});

const EditorWithTable = () => {
  const [value, setValue] = useState('');

  const modules = {
    toolbar: [
      [{ table: [] }],
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
    ],
    table: true,
  };

  return (
    <ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
  );
};

export default EditorWithTable;

Add Toolbar Buttons

The toolbar configuration includes a table button, enabling users to insert and edit tables directly.

Customizing Table Styles

Use CSS to style tables:

.ql-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.ql-table th {
  background-color: #f4f4f4;
  text-align: left;
}

Extracting and Managing Table Data

React Quill outputs HTML content. To extract and manage table data, parse the editor's value:

const extractTablesFromHTML = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const tables = doc.querySelectorAll('table');
  return Array.from(tables).map((table) => table.outerHTML);
};

const handleSave = () => {
  const tableData = extractTablesFromHTML(value);
  console.log('Extracted Tables:', tableData);
};

Conclusion

Adding table support to React Quill enhances its functionality, making it more versatile for users who need structured content. The quill-table module provides tools for inserting and managing tables, while custom CSS and event handling enable further customization. With these steps, you can create a rich text editor tailored to your application's needs.

References

Exploring GitHub Workflow Dispatch: Take Full Control of Your CI/CD Pipelines

Joseph Horace — Sat, 14 Dec 2024 06:07:12 +0000

GitHub Actions has revolutionized Continuous Integration/Continuous Deployment (CI/CD) by enabling developers to automate their workflows. Among its many powerful features, Workflow Dispatch stands out as a flexible trigger that allows you to manually execute workflows with customized parameters. This article dives into what Workflow Dispatch is and how you can leverage it to enhance your automation process.

What is GitHub Workflow Dispatch?

Workflow Dispatch is a trigger in GitHub Actions that allows you to manually start a workflow. Unlike automatic triggers (e.g., push, pull_request), Workflow Dispatch is invoked on demand, making it ideal for situations where:

You need human oversight before execution.

The workflow requires specific input parameters.

You want to test workflows in a controlled environment.

This feature is especially useful for deployments, feature toggles, and ad hoc tasks that don’t fit into scheduled or event-based automation.

Setting Up a Workflow Dispatch

Here’s how you can add Workflow Dispatch to your GitHub Actions workflow:

Define the Workflow File: Add workflow_dispatch as an on event in your .github/workflows/.yml file.

Add Input Parameters (Optional): Specify any inputs required for the workflow.

Below is an example workflow file:
`name: Manual Trigger Example

on:
workflow_dispatch:
inputs:
environment:
description: 'Select the environment'
required: true
default: 'staging'
version:
description: 'Version to deploy'
required: true

jobs:
deploy:
runs-on: ubuntu-latest

steps:
  - name: Checkout Code
    uses: actions/checkout@v3

  - name: Deploy to ${{ github.event.inputs.environment }}
    run: |
      echo "Deploying version ${{ github.event.inputs.version }} to ${{ github.event.inputs.environment }} environment."`

In this example:

The environment and version inputs are required for the workflow.

The workflow uses these inputs to control the deployment logic.

Running a Workflow Dispatch

To manually trigger a workflow:

Go to the Actions tab of your GitHub repository.

Select the workflow you want to run.

Click Run workflow in the top-right corner.

Fill in any input parameters if required, and confirm.

Real-World Use Cases

Ad Hoc Deployments: Trigger deployments manually to specific environments, like staging or production.

Feature Flags: Enable or disable features by running a workflow that updates configuration files or toggles flags.

Custom Scripts: Execute maintenance scripts, data migrations, or one-time tasks with input parameters.

Debugging: Test workflows in a controlled manner without relying on automated triggers.

Why Use Workflow Dispatch?

Flexibility: Gives you the power to decide when and how a workflow runs.

Customization: Input parameters let you tailor workflows to specific tasks or environments.

Control: Adds a layer of human oversight, reducing the risk of errors in automated workflows.
Best Practices
Validation: Validate input parameters within the workflow to avoid runtime errors.

Security: Limit access to workflows by setting appropriate repository permissions.

Documentation: Clearly document the purpose and usage of each workflow in your repository’s README.

Learn More

For a deeper dive into the mechanics of GitHub Actions and Workflow Dispatch, check out our detailed guide: Understanding GitHub Actions Workflow Dispatch

Unveiling the Secrets of Your Photos: Discovering GPS Locations

Joseph Horace — Sat, 14 Dec 2024 05:54:10 +0000

Introduction

Have you ever wondered where exactly a photo was taken? Whether you're reminiscing about a vacation or analyzing old pictures, your photos could hold hidden clues about their origins. Thanks to modern technology, many images carry GPS metadata, allowing us to trace their geographic roots. In this article, we’ll explore how GPS photo locations work and how you can uncover these details easily.

What is GPS Metadata in Photos?

When you take a photo using a smartphone or a GPS-enabled camera, it often embeds metadata known as EXIF data into the image file. EXIF (Exchangeable Image File Format) contains information such as:

Camera settings (e.g., ISO, aperture, shutter speed)

Date and time of the photo

GPS coordinates (latitude, longitude, and sometimes altitude)

These GPS coordinates can pinpoint the location where the photo was captured. This feature is especially useful for travelers, researchers, and anyone who wants to revisit the memories tied to a specific place.

Why Extract GPS Data from Photos?

Here are some practical uses for extracting GPS data from photos:

Trip Memories: Relive your travel adventures by mapping out your photo locations.

Forensics and Investigations: Useful for law enforcement or private investigations.

Content Creation: Geotagged photos help bloggers and content creators add context to their stories.

Data Organization: Organize your photo library by location for quick access.

How to Extract GPS Location from Photos

xtracting GPS metadata might sound technical, but it’s straightforward with the right tools. There exists several such tools online.

Steps to Extract GPS Data Using Pic2Map:

Upload your photo (JPEG format with EXIF data).

Let the tool analyze the image.

View the GPS coordinates and location on an interactive map.

Pic2Map streamlines the process, requiring no technical expertise to reveal the hidden geotags in your images.

Important Considerations

While GPS metadata can be incredibly useful, there are some caveats:

Privacy Concerns: GPS data may reveal sensitive information. Always check metadata before sharing photos online.

Image Compression: Some platforms, like social media sites, strip metadata when photos are uploaded to save space and protect privacy.

Not Always Enabled: Ensure your camera’s GPS feature is activated if you want to save location data.

Final Thoughts

GPS metadata in photos is a treasure trove of information, offering a window into the exact locations behind your memories. Tools like BasicUtils Pic2Map make it easier than ever to uncover these details, providing value to travelers, investigators, and creatives alike.

The next time you sift through your photo library, take a moment to unlock the hidden stories embedded in your images. You might just rediscover places you’ve forgotten about or learn something new about your favorite snapshots.