Web Development resource tools for a big roundup

original link: 100+ Awesome Web development Tools and Resources

The rapid development of the web is both a good thing and a bad thing for developers. Learning new technologies, programming languages and adapting to changes in the current fashion sounds exciting and tense. The challenges you face may include adapting your existing frameworks to new business requirements, testing your site's compatibility, and optimizing your site's front-end and back-end synergies. The collection list that is presented here today may help you to do similar work.

P.S. Sequential order does not represent the recommended ranking.

JavaScript Library/Framework

JavaScript is the world's most popular web programming language. People in order to quickly develop Web sites or applications to pre-write some JS class library. You can easily introduce these libraries on your website through some public CDNs:

?

1	<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

• jquery: Convenient, powerful and comprehensive, home travel essentials, near JS alternatives, you can not JS, but not without jquery.

• Backbonejs: Models, Views, collections, events, make your front-end code more frame-sensitive.

• D3.js: Data visualization must be learned, only you can not think of, there is no D3 painting.

• React: Learn to React, then learn react-native, you can be from a front-end Avatar web App engineer, Ios/andorid developer, desktop application Engineer ...

• JQuery UI: A few lines of code can write a Web application that drives a picture with Ajax.

• JQuery Mobile: A dedicated JS development framework, and similar jackets above.

• Underscore.js: A non-intrusive framework that provides a number of useful functional methods to compensate for the shortcomings of jquery.

• Moment.js: Native JS display output date time really painful, moment for you to solve everything!

• Lodash: Modular and efficient, Lodash and underscore are very similar.

Front End Frame

• Bootstrap: The most popular responsive front-end framework in the world.

• Foundation: Provides a lot of templates, for the website, mobile, Mail provides a lot of useful modules and styles.

• Semantic UI: A front-end frame that a person likes very much, the style is very nice, and more importantly, like the name of its semantic UI, class naming is particularly friendly, and writing web pages is like talking to people.

• Uikit: Beautiful, customizable, forthcoming release of UIKIT3 version, interested can try.

Web application Framework

• Ruby on Rails:ruby on Rails is an MVC framework for writing Web applications in Ruby, and GitHub is using it to write the jacket!

• Angularjs:google-led Web development framework, data binding, MVVM, unfortunately was later more flexible react, vue and other frameworks to rob the limelight.

• Ember.js: JS front-end MVC framework for developing single-page Web applications.

• Express:Node.js on the web framework, build a website or API service just for a second!

• METEOR:JS full-end framework, yes, you only need to learn JavaScript a language, you can complete the Web application front-end, database development.

• Django:python Web framework, life is too short, please use Python.

• Flask:python Web Framework, it is said that as long as learn Flask can feel free to find a good job?

• asp: The love of the older generation.

• : The most elegant and sexy PHP web framework, easy to use, elegant to no longer elegant, after all, PHP is the best language in the world.

• Phalcon: Expanded in C language, is said to be the fastest PHP framework.

Automated Build/Package management

• Grunt:javascript Automation Tools.

• Gulp: Personal feeling is the best use of automated building tools.

• Webpack: Modular Loading build everything, css/js even pictures can

• NPM:NPM is good, do not rely too much on the coat.

• Bower: Front-end framework package management tool, all kinds of framework and library one-click installation.

Programming languages

• PHP: The best language in the world is not explained.

• NodeJS: Can run on the server side of JS, just learn a language can be full stack programming.

• Javascript: The increasingly powerful scripting language, nowadays learning the front-end basic is to learn JS programming.

• HTML5: Markup Language for Web pages.

• Python: Life is short, please use Python. Better to use than to be useful.

• Ruby: Simple and efficient, learning Ruby is basically about learning to use rails

• Scala: Compatible functional, object-oriented, imperative programming that can interoperate with Java.

• CSS3: The style of the Web page.

• SQL: Operational database must be learned.

• Golang:google, easy to use.

• Rust: High performance, secure threads, and prevent false claims.

• Elixir: Developing dynamic functional languages that extend sustainable applications.

Database

• MySQL: Open source free performance is good, the whole world is using it.

• MariaDB: An increasingly popular database created by MySQL developers.

