Dry goods! Front-end development guide: 20 +

Dry goods! Front-end development guide: 20 +

Let's talk about it. Just get it done!

 

 

 

1. CSS media query and Range selector

If you have read the article "mod queries" about A List Apart recently written by Patrick Clancey, you will understand this point better. It is a tool or guide that helps readers understand these CSS selectors and how to use them to deploy unknown projects in the webpage layout.

2. Discard JavaScript

Smart warnings indicate that these components may not be semantic or accessible to all users. This website integrates a large number of different technologies and shows that if only HTML, CSS, and Sass are used, what can be done.

 

3. HTML5 large Memorandum

HTML5 large memo is a very comprehensive information chart. You can save it as PDF, which covers all HTML5 labels (whether it is an old version, a new version, or an outdated version ), properties, desktop and mobile browser support, event handlers, and Canvas functions.

 

4. SVG creation Guide

W3C official documentation describes some of the best examples for creating interoperable, reusable, high-performance, efficient, and practical SVG documents that are presented using annotations and code samples. These documents provide guidance without setup requirements and are useful for coding farmers who manually create SVG.

 

5. HTML 5.2 W3C Working Draft

While WHATWG HTML5 rules are still undisputed "Living Standards", W3C is promoting its rule perfection. If you are interested in looking at what is new and different HTML5.2, start from here.

 

6. Web code farming list

This list gives codenon a precise and specific reference when completing the project. Including availability, accessibility, search engine optimization, code quality, and security. In addition, each project in the category includes links to help the coders check the project.

 

7. I can... Make an animation?

This simple website allows you to search for a CSS attribute and will tell you whether the attribute is "animated ", further information on how the browser computes animations is provided.

 

8. mobile device testing

BrowserStack's mobile device testing guide is based on market share data, operating system versions, screen sizes, views, and resolutions. The website explains: "We have been inspired by the use statistics of more than 30 thousand BrowserStack customers and current global market trends. These lists will be updated constantly, including the latest and upcoming devices. "

 

9. The designer's Web performance optimization list

Jon Yablonski created this dynamic list based on an article he created, designers add some valuable and easy-to-achieve performance improvements to their front-end projects. Each project has a link to the relevant part of the article.

 

10. What is the availability of Web platform functions?

"Supported by caniuse.com and StatCounter data, this page shows the percentage of users in browsers with various Web platform features supported by the local machine. Obviously, this does not consider filling capacity or other backup solutions ."

 

11. JavaScript developer status survey

"Over nine thousand coders participated in the First JavaScript status survey. This survey answered questions about related front-end frameworks, status management, building tools, and testing libraries. Which kind of library class do you want to learn most. We hope this data will help you understand the ever-changing JavaScript ecosystem.

 

12. mobile usage statistics

This is a real-time, dynamic mobile usage data chart that demonstrates how various aspects of online activities change over time.

 

13. comprehensive guide to font loading policies

Zach Leatherman provides developers with detailed technical guidance to provide many best suggestions and examples for handling network fonts, helping the coders handle problems encountered in reality.

 

14. MDN Learning Community

This is a community you may already know. MDN is not suitable for all of us, because it is mainly for beginners, but it is undeniable that, mozilla Developer Network is a community that allows you to quickly access and obtain various learning knowledge such as HTML, CSS, and JavaScript.

 

15. Elastic ball

A team in Sparkbox created a simple interactive page to demonstrate how to use various techniques to create a bullet ball animation. If you want to use the animation library, it may be a good choice to compare different encodings and interfaces.

 

16. Accessibility guide list

For coders, engineers, project managers, testers, and editors. "It is a great experience to make the work seamless among all the members. You can use this list to help build accessibility regardless of the position you are responsible for or the stage of your project. "

 

17. WebAIM auxiliary function list

This is a more detailed and technically higher auxiliary function checklist from WebAIM technicians, which can be used on Web pages or as PDF files, it consists of HTML and Scripts/Plugins (Scripts/ INS.

 

18. Discard Lodash/Underscore

This is a widely used resource, listing many techniques that use vanilla JavaScript to replace other content such as Lodash and Underscore. The browser support for each technology is also introduced.

 

19. Web Accessibility Mode

Ian McBurnie, a developer from eBay, said this is an interesting test for easy-to-use network mode. The test content includes Automatic completion, check boxes, pop-up menus, paging, and prompts. You can find more related documents in the associated GitBook.

 

20. Angular code review

Angular 1.x checklist helps you with code review and ensures that you use the accepted best practices in terms of style, architecture, security, accessibility, and performance. You can also register users to receive notifications when Angular 2's checklist is available.

 

 

[I have a QQ Group for front-end learning and communication: 328058344 if you encounter any problems during the process of learning the front-end, please come to my QQ Group to ask questions. The group will update some learning resources every day. Chat is prohibited .]