HTML To Email

Thomas Brillion — Thu, 08 Aug 2024 06:24:06 +0000

It has been a challenging to send emails using HTML layout since most of the elements and CSS properties are not compatible in most of the email clients. You can check them out here.

While there are lots of emails composing frameworks or libraries, you have to use or extend predefined components such as Card, Title, Image and so on. Although it is most reliable if you want to send emails since it is all optimized for most email clients, you might probably want to use your existing html element.

So, for such purpose, I have developed this library.

You can check out the demo here.

This article is just an introduction to my library and I will cover the intuitive ideas in the README.md file of the github repository.

Let's get started.

Installation

Choose one of the following methods.

npm install html-to-table

Github ESM Module

import HTML2Table from 'https://github.com/w99910/html-to-table/blob/master/dist/html-to-table.js'

Github CJS

const HTML2Table = require('https://github.com/w99910/html-to-table/blob/master/dist/html-to-table.cjs')

Initialization

let html2table = new HTML2Table;

Convert your element

It returns a table element which is similar to the given element.
It also converts SVG element to Img element.

html2table.convert(document.querySelector('your-element-to-convert'));

Optional: you can exclude the elements in the converting process.

Use excludeElementByPattern by passing regex pattern as string.

html2table.excludeElementByPattern('toolbar')

// or
html2table.excludeElementByPattern('(toolbar|title)')

That's all.

I will continue developing the library to handle more layout and scenarios.

Please consider giving the library a star if you find it useful.

Github Link: https://github.com/w99910/html-to-table

⚡🚀️ Build Easy & Performant Network Graph •̀ᴗ•́

Thomas Brillion — Fri, 02 Aug 2024 06:24:39 +0000

A network graph chart, often simply called a network graph, is a visual representation of relationships between entities.

You can use Network graph chart to

analyze connections and influences between different/same unique entities such as people or their contents
optimizing the flow of data between servers and devices etc,.

When it comes to data visualization in Web Applications, there are lots of Javascript libraries you can leverage such as D3, Highcharts, ChartJs, etc,.

While D3.js and Highcharts are primarily known for its powerful data visualization capabilities using SVG (Scalable Vector Graphics), SVG Rendering is really slower than Canvas Rendering when it comes to big data. As for ChartJs, there are some network graph chart modules to be integrated but I believe they lack some features that I need.

So I decided to implement the wheel myself again. I invite you to ride it if it suits you XD. It is lighweight with 28.1kb with d3 as one and only dependency. ◝(ᵔᵕᵔ)◜

So, Enough talking. Let’s see how it is easy.

Before we get started, you can try the demo here.

Create a canvas element.

<canvas></canvas>

Install from npm or github , import and use it.

npm install d3canvas-networkgraph

import D3CanvasNetworkgraph from "d3canvas-networkgraph"


// or
import D3CanvasNetworkgraph from "https://w99910.github.io/d3canvas-networkgraph/dist/d3canvas-networkgraph.es.js"

let networkgraph = D3CanvasNetworkgraph(document.querySelector('canvas'), {
            nodes: [{
                id: 1,
            }, {
                id: 2,
            }, {
                id: 3,
            }],
            links: [{
                source: 1,
                target: 2,
            }, {
                source: 2,
                target: 3,
            }]
   })

You can pass options object as third parameter.

D3CanvasNetworkgraph(document.querySelector('canvas'), {
            nodes: [{
                id: 1,
            }, {
                id: 2,
            }, {
                id: 3,
            }],
            links: [{
                source: 1,
                target: 2,
            }, {
                source: 2,
                target: 3,
            }]
   }, options)

Check available options here.

That’s it. Let me explain what nodes and links are.

Node

A node represent the entity in the graph. For example, in a social network graph, nodes could represent people.

A node is an object whose has structure —

{
  id: string|number, // (mandatory)
  color?: string|Function, // node color
  label?: string|Function, // node label
  radius?: number|Function, // node radius
  border?: string|Function, // border color
  tooltip?: string|Function, // node tooltip
  tooltipFontSize?: string|Function, // node tooltip fontsize
}

Link

A link represent a connection or relationship between the nodes (entities). In the social network example, edges could represent friendships or interactions between people.

link = {
  source: number|string, // id of node (mandatory)
  target: number|string, // id of node (mandatory)
  width?: number,  // the width of the link 
  color?: string, // the color of the link
}

Let’s tweak the chart.

Tooltip

A tooltip is a text which shows on top of node when it is hovered. It is also implemented using rect and text of CanvasAPI . So it is also performant. In order to enable tooltip, you can specify tooltip property in node object.

let node1 = {
   id: 1,
   tooltip: 'This is tooltip for node 1',
}

// you can pass function 
let node1 = { 
    id: 1,
    tooltip: (n) => {
       // n is node object itself which has more attributes such as `x` position, `y` position etc.,
    }
}

Label

A label is a text which is placed below the node. In order to enable label , you just need to specify label in node object.

let node1 = {
   id: 1,
   label: '1',
}

// You can pass true and then `id` of the node will be considered as label.
let node1 = {
   id: 1, 
   label: true,
}

// Or pass function
let node1 = {
   id: 1,
   label: (n)=>{}
}

Not only tooltip and label but also other options — color ,radius, border , tooltipFontSize can be configured by specifying them.

Drag and Zoom

While dragging is enabled by default, zoom is disabled. You can configure their availability by passing options as second parameter.

let networkgraph = D3CanvasNetworkgraph(document.querySelector('canvas'), {
            nodes: [{
                id: 1,
            }, {
                id: 2,
            }, {
                id: 3,
            }],
            links: [{
                source: 1,
                target: 2,
            }, {
                source: 2,
                target: 3,
            }]
   },{ zoom: true , drag: false})

// Or update the existing networkgraph

networkgraph.update(null,{ zoom: true });

Available options

let options = {
    sticky: false,
    drag: true,
    simulation: null,
    zoom: false,
    events: {
        onZoom: null,
        onResize: null,
    },
    node: {
        color: null,
        border: true,
        radius: 10,
        borderWidth: 1,
        label: null,
        labelFontSize: 14,
        labelColor: null,
        tooltip: null,
        tooltipFontSize: 20,
        onClick: null,
        onHover: null,
        onDrag: null,
    },
    link: {
        color: null,
        width: 1,
    }
};

For more information, please consult the documentation here.

I hope my library can save your time. ⸜(｡˃ ᵕ ˂ )⸝♡

Cheers! ৻( •̀ ᗜ •́ ৻)

Github Link: https://github.com/w99910/d3canvas-networkgraph

DEV Community: Thomas Brillion