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

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

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

Библиотеки 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.

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-клиента для передачи изменений кода из 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.

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

Источник записи: