Лучшее и худшее в веб-разработке – это то, что все постоянно меняется. Хотя это увлекательно, это также означает, что веб-разработчики должны всегда активно изучать новые методы или языки программирования, адаптироваться к изменениям и быть готовыми принять новые вызовы. А это значит решать такие задачи, как адаптация существующих сред для соответствия бизнес-требованиям, тестирование веб-сайта для выявления технических проблем или оптимизация и масштабирование сайта для лучшей работы с внутренней инфраструктурой. Я решил составить полный список инструментов и ресурсов для веб-разработки, которые помогут вам быть более продуктивным.
Надеюсь, вы найдете новый инструмент или ресурс, который поможет вам в вашем процессе разработки .
Примечание. Приведенные ниже инструменты и ресурсы перечислены в произвольном порядке.
Библиотеки 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-файла.
Как вы можете видеть, существуют сотни инструментов и ресурсов для веб-разработки, которые помогут оптимизировать рабочий процесс разработки и, надеюсь, помогут вам повысить продуктивность. Опять же, я не могу перечислить каждый инструмент или ресурс, но если я забыл что-то важное, не стесняйтесь сообщить мне об этом ниже в комментариях.
Источник: keycdn.com