After introduction to CSS, I from the front to full stack | JTalk big front end

“Jtalk Big Front end” author interview aims to promote nuggets of quality big front end authors and their quality content, let quality authors and content more visible.

For the first “Jtalk big front end” interview, the nuggets author is JowayYoung (nuggets homepage juejin.cn/user/233062…) , an expert in CSS technology, and author of the gold digging mini-book “Playing with the Beauty of CSS Art.”

To introduce myself

Main experience, good at/focus on the field, when to learn the front end, what opportunity to contact the front end; Why front-end, why CSS start, what’s so fascinating about CSS?

Hello everyone, my name is JowayYoung, working in the Interactive Entertainment Business Group of netease Group. I have been deeply engaged in the front-end field for many years. I am good at HTML/CSS/JS/Web/Node, network communication, framework principle, engineering architecture, performance optimization and design mode, etc. Like learning and sharing, I often develop some small tools to improve work efficiency and life quality.

It is my great honor to receive the invitation of the lovely and beautiful little book sister to do a simple and precise interview. In December 2016, with the enthusiastic recommendation of a testing sister in the same department, I signed up for the Nuggets account. Now I should be one of the first users of the Nuggets, witnessing the development of the Nuggets from zero to one. Now the Nuggets are going higher and higher, and that’s what we old nuggets are looking forward to and hoping for.

I have been diving since I registered my gold digger account, and I have been learning the articles of all the front-end leaders every day. Here are the number of articles read in nuggets over five years. Of course, EVERY article I will carefully read, good articles will be favorites and make relevant notes, not eat the kind of ash!

After more than two years of diving accumulation, I tried to write an article while improving my own ability. Finally, I officially published my first technical article “Flexible Application of JS Development Skills” in 2019. The subsequent update cycle is not very frequent, because I will put a lot of energy into each article, at least two weeks or even two months.

I used to be a medical student, and yes, college was a waste of time. Perhaps like many non-graduates, it is extremely difficult to change careers from other industries to the Internet industry. Since I participated in the website design competition of the university twice and won the prize, I developed a strong interest in website design, and I learned Photoshop and Dreamweaver by myself under the guidance of the optional course teacher. Once I had the BASICS of UI, I started coding. There were so many different programming languages that I couldn’t get started. PHP from entry to abandonment in 7 days, ASP from entry to abandonment in 1 day, Java from entry to abandonment in 3 days.

I got to know CSS through an exchange with my senior. The simplicity and convenience of CSS makes me think it is the key to open the programming world. CSS is not strictly a programming language, but a markup language like HTML, but its ability to run directly in a browser made me realize how easy it is to get started with a front end. Yes, all you need to know about front-end is HTML+CSS+ browser. Compared to other programming fields, front-end can be considered a career changer with no foundation. Therefore, for many readers or friends who want to switch to programming, I would recommend the front end as the first choice.

During the period of entry, I forcibly memorized bones, blood vessels and nerves of clinical medicine, anatomy, pathology, physiology and psychology every day, and forcibly memorized HTML tags, CSS attributes and JS APIS every day. The whole process was hard and enjoyable, and the mental improvement brought by coding was far better than any other goal I wanted to achieve, so I enjoyed the fun brought by coding, because my mind became sharp and organized.

From front end to full stack

Now that you’re a full stack engineer, do you see the trend of the front end going full stack? Do you find it difficult to go from front end to full stack? How did you make the transition step by step?

I have experienced the development of front-end from simple webpage effect to complex cross-end application for many years. In the future, it is an inevitable trend for front-end to move to full stack. With more help from developers, I believe the front end will reach this trend in a much shorter time.

JavaScript used to be just a scripting language to enrich web pages, making them live and improve user experience by embedding preset logic. Since JavaScript was born in 1995, I think there have been six front-end technologies that have allowed the front end to jump from quantitative to qualitative in a short period of time.

