The finished product is the small program below, the magical font, which can generate different styles of fonts,?????????????????? ?????. Used on various platforms.

From the night of May 2nd, I started to conceive and implement it, to launch the web in the early morning of the 3rd, to launch the small program "Magic Font" on the 4th, and to successfully open the traffic master on the 6th, I should be able to earn some pocket money, hahahaha. Review the whole process, the problems you encountered, and the tools you use.

The first day of the afternoon of the 2nd webpage is live

In the WeChat group, I saw someone asking ????????????? ????????. How is it generated?

When I came across the computer at night, I started researching. I completed the launch of the text.windliang.cc webpage and wrote a summary article in Shimo until 3 o'clock in the morning.

https://shimo.im/docs/onTnczeeCkY607ug/ .

The original text is as follows:

The final result, http://text.windliang.cc/

Tell me about your brain circuit.

Yesterday afternoon, I saw someone in the WeChat group asking how the English text in the picture below was typed.

As a computer student, I refused to accept this, so I started the road of exploration.

I first thought of the Unicode character set, and it must be something wrong here. After returning home at night, I started experimenting.

Copy this sentence directly to the browser console.

No problem, then remove all letters, only keep the first letter "?", and output its length.

Sure enough, it is 2. The reason for 2 is because js uses utf-16 encoding internally. Normally, 2 bytes represent a character. For example, the normal a character, its internal byte is 0x0061. Later, many characters were expanded, and one character needs 4 bytes to represent, which is the case for the emoji characters we have been using.

This is a big piece of content, so let’s not talk about it first, and then talk about the things behind.

After knowing this, of course I thought, let’s make a webpage that transfers any letters, and then the problem comes again? What are the code point values ​​of these characters?

You can see that the "?" code point value is 0x1d644. Then I went to check all the code point values ​​of Unicode, and then found the website below.

https://www.unicode.org/charts/.

This contains all the character sets, so how do we find what we want? Observe that each of them is a PDF link, and the names are all named after the code point range. then

Open the console directly to search, and you will find the character we are looking for. Found that he is under Mathematical Alphanumeric Symbols, mathematical alphanumeric symbols.

Everything is ready, only the east wind is owed. With the corresponding relationship, you only need to do addition. The following sentences are the key to the code.

Since I read the Vue book for a few days recently, I thought it would be a practice project, so I tapped and tapped, and it was too late.

At this point, http://text.windliang.cc was born.

The above is the original text of that night, and the tools used are discussed below.

I directly use the github pages service for the website. Simply put, it can host any static website for free. It was originally intended to be used for blogging, but I think it may be broken by me. I wrote a lot of webpages directly Deployed on the top, it is convenient and quick and does not cost money. It will provide a github.io domain name, or you can use your own domain name.

I directly used my own windliang.cc domain name, and then tied the second-level domain name text, the domain name is very cheap now, only a few tens of dollars a year, and after buying the domain name, the second-level domain name can also be tied to the theory on countless domain names, such as my

http://idea.windliang.cc

http://love.windliang.cc

http://leetcode.windliang.cc

They are all under the same domain name, and they are all placed on github.

The web pages I wrote before did not add website visits. That night I suddenly thought that this program might become popular, so I added the simplest traffic statistics. How simple is the statistical service provided by Suanzi? Add a sentence of code to know the number of website visits, and of course only the number of visits.

Afterwards, I posted it in Moments of Moments and Knowledge Planet "Shuai Zhang and his friends" respectively, and then fell asleep. It was already 3 o'clock in the morning, and I couldn't stop every time I wrote the program, hahahahaha Ha ha ha ha.

The morning of the 3rd the next day

When I woke up at 9 o’clock, the number of pageviews on the webpage had exceeded a thousand, and then I posted my own webpages in the WeChat groups “Big Cat Castle” and “Growth Black Box”, and then fell asleep again. It was past 12 o'clock when I got up.

Then I found that everyone gave good feedback in the group, and they all tried it out. Many group friends suggested that they could make a small program, and I met @森斗. Since I haven't touched the applet before, I started to study it in the afternoon.

During the period, @长大黑盒Alan helped promote Moments. In the afternoon, I found that the number of page views continued to increase. I remember that there were two or three thousand. In the evening, my classmate told me that I saw @刀姐doris in an instant to help push it.

Night of the 3rd day two

At 22:20, the basic functions of the mini program were realized, and then I asked my girlfriend for an icon, hahahaha.

Then dealt with the details, submitted the small program at 23:44, sent it to Moments, and established a group for everyone to find bugs and give comments. At this time, the number of page views has reached 6,000.

Then, the friends in the group gave feedback and went to sleep.

At noon on the 4th, the third day, the mini program will be launched

After getting up at 11 o'clock, I found that the review of the applet failed. It may be because I added something like "If you like it, you can share it" in the text, and then removed it and submitted it again. The review was very fast. It seems that it was approved in less than half an hour. It's the first version below, it looks very rough.

Next, I shared the mini program in Moments and WeChat groups "Big Cat Castle" and "Growth Black Box", and shared it on Knowledge Planet "Passerby A, B, C".

Then, add the name of the applet to the web page, and then add the QR code of the applet.

In the evening, the basic functions were completed, and then under the guidance of my girlfriend, I beautified the page, dealt with many details, and then submitted it.

5th day four

The condition for the mini program to open the traffic master is that the UV reaches 1000, and the UV on the 4th day is more than 700, so it has not yet reached the standard. On the 5th, I met @张佳, who was recommended by @森巧, and then @张佳 helped push the mini program on his knowledge planet "Data and Black Technology" and @wulujia boss's "Product Apprentice" planet.

There are many people I don't know who helped me share, thank you all.

Then continued to optimize the details and submitted a version of the applet.

On the 6th, the fifth day, the traffic master will be opened

In the morning, I entered the homepage of the mini program, and found that the conditions for opening the traffic master were met. I found that I needed a bank card and a photo of my ID card to open it, but I didn’t have any.

When the girlfriend came back to the house in the afternoon, she gave me a photo and started the application. After about an hour, the bank card information was passed. Then add the ad code to the applet and submit it for review. After almost another hour, the review was passed. Next, the review of the advertising component took almost an hour, and I received a text message,

Looking at the browser, the ad component has also passed the review. Generally speaking, the review speed of WeChat is quite fast. The working hours should be Monday to Friday, 9:00-21:00; Saturday and Sunday, 9:00-19:00 At this point, the ones posted in the evening are basically approved the next morning, and the small program is basically completed at this point. Click below to experience it.

Data Sharing

Share the small program, less than three days of data.

The main communication channels are WeChat groups, knowledge planet, circle of friends, and small program codes left by web pages.

Summary

Mainly used graphite documents, github pages service, no garlic, knowledge planet.

Like what @刘大猫 said, at the beginning the webpage didn’t leave anything to accumulate traffic, such as QR codes and WeChat, which caused some waste of traffic in the early stage. Regarding the precipitation of traffic, I have never had a deep experience in this aspect. I can read more case studies in the future. Also, because my own .cc domain name cannot be registered, it will first jump to WeChat 110 in WeChat, which is inconvenient for users.

Many people praise their execution ability. I think it’s just that I like programming very much. When I love something, I want to do it well and finish it. Done spirit.

The above is the whole process, I hope it will be of some help to you.

In addition, if you reply "magic font" in the background, you can get the source code of the web page, which is written in VUE, which is similar to a small program.