Home > Developer > Web Develop
Reprint Source: https://xituqu.com/170.html
As a web developer, this is a good time and a bad time. Web development technologies are also changing. While exciting, it also means that Web developers need to be proactive in learning new technologies and new programming languages, and are willing and eager to accept new challenges to adapt to change. New challenges may include some development requirements, such as adapting to existing frameworks to meet business needs. Test a Web site to see what technical problems we have and to optimize and eliminate them. Facilitates the development process of the backend to speed up and test. So we've listed the tools and resources needed for a complete web development to help developers improve their development efficiency! Learn not to stop, let us strive to become a good developer!
Web development tools and resource integration
Say sorry here, for developers to use the tools, we can not include, here is the more popular tools and resources as an example. We hope to find the right tools to help our development!
Note: The tools and resources are sorted in order of precedence.
I dare say the JavaScript language is the most popular programming language in Web development at present. The JavaScript library, also known as the JavaScript Framework, encapsulates a number of pre-defined objects and the use of functions. Is that the site is easier to compatible with a wide variety of browsers. Then you can use the following JavaScript libraries to help you develop better.
JQuery: Fast y-speed, small, feature-rich JavaScript library.
Backbonejs: Provides a structure for a complex JavaScript application model (models), collection (collections), view (views).
D3.js:D3 is a data-based document manipulation JavaScript library thatD3 can combine data with HTML, SVG, and CSS to create interactive data graphs.
React::facebook's JavaScript Library is developed for building user interfaces.
jquery UI: The jqueryUI is an open source JavaScript Web user interface code base based on jquery. Visual controls that contain underlying user interaction, animations, effects, and replaceable themes.
JQuery Mobile: A framework for creating mobile Web applications based on HTML5.
The Underscore.js:JavaScript utility library provides functionality similar to Prototype.js, but does not inherit any JavaScript built-in objects.
Moment.js: A JavaScript Date processing class library for parsing, checking, manipulating, and displaying dates.
Lodash: A JavaScript utility library that provides features such as consistency, modularity, performance, and accessories.
The Popular Front end is composed of html,css,javasscript and so on. Of course, in order to adapt to the growing demands of web development, many independent front-end frameworks, such as Bootstrap, have emerged. A good framework can help front-end developers gain in the development process and reduce development stress.
Bootstrap: Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.
Foundation: The best responsive front-end framework to date, faster, lighter, more versatile, more flexible and more powerful!
Semantic UI: TheSemantic UI is a semantically designed front-end open-source framework that is powerful and simple to use, providing designers and developers with the perfect, reusable design.
Uikit:uikit uses a variable based on less, with a small size, modular, easily customizable theme and responsive interface.
The Web application framework is a software framework designed to help and mitigate development issues that developers encounter when developing and maintaining Web applications. For example: AngularJS, you can use it completely for free in your project, please see angularcdn.com for detailed documentation.
Ruby:ruby on Rails is a Web application development framework written in the Ruby language, designed to provide developers with common components that simplify the development of Web-page programs.
React:react originated from Facebook's in-house projects, React's design ideas are unique, revolutionary and innovative, and the code logic is simple. is now a non-long hot frame.
Vue:Vue.js is a library for building interactive WEB interfaces. It provides MVVM data binding and a composable component system with a simple, flexible API. Technically, Vue.js focuses on the view model layer on the MVVM pattern and connects views and models through bidirectional data binding.
Angularjs:angularjs expands HTML with new properties and expressions to build a single-page application. Angularjs has many features, the core of which is MVVM, modularity, automated bidirectional data binding, semantic tagging, dependency injection, and more.
Ember.js: A JavaScript MVC framework for creating Web apps, with string-based handlebars templates that support two-way bindings, observer patterns, computed attributes (dependency on other dynamic changes), auto-update templates, routing controls, state machines, and more.
Express: Web application Development framework based on node. JS platform based on node. JS platform, Fast, open, minimalist web development framework.
Meteor:meteor is a platform built on node. JS to develop real-time web-based programs. Meteor is located between the program database and the user interface, keeping the data synchronized between the two updates.
Django:Djangois an open source Web application framework, written by Python. The MVC Software Design pattern is used, i.e. model M, view V and Controller C.
ASP.net:ASP.NET is a free, highly compatible Web application framework that provides the solutions you need to standardize your Web application build.
Laravel: A free, open source PHP Web application framework that can be used to create Web applications based on the MVC pattern.
Zend Framework 2: A Web application framework that is based on PHP to create Web applications and server-side applications.
Phalcon:PhalconIt is an open source, full-featured Stack, a PHP 5 framework written with C extension and optimized for high performance.
Symfony:Symfonyis an object-oriented PHP5 framework based on the MVC pattern.SymfonyAllows separation of transaction control, service logic, and presentation layers in a single Web application.
Cakephp:CakePHPis a rapid development framework that employs well-known design patterns such as ActiveRecord, association Data Mapping, Front Controller, and MVC. The main goal is to provide a variety of layers of PHP developers to quickly develop a robust web application without losing flexibility.
Flask:Flaskis a lightweight WEB application framework written using Python. Its WSGI Toolbox uses Werkzeug, and the template engine uses JINJA2
Codeigniter:codeigniter is a simple and fast PHP MVC framework. It provides the team with enough free support to allow developers to work more quickly.
The Task batch processing tool automates your workflow. For example, you can create a task that uses a tool written in the JavaScript language to automate the process. Then pack it up, which will greatly improve your development efficiency. Package Manager it keeps track of all installed software, automates installation and removal of applications, and ensures that all software remains updated for the latest enhancements and bug fixes.
Grunt:Grunt is a project building tool based on node. js. It can automatically run the tasks you set.
Gulp:Gulp. JS is a built-in automated build tool based on node. js that developers can use to automate common tasks during the project development process.
NPM:NPM (Node Package Manager), commonly referred to as Node Pack manager. As the name implies, its main function is to manage node packages, including: Install, uninstall, update, view, search, publish and so on.
Bower:bower is a client-side technology Package Manager that can be used to search, install, and uninstall network resources such as JavaScript, HTML, and CSS.
All Web development requires the support of a programming language.Programming Languages(programming language), which is the formal language used to define computer programs. It is a standardized communication technique used to give instructions to a computer. A computer language allows programmers to accurately define the data that a computer needs to use and precisely define what actions should be taken in different situations. Of course, web development is not just a language to develop.
php:php (foreign name: Php:hypertext Preprocessor, Chinese name: "Hypertext Preprocessor") is a common open source scripting language. Grammar absorbs the features of C, Java, and Perl, facilitates learning and is widely used, and is mainly applicable to the field of web development
NodeJS:Node.JSis a JavaScript runtime environment based on the Chrome V8 engine.Node.JSA model of event-driven, non-blocking I/O is used to make it lightweight and efficient.
Javascript:javascript a literal translation scripting language, which is a dynamic type, a weak type, a prototype-based language, and a built-in support type. Its interpreter is known as the JavaScript engine, a part of the browser, widely used in the client's scripting language
HTML5: Markup Language, which is the latest version of HTML and XHTML.
Python:python is a high-level programming language for interpreting, object-oriented and dynamic data types.
Ruby:Ruby, a scripting language for simple and fast object-oriented programming (object-oriented programming)
Scala:Scalais a multi-paradigm programming language, a Java-like programming language designed to implement scalable languages and integrate various features of object-oriented programming and functional programming.
CSS3:CSSThat cascadestyle sheet(cascading StyleSheet). Use cascading when making Web pagesstyle sheetTechnology for more precise control over the layout, font, color, background, and other effects of the page. CSS3 is the latest version of CSS.
SQL: Structured queries language (structured query Language) abbreviationSQL,is a special purpose programming language, is a database query and programming language, for accessing data and querying, updating and Managing relational database system, also is the extension of database script file.
Golang:go is a compiled, parallel, and garbage-collected programming language developed by Google.
Rust:rust is a programming language developed by Mozilla that focuses on security, performance, and concurrency.
Elixir:elixir is a functional programming language built on the Erlang virtual machine. It is a dynamic language with flexible syntax and macro support that leverages the capabilities of Erlang to build concurrent, distributed, fault-tolerant applications and hot code upgrades.
A database is a warehouse that organizes, stores, and manages data in accordance with its data structure.
Mysql:mysql is an associative database management system that stores data in different tables rather than putting all the data in a large warehouse, which increases speed and increases flexibility.
MariaDB:MariaDB Database management system is a branch of MySQL, mainly by the open source community in the maintenance, with the GPL license MariaDB is fully compatible with MySQL, including the API and command line, Make it easy to be a replacement for MySQL.
MongoDB: mongodb Tutorial mongodb is a database based on distributed file storage. Written by the C + + language. Designed to provide scalable, high-performance data storage solutions for WEB applications.
Redis:Redis is an open source API that is written in ANSI C, supports the web, can be persisted in memory, key-value databases, and provides multiple languages.
POSTGRESQL:OSTGRESQL supports most SQL standards and offers many other modern features: complex queries, foreign keys, triggers, views, transactional integrity, MVCC.
CSS preprocessor defines a new language, the basic idea is, with a special programming language, for the CSS to add some programming features, CSS as a target to generate files, and then developers just use this language to encode work.
In layman's terms, "CSS preprocessing uses a specialized programming language, Web page style design, and then compiled into a normal CSS file for the project to use." CSS preprocessor adds some programming features to CSS, regardless of browser compatibility issues, such as the basic features in the programming language that you can use in CSS, such as variables, simple logic programs, functions, and so on, to make your CSS more concise, adaptable, and readable. It is easier to maintain code and many other benefits. For example: Sass,less,stylus.
Sass:sass is a kind of CSS development tool, which provides many convenient writing, greatly saves the designer's time, makes the CSS development, becomes simple and maintainable.
Less:lesscss is a dynamic style language, which is a kind of CSS preprocessing language, it uses CSS-like syntax, for CSS to give dynamic language features, such as variables, inheritance, operations, functions, and more convenient to write and maintain CSS.
Stylus:stylus is a pre-processing framework for CSS, produced in 2010 from the node. JS community, used primarily for CSS preprocessing support for node projects, so Stylus is a new language that can create robust, dynamic, expressive CSS.
If you are a preprocessor that has just started using CSS, you might want to start with a third-party compiler, as shown below.
Text editor/Code Editor
Whether you're taking notes, tapping code, or markdown a document, a good text editor is a must-have!
Atom:Atom 's more advanced text Code Editor-the next generation of programming developed by Github in the Code Editor, Text editor field, has a lot of "artifact" class products.
Sublime text:sublime Text is a code editor (Sublime text 2 and 3 are fee-free software, but can be tried indefinitely), and is also an advanced text editor for HTML and prose.
notepad++:notepad++ is a set of text editors under the Windows operating system (software Copyright license: GPL), with a complete Chinese culture interface and the ability to support multi-lingual writing.
Visual Studio Code: Microsoft launches a cross-platform source editor that runs on Mac OS X, Windows, and Linux for writing modern Web and cloud applications.
Textmate:textmate is a well-known text editor software under Mac, together with BBEdit, called Emacs and Vim on an apple machine.
Coda 2:os x Fast, concise and powerful editor "requires a fee".
Webstorm:jetbrains's JavaScript development tool. By the vast number of Chinese JS developers known as "web front-end development artifact", "the most powerful HTML5 editor", "the most intelligent JavaScript IDE" and so on.
Vim:vim is a well-known, powerful, highly customizable text editor that is similar to VI, and features are improved and added on the basis of VI.
Brackets:brackets is a free, open-source, cross-platform, Html/css/javascript front-end WEB integration development environment (IDE tool).
Emacs: A well-known integrated development environment and text editor. Emacs is recognized as one of the most popular code editors for professional programmers.
Markdown is a lightweight "markup language", which has many advantages and is now widely used by writers who are more and more writing enthusiasts. Markdown is very light and the learning cost is not high.
MWeb: Professional Markdown writing, note-taking, static blog generation Software "pay"
Markeditor:markeditor is the newest Markdown editor, in addition to the basic functions, but also includes such as table editing, charting, highlighting, formulas and so on rich features! Paid
Stackedit: An open source, free-to-use MarkDown editor, based on PageDown, using the MarkDown Library of the stack Overflow and other stack Exchange sites
Dillinger:dillinger is an online Markdown editor that supports changing themes, word count, cloud service storage, HTML, PDF, and more.
Mou:mac Free markdown Editor under OS X "the author seems to have gone."
Texts:windows and Mac OS x under Plain text editor.
Indicates that some paid markdown editors can't afford to buy a baby.
Icon icons
Almost every web developer, especially the front-end developer, needs icon icons to spice up the project.
Font Awesome:font Awesome provides you with scalable vector icons that you can change using all the features provided by CSS, including: size, color, shading, or any other supported effect.
Iconmonster: Free, high-quality, huge and resource-growing concise icon gallery.
Iconfinder:iconfinder offers beautiful icons, services to millions of designers, developers and other creative professionals.
Fontello: A web-font icon market with 200+ icons (increasing in number) is a great resource for designers and front-end developers.
Git is a free, open source distributed version control system for agile and efficient processing of any or small or large project. Git is an open source distributed version control system that can efficiently and rapidly handle project versions from very small to very large. Git is an open source version control software developed by Linus Torvalds to help manage the development of the Linux kernel.
Sourcetree:sourcetree is a free Git and Hg client under Windows and Mac OS X. Support for operations such as create, clone, commit, push, pull, and merge.
Gitkraken (Beta): A free, intuitive, fast, beautiful cross-platform git client.
Tower 2: A beautiful, efficient and powerful git management that makes Git version control easy.
GitHub Client: Projects that help you seamlessly connect to your GitHub and GitHub businesses.
Gogs:gogs (Go git service) is an easy-to-build, self-help git services. The goal of development Gogs is to create the simplest, fastest, and easiest way to build self-service Git services.
Gitlab:gitlab is an open source version management system using Ruby on Rails to implement a self-hosted Git project repository that can be accessed through a web interface for public or private projects.
In addition to the basic Git repositories, Coding:coding's code hosting features advanced features such as Protection branch, split-screen contrast, and code Review. and the integration of Pages services, quality management, demonstration platform and other development tools, improve research and development efficiency.
Depending on what operating system and Computer configuration you are running, it is sometimes possible to build a fast local development environment when testing. Self-build is very annoying, do not worry, there are many will apache,nginx,mysql and phpmyadmin packaging integration software. These software is very convenient for us to conduct local testing.
XAMPP:XAMPP (Apache+mysql+php+perl) is a powerful building-station integration package.
MAMP Pro:MAMP Pro for Mac is a combination software suite for the Mac OS platform that builds the local server environment, including the Macintosh, Apache, MySQL, and PHP four development environments.
Wampserver:wamp is the Windows Apache Mysql PHP integrated installation environment, which is the Apache, PHP and Mysql Server Software under window.
Vagrant:Vagrant is a ruby-based tool for creating and deploying a virtualized development environment. It uses Oracle's Open source VirtualBox virtualization system to create automated virtual environments using chef.
Laragon:laragon tool is Laravel one-click installation tools, but also integrates a set of Wamp tools, except Laravel installation, it is a good wamp tool, clean and simple, convenient and fast. Diff Checkers
WNMP:WNMP is a convenient, secure nginx+mariadb+php development Environment Integration Suite package under Windows.
Diff checkers can help you compare the differences between files and then merge the changes. Help us to see the differences between text more intuitively.
Diffchecker:diffchecker is an easy-to-use, online text-to-compare tool that highlights differentiated lines and characters. Diffchecker provides a file upload comparison feature, and you can choose to compare the storage time.
Beyond Compare:beyond Compare is a set of software introduced by Scooter software, the main purpose is to compare two folders or files, and the differences are color-coded.
There are, of course, a lot of free text editors, including plugins and extensions that we've mentioned above, to help developers easily compare files.
Code Sharing/Code testing
Front-end developers need to collaborate and share code within a company or group, so the tools are worth a try.
JS bin:js bin allows you to edit and test JavaScript and HTML code. You can also save the edited code locally, or send the URL address to someone else to help debug the code.
Jsfiddle:jsfiddle is an online shell editor that creates a custom environment with the popular JS framework to simplify the JS code. Can be used to test sample code.
codeshare: Share code with other developers in real time.
Dabblet:dabblet is an open source interactive testing tool for testing CSS and HTML. Dabblet supports real-time updates, anonymous backups, embedding sites, sharing with others, or storing to GitHub.
Every great development team needs a way to stay connected and collaborate to help increase productivity.
Slack:slack is a chat group + large-scale tool integration + file Integration + Unified search.
Trello:trello's goal is to provide a clean and clear team collaboration tool. But Mifeng here will show you if you use Trello to build your own time management system.
Glip:glip: The online team Office collaboration platform is a Web-based office collection similar to the slack website, with built-in mailboxes, network disks, instant messaging applications, collaborative services, and all the services and tools associated with web-based office integration.
Asana:asana is a team task management software that facilitates people to develop and track the completion of a team's project tasks
Jira:jira is a project and transaction tracking tool produced by Atlassian, and is widely used in the areas of defect tracking, customer service, demand collection, process approval, task tracking, project tracking, and agile management.
When we develop, occasional bursts of inspiration can add a lot to our projects or products. Of course, not only by self-inspiration, we also need to get inspiration from other people's works to ensure that our web design interface or products do not lag behind this era.
Codepen: A mecca for global web front-end developers! Can show individual ideas and set up a test case to solve the bug. Find out how your project is designed and inspired.
Dribble:dribbble is an artist, artist, designer and other creative works of the crowd, to provide online services for online users to view the completed works or the creation of the work of the Exchange site.
The speed of the site is a key factor in user experience. The website is fast and slow to decide whether a higher search engine rankings, higher conversion rates, lower bounce rates, and a better overall user experience are available. It is gratifying to note that many freeware software can be used to test the speed of the website and help us to find out the problem of slow loading, which is convenient for us to solve.
Google Pagespeed insights:pagespeed Insights is a google browser plugin that can analyze page speed bottlenecks and allow web designers to develop faster websites.
Google Chrome Devtools:chrome DevTools is recognized as a good front-end debugging tool, powerful, using a certain learning threshold,
Webpagetest:webpagetest is a Web application that takes a URL and a series of configuration parameters as input and runs performance tests on that URL.
Pingdom:pingdom Comprehensive website Monitoring Service website, can speed and ping track routing, free monitoring 1 sites, the shortest 1 minutes to monitor.
Gtmetrix: The main advantage is to provide rich and detailed measurement results, and suggest how to optimize each element of the page, the most important is based on the specific circumstances of the site, directly tell you the cause of the slow loading of the site where
When developers encounter problems during development, they can use search engines in addition to asking others. The importance of the community is obvious, and most developers share their experience in the development community and how to avoid unnecessary pits.
Domestic:
Google Developer community (GDG): Open · Share Innovation
Segmentfault: China's leading developer technology Community . For programming enthusiasts to provide a pure, high-quality technology exchange platform, with the developers to learn, communicate and grow. "Honestly, I don't think that's a good name to remember."
All-in-one community: China's largest all-stack developer Community , dedicated to creating a problem-solving, technical article sharing, full-stack staff start-up service platform, make development easier, make entrepreneurship easier.
Foreign:
Stack Overflow:stack Overflow is a program-related IT technology quiz site. Users can submit questions, browse questions, index related content, and use simple HTML when creating a homepage.
Front-End Front: In front-end Front, front-end developers can ask questions, share interesting links, and showcase their project creations.
Hashnode:hashnode is a developer who discusses technical issues, shares solutions, and shares resources with developers around the world.
Refind: A community of developers, hackers, designers who collect and share the best resources.
Google + Web developers group:web developers, web designers and web developers.
Google + Web developers Group:java, PHP, Ruby, JavaScript and Python resources.
Facebook WordPress Front-End developers group:wordpress front-end developers share the community, can ask questions, share developer projects, and discuss the future of WP development trends.
LinkedIn Web Design and development professionals Group: share Web Development resources with professional web designers, web developers
LinkedIn Web site Development Group: Web site design and development.
LinkedIn PHP Developer group:php, Mysql, Drupal, Joomla, Zend, Cake, MVC.
LinkedIn WordPress developers group:wordpress Development. Use WP to create a CMS and CMF.
Webdeveloper.com: Help Web developers and designers learn to develop Web sites using Html,java and JavaScript.
SitePoint forums:web Developer Forum.
/r/perfmatters: Discussion about Web performance
/r/webdev: News about Web development and developers
Read the development and design of technical dry, timely know what is updated in the technology circle, keep the information flow fresh, help us better development!
Domestic:
Nuggets: Nuggets is the highest quality technology sharing community in China, inviting rare earth users as co-editor to share high-quality technical dry goods, from front-end to back-end development, from design to product, so that every nuggets user can tap into valuable dry foods.
Developer Headlines: A programmer-centric, learning-and-sharing developer community. You can read headlines, share technical articles, publish open source projects, subscribe to technical geeks to create learning topics and focus on programming cows.
Push cool: Technology-driven, aggregated mining as the core, to create personalized recommendations and subscriptions, give you a one-stop reading. It also brings together high-quality public lessons and offline activities to make information knowledge more accessible.
Foreign:
Wdrl.info: Carefully selected Web development related resources, weekly integration report.
Webopsweekly.com: Weekly coverage of articles on network operations, application deployment, website performance, and tool sharing classes.
Web Tools Weekly: Focus on front-end development and web design tools sharing. Each issue has a short hint or tutorial, and a variety of applications, scripts, plugins, and other useful resources that are shared every week.
Freshbrewed.co: A weekly reading summary of development and design classes for front-end developers and designers.
Smashingmagazine.com:Smashing Magazine is an online newspaper dedicated to individual front-end developers and designers who regularly update useful resources every Tuesday.
Front-End Dev Weekly: Weekly news for front-end developers, with tool resources and inspiration.
Friday Front-End: Mail subscription, daily email to front-end developers about development resources.
/dev Tips: Collect questions and suggestions from developers, present them in GIF, and send weekly email notifications.
Of course, you can also focus on rare earth area, to find the article you need, by the way solve your problem.
Note
As you can see, there are hundreds of web development tools and resources to help streamline your development workflow and help develop more efficiently. We can not list all the tools or resources, if there are important tools or resources are missing, it will be troublesome small partners in the comments below to supplement, thank you!
Original translation: https://www.keycdn.com/blog/web-development-tools/
100+ full web development tools and resources
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