• AJAX(2005年): Web development technology that rapidly and dynamically updates partial Web pages without refreshing
• Jquery(2006年): A JS framework that provides simple JS design patterns and optimizes DOM manipulation, language enhancement, event handling, animation design, and AJAX interaction
• Presents (2009): A JS framework that provides MVC, modularity, bidirectional binding, dependency injection, and semantic labeling
• The Node (2009)Based on:Chrome V8The engine uses an event-driven, non-blocking I/O model to run THE JS runtime on the server
• React(2013年): A JS framework that uses declarative paradigms to easily describe applications, minimizing interactions with the DOM through the virtual DOM
• Serverless(2015年): The concept of building and running applications without server management

Based on these six front-end technologies, I have divided the front-end development process into the following stages. Each front-end technology provides a boost to the current phase, pushing the front end from one level to another. Each front-end technology may not be taken seriously when it appears, but as time goes on and the project practices, it may break out from many other technologies. Therefore, we need to keep learning enthusiasm, always pay attention to new technologies, and at the same time, be tolerant, each technology must be available, or it will not appear.

The process of learning front end can be described as follows: 😂! I think it captures the learning curve of many front end engineers, myself included, over a hill and another hill waiting for us.

But it may take two or three years to go from the front end to the full stack. I believe it takes less time to get from the front end to the full stack if you have a learning map and follow it in one direction. First of all, MY definition of full stack is to have higher-level engineering architecture ability and cross-end development ability on the premise of certain front-end development experience. If YOU have a solid foundation of HTML+CSS+JS, I believe this is not a problem. What is bad is the direction and route.

JavaScript is much more versatile than other languages, so there are a lot of great frameworks and environments that can be used to do a lot of things. So try moving slowly to Node development while you’re familiar with Web development. With Node development, we can expand from just web development to server-side development and even desktop and mobile development and many other areas.

As with React and Vue, the virtual DOM can be used as a compatibility layer to connect to native ends or render itself to other platforms, leading to some cross-end frameworks of its own. React has React Native on the mobile side and next on the server. Vue has Weex on the mobile side and Nuxt on the server side. Once you are fully experienced in React/Vue development, you can slowly transition to other areas with the help of these derived cross-end frameworks. Of course, this is only a learning direction, everyone has their own learning methods, here will not say more about their own learning methods, the following I sorted out a based on their own experience from the front end to the full stack transition learning route.

In recent years, I have been slowly transitioning from left to right in accordance with the figure above. Of course, I may miss some directions not recorded in it. After all, the front-end development is too fast, and I have been learning, but the overall direction has been basically perfected.

Abridged CSS

If you could sum up CSS in one sentence, what would you say?

If I had to sum up CSS in one sentence, it would be from two sides. Seriously, to quote from the spiderman movies, with great power comes great responsibility. Mischievously, CSS is a web version of the four Asian magic arts combined (Chinese retouching, Korean plastic surgery, Japanese makeup, Thai transsexual surgery).

To put it simply, taking CSS seriously can turn CSS into something that is out of work, and ignoring CSS for writing generic styles and using third-party frameworks. So CSS is Picasso’s brush, and it’s up to you to use it well.

Think CSS simple students, may be a lot of scenes are the use of UI framework development, in the development process of basic will not consider how to write CSS or reconstruction CSS, in the case of inconsistent with the needs of the use of style coverage at most violent solution. For those who find CSS difficult, most of the cases are to restore slice layers according to the design drawings provided by the designer. Many design specifications need to be considered. Even a set of style specifications is applied to various screens, which increases the difficulty of CSS adaptation.

So far many students have ignored the importance of CSS, CSS as a markup language, and even can be considered as the front of the entry key, it brings us not only is used to write style so simple, but more is behind it hidden secrets and skills. So IN 2020, I spent half a year of private time to write a gold mining small book “Playing with the Beauty of CSS Art” to explain my views and thinking about CSS, hoping to carry forward the language of this entry front, so that everyone to it. My CodePen home page is a testament to my love of CSS. After all, CSS gives me an interest, a job, a direction and a purpose.

