DEV Community: nazha

Revue Alternative For Your Personal Blog

nazha — Sat, 11 Feb 2023 13:23:02 +0000

This post was first published on my personal blog. https://www.nazha.co/posts/revue-alternative

Last year, I wrote an article (in Chinese) about how to create a newsletter with Next.js and Revue. But unfortunately, Revue was shut down by Elon Musk in this early year.

After trying Substck、ConvertKit、mailerlite and MailChimp, MailChimp won for me because:

The free plan, which is appropriate for a personal startup, allows up to 500 contacts and 2,500 monthly sends.
Even if you're on the free plan, it offers APIs. If you already have a personal website, you won't need another one to store your newsletters.

Setting up MailChimp

After creating a free account，you'll need to fetch your API key。And other values you'll need to grab:

The API server region. Log into your Mailchimp account and look at the URL in your browser. You'll see something like https://us19.admin.mailchimp.com/; the us19 part is the server region.
The Audience ID for the mailing list.

Add Secrets to Environment Variables

Let's keep your secrets in environment variables without hardcoding them and revealing them in the public. If you are using Next.js and deploying with Vercel，you can:

set up some environment variables in Vercel.
create .env.local to testing locally.

MAILCHIMP_API_DC=usxx
MAILCHIMP_API_KEY=dbxxxxxxxxxxxxxxxxxxx-usxx
MAILCHIMP_API_AUDIENCE_ID=30xxxxxx

Don't forget to add .env.local to your .gitignore. We don't want to commit our secrets.

Creating The Request for Subscription

