0
100
2018-12-23

Инструменты и веб-ресурсы для веб-разработки - 100+

Ознакомьтесь с этим списком из более чем 100 потрясающих инструментов и ресурсов для веб-разработки, которые помогут вам быть более продуктивным и стать лучшим разработчиком.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Лучшее и худшее в веб-разработке - это то, что все постоянно меняется. Хотя это увлекательно, это также означает, что веб-разработчики должны всегда активно изучать новые методы или языки программирования, адаптироваться к изменениям и быть готовыми принять новые вызовы. А это значит решать такие задачи, как адаптация существующих сред для соответствия бизнес-требованиям, тестирование веб-сайта для выявления технических проблем или оптимизация и масштабирование сайта для лучшей работы с внутренней инфраструктурой. Я решил составить полный список инструментов и ресурсов для веб-разработки, которые помогут вам быть более продуктивным.

Надеюсь, вы найдете новый инструмент или ресурс, который поможет вам в вашем процессе разработки .

Примечание. Приведенные ниже инструменты и ресурсы перечислены в произвольном порядке.

Библиотеки JavaScript

библиотеки JavaScript

Javascript - один из самых популярных языков программирования в сети. Библиотека Javascript это предварительно написанный скрипт на Javascript , что позволяет более легкий доступ на всех этапах разработки вашего веб - сайта или приложения.

  • jQuery : быстрая, маленькая и многофункциональная библиотека JavaScript.
  • BackBoneJS : Дайте вашему JS-приложению коннект с моделями, представлениями, коллекциями и событиями.
  • D3.js : библиотека JavaScript для управления документами на основе данных.
  • React : библиотека Javascript Facebook, разработанная для создания пользовательских интерфейсов.
  • Пользовательский интерфейс jQuery . Кураторский набор взаимодействий, эффектов, виджетов и тем пользовательского интерфейса.
  • jQuery Mobile : система пользовательского интерфейса на основе HTML5, предназначенная для создания адаптивных веб-сайтов.
  • Underscore.js : помощники по функциональному программированию без расширения каких-либо встроенных объектов.
  • Moment.js : поможет анализировать , проверять, манипулировать и отображать даты в JavaScript.
  • Lodash : современная библиотека утилит, обеспечивающая модульность, производительность и дополнительные возможности.
  • Vue.js - среда JavaScript с открытым исходным кодом, используемая для создания пользовательских интерфейсов.

Инструменты веб-разработки - интерфейсные среды (Front end Frameworks)

инструменты веб-разработки - интерфейсные среды

Эти штуки предназначены для фронтенд разработки и обычно состоят из пакета, состоящего из других файлов и папок, таких как HTML, CSS, JavasScript и т. Д. Существует также множество автономных фреймворков. Я большой поклонник Boostrap, и на нем построен данный веб-сайт. Надежная структура таких пакетов может быть важным инструментом для разработчиков переднего плана.

  • Bootstrap : HTML, CSS и JS-фреймворк для разработки адаптивных мобильных проектов в Интернете.
  • Foundation : семейство адаптивных интерфейсных сред, которые позволяют легко создавать красивые адаптивные веб-сайты, приложения и электронные письма, которые выглядят потрясающе на любом устройстве.
  • Semantic UI (или "по нашему" - "Семантический пользовательский интерфейс") : среда разработки, которая помогает создавать красивые адаптивные макеты с использованием удобного HTML.
  • uikit : легкий и модульный интерфейс для разработки быстрых и мощных веб-интерфейсов.

Фреймворки веб-приложений

рамки веб-приложений

