Friendly tips:
-
If you just want to read the conclusion, go straight to the end;
-
Have “Alipay small program development experience” reading taste better;
-
Only focus on the “bald hair” problem, can also be directly from the end of the article to see…
Foreword: did not renew the public number article for a long time, today just when developing pay treasure small program, encounter an interesting front end technology problem, again accidentally turned over his recent circle of friends, feel necessary to write an article to prove himself or a front end programmer.
Imagine this:
If you came home one day and wanted to find your elementary school graduation picture, would you?
Let’s say you’re in a new city without your phone, and you want to know the worst dish of all the restaurants there? What would you do?
Or one of your friends is in charge of finance in the company. As a result, due to various reasons, he mistakenly sent a sum of more than 1 million yuan to another company that has business relations. Fortunately, he hasn’t broken his face yet, but the other company keeps dragging.
What immortal questions are these… Does it have anything to do with debug?
…
…
…
Anyway, the next step is to prove yourself as a front-end programmer.
…
…
…
Sorry, I got the wrong picture,
This time, I got it right
(The proof is completed, the whole paper is finished)
Really, back to the point
Look at the requirements first and change the indicator dots on the rotation chart from square to round.
Try one: Review elements
Isn’t that easy?
Review the element, find the selector name, and then,
A quick operation like a tiger, border-radius 5%… Ten,
It is ok
… ?
Indeed, if it were that simple, this article would not exist
The problem is that the censor element can’t locate this indicator, and you can’t select the indicator in the wheel cast graph either in AXML or in the simulator
It’s like when you go to the supermarket and you want to buy a cold drink, the drink is in the freezer, you can see it.
But there was a glass door in the way, and if you didn’t open it, you couldn’t get the drink inside.
Back to the above question, the situation is a little more complicated now, the door seems to have a combination lock, the normal method (censorship elements) is not working.
At this time, XX smiled, no fluctuation in the heart: will be so simple question? It doesn’t exist.
How else can I live up to my years of bald hair?
Based on experience, after trying to review elements for ineffectiveness, think of the worst (take time?). The scheme is the indicator point of the hand-written rote graph, which can satisfy the demand of the business side at least theoretically
Enigma voice: I don’t care how to implement, anyway tomorrow online
That, of course, is the worst.
Try two: official documentation
At the same time, I opened the official document of Alipay mini program and found that there are three attributes related to DOT in the API.
However, they cannot meet the requirements of setting border-radius and changing the width and height
Off topic: WHEN writing this article, I checked the documentation of Wechat mini program Swiper, but there is no relevant content
Try three: search engines
The official document failed, so habitually opened the search engine and typed in the following keywords:
“Alipay small program rotation chart indicating point custom style”,
And then delighted to find that the results returned nine out of ten are a friend business small program, rather than alipay small program.
I read a few articles, most of which said “Disable swiper and write your own”.
Ps: One small detail, as I write this article, I realize that I haven’t even clicked on the second search result…
As an aside, the book Thinking, Fast and Slow says that the human brain works in two ways:
System 1 (unconscious, fast)
System 2 (Prudent, slow)
Once I happened to see a friend share a screenshot of a book called “Stanford Business Decision Course”, in which the author wrote a system 3, but it was interesting —
System 3: Seek tools, processes, data, and expert help
The above digressions are not important, because the search results just now, are almost a friend of the small program, (the only alipay small program is the official document),
So I changed the search terms this time
“Alipay small program Wheel Play Chart Indicating Point custom style – wechat”
After filtering out the results containing “wechat”, we found that…
Doesn’t seem to help, does it
Try 4: Ask your colleagues
By this point, I’ve spent almost 30 minutes on this question, and it’s time to harass my colleagues. However, we haven’t received any such requests in alipay mini program, so I’m going to try 5
Try 5: Search engine V2.0
In the search engine to adjust a few search keywords, but no substantial progress;
Try six: pay treasure small program developer community search
Soon transferred to alipay small program developer community:
“Gently search, in case solved!”
Try “Swiper rotation chart indicator point style”, this group of keywords
There were hundreds (805) of results, and a few pages, but nothing that solved the problem
Off-topic: While writing this article, I went to the open community of Youshang Applet and tried to search with the same keywords. The results are shown in the figure below.
Simple and cursory changes to the search terms yielded a lot of results, but no relevant solutions
Try seven: alipay small program developer community questions
So far it has taken more than an hour, which is why this article is here.
It was my first experience with alipay’s developer community, so I gave it a brief description, posted a post, and asked a question,
https://openclub.alipay.com/read.php?tid=13735&fid=65
After I ask the question, I find that I still need to approve it, so I start doing other things, refreshing the post occasionally to see if it has been approved.
Ps: In my impression, wechat mini program questions do not need to be reviewed? However, I can’t remember. The last time I asked questions in wechat mini program community was March 2017… It was two years ago
It may be lunch time when the audit was submitted, and the audit brother or sister may have gone to lunch, and the audit was still in progress at 1:00 p.m. So he went on with other things;
Wait until about 2:30 to see the next, there is a big man reply
Validation is feasible
The problem is solved. The indicator has changed from square to round.
But if you look at the progress bar on this article, you know there’s a lot of “crap” behind it.
First of all, I noticed that after the screenshot of the reply, there was a sentence: “But it is not recommended to change”. For this sentence, I am still curious why it is not recommended to change
Secondly, after carefully looking at the screenshot, I found that the indicator points were not aligned;
Wx-swiper-dot = wx-swiper-dot; wx-swiper-dot = wx-swiper-dot;
Then I found an article with a class name called wX-swiper-dots
So I tried adding styles. A-swiper-dots didn’t work…
After that, I simply added a patch:
.a-swiper-dot-active {
position: relative;
top: -2px;
}
Not bad.
This is the end of the debug process, but this article must continue, otherwise sorry for the title:
Careful Debug can be bald
Imagine if no one ever responded or there was no valid message?
The problem is still to try to solve, what you might try next?
And, is the current solution the optimal solution? Is there a better one?
What steps can be improved during this debug process?
OK, step by step
Untried attempt eight: civil small program developer community search & questions
The reason why the eighth step is this, because two years ago when I stepped on the micro program, there were some civil community articles are very valuable, and the community is also very active.
XX has raised and answered some questions in a community.
Untried nine, ten… : Alipay small program developers nail nail group questions & all kinds of front-end exchange group questions
The last attempt to be considered is the communication group of various developers. The reason why I think of asking questions in the group is more due to my personal reasons: lack of willpower and concentration.
If you send messages in the group, it is likely that no one will respond in a short time. In the process of waiting in the group, you will occasionally brush some eye-catching content and distract your attention. Or constantly checking messages can breed anxiety.
In order to avoid the above distraction, anxiety, the past practice was usually the last consideration of the group questions; Because other ways of solving the process themselves are very clear about their own step to do things, have control of their own behavior, expectations.
I may not be aware of this at ordinary times, because usually the solution to such simple problems is based on intuition and is in system 1 mode (unconscious and fast). However, when I write this article, I am just re-examining it with System 2 (slow and prudent).
The end of the
As I look at myself,
While examining the hair she had lost,
While staying up late writing articles,
By the way, it happened to be Arbor Day today, and I just received the express delivery. These two days, I was offered a baldness treatment kit by Amway.
I just got it and I’m ready to use it. I don’t know the effect yet. I plan to use it for a month to see the effect.
The best time to plant a tree (Tou) (FA) was ten years ago, then now;
It takes ten years to grow trees, but a hundred to nurture people
‘
summary
Comb through the process of developing & debug yourself this time
-
Define requirements for 1min
-
Review elements for 2 minutes
-
Identify the problem for 2 minutes
-
Official document 10min
-
Search engine 20 minutes
-
Colleagues around 15min
-
Search engine 15min
-
Official Developer community questions [Problem solving]
-
Describe the problem for 5 minutes
-
Waiting for review 1h+
-
Validation of 5 min
-
todo
-
Civilian Developer community
-
Official developer exchange group
-
Each applets communication group
-
Each front-end communication group
-
You can’t do that. Cut demand
-
…
reflection
During the debug process, several improvements that may help resolve problems faster
1. Improvement: The first time you search, if you click on the second search results
Phenomenon: The second result gives the method of wechat to define dot in the rotation chart
Question: Blind spots?
Fix: Make sure you read at least the first three results
2. Improvement: If you use the right keywords when searching in the Small program developer community of Alipay, there is no need to ask follow-up questions
What to see: If you streamline your search terms and just fill in the Swiper indicator, you’ll find available solutions
Problem: Improper use of search terms
Improvement plan:
-
Improve your search capabilities
-
Define the problem accurately (if you have already identified the idea)
An aside:
-
Alipay document search matching rules are very interesting, the more input, the more results will be matched (450 results here, and 805 results;
-
For matching rules of wechat documents, the more input, the less matched results
3. Improvement point: If you had asked the question in the Small program developer group of Alipay earlier, maybe someone would have been able to give the answer
Phenomenon: As mentioned above, I am easily distracted, so I am not willing to ask questions in the group before spending too much time, so as to avoid being distracted by something that attracts people’s attention and affecting my working status
Problem: Lack of self-focus
Solution:
-
Focus selectively on the content related to your own problem solving
-
Try to ignore irrelevant information
-
Once you don’t look at group messages, you switch the chat box to File Transfer Assistant
4. Improvement point: The problem encountered this time has actually analyzed the direction of solving the problem, namely: find the class name (selector name) of the indicator that controls swiper, but did not make good use of it
Solution:
-
Align your search terms with the direction of your analysis;
-
If you already have a preliminary conclusion, go deeper and design the search keywords: “applet swiper indicator class” or “applet swiper indicator class name,”
5. Currently reading: How to Solve A Problem by Paula
In the book, there are several key points in the process of solving problems. The first point is: “In-depth understanding of the topic”, and its introduction to solving problems can also be used for reference (although it is to teach students to solve mathematical problems).
By the way, there’s another point in this book that really strikes me as a point:
A teacher who really wants to help his students should first arouse his curiosity and make him want to solve problems. If a student has no opportunity in school to expose himself to the emotional variety of the struggle, his mathematics education is failing in the most important respect. How to Solve a Problem
Ps: It occurred to me that TWO years ago, I briefly organized my ideas on how to solve the problem, which were divided into three steps:
-
Your understand
-
Computer understand
-
Other people understand
Embarrass yourself again…
https://github.com/xunge0613/front-end-practice-collections
So, the next time you’re faced with a similar problem, you might try the following formula:
Within 0 to 30 minutes
-
Serious topic
-
Self-analysis and solution
-
The official documentation
-
Official developer community search
-
Civil developer community search
-
Search engine
About 30 minutes
-
Ask your colleagues
-
Describe your problem in detail and in a formal way once and for all in a group (and then let it go, get on with what you’re doing, ask the kind of question that no one else needs to ask, and free yourself up to focus on something else without explaining)
-
Official developer exchange group
-
Each applets communication group
-
Each front-end communication group
30 minutes to 1 hour
-
Review your definition and analysis of the problem
-
Based on the previous one, retry the previous method at random
1 hour +
-
Post questions in the developer community
3 hours +
-
Work on this problem tomorrow if possible (maybe a shower will inspire you)
10 hours +
-
Can’t do that, let’s see if we can cut demand… (Don’t take joking product bosses seriously…)
Above, for reference only;
And is limited to solve some relatively simple, and document-related problems, suitable for small program development, ANTD, Element UI, taro UI components on the use of problems;
When dealing with more complex or fundamental problems, we need to think twice before acting based on the actual situation.
Such as:
-
What’s for lunch tomorrow?
-
How to soothe an angry girlfriend/boyfriend? (First, you need to…)
-
A week hairline moved 1cm, how to do, urgent, wait on line?
It’s important to identify what went wrong. If you don’t have ideas for a while, it doesn’t matter, maybe you can change the Angle and put yourself in another’s shoes? Or do you go up a dimension and think about it on a higher level? Or break the problem down into a few simple problems and divide and conquer…
There are many ways to solve a problem, and perhaps more importantly, try to keep your head clear, stay motivated, protect your hairline in the process…
In the process of writing more than half of this article, I suddenly began to reflect on why I want to write this article. One of the reasons may be very important is that A few days ago, I looked at my public account and didn’t update it for 2 months. Feel a little guilty, so update;
Of course, more for the purpose of drawing inspiration, I hope you share the posture of debug ~
Conclusion:
-
Search: When using search engines, it is crucial to use the right keywords;
-
Iterative thinking: designing search keywords is also a process of thinking. It is a process of constantly redefining and positioning problems. It should change dynamically with its own thinking progress
-
Focus: Make it clear that your purpose is to solve the problem, and focus on solving the problem. Let go of your prejudices, stay focused, and “ignore” irrelevant information
-
Mind blind spots: A way to eliminate the mind blind spots and break out of the box may be to try the same old method again from a different Angle
-
Tip:
-
Filter search results with the – operator
-
Describe the problem in detail and specification; After you ask a question, don’t worry about it, as long as the question is good enough, after a while, maybe the answer will come
-
In the process of describing the problem in detail and specification, you may come up with a solution
-
Hairline self-help plan: recently, the left hairline is planned to use the newly bought hair growth kit, and the right hairline is planned to use the hospital spray. After 28 days, we will see how the effect is, and we will write a series of articles to record it. Welcome to watch
Finally, please share your debug experience/battle with baldness in the comments
In a word:
Serious debug may not be bald, stay up late writing is likely to be bald