DEV Community: Liu Yu Zhou

How Strapi triggers Nuxt static site generation for S3 bucket

Liu Yu Zhou — Mon, 26 Apr 2021 15:10:56 +0000

I have been working on ecommerce website, we just suppose to build the website as operational.

I choose Strapi and Nuxt, Algolia for search engine

Strapi is headless CMS, open-source, provides the large-scale of APIs without hard-coding.
Nuxt is SSR vue.js based framework, useful for pre-rendered pages for ecommerce.
Algolia is client-side search engine, very impressive tool to make high traffic in business.

The infrastructure I use

Source repositories on Github
Strapi on AWS EC2 instance
Nuxt on AWS S3 bucket

The things I need

The static website should be generated again when

The developer commit the code updates.
The author upload own product.

How did I tweak the problems

I solved all problems with GitHub Actions, it is the great tool for CI/CD.

> SSG : The developer commit the code updates.

It involves several steps:

Specify when the github action should be trigger
Configure AWS Credentials
Create ENV files
Cache Packages
Install Packages
Generate Static Pages
Deploy website on S3 bucket
Cloudfront Invalidation

> SSG: The author upload own product.

This is the tricky, I was stuck on this for couple of days.
There should be something to trigger S3 updates from Strapi,
I had researched the solutions and found that Netlify is the best solution because it provides build hook for CI/CD.
However, I wanted to take the challenge and decided not to use Netlify.

How can I achieve the same behavior without Netlify, keep S3 bucket?

1. Make the custom node app for webhook

After a while, I noticed that Github has REST APIs to control resources. I can dispatches APIs to certain repository.

https://api.github.com/repos/{ORG_NAME}/{REPO_NAME}/dispatches

This is the key.
In this node app, we just set headers to call github APIs.
I named the event as ssg.

const postData = Buffer.from(
  JSON.stringify({
    event_type: "ssg",
  })
);

headers: {
    Authorization: "token *****************",
    Accept: "application/vnd.github.everest-preview+json",
    "Content-Type": "application/json",
    "Content-Length": Buffer.byteLength(postData),
    "User-Agent": "nodejs request",
  },

Finally, upload nodejs app on EC2 instance. Here is the completed code.

2. Configure CI/CD script

Configure script to listen dispatch events from node app.
Github action listens the nodejs app request and regenerate the static website, deploy updates on S3.

name: CI/CD
on:
  repository_dispatch:
    types: ssg
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

3. Register webhook in Strapi dashboard

That's all, long journey. Thanks for joining me. :)

10 common mistakes that beginner programmers make.

Liu Yu Zhou — Mon, 21 Dec 2020 14:07:18 +0000

1- Start with fear.

The first and worst mistake that novice programmers make is that they go for programming with fear and chills and hit their first code with skepticism.

For some people who have just started programming, there may be a lot of questions and mental conflicts.

Am I as smart enough?
Am I the right person for programming?
Can I make money from money?

We believe anyone can learn programming. Provided that it starts with confidence and sticks rigidly to the job.

2- They only rely on study and education.

Programming is different from disciplines such as literature, philosophy and logic, psychology, geography and other humanities.

Some disciplines only require theoretical study, and someone who wants to succeed in these trends should have a lot of study, but programming is a technical job.

Just as a mathematician can't solve a variety of problems just by reading formulas, the programmer can't just become an experienced programmer by studying and seeing other people's code.

So at the start, you have to learn that a large part of your skills come from real projects while working and while working.

3- Re-build the wheel.

Currently, there are different libraries and frameworks for programming languages.

Although it is not recommended to go directly to frame words or libraries at the beginning, using some tools can help a lot.

For example, when you start web programming and are learning html and css, you can go to frame words like Bootstrap to build different parts of your site.

This way you can implement your menu, buttons, lists, logo and other elements of your web page without much hassle.

4- They care too much about the details.

Paying attention to detail and caring about all the big points of the project is a good ethic, but not at the beginning, no one at the beginning expects you to design an incredibly stable service without bugs alone.

Even great programmers have difficulty in the project's peddies.

If some details don't work properly when learning and the Nubian program, try to get past them and go back to them later.

Stuck in the details of the project and forgetting the main goal can work early, discourage you and keep you from continuing the way.