Каркас веб-приложений - это программный каркас, предназначенный для помощи и снятия головной боли при разработке веб-приложений и сервисов..

  • Ruby : Ruby on Rails - это инфраструктура веб-приложений, которая включает в себя все необходимое для создания веб-приложений на основе базы данных с шаблоном MVC.
  • AngularJS : позволяет расширить словарный запас HTML для вашего веб-приложения. AngularJS - это фреймворк, хотя он гораздо более легкий и иногда называется библиотекой.
  • Ember.js : платформа для создания амбициозных веб-приложений.
  • Express : быстрый и минималистичный веб-фреймворк для Node.js.
  • Meteor : полнофункциональная платформа приложений JavaScript, которая собирает все части, необходимые для создания современных веб-приложений и мобильных приложений, с единой базой кода JavaScript.
  • Django : веб-инфраструктура Python высокого уровня, которая способствует быстрой разработке и чистому, прагматичному дизайну.
  • ASP.net : бесплатная полностью поддерживаемая платформа веб-приложений, которая помогает создавать веб-решения на основе самых современных веб стандартов.
  • Laravel : бесплатный фреймворк для веб-приложений с открытым исходным кодом для создания веб-приложений по шаблону MVC.
  • Zend Framework 2 : платформа с открытым исходным кодом для разработки веб-приложений и сервисов с использованием PHP.
  • Phalcon : полнофункциональный PHP-фреймворк, поставляемый как C-расширение.
  • Symfony : набор повторно используемых PHP-компонентов и каркас веб-приложения.
  • CakePHP : популярная среда PHP, которая делает создание веб-приложений проще, быстрее и требует меньше кода.
  • Flask : микрофрейм для Python, основанный на Werkzeug и Jinja 2.
  • CodeIgniter : мощный и легкий PHP-фреймворк, созданный для разработчиков, которым необходим простой и элегантный инструментарий для создания полнофункциональных веб-приложений.

Сборщики систем задач / Менеджеры пакетов

сборщики систем задач

Исполнители задач - они необходимы прежде всего для автоматизации вашего рабочего процесса. Например, вы можете создать задачу и автоматизировать минимизацию JavaScript. Затем создайте и объедините задачи, чтобы ускорить время разработки. Менеджеры пакетов следят за всеми пакетами, которые вы используете, и за тем, чтобы они были в нужной вам конкретной версии, и это далеко не все что они умеют.

  • Grunt : JavaScript Runner все для автоматизации.
  • Gulp : делает вещи простыми и делает сложные задачи управляемыми, одновременно автоматизируя и улучшая ваш рабочий процесс.
  • npm : менеджер пакетов для JavaScript.
  • Bower : менеджер веб-пакетов. Управляйте компонентами, которые содержат HTML, CSS, JavaScript, шрифты или даже файлы изображений.
  • Webpack : модуль для современных приложений JavaScript.

Языки / Платформы

языки программирования

За всеми инструментами веб-разработки стоит язык. Язык программирования является формальным языком , предназначенным для построения связи с компьютером что бы программист мог удобно и максимально быстро создавать программы . И да, я понимаю, что некоторые из них не всегда можно назвать языком.

  • PHP : популярный язык сценариев общего назначения, который особенно подходит для веб-разработки.
  • NodeJS : управляемая событиями среда ввода-вывода на стороне сервера JavaScript, основанная на V8.
  • Javascript : язык программирования HTML и веб.
  • HTML5 : язык разметки, последняя версия HTML и XHTML.
  • Python : язык программирования, который позволяет работать быстрее и более эффективно интегрировать системы.
  • Ruby : динамический язык программирования с открытым исходным кодом с упором на простоту и производительность.
  • Scala : Scala - это чистокровный объектно-ориентированный язык, позволяющий постепенно и легко перейти к более функциональному стилю.
  • CSS3 : последняя версия каскадных таблиц стилей, используемых при фронтальной разработке сайтов и приложений.
  • SQL : обозначает язык структурированных запросов, используемый с реляционными базами данных.
  • Golang : язык программирования с открытым исходным кодом, позволяющий легко создавать простые, надежные и эффективные программы.
  • Rust : Язык системного программирования, который работает невероятно быстро, предотвращает ошибки и гарантирует безопасность потоков.
  • Elixir : динамический, функциональный язык, предназначенный для создания масштабируемых и поддерживаемых приложений.
  • TypeScript : язык программирования с открытым исходным кодом, представляющий собой расширенный набор JavaScript, который компилируется в простой JavaScript.

Базы данных

базы данных

