DEV Community: Andrew

How to store prompts and re-use them in ChatGPT? Try this Chrome Extension!

Andrew — Fri, 18 Aug 2023 05:34:21 +0000

Tired of repeatedly copy-pasting your prompts from a separate application while using ChatGPT?
Give this Chrome extension a shot and reclaim valuable time.

ChatGPT can help us solve a bunch of different problems! Here are just a few examples:

Summarization:
Create a concise TL;DR for the content above, ensuring no information is altered or excluded.
Language Learning:
Explain all the grammar and vocabulary of above sentence using English, alongside furnishing a straightforward example for each.
Translation:
Act as an English translator, spelling corrector, and improver. I will communicate with you in any language, and you will identify the language, translate it and answer in the corrected and improved version of my text in English.

However, typing long prompts repeatedly or copy-pasting from another application can be quite cumbersome. So we built this extension - PromptSnippet.

Demo

Feature 1: Insert Custom Buttons

Personalized prefix or suffix for your messages and insert a custom button on ChatGPT UI. When clicking the button, the prefix or suffix will seamlessly merge with your initial message and subsequently be submitted to ChatGPT.

Feature 2: Snippet

This is for those who prefer to minimize mouse or touchpad usage.
Similar to the snippets feature in IDE, you can generate succinct abbreviations for your prompts. These abbreviated prompts can be directly employed within the ChatGPT input field.

Feature 3: Restore Previous Message

During your interactions with ChatGPT, have you ever accidentally submitting an unfinished message? Then you had to retrieve your prior message, copy it, and paste it back into the ChatGPT input field.
Similar to the terminal, you can press 「↑」 to restore your previous message.
(Note: By default, this feature is disabled. You can enable it within the configuration settings)

Privacy

We use chrome.storage API to store the settings. Rest assured, all your prompts are maintained within your personal google account. We don't use any database and refrain from retaining any of your data on our end. If you want to backup your prompts, you can use the export/import feature.

If you're interested in having those features in ChatGPT, simply download it from the Chrome Web Store.

This extension was built using Plasmo - an all-in-one platform that makes it easy for browser extension developers to create, test, and publish amazing extensions.
If you're thinking about creating your own browser extension, we highly recommend giving it a try.

Docs: https://docs.plasmo.com/
Examples: https://github.com/PlasmoHQ/examples

ServiceWorker: Lifecycle, Update, and Notification

Andrew — Wed, 30 Sep 2020 03:32:38 +0000

If you have tried CRA (create react app), have you ever wonder what does this file - `/src/serviceWorker.js` do? In this article, I will demonstrate what we can do by implementing the service worker into our application.

Before we start, the service worker might be buggy once we didn't handle it properly, therefore, I highly recommend you check this article to know a few important knowledge beforehand - Offline-First Considerations

Agenda

Register Service Worker
Event: install
Event: activate
Event: fetch
Event: message
Event: updatefound & statechange
Web Push Notification
Event: push

Register Service Worker

At first, we need to register service worker.

  navigator.serviceWorker
    .register("/sw.js")
    .then((reg) => {
      // no controller exist, page wasn't loaded via a service worker
      if (!navigator.serviceWorker.controller) {
        return;
      }

      if (reg.waiting) {
        // If we have a new version of the service worker is waiting,
        // we can display the message to the user and allow them
        // to trigger updates manually.
        // Otherwise, the browser will replace the service worker
        // when the user closes or navigate away from all tabs using
        // the current service worker.
        return;
      }
      if (reg.installing) {
        // If we have a new service worker is installing, we can
        // tracking the status and display the message once the
        // installation is finished.
        return;
      }
    });

Event: install

The install event is the first event a service worker gets, and it only happens once.

We can cache the pages here.

const urlsToCache = ["/faq", "/contact"];
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

Event: activate

Once your service worker is ready to control clients, we'll get an activate event.

It's common to delete the old caches here.

self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      const promiseArr = cacheNames.map((item) => {
        if (item !== CACHE_NAME) {
          return caches.delete(item);
        }
      });
      return Promise.all(promiseArr);
    })
  );
});

Event: fetch

We can intercept the request and custom the response in the fetch event.

self.addEventListener("fetch", (event) => {
  // hijacking path and return a mock HTML content
  if (event.request.url.includes("/faq")) {
    event.respondWith(
      new Response("<div>Mock FAQ Page</div>", {
        headers: { "Content-Type": "text/html" },
      })
    );
  }
  // hijacking API request and return mock response in JSON format
  if (event.request.url.includes("/api/users")) {
    const data = [
      {
        id: "0001",
        name: "andrew",
      },
    ];
    const blob = new Blob(
      [JSON.stringify(data, null, 2)],
      { type: "application/json" }
    );
    const init = { status: 200, statusText: "default mock response" };
    const defaultResponse = new Response(blob, init);
    event.respondWith(defaultResponse);
  }

  // Stale-while-revalidate:
  // return the cached version if it exists. At the same time,
  // send a request to get the latest version and update the cache
  const requestUrl = new URL(event.request.url);
  if (requestUrl.pathname.startsWith("/avatars/")) {
    const response = caches.open(CACHE_NAME).then((cache) => {
      return cache.match(event.request).then((response) => {
        const networkFetch = fetch(event.request)
          .then((networkResponse) => {
            cache.put(event.request, networkResponse.clone());
            return networkResponse;
          });

        return response || networkFetch;
      });
    });

    event.respondWith(response);
    return;
  }
});

Event: message

We can use postMessage to communicate with the service worker.
Here, we bind a click event to send a postMessage to the service worker.
In the service worker, we can listen to the message event to received the postMessage.

send message to service worker

function handleClickEven() {
  worker.postMessage({ action: "skipWaiting" });
}

receive message

self.addEventListener("message", (event) => {
  if (event.data.action === "skipWaiting") {
    // skip waiting to apply the new version of service worker
    self.skipWaiting(); 
  }
});

Event: updatefound & statechange

We can listen to the updatefound event to see if we have a new service worker.
If there is a service worker is installing, we listen to the statechange event,
once the install is finished, we can display a message to notify our users.

self.addEventListener("updatefound", () => {
  if (reg.installing) {
    reg.installing.addEventListener("statechange", () => {
      if (worker.state == "installed") {
        // display a message to tell our users that
        // there's a new service worker is installed
      }
    });
  }
});

Web Push Notification

We can use a service worker to handle the notification.
Here, we ask permission to display the notification, if the user agrees,
then we can get the subscription information.

Get permission & subscription

if (Notification && Notification.permission === "default") {
  Notification.requestPermission().then((result) => {
    if (result === "denied") {
      return;
    }

    if (result === "granted") {
      if (navigator && navigator.serviceWorker) {
        navigator.serviceWorker.ready.then((reg) => {
          reg.pushManager
            .getSubscription()
            .then((subscription: any) => {
              if (!subscription) {
                // we need to encrypt the data for web push notification,
                // I use web-push to generate the public and private key.
                // You can check their documentation for more detail.
                // https://github.com/web-push-libs/web-push
                const vapidPublicKey = "xxxxx";
                const applicationServerKey = 
                  urlBase64ToUint8Array(vapidPublicKey);
                return reg.pushManager.subscribe({
                  userVisibleOnly: true,
                  applicationServerKey,
                });
              }

              return subscription;
            })
            .then((sub) => {
              // Get the subscription information here, we need to
              // create an API and save them into our database
              /*
                {
                  endpoint:
                    "https://fcm.googleapis.com/fcm/send/xxx",
                  keys: {
                    auth: "xxx",
                    p256dh: "xxx",
                  },
                };
              */
            });
        });
      }
    }
  });
}

send notification

const webpush = require('web-push');

webpush.setVapidDetails("mailto:oahehc@gmail.com", "my_private_key");
const pushConfig = {
  endpoint: sub.endpoint,
  keys: {
    auth: sub.keys.auth,
    p256dh: sub.keys.p256dh,
  },
};
webpush
  .sendNotification(
    pushConfig,
    JSON.stringify({ title: "Test Title", content: "Test Content" })
  )
  .catch((err) => {
    console.log(err);
  });

Event: push

We can receive the web push message by listening to the push event.

self.addEventListener("push", (event) => {
  if (event.data) {
    try {
      data = JSON.parse(event.data.text());
      event.waitUntil(
        self.registration.showNotification(data.title, {
          body: data.content,
          icon: "/icon-192.png",
          badge: "/badge-192.png",
        })
      );
    } catch (e) {
      console.error('push event data parse fail');
    }
  }
});

Conclusion

That's it, I hope this article can help you get familiar with the service worker.

Reference

5 Steps to Tackle The Coding Challenges

Andrew — Thu, 10 Sep 2020 08:30:07 +0000

In the past six months, I have spent lots of time on solving coding questions on LeetCode and successfully passed a few companies' coding interviews. I have learned a bunch of experiences along the journey. So in this article, I want to share some resources I used to practice my skills. And the steps that I implement when solving a coding challenge.

Agenda

1. Preparing our own environment
2. ❌ Brute-force solution → ⭕️ Have our first solution
3. Adding extra test cases for the edge cases
4. Optimize our solution
5. Optimize the syntax

1. Preparing our own environment

Solving the coding questions on our own IDE will be way more efficient than coding on the website like LeetCode. I use Node.js and Jest to practice all the LeetCode questions on my laptop.

