DEV Community

Robin Kretzschmar
Robin Kretzschmar

Posted on

4 2

MeCardGenerator - my first npm package!

I just published my first npm package!

The package is called MeCardGenerator and can be installed via:

npm i --save mecardgenerator
Enter fullscreen mode Exit fullscreen mode

At the current version 1.0.6 the package contains only one function to create a MeCard string.

The idea came up while working on the third side project where I copied my function from a previous project.
Since I wanted to publish a package ever since but had no idea what, I thought why not use this as first package?

So here is the usage:

const MeCardGen = require("mecardgenerator");

const mcs = MeCardGen(
    "Jon", // First name
    "Doe", // Last name
    "jon.doe@acme.com", // email address
    "1-316-019-2128", // phone number (can be formatted)
    "https://acme.com/", // website / url
    "758 Elmo Gateway", // Street address
    "Murphyborough", // city
    "WY", // state
    "80562", // zip code
    "United States of America" // country
);

console.log(mcs);

Enter fullscreen mode Exit fullscreen mode

Which will output the following string:

MECARD:N:Jon,Doe;EMAIL:jon.doe@acme.com;TEL:1-316-019-2128;URL:https://acme.com/;ADR:,,758 Elmo Gateway,80562 Murphyborough,WY,United States of America;;
Enter fullscreen mode Exit fullscreen mode

This string is usually used with a QR-Code generator to enable phones to add contacts by scanning this QR-Code.

I will update the package with a QR Function. But it's just this one function for now.

Feedback welcome!

MeCardGenerator

This package provides a helper to generate MeCards to use it with a QR code for phones.

Install

npm i --save mecardgenerator

Usage

MeCard only
import MeCardGen from "mecardgenerator";
const mcs = MeCardGen(
    "Jon", // First name
    "Doe", // Last name
    "jon.doe@acme.com", // email address
    "1-316-019-2128", // phone number (can be formatted)
    "https://acme.com/", // website / url
    "758 Elmo Gateway", // Street address
    "Murphyborough", // city
    "WY", // state
    "80562", // zip code
    "United States of America" // country
);
Enter fullscreen mode Exit fullscreen mode
MeCard with QR Code (react)

To generate a QR Code, use the qrcode.react library in combination with this package:

import QRCode from "qrcode.react";
import MeCardGen from "mecardgenerator";
const mcs = MeCardGen(
    "Jon", // First name
    "Doe", // Last name
    "jon.doe@acme.com", // email address
    "1-316-019-2128", // phone number (can be formatted)
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
theooliveira profile image
Theo Oliveira

Congrats man. I will test it out. One day I will do my own

Collapse
 
darksmile92 profile image
Robin Kretzschmar • Edited

Thank you 😊
Best of luck, if you need advice on how to get started, let me know.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more