Link: http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
I wrote a ReadMe document for a project a few days ago. I hope other developers can see this project and learn something from it. Suddenly I realized that if I put it a few years ago, the node, PNM, homebrew, git, testing, and product building I mentioned casually during my writing would scare me away.
For a while, the basic workflow of a front-end engineer was: editing files, local testing (as best as we can), and uploading files to the server through FTP. We evaluate whether a front-end engineer is compatible with IE6 or pixel-level consistency across browsers. ManyCommunityMembers-including me-lack of traditional programming experience. HTML, CSS, and JavaScript-usually jquery-are self-learning skills.
These things have changed over the past few years. It may be because you start to take the work of front-end developers seriously, or because browser developers start to make a difference (tend to be consistent? Getting their shit together), or the front-end developer himself-also, including me-began to see the dawn of software development.
In any case, we can see that the focus of front-end development has shifted from tedious to tool-oriented. To become a successful front-end developer, You need to master a new set of basic skills, and front-end developers who do not meet the requirements will feel increasingly lagging behind, those who are sharing their knowledge think these things are natural.
I hope people will be familiar with the content mentioned below. In addition, there are some related resources, if you think you need to accelerate your growth. (Thanks to Paul Irish, Mike Taylor, Angus croll, and vglad fillppov for their contributions)
JavascriptThis is not much to say, but it is no longer enough to know a javascript library. I am not saying that you need to know how to use native JavaScript to implement all the features of a javascript library, but you need to know when the library is required. At the same time, when you do not need a library, you can use simple and old JavaScript to complete your work.
This means that you have read the essence of JavaScript language-hopefully more than once. You understand data structures such as objects and arrays; functions, including how and why do you need ~CallAndApplyThey master prototype inheritance and JavaScript asynchronous operations.
If your native JS is weak, here are some resources that can help you:
If you have never visited GitHub, you will never be able to participate in this resource-rich open-source community. It is already thriving in the front-end development technology field. Cloning a branch and then running it should become your habit, and you need to know how to use the branch in a multi-person Collaboration Project.
Need to upgrade yourGitSkills?
The days of dependency management by inserting several scripts or style labels on the page are gone forever. Even if you haven't been able to introduce requirejs into your workflow, you should try it out in your personal project or project like backbone boilerplate, because it can bring us many benefits. Requirejs enables you to develop JavaScript and CSS files to be modular and fine-grained. Before the product goes online, you can compress and merge files through the related optimization tools.
AMD sounds scary? There is no excuse to quit. At least, you should know that there are tools such as uglifyjs and closure compiler that can intelligently compress and merge your code before your product goes online.
If you are still writing native CSS -- that is to say, there is no CSS Preprocessor like sass or stylus -- rereirejs can also help you maintain the modularization of your CSS files. Used in a basic Style File@ ImportDeclaration to load the relevant dependent files, and then run reqirejs optimizer on the basic file to build the files used in the actual production environment.
In the past few years, browser-based development tools have been greatly improved. If you know how to make good use of them, they can greatly improve your development experience. (Note: If you are still usingAlertDebugging code will waste a lot of time)
You may need to determine a browser. You mainly use its developer tools-recently I prefer Google Chrome Developer Tools-but do not immediately discard the developer tools of other browsers, because they often add useful features based on developers' feedback. It is particularly worth mentioning that some functions of Opera's dragonfly make their Developer Tools stand out, such as CSS analyzer (in the experiment), which can be customized with keyboard shortcuts, you do not need to remotely debug the USB connection and can save and use a custom palette.
Command LineWhen it comes to the command line, adapting to it (being comfortable with it) is no longer an option-if you are not prepared to sit in front of the terminal window and manually tap the command line, you will miss a lot of things along the way. I am not saying that you must complete everything on the terminal-I will not steal your git gui (graphical user interface ), although I do think it would be better to leave it in the end-you 'd better keep running your command line terminal no matter what project you are working on. The following command line tasks must be completed without thinking about them:
SSHLog on to another machine or serverSCPCopy files to another machine or serverACKOrGrepFind the file whose file name contains a string or meets certain patternFindLocate a file whose file name meets a certain patternGitYou can at least use it to do the following:Add,Commit,StatusAndPullBrewInstall Files Through homebrewNPMInstall the node packageGemInstall the ruby package
If you use more commands, You can edit them.. BashrcOr. ProfileOr. ZshrcOr others, and then create alias so that you do not need to type many characters as before. You can also add alias to your~ /. GitconfigFile. The dofiles of Gianni chiappetta is a good example.
Note:: If you are developing on windows, I don't know how to help you, except cygwin is recommended. It is troublesome to participate in the front-end open-source community activities on Windows. Of course, what I said is not necessarily correct. On the contrary, MacBook Air is cheap, powerful, incredibly portable, and always has Ubuntu or a variety of * nix.
Front-end Template
Not long ago, for front-end xhr requests, a typical server response method was to return a piece of HTML text. However, in the past 12 to 18 months, the front-end development community has seen the dawn, requiring the server to return simple data. Converting data into HTML is troublesome. If the processing is poor, the maintainability will be quite poor. This is the purpose of the front-end Template Library: you only need to maintain a set of templates and provide data as needed to convert the templates into HTML. How can I select a template library? The template chooser of garann mean can give you directions.
CSS Preprocessor
Paul Irish noted a few days ago that the code written by front-end developers was significantly different from the final deployment in the production environment. The code written by the CSS Preprocessor is a good example. There are still many people who insist that native CSS is the only way out, but they are getting closer and closer to us (but they are starting to come around ). These tools provide some CSS attributes that have long existed, such as variables, mathematical operations, logic, and Mixin ), they can help you free up from a bunch of redundant feature prefixes.
Test
One of the fun of writing modular and loosely coupled code is that your code can be tested. If you use a tool like grunt, creating a project that contains test cases is no longer easy. Although grunt integrates qunit, there are still many test frameworks for you to choose from-Jasmine and mocha are my two favorite test frameworks-the Framework selection depends on your personal preferences, and the structure of your project (the mark up of the rest of your stack ).
Test is interesting if your code is modular and loosely coupled. However, for those poorly organized code, testing is not difficult, sometimes even impossible. In other words, forcing yourself to write test cases-or even before you officially code-helps you sort out your ideas and your code organization. Later, when you refactor your code, it also gives you confidence.
An example of Process Automation: Create a built-in unit test project through grunt. The current status of front-end development is that we have a lot of repetitive work to do, but a friend once told me that a good developer is a "lazy" Developer: first, if you find that you have done the same event more than three times, it is time to automate it.
Tools like make have been around for a long time. They are mainly used to solve the above problems.Rake,GruntAnd other similar tools. If you want to automate tasks that require dealing with file systems, it is very helpful to learn languages other than JavaScript, because when you only want to process files, the asynchronous feature of node makes things more troublesome. There are also many automated tools for specific tasks-deployment, construction, code quality assurance, and others.
If you have been troubled by the absence of semicolons or the addition of a comma, you will know how much time you can waste with such a small code defect. That's why you are running your code in a tool like jshint, right? It is configurable and can be integrated into your editor or build process in many ways.
Good Reference Manual
Alas, there are no manuals for front-end development, but MDN is at your fingertips. Good front-end developers will add the MDN prefix to any search queries, suchMDN JavaScript ArraysTo avoid searching for content of profitable organizations like w3schools.
Reading these things won't make you an expert, even if you are more experienced. The only way to do better in a thing is to do that thing. Good luck.
Source: http://www.cnblogs.com/chyingp/archive/2013/04/25/a-baseline-for-front-end-developers.html
Link: http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
I wrote a ReadMe document for a project a few days ago. I hope other developers can see this project and learn something from it. Suddenly I realized that if I put it a few years ago, the node, PNM, homebrew, git, testing, and product building I mentioned casually during my writing would scare me away.
For a while, the basic workflow of a front-end engineer was: editing files, local testing (as best as we can), and uploading files to the server through FTP. We evaluate whether a front-end engineer is compatible with IE6 or pixel-level consistency across browsers. Many community members, including me, lack traditional programming experience. HTML, CSS, and JavaScript-usually jquery-are self-learning skills.
These things have changed over the past few years. It may be because you start to take the work of front-end developers seriously, or because browser developers start to make a difference (tend to be consistent? Getting their shit together), or the front-end developer himself-also, including me-began to see the dawn of software development.
In any case, we can see that the focus of front-end development has shifted from tedious to tool-oriented. To become a successful front-end developer, You need to master a new set of basic skills, and front-end developers who do not meet the requirements will feel increasingly lagging behind, those who are sharing their knowledge think these things are natural.
I hope people will be familiar with the content mentioned below. In addition, there are some related resources, if you think you need to accelerate your growth. (Thanks to Paul Irish, Mike Taylor, Angus croll, and vglad fillppov for their contributions)
Javascript
This is not much to say, but it is no longer enough to know a javascript library. I am not saying that you need to know how to use native JavaScript to implement all the features of a javascript library, but you need to know when the library is required. At the same time, when you do not need a library, you can use simple and old JavaScript to complete your work.
This means that you have read the essence of JavaScript language-hopefully more than once. You understand data structures such as objects and arrays; functions, including how and why do you need ~CallAndApplyThey master prototype inheritance and JavaScript asynchronous operations.
If your native JS is weak, here are some resources that can help you:
If you have never visited GitHub, you will never be able to participate in this resource-rich open-source community. It is already thriving in the front-end development technology field. Cloning a branch and then running it should become your habit, and you need to know how to use the branch in a multi-person Collaboration Project.
Need to upgrade yourGitSkills?
The days of dependency management by inserting several scripts or style labels on the page are gone forever. Even if you haven't been able to introduce requirejs into your workflow, you should try it out in your personal project or project like backbone boilerplate, because it can bring us many benefits. Requirejs enables you to develop JavaScript and CSS files to be modular and fine-grained. Before the product goes online, you can compress and merge files through the related optimization tools.
AMD sounds scary? There is no excuse to quit. At least, you should know that there are tools such as uglifyjs and closure compiler that can intelligently compress and merge your code before your product goes online.
If you are still writing native CSS -- that is to say, there is no CSS Preprocessor like sass or stylus -- rereirejs can also help you maintain the modularization of your CSS files. Used in a basic Style File@ ImportDeclaration to load the relevant dependent files, and then run reqirejs optimizer on the basic file to build the files used in the actual production environment.
In the past few years, browser-based development tools have been greatly improved. If you know how to make good use of them, they can greatly improve your development experience. (Note: If you are still usingAlertDebugging code will waste a lot of time)
You may need to determine a browser. You mainly use its developer tools-recently I prefer Google Chrome Developer Tools-but do not immediately discard the developer tools of other browsers, because they often add useful features based on developers' feedback. It is particularly worth mentioning that some functions of Opera's dragonfly make their Developer Tools stand out, such as CSS analyzer (in the experiment), which can be customized with keyboard shortcuts, you do not need to remotely debug the USB connection and can save and use a custom palette.
Command Line
When it comes to the command line, adapting to it (being comfortable with it) is no longer an option-if you are not prepared to sit in front of the terminal window and manually tap the command line, you will miss a lot of things along the way. I am not saying that you must complete everything on the terminal-I will not steal your git gui (graphical user interface ), although I do think it would be better to leave it in the end-you 'd better keep running your command line terminal no matter what project you are working on. The following command line tasks must be completed without thinking about them:
SSHLog on to another machine or serverSCPCopy files to another machine or serverACKOrGrepFind the file whose file name contains a string or meets certain patternFindLocate a file whose file name meets a certain patternGitYou can at least use it to do the following:Add,Commit,StatusAndPullBrewInstall Files Through homebrewNPMInstall the node packageGemInstall the ruby packageIf you use more commands, You can edit them.. BashrcOr. ProfileOr. ZshrcOr others, and then create alias so that you do not need to type many characters as before. You can also add alias to your~ /. GitconfigFile. The dofiles of Gianni chiappetta is a good example.
Note:: If you are developing on windows, I don't know how to help you, except cygwin is recommended. It is troublesome to participate in the front-end open-source community activities on Windows. Of course, what I said is not necessarily correct. On the contrary, MacBook Air is cheap, powerful, incredibly portable, and always has Ubuntu or a variety of * nix.
Front-end Template
Not long ago, for front-end xhr requests, a typical server response method was to return a piece of HTML text. However, in the past 12 to 18 months, the front-end development community has seen the dawn, requiring the server to return simple data. Converting data into HTML is troublesome. If the processing is poor, the maintainability will be quite poor. This is the purpose of the front-end Template Library: you only need to maintain a set of templates and provide data as needed to convert the templates into HTML. How can I select a template library? The template chooser of garann mean can give you directions.
CSS Preprocessor
Paul Irish noted a few days ago that the code written by front-end developers was significantly different from the final deployment in the production environment. The code written by the CSS Preprocessor is a good example. There are still many people who insist that native CSS is the only way out, but they are getting closer and closer to us (but they are starting to come around ). These tools provide some CSS attributes that have long existed, such as variables, mathematical operations, logic, and Mixin ), they can help you free up from a bunch of redundant feature prefixes.
TestOne of the fun of writing modular and loosely coupled code is that your code can be tested. If you use a tool like grunt, creating a project that contains test cases is no longer easy. Although grunt integrates qunit, there are still many test frameworks for you to choose from-Jasmine and mocha are my two favorite test frameworks-the Framework selection depends on your personal preferences, and the structure of your project (the mark up of the rest of your stack ).
Test is interesting if your code is modular and loosely coupled. However, for those poorly organized code, testing is not difficult, sometimes even impossible. In other words, forcing yourself to write test cases-or even before you officially code-helps you sort out your ideas and your code organization. Later, when you refactor your code, it also gives you confidence.
An example of Process Automation: Create a built-in unit test project through grunt. The current status of front-end development is that we have a lot of repetitive work to do, but a friend once told me that a good developer is a "lazy" Developer: first, if you find that you have done the same event more than three times, it is time to automate it.
Tools like make have been around for a long time. They are mainly used to solve the above problems.Rake,GruntAnd other similar tools. If you want to automate tasks that require dealing with file systems, it is very helpful to learn languages other than JavaScript, because when you only want to process files, the asynchronous feature of node makes things more troublesome. There are also many automated tools for specific tasks-deployment, construction, code quality assurance, and others.
If you have been troubled by the absence of semicolons or the addition of a comma, you will know how much time you can waste with such a small code defect. That's why you are running your code in a tool like jshint, right? It is configurable and can be integrated into your editor or build process in many ways.
Good Reference Manual
Alas, there are no manuals for front-end development, but MDN is at your fingertips. Good front-end developers will add the MDN prefix to any search queries, suchMDN JavaScript ArraysTo avoid searching for content of profitable organizations like w3schools.
Reading these things won't make you an expert, even if you are more experienced. The only way to do better in a thing is to do that thing. Good luck.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