Some plugins like prettier, linter, and code snippet can help us get rid of many tedious errands.
Jest watch mode can automatically retry our solution.
Moreover, it's also easier to analyze our algorithm in our local environment, like setting the breakpoint to check the variable value step by step.

❗️Some coding test platforms might not allow you to just copy/paste your final answer, because they need to see your solving process. Remember to check beforehand when working on a coding interview.❗️

2. ❌ Brute-force solution → ⭕️ Have our first solution

I have seen some articles suggest starting with a brute-force solution. This is a good tip when we can't figure out any solution. But in reality, I think most of the time we can have our first answer which might not be the best solution but it's better than brute-force.

When working on our first solution, we usually will find many possible ways to optimize it. But it's totally fine to add some TODO comments and optimize them later. To keep the first approach simple will bring lots of benefits that I will mention in the next paragraph.

This idea also works on our day-to-day coding, Premature optimization is the root of all evil.

3. Adding extra test cases for the edge cases

LeetCode will check all the different scenarios when we submit the answer. But in a real coding test, we have to add some edge cases on our own.
For me, most of the time, my first approach won't be able to pass all the edge cases. This is the benefit to keep our first solution simple. It will be way easier to figure out how to modify our solution if we choose to optimize later.

4. Optimize our solution

Once we pass all the test cases, it's time to optimize our solution.

(1) Algorithm & Data structure

The most common approach to optimize the solution is to apply some algorithms or data structures. And which algorithm & data structure should be applied to a specific question will depend on our experience. Therefore, it's very important to understand the pros and cons of each algorithm & data structure, rather than just memorize the best answer.
If you're not familiar with algorithm & data structure, there are two great resources, each of them contains about 50 questions. If you can finish either one of them, I think you will be totally fine to start your first coding interview.

Tech Interview Handbook - Best Practice Questions: all the questions if come from LeetCode, so it's easy to practice and reference some different answers on the discussion board.
bytebybyte - 50-questions: the author provides the video explanation for all the questions, it might be easier to understand by some people. And the solutions are written in Java. You will have to pick up some basic concepts about this language if you don't have any experience before.

(2) The trade-off between time and space complexity

Sometimes, choosing the best algorithm & data structure will be the trade-off between time and space complexity. Therefore, we have to understand the limitations of the question. If it's a whiteboard test, it's good to ask some questions to the interviewers to clarify what is more important (time (performance) or space (memory usage)) in this specific problem before we make the final decision.

5. Optimize the syntax

After we came out with a decent solution, another way to optimize our answer is through the syntax. Most of the time, this will depend on the language you're using. Taking Javascript as an example, Javascript is a very flexible language, it's common to have multiple approaches for the same purpose. When working on a real application, we tend to choose the one that is easier to maintain or use linter or other tools to make sure we follow the same convention. But in the coding challenge, I usually will try to optimize the performance as best as I can.

What's the fastest way to iterate and duplicate the object/array? reference
var, let & const, if we only care about performance, which one is the fastest?
tail call optimization
...

We can use the library (benchmark) or Javascript API (performance) to test all the different approaches. Then we will have a better understanding of the performance of different syntax.

Conclusion

That's all, thanks for reading, I hope these tips will help you tackle the coding challenge and pass the interview. Please feel free to leave the comment if you have any ideas about how to solve coding challenge questions.

Reference

Cover Image: Image by Arek Socha from Pixabay
Jest
LeetCode
Tech Interview Handbook
bytebybyte
3 JavaScript Performance Mistakes You Should Stop Doing
What is tail call optimization?
benchmark.js
performance api

SEO Part2: Improve User Experience & SEO

Andrew — Thu, 13 Aug 2020 10:13:50 +0000

This is the final article for the SEO series, in this article, I will provide a few technics about how to improve our website's UX.

As I mentioned in the first article of this SEO series, the ultimate goal for the search engine is to figure out which website is best for its users. Therefore, improving the UX not only increase our users' satisfaction but also improve SEO at the same time.

To improve the UX of our application, I need to do our own research and try our best to understand the users. But we can also reference other's suggestions to fix some common problems which might harm our user experience.
Google spent lots of effort to study what's the most important metrics for a good website. Therefore, let's check what Google has given us and how we can use those metrics and tools to improve the UX.

Agenda

Search Signals for Page Experience
Core Web Vitals
Mobile Friendly
Safe Browsing
HTTPS
No Intrusive Interstitials
Links
More Ranking Factors

Search Signals for Page Experience

There is so much information about how the search engine ranking the websites. To make this article more concise, I will focus on the metrics call Search Signals for Page Experience which is provided by Google.

Core Web Vitals

We all know that performance can affect the UX, but it's not easy to measure the website's performance. This year(2020), Google provides a metric call Core Web Vitals, which includes three different facets:

LCP: How fast we provide the content to our users?
FID: How fast our users can start interacting with the website?
CLS: Would the content on the screen reflow when users are using the website?

Core Web Vitals doesn't cover all the aspects of UX. But it gives us a very clear standard to follow. Moreover, there are tons of tools we can use.

chrome extension
If we want to check a single page's metrics, we can install the chrome extension.
Chrome DevTool - lighthouse
If we want more detail, lighthouse can provide more information that allow us to tackle the problem.
ps. when using lighthouse to measure the performance, make sure you are testing the production version and using incognito window
Google search console
If we don't want to check our pages one by one, we can reference the Google search console to see the result for all our pages.

If you want to know more about how to optimize Core Web Vitals, highly recommend watching this video - Optimize for Core Web Vitals

Mobile Friendly

From 2020/09, Google will apply all mobile-first indexing on all websites, so even your majority users are using desktop or laptop, you might still have to make sure the website is easy to use on mobile devices.

We can use this tool provide by Google to check the website's mobile-friendly or not.

Again, Google search console will keep checking our websites is mobile-friendly or not.

To know more about how to optimize the user experience on mobile, check this article for more information -
Mobile-first indexing best practices

Safe Browsing

Obviously, security problems will cause huge damage to our users' experience. And the search engine also avoids providing malicious content to their users. Therefore, we need to fix all the security issues on our website.

One thing we need to be extra careful is the content generated by the users. We need to take extra effort to manage those content and make sure there is no malware or deceptive information.

If we use the 3rd-party libraries on our website, use npm or yarn audit to address the critical security issues and fix them is also very important.

Google search console also warms us when they found security issues on our website, but we should try our best to avoid that happen.

HTTPS

There are lots of services that can help us host our website through HTTPS, so I see no reason why not implement this.

We will see a lock icon on the browser is our website is service by HTTPS with legit certification.

Otherwise, it should warm us the site is not secure.

And we can check the Chrome DevTool security tab for more information.

No Intrusive Interstitials

Interstitials are web pages displayed before or after an expected content page, which might make content less accessible to the users.

Ideally, we should prevent using Interstitials on our website.

But there are a few scenarios which are ok to use Interstitials.

Links

We already go through all the metrics on the Search Signals for Page Experience. There is one more factor I want to raise - Links.
To measure a website is worth sharing with others, Except testing the website on our own, we can also reference how many people have recommended this website.

There are two types of links.

inner links: the links are put on our own website.
Although we can easily create more links, we should definitely create useful links for our users and prevent harm to the user experience.
backlink: the links display on other websites.
There are a few methods that can help us increase the backlink number. For example, we can make our website easier to share on social media.

Be aware that the quality of the backlink matter. If the link is from the BAD website (paid links or link exchanges..), it might cause a negative impact on our SEO.
If you think someone intentionally put the link of your website on the BAD website. You can follow this article to disavow backlinks

More Ranking Factors

If you think the above metrics are not enough, here is a great article points out many important factors that Google use on their ranking algorithm - google-ranking-factors-2019.

Conclusion

Thanks for reading this article, I hope this SEO series can help you understand the SEO better and know how to start improving it. If you have any questions or a different idea, please feel free to leave a comment.

Reference

SEO Part1: Help Search Engine Understand Our Website

Andrew — Thu, 13 Aug 2020 10:06:41 +0000

This is the second article in this SEO series. In this article, I will explain how to help the search engine understand our website better.

Search Engine robots analyze our website in a very different way. Although the most important criteria for a good website is still the user experience. But since the search engine needs to automate the analyzing process, it needs to use lots of extra information to understand our website. It's important to make sure that extra information matches our content. Otherwise, the search engine might get confused about the content we want to provide to our users.
Now, let's dive into the details.

Agenda

robots.txt
sitemap
URL
HTTP status code
meta tag
link tag
Sematic HTML tags
HTML tags attributes
Structured Data
Tools

robots.txt

robots.txt is a guideline for search engine robots, it's used to keep part of our pages private.
If we provide the wrong setting, it might accidentally block the search engine and make our website fail to display on the SERP (Search Engine Results Pages).

We can provide the robots.txt file for the entire website.

User-agent: *
Disallow:

Or we can also use meta tag to specify the setting for a specific page.

<meta name="robots" content="noindex">

sitemap

We can provide the sitemap to notice the search engine to index our pages.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
  <url>
    <loc>https://www.oahehc.com</loc>
    <priority>0.90</priority>
    <changefreq>always</changefreq>
    <lastmod>2020-07-18T12:59:15.983Z</lastmod>
  </url>
  ...
</urlset>

Once we finish our sitemap, we can submit the result to the search engine. Take Google as an example, we can send an HTTP request or handle it on google search console.

