Email Marketing with Maizzle and Tailwind CSS

Arrofi Reza Satria — Fri, 15 Jul 2022 09:07:47 +0000

Email marketing is a powerful marketing channel that uses email to promote your business products or services. Email marketing is a form of marketing that can make the customers on your email list aware of new products, discounts, and other services.

Here I will teach you how to create an HTML email with Maizzle and TailwindCSS.

1. Create Project

To create a new project it's quite easy, you can look at the Maizzle Documentation like the code below :

npx degit maizzle/maizzle "your-project-name"

then cd "your-project-name" and npm install

2. Edit your Email using Tailwind CSS

You can start a development local server that watches in localhost with :

npm run dev

Maizzle already has a built in template that you can use, you can use it as your starter template.

Notes:

HTML email structure use table, tr and td as layout. The idea is same as CSS Grid, every column behave like Grid which you can adjust the width using Tailwind class="w-1/2 sm:w-full"

3. Link image with imagekit.io

When using Email HTML often you need to put an image on the email. Since Email HTML doesn't support image assets, you can get the image by hosting your image online. Here I use imagekit.io to host my image. Simply upload and get the URL of the image to put in the src image tag then you are done. Don't forget to reduce the size since it opened between the length of an email.

4. Production

Build production ready to send HTML emails that have inlined CSS and many other optimizations, by running the following command:

npm run build

You can view the result of build production in Build Production folder. Then copy and paste the HTML code to be ready to send to the email receiver.

4. Send your first html email.

Send your first HTML Email with Insert HTML by Designmodo extension google chrome.

Creating blur placeholder images using Next JS 12 and Plaiceholder

Arrofi Reza Satria — Sat, 18 Jun 2022 21:39:10 +0000

Image load without placeholder makes like something an error on the website. We want the user to know that image is still fetching on the server and provide some feedback as soon as possible when the page is not fully loaded. Some websites, such as Unsplash, have blur image placeholders, which adds some aesthetic to the website.

1.Install Plaiceholder

I assume that you have already created a new next app using npx create next-app then install plaiceholder dependecy:

npm i plaiceholder @plaiceholder/next sharp

2.Setup the Image assets

You can get the image assets from local or remote. In this tutorial, I use data I get from PixabayAPI to simulate the network download process.

3.Config Next Js

This config ensures that all Plaiceholder functions start in the main thread and be able to run the function on the getStaticProps function. Don't forget to define of image provider domains that you want to be served from the Next.js Image Optimization API.

const { withPlaiceholder } = require("@plaiceholder/next");

module.exports = withPlaiceholder({
    images: {
        domains: ["pixabay.com"],
    },
});

3. Generates the Static HTML pages with getStaticProps

The code that wrote inside getStaticProps never runs on the browser. So we can run node js environment function like getPlaiceHolder as it runs on the server. We can also access our database using ORMs like Prisma inside this function.

export async function getStaticProps() {
  const { hits } = await axios
    .get("https://pixabay.com/api/", {
      params: {
        key: "your_api_key",
        q: "cat",
        image_type: "photo",
      },
    })
    .then((res) => {
      return res.data;
    });

  const images_data = await Promise.all(
    hits.slice(0, 6).map(async (data, index) => {
      const { base64, img } = await getPlaiceholder(data.largeImageURL);
      return {
        ...img,
        base64: base64,
      };
    })
  ).then((value) => value);

  return {
    props: {
      images_data,
    },
  };
}

4. Render to the Page Component

Pass the props property with the data that you want to provide to the page component.

export default function NextBlurImage({ images_data }) {
   //The rest of the code..
      {images_data.map((data) => {
           return (
               <Image
                  src={data.src}
                  layout="fill"
                  alt=""
                  blurDataURL={data.base64}
                  placeholder="blur"
               />
           );
      })}
  //The rest of the code..
}

5. Result

As you can see the result that the blurred image will appear before the original image. This also applies lazy loading, which loads the image when the user is in the viewport.

DEV Community: Arrofi Reza Satria