5- They think they have found the best programming language in the world.

Usually, those who start programming recently regularly ask themselves and others which programming language is best and which language to learn.

This question has problems from the root, and you need to get it out of your head first.

If you take a look at old and experienced programmers, you'll see that they don't talk heat anymore.

In fact, these programmers have reached the necessary cooking and know very well that any language can be great, if used properly.

So at the start, trust the language you've chosen and let the work go a little further.

6- They code a line or two a day.

Suppose the greatest writers in the world wrote two two clauses a day or so. Then be sure that there was no more "Battle of Wasulah" or "Blind Buff".

In programming, the situation is exactly the same.

If you have decided to be a programmer, you must also accept the difficulties and practices of the first job.

You have to spend a lot of time practicing and coding every day.

No Nosi program has become an expert code line one day.

Many old and experienced programmers are programming at home even after their working hours are finished in a company that is busy.

So you have to practice a lot at the start.

7- Do not choose good names for variables, classes and functions.

You may have laughed in the name of the long classes and functions that exist in the Java language.

However, writing descriptive and long variables contributes greatly to the readableness of the program.

Using similar names can confuse you during the project.

Don't forget that your app may be available to other people later, so get used to documenting and writing variables correctly.

Do not use english and Persian composition in any way.

Over time and by practicing, you can also achieve the best structure for coding by realizing your own tastes.

8- Or they don't use comments, or they use it too much.

Any programming language allows you to comment on parts of your code.

These comments are ignored and not executed by a compiler or interpreter.

They only show the function of that part of the code, or they're a note from the developer.

Using comments correctly can make your code so readable that you'll find out how good the legi reader code is later in teamwork.

But some programmers don't use this powerful tool at all at first.

Some programmers also fall from the other part of the canvas and bombard their code with comments that read it.

9. They do not understand the true power of their language.

This problem is not just about beginner programmers, and even sometimes experienced programmers forget the power of their programming language.

Of course, beginner programmers should not be blamed too much for this. Because to understand the magnitude and magnitude of the programming language they work with, it requires a few years of experience and time.

For example, languages like JavaScript are extremely flexible and in different sections such as site design, game making, mobile application construction, etc. Is used.

10. They do not back up their work.

I must have said, "I've spent a few hours doing this, but all my files have been destroyed" can destroy a programmer's day although it's total.

Fortunately, today there are a variety of tools with which you can save your files somewhere other than your computer.

In this case, if your computer is damaged, there is still no danger to your code.

The Data Control Version system, such as GitLab, helps software developers to get a history of code they have already written, in addition to participating in software projects.

Results:
Of course, programming is not a night job.

One cannot go through the 100-year-old overnight and expect to get to a job like programming without trying.

Now that you have chosen programming as your profession, it is better to know some of the common mistakes of beginners first so that you don't get caught up in these mistakes.

If you feel that another item should have been added to this list, share it with us in the comments section.

5 Reasons to Choose NoSQL Databases

Liu Yu Zhou — Mon, 21 Dec 2020 13:47:11 +0000

A growing business faces many challenges and opportunities, so it needs to plan for its future. Some tools and technologies are unique to today and may not work in the future. Choosing the right database is also important, which has become a challenging decision for organizations. This choice is very effective in your application architecture.

Suppose you have chosen a database for your current application that meets your needs due to the small number of users, but what happens after a few years and users increase? As the number of users grows and the data that needs to be saved, the scalability issue and several other problems arise in your app.

If your site is unable to respond to this volume of users, your business will be at risk and even may, your business experience failure. Finally, you need to spend more time, time and money to prevent these things from happening and replace your program's infrastructure.

Well, in this section, programmers always make arguments for choosing the best database of which database is more suitable for the program than the relationship and non-relational types. Both databases can store information but the difference is in how they are built, the type of information they store, and how they store information.

In this paper, scenarios will be discussed in which the advantages of non-related database are discussed. In addition, there are some NoSQL features, but keep in mind that there is no technology or database that is suitable for everything.

So to choose any technology, you first need to answer a few important questions about the needs of your program. The answers to these questions will help you understand your needs and you can find out if NoSQL meets your app's needs.