http://www.google.com/ping?sitemap=<complete_url_of_sitemap>

Another thing worth mentioning is that there is a budget when the search engine crawls a website. So if we have tens of thousands of pages on our website. We can put the most important pages at first or set priority probably.

URL

The URL is another criterion that the search engine might reference. Keeping the URL in a clean directory structure not just makes it easier to manage, but also lets the search engine be able to understand.
If it's possible, including keywords and context on the URL to make it match our website content.

HTTP status code

Now the search engine has our URL, it can send the request and get the content. But before it starts analyzing the content, it will check the HTTP status code that our server responds to. Providing the correct status code can prevent the search engine from getting confused. There are two common mistakes:

301 (permanent redirect) vs 302 (temporary redirect)
- replace old website should use 301
- if we have different URLs for desktop and mobile websites and redirect our users based on their device. Then we should use 302.
404 page should return 404

meta tag

In this step, the search engine already has the content of our website. It will check the HTML head first.

title and description

  <title>title</title>
  <meta name="description" content="description">

The search engine reads the title and description to have a basic understanding of our website. So it's important to provide the proper information. For example:
(a) prevent using stop words
(b) should match the website content
(c) include the keywords but not overuse
(d) multiple tabs page should provide different title/description for each tab

social media

If we want to optimize our website on social media, we should provide proper meta tags. Taking Facebook as an example, we should including that information inside the head tag.

  <meta property="og:url" content="https://www.oahehc.com.tw" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="title" />
  <meta property="og:description" content="description" />
  <meta property="og:image" content="https://cdn.oahehc.com.tw/logo.png" />

And don't forget to use their tool to make sure everything is working as we expected.

FB Sharing Debugger

link tag

It's important to prevent duplicate content on our website because this makes the search engine hard to decide which page they should provide to their users. Therefore, another information we might need to provide in the head tag is link.

If we have different URLs for desktop and mobile websites. Then we can provide canonical link & alternate link to tell the search engine to treat them as the same page.

<link rel="canonical" href="https://www.oahehc.com.tw">
<link rel="alternate" href="https://m.oahehc.com.tw" media="only screen and (max-width: 640px)">

Sematic HTML tags

<div>
  <div>1. xxx</div>
  <div>2. ooo</div>
  <div>3. ...</div>
</div>

<ol>
  <li>xxx</li>
  <li>ooo</li>
  <li>...</li>
</ol>

With proper CSS styling, the above two examples will look exactly the same by the human eye. But it's quite different in the search engine's aspect.
There are a few basic guidelines about how to choose HTML tags properly:

Using h1~h6 for heading, and we should only have one h1 tag for each page
Structure the page by semantic elements like header, main, aside, footer, section, nav, ...
Using table/th/td/td for table
Using ul/ol/li for list
Don't mix up button & a

Use semantic HTML tags not just help the search engine understand our webpage better, sometime we might gain an extra bonus from that.
Google search provides featured snippet if there is a proper answer for the search question. If our content is summarized in the table or list, then it will have a higher chance to be choosing as one of them.

HTML tags attributes

Except choose proper HTML tags, sometime we might have to provide extra attributes to add more information.

For example, add alt for img tag to explain the image not just help the search engine understand better, but also make our website more friendly for people who use a screen reader to browse our website.

<img src="https://cdn.oahehc.com.tw/dog.png" alt="dog" />

When we use an image as the content for a hyperlink, add title attribute to provide extra information is also a good practice.

<a href="./dog" title="dog list">
  <img src="https://cdn.oahehc.com.tw/dog.png" alt="dog" />
</a>

Structured Data

If we want to provide more information for the search engine, we can add structured-data on our website.
There are a few different categories of structured-data that Google will display in richer features in search results.

We can check this article to know more detail - Explore the search gallery.

To add structured-data on our website, we can directly add into the HTML tags:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Or we can create a script tag and set all the information in json format:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://example.com/dresses",
    "name": "Dresses"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://example.com/dresses/real",
     "name": "Real Dresses"
   }
  }
 ]
}
</script>

Once we finish the structured data, don't forget to test it and make sure the format is correct - Structured Data Testing Tool.

Tools

You might feel overwhelmed after seeing so many extra errands we have to deal with. Luckily, there are tools that can help us.

ESLint
ESlint not just can help us prevent syntax error, adding a proper extension, it can also point out the missing attribute on our HTML tags.
lighthouse
lighthouse is a built-in feature in Chrome, we can use it to identify common problems on our website. Now we can focus on Accessibility & SEO. We just need to click Generate report, then lighthouse will let us know how to fix the problems on our website.
google search console
Once we publish our website, definitely start using google search console. It doesn't just provide the information to measure search traffic. Moreover, it points out all the problems that Google finds out when they are trying to crawl our website. Fixing those problems can make the search engine understand our website better.

Conclusion

Now we know how to make the search engine easier to understand our website. In the next article, I will focus on the most important question - how to improve the user experience for our real users - SEO Part2: Improve User Experience & SEO

Reference

SEO Part0: The Correct Mindset

Andrew — Thu, 13 Aug 2020 10:04:04 +0000

SEO (search engine optimize) is one of the most important topics for web applications, especially when the website's source highly relies on the search engine. There are tons of strategies about how to improve the ranking on the SERP (Search Engine Results Pages). But it's not easy to decide which items are more important and need to be implemented first. In the past two years, I have joined many SEO discussions and implement lots of strategies on our websites. Therefore, in this series of articles, I try to systematically summarize those strategies. I hope this will give you a better understanding of how to start improving your website SEO.

Before we start diving into the strategies about SEO, I want to talk about the mindset.

What does the search engine want?

If we want to optimize search engine results, the very first step is to understand what the search engine wants.
The purpose of the search engine is to provide the best search results to their users. The best results mean the websites which users most likely want to browse.
If you have studied SEO before, you might have seen some suggestions like this: Poor content can impact SEO. That's nothing wrong with this quote. But should we prevent poor content because it will impact SEO? Definitely not. We should try to provide the best content for our users, no matter if it will improve SEO or not. The correct attitude about SEO is to understand why search engines believe those criteria are important, and we implement those features to provide better user experience to our customers. Once our users love our product, the SEO will improve at the same time.

Why do we need to care about SEO?

If the only thing we need to care about is the user experience, why are there so many SEO consultants teaching SEO strategies?
The biggest difference between real users and the search engine is that the search engine didn't browse our website by a real human. The search engine analyzes our website by their robot and algorithm. Although Googlebot is able to execute Javascript now. The way they check our website is still quite different compared to our real users.

For example, there are some actions which the robot won't do.

scroll down
login
...

Moreover, because the search engine uses the robot to analyze our website, so it will use some extra information that our users didn't care about.

meta description
HTML tag
img alt
HTTP status code
...

How to improve SEO?

Now we know what the search engine wants, let's talk about how to improve SEO. I categorize the SEO strategies into two categories:

Improve the search engine's user experience:
As I have mentioned before, search engines browse our website in a very different way. If we want to improve SEO. The first step is to help them understand our website.
Improve our users' user experience:
The final goal for the search engine is to provide the best website to their users. So we not only need to help the search engine understand our website but also have to convince the search engine that our website is worth providing to their users.
Except optimize UX based on our own experience. Since Google has analyzed tons of websites and tries to figure out what kind of websites will be their users favorite. They have provided lots of their study to let us know what's the best way to improve the user experience.

In the following two articles, I will base on those two categories, providing more detail and real examples.

Conclusion

Don't overuse the SEO strategies, think about why search engines care about those features and identity which features suitable to implement on our website.

👎 Follow the strategies that come from internet articles or be taught by SEO consultants
👍 Improve user experience for the search engine
🎉 Improve user experience for both the search engine and our real users

Reference

The new evergreen Googlebot
Debugging JavaScript SEO issues
cover Image by Rick Bannerman from Pixabay

React and Vue Syntax Comparison Side by Side Part3: State Management

Andrew — Sat, 04 Jul 2020 03:51:49 +0000

This is the third post about React and Vue syntax comparison. In this article, we will compare the syntax for the most famous state management library in both ecosystems - Redux & Vuex.

oahehc / react-vue-comparison

Comparing the syntax of React.js/Next.js and Vue.js/Nuxt.js side by side

Agenda

Create-Store
Action
Async-Action
Reducer | Mutation
Combine-Reducers | Modules
Connect-with-Component
Middleware | Plugin
Selector | Getter
DevTools

Create Store

Redux: https://redux.js.org/basics/store

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

const store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Vuex: https://vuex.vuejs.org/guide/

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... }
})

...

new Vue({
  el: '#app',
  store,
});

Action

Redux: https://redux.js.org/basics/actions

const ADD_TODO = 'ADD_TODO'

function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  }
}

Vuex: https://vuex.vuejs.org/guide/actions.html

const store = new Vuex.Store({
  actions: {
    increment (context) {
      context.commit('increment') // commit a mutation to trigger state update
    }
  }
})

Async-Action

Redux(redux-thunk): https://redux.js.org/advanced/async-actions

// apply redux-thunk
import thunkMiddleware from 'redux-thunk'

const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware)
)

...

export function fetchPosts() {
  return function (dispatch) {
    dispatch(requestPosts())
    return fetch('xxx')
      .then(response => response.json())
      .then(json => dispatch(receivePosts(json)))
  }
}

