Note: The text does not talk about the technical point of how to put the website into gray. That technical point was mentioned before during the Wenchuan earthquake.
This article does not talk about how to implement the technology, but about how to quickly implement this graying requirement after knowing the news for the first time.
Fulfilling needs is not fun, but directing others to realize needs is fun. Have you ever had this thought? This is what our boss thinks.
There has been something tragic happening across the country recently, so in order to express condolences, many websites turned gray after hearing the news.
But some websites are built relatively quickly, and programmers quickly make modifications and go online;
But some people realize later that other people’s websites have done this. It’s not good if we don’t do this. Let’s leave it blank. Come on, Xiao Wang, disable the website and put it online. Pay attention to testing and don’t break it. So Xiao Wang received an important task.
Then one day the treasure island is recovered, and it needs to be set to bright red. Then change the code to red, and then put it on the line? Now that the celebration is over, do you want to change the code back?
The text here takes a simple style as an example
Table of contents
1. The process of putting daily needs online
2. Key points in this requirement
3. CSS code that makes the website gray or red
3. How to make CSS code effective faster
4. Problems caused by doing so
5. Message triggering mechanism
6. But calling it every time will still cause losses.
1. The process of putting daily needs online
Daily demand has been put online, and the feasibility analysis stage of the product requires some market analysis and data analysis to determine whether the demand is worth doing;
Then start producing requirements reports, requirements documents, and prepare to start requirements reviews;
Relevant personnel will participate in the review process, and once it reaches the stage of requirements review, it will definitely be done.
Then we start to schedule the construction period. Relevant personnel schedule the working hours, and the project sets the construction period to see if it conflicts with other projects.
Developer implementation phase, which can be long or short
Then comes the follow-up phase, and the test ends
Deployment (local deployment, test deployment, pre-release deployment, online deployment) is completed and goes online.
2. Key points in this requirement
As can be seen from the above figure, every demand or every company will have flexible processing for the demand.
The most flexible thing is for the boss to find an opportunity, develop it himself, and launch it directly after development.
Therefore, the focus of this requirement lies in the online process
3. CSS code that makes the website gray or red
Let’s take the newly created DOM element we just created as an example. This is the normal style.
div {
color: blue;
}
button {
width: 70px;
height: 20px;
line-height: 20px;
background: blue;
color: #FFF;
text-align: center;
}
<div class="box">
<div>这里是网站内容</div>
<button>按钮</button>
</div>Gray code:
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
} 
3. How to make CSS code effective faster
△ This requires the use of another platform to maintain the higher-priority CSS code we need to display;
△ HTML pages cannot be placed on the front end. They need to be placed on the server, whether in a Node Java project;
Take the koa project as an example. Before rendering the HTML page, send a request to another platform to obtain the latest maintained CSS code.
Then it is obtained and rendered into the HTML page, so that there is no need to go online, and grayed out codes with higher priority can be rendered more quickly.
doctype html
html
head
title= title
style(type="text/css")
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: drop-shadow(#EFE2DA);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
body
block content4. Problems caused by doing so
Once this is done, the speed is very fast, but the problem is that the interface of the third-party platform will be called every time before the page is refreshed.
△ Once the number of visits increases, there will be great pressure on this third-party configuration platform;
△ Moreover, if the platform does not need to be cleared on a daily basis, it will be a useless effort if the platform calls it for no reason.
5. Message triggering mechanism
This involves a message triggering mechanism. What does it mean?
△ Add an interface method A to our koa project to receive calls from third-party platforms;
△ At the same time, add global variables, such as B = false. When B is detected to be false, there is no need to call the third-party global css data every time the page is refreshed;
△ This means that the third-party platform needs to have a certain relationship with our koa project. When we decide to send this grayed out css code as a message, we trigger this interface method A
△ Interface method A needs to change a global variable at this time, which is global variable B, and change it to true at this time.
△ Then the next time a user refreshes the page and detects that B is true, the latest css code data will be called.
6. But calling it every time will still cause losses.
Even if we use this message triggering mechanism and succeed, it must be grayed out all the time in recent days, and this third-party interface must be called every time the page is requested, which is still a loss.
At this time, we can add a cache and use the obtained css data as a cache;
Every time you request a page, you must not only determine whether the current B is true, but also determine whether there is cached data, and finally decide whether to send a request, thereby reducing a certain amount of loss.
7. Where to go?
If it is a simple front-end launch, although you will realize it later, you don’t need to spend so much preliminary preparation time;
If this set is implemented, it can not only be used in text scenes, but also can be used in more scenes. It can also quickly release requirements after receiving the message as soon as possible.
Which one do you think is more suitable for your current team?