preface

Up to now, most of the front end kids are not deep enough to understand the front end, and are more often trapped in writing business code. React, Vue, Webpack, Vite, component libraries, etc. When it comes to complex error scene restoration, front-end monitoring, call end, XX index system, complex data processing ability, many people even think that these are not front-end category.

So, back to the subject of this article. Why is it important to write a good technical essay? Because writing articles is one of the best ways for technical people to accumulate experience. Good at summing up and digging in the work, and then carry on its deep precipitation, then you really grow steadily!

Let’s cut to the chase and read some comments.

Classification of readers

Can you generalize about the categories of readers from the comments?

Such a wisp, does not feel like the brain seems to understand what.

The characteristics of technical articles

  • professional
  • Different depth of content
  • Wide range of knowledge
  • Need background
  • Audience levels vary

These are the objective reasons why technical articles are difficult to write. For comparison, let’s look at non-technical articles.

Recently the hit TV series “Snow fierce knife line”, the same name novel adaptation. Let’s take it for example. Story synopsis with a sentence to describe is probably: the protagonist from the white grow up to the most cowhide character’s heart process. Now you think about two questions.

  1. If you could enrich the story with this sentence, what would you do?
  2. Why do you think those people follow the show?

If you were the author, you probably wouldn’t call it “Slasher in the Snow,” because with all the clickbait headlines out there, why would “Slasher in the Snow” get clicks? This will be said, I heard the protagonist is XXX, I decided to follow this play.

Similarly, the show aired only 10 episodes, many people praised, also a lot of people. But it’s all heat.

To sum up, why are fantasy novels so popular with the public?

  • No need for expertise. What kind of major do we need?
  • Content depth is not an issue. Somebody else dozens of episodes of content, what content broadcast endless?
  • Knowledge is not a problem. It’s easier to invent from zero than to explain from one.
  • It’s up to the scriptwriter to set the story.
  • Audience? When you’re 10, when you’re 50?

So, anyway, to sum you up: I think technical people write technical articles for three purposes.

  • Consolidate/improve your knowledge system
  • Let the reader obtain effective knowledge
  • Likes, comments, followers (a direct sign of increased influence)

If:

The story background in the novel -> business background

The fullness of the character -> the degree of technical knowledge

Audience -> Pinpoint your audience

Then you only need to satisfy this type of people, right?

Knowing that, we started trying to write a technical article

After deciding what to write, we first have to come up with a name. What’s an example of that?

Take “front-end performance monitoring” for example.

Here we go. Let’s start with a good title

Let’s try to write a few headings.

  1. Front-end Performance Monitoring Practice of Alitao
  2. “The Front-end Performance Monitoring Scheme of Ten million PV Mall”
  3. Year-end Ultimate KPI — Practice of Front-end Performance Monitoring
  4. The original major factories are doing front-end performance monitoring in this way

The first one is the right one. The title is 100% clear on the subject. Second, added a subject (mall), subject and used an adverb (ten million PV) to describe, give a person a kind of “wow, it seems very powerful, point in to see” this kind of guided psychological suggestion; The third one is similar to the second one, but it seems to take a different route. KPI is to arouse the sympathy of a small number of readers. The fourth is the suggestion of direct interest, slightly suspected of being clickbait;

No doubt, any of these titles will work, but they all need to be supported by your content. So, let’s summarize some tips for writing article titles.

  • You have to point out your topic
  • Can do bit title party suspect appropriately, but cannot be title party really
  • In theory, the shorter the title of a technical article, the better.

Start thinking about what you’re going to write

It’s the process of converting the stuff in your belly into the words in your pen. The former will be read only by you, while the latter will be read only by you. (Again, take “front-end performance monitoring.”)