Vuex: https://vuex.vuejs.org/guide/actions.html

actions: {
  async fetchPosts ({ commit }) {
    commit('requestPosts');
    const res = await fetch('xxx');
    commit('receivePosts', res);
  },
}

Reducer | Mutation

Redux(reducer): https://redux.js.org/basics/reducers

const initialState = {
  todos: [],
}

function todoApp(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false,
          }
        ],
      }

    default:
      return state
  }
}

Vuex(mutation): https://vuex.vuejs.org/guide/mutations.html

const store = new Vuex.Store({
  mutations: {
    addTodo (state, payload) {
      state.todos = [
        ...state.todos,
        { text: payload.text, completed: false }
      ]
    }
  }
})

Combine-Reducers | Modules

Redux(combine-reducers): https://redux.js.org/api/combinereducers

import { combineReducers } from 'redux'

const reducers = combineReducers({
  reducerA,
  reducerB,
})

export default reducers

Vuex(modules): https://vuex.vuejs.org/guide/modules.html

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

Connect-with-Component

Redux: https://redux.js.org/basics/usage-with-react

import { connect } from 'react-redux'
import { addTodo } from '../actions'
import TargetComp from '../components/TargetComp'

// state
const mapStateToProps = (state, ownProps) => {
  return {
    todos: state.todos,
  }
}

// action
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    addTodo: (text) => {
      dispatch(addTodo(text))
    }
  }
}

const TargetContainer = connect(mapStateToProps, mapDispatchToProps)(TargetComp)

export default TargetContainer

Vuex

state: https://vuex.vuejs.org/guide/state.html

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
  }
}

action: https://vuex.vuejs.org/guide/actions.html

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['increment']),
  }
}

Middleware | Plugin

Redux(middleware): https://redux.js.org/advanced/middleware

import { createStore, combineReducers, applyMiddleware } from 'redux'

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}
const todoApp = combineReducers(reducers)
const store = createStore(
  todoApp,
  applyMiddleware(logger)
)

Vuex(plugin): https://vuex.vuejs.org/guide/plugins.html

const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    // compare `prevState` and `nextState`...

    // save state for next mutation
    prevState = nextState
  })
}

const store = new Vuex.Store({
  ...,
  plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : [],
})

Selector | Getter

Redux(reselect): https://redux.js.org/recipes/computing-derived-data

import { createSelector } from 'reselect'

const getTodos = state => state.todos

export const getDoneTodos = createSelector(
  [getTodos],
  todos.filter(t => t.completed),
)

...

import { connect } from 'react-redux'
import TodoList from '../components/TodoList'
import { getDoneTodos } from '../selectors'

const mapStateToProps = state => {
  return {
    doneTodos: getDoneTodos(state)
  }
}

const DoneTodoList = connect(mapStateToProps)(TodoList)

export default DoneTodoList

Vuex: https://vuex.vuejs.org/guide/getters.html

const store = new Vuex.Store({
  state: { ... },
  getters: {
    doneTodos: state => {
      return state.todos.filter(t => t.completed)
    }
  }
})

...

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['doneTodos'])
  }
}

DevTools

Redux

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Vuex

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Reference

React and Vue Syntax Comparison Side by Side Part2: Router

Andrew — Mon, 15 Jun 2020 09:35:20 +0000

This is the second post about React and Vue syntax comparison. In this article, we compare the syntax for the most famous routing library in both ecosystems.

oahehc / react-vue-comparison

Comparing the syntax of React.js/Next.js and Vue.js/Nuxt.js side by side

Agenda

Basic-Routing
Dynamic-Routing
Nested-Routing
Link
NavLink
Get-Location
Push
Replace
Redirect
Event
Scroll
Lazy-Loading-and-Code-Splitting

Basic-Routing

React-Router

import { BrowserRouter, Switch, Route } from 'react-router-dom';

export default function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

Vue-Router

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
];
const router = new VueRouter({
  mode: 'history',
  routes,
});
const app = new Vue({ router }).$mount('#app');

<div id="app">
  <router-view></router-view>
</div>

Dynamic-Routing

React-Router

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route path="/contact/:id" component={Contact} />
      </div>
    </BrowserRouter>
  );
}

...

import { useParams } from 'react-router-dom';

function Contact() {
  let { id } = useParams();

  return ...;
}

Vue-Router

const router = new VueRouter({
  mode: 'history',
  routes: [{ path: '/contact/:id', component: Contact }],
});

export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};

Nested-Routing

React-Router

import { BrowserRouter, Route } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      <Route path="/tacos" component={Tacos} />
    </div>
  </BrowserRouter>
);

...

import { Route } from 'react-router-dom';

const Tacos = ({ match }) => (
  <div>
    {/* here's a nested Route, match.url helps us make a relative path */}
    <Route path={match.url + '/carnitas'} component={Carnitas} />
  </div>
);