We can create an API route at pages/api/subscribe.js to add a member to our list.

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { email } = req.body;

  res.setHeader('Access-Control-Allow-Origin', '*');

  if (!email) {
    return res.status(400).json({
      error: 'Email is required'
    });
  }

  // <https://mailchimp.com/developer/marketing/api/list-members/>
  const revRes = await fetch(
    `https://${process.env.MAILCHIMP_API_DC}.api.mailchimp.com/3.0/lists/${process.env.MAILCHIMP_API_AUDIENCE_ID}/members`,
    {
      method: 'POST',
      headers: {
        Authorization: `anystring ${process.env.MAILCHIMP_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email_address: email,
        status: 'subscribed',
        tags: ['xxx'] // If you wanna add some tags
      })
    }
  );

  const data = await revRes.json();

  if (data.status >= 400) {
    return res.status(500).json({
      error: data?.detail ?? 'Something went wrong'
    });
  }

  return res.status(200).json({ error: '' });
}

Creating A Subscribe Component

We need a component to send a request to our API, for gathering user's email.

import Image from 'next/image';
import React, { FormEvent, useRef, useState } from 'react';

const LoadingSVG = () => {
  return (
    <div>
      <svg
        xmlns="<http://www.w3.org/2000/svg>"
        viewBox="0 0 19 17"
        className="fill-white dark:fill-white"
        width="20"
        height="20">
        <circle className="loadingCircle" cx="2.2" cy="10" r="1.6" />
        <circle className="loadingCircle" cx="9.5" cy="10" r="1.6" />
        <circle className="loadingCircle" cx="16.8" cy="10" r="1.6" />
      </svg>
    </div>
  );
};

const Subscribe = () => {
  const inputEl = useRef<HTMLInputElement>(null);
  const [errMsg, setErrMsg] = useState('');
  const [loading, setLoading] = useState(false);

  const subscribe = async (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);

    const res = await fetch('/api/subscribe', {
      body: JSON.stringify({
        email: inputEl?.current?.value
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    });

    setLoading(false);
    const json = await res.json();
    const { error } = json;

    if (error) {
      setErrMsg(error);
      return;
    }

    if (inputEl?.current?.value) {
      inputEl.current.value = '';
    }

    setErrMsg('Success! 🎉 You are now subscribed to the newsletter.');
  };

  return (
    <div className="w-full p-4 mt-10 fontOutfit">
      <div className="flex justify-between items-center">
        <div>
          <Image
            className="w-8 h-8 rounded-full overflow-hidden"
            src="/portrait/logo.jpg"
            alt="portrait"
            width="100px"
            height="100px"
          />
        </div>

        <div className="max-w-[55ch]">
          <p className="font-medium text-sm">Have a weekly visit of</p>
          <p className="font-bold text-2xl bg-gradient-to-r from-subscribleRight to-subscrible bg-clip-text text-transparent">
            Howl&apos;s Moving Castle
          </p>
          <p className="font-light mt-4">
            Get emails from me about web development, tech, and early access to new articles. I will
            only send emails when new content is posted.
          </p>
          <p className="font-bold">Subscribe Now!</p>
        </div>
      </div>
      <div>
        <form className="relative mt-4 border rounded" onSubmit={subscribe}>
          <input
            className="px-4 py-2 block w-full border-gray-300 rounded-md bg-white dark:bg-bg text-gray-900 dark:text-gray-100 pr-32 outline-none"
            ref={inputEl}
            placeholder="Your e-mail address"
            type="email"
            autoComplete="email"
            required
          />
          <button
            type="submit"
            className="bg-gradient-to-r from-subscribleRight to-subscrible flex items-center justify-center absolute right-1 top-1 px-4 py-1 font-medium bg-subscrible text-white rounded w-28 h-9">
            {loading ? <LoadingSVG /> : 'SUBSCRIBE'}
          </button>
        </form>
        {errMsg && <div className="mt-4 text-gray-500 text-sm">{errMsg}</div>}
      </div>
    </div>
  );
};

export default Subscribe;

We end up with a scene that like the one below:

Cheese 🧀

We can embed Mailchimp's campaigns into our individual websites. Dive into the entire souce code for my blog is open source.

Polyfills And Helpers - How To Save Your Bundle Size

nazha — Thu, 16 Jun 2022 02:57:08 +0000

Yoo, I'm nazha（那吒）

twitter . blog . Notion . Github . 知乎

As web programmers, we'd like to use most recent features. On the other hand, how to make our modern code work on older browsers that don't understand those feature?

There are two tools for that:

Polyfills
Transpilers

Polyfills vs transpilers

Polyfills

A polyfill is code that updates/adds new funtions or properties.

For example, string.prototype.matchAll was first introduced in ES2020 and can not work on Chrome under 67 according to can-i-use. If your users are using Chrome under 67, there's no string.prototyp.matchAll, so such code will fail.

For this case, "polyfill" will "fills in" the gap and adds missing implmentation by modifying the prototype chain of String, without replacing the source code.

Write code like this:

const matchString = 'abbbbc'.matchAll(/a/, 'd');

Then run it through a transpiler such as Babel:

require("core-js/modules/es.string.match-all.js");

var matchString = 'abbbbc'.matchAll(/a/, 'd');

Transpilers

A transpiler is a tool that translates your source code to another code. It parse modern syntaxs and rewrite it using older syntaxs to make them work in older browsers.

spread operator，async/await, Class are some good examples of this case.

Do same thing with this code:

const extendsObj = { ...{ a: 'a' } };

You will get:

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var extendsObj = _objectSpread({}, {
  a: 'a'
});

Notice that there are some functions imported from @babel/runtime/helpers, which helps to transpil code. They're what I refer to as "Helpers".

Downsides

We're glad to see that our code can run on older browsers (like IE). On the other hand, polyfills and helpers may also make our application a big boat.

Take a React application (within thousands of modules in node_modules) for example, we divide it to two parts to discuss:

NPM React Component in node_modules directory
The Application itself

Helpers should never be inlined

When transpiling, helper functions will be added to every file that requires it. This duplication is sometimes unnecessary.

In babel, this is where the @babel/plugin-transform-runtime plugin comes in. And you should use it like this way:

"presets": [
  ["@babel/preset-env", {
    // Disable useBuiltIns by default
    "useBuiltIns": false,
  }]
],
"plugins": [
  [
    "@babel/plugin-transform-runtime",
    {
      "absoluteRuntime": false,
      "helpers": true, // Helpers will not be inlined
    }
  ]
]

If you are using swc, enable non-inlined helpers in your .swcrc:

"jsc": {
  "externalHelpers": true
}

Helpers version resolution

If a module is resolved to the same path, bundlers like webpack and rollup will bundle it once.

Let's say you have @swc/helpers@0.2.0 (the helpers be used by swc) installed in NPM package and @swc/helpers@0.3.0 in your application root.

They are considered as different modules for different resolved paths. Sometimes, this duplication is unnecessary.

You can tackle with this by adding resolutions (if you're using yarn), or pnpm.overrides (if you're using pnpm) field in your package.json file of application.

"name": "react-application",
"pnpm": {
  "overrides": {
    "@swc/helpers": "^0.3.0"
  }
}

There also exists a more elegant way: creating modules aliasas for helpers. For example:

// webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      "@swc/helpers": path.resolve(__dirname, 'node_modules'),
    }
  }
}

Should my NPM package polyfilled

I prefer not to do this. A react application will not know whether all the NPM packages it depends are fully polyfilled or not. Even though all NPM packages are fully polyfilled, react applications must be fully polyfilled to prevent breakings.

There are two ways to make it more flexible:

Pre-bundling (I will cover this in another post)
Polyfilled all features based on environment

Polyfilled all features

If you are using babel, it's convenient to add @babel/preset-env. And configure your .babelrc file like this:

"presets": [
  ["@babel/preset-env", {
    "target": "79",
    "useBuiltIns": "entry",
    "corejs": "3.8"
  }]
]

For swc users, configure your .swrrc file like this:

{
  "env": {
    "targets": {
      "chrome": "79"
    },
    "mode": "entry",
    "coreJs": "3.8"
  }
}

But it is not really perfect. There exists a case that a "polyfill" is not used but polyfilled.

To reduce the bundle size, you can only load these polyfills for browsers that require them, so that the majority of the web traffic globally will not download these polyfills.

My New Macbook Setup (2022)

nazha — Thu, 26 May 2022 08:49:44 +0000

This post will be continuously updated in the my github repository https://github.com/maoxiaoke/setup-a-mac-for-frontend-dev.

Setting up a new Macbook will be tough and cumbersome. Every time I am getting a new Macbook, I go over the same steps on how to set it up for my working experience.

I create a record of my setup, hoping it's helpful for others too!

Immediate Frist Steps

Enable Tap to Click

When setting up a new Macbook, one of the first changes we make is enabling the tap-to-click feature for the trackpad.

Go「System Preference -> Trackpad -> Point & Click」and enable 「Tap to click」 option.

Enable Three Finger Dragging

In general, "tap to click" on your Macbook to avoid a force-click on the trackpad. But this doesn't work when it comes to dragging and repositioning windows.

Also, I'm big fan of tree finger dragging.

Go 「System Preference -> Accessibility」.
In the Accessibility sidebar, choose option 「Pointer Control」.
Click the button 「Trackpad Options」.
Enable dragging and select 「three finger drag」.

Change Wallpaper

Visit wallhaven to find a wonderful wallpaper and replace the default ones.

Download Edge

After discovering chrome are eating my old Mac's battery, I turned to use edge.

Install Homebrew

Homebrew is "The Missing Package Manager for macOS".

Simply follow their installation guide, copy /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" to terminal.

For GFW reasons, the Chinese users will fail to connect to github.

Just copy /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" to your terminal. It will do the same thing when installing homebrew.

Setup Terminal

Use iTerm2 as macOS terminal replacement.

Use the Homebrew to install iTerm2

$ brew install --cask iterm2

Change a few settings of iterm2

Go 「iterm2 Preferences -> Profiles -> Default -> Window」, add transparency and blur.

Go 「iterm2 Preferences -> Profiles -> Default -> Keys -> Key Mappings」, replace the standard ones with the preset "Natural Text Editing".

Install Oh My Zsh

The great thing about this is that you can customize your shell and add plugins. Unlike the old Bash shell, which does not look attractive and can make it difficult for you to use.

$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Choose your favorite theme

There are multiple themes you can choose from. My favorite theme is honukai and it should look like in the screenshot:

For compelete guide, dive into it's docs.

Add useful oh-my-zsh plugins

Oh-my-zsh is powered by plugins. I'll share my top 3 plugins.

plugins=(
 git
 autojump
 zsh-syntax-highlighting
)

the git plugin

The git plugin is enabled by default. It provides many aliases and a few useful functions.

To use it, add git to the plugins array in your zshrc file:

plugins=(git)

the autojump plugin

Use Homebrew to install autojump.

$ brew install autojump

After that, add autojump to your zshrc file:

plugins=(... autojump)

the zsh-syntax-highlighting plugin

The installation of zsh-syntax-highlighting may be tedious. But it worth the effort.

Clone the zsh-syntax-highlighting repository in oh-my-zsh's plugins directory:

$ git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Then, activate the plugin in ~/.zshrc:

plugins=(... zsh-syntax-highlighting)

After adding the plugins to your .zshrc file, you have to restart zsh to activate them, using the command source ~/.zshrc.

You can find all my settings of .zshrc here.

Install Alfred

Now, it is time for Alfred - an alternative for Spotlight.

Use Spotlight Keyboard Shortcut for Alfred

when installing Alfred, the first thing I do is disabling the default shortcut for Spotlight and use it for Alfred.

To do that, open System Preference -> Keyboard -> Shortcuts. Click on "Spotlight" and disable "Show Spotlight search".

Open the Alfred settings and use the freed up ⌘ Space combination to launch Alfred.

Clipboard History

Copy and pasting is something developers do everyday. Alfred ships with a clipboard manager which supports copied text, images and files.

The only thing I do is remapping the shortcut to ⌘ . to the Clipboard History.

Workflows

I do not have many workflows installed. One of my installed workflows is YoudaoTranslator, which provides translation service.

Follow the official guide to enable "YoudaoTranslator".

Development Tools

vscode

I prefer vscode to code. You can use github account to sync your setttings.

My favorite font is Overpass Mono and It should look like in the screenshot:

Launch vscode from the command line

Opening vscode from your terminal is a quick, easy way to open up new projects and begin coding faster.

Add the following text to your .zshrc files:

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

After restarting terminal or use source ~/.zshrc, you can open vscode by typing code ..

Here's how this should look:

pnpm

pnpm is fast, disk space efficient package manager, works as an alternative of npm.

Install pnpm using Homebrew:

$ brew install pnpm

volta

I use volta to manage multiple Node.js versions.

Other Softwares

Whimsical

My favorite drawing app out there. Whimsical is so great that I compeleted most of my drawings (You can find them here and here).

Because Whimsical support PWA already. You can install it as normal apps.

obsidian

obsidian is my note-taking app I use.

Notion

Notion is where I writing articles.

Other Useful softwares

Shottr - Screenshot tool, it is powerful and easy to use.
Anki Notes - Memory app to learn English.
ScreenFlow - Video editing & screen recording.
kap - Screen recorder to generate gif.
magnet - Window manager.