CSS Learning Suggestions

CSS is a front-end entry technology, any suggestions for students who are just starting to learn CSS? How to get started, what to focus on, and what are some efficient ways to do it?

In the interview I always stressed that CSS is a good fit for the beginning front-end because of its simplicity and ease of use. Based on the blind learning I took a lot of detours, now I realize there is a better way to learn CSS. Or that, learning methods only suitable for their own, but the learning route can be suitable for more people.

Here, I’ve put together a mind map of the most important things in CSS based on my previous book, “Playing with the Beauty of CSS Art.” For some reason, I’ve been enjoying mind mapping lately.

Further study of CSS can be combined with “Playing with the Beauty of CSS Art”, the effect will be better. Keep yourself interested in CSS by constantly trying to do something fun with it. In addition, we can pay more attention to CodePen this website, there are many unexpected CSS Demo, each learning a CSS Demo can find interesting points, to improve their CSS coding ability has a great help.

Being tool-savvy is also a good learning habit, and here are some of the tools I use most often for CSS. Each tool has its own unique features, which can be helpful in advancing CSS.

• CodePen: Code demo
• Caniuse: Browser compatibility
• CssTriggers: the CSS is triggered
• CubicBezier: Bezier curve
• Flexbox: Flex layout
• StatCounter: Browser statistics

In addition, keeping an eye on authors who are passionate about CSS can help you learn CSS, as they regularly share interesting CSS technical articles.

• Zhang Xinxu
• Chokcoco
• I – JowayYoung

Finally, a little CSS learning summary: no IExplorer compatibility, no compatibility problems. No kidding, I’m serious 😬!

• Master the core knowledge of CSS:The box model,Formatting context,The document flow,Priority level,layout
• Being good at using assistive tools, such as graphical tools, can help us better understand certain CSS properties and usage scenarios
• Focus on the authors who are interested in CSS, and communicate CSS with you
• inCodePenSign up for an account and follow more interesting thingsCSS DemoWhen you find the effect you like, collect it and learn it again
• Refused to compatibleIExplorer, only the majority of developers can completely abandon the evilIExplorer

Front-end learning Tips

What difficulties did you encounter in the process of learning CSS? How did you solve them? Can you give us some references and suggestions? How do I learn and improve at ordinary times?

If you decide to study on your own before you begin, you will find that the Internet is full of materials and courses, many of which are not fully understood at this stage. It is important to make a planned and structured learning route before starting, so as to avoid wasting time by changing the learning route because the materials and courses are in the wrong direction. For example, in the study route I compiled above, only by having a clear direction can we ensure that we do the right thing at the right time.

To be a coder, you must sign up for a GitHub account. As the world’s largest gay friends exchange site, you can find a lot of amazing people and projects, these are important additives on the road to learning, can at some time to push their technical level to a new level. If you have a good project, you can publish it on GitHub and let the world see it.

Next I make a few suggestions, very suitable for front-end beginners and advanced.

Choose an industry-oriented website as a learning base. Article type website preferred gold digging, video type website preferred MOOC. This may be your main way of learning in the early stage, to avoid blindly looking for materials and courses and waste of time, for future learning to provide a good learning environment and learning foundation.

Go on the machine, go on the machine, go on the machine, only say important things three times. All study and no practice is a rascal. After learning, try to practice as much as possible, so that they can better master the knowledge, a little progress every day, time will let you know, how good you will become. Many readers often ask me how long it takes to get to the advanced front end. It depends on the person. Work hard for one or two years, but be lazy for ten years.

When the accumulation of certain experience, you can find a specific scene for yourself, using the front-end technology learned to do a project in the real development scene, the purpose is to consolidate and prompt the knowledge learned. Of course, it can also be posted to Guthub for the world to see. After all, good projects need to be promoted, and the whole process may be guided or advised by different people, which can be really beneficial.