Vue-Router

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile,
        },
        {
          path: 'posts',
          component: UserPosts,
        },
      ],
    },
  ],
});

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `,
};

Link

React-Router

<Link
  to={{
    pathname: '/courses',
    search: '?sort=name',
    hash: '#the-hash',
    state: { fromDashboard: true },
  }}
>
  courses
</Link>

Vue-Router

<router-link to="/courses">courses</router-link>

NavLink

NavLink is used to display different style when current URL match to the link.

React-Router

<NavLink to="/react" activeClassName="react">
  React
</NavLink>

Vue-Router

router-link automatically gets the .router-link-active class when its target route is matched.

<router-link to="/vue">vue</router-link>

Get-Location

React-Router

Function component

import { useLocation } from "react-router-dom";

function App() {
  const location = useLocation();

  return ...;
}

Class component

import { withRouter } from "react-router";

class App extends React.Component {
  static propTypes = {
    location: PropTypes.object.isRequired
  };

  render() {
    const { location } = this.props;

    return ...;
  }
}
export default withRouter(App);

Vue-Router

export default {
  computed: {
    path() {
      return this.$route.path;
    },
    params() {
      return this.$route.params;
    },
    query() {
      return this.$route.query;
    },
    hash() {
      return this.$route.hash;
    },
    fullPath() {
      return this.$route.fullPath;
    },
  },
};

Push

React-Router

import { useHistory } from 'react-router-dom';

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push('/home');
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

Vue-Router

export default {
  methods: {
    toHome() {
      this.$router.push('/home');
    },
    toUser(id) {
      this.$router.push({ name: 'user', params: { userId: id } });
    },
    toRegister(id) {
      // /register?plan=private
      this.$router.push({ path: 'register', query: { plan: 'private' } });
    },
  },
};

Replace

replacing the current entry instead of push a new entry onto the history stack.

React-Router

<Link to="/courses" replace />;

// or

const history = useHistory();

function handleClick() {
  history.replace('/courses');
}

Vue-Router

<router-link :to="/courses" replace />

export default {
  methods: {
    toHome() {
      this.$router.replace('/home');
    },
  },
};

Redirect

React-Router

<Redirect to="/login" />
<Redirect from="/invoices" to="/invoices/dashboard" />
// push a new entry onto the history instead of replacing the current one.
<Redirect push to="/somewhere/else" />

Vue-Router

const router = new VueRouter({
  routes: [{ path: '/a', redirect: { name: 'foo' } }],
});

Event

React-Router

Function component

import { useHistory } from 'react-router-dom';

function App() {
  const history = useHistory();

  useEffect(() => {
    const unlisten = this.props.history.listen(...);
    return () => unlisten();
  }, [])

  return ...;
}

Class component

import { withRouter } from "react-router";

class App extends React.Component {
  static propTypes = {
    history: PropTypes.object.isRequired
  };

  componentDidMount() {
    this.unlisten = this.props.history.listen(...);
  }

  componentWillUnmount() {
    if (this.unlisten && typeof this.unlisten === 'function') {
      this.unlisten();
    }
  }

  render() {
    return ...;
  }
}
export default withRouter(App);

Vue-Router

global

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => { ... })
router.afterEach((to, from) => { ... })

by route

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => { ... }
    }
  ]
})

by component

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) { ... },
  beforeRouteUpdate (to, from, next) { ... },
  beforeRouteLeave (to, from, next) { ... },
}

Scroll

React-Router

Because browsers are starting to handle the default case and apps have varying scrolling needs, React-Router don’t ship with default scroll management.

https://reacttraining.com/react-router/web/guides/scroll-restoration

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Vue-Router

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

Lazy-Loading-and-Code-Splitting

If you are using Babel, you will need to add the syntax-dynamic-import plugin so that Babel can properly parse the syntax.

React-Router

https://github.com/gregberge/loadable-components

import loadable from '@loadable/component';

const LoadableComponent = loadable(() => import('./Dashboard.js'), {
  fallback: <Loading />,
});

Vue-Router

const Foo = () => import('./Foo.vue');

const router = new VueRouter({
  routes: [{ path: '/foo', component: Foo }],
});

Reference

How to Create Multiple Environments with Vercel (Zeit Now) and Next.js?

Andrew — Sun, 07 Jun 2020 08:03:59 +0000

Vercel (formerly Zeit Now) does not just help us host our application, but also provides multiple environments for us to preview every change we made. So we can make sure all the new features are working perfectly before we launch a new version to our users. And we can also separate the database between development, preview (stage), and production environment. In this article, I will display how to create multiple environments by using Vercel and Next.js. And how to apply different environment variables for each environment.

Agenda

Start a Next.js project and Deploy Through Vercel
Apply Environment Variables for Multiple Environments
Deploy the Application to Different Environments

Start a Next.js project and Deploy Through Vercel

Init a Next.js project

npx create-next-app [ProjectName]

Create repository at GitHub, GitLab, or Bitbucket. And link to our project.

git remote add origin git@github.com:[GitHubAccount]/[ProjectName].git
git push -u origin master

Import Git Repository to Vercel

select the git provider: GitHub, GitLab, Bitbucket
connect to your git provider
import our repository into Vercel to create the project if we can't find the repo we want, adjust repository access setting in the git provider.
leave all the settings as default
click the link to check our application after the status change from Building to Ready

Now, we have deployed our application online. Let's check how to create multiple environments for our application.

Apply Environment Variables for Multiple Environments

The environments provide by Vercel: Production, Preview, and Development

We will see that Vercel provides multiple links for the deployment.

And there are three different environments in Vercel.

So, what's the relationship between those links and the environments (production, preview, development)?

Vercel default provide two URLs for each project:
- [ProjectName].now.sh
- [ProjectName].[VercelAccount].now.sh
Vercel will create an URL with a random hash for each deployment:
- [ProjectName]-[hash].now.sh
If we deploy to the production environment, then both URLs will be linked to this deployment.
If we deploy to the preview environment, then only [ProjectName].[VercelAccount].now.sh will be linked to this deployment.
Development is for our local environment.

	Production	Preview	Development
`[ProjectName].now.sh`	v	x	x
`[ProjectName].[VercelAccount].now.sh`	v	v	x
`[ProjectName]-[hash].now.sh`	v	v	x
`localhost:xxxx`	x	x	v

And of course we can customize the URL, just click View Domains and add the domain we want.

Furthermore, we can bind the domain with a specific git branch.

Set environment variables at Vercel

We can set different environment variables for all three environments.

Dashboard > Project > Settings > General

And Vercel provides a few system environment variables for us.

Set environment variables at Next.js

After finishing the setting of the environment variables at Vercel, now let's check how to apply those variables in the Next.js project.

(In this article, we use .env for environment variables. It is for Next.js versions 9.4 and up. If you’re using an older version of Next.js, check Environment Variables in next.config.js.)

To apply environment variables in the Next.js project, we need to create a .env.local file at the root folder.

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

Or we can download the variables from the Vercel.

Install Vercel cli

npm i -g vercel
or
yarn global add vercel

Download development environment variables

vercel env pull .env.local

And we can bind the download command with the dev script. This will make sure we always apply the latest variables.

{
  "scripts": {
    "predev": "vercel env pull .env.local",
    "dev": "next",
    ...
  }
}

Because Next.js is a server-side render framework, the environment variables have a little difference between the client (browser) and server-side.

server (node.js) It loads process.env.xxx into the Node.js environment automatically allowing us to use them in Next.js data fetching methods (getStaticProps, getServerSideProps) and API routes.

   export async function getStaticProps() {
     const db = await myDB.connect({
       host: process.env.DB_HOST,
       username: process.env.DB_USER,
       password: process.env.DB_PASS,
     });
     // ...
   }

client (browser) If we want to use those variables at the client-side, then we need to prefix the variable with NEXT_PUBLIC_. This will allow us to use those variables anywhere in our code.

   import setupAnalyticsService from "../lib/my-analytics-service";

   setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID);

   export default function HomePage() {
     return <h1>Hello World</h1>;
   }

⚠ We need to be careful when prefixing the variable with NEXT_PUBLIC_. Never public important information like the token or password.

Deploy the Application to Different Environments

The last part of this article is about how to deploy our application to the preview and production environment. This is quite straightforward by using Vercel Cli.

Deploy to preview environment

vercel

Deploy to production environment

vercel --prod

Except manually deploy through Vercel Cli, if we create the project by git provider, then Vercel will handle the deploy automatically.

Pushing or merging to the default branch (commonly "master") will trigger the production deployment.
Pushing or pull requests made to branches will trigger preview deployment.

Conclusion

Here is the source code for reference. Thanks for reading. Feel free to leave the comments if you have any questions or suggestions.

oahehc / vercel-nextjs-now-example

an example to display how to use Next.js and Vercel now to create a multiple environments for our application

Reference

[Web Monetization] Share Useful Information & Earn Real Money From It！

Andrew — Fri, 29 May 2020 12:51:55 +0000

What I built

Submission Category: Creative Catalyst

The problem we want to solve through this project is that some people might have useful information. But the information is not enough to create a full article or a YouTube video. And most people are not the influencers who have tons of people follow them on Twitter or Facebook. But they might not want to give that information for free. This application applies Web Monetization to solve those kinds of problems.
Everyone can create an account and start sharing their information right away. And the application will base on the number of votes of each post to calculate the probabilistic revenue sharing (the detail about the algorithm will be introduced at the Link to Code section).

All in all, this application is like a Twitter account shared by all people around the world. So everyone can publish useful information here. Moreover, if the post received enough votes, the author can earn the money for it.

Demo

Link: https://you-might-want.oahehc.now.sh/

There're three types of users on our application.

1. Author

Anyone can register through google account and provide their wallet. Then the users can start sharing their information on our application.

Once the post reaches enough votes, the author will receive the profit share on their wallet.

The post is limited by 500 characters because we wish the author can provide the information succinctly. It will allow our readers to consume as much information.

2. Normal Reader

Everyone can start reading posts without registration.

3. Paid Reader

The paid reader is someone who have joined web monetization and register through Google account.

The paid reader will be able to rate the posts (thumb-up and thumb-down). Because the most important factor that which post should get more profit sharing is coming from the votes. Therefore, it's only the paid reader who can join the rating to decide which article is worthy to receive the money they have paid. And this will also make the rating result more trustable.

And we are planning to provide more advanced features for the paid reader including remove ads, collect posts, and search posts, etc.

Link to Code

Here is the full repo for reference.

oahehc / you-might-want

share something other people might want to know and earn money from those information.

In the below section, I will point out the parts relative to web monetization.

React Hook for web monetization

We create a custom React hook to handle all the events about web monetization.

import { useState, useEffect } from 'react';

type MonetizationInfo = {
  state: MonetizationState | undefined;
  isApplied: boolean;
  isStarted: boolean;
  isPending: boolean;
  isStopped: boolean;
  detail: MonetizationEventDetail | undefined;
};

export default function useMonetization(): [MonetizationInfo] {
  const [state, setState] = useState<MonetizationState>();
  const [detail, setDetail] = useState<MonetizationEventDetail>();

  function pendingEventHandler(event: MonetizationEvent) {
    setState('pending');
    setDetail(event.detail);
  }
  function stoppedEventHandler(event: MonetizationEvent) {
    setState('stopped');
    setDetail(event.detail);
  }
  function startedEventHandler(event: MonetizationEvent) {
    setState('started');
    setDetail(event.detail);
  }
  function onprogressEventHandler(event: MonetizationEvent) {
    setDetail(event.detail);
  }

  useEffect(() => {
    if (document !== undefined && document.monetization !== undefined) {
      const defaultState = document.monetization.state;
      setState(defaultState);

      document.monetization.addEventListener('monetizationstart', startedEventHandler);
      document.monetization.addEventListener('monetizationpending', pendingEventHandler);
      document.monetization.addEventListener('monetizationstop', stoppedEventHandler);
      document.monetization.addEventListener('monetizationprogress', onprogressEventHandler);
    }

    return () => {
      if (document !== undefined && document.monetization !== undefined) {
        document.monetization.removeEventListener('monetizationstart', startedEventHandler);
        document.monetization.removeEventListener('monetizationpending', pendingEventHandler);
        document.monetization.removeEventListener('monetizationstop', stoppedEventHandler);
        document.monetization.removeEventListener('monetizationprogress', onprogressEventHandler);
      }
    };
  }, []);

  return [
    {
      state,
      isApplied: typeof state !== 'undefined',
      isStarted: state === 'started',
      isPending: state === 'pending',
      isStopped: state === 'stopped',
      detail,
    },
  ];
}

And we apply Typescript to make it easier to maintain and prevent error-prone.

type MonetizationState = 'stopped' | 'pending' | 'started';
type MonetizationEventDetail = {
  /** Your payment account URL. The same value is used as the content in your <meta> tag. */
  paymentPointer: string;
  /** This value is identical to the session ID/monetization ID (UUID v4) generated by the user agent */
  requestId: string;
  /** When true, the monetization tag has been removed or the paymentPointer changed. No more events with this requestId expected. */
  finalized?: boolean;
  /** The destination amount received as specified in the Interledger protocol (ILP) packet. */
  amount?: string;
  /** The code (typically three characters) identifying the amount's unit. A unit, for example, could be a currency (USD, XRP). */
  assetCode?: string;
  /** The number of places past the decimal for the amount. For example, if you have USD with an asset scale of two, then the minimum divisible unit is cents. */
  assetScale?: number;
};
type MonetizationEvent = { detail: MonetizationEventDetail };
interface Document {
  monetization: {
    state: MonetizationState;
    addEventListener: (
      type: 'monetizationstart' | 'monetizationpending' | 'monetizationstop' | 'monetizationprogress',
      cb: (event: MonetizationEvent) => void
    ) => void;
    removeEventListener: (
      type: 'monetizationstart' | 'monetizationpending' | 'monetizationstop' | 'monetizationprogress',
      cb: (event: MonetizationEvent) => void
    ) => void;
  };
}

Algorithm for revenue sharing

Another part about web monetization is how we calculate the revenue sharing. Here is our current algorithm. Basically, it's calculated base on the time diff (now - created time) and votes diff (#thumb-ups - #thumb-downs).

The idea about this algorithm is trying to give a larger portion of profit to the latest or more popular posts.

function getPostPoint({
  created,
  upVotes,
  downVotes,
}: {
  created: string;
  upVotes: string[];
  downVotes: string[];
}): number {
  const votesDiff = upVotes.length - downVotes.length;
  if (votesDiff <= 0) return 0;

  const timeDiff = Date.now() - new Date(created).getTime();
  return (100000000 / timeDiff) ** 1.2 * votesDiff ** 1.2;
}

Time \ Vote Diff	10	100	1,000
5 mins	1,688	26,758	424,087
1 hours	86	1,357	21,500
1 day	2	30	474
1 week	0	3	46
1 month	0	1	8

How I built it

Stack

React.js, Typescript, Next.js, Vercel(Zeit) Now, AWS DynamoDB, Google OAuth.

Issues

During the time we were working on this project, we notice that if we want to apply the sharing profit mechanism, the current policy about web monetization still has some problems that need to figure out some better alternative.

Currently, the user paid $5 per month, and the website will receives $0.0001/s. But once the user exceeds $4.50 in a month, the rate that the website receive will drop to $0.000000186/s. This means that only the user visits your website at the first 12.5 hours every month, then you will receive $0.0001/s. Otherwise, the rate will be $0.000000186/s which has a huge gap.

once a user exceeds $4.50 in a month they're dropped to a lower rate allowing
them to still access WM content (although this is not a permanent solution).
The lower rate is such that the user can use WM for the rest of the month
without exceeding $5. You'll mostly encounter users at the $0.0001/s rate
but a few will be sending $0.000000186/s

The rate is obviously not enough to attract users to share their information. If our website has 1,000 active paid users which will visit the website 1 hour per day. And we assume that we can get 10% from their first 12.5 hours (the period with $0.0001/s rate). Then the total income per month will be around $470. The amount of total income will not be enough to cover the website's operating fee. So we still have to seek for other monetization (eg. ads).

         1.25 hours * $0.0001/s      * 1000
+ (30 - 1.25) hours * $0.000000186/s * 1000
= 450 + 19.251

Another problem is the current revenue-sharing solution won't guarantee the author will receive the money based on the proportion. The current solution for revenue sharing is to generate different monetization meta tag for each pageview. But the revenue is based on how much time the user spent on our website. Even we can generate the monetization meta tag based on the proportion we want. The active time for each pageview is not under our control which will cause the final amount that each author received might have a large gap compared to the proportion we calculated.

probabilistic-rev-sharing

Conclusion

Web monetization is an interesting idea. I'm happy to have the chance to join this Hackathon and play around with this technique. It was fun and I got lots of experience from the process.

Special thanks to @sharafian and @cyberdees who answer our questions on the channel.

If you have any suggestions about this application. Please feel free to leave your comment or send a message to me. Thanks for reading.

Additional Resources/Info

What's the Best Way to Set The Cache-Control Header?

Andrew — Thu, 07 May 2020 00:29:46 +0000

As a web developer, we spend lots of time minimizing our files and API response in order to allow our customers to have a better user experience. What if we can make it better by reducing the response to just a few hundred bytes or even zero? Implementing a better cache control policy will help us to reach that goal. In this article, I will list a few strategies about how to properly set the response header to allow the browser to handle the cache for us.

Agenda

Gotchas
HTTP header - Cache-Control
HTTP header - ETag
Cache Strategies
Benefits

Gotchas

Before we start, there are a few gotchas I want to point out first.

When we are testing our cache setting, pressing "enter" on the address bar rather than refresh page with F5. Because some browsers will send the request with header Cache-Control max-age=0 and overwrite our cache policy when we refresh the page. Check here for more information.
Not all CDN providers follow the cache-control header (eg. some CDN providers follow max-age rather than s-maxage), you might want to check with your CDN provider before you start modifying the settings.

HTTP header - Cache-Control

There are tons of settings for cache-control. To make this article easier to understand, here I only mention the attributes that I'm going to apply to my examples. If you're interested to know more about that. You can check here to gain more information.

Cacheability

public: The response can be stored by proxy or browser
no-cache: The response can be stored by proxy or browser, but the stored response MUST always go through validation with the origin server first before using it.

Expiration

max-age: The maximum amount of time a resource is considered fresh.
s-maxage: Overrides max-age or the Expires header, but only for shared caches (e.g., proxies).

Revalidation and reloading

must-revalidate: Indicates that once a resource becomes stale, caches must not use their stale copy without successful validation on the origin server.
immutable: Indicates that the response body will not change over time. The resource, if unexpired, is unchanged on the server and therefore the client should not send a conditional revalidation for it.

HTTP header - ETag

The ETag HTTP response header is an identifier for a specific version of a resource. It lets caches be more efficient and save bandwidth, as a web server does not need to resend a full response if the content has not changed.

	Request	Response
1st request	GET /	200 OK Cache-Control: max-age=0 ETag: W/"a46ba20afd"
ETag haven't changed	GET / If-None-Match: W/"a46ba20afd"	304 Not Modified
ETag was changed	GET / If-None-Match: W/"a46ba20afd"	200 OK Cache-Control: max-age=0 ETag: W/"7a48833148"

Another use case about ETag is avoiding mid-air collisions, it's not related to cache control so I won't dive into that. Check here if you're interested.

Cache Strategies

Apply cache can not only save the bandwidth but also prevent the latency to allow the user to get the result faster.
But at the same time, we also want to make sure our users can always see the latest version of the application. Therefore, it's extremely important to config the cache-control header properly. Normally, we need to base on the type of our pages and files to apply different cache strategies. Here I list a few types of the setting for different scenarios.

1. Always Revalidation

If the page is changed frequently, like the list page for the e-commerce website. Then we should let the user check if there is any new information on every request. Therefore, we can set the cache-control as below.



Cache-Control: public, max-age=0, must-revalidate;

The behavior will looks like the table below.

	Request	Response
1st request	GET /	200 OK ETag: W/"a46ba20afd"
next request and ETag haven't changed	GET / If-None-Match: W/"a46ba20afd"	304 Not Modified
another request after ETag was changed	GET / If-None-Match: W/"a46ba20afd"	200 OK ETag: W/"7a48833148"

You can play around with this demo page. The etag will change every 10 seconds.

2. Long Term Caching

For some content that is hardly changed, then we can set a longer max-age and add the immutable property. This will allow the browser to use the catch from disk or memory if the age is within the range. Therefore, we can prevent sending an unnecessary request for saving bandwidth and also reduce the latency.



Cache-Control: public, max-age=604800, immutable;

The behavior will looks like the table below.

	Request	Response
1st request	GET /	200 OK
within max-age	N/A	200 (from disk cache)
over max-age	GET /	200 OK

You can play around with this demo page. The max-age is 30 seconds.

Long Term Caching is suited for static files like javascript, css, or images. But what if we need to change it within the max-age? Normally, when we apply the Long Term Caching, we will add a hash string into the file name (eg. filename.[hash].js), So we can force the browser request the new file when we change the content.

Benefits

Now let's talk about the benefits of cache-control. The biggest reward will be the cost-saving on the bandwidth. In reference to AWS CloudFront, the transmission cost is around $ 0.1/GB. But how much bandwidth can we save after applying a different cache-control policy?

1. Always Revalidation

If we apply the Always Revalidation policy, our server will respond 304 rather than the full content if the browser already has the latest content and the content isn't changed. Therefore, the bandwidth we can save is based on how many users will revisit the website and how often the content changes.

For example, if our website's content changes once per week. And every week, about 10% of pageview is coming from the revisit user. Then the total bandwidth we can save will be around 10% (if we ignore 304 response size).

2. Long Term Caching

If we apply the Long Term Caching policy, the browser will use the cache directly without sending the validating request. So we save more bandwidth. The drawback is that we will have to change the file name if we need to change the content within the cache time (max-age).

Example

If you still feel a little confused about cache-control, let me try to explain in an example.
If our website has only one page. It contents one html, one css and one javascript file. And Bob is our loyal user who needs to reference the information on our website every day.

The content change about one time per week (change html)
We release a new version every week (change html, css, js)
We upgrade third party libraries every half year (change js )

The table below is how many times Bob needs to download our files in a year. We can see how much bandwidth we can save after applying a better cache-control policy.

	size	without cache	Always Revalidation	Long Term Caching
index.html	50KB	*365	*52	*52
index.css	50KB	*365	*52	*12
index.js	100KB	*365	*52	*12
Total		71.29MB (100%)	10.16MB (14.2%)	4.3MB (6%)

Moreover, because we only update third party libraries twice per year, so if we separate our javascript file into two files, one is our own script - main.js, another is third party library - vendor.js. Then we will be able to save more bandwidth. You can search code-splitting to get more information about it.

		Long Term Caching + code splitting
index.html	50KB	*52
index.css	50KB	*12
main.js	50KB	*12
vendor.js	50KB	*2
Total		3.8MB (5.3%)

Conclusion

That's all. Thanks for reading, I hope this article can help you have a better understanding of cache-control.

Reference

React.js / Next.js and Vue.js / Nuxt.js Syntax Comparison Side by Side

Andrew — Sun, 19 Apr 2020 00:31:57 +0000

React.js and Vue.js are both great frameworks. And Next.js and Nuxt.js even bring them to the next level, which helps us to create the application with less configuration and better maintainability. But if you have to switch between those to frameworks frequently. You might easily forget the syntax in another framework after diving into the other one. In this article, I summarize the basic syntax and scenarios for those frameworks and list then side by side. I hope this can help us catch up with the syntax as soon as possible.

oahehc / react-vue-comparison

Comparing the syntax of React.js/Next.js and Vue.js/Nuxt.js side by side

Agenda

React.js vs Vue.js
- Render
- Basic-Component
- Prop
- Event-Binding
- Custom-Event
- State
- Change-State
- Two-Way-Binding(Vue.js only)
- Compute
- Watch
- Children-and-Slot
- Render-HTML
- Conditional-Rendering
- List-Rendering
- Render-Props
- Lifecycle
- Error-Handling
- Ref
- Performance-Optimization
Next.js vs Nuxt.js
- Assets
- Basic-Routes
- Dynamic-Routes
- Link
- Fetch-On-Server
- Layout
- Error-Page
- Meta-Tag
- Context
Tools
- CLI

Render

React.js

ReactDOM.render(<App />, document.getElementById("root"));

Vue.js

new Vue({
  render: (h) => h(App),
}).$mount("#root");

Basic-Component

React.js

Class component

class MyReactComponent extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

Function component

function MyReactComponent() {
  return <h1>Hello world</h1>;
}

Vue.js

<template>
  <h1>Hello World</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
  };
</script>

Prop

React.js

function MyReactComponent(props) {
  const { name, mark } = props;

  return <h1>Hello {name}{mark}</h1>;
}

MyReactComponent.propTypes = {
  name: PropTypes.string.isRequired,
  mark: PropTypes.string,
}
MyReactComponent.defaultProps = {
  mark: '!',
}
...

<MyReactComponent name="world">

Vue.js

<template>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: {
        type: String,
        required: true,
      },
      mark: {
        type: String,
        default: "!",
      },
    },
  };
</script>

...

<MyVueComponent name="World" />

Event-Binding

React.js

Class component

class MyReactComponent extends React.Component {
  save = () => {
    console.log("save");
  };

  render() {
    return <button onClick={this.save}>Save</button>;
  }
}

Function component

function MyReactComponent() {
  const save = () => {
    console.log("save");
  };

  return <button onClick={save}>Save</button>;
}

Vue.js

<template>
  <button @click="save()">Save</button>
</template>
<script>
  export default {
    methods: {
      save() {
        console.log("save");
      },
    },
  };
</script>

Custom-Event

React.js

function MyItem({ item, handleDelete }) {
  return <button onClick={() => handleDelete(item)}>{item.name}</button>;

  /*
   * Apply useCallback hook to prevent generate new function every rendering.
   *
   * const handleClick = useCallback(() => handleDelete(item), [item, handleDelete]);
   *
   * return <button onClick={handleClick}>{item.name}</button>;
  */
}

...

function App() {
  const handleDelete = () => { ... }

  return <MyItem item={...} handleDelete={handleDelete} />
}

Vue.js

<template>
  <button @click="deleteItem()">{{item.name}}</button>
</template>
<script>
  export default {
    name: "my-item",
    props: {
      item: Object,
    },
    methods: {
      deleteItem() {
        this.$emit("delete", this.item);
      },
    },
  };
</script>

...

<template>
  <MyItem :item="item" @delete="handleDelete" />
</template>
<script>
  export default {
    components: {
      MyItem,
    },
    methods: {
      handleDelete(item) { ... }
    },
  };
</script>

State

React.js

Class component

class MyReactComponent extends React.Component {
  state = {
    name: 'world,
  }
  render() {
    return <h1>Hello { this.state.name }</h1>;
  }
}

Function component

function MyReactComponent() {
  const [name, setName] = useState("world");

  return <h1>Hello {name}</h1>;
}

Vue.js

<template>
  <h1>Hello {{ name }}</h1>
  <!-- use component state as prop -->
  <my-vue-component :name="name">
</template>
<script>
  export default {
    data() {
      return { name: "world" };
    },
  };
</script>

Change-State

React.js

Class component

class MyReactComponent extends React.Component {
  state = {
    count: 0,
  };

  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
    // get current state before update to make sure we didn't use the stale value
    // this.setState(currentState => ({ count: currentState.count + 1 }));
  };

  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.increaseCount}>Add</button>
      </div>
    );
  }
}

Function component

function MyReactComponent() {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount(count + 1);
    // setCount(currentCount => currentCount + 1);
  };

  return (
    <div>
      <span>{count}</span>
      <button onClick={increaseCount}>Add</button>
    </div>
  );
}

Vue.js

<template>
  <div>
    <span>{{count}}</span>
    <button @click="increaseCount()">Add</button>
  </div>
</template>
<script>
  export default {
    data() {
      return { count: 0 };
    },
    methods: {
      increaseCount() {
        this.count = this.count + 1;
      },
    },
  };
</script>

Two-Way-Binding(Vue.js only)

React.js

React didn't have two-way binding, so we need to handle the data flow on our own

function MyReactComponent() {
  const [content, setContent] = useState("");

  return (
    <input
      type="text"
      value={content}
      onChange={(e) => setContent(e.target.value)}
    />
  );
}

Vue.js

<template>
  <input type="text" v-model="content" />
</template>
<script>
  export default {
    data() {
      return { content: "" };
    },
  };
</script>

Compute

React.js

React.js don't have compute property, but we can achieve this through react hook easily

function DisplayName({ firstName, lastName }) {
  const displayName = useMemo(() => {
    return `${firstName} ${lastName}`;
  }, [firstName, lastName]);

  return <div>{displayName}</div>;
}

...

<DisplayName firstName="Hello" lastName="World" />

Vue.js

<template>
  <div>{{displayName}}</div>
</template>
<script>
  export default {
    name: "display-name",
    props: {
      firstName: String,
      lastName: String,
    },
    computed: {
      displayName: function () {
        return `${this.firstName} ${this.lastName}`;
      },
    },
  };
</script>

...

<DisplayName firstName="Hello" lastName="World" />

Watch

React.js don't have watch property, but we can achieve this through react hook easily

function MyReactComponent() {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount((currentCount) => currentCount + 1);
  };

  useEffect(() => {
    localStorage.setItem("my_count", newCount);
  }, [count]);

  return (
    <div>
      <span>{count}</span>
      <button onClick={increaseCount}>Add</button>
    </div>
  );
}

Vue.js

<template>
  <div>
    <span>{{count}}</span>
    <button @click="increaseCount()">Add</button>
  </div>
</template>
<script>
  export default {
    data() {
      return { count: 0 };
    },
    methods: {
      increaseCount() {
        this.count = this.count + 1;
      },
    },
    watch: {
      count: function (newCount, oldCount) {
        localStorage.setItem("my_count", newCount);
      },
    },
  };
</script>

Children-and-Slot

React.js

function MyReactComponent({ children }) {
  return <div>{children}</div>;
}

...

<MyReactComponent>Hello World</MyReactComponent>

Vue.js

<template>
  <div>
    <slot />
  </div>
</template>
<script>
  export default {
    name: "my-vue-component",
  };
</script>

...

<MyVueComponent>Hello World</MyVueComponent>

Render-HTML

React.js

function MyReactComponent() {
  return <div dangerouslySetInnerHTML={{ __html: "<pre>...</pre>" }} />;
}

Vue.js

<template>
  <div v-html="html"></div>
</template>
<script>
  export default {
    data() {
      return {
        html: "<pre>...</pre>",
      };
    },
  };
</script>

Conditional-Rendering

React.js

function MyReactComponent() {
  const [isLoading, setLoading] = useState(true);

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {isLoading ? <div>is loading</div> : <div>is loaded</div>}
    </div>
  );
}

Vue.js

<template>
  <div>
    <!--v-show: always render but change css base on the condition-->
    <span v-show="loading">Loading...</span>
    <div>
      <div v-if="loading">is loading</div>
      <div v-else>is loaded</div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return { loading: true };
    },
  };
</script>

List-Rendering

React.js

function MyReactComponent({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>
          {item.name}: {item.desc}
        </li>
      ))}
    </ul>
  );
}

Vue.js

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{item.name}}: {{item.desc}}
    </li>
  </ul>
</template>
<script>
  export default {
    props: {
      items: Array,
    },
  };
</script>

Render-Props

React.js

function Modal({children, isOpen}) {
  const [isModalOpen, toggleModalOpen] = useState(isOpen);

  return (
    <div className={isModalOpen ? 'open' : 'close'}>
      {type children === 'function' ? children(toggleModalOpen) : children}
    </div>)
  ;
}

Modal.propTypes = {
  isOpen: PropTypes.bool,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
}
Modal.defaultProps = {
  isOpen: false,
}

...

<Modal isOpen>
  {(toggleModalOpen) => {
    <div>
      <div>...</div>
      <button onClick={() => toggleModalOpen(false)}>Cancel</button>
    </div>
  }}
</Modal>

Vue.js (slot)

<template>
  <div v-show="isModalOpen">
    <slot v-bind:toggleModal="toggleModalOpen" />
  </div>
</template>
<script>
  export default {
    name: "modal",
    props: {
      isOpen: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        isModalOpen: this.isOpen,
      };
    },
    methods: {
      toggleModalOpen(state) {
        this.isModalOpen = state;
      },
    },
  };
</script>

...

<Modal isOpen>
  <template v-slot="slotProps">
    <div>...</div>
    <button @click="slotProps.toggleModal(false)">Close</button>
  </template>
</Modal>

Lifecycle

React.js

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Class component

class MyReactComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {}
  componentDidMount() {}
  shouldComponentUpdate(nextProps, nextState) {}
  getSnapshotBeforeUpdate(prevProps, prevState) {}
  componentDidUpdate(prevProps, prevState) {}
  componentWillUnmount() {}

  render() {
    return <div>Hello World</div>;
  }
}

Function component

function MyReactComponent() {
  // componentDidMount
  useEffect(() => {}, []);


  // componentDidUpdate + componentDidMount
  useEffect(() => {});

  // componentWillUnmount
  useEffect(() => {
    return () => {...}
  }, []);

  // runs synchronously after a render but before the screen is updated
  useLayoutEffect(() => {}, []);

  return <div>Hello World</div>;
}

Vue.js

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

<template>
  <div>Hello World</div>
</template>
<script>
  export default {
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
  };
</script>

Error-Handling

React.js

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {}

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

...

<ErrorBoundary>
  <App />
</ErrorBoundary>

Vue.js

const vm = new Vue({
  data: {
    error: "",
  },
  errorCaptured: function(err, component, details) {
    error = err.toString();
  }
}

Ref

React.js

Class component

class AutofocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  state = {
    content: "",
  };

  componentDidMount() {
    this.ref.current.focus();
  }

  setContent = (e) => {
    this.setState({ content: e.target.value });
  };

  render() {
    return (
      <input
        ref={this.ref}
        type="text"
        value={this.state.content}
        onChange={this.setContent}
      />
    );
  }
}

Function component

function AutofocusInput() {
  const [content, setContent] = useState("");
  const ref = useRef(null);

  useEffect(() => {
    if (ref && ref.current) {
      ref.current.focus();
    }
  }, []);

  return (
    <input
      ref={ref}
      type="text"
      value={content}
      onChange={(e) => setContent(e.target.value)}
    />
  );
}

Vue.js

<template>
  <input ref="input" type="text" v-model="content" />
</template>
<script>
  export default {
    name: "autofocus-input",
    data() {
      return { content: "" };
    },
    mounted() {
      this.$refs.input.focus();
    },
  };
</script>

Performance-Optimization

React.js

PureComponent

class MyReactComponent extends React.PureComponent {
  ...
}

shouldComponentUpdate

class MyReactComponent extends React.Component {
  shouldComponentUpdate(nextProps) {...}

  ...
}

React.memo

export default React.memo(
  MyReactComponent,
  (prevProps, nextProps) => {
    ...
  }
);

useMemo

export default function MyReactComponent() {
  return React.useMemo(() => {
    return <div>...</div>;
  }, []);
}

useCallback

function MyItem({ item, handleDelete }) {
  const handleClick = useCallback(() => handleDelete(item), [
    item,
    handleDelete,
  ]);

  return <button onClick={handleClick}>{item.name}</button>;
}

Vue.js

v:once

<span v-once>This will never change: {{msg}}</span>

functional component

https://vuejs.org/v2/guide/render-function.html#Functional-Components

<template functional>
  <h1>Hello {{ name }}</h1>
</template>
<script>
  export default {
    name: "MyVueComponent",
    props: {
      name: String,
    },
  };
</script>

keep-alive component

https://vuejs.org/v2/api/#keep-alives

<keep-alive>
  <component :is="view"></component>
</keep-alive>

Assets

Next.js

/*
|- public/
|-- my-image.png
*/
function MyImage() {
  return <img src="/my-image.png" alt="my image" />;
}

Nuxt.js

assets

By default, Nuxt uses vue-loader, file-loader and url-loader for strong assets serving.

<!--
|- assets/
  |- image.png
-->
<img src="~/assets/image.png" alt="image" />

static

automatically served

<!--
|- static/
  |- image.png
-->
<img src="/image.png" alt="image" />

Basic-Routes

Next.js

|- pages/
  |- index.js        → href="/"
  |- blog/index.js   → href="/blog"

Nuxt.js

|- pages/
  |- index.vue       → href="/"
  |- blog/index.vue  → href="/blog"

Dynamic-Routes

Next.js

|- pages/
  |- blog/[slug].js           → href="/blog/:slug" (eg. /blog/hello-world)
  |- [username]/[option].js   → href="/:username/:option" (eg. /foo/settings)
  |- post/[...all].js         → href="/post/*" (eg. /post/2020/id/title)

Nuxt.js

|- pages/
  |- blog/[slug].vue         → href="/blog/:slug" (eg. /blog/hello-world)
  |- _username/_option.vue   → href="/:username/:option" (eg. /foo/settings)

Link

Next.js

import Link from "next/link";

function Home() {
  return (
    <Link href="/">
      <a>Home</a>
    </Link>
  );
}

Nuxt.js

<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>

Fetch-On-Server

Next.js

getInitialProps can only be used in the default export of every page

< Next.js 9.3 (class component)

import fetch from "isomorphic-unfetch";

export default class Page extends React.Component {
  static async getInitialProps(ctx) {
    const res = await fetch(`https://.../data`);
    const data = await res.json();

    return { props: { data } };
  }

  render() {
    // Render data...
  }
}

