20 documents and guides for front-end developers (3)

We’re here in 2015 (Translator’s Note: The original article was written on February 25, 2015), and I’m sure you feel one of the following two feelings right now:

1. You are really overwhelmed by how much it will cost to learn in this industry

2. Desire to acquire more knowledge, but can’t wait Wait until someone else tells you what to learn next.

I assume it is a combination of these two emotions - the first is caused by our personal emotions, while the second anxiety is somewhat unnecessary.

So, to help you out, I’ve compiled a list of additional helpful documents, information sites, and guides covering different areas of front-end development. 　

　1.I want to use

Based on the data and functions in Can I Listed on the use website, this app gives you the ability to choose from many front-end development features and get a percentage of the number of users around the world who see your chosen feature.

##　 2. Regulex (JavaScript regular expression visualization tool)

It is a client-side tool, a JavaScript regular expression visualization tool that has a precise error prompter to tell you if there is a syntax error in your regular expression. It also provides an option to embed the output results where you want by using a pair of iframe tags.

3. Mastering the :nth-child(Mastering:nth-child)

##　

　“This page demonstrates HTML5 New elements of video, its multimedia API, and multimedia events. Play, pause and search throughout the video, adjust volume, mute, and adjust playback speed (including setting to negative values). Take a look at the effect in the video to see the effects of the main events and changes in attribute values. ”

Introduction to XSS Link address: http://baike.sogou.com/v625072.htm?fromTitle=xss

It is probably a topic that all developers should be familiar with, and for understanding XSS, The content above may be a good place to start. It is a comprehensive tutorial on cross-site scripting, a manual of potential attack types, and provides solutions to prevent them

6. RSCSS

It means "reasonable CSS style sheet structure standard", when writing for large projects When it comes to Sass/CSS, it is also preparing some tips and techniques.

Sass introduction link address: http://baike.sogou.com/v73912368.htm?fromTitle=SASs#.

##　7. CodeFightClub(Programming Competition Club)

　“It is made up of Andrew A project created by Hathaway with the goal of helping fellow developers learn how to write their code in the best, most efficient, and optimal way they can. To decide whose way of writing code is the best, users can leave comments and vote for their favorite competitor to win a competition. "This website is divided into many categories according to programming languages, but there don't seem to be that many on it. However, you can add to the website to increase it, and you can also launch some "programming competitions".

　8. Sass Guidelines(Sas Guide)

It comes from Sass master Hugo Giraudel, "an opinionated style guide for writing sensible, maintainable, and extensible Sass code." The guide has been translated into six other languages.

　 9. Flexbugs

　“It is a community-curated flexbox It's intended that if you've built a site with Flexbox and it's not working the way you expected, you can find the solution here. ." When starting to build a new layout with Flexbox, you should identify a necessary tag for them.

##　10. A Front End Engineer's Manifesto(A front-end engineer's advice)

It doesn’t have particularly in-depth content, it’s just a simple collection of notices that remind all front-end developers to integrate their development processes and workflows.

　11. ECMAScript 6 equivalents in ES5

A very good one , a reference manual that can convert ES6 functions into ES5-compatible code. It nicely takes into account strong support for ES5 (ES5 has great support), but there is no strong support for ES6 (ES6 doesn’t).

12. Flexbox Adventures## It is a developer from Australia An in-depth and practical Flexbox manual by Chris Wright. He also posted a post titled Using Flexbox Today's post helps you move to Flexbox development in a reasonable and practical way.

Using Flexbox Today’s link address: https://chriswrightdesign.com/experiments/using-flexbox-today/

It is a comprehensive site designed to promote and teach developers to use the popular BEM CSS methodology.

BEM link address: http://www.w3cplus.com/css/bem-definitions.html

　“It reports incompatibilities between different Sass engines.”

A small, reasonable and easy-to-use guide , which can obtain different HTML element information from the reference manual.

If you like, you may follow a lot of JavaScript best practices, but you may not necessarily understand all the reasons behind these technologies. The purpose of this site is to reveal the secrets of errors and warnings you may encounter with the popular linting tools JSLint, JSHint, and ESLint.

##　 17. Animations — Web Fundamentals (Animation - the basis of the Web)

In Google’s Web Fundamentals documentation(web There is a lot of useful information in the Basic Document), but this is specially mentioned for front-end developers because when making a dynamic UI element, there are some important good experiences that can be applied to your own projects.

##　18. Favicon Cheat Sheet (Website Favicon Reference Manual)

Favicon introduction link address: http://baike.sogou.com/v8483500.htm?fromTitle=favicon

"A distracting manual for viewing the used Size or Type of Icon." It was compiled from a number of different popular articles that discuss icons from the inside out to computers and mobile phones.

　19. The CSS at…

If you want to use some Enrich yourself with the CSS style guide made by a master, then in this site, Chris Coyier has ranked different posts over the last few months based on statistical trends and put their related information and links into a table. I'm sure he will continue to update this as others bring their CSS methods and experiences to the public.

　20. Dash

Dash introduction link address: http:/ /scriptfans.iteye.com/blog/1543219

It is a native (local) Mac or iOS application, "It is an API document browser and code snippet manager. Dash stores Code snippets, and the ability to instantly search for documentation in a collection of over 150 API documents offline. “It’s great and suitable for different types of developers.

　 Conclusion

If you know of others not listed in these posts Come out, or if you build or write something similar yourself, please let us know in the discussion area.

　20 documents and guides for front-end developers (1)

　20 documents and guides for front-end developers Documentation and guides prepared by front-end developers (2)

The above is the detailed content of 20 documents and guides for front-end developers (3). For more information, please follow other related articles on the PHP Chinese website!