Here’s the question: You think you’re in Front-end Performance Monitoring To what extent?

  • Level-0: a known trick on the web. For example, there are a few common indicators that many people don’t know exactly how to do, but most people have heard of them.

  • Level-1: Preliminary formation of knowledge system. For example, how to select monitoring indicators, system architecture, research process of key technologies and final decision processing, etc. When you reach this level, you start walking in the advanced/senior direction. So if you happen to be at this level, think about two things first

    • Article audience is in the advanced/senior advanced stage of readers.
    • How can you leave an audience with an audience.
    • Whether it can inspire readers of inadequate level

  • Level-2: actual case. This is a much simpler understanding. For example, if you do a double 11 project, you are very clear about the business background, business bottlenecks, and technical bottlenecks. What are the goals of your front-end performance monitoring? Here, you’re breaking through the highest wealth of knowledge. So at one level, you have three things to think about.

    • The audience is the advanced/senior/expert reader.
    • How can you retain readers above your level.
    • How can you leave behind readers who are not as good as you.

  • Level-3: Commercial solution design. The word may not be easy to understand. We know that there are industry standards behind many products. For example, how does the technical person behind Tmall Double 11 support the impact of high concurrency, how does the page performance optimization for IOS and Android users, and how does the risk prevention of ants do? Try to understand this in a way. If a company wanted to hire you to support their business, how do you think you would design a plan that could be implemented and implemented to achieve the boss’s goals? So at this level, you only have one thing to think about.

    • How to improve your writing as much as possible. Because if you can write clearly, no matter small white or big man can read effortlessly, you have really succeeded. To tell you the truth, in my experience, none of the articles are good. Reading your article is like reading a novel. You not only learn something, but also experience an orgasm.

So, to what extent do you think you’re going to write this article? Think first about how well your knowledge of a particular area will translate into writing. Think clearly before you write.

Which begs the question: How do I know how far I can go?

Still take “front-end performance monitoring” to analyze for example! Let’s try a mind map

Knowledge… Well, so much for now. (Just an example, after all)

At this point, you need to think about three questions.

  1. Can this constitute a commercial solution without disclosing company XX?
  2. If you can’t make it, pretend to make it.
  3. Pay attention to the audience

Think clearly, here to knock on the blackboard! The biggest problem with all technical articles is that they are full of technical pages.

What you mean? The mind map of the knowledge point is clearly listed, so follow it. Let’s mock it:

Title: Ten million PV mall front-end performance monitoring scheme

Preface: State the purpose.

  1. monitoring Selection of indicators

Introduce FMP, FCP… Explain why you chose it.

  1. System architecture
  • Describe what the SDK does
  • Used log cloud storage service
  • Back-end services that process data
  • Data reports, the ultimate visualization scheme
  1. Related technical research and thinking
  2. Thanks & inadequacies & Future development thinking

If you’re a reader, what kind of reader do you have to be to read the whole thing and actually feel like you learned something?

So, how influential do you think this article will be? How many fans can you gain from this article?

The new question arises: How to write it?

Here are a few suggestions for mock appeal content:

  1. Be sure to give background
  2. Try to describe important words in terms of business context and practical difficulties
  1. When there are many non-important professional phrases/nouns, please introduce them in as short a sentence as possible.
  2. Don’t post too complicated code, but make it easy for readers to understand. (Too complicated, please leave your Github link at the end)
  1. Learn to create conflicts and use writing techniques appropriately.

According to these 1, 2 and 3, we mock again.

Title: Ten million PV mall front-end performance monitoring scheme

preface

The contents of this article describe the promotion season (618, Singles’ Day…… In order to support the huge business, our team made some optimization and reconstruction technical solutions for front-end performance monitoring. Welcome new and old children’s shoes to eat!

  1. monitoring Selection of indicators

Under the actual promotion scenario, the industry cares most about quality and stability. While users can enter the event venue in as short a time as possible, we want as few exceptions as possible. Oh, the two concepts often mentioned in the industry: open second rate and abnormal rate.

While the goal is clear, anyone who has overdone it knows that the computational cost of these performance metrics cannot be ignored. In addition, applicability and concrete practical value can be easily stuck in the throat. Can we please the boss even if we put aside the technology?

good Too much talking. Don’t spray.

Back to the topic, we continuously evaluated a series of problems mentioned above, and finally selected the following indicators:

Introduce FMP, FCP… Explain why you chose it.

  1. System architecture
  • Describe what the SDK does

Let’s go through some of the core stuff.

First, you have to have an SDK. Its functions are mainly divided into two parts: collecting data and reporting data. Here, the trouble is some persistent descriptors. For example: Caton. In fact, the word “Caton” can only be described as a phenomenon at best, and the specific collection method is roughly as follows.

/* Take advantage of the fact that requestAnimationFrame executes 60 times in a second (in the case of no lag), assuming that the page loads in X ms, during which requestAnimationFrame executes N times, the frame rate is 1000* N/X, FPS. * /

/* However, different clients vary greatly, so compatibility needs to be considered. Here we define fpsCompatibility to handle compatibility, using setTimeout to simulate implementation when the browser does not support requestAnimationFrame. Complete the FPS calculation in fpsLoop. Finally, the fpsList is iterated to determine if three consecutive FPS are less than 20. * /
const fpsCompatibility = function () {

  return (

    window.requestAnimationFrame ||

    window.webkitRequestAnimationFrame ||

    function (callback) {

      window.setTimeout(callback, 1000 / 60);

    }

  );

}();

const fpsConfig = {

  lastTime: performance.now(), // Performance is a browser-provided API

  lastFameTime: performance.now(),

  frame: 0

}

const fpsList = [];

const fpsLoop = function () {

  const first = performance.now();
  
  const diff = (first - fpsConfig.lastFameTime);

  fpsConfig.lastFameTime = first;

  const fps = Math.round(1000 / diff);

  fpsConfig.frame = fpsConfig.frame + 1;

  if (first > 1000 + fpsConfig.lastTime) {

    const fps = Math.round((fpsConfig.frame * 1000) / (first - fpsConfig.lastTime));

    fpsList.push(fps);
    
    console.log(`time: The ${new Date()}FPS is: `, fps);

    fpsConfig.frame = 0;

    fpsConfig.lastTime = first;

  };

  fpsCompatibility(fpsLoop);

}

fpsLoop();

function checkFPS(fpsList, below = 20, last = 3) {
  let count = 0;

  for (let i = 0; i < fpsList.length; i++) {
    if (fpsList[i] && fpsList[i] < below) {
      count++;
    } else {
      count = 0
    }

    if (count >= last) {
      return true}}return false

}

checkFPS(fpsList);

// If the FPS is less than 20 for 3 consecutive times, it is considered to be stuck.
Copy the code

(Similarly, write something else.)

…

Once the data is collected, it has to be reported, which takes into account the real user’s environment. I say extreme point, the user ran hundred thousand big mountain travel to, completely off the network can do? The business side wants you to customize the monitoring of a new business scenario. How do you do that? The most beyond the mark is, there are always unruly people in a few bad scenes below the mobile phone damaged, and then complain that your page card how to do?

…

  • Used log cloud storage service

What log cloud service can support your ten million PV? Explain)

…

  • Back-end services that process data

Data processing is performed on the stored logs, such as screening and de-duplication, and the processed data is stored in the DB database. At the same time, it is necessary to provide data query interface for data visualization.

(The contents of mind mapping are described. 10 million PV, do not encounter a data high concurrency problem, can not be said?

…

  • Data reports, the ultimate visualization scheme

(You can show the market monitor curve, if you can, you can also keep a suspense: next time we will explain how you do the visualization.)

  1. Related technical research and thinking

(Don’t write a new paragraph about it; write it in 2.)

  1. Thanks & inadequacies & Future development thinking

…

good The preliminary mock of the article is finished. Now you go back and compare it and you see: it’s all the same, but which one would you rather watch?

The subtotal

Common faults of technical articles:

  • It’s hard to understand and has its own discouraging effect
  • Poor typography leads to poor reading
  • It’s long and boring.
  • It’s not clear what the reader will gain from you

Sum up my personal ideas about writing.

  • Technical articles are articles first and foremost, and readers are the most important.
  • Technical articles, in which any narration is auxiliary, are intended to highlight memory points. Can let the reader understand, comprehend, remember.
  • Write technical articles to precipitation, precipitation deeper, the higher the quality of the article. Quality + reader interaction = good writing.