< Next.js 9.3 (function component)

import fetch from "isomorphic-unfetch";

function Page({ data }) {
  // Render data...
}

Page.getInitialProps = async (ctx) => {
  const res = await fetch(`https://.../data`);
  const data = await res.json();

  return { props: { data } };
};

>= Next.js 9.3

import fetch from "isomorphic-unfetch";

function Page({ data }) {
  // Render data...
}

export async function getServerSideProps() {
  const res = await fetch(`https://.../data`);
  const data = await res.json();

  return { props: { data } };
}

export default Page;

Nuxt.js

<template>
  <div v-if="$fetchState.error">Something went wrong 😭</div>
  <div v-if="$fetchState.pending">Loading...</div>
  <div v-else>
    <h1>{{ post.title }}</h1>
    <pre>{{ post.body }}</pre>
    <button @click="$fetch">Refresh</button>
  </div>
</template>

<script>
  import fetch from "node-fetch";

  export default {
    data() {
      return {
        post: {},
      };
    },
    async fetch() {
      this.post = await this.$http.$get("xxx");
    },
    fetchOnServer: true,
  };
</script>

Layout

Next.js

./pages/_app.js: automatically apply to all pages

export default function MyApp({ Component, pageProps }) {
  return (
    <React.Fragment>
      <MyHeader />
      <Component {...pageProps} />
      <MyFooter />
    </React.Fragment>
  );
}