Finally, I can write articles and publish them to the technical community in my spare time. The Nuggets provide us with a platform where front-end developers of all levels share their knowledge, and where you naturally find inspiration and direction for progress. I used to be a diver, and now I can write a complete article according to my ideas that can help others. I can review the old and learn the new and help others, which is the fun of sharing.

Insist on writing

What do you think of technical writing? Why do you continue to write technical writing? Can you share your experience? Finally, what would you like to say to our readers? Keep learning? Keep writing? Or what you’ve learned in your recent field of interest.

As a qualified programmer, when the skills accumulated to a certain extent, through the form of blog to show what I have learned, it will be a multi-harvest thing. Technical writing may be a little easier than junior high school writing, after all, the topic of choice.

Unconsciously, I have insisted on technical writing for two years. No matter it is study notes, personal blog or internal sharing, I will try my best to do well. Every technical writing means reviewing the old and learning the new. If I can stick to technical writing, I think I can gain the following aspects.

• Stick to technical writing to keep the mind and thinking sharper and more organized
• Insist on technical writing can be developed to the effect of quickly analyzing useful information about anything
• Sticking to technical writing skills can help you both learn from the past and help others
• Adhere to the technical writing can make peers, know more different levels of bigwigs, to their own advancement to help more
• Sticking to technical writing can make you more self-disciplined, confident and sensitive to words

I used to be afraid of technical writing, because writing an article is really not easy. The first problem I encountered at the beginning of technical writing was that I could not write. This difficulty may be caused by hesitancy in topic selection or lack of clear overall thinking. This is often the problem that causes many people to abandon technical writing in the first place, so why does the technical community always have more readers than writers? To solve this problem, we need to focus on topic selection and overall thinking.

First is the topic, open the tag management nuggets, will find more than 100 labels. So many labels, how to choose a topic. I’ve thought about this a lot, so I’ve grouped these labels into the following fourteen categories.

So the direction of topic selection is clear. For example, with CSS, we can write about box models, common layouts, horizontal and vertical centers, etc. React/Vue development experience, React/Vue source code reading, React/Vue operation mechanism, etc. Choosing a topic you want to write about is the first step. From the above general direction to determine the direction of technical articles, and then determine what topics you are good at.

The second step is to confirm the overall idea of the article. I’ve grouped the overall idea of a technical article into the following points and arranged them in order.

• preface: usually based on the technical background of the topic, is generally introduced in the background before the use of the technology, can analyze some shortcomings or disadvantages of the background, and then slowly pave the way to the topic you want to express;
• Analysis of the: Usually analyze the advantages or advantages of the topic based on the current situation, and list some successful cases to verify the reliability of the topic, or illustrate the universality of the topic through some application scenarios;
• coding: As the most important part of the main body of the article, it is also the connecting part of the technical article. By showing some core code and adding analysis, it analyzes why it is treated like this, why it is encapsulated like this and why it is used like this.
• steps: This point is optional, yescodingIf there is a lot of coding on the whole topic, it can be explained step by step to add more details for readers to interpret, which plays a certain role in sublimating technical articles.
• The sample: The purpose is to help readers understand the actual usage scenarios expressed by the topic. Whether a technology is popular requires certain support of the actual usage scenarios.
• doubt: No matter how advanced the technology of the topic, there will certainly be difficult and complicated diseases, need to fill holes and dig holes, this process is very important, if the promotion of the topic can incidentally fill holes in the topic, I believe that more readers will identify with the reliability of the topic;
• conclusion: The most important point of the full text is that the topic needs to be concluded. Summarizing the topic can improve the integrity of the topic to a higher level. In a few concluding words, I summarize what I have gained and learned from reading this paper.

For example, in my post “Well, hand-wringing a TinyPng compressed image WebpackPlugin is SoEasy”, my purpose is to post a tutorial on how to write a good WebPack extender. Based on the above techniques, you can develop the topic of the whole article step by step. Find nuggets most articles are written in such a form, if you can brave the first step, I believe you can output more high-quality articles in the near future, output technical articles, both review old knowledge and help others, this is the fun of sharing.

Benefits to the