• MongoDB: Non-closed database, usually used in the Mean/mern schema.

• Redis: Improves application data access performance, memory reads and writes, and can persist stored databases.

• PostgreSQL: Powerful and complete, rich in compatible data types, and open source for free.

CSS Preprocessor

• SASS:CSS extensions, you can declare variables, introduce modules, nest properties, and so on.

• Less: Add declarative variables, style modules, namespaces, inheritance, and more to CSS.

• Stylus: Write CSS no longer have to write annoying parentheses ~

Code Editor

• Atom:github's invention, based on web technology development, beautiful and useful.

• Sublime Text: The Sexiest Code Editor, you love writing code because you love an editor.

• notepad++: Win platform under the open source Good code Editor, do not need to install what plug-in is already great.

• Visual Studio Code: Many people also recommend and like to use the VS Code this Microsoft-produced editor jacket.

• A comparison of fire on the TEXTMATE:OSX.

• Coda 2:OSX platform, you can write code in this editor, connect remote ftp/ssh/database, also can query manuals, code method quick Query and so on, an editor to meet all your needs to write the site.

• WEBSTORM:JS development tool.

• Vim:vim is the God-general presence in the editor.

• Brackets:adobe Company produced an editor, the preview function is very good.

• Emacs: There are also a lot of people who like to support Emacs.

Markdown Editor

• Stackedit: An online markdown editor.

• Dillinger: Ibid.

• Mou:mac on a very good markdown editor, but it is said that the author after the return of money to run?

• Ulysses: A great piece of markdown writing software that can be made into any format.

Icon Gallery

• Font Awesome: The most popular icon library in the world.

• Iconmonster: Online free icon gallery.

• Icons8

• Iconfinder

• Fontello

Version Management Apps

• Sourcetree: The best git Graphical client.

• Gitkraken (Beta): A free and easy-to-use full-platform git client.

• Tower 2: The interface looks good.

• GitHub Client:github Official Desktop client.

• Gogs:go language development can be self-built open-source hosting platform.

• GitLab: Free private project Git hosting.

Local development environment

• XAMPP: Free MariaDB, PHP, and Perl software Collection installation package.

• MAMP: Provides PHP development runtime environment on Mac.

• Wampserver:windows under the best use of the Apache2, PHP MySQL Development run environment.

• Vagrant: Virtual machine software.

• Laragon: If you like Laravel, use this best.

Code variance Check

• Diffchecker: A gadget that checks code similarities and differences online.

• Beyond Compare: Check the software for code modification differences.

Online programming

• JS Bin: Write and run HTML/CSS/JS Web page code online.

• Jsfiddle: Ibid.

• codeshare: Share your code with other developers in real time.

• Dabblet: Interactive test html/css code.

• CLOUD9: One-click to create an online development environment, complete Server Operations Command line, code online editing, project online operation, you can also share links to others preview, the most important of course is free of charge.

Collaboration tools

• Slack: Team communications applications.

• Teambition: The best team collaboration tool.

• Worktile: One-stop enterprise collaborative management platform.

Exchange Community

• Codepen: Online Sharing Write your front-end code, recommended jackets!

• Dribble: Designers share the community, the source of inspiration.

Web Performance Testing

• Website Speed test: web site load rate testing.

• Google Pagespeed Insights:pagespeed is Google's Web testing tool to optimize your recommendations through test scores.

• Google Chrome DevTools: Google developer tools.

• Webpagetest: Simulates a detection tool that loads your Web pages from all over the world.

• Pingdom

• Gtmetrix

Web Development Community

• Nuggets: high-quality technology community, the best in the country.

• Stack Overflow

• Front-End Front

• Hashnode

• Refind

• Google + Web developers Group

• Google + Web developers Group

• Facebook WordPress Front-End Developers Group

• LinkedIn Web Design and development professionals Group

• LinkedIn Web Site Development Group

• LinkedIn PHP Developer Group

• LinkedIn WordPress Developers Group

• Webdeveloper.com

• SitePoint Forums

• /r/perfmatters

• /r/webdev

Manuscripts: zhuanlan.zhihu.com

Http://www.oschina.net/news/77717/2016-web-develop-tools-collection

Web Development resource tools for a big roundup