Nuxt.js

layouts/with-header-footer.vue: create layout

<template>
  <div>
    <MyHeader />
    <nuxt />
    <MyFooter />
  </div>
</template>

pages/index.vue: apply layout

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: "with-header-footer",
  };
</script>

Error-Page

Next.js

pages/_error.js

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : "An error occurred on client"}
    </p>
  );
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
  return { statusCode };
};

export default Error;

Nuxt.js

layouts/error.vue

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
  export default {
    props: ["error"],
    layout: "blog", // you can set a custom layout for the error page
  };
</script>

Meta-Tag

Next.js

import Head from "next/head";

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

Nuxt.js

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: "Hello World!",
      };
    },
    head() {
      return {
        title: this.title,
        meta: [
          // To avoid duplicated meta tags when used in child component, set up an unique identifier with the hid key
          {
            hid: "description",
            name: "description",
            content: "My custom description",
          },
        ],
      };
    },
  };
</script>

Context

Next.js

getInitialProps can only be used in the default export of every page

function Page({ data }) {
  // Render data...
}

Page.getInitialProps = async (context) => {
  const { pathname, query, asPath, req, res, err } = context;
  // pathname - Current route. That is the path of the page in /pages
  // query - Query string section of URL parsed as an object
  // asPath - String of the actual path (including the query) shown in the browser
  // req - HTTP request object (server only)
  // res - HTTP response object (server only)
  // err - Error object if any error is encountered during the rendering

  return { props: { project: "next" } };
};

Nuxt.js

export default {
  asyncData(context) {
    // Universal keys
    const {
      app,
      store,
      route,
      params,
      query,
      env,
      isDev,
      isHMR,
      redirect,
      error,
    } = context;
    // Server-side
    if (process.server) {
      const { req, res, beforeNuxtRender } = context;
    }
    // Client-side
    if (process.client) {
      const { from, nuxtState } = context;
    }

    return { project: "nuxt" };
  },
};

CLI

React.js: create-react-app

npx create-react-app react-template

Next.js: create-next-app

npx create-next-app next-template

Vue.js: vue-cli

yarn global add @vue/cli
vue create vue-template

Nuxt.js: create-nuxt-app

npx create-nuxt-app nuxt-template