База данных представляет собой набор информации.

  • MySQL : одна из самых популярных в мире баз данных с открытым исходным кодом.
  • MariaDB : сделано оригинальными разработчиками MySQL. MariaDB также становится очень популярным в качестве сервера базы данных с открытым исходным кодом.
  • MongoDB : База данных следующего поколения, которая позволяет создавать приложения как никогда прежде.
  • Redis : хранилище структуры данных в памяти с открытым исходным кодом, используемое в качестве базы данных, кэша и посредника сообщений.
  • PostgreSQL : мощная система объектно-реляционных баз данных с открытым исходным кодом.

CSS препроцессоры

инструменты веб-разработки - препроцессоры CSS

CSS препроцессор в основном язык сценариев , который расширяет CSS , а затем компилирует его в обычную CSS.

  • Sass : очень зрелое, стабильное и мощное расширение CSS профессионального уровня.
  • Less : позиционируется как расширение CSS, которое также обратно совместимо с CSS. Это делает изучение Less легким и, в случае сомнений, позволяет вам вернуться к ванильному CSS.
  • Stylus : новый язык, обеспечивающий эффективный, динамичный и выразительный способ создания CSS. Поддержка как синтаксиса с отступом, так и обычного стиля CSS.

Текстовые редакторы / Редакторы кода

текстовые редакторы кодовые редакторы

Если вы делаете заметки, пишете код или пишете статьи для боога, хороший текстовый редактор - это часть нашей повседневной жизни!

  • Atom : текстовый редактор, современный, доступный, но с "тормозами" до глубины души. Один из моих любимых!
  • Sublime Text : сложный текстовый редактор для кода, разметки и прозы с отличной производительностью.
  • Notepad ++ : бесплатный редактор исходного кода, который поддерживает несколько языков программирования, работающих в среде MS Windows.
  • Visual Studio Code : редактирование кода переопределено и оптимизировано для построения и отладки современных веб-приложений и облачных приложений.
  • TextMate : редактор кода и разметки для OS X.
  • Coda 2 : быстрый, чистый и мощный текстовый редактор для OS X.
  • WebStorm : легкая, но мощная IDE, отлично оснащенная для комплексной разработки на стороне клиента и на стороне сервера с Node.js.
  • Vim : текстовый редактор с широкими возможностями настройки, созданный для эффективного редактирования текста.
  • Brackets : легкий и мощный современный текстовый редактор; написан на JavaScript, HTML и CSS.
  • Emacs : расширяемый, настраиваемый текстовый редактор со встроенными функциями, помогающими быстро изменять текст и код.
  • Dreamweaver : однако это не обычный редактор кода. Dreamweaver можно использовать для написания кода и создания веб-сайтов через визуальный интерфейс.
  • SpaceMacs : дизайн текстового редактора для работы в режимах редактора Emacs и Vim.

Редакторы Markdown

редакторы уценки

Markdown - это язык разметки в виде простого текста с использованием простого синтаксиса, который затем можно конвертировать в HTML на лету.

  • StackEdit : бесплатный онлайн-редактор.
  • Dillinger : облачный HTML5-редактор Markdown, наполненный модными плюшками.
  • Mou : редактор Markdown для разработчиков на Mac OS X.
  • Texts : богатый редактор для простого текста. Windows и Mac OS X.

Иконки

иконки

Почти каждому веб-разработчику, особенно разработчикам внешнего интерфейса, в тот или иной момент потребуются значки для их проекта. Ниже приведены отличные ресурсы для бесплатных и платных высококачественных иконок.

  • Font Awesome : масштабируемые векторные иконки, которые можно мгновенно настраивать - размер, цвет, тень и все, что можно сделать с помощью CSS.
  • IconMonster : бесплатный, высококачественный, чудовищно большой и постоянно растущий источник простых иконок. Один из моих любимых!
  • Icons8 : обширный список настраиваемых иконок, созданных одной командой дизайнеров.
  • IconFinder : Iconfinder предоставляет красивые иконки для миллионов дизайнеров и разработчиков.
  • Fontello : инструмент для создания пользовательских шрифтов с иконками.
  • Noun Project : более миллиона курируемых иконок. Доступны как бесплатные, так и платные версии для большей гибкости настройки.

