In fact, "good" and "bad" have always been relative, because everyone has different standards for "good" and "bad". It is better to consider from your own perspective: How to do a good reconstruction?
Let’s first look at a two-column layout that we encounter most often:
Basic HTML code:
Let's look at the specific CSS code implementation (ignore margin):
Obviously, there are many CSS solutions to achieve a two-column layout (with a fixed width for the left column) while maintaining the same HTML structure. The main directions are to use floats or not, and a fixed width or variable width for the right column:
Qzone, Pengyou.com, and Facebook all have floating left columns. The only difference is the way the right column is written. Qzone has a fixed width for the right column and makes it float, while Pengyou.com and Facebook do not have a fixed width for the right column and do not make it float. Instead, they use the principle of creating a BFC and triggering hasLayout for lower versions of IE to make the right column adapt to its width.
Both Yahoo and Google columns do not use floating. The only difference is that Yahoo uses absolute positioning, while Google uses inline-block. Google has announced that some of its products will give up support for IE8, so Google can boldly use inline-block to implement the layout without having to write a lot of hacks for other lower-version browsers.
Is there a best solution among these? Each of the above solutions has its own advantages and disadvantages, and may be suitable for a certain project background. Similarly, the selected solution may also be related to the user group. Although no matter which solution is chosen, it is not perceptible from the user's perspective, we cannot use a solution casually because of this.
For the ease of maintainability and usability of the project in the later stage, we must choose the best solution. If we don’t even understand the basic knowledge such as BFC and hasLayout, we will be unable to do it. At the same time, we must clarify our own positioning: we are not just a "picture cutter" or "artist", we cannot ignore some user groups with disabilities, and we must make the project code more elegant and easier to use. Although the basic job responsibilities of reconstruction are: converting PSD to html + css + js, you should know that just doing these is not a good reconstruction. Better communication skills, more sharing, thinking and summarizing, and how to correctly pay attention to some front-end dynamics are all what we need to do. Of course, the most important thing is that we need to have an optimistic attitude and a happy mentality. Below I will elaborate on how to do a good reconstruction. Of course, this is just my personal opinion, and I welcome your comments.
From a professional perspective:
Clear self-positioning
At present, there are not many people in China who divide the front-end into reconstruction and JS development. Although PS is a must-have software for reconstruction, you should know that reconstruction is not "picture cutting", and picture cutting is only a part of the reconstruction work content. There is no reason for us not to learn other technologies just because we are refactoring, because you know you will not do refactoring for a lifetime. JS cannot be discarded, and you must also be familiar with new front-end technologies. When refactoring a page, most of the time should be spent on extracting page modules, optimizing performance, exploring maintainability, and usability, while the least amount of time should be spent on code implementation. Maybe the page you wrote is used by millions of users, and there may be users with disabilities here, so you have to consider the feelings and experiences of various users, not just limit yourself to the completeness of the code.
Focus on front-end basic skills
The basic knowledge of the front-end is like the foundation of a house. If the foundation is not laid well, it may collapse once there is a slight earthquake. At the same time, it is like the doors of a castle. If the door is not built well, the enemy's gunfire can break it immediately. Therefore, laying a solid foundation is the cornerstone of learning more knowledge at the front end. You can spend more time learning and consolidating the characteristics of CSS attributes, the semantics of HTML tags, the basic knowledge of JS, W3C specifications (block formatting context, stacking context, box model, etc.) so that you can use a front-end technology solution correctly and reasonably.
Treat cutting-edge technology correctly
The Internet is developing rapidly, and front-end technology is also updating very quickly. When we were learning CSS2, CSS3 had already become popular all over the world. When we were learning CSS3, CSS4 had already been put on the agenda. There is always endless learning on the front-end road, so when a new technology is born, we need to examine it correctly.
While doing your job well, maintain a passion for learning. You can try to use new technologies, but please first understand why you want to use this new technology? What improvements can we get from using this technology? In front-end technology, there is never the best technical solution, only the most suitable technical solution. The newest is not necessarily the best, and the old is not necessarily the worst. Don't blindly follow the trend to learn new technologies. You must know whether what you are learning can be applied. (Author's note: In fact, most of the time it is not a new technology, the technology has been around for a long time, it is just a new front-end solution or standard that has been promoted, such as CSS3, which was actually born in 2003)
Better communication skills
Every day we may have to deal with different people in development, product, design, interaction, testing, etc., so this requires us to have better communication and coordination capabilities, focus on better communication skills, and reduce communication costs. "Everything is based on user value." This is exactly the concept needed in the Internet industry. In addition to being sincere when communicating with other colleagues, you also need to consider users more: Do we really need to do this?
Selectively participate in technical forums
If you stay in a small company, there are not many front-end people, and there is not a good atmosphere, then we can only expand our network through two ways: the Internet and forums. The Internet such as QQ groups, Blue Ideal, etc., and face-to-face forums are undoubtedly the most authentic way to expand your network. In fact, in the current domestic environment, there are so many front-end technical forums that I can’t even count them all. It is particularly important to selectively participate in a forum at this time, and you shouldn’t participate in any forum regardless of whether you understand it or not, and whether it is free or paid. In fact, the most important thing is to choose the one that suits you.
Focus on browser vendors
Ten years ago, IE dominated most of the world. Today, other major browser manufacturers have squeezed into the battle for global market share. The browser is the most indispensable front-end. Paying attention to the actions and patterns of browser manufacturers can give you a forward-looking perspective. Developer libraries of some browser manufacturers: Microsoft's MSDN, Firefox's MDN, Google's developer library, and Opera's developer library. In addition, you can also pay attention to the promotional activities of various browser manufacturers. Firefox China will have experience activities every time a new version is released. Microsoft’s latest IE10 also had promotional activities in China when it was launched. You can learn about the features of these new versions of browsers and their support for css3\html5.
More responsibility and sharing
In normal times, I take on more extra work, such as making some reasonable suggestions on restructuring the team's collaboration standards and coding standards, and outputting some documents that will help other colleagues improve faster and more efficiently. When I come across some good working methods or research on some new technologies in my work, I can share them with you. The team atmosphere of reconstruction is very important. No one wants to stay in a team where they only write code all day long. That is not good for both individuals and the team.
More thoughts and conclusions
Thinking refers to the "stream of consciousness", specifically our thoughts and ideas during the reconstruction process. How we think determines what we do.
As for refactoring, many people start cutting pictures after getting the design draft, and use all kinds of "tricks" to achieve various requirements. We don't even do a careful analysis after getting the design draft: how to make a reasonable architecture, how to extract appropriate modules, how to use a more elegant way and lightweight code to achieve the requirements of the page.
Perhaps it is the current environment that is urging us to keep moving forward: most front-end forums are talking about a certain technology, dwelling on the implementation of a certain technical detail, and talking about performance optimization, but few people talk about how to reasonably choose a front-end solution, how to solve problems encountered in a series of different scenarios during refactoring, and most importantly, our own career thinking: Are we ready to write code for the rest of our lives?
Summary is also called "review", which means review. Review is particularly important for refactoring. Regular project review can discover problems in the project and avoid their recurrence in the future.
Of course, project review is one aspect, but more important is the code-level review. Irregular reviews can encourage us to be more elegant in controlling the details of some codes. In addition to improving the quality of the code, reviews can also strengthen the team's spirit of collaboration and improve the team's overall technical capabilities. Obviously this is a very meaningful thing. Team members can review each other's code together and find out everyone's shortcomings and strengths. Otherwise, we would just be miserable coders who only focus on our own code.
From the perspective of life:
Keep reading
Information on the Internet is fragmented. When we don’t have a good ability to sort out the fragments, a physical book is particularly important in comforting our souls. Sometimes life and work can make people feel overwhelmed. At this time, we need to find a way to relieve stress. Well, reading is a good way.
Stick to a sport
When you are too busy at work, remember to change your working methods, sort out the priorities of your needs, and set aside some time to relax yourself. This relaxation must allow your muscles and bones to move, such as playing badminton, going jogging, or going to the gym. Only by making your body stronger can you have more energy to kill monsters and level up.
Maintain an optimistic attitude towards life
If we are good at capturing the tiny particles of happiness in life, we will always live in happiness. Last time, I listened to a sharing about life at Tencent Health Gas Station, in which it was mentioned that "life is like stewing chicken soup, sometimes you need to add some seasoning and dipping sauce." Indeed, these dipping sauces are to discover the small happiness in life and to be an optimistic, open-minded and cheerful front-end person. Adjust the balance between work and life so that you don’t feel so tired.
Well, it is really not easy to do a good reconstruction, both from a professional perspective and from a life perspective. It is indispensable to maintain an optimistic, enthusiastic and positive attitude, keep learning, and make yourself live a simple and happy life. This is enough.
In fact, you are not only refactoring the code, you are also refactoring your life!