Can your app continue service as the number of users grows?
To respond to users' activities and requests, does your app need to change the scale?
How much money and time is saved by 0% Downtime?
Does your program use rapid development cycles? (Flexible data model)
Does your program create huge amounts of data?

Let's talk about the 5 most important features of NoSQL databases, here's where you can decide better:

1. Multi-Model

Relational databases store data in a predefined structure. That is, you have to define your data structure in terms of how to place in tables and columns from the time you start development, and you need to change the structure whenever circumstances change. All of this leads to the creation of new columns, the definition of new relationships, reflecting new changes in the application, talking to database managers, etc. Will.

The NoSQL database provides more flexibility for data processing. There is no need to specify schema to get started. Also, the NoSQL database does not limit the type of data you can store side by side. Allows you to enter new data into the database depending on your needs. These are the reasons that make NoSQL suitable for agility developments that require faster implementation.

Developers and architects choose NoSQL to easily manage and manage data for various application development requirements.

2. Easy Scalable

Easy scalability is the main reason for choosing a NoSQL database. Well, we have to say that relational databases can also be scalable, but neither easily nor at a lower cost. Relational databases are based on the traditional concept of architecture, master-slave.

Increasing the scale means you need to install more processors, RAM and hard drives to increase capacity and load management to upgrade your servers. Maybe instead of a very large server, split databases in smaller pieces on multiple hardware servers. This is called Sharding, which is very complicated in relational databases, and here you need to think about changing your databases to prevent time from being damaged. These things have become a big problem for developers and architects.

The NoSQL database is masterless and peer-to-peer architecture. The data is balanced in several nodes in one cluster and distributed as pre-ferres. This makes it possible to achieve scalability without spending any particular time. By executing a few simple commands, we can add the new server to the cluster.

This scalability also improves performance, allowing for continuous access, very high reading and writing speeds.

3. Distributed

Relational databases are designed to be used in a centralized way and dependent on a specific location, but the NoSQL database is designed to be distributed globally, using several different locations, including multiple datacenters or cloud services, for reading and writing operations.

This database has many advantages with its masterclass architecture. Data can always be available, as data is distributed with different copies where necessary.

4. Frequency and Down Time Zero

What will happen if the hardware breaks down? NoSQL is also designed to address these types of critical situations. Hardware failure while developing an app is a serious concern and requires developers, database managers and finally various operations to fix this problem. You can use NoSQL databases instead of tackling these problems.

The masterclass architecture in NoSQL allows several copies of data to be preserved in different nodes. If a node is out of reach, another node will have a copy of the data for easy and quick access. All of this makes the NoSQL database work without hurting the business. It is also very cost-effective for those who consider the cost of Down Time.

5. Apps that interact with Big Data

The NoSQL database can handle huge amounts of data very quickly, which is why it is very suitable for programs dealing with Big Data. NoSQL databases ensure that other components of your app are seamlessly and quickly designed and can do well with massive data.

As we've said about many of the features and advantages of using the NoSQL database, you should consider that it doesn't fit for all apps. So there are some strengths and weaknesses on the other side, and you need to check the nature of your plan to select a database. Some projects are better developed with sql databases, while others work well with NoSQL, and both can be used in some cases.

If you save transaction data then SQL comes to your job. Relationship databases are created to process transactions and work well in this respect. If your data is analytical, then you need to think about NoSQL, the SQL database in data analysis, and working with massive data becomes a serious problem.

How did I make a Simple Interactive Circular Chart - 1

Liu Yu Zhou — Wed, 07 Oct 2020 01:31:20 +0000

Draw Arc Lines

First of all, you need to draw Arcs to form up a circular chart.
There is a mathematical theory to draw polar points.

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { // Point of Polar
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)) + setViewportX,
    y: centerY + (radius * Math.sin(angleInRadians)) + setViewportY
  };
}

Then draw the start and endpoints of the Arc with radius, call describeArc() method to finish drawing Arc.

function describeArc(x, y, radius, startAngle, endAngle) {
  var start = polarToCartesian(x, y, radius, endAngle);                                                                              
  var end = polarToCartesian(x, y, radius, startAngle);

  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

  var d = [
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
  ].join(" ");

  return d;
}

The title of each section of the circle has an order - Clockwise and vice versa.
As a result, you need to define the flag for direction.