Git Клиенты / Услуги

Git Клиенты / Услуги

Git - это система управления исходным кодом для программного обеспечения и веб-разработки, известная распределенным контролем версий. При работе с командами использование git-клиента для передачи изменений кода из dev в рабочую среду - это способ укротить хаос.

  • SourceTree : бесплатный клиент Git & Mercurial для Windows или Mac. Atlassian также создает довольно классный командный Git-клиент под названием Bitbucket.
  • GitKraken (Beta): бесплатный, интуитивно понятный, быстрый и красивый кроссплатформенный Git-клиент.
  • Tower 2 : Контроль версий с помощью Git - это легко. В красивом, эффективном и мощном приложении.
  • Клиент GitHub : удобный способ внести свой вклад в проекты на GitHub и GitHub Enterprise.
  • Gogs : безболезненный сервис Git на основе языка Go.
  • GitLab : размещайте свои частные и публичные программные проекты бесплатно.

Веб-серверы

веб-серверы

Веб-сервер, который вы в конечном итоге используете, обычно зависит от комбинации личных предпочтений, функциональности или ранее существовавшей инфраструктуры. Nginx и Apache являются двумя наиболее широко используемыми веб-серверами, однако есть и другие варианты.

  • Nginx : открытый и высокопроизводительный веб-сервер. Хорошо обрабатывает статическое содержимое и имеет небольшой вес.
  • Apache : в настоящее время работает почти на 50% всех сайтов. Вокруг него большое сообщество и большой выбор модулей.
  • IIS : расширяемый веб-сервер, созданный Microsoft. Предлагает отличную безопасность и корпоративную поддержку, поэтому не является открытым исходным кодом.
  • Caddy : относительно новый веб-сервер. Это веб-сервер с открытым исходным кодом, HTTP/2 с автоматическим HTTPS.

API Инструменты

API инструменты

Веб-разработчики обычно имеют дело с API на ежедневной основе. Они важны в современной среде веб-разработки, однако иногда с ними может быть трудно иметь дело с точки зрения мониторинга, создания или объединения. К счастью, существует множество инструментов, позволяющих значительно повысить эффективность работы с API.

  • Runscope : решение для тестирования, мониторинга и отладки API.
  • Zapier : подключите API различных приложений и сервисов, чтобы автоматизировать рабочие процессы и включить автоматизацию.
  • Postman : Полная среда разработки API. Все от проектирования, тестирования, мониторинга и публикации.
  • SoapUI : расширенный инструмент тестирования REST и SOAP. Возможность выполнять функциональное тестирование, тестирование безопасности, тестирование производительности и т. Д.

Локальныйе сервера - Dev среда разработки

локальная среда разработки

В зависимости от того, какую ОС вы используете или компьютер, к которому у вас есть доступ, может потребоваться запустить быструю локальную среду разработки . Существует множество бесплатных утилит, которые объединяют Apache, mySQL, phpmyAdmin и т. Д. Вместе. Это может быть быстрый способ проверить что-то на вашей локальной машине. У многих из них даже есть портативные версии.

  • XAMPP : Полностью бесплатный, простой в установке дистрибутив Apache, содержащий MariaDB, PHP и Perl.
  • MAMP : локальная серверная среда в считанные секунды на OS X или Windows.
  • WampServer : среда веб-разработки Windows. Которое позволяет создавать веб-приложения с Apache2, PHP и базой данных MySQL.
  • Vagrant : создание и настройка облегченных, воспроизводимых и переносимых сред разработки.
  • Laragon : отличный быстрый и простой способ создания изолированной среды разработки для Windows. Включает Mysql, PHP Memcached, Redis, Apache и отлично подходит для работы с вашими проектами Laravel.

Менджеры изменений и различий

шашки различий

Проверка различий может помочь вам сравнить различия между файлами, а затем объединить изменения. Многое из этого можно сделать из CLI, но иногда полезно увидеть более наглядное представление.

  • Diffchecker : онлайн-инструмент для сравнения различий между двумя текстовыми файлами.
  • Beyond Compare : программа для сравнения файлов и папок с использованием простых, мощных команд, которые фокусируются на различиях, которые вас интересуют, и игнорируют те, которые вам не нужны.

Совместное использование кода

Совместное использование кода

Всегда есть время, когда вы общаетесь в Skype или Google с другим разработчиком и хотите, чтобы он или она быстро просмотрели ваш код. Существуют отличные командные инструменты для обмена кодом, такие как:

  • JS Bin : инструмент для экспериментов с веб-языками. В частности HTML, CSS и JavaScript, Markdown, Jade и Sass.
  • JSfiddle : пользовательская среда для тестирования кода JavaScript, HTML и CSS прямо в вашем браузере.
  • CodeShare : Поделитесь кодом в режиме реального времени с другими разработчиками.
  • Dabblet : интерактивная площадка для быстрого тестирования фрагментов CSS и HTML-кода.

Инструменты для совместной работы

инструменты для совместной работы разработчиков

Каждой замечательной команде разработчиков нужен способ оставаться на связи, сотрудничать и быть продуктивным. Многие команды работают удаленно. Инструменты, подобные приведенным ниже, могут помочь сотрудникам оптимизировать рабочий процесс разработки.

  • Slack : приложение для обмена сообщениями для команд, которое призвано сделать вашу рабочую жизнь проще, приятнее и продуктивнее.
  • Trello : гибкий и наглядный способ организовать что угодно с кем угодно.
  • Glip : обмен сообщениями в режиме реального времени с интегрированным управлением задачами, видеоконференциями, общими календарями и многим другим.
  • Asana : инструмент для совместной работы команд для отслеживания их работы и результатов.
  • Jira : Создан для каждого члена вашей команды разработчиков программного обеспечения для планирования, отслеживания и выпуска отличного программного обеспечения или веб-приложений.

Вдохновение

вдохновение разработчиков

Нам всем нужно вдохновение в тот или иной момент. Особенно для фронтенд разработчиков время от времени может быть полезно проверить, что делают другие люди. Это может быть отличным источником вдохновения, новых идей и уверенности в том, что ваше веб-приложение или сайт не отстает от времени.

  • CodePen : Покажите свое последнее творение и получите обратную связь. Создайте контрольный пример для надоедливой ошибки. Найдите примеры шаблонов дизайна и вдохновения для ваших проектов.
  • Dribble : сообщество дизайнеров, которые делятся скриншотами своих работ, процессов и проектов.
  • Behance : еще один ресурс, управляемый сообществом, где пользователи могут демонстрировать и находить творческие работы.

Инструменты тестирования скорости сайта

инструменты тестирования скорости сайта

Скорость сайта может быть решающим фактором для его успеха. Более быстрая загрузка веб-сайтов может выиграть благодаря более высокому рейтингу SEO, более высоким показателям конверсии, более низким показателям отказов и лучшему общему опыту пользователей и вовлеченности Важно использовать множество бесплатных инструментов для тестирования скорости сайта .

  • Website Speed Test : тест скорости страницы, разработанный KeyCDN, который включает разбивку водопада и предварительный просмотр сайта.
  • Google PageSpeed Insights : PageSpeed Insights анализирует содержание веб-страницы, а затем генерирует предложения по ее ускорению.
  • Google Chrome DevTools : набор инструментов веб-разработки и отладки, встроенных в Google Chrome.
  • Dotcom-Tools : проверьте скорость вашего сайта в реальных браузерах из 25 мест по всему миру.
  • WebPageTest : Запустите бесплатный тест скорости веб-сайта из разных мест по всему миру, используя реальные браузеры (IE и Chrome) и с реальной скоростью соединения с потребителем.
  • Pingdom : протестируйте время загрузки этой страницы, проанализируйте ее и найдите узкие места.
  • GTmetrix : дает вам представление о том, насколько хорошо загружается ваш сайт, и дает практические рекомендации по его оптимизации.

Сообщества веб-разработки

сообщества веб-разработчиков

У всех веб разработчиков есть проблемы и что делают веб разработчики? Верно, они идут в Google, чтобы найти быстрый ответ. Интернет предлагает столько контента прямо у нас под рукой, что позволяет легко диагностировать и устранять проблемы, когда они возникают. Проверьте несколько хороших сообществ веб-разработки ниже.

  • Stack Overflow : сообщество из 4,7 миллионов программистов, как и вы, помогающих друг другу.
  • Front-end Front : место, где разработчики front-end могут задавать вопросы, делиться интересными ссылками и показывать свою работу остальному сообществу.
  • Hashnode : глобальное сообщество разработчиков программного обеспечения, которые могут общаться и изучать программирование друг у друга.
  • Refind : сообщество основателей, хакеров и дизайнеров, которые собирают и делятся лучшими ссылками в Интернете.
  • Группа веб-разработчиков Google+ : веб-разработчики, веб-дизайнеры и веб-программисты.
  • Группа веб-разработчиков Google+ : ресурсы по Java, PHP, Ruby, JavaScript и Python
  • Facebook WordPress Front-end Developers Group : WordPress Front End Developers - это группа для разработчиков, которые задают вопросы, делятся своей работой, обсуждают новые тенденции и сотрудничают.
  • Группа специалистов по веб-дизайну и разработке LinkedIn : сетевой ресурс и ресурс обмена информацией для профессиональных веб-дизайнеров, веб-разработчиков и веб-мастеров.
  • Группа разработки веб-сайтов LinkedIn : Дизайн и программирование веб-сайтов .
  • Группа разработчиков LinkedIn PHP : PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
  • LinkedIn WordPress для разработчиков : WordPress Codex. Использование WP в качестве CMS и CMF.
  • Webdeveloper.com : здесь веб-разработчики и дизайнеры учатся создавать веб-сайты, программируют на HTML, Java и JavaScript.
  • Форумы Sitepoint : обсуждение веб-разработки.
  • /r/perfmatters : Подраздел № 1 о веб-производительности и веб-разработке.
  • /r/webdev : что нового для веб-разработчиков.

Информационные бюллетени веб-разработки

новости веб-разработки

  • wdrl.info : тщательно подобранный список ресурсов, связанных с веб-разработкой. Куратор и публикуется обычно каждую неделю .
  • webopsweekly.com : еженедельный информационный бюллетень для веб-разработчиков, посвященный веб-операциям, инфраструктуре, развертыванию приложений, производительности и инструментам - от браузера до металла.
  • еженедельные веб-инструменты : информационный бюллетень по разработке и веб-дизайну с акцентом на инструменты. Каждый выпуск содержит краткий совет или учебное пособие, а затем еженедельный обзор различных приложений, скриптов, плагинов и других ресурсов.
  • https://freshbrewed.co/ : еженедельный дайджест чтения для разработчиков интерфейса и UX-дизайнеров.
  • smashingmagazine.com : Smashing Magazine - это онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Полезные советы и ценные ресурсы рассылаются каждый второй вторник .
  • front-end dev еженедельно : новости, инструменты и вдохновение для передовых разработчиков подбираются каждую неделю .
  • friday front-end : ссылки на сайты, посвященные разработке, публикуются ежедневно в Твиттере, по электронной почте еженедельно .
  • /dev tips : каждую неделю получайте в свой почтовый ящик совет разработчика в виде GIF-файла

Сервисы для транслитерации

новости веб-разработки

Транслитерация очень даже полезный инструмент, который часто облегает работу.

  • УкрЛіт.org : Онлайн транслитерация с украинского на английский согласно Постановлению Кабинета Министров Украины от 27 января 2010 N 55 «Об упорядочении транслитерации украинского языка"

Резюме

Как вы можете видеть, существуют сотни инструментов и ресурсов для веб-разработки, которые помогут оптимизировать рабочий процесс разработки и, надеюсь, помогут вам повысить продуктивность. Опять же, я не могу перечислить каждый инструмент или ресурс, но если я забыл что-то важное, не стесняйтесь сообщить мне об этом ниже в комментариях.




Статья была переведена для блога TechBlog.SDStudio.top
Источник: keycdn.com