60 удивительных инструментов веб-разработки, которые будут использоваться в 2022 году

60 удивительных инструментов веб-разработки, которые будут использоваться в 2022 году

Есть что-то романтическое и волнующее в том, чтобы открыть TextEdit или Notepad и набрать «», чтобы начать новый проект. Именно так многие из нас начинали свое увлечение веб-кодированием. В 2022 году инструменты веб-разработки делают больше, чем просто запись нашего текста — они помогают нам создавать проекты и придают импульс всему процессу. Кроме того, необходимо учитывать гораздо больше элементов, чем просто HTML и CSS. Например, этап планирования является жизненно важным. Вам необходимо продумать схему построения, выбор дизайна и совместные рабочие процессы. Затем необходимо выбрать идеальный фреймворк JavaScript, использовать ли интегрированную среду разработки (IDE) и многое другое. В этой статье мы рассмотрим 60 инструментов для веб-разработки, которые вы захотите использовать в 2022 году. Но прежде чем перейти к этому, давайте поговорим о том, что такое, по нашему мнению, инструмент веб-разработки.

Оглавление статьи:

Что мы считаем инструментом веб-разработки

На первый взгляд, классификация инструментов для веб-разработки кажется простой. Однако, даже погружаясь в глубину, возникает несколько соображений, которые размывают границы. Например, подумайте, считается ли сервис потокового видео инструментом разработки. С виду, наверное, нет. Однако если вы используете его для записи своего экрана для конкретного приложения для разработки, он внезапно превращается в уникальный инструмент для совместной работы. На наш взгляд, инструмент веб-разработки — это то, что помогает вам целенаправленно достичь целей вашего проекта. Хотя сюда не входят отдельные языки программирования, существуют подмножества, надмножества и фреймворки, такие как TypeScript, которые пересекают эту границу. Если вы хотите зарабатывать большие деньги, следить за этими аспектами жизненно важно. Для другого примера рассмотрим Git. Можно утверждать, что эта система контроля версий (VCS) охватывает много областей. Существует специальный язык, используемый для выполнения команд, а основная функциональность предлагает многое в плане веб-разработки. Однако вы также можете использовать ее в качестве инструмента обучения, в частности, изучая журналы отслеживания проблем и коммиты. В целом, инструментом веб-разработки может быть практически все, что обеспечивает эффективную и продуктивную работу вашего проекта. Вы можете заметить это разнообразие в списке инструментов.

Как инструменты веб-разработки могут упорядочить ваш рабочий процесс

Перед следующей парой слов мы сделаем предупреждение: «критическое время». Да, эта страшная фраза кричит о том, что инструменты веб-разработки должны спасти положение. Статистика показывает, что все больше проектов используют crunch в качестве стандарта, а многие отрасли разработки используют его и сегодня. Независимо от того, использует ли ваша компания crunch и overtime или нуждается в них, инструменты веб-разработки все равно могут помочь. Эти инструменты выполняют тяжелую работу и автоматизируют рутинную работу, которая съедает ваш день. Таким образом, они органично повышают вашу производительность. Однако они также могут стать бонусом, если вы работаете в рамках гибких проектов, таких как Scrum. Например, подумайте, как такой инструмент, как JSFiddle, может помочь вам поделиться фрагментами с другими командами во время завершения одного спринта, чтобы подготовиться к следующему. Более того, хотя ежедневные совещания никуда не денутся, сервер Discord или канал Slack могут предложить лучший способ сосредоточиться и согласовать предстоящий набор задач вдали от давления целей текущего спринта. В целом, инструменты веб-разработки в равной степени относятся как к планированию, так и к выполнению.

Как выбрать правильный стек разработки для вашего проекта

Мы, вероятно, обращаемся к новообращенным, но звездный инструмент веб-разработки стоит как золотой MacBook M1. Поэтому правильное сочетание инструментов для вашего конкретного проекта имеет решающее значение для создания прочного фундамента для работы. Если вы раньше не задумывались об этом, начальный этап планирования окажется бесценным. Потратив некоторое время на то, чтобы определиться с инструментами, которые вы будете использовать, вы задержите этап кодирования проекта. Однако впоследствии вы вернете это время, поскольку потенциальных проблем, связанных с программным обеспечением, будет меньше. Вы также увидите более стабильный уровень результатов (поскольку все будут работать над одним и тем же проектом).

Соображения по выбору стека разработки

Выбор правильного стека для проекта сводится к следующему:

  • Сложность: Подумайте, насколько сложным должен быть ваш результат, поскольку это определит сложность стека.
  • Масштабируемость: Если ваш проект предназначен для местного предприятия, то для него потребуются иные решения, чем для глобального предприятия. Поэтому для достижения поставленных целей вам потребуется более масштабируемый стек.
  • Безопасность: Почти само собой разумеется, что любой выбор не должен ставить под угрозу безопасность пользователей и сайта.
  • Стоимость: Конечно, никто не любит перерасход средств, и если бюджет ограничен, это будет иметь большее значение, чем чистая чековая книжка.

Есть две области, на которые можно разделить технологии:

  • Серверная сторона: Здесь вам нужно обратить внимание на технологии бэкенда, которые вы используете. Например, выбор хостинга и веб-сервера, хранение ключевых значений и SQL, используемые приложения и фреймворки автоматизации, и, конечно, язык программирования.
  • Клиентская сторона: Выбор инструментов для фронтенда, пожалуй, будет более простым, особенно когда речь идет об используемых языках. Хотя HTML, CSS и JavaScript будут присутствовать, выбор JavaScript-фреймворка (и фреймворка автоматизации) потребует некоторого рассмотрения.

Когда речь заходит о некоторых реальных стеках разработки, можно заметить, что многие крупные сайты используют некоторую комбинацию JavaScript и React.js, а также Nginx. Также в стеках разработчиков можно увидеть Memcached, Redis и Ruby on Rails.

60 удивительных инструментов веб-разработки, которые будут использоваться в 2022 году

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

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

Локальная среда разработки является неотъемлемой частью любого стека разработки. Однако она особенно важна для веб-разработки. Вот некоторые из наиболее известных инструментов локальной разработки.

DevKinsta

 

Вашу рекламу скликивают конкуренты?

Подключите защиту по ссылке и экономьте ваш рекламный бюджет!

The DevKinsta splash screen.

Возможно, мы необъективны, но DevKinsta может стать инструментом номер один для веб-разработки в 2022 году и далее. Поправьте — мы предвзяты, и мы гордимся тем, что выпустили! Для непосвященных DevKinsta — это способ помочь вам в мгновение ока создать локальную установку WordPress. Это полный пакет, позволяющий проектировать, разрабатывать и развертывать сайты WordPress на машинах с macOS и Windows (в планах — версия для Linux). Вы можете настроить свою установку в соответствии с текущим проектом. Например, ваш «сервер» может использовать Nginx или Apache, версию PHP, MariaDB или MySQL и многое другое:

DevKinsta’s setup options.

Под капотом есть и другие возможности. Вы можете отлаживать и тестировать электронную почту через встроенный SMTP-сервер, а для управления базой данных вы можете использовать мощный инструмент Adminer:

DevKinsta’s Adminer-powered database manager.

В целом, мы считаем, что DevKinsta идеально подходит для современной разработки WordPress. Он может сразу же влиться в ваш рабочий процесс. Мы создали этот инструмент, ориентируясь на разработчиков, дизайнеров, фрилансеров и агентства. Однако практически любой человек, которому требуется ежедневная разработка, найдет в DevKinsta много полезного — особенно (но не только) пользователи Kinsta. Более того, DevKinsta полностью бесплатна!

MAMP

The MAMP logo.

Можно подумать, что классические инструменты для создания и развертывания веб-страниц мертвы и похоронены, учитывая появление более быстрых инструментов песочницы. Однако традиционные стеки веб-сервисов, такие как LAMP, MAMP и XAMPP, по-прежнему сильны. Обычно они объединяют операционную систему (ОС) — Linux, macOS или Windows — вместе с веб-сервером Apache, базой данных MySQL, языками программирования Python, PHP и Perl в один стек. Таким образом, подобный стек веб-сервисов все еще будет использоваться в 2022 году. MAMP — это версия инструмента для macOS. При таком подходе вы устанавливаете стек и работаете над дизайном и развертыванием. Хотя этот процесс может быть более длительным, чем при использовании более современных систем, под капотом все же имеется аналогичный уровень гибкости — или, по крайней мере, потенциал для этого имеется. Если в таких инструментах, как DevKinsta, вы будете выбирать из удобного графического интерфейса пользователя (GUI), то при использовании стека веб-сервисов вам придется устанавливать необходимые дополнения вручную. Например, нет встроенного способа раскрутить сайт WordPress без «установки собственного». Аналогичная ситуация с тестированием электронной почты. Как и другие инструменты локальной среды разработки, MAMP полностью бесплатен. Однако есть и премиум-версия MAMP для Windows и Mac, которая расширяет функциональность и предоставляет комплексный, надежный инструмент веб-разработки.

The MAMP Pro dashboard.

Из-за гибкости и цены классические стеки веб-сервисов до сих пор стоят на компьютерах многих разработчиков. Поклонники командной строки, естественно, будут тяготеть к этому решению, особенно если вы любите использовать менеджеры пакетов, такие как Homebrew, Flatpak или Ninite. Конечно, разработчики Apache тоже будут использовать эти стеки, как и разработчики MySQL и Python или PHP. Разумеется, разработчики WordPress также будут чувствовать себя здесь как дома.

XAMPP

The XAMPP app.

XAMPP — это еще один стек веб-сервисов, который пользуется большой любовью у разработчиков PHP, в том числе у тех, кто создает продукты WordPress. Буква «X» в названии означает кроссплатформенность инструмента. Он предлагает программы установки для Windows, macOS и Linux:

The XAMPP downloads page.

Если раньше между различными стеками веб-сервисов существовала разница, то постоянные обновления и усовершенствования уравняли их в правах. Тем не менее, у XAMPP есть пара уникальных трюков в рукаве. Например, MySQL больше не является системой управления реляционными базами данных (RDMS) по умолчанию. Вместо нее в XAMPP используется MariaDB. Это, вероятно, более точное представление производственного сервера, учитывая переход на другие решения после приобретения Oracle. Кроме того, в пакете XAMPP есть программа установки веб-приложений. Bitnami похож на такие решения, как Softaculous, но Bitnami специфичен для XAMPP:

The Bitnami homepage.

Несмотря на наличие множества приложений, вас, скорее всего, больше всего заинтересует программа установки WordPress. Тем не менее, существует множество дополнений на выбор, что делает XAMPP гибким решением для локальной разработки.

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

Большинство разработчиков любят спорить о том, какой редактор кода следует использовать. Ладно, мы гиперболизируем, но существует множество мнений на эту тему, и у каждого редактора есть свои ярые поклонники. Однако, если опросы верны, вы, скорее всего, используете Sublime Text, Visual Studio Code (VSCode) или IntelliJ IDEA. Это вполне логично, поскольку эти три инструмента варьируются от простого редактирования текста до полноценной интегрированной среды разработки (IDE). Однако есть и другие, заслуживающие упоминания. Давайте рассмотрим некоторые из них.

Visual Studio Code

С момента своего запуска в 2015 году Visual Studio Code стал активно использоваться на рабочих столах разработчиков всех мастей.

The Visual Studio Code Editor.

Это редактор кода с открытым исходным кодом, разработанный компанией Microsoft, который предлагает достаточно функций, чтобы считаться IDE. Несомненно, он предлагает достаточно функциональности, чтобы захватить более половины рынка — 55% веб-разработчиков используют Visual Studio Code ежедневно. По умолчанию Visual Studio Code — это, прежде всего, текстовый редактор. Однако в сочетании с библиотекой расширений он становится модульным и достаточно гибким, чтобы удовлетворить любые ваши потребности в разработке:

The Visual Studio Code extensions library.

Это означает, что вы можете установить линтеры и фиксеры для выбранного вами языка (да, ESLint и PHP CS Fixer есть), а также расширения Docker и Vagrant и многое другое. Говоря о языках, Visual Studio Code поддерживает JavaScript, Node.js и TypeScript из коробки. Однако экосистема расширений настолько богата, что вы сможете найти что-нибудь для поддержки используемого вами языка. Более того, вы также найдете первоклассную интеграцию с другими продуктами Microsoft, в частности, с GitHub:

The Visual Studio Code GitHub integration.

Visual Studio полностью бесплатна, а учитывая набор функций, она идеально подходит для многих. Мы считаем VSCode отличным средним звеном между IDEA и Sublime Text. Кстати говоря, давайте рассмотрим последний.

Sublime Text

The Sublime Text app.

Sublime Text является одним из основных в мире текстовых редакторов. Он более прост, чем большинство других решений, хотя его внешний вид скрывает мощь под капотом. Например, вы увидите многое из того, что Sublime Text предлагает в других конкурентах. Палитра команд — это то, что вы увидите во многих решениях, потому что она проста в использовании.

Sublime Text’s Command Palette.

Кроме того, имеются мощные сочетания клавиш редактирования, например, множественное выделение для одновременного редактирования нескольких столбцов. Кроме того, функция Goto Anything предлагает комбинации сочетаний клавиш, аналогичные Vim, для перемещения по файлам:

Sublime Text’s Goto Anything feature.

Sublime Text — это инструмент премиум-класса с очень либеральным пробным периодом. Его можно считать бесплатным, но чтобы отблагодарить разработчика, вам следует приобрести лицензию для расширенного использования. По нашему мнению, для многих небольших разработчиков или любителей Sublime Text предлагает отличный пользовательский опыт (UX), обеспечивая самое необходимое. Он продолжает пользоваться популярностью у многих разработчиков благодаря приятному визуальному оформлению, удобной компоновке и расширяемости.

Atom

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

The Atom app.

Это приложение, разработанное на GitHub, что может объяснить, почему оно было оттеснено на второй план в Microsoft. Тем не менее, оно регулярно обновляется и может считаться альтернативной версией Visual Studio Code. Редактирование текста функционально, и, как и его старший собрат, оно имеет встроенную интеграцию с GitHub. Существует также множество дополнений, называемых «пакетами»:

Atom’s package installer.

Существует множество тем, которые помогут адаптировать Atom к вашему рабочему процессу и проектам. Atom включает несколько тем на выбор, и некоторые из них, такие как One Dark, настолько популярны, что нашли свое применение и в других редакторах:

Atom’s One Dark theme.

Atom — это функциональный редактор кода, который стоит попробовать. Однако, поскольку Atom построен на базе Electron (без каламбура), некоторые пользователи жаловались на большие файлы и медленное выполнение проектов. Поэтому мы рекомендуем его для небольших проектов и быстрых скриптов (особенно со встроенным пакетом терминала), но для сложной работы он может оказаться не самым лучшим.

Notepad++

The Notepad++ homepage.

Сразу же стоит сказать, что Notepad++ не заменит ни один из «больших» редакторов кода, которые вы уже используете, например, IntelliJ IDEA или Visual Studio Code. Однако он даст вам больше возможностей под капотом для простых скриптов и общего редактирования текста. В зависимости от ваших проектов, это может склонить вас к переходу. Несмотря на свою простоту, Notepad++ используется в самых разных проектах. Это редактор кода только для Windows, что объясняет элемент «плюс» в его названии. Конечно, Notepad — это простой текстовый редактор, который по умолчанию присутствует в Windows. Notepad++ похож на своего собрата, но в нем также присутствуют специфические для разработки функции, такие как:

  • Окна с вкладками и разделенные окна
  • Поддержка почти 80 языков программирования
  • Функциональность автозавершения

Список функций, который позволяет с первого взгляда увидеть все функции, используемые в файле. Более того, Notepad++ гибко подходит к управлению проектами. Он поддерживает три различных подхода: сессии, рабочие пространства и проекты. Как только вы начнете копаться в Notepad++, вы увидите, что его можно использовать для более масштабных проектов, чем одностраничные скрипты. Мы думаем, что Notepad++ подойдет разработчикам, которые хотят иметь большой функционал, который также можно настраивать. В использовании он напоминает Vim с открытым исходным кодом, что больше подходит для определенных типов проектов, чем для других.

JetBrains Suite

Когда речь заходит о IDE для разработки, набор решений JetBrains должен быть в верхней части вашего списка (или очень близко к ней). Бизнес-модель продуманная, так как, хотя JetBrains предлагает множество редакторов, все они на самом деле являются «подмножествами» ее главного редактора IntelliJ IDEA.

IntelliJ IDEA is a leading Java IDE.

IDEA позиционирует себя как Java IDE. Она поддерживает практически все функциональные возможности других IDE в своем ассортименте. И, как таковая, она поддерживает множество языков программирования. Например, PyCharm вырывает большую часть функциональности Python из IDEA и упаковывает ее как свой собственный инструмент. То же самое делают phpStorm и WebStorm.

The PyCharm app.

Пользоваться IDEA очень просто — компания JetBrains проделала большую работу, чтобы вы начали кодировать, а не вникать в конфигурации и настройки. Возможно, это покажется неожиданным, но грань между использованием редактора командной строки, такого как Vim, и IDEA очень тонка. Оба инструмента ориентированы на рабочий процесс и эффективность, хотя IDEA также позволяет импортировать клавиатурные привязки Vim, если вам удобно работать именно так.

IDEAs Vim keybindings extension.

Мы предположим, что вы используете IntelliJ IDEA, если работаете в рамках крупного проекта или компании, заключившей договор на поставку программного обеспечения. Это может быть совместное использование проектов или работа в единой среде. Многие разработчики WordPress используют продукты JetBrains из-за их надежности в управлении проектами. Цена также является одним из факторов, а IntelliJ построен на модели подписки, которая часто достигает трех или четырех цифр в год.

IntelliJ IDEAs pricing screen.

Несмотря на это, существует несколько «общественных» редакций продуктов JetBrains. Однако они представляют собой урезанные версии материнского программного обеспечения; по сути, это решения с открытым исходным кодом, из которых убраны проприетарные элементы. Более того, JetBrains предлагает конкурентоспособные цены для проектов с открытым исходным кодом, стартапов, образовательных учреждений, капитанов Docker и многих других нишевых групп.

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

Конечно, веб-приложение не может быть ничем без хорошего пользовательского опыта (UX). Поэтому для создания прототипов макетов и визуальных образов часто требуется специальный инструмент. Инструменты проектирования будут жизненно важны как на серверной, так и на клиентской стороне разработки. Вот несколько популярных вариантов.

Figma

Figma — это часто упоминаемый инструмент веб-разработки, позволяющий совместно работать над дизайном.

The Figma editor.

Вы можете использовать редактор drag-and-drop для создания интерфейсов и других элементов, ориентированных на пользователя. Разработчики также могут брать фрагменты кода для внедрения в свои проекты. Figma делает процесс — от идеи до реализации — плавным и сокращает количество правок по всей цепочке проекта. Вы также получаете преимущество однородного набора инструментов для помощи в выборе шрифтов и цветов. Этот процесс отличается от использования отдельных инструментов, таких как Type Scale:

The Type Scale website.

…и набор инструментов веб-разработки, таких как Adobe Color, Coolors, различные подборщики цветов и многое другое.

The Coolors color picker.

Хотя Figma имеет ценность для проектов с одним разработчиком, она больше подходит для команды по мере увеличения ее размера. Командам понравятся аспекты совместной работы в Figma, такие как центральное хранилище активов и многократно используемые компоненты. Руководители команд также оценят широкие возможности отчетности, позволяющие увидеть, как члены команды используют различные системы проектирования. Что касается цены, Figma стоит $12 за «редактора» на стандартном уровне, а для корпоративных команд эта цена возрастает до $45 за «редактора» (для «редактора» читайте «место» — это одна и та же концепция). Таким образом, цена может вырасти в зависимости от того, сколько редакторов вы хотите иметь в команде.

Sketch

Sketch — это приложение только для macOS, которое также часто упоминается среди разработчиков:

The Sketch logo.

Он популярен, потому что Sketch включает в себя множество функций под капотом, а также прост в использовании, что вполне логично, учитывая, что это родное приложение для macOS. Оно немного напоминает IDE Xcode от Apple, что совсем не плохо, и в нем приятно ориентироваться. Конечно, вы можете выполнять основные функции, такие как редактирование векторов и изменение размеров ограничений. Однако в приложении есть много других функций, которые помогут вам быстро создавать проекты и экспортировать их другим пользователям. Например, возьмите функцию Sketch Smart Layout, которая использует адаптивное изменение размеров в соответствии с вашими размерами и текущей планировкой. Также есть множество инструментов для совместной работы, позволяющих каждому погрузиться в дизайн и помочь довести его до совершенства.

An overview of Sketch for Teams.

Sketch отличается от таких инструментов, как Figma, тем, что фрилансер или одинокий разработчик может подключиться бесплатно, а затем приобрести подписку, когда возникнет необходимость. В этом отношении цена Sketch — это либо единовременная оплата в размере 99 долларов, либо 9 долларов в месяц за пользователя.

InVision Studio

InVision Studio уникально продает себя как приложение для «дизайна экрана». В этом есть смысл, и это также легче понять. InVision Studio предоставляет все стандартные функции, такие как интуитивно понятный редактор на основе слоев и поддержка векторов.

The InVision Studio app.

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

Animations within the InVision Studio app.

К слову о передачах, вся команда может работать в InVision Studio благодаря общим библиотекам компонентов, глобальным опциям синхронизации, надежному режиму Inspect и многим другим. Структура цен также конкурентоспособна. Бесплатная версия InVision Studio предоставляет почти все функциональные возможности платной версии, с единственным ограничением на количество сохраняемых документов. Уровень Pro является ценным за всю мощь приложения (около 95 долларов США за пользователя в год).

Affinity Designer

Если вы являетесь пользователем Adobe Illustrator, вы наверняка сталкивались с Affinity Designer в прошлом. Подход Serif к графическому дизайну выглядит так, что он может потягаться с решением Adobe:

The Affinity Designer app.

С момента своего запуска он завоевал все больше пользователей благодаря хорошему отношению к сообществу, великолепным принципам дизайна и привлекательной ценовой модели. Вы найдете версии для Mac, Windows и iPad, и каждая из них может работать с векторами, растровыми изображениями или с обоими сразу:

Affinity Designer’s editor.

Все инструменты, привычные для Illustrator, присутствуют, а также полный набор цветовых профилей и опций экспорта:

The export options in Affinity Designer.

Одним словом, все возможности и функциональность позволяют создавать профессиональную графику для ваших проектов. Более того, цены на программу очень конкурентоспособны. Полная стоимость программы составляет около 50 долларов США, что является единовременным платежом. У него нет возможности работы в облаке, как у Illustrator. Тем не менее, за единовременную плату вы получаете все возможности Adobe в субъективно лучшем виде.

CodePen или JSFiddle

Обсуждая ранее IntelliJ IDEA, мы не упомянули одну из ее незначительных, но удобных функций — Scratch-файлы. Он позволяет быстро написать и протестировать фрагмент кода, не затрагивая текущий рабочий проект. Для пользователей других редакторов кода отличной заменой может стать такое решение, как CodePen или JSFiddle. Они оба работают одинаково: есть три текстовых редактора для HTML, CSS и JavaScript, а также экран вывода для просмотра результата:

The CodePen console.

Вы можете назвать свое «Перо» или «Скрипка» в зависимости от платформы, сохранить его и поделиться им с другими. Это такая простая идея, которая может помочь вам взять свои полузадуманные мысли о каком-либо аспекте проекта и реализовать их в течение нескольких секунд. Для разработчиков, которые хотят пролить свет на конкретный элемент в файле и показать, где возможны изменения, «онлайновая IDE» бесценна. Кроме того, совместная работа возможна через чат или «живой микрофон»:

The JSFiddle Collaboration screen.

В целом, онлайн IDE можно считать «спящим» инструментом веб-разработки, поскольку о нем не слишком часто упоминают, но многие разработчики используют его для создания лучшего кода.

Клиенты Git. Централизованное хранение кода, документирование изменений и работа над ним с командой без дублирования — задача системы контроля версий (VCS). Вот несколько клиентов, которые работают с одной VCS: git. Давайте сначала обсудим саму VCS.

Git

Git необходим современному разработчику, и поэтому он является одним из самых важных инструментов веб-разработки. В двух словах, это способ документировать изменения, которые вы вносите в код вашего проекта, и хранить их в «репозиториях»:

A list of WordPress GitHub commits.

Git был изобретен создателем Linux Линусом Торвальдсом. Он использует серию команд для добавления изменений файлов в «область постановки», где вы затем «зафиксируете» их в репозитории. Оттуда вы «проталкиваете» их в удаленный репозиторий, размещенный в Интернете. Хотя это не единственный доступный VCS — команда разработчиков WordPress по-прежнему использует Trac для многих проектов — он является самым известным. VCS, такие как Git или Trac, помогают командам работать вместе, размещая код в центральном месте. Основные команды — это однословные функции с предисловием git, которые часто используются из командной строки. Например:

git add file.php

Это выражение добавляет файл file.php в область хранения. Другими словами, оно записывает изменения как то, что вы хотели бы сохранить, не внося в него последние штрихи. Вы можете сделать это с одним файлом или целым проектом, если хотите. Чтобы зафиксировать файл, вы выполняете команду git commit. Отсюда вы можете добавить комментарий, чтобы рассказать другим о ваших фиксациях. После этого ваши изменения будут сохранены и перенесены в основную «ветку». Конечно, это зависит от того, работаете ли вы над удаленным «репозиторием». Если вы новичок в Git и VCS в целом, на GitLab есть отличное руководство для начинающих по использованию Git в командной строке. Позже мы также немного поговорим о самом GitLab.

GitHub

Kinsta’s GitHub page.

Для подавляющего большинства разработчиков GitHub — это место, где хранятся Git-репозитории проектов:

Three of many WordPress GitHub repositories.

Это решение, принадлежащее Microsoft, охватывает гораздо больше, чем хостинг Git. Здесь также есть множество инструментов для автоматизированного тестирования и попытка предложить дополнительные возможности для совместной работы.

GitHub’s collaboration features.

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

GitHub’s Issue Tracker.

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

GitLab

The GitLab logo.

Мы уже упоминали о нем ранее, но GitLab является конкурентом GitHub и преследует аналогичные цели. По сути, это хост для репозиториев Git, но он также предлагает несколько других дополнительных возможностей. В то время как GitHub называет себя «платформой для разработки», GitLab фокусируется на «DevOps». На бесплатном уровне GitLab предлагает все этапы жизненного цикла DevOps, статическое тестирование безопасности приложений и около 400 минут в месяц для непрерывной разработки (CD) и непрерывной интеграции (CI). GitLab падает в своем ощущении сообщества, что является большим отличием от GitHub. Здесь больше внимания уделяется развертыванию и всему циклу проекта. Это не минус, но это означает, что GitLab является более «замкнутой» платформой, которая, возможно, не так подходит для проектов с открытым исходным кодом, как GitHub. Для большинства команд будет достаточно бесплатного уровня GitLab. За 230 долларов в год на одного пользователя вы получаете доступ к аналитике вашего кода и производительности, около 10 000 минут CD/CI и многое другое.

Sourcetree

Sourcetree — это не хост Git-репозитория, а графический интерфейс пользователя (GUI) для управления им. Это одно из многих решений, таких как GitKraken, Sublime Merge, GitHub Desktop и многие другие.

The Sourcetree homepage.

Это продукт компании Atlassian (а мы любим Atlassian!), который соединяется с другими продуктами, такими как Bitbucket, чтобы предложить визуальное представление вашего репозитория Git. Sourcetree рекламируется как простой клиент Git — и это так, но он также подходит и для опытных пользователей. В нем есть все необходимое для поддержки команды, работающей с Git (и Mercurial тоже). Например, Sourcetree делает простые вещи, такие как выделение изменений с последнего коммита, но он также решает и другие задачи, если вам это нужно. Руководители команды могут просматривать наборы изменений, работать между ветками, когда это необходимо, и визуализировать код с помощью графиков и информационных вкладок:

Sourcetree’s graph view.

Подойдет ли вам Git-клиент, зависит от ваших обстоятельств. Если вы еще только учитесь, мы бы рекомендовали придерживаться терминала, пока вы не разберетесь в потоке и процессе. Для профессионалов или команд, активно использующих Git, такой клиент, как Sourcetree, позволит сэкономить минуты на ежедневной работе.

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

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

Инструменты разработчика Chrome

Инструменты разработчика» Chrome почитаются во всех сообществах за их великолепный набор функций и диагностику. Учитывая рост числа браузеров на базе Chromium, многие из них имеют тот же набор инструментов DevTools с аналогичными сочетаниями клавиш. Вы можете проверить Microsoft Edge, Brave, сам Chromium и многие другие клоны и работать со своими проектами в браузере.

The DevTools found in the Brave Browser.

Вкладка Elements станет постоянным местом посещения, поскольку именно здесь вы будете просматривать исходный код страницы. А вкладка Performance, по нашему мнению, дает такие сведения о загрузке страницы, с которыми не могут сравниться другие браузерные DevTools:

Brave’s Performance tab.

Вкладка «Безопасность» также предоставляет хорошую информацию, которая будет необходима для мониторинга (или исследования) веб-сайта клиента:

Brave’s Security tab.

Еще лучше то, что вы сможете генерировать отчеты Google Lighthouse прямо из браузера на базе Chromium:

A Google Lighthouse report from Brave’s DevTools.

DevTools здесь субъективно являются лучшими в мире, поэтому пользователи Chrome и Chromium будут опираться на них. Хотя в других браузерах тоже есть DevTools, и они также заслуживают внимания.

Инструменты разработчика Firefox

The Firefox homepage.

С ежемесячной активной базой пользователей около 220 миллионов, Firefox по-прежнему остается популярным браузером, несмотря на доминирование Google. В прошлом разработчики хвалили Firebug, и он часто был лидером в отладке внутри браузера. Сегодня у нас есть инструменты разработчика Firefox:

Firefox’s developer tools.

Есть основной набор функций для просмотра исходного кода сайта (Inspector), отладчик, память, хранилище и многое другое. Для новичков Консоль является пропуском к кодированию в целом, поскольку вы можете запускать JavaScript непосредственно в браузере, и это простой способ протестировать фрагменты и найти свои силы при первом запуске:

An example of a browser console.

Несмотря на это, мы считаем, что Firefox (и другие браузеры) имеет меньше возможностей в инструментах разработчика, чем браузеры на базе Chromium. Тем не менее, для кросс-браузерной отладки и устранения неполадок вы часто будете использовать Firefox. Поэтому хорошо, что они идеально подходят практически для всех задач.

Фреймворки для фронтенда

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

Bootstrap

Мобильная отзывчивость — это стандартная функция современного веб-дизайна. Это желанный шаг, учитывая, что мобильные устройства уже обогнали по популярности настольные компьютеры. Учитывая это, вам нужен способ быстрого создания сайтов, ориентированных на мобильные устройства. Bootstrap — отличный инструмент веб-разработки, который находит широкое применение:

The Bootstrap logo.

Это набор инструментов, объединяющий плагины JavaScript, переменные Sass, некоторые готовые компоненты, качественную отзывчивую систему сетки и многое другое. Существует даже рынок официальных тем, работающих с Bootstrap, а многие сайты WordPress также используют темы, созданные на основе этого фреймворка. Конечно, использовать Bootstrap или нет, зависит от потребностей вашего проекта. Однако логично предположить, что проекты веб-разработки с ограниченным бюджетом и быстрыми сроками реализации обратятся к «Bootstrapped» решению и адаптируют его к WordPress. Учитывая, что фреймворк и WordPress бесплатны, единственным фактором стоимости становится ваше время.

Tailwind CSS

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

A Tailwind CSS example.

Вы используете вспомогательные классы в различных тегах для добавления CSS из основной таблицы стилей. Конечно, CSS по-прежнему является основным источником стилей. Он находится вне поля вашего зрения, когда вы создаете макет с помощью HTML. Таким образом, он позволяет одновременно разрабатывать структуру и стиль. Этот подход напоминает нам о 960 Grid System и будет хорошо работать в связке с этой системой. Тем не менее, существует опасность нагромождения элементов таким количеством классов, что в итоге вы можете получить беспорядочный код. Для работы с Tailwind CSS вам потребуется терпение и дисциплина, но если он подходит для вашего проекта, то это быстрый и надежный фреймворк.

Bulma

Мы достигли значительного прогресса в разработке структуры и макетов сайтов, но создание гибких, отзывчивых и динамичных колонок для многих является препятствием на пути. Хотя это не единственное, что может сделать Bulma, этот тип приложений — мясо и картофель для фреймворка:

The Bulma website.

Как и Tailwind CSS, Bulma скрывает CSS и предоставляет вам полезные классы для HTML. Он создан на основе Flexbox, ориентирован на мобильные устройства и является модульным. Это отличный вариант, если вам нужно всего несколько компонентов. Вы также можете смешивать и сочетать фреймворки по своему усмотрению. Более того, вам не нужен JavaScript, чтобы запустить Bulma в работу, так как это только CSS. Вы можете добавлять элементы интерфейса, такие как кнопки, с минимальным количеством кода. Это простой фреймворк с открытым исходным кодом, который можно адаптировать к потребностям вашего проекта. По нашему мнению, это ценная черта, которую стоит использовать.

Foundation

У команды ZURB есть свой уникальный взгляд на CSS-фреймворк Foundation. Это семантический инструмент, ориентированный на мобильные устройства и имеющий два варианта — для сайтов и электронной почты:

The Foundation homepage.

Foundation создан с учетом приоритета доступности. Каждый сниппет в Foundation поставляется с выделенными атрибутами ARIA. Однако, прежде чем вы дойдете до этого этапа, Foundation впечатляет для быстрого создания прототипов благодаря тому, как вы добавляете их в HTML. Вы можете создать практически любой структурный элемент на вашей странице — даже различные типы меню и навигации:

Creating a navigation menu in Foundation.

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

Foundation’s template library.

В целом, фреймворк Foundation делает то, что заявлено на упаковке. Он будет играть центральную роль в развитии вашего сайта, а не позволит вам прикрутить дополнительные функции. Поэтому, возможно, вы будете использовать его не для каждого проекта. Хотя, если его использовать, он справится со всеми задачами на самых разных сайтах.

Material-UI

Мы обсудим React более подробно позже, а пока знайте, что Material-UI основан на библиотеке компонентов этого JavaScript-фреймворка. Для тех, кто не в курсе, Material Design — это «философия» Google по оформлению фронтенда сайта. Это означает множество шрифтов Roboto и цветовых блоков:

Material-UI looks to meet Google’s design standards.

Вы импортируете библиотеку в React, а затем используете специальные HTML-теги для создания своего сайта:

Building a button in Material-UI.

Для дальнейшей настройки элемента вы добавляете классы в теги HTML. Весь блок кода оборачивается в функцию, и вы рендерите детали (и страницу в целом) в React. Существует множество бесплатных и премиум-тем, охватывающих множество вариантов использования и цен:

The Material-UI theme library.

Поскольку Material-UI имеет один конкретный сценарий использования — создание сайтов на основе Material Design — он будет основным фреймворком, если это ваша цель. В частности, библиотека тем будет ценным ресурсом для начала работы, независимо от вашего бюджета.

HTML5 Boilerplate

The HTML5 Boilerplate homepage.

Если вы являетесь разработчиком WordPress, вы, возможно, сталкивались с Underscores. Это базовая стартовая тема WordPress, которая сэкономит вам бесчисленное количество часов на создание функциональных и основных элементов вашего сайта. HTML5 Boilerplate делает то же самое на уровне общего дизайна. Она включает в себя семь файлов, охватывающих HTML, CSS и JavaScript. Все они содержат только самые необходимые файлы и код для рендеринга страницы. После этого то, какой получится ваша страница, зависит только от вас. У HTML5 Boilerplate много поклонников, потому что это скорее утилита для экономии времени, чем полноценный фреймворк. Таким образом, в нем нет визуальных эффектов, которые могли бы поразить «проходящую торговлю», но если вы используете HTML5 Boilerplate, вы можете обнаружить, что он ускоряет вашу разработку так же, как Underscores ускоряет разработку WordPress.

Materialize

Хотя мы бы не назвали Materialize конкурентом Material-UI, это еще один фреймворк, который использует принципы Material Design для создания макета:

The Materialize homepage.

Однако Materialize не использует React, а является CSS-фреймворком. Это облегчает реализацию Materialize на фронтенде. Как и в других CSS-фреймворках, вы используете классы в HTML для создания элементов на фронтенде. Тем не менее, здесь также есть множество компонентов JavaScript для таких элементов, как модалы и выпадающие окна:

A dropdown menu created with Materialize.

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

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

Проще говоря, фреймворк или библиотека JavaScript позволяет вам по-другому работать с так называемым «ванильным» кодом. В данном случае — для создания специальных веб-приложений и сайтов. Существует множество «вкусов» — рассмотрим некоторые из них.

React.js

An example of React sandbox code.

React.js — это популярная JavaScript-библиотека, разработанная Facebook, на которой основаны многие современные элементы WordPress. Как в бэкенде WordPress.com, так и в редакторе блоков используется React, и мы считаем его интерфейсно-первым способом использования JavaScript.

The Calypso backend for WordPress.com is built on React.

Поэтому разработчикам WordPress следует — перефразируя Мэтта Малленвега — глубоко изучить React.js. Хотя, это не только фреймворк для разработчиков WordPress. Везде, где вам нужен современный и динамичный пользовательский интерфейс (UI), React будет первым выбором. Он использует расширение синтаксиса JavaScript под названием JSX для создания элементов, которые затем отображаются в модуле объектов документа (DOM):

const name = "Ken Starr';

const element = <h1>Hello, {name}</h1>;

ReactDOM.render
  Element,
  document.getElementById('root')
);

Переменная JavaScript в JSX может быть любым допустимым выражением, что позволяет строить сложные аргументы. Это делает React сильным выбором, когда речь идет о фреймворке. Благодаря своей популярности, мы считаем, что React должен быть в вашем списке «обязательных к изучению», независимо от того, где вы проводите свое время в разработке.

Vue.js

Vue.js — это еще один JavaScript-фреймворк для создания пользовательских интерфейсов. Он основан на «слое представления» и отлично подходит для интеграции с другими библиотеками и фреймворками.

The Vue.js sandbox.

С точки зрения HTML, Vue не может быть более доступным. Вы присваиваете тегу идентификатор и вызываете ключ из словаря, заданного на стороне JavaScript. Данные становятся реактивными, а данные и DOM связаны. В этом смысле Vue.js очень похож на некоторые CSS-фреймворки, которые мы рассматривали ранее в этой статье. Этот фреймворк очень интересен, и мы рекомендуем вам изучить документацию, чтобы увидеть, что возможно. Хотя Vue.js поддерживает JSX-декларации, он лучше подходит для использования шаблонов, основанных на «классических» веб-технологиях. Поэтому он будет идеален для разработчиков, которые не хотят работать только на JavaScript.

Express.js

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

The Express.js homepage.

Это минималистский фреймворк (отсюда и название), и его основное преимущество заключается в том, чтобы помочь вам организовать серверные компоненты в привычном формате Model-View-Controller (MVC). Поэтому код выглядит сложнее, чем в других фреймворках — даже в ванильном JavaScript:

var express = require('express');

var app = express();

app.get('/', function(req, res){
  res.send("Hello world!");
});

app.listen(3000);

Мы считаем, что Express.js подойдет для приложений, которые часто извлекают и выталкивают данные из баз данных. Это делает его подходящим для многих современных веб-приложений и бэкенд-разработчиков, которые хотят работать над фронтенд-задачами с минимальным напряжением.

Svelte.js

Одно из основных правил при разработке для Интернета — убедиться, что ваши сайты работают на максимально возможном количестве браузеров. Тем не менее, в некоторых случаях вы можете захотеть создать приложения или сайты без поддержки устаревших браузеров. В этих случаях Svelte.js должен быть в верхней части вашего списка.

The Svelte.js homepage.

Свое название фреймворк получил благодаря размеру файла — всего 5 кб после минификации. Он имеет jQuery-подобный формат, который будет удобен для привычных пользователей:

$('.hello').text("Hello svelte");

В API Svelte насчитывается менее 40 функций, поэтому начать работу будет несложно. Более того, вы можете легко добавлять новые функции с помощью $.fn. Вы найдете «полифиллы» для поддержки Internet Explorer 9, но это почти единственная уступка. Для поддержки гиперсовременных браузеров с использованием супер-легкого фреймворка, Svelte.js может быть тем, что вам нужно.

Laravel

До сих пор мы рассматривали JavaScript или CSS фреймворки. Учитывая распространенность PHP, имеет смысл рассмотреть фреймворк и для этого языка. Laravel — идеальный выбор, поскольку он популярен среди многих разработчиков благодаря своему синтаксису и экосистеме:

The Laravel homepage.

Правильнее будет сказать, что Laravel — это экосистема, поскольку она включает в себя множество инструментов, помогающих вам создавать проекты. Даже если вы не используете большую часть самого фреймворка, вы можете использовать Laravel’s Homestead, локальную среду разработки на базе Vagrant. Сам Laravel — это PHP-фреймворк на базе Docker, для взаимодействия с которым используется CLI (называемый Sail). Подобно Vagrant, вы будете использовать sail для создания контейнеров и их запуска. Однако у Laravel есть еще много других возможностей. Например, вы можете использовать его в качестве полнофункционального фреймворка, бэкенда API для приложений Next.js и почти для всего остального. Если вы PHP-разработчик, Laravel станет центральным (если не привычным) инструментом в вашем рабочем процессе.

Gatsby

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

The Gatsby homepage.

Существует сверхбыстрый процесс установки с помощью менеджера пакетов Node (npm). Мы расскажем об этом подробнее позже. Хотя это JavaScript-фреймворк, Gatsby генерирует статические HTML-файлы во время выполнения, поэтому нет возможности атаковать сайт. Более того, Gatsby автоматизирует производительность, чтобы ваш сайт работал в оптимальной конфигурации. Благодаря автоматической производительности, динамическому масштабированию и созданию статических HTML-файлов Gatsby похож на живой организм. Здесь есть сложный кодовый «макияж», включающий JSX, Markdown, CSS и многое другое в зависимости от ваших потребностей. Каждый шаг рабочего процесса и часть вашего стека могут быть адаптированы под ваши требования. Разработчикам WordPress также понравится, как Gatsby интегрируется с платформой. Однако он подойдет не во всех случаях. Например, если вам нужно полностью управлять облачной CMS, это решение не для вас. Тем не менее, в большинстве случаев Gatsby может адаптироваться к вашему проекту, и он отлично работает с WordPress.

Django

Несмотря на все разговоры о том, что Python — это «начинающий» или «учебный» язык программирования, он служит основой для многих сайтов высокого уровня. Некоторые из крупнейших сайтов — Instagram, Uber, Reddit, Pinterest и другие — используют Django. Часто вы не найдете упоминания о самом Python, а только о Django. Django — это фреймворк, который использует Python для создания веб-приложений на стороне сервера. Он так же прост в использовании, как и сам Python, и имеет очень удобный для чтения формат.

Django’s default formatting.

Python — отличный скриптовый язык для логических проектов, поэтому его использование в веб-приложениях — отличный вариант. Более того, скорость обработки данных в Python высока, а фундаментальная файловая структура легка. Благодаря своей скорости, Django является отличным серверным фреймворком по сравнению с PHP и обладает не меньшей мощью, чем более популярный язык. Тем не менее, его популярность ниже, что может быть связано с репутацией Python как языка, на котором учатся. Несмотря на это, Django хорошо сочетается с другими языками, такими как JavaScript, и может стать основой современного веб-приложения. Конечно, если вы планируете использовать CMS, например, WordPress, или создаете решения для проектов на базе React, у вас меньше возможностей. Несмотря на это, мы думаем, что в 2022 году количество сайтов, работающих на Django, будет расти.

Ruby on Rails

Несколько лет назад язык программирования Ruby был «душкой» среди языков для начинающих и скриптовых альтернатив PHP. Его часто сравнивают с Python. И, как и Django, Ruby on Rails также был любим многими разработчиками.

The placeholder page when starting a Ruby on Rails project.

Ruby используется во многих серверных и «подкапотных» веб-приложениях. Кроме того, Ruby on Rails используется в качестве серверного фреймворка на бесчисленных веб-сайтах. Он использует подход MVC и предлагает структуры для веб-сервиса, страниц и базы данных. Таким образом, вы получаете готовый сайт из коробки. Ruby on Rails подойдет вашему проекту, если ему нужно планировать множество заданий и работать со сторонними решениями. Например, есть встроенная интеграция с файловыми хранилищами, такими как Google Cloud, и обертка для отправки электронной почты. В целом, это хороший выбор, если вам нужен надежный набор настроек по умолчанию (например, структура папок), которые можно настроить при необходимости. С другой стороны, это не лучший выбор, если вам нравится использовать API в процессе разработки. Структура кода Ruby on Rails может стать сложной и трудной для понимания в больших проектах. Время выполнения также может пострадать, так что это не лучший фреймворк для проектов, критичных к скорости. Тем не менее, Ruby on Rails является одним из ведущих серверных веб-фреймворков, и его использование не замедляется для подходящих проектов.

TypeScript

An example of TypeScript code.

В двух словах, TypeScript обеспечивает необязательную статическую «проверку типов» JavaScript. Это «супермножество» языка, и он также поддерживает множество других библиотек JavaScript. В целом, TypeScript — это JavaScript с несколькими дополнительными возможностями, и вы можете компилировать оба языка рядом друг с другом. Многие разработчики перешли на TypeScript, чтобы уменьшить количество ошибок, возникающих во время выполнения программы. Ошибки типа — одни из самых распространенных, и их сокращение может вернуть вам много дополнительного времени. Для очень простого примера TypeScript рассмотрим строку:

let helloWorld = «Hello World»;

// ^ = let helloWorld: string

Здесь TypeScript использует let, а не обычный var для переменной helloWorld. Отсюда TypeScript знает, что helloWorld — это строка, и проверяет ее на этом основании. В конечном итоге, TypeScript не является обязательным инструментом веб-разработки, хотя он стал более популярным благодаря своей основной отличительной особенности. Если в итоге вы сэкономите столь необходимое время, он может стать жизненно важным для вашего рабочего процесса.

GraphQL

Это уникальный инструмент, который может найти применение среди разработчиков, работающих с данными в API. GraphQL — это язык запросов, используемый в API, который также выступает в качестве времени выполнения для предоставления результатов запроса.

The GraphQL website.

При использовании стандартного REST API часто приходится загружать данные с нескольких URL-адресов. С GraphQL вы можете получить данные с помощью одного запроса. Более того, API GraphQL упорядочены по типам, а не по конечным точкам. Такая классификация помогает повысить эффективность запроса и обеспечивает более явные ошибки, когда что-то идет не так. Типы также можно использовать, чтобы не переписывать код ручного разбора, учитывая то, как GraphQL их реализует. Вы также можете добавлять новые поля и типы в свой API без ущерба для проделанной работы. Инструмент является гибким и масштабируемым во многих областях. Поскольку GraphQL создает единый API для вашего проекта, вы можете использовать движок, соответствующий выбранному вами языку проекта. Это делает его отличным инструментом для широкого спектра приложений, а не нишевым решением широко распространенной проблемы. Вы можете найти GraphQL на таких сайтах, как GitHub, Spotify, Facebook и других. Это должно дать вам представление о том, как GraphQL используется на сайтах с большим количеством запросов. Поэтому в течение следующих 12 месяцев и далее вам, возможно, не раз придется прибегать к этому решению.

Менеджеры пакетов

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

Менеджер пакетов Node (npm)

Да, загрузка инсталляторов имеет свое место. Однако использование менеджера пакетов из командной строки в большинстве случаев очень просто. Он также обеспечивает быстрый способ захвата и установки файлов из Интернета. Менеджер пакетов Node (npm) — это инструмент веб-разработки на JavaScript, принадлежащий компании Microsoft, который позволяет устанавливать пакеты для конкретного языка по требованию:

The npm homepage.

Например, поиск пакетов React дает более 155 000 результатов:

A search performed within npm.

Как и онлайновая IDE, npm — это инструмент веб-разработки, который не получает много «эфирного времени», в основном потому, что он вездесущ. Таким образом, практически каждый веб-разработчик будет использовать этот инструмент. Однако он невероятен, и теперь, когда он находится под крылом GitHub, в 2022 году npm будет использовать больше разработчиков, чем когда-либо прежде.

Yarn

Подобно npm и pip для Python, Yarn помогает вам устанавливать пакеты, связанные с вашим проектом и его инструментами. Разница в том, что Yarn — это еще и инструмент управления проектами.

The Yarn homepage.

Установка проста, и инициализация Yarn для нового проекта также требует минимальных усилий. Он стал надежным решением с открытым исходным кодом для установки пакетов и управления вашим проектом. Вы будете использовать рабочие пространства для создания «монорепо», и несколько версий вашего проекта будут жить в одном репо и могут иметь перекрестные ссылки. Вы можете устанавливать плагины для всего, что не умеет делать Yarn (для чего вы хотите добавить новые fetchers и resolvers). Точнее говоря, вы можете устанавливать плагины, но их не так много, по крайней мере, в официальных списках. Вместо этого вы будете кодировать свои собственные, если вам очень нужна функциональность. Тем не менее, есть возможность настроить Yarn под нужды вашего проекта. У Yarn есть уникальная возможность стать вашим основным менеджером пакетов. В реальном проекте вы можете больше опираться на npm, но Yarn будет проникать в ваш рабочий процесс так, что это пойдет вам только на пользу.

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

Убедиться в том, что все работает, — это процесс, который часто пропускается, но он также сопровождается сожалением, когда что-то идет не так. Поэтому этап тестирования вашего проекта должен быть основательным, надежным и тщательным. Учитывая это, вот некоторые инструменты API и тестирования, которые пригодятся вам в ваших проектах.

HoppScotch

Разработанный компанией Netlify, HoppScotch — это инструмент разработки API с открытым исходным кодом. Разработчики называют его «экосистемой», что скрывает функциональность под капотом.

The main HoppScotch page.

Это несерьезное и надежное решение, но не для слабонервных. Если вы никогда не пользовались подобными инструментами, вам придется пройти сложный путь обучения. Ни на одной из страниц приложения почти нет руководства по использованию HoppScotch, хотя это обычно не проблема, поскольку инструмент предназначен для опытных разработчиков. Существует множество соединений реального времени (WebSocket, SSE и другие), а также реализация GraphQL. Нам также нравится создатель документации:

The HoppScotch documentation creator screen.

Он работает с вашими «коллекциями» HoppScotch для создания документации на лету, что значительно экономит время. В целом, HoppScotch — это функциональный инструмент, который будет часто открываться в вашем браузере. Это одно из тех решений, которые вы всегда будете использовать, не осознавая этого — выше похвалы мы не можем дать!

Postman

The Postman logo.

Внимание — сейчас мы упомянем страшное слово на букву «С»: сотрудничество. Postman — это инструмент веб-разработки, который помогает вам создать интерфейс прикладного программирования (API) в команде с помощью платформы Postman:

The Postman dashboard.

Существует множество вариантов использования Postman для интеграции в ваш рабочий процесс. Например, вы можете использовать его стандартным образом для разработки приложений, что напрямую отразится на веб-проектах. Вы можете моделировать конечные точки с помощью макетных серверов, что особенно понравится разработчикам WordPress. Вы даже сможете создать онбординг, чтобы помочь пользователям ваших API освоиться. Те проекты, в которых наблюдается большая текучесть пользователей или значительный трафик, увидят в этом свою выгоду. Что касается цены, Postman предлагает бесплатный уровень, но наибольшую ценность вы получите от одного из премиум-уровней. Вам придется заплатить около $12-30, в зависимости от вашего биллингового цикла и количества пользователей.

Testing Library

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

The Testing Library homepage.

Идея заключается в том, что вы создаете тесты, которые представляют использование вашего приложения. Если они работают без проблем, то велики шансы, что ваше приложение тоже будет работать. Это инструмент, не зависящий от фреймворка, и это не программа для запуска тестов. Основная цель Testing Library — помочь вам написать сопровождаемые тесты без отрыва от деталей реализации. Все в инструменте Testing Library сосредоточено вокруг его руководящих принципов. Таким образом, вы не только создаете тесты — вы учитесь тому, как сделать их лучше и ценнее. Благодаря этому Testing Library может стать важной частью вашего рабочего процесса. Мы утверждаем, что почти все цепочки проектов могут извлечь пользу из Testing Library, а пользователи React почти наверняка захотят внедрить этот инструмент в качестве стандарта.

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

Несмотря на бытующее мнение, что разработчики — антисоциальные люди, правда в том, что технологии и сотрудничество идут рука об руку. Поэтому давайте рассмотрим несколько замечательных инструментов для совместной работы, которые пригодятся в вашем следующем проекте.

Jira

Компания Atlassian пользуется большой популярностью, когда речь заходит о программном обеспечении. Мы являемся большими поклонниками нескольких предложений компании: Confluence, Trello, Sourcetree, Bitbucket, а также Jira.

The Jira homepage.

Это инструмент разработки для команд, использующих Agile-фреймворки — в частности, Scrum, поскольку он так популярен. Благодаря этому вы получаете множество функций в комплекте. Например, вы можете использовать канбан-доски для организации задач и спринтов. Вы также можете применять свою методику оценки, индивидуальную для вашей методологии и проекта. Jira ориентирована на повторяющийся рабочий процесс: планирование, отслеживание, выпуск и отчетность. Она занимает центральное место в нескольких Agile-системах, но вы также можете создать свою собственную в зависимости от предпроектного планирования. Если вам придется переключиться между спринтами, вы сможете развивать свой проект и увеличивать или уменьшать его масштаб. Отличной новостью о Jira является наличие бесплатного уровня для начала работы, а также разумные цены на другие уровни. Однако для эффективного использования Jira вам понадобится команда из десяти человек. Для меньшей группы она может оказаться излишней.

Taskade

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

The Taskade dashboard.

Если вы являетесь пользователем других инструментов для совместной работы, таких как Asana или Basecamp (подробнее о них позже), вы будете чувствовать себя здесь как дома. Информация, которая вам больше всего нужна, например, задания и напоминания, централизована под капотом. Таким образом, вы можете представлять ее различными способами в зависимости от вашего проекта.

The presentation types in Taskade.

Типы представления «Mindmap» и «Org Chart» являются звездными, и каждый из них позволяет по-разному взглянуть на добавленную вами информацию.

A mind map in Taskade.

Приложение обманчиво в своей простоте. Кроме гибкого способа представления задач и управления ими, в нем нет ничего лишнего. Работа с командой требует нажатия всего нескольких кнопок. Например, на каждом экране есть расширяемое окно чата:

The Taskade chat window.

Для некоторых, особенно по сравнению с другими решениями, Taskade может показаться «голым» и даже недостаточно оснащенным. Однако это не так. Taskade — фантастический способ совместной работы с командой, а благодаря своей простоте он легко впишется в любой проект, над которым вы работаете.

Asana

The Asana homepage.

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

Asana’s workflow types.

Также есть несколько фантастических функций и возможностей для командной работы. Отчетность является всеобъемлющей, а на более высоких тарифных планах вы получаете доступ к приборной панели, которая показывает различные аналитические данные, касающиеся работы вашей команды. Есть даже возможность отслеживать нагрузку на каждого члена команды. Таким образом, Asana помогает вам свести к минимуму перебои в работе и предотвратить переутомление членов команды. Более того, бесплатный уровень — это не урезанная демонстрация полнофункционального приложения. Вы можете масштабировать Asana по мере масштабирования команды, и здесь есть хорошая функциональность, которая поможет вам в этом. Например, вы можете назначать работу членам команды и управлять каждым рабочим процессом. Вы также можете отправлять общие сообщения по каждому рабочему пространству всей команде.

Sending a message in Asana.

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

Basecamp

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

The Basecamp homepage.

На бумаге в Basecamp нет ничего интересного по сравнению с конкурентами. По правде говоря, многие другие приложения для совместной работы догнали то, что предлагает Basecamp. Однако это еще не вся история. Да, вы можете создавать задачи и списки дел, назначать их членам команды и работать со всем в масштабах проекта. Но главная особенность Basecamp — это инфраструктура и дизайн. Существует простой подход к использованию Basecamp: создайте проект, разработайте список дел или расписание и распределите задачи между членами команды. Каждый проект имеет множество самодостаточных аспектов, которые помогают довести проект до конца:

The elements that make up a Basecamp project.

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

Бегунки задач

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

Grunt

Grunt — это программа для выполнения задач, специфичных для JavaScript, которая призвана автоматизировать некоторые рутинные и повторяющиеся задачи, с которыми вы сталкиваетесь ежедневно. Рассмотрим задачи, которые вы обычно считаете обычными: линтинг, минификация, компиляция и многие другие. Grunt решает их за вас с помощью конфигурационного файла на основе JSON (называемого «Gruntfile»). Вот пример:

module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
      options: {
        globals: {
          jQuery: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint']);
};

Если вы часто сталкиваетесь с тем, что ваши проекты теряют время из-за рутинных задач, Grunt, скорее всего, станет частью вашего набора инструментов для веб-разработки, как это уже сделано для WordPress, Bootstrap и многих других.

Gulp

The Gulp logo.

Когда вы сравниваете программы для выполнения задач, то зачастую это перестрелка между Gulp и Grunt. Gulp — это инструментарий на основе JavaScript для автоматизации рабочего процесса и повышения эффективности. Вы будете использовать специальные файлы и «потоки» для работы с вашими активами и кодом до того, как они будут записаны на диск. Каждая созданная вами задача является «асинхронной» функцией, и вы можете задать ее как приватную или публичную. Разница заключается в разрешениях: частные задачи не могут быть запущены конечным пользователем и предназначены для работы с другими функциями. Кстати говоря, для создания задач можно использовать функции series() и parallel(). Это означает, что вы можете брать небольшие задачи, делать их одним винтиком в более обширной системе, а затем вложить их друг в друга. Более того, вы также можете расширить функциональность Gulp с помощью плагинов, созданных сообществом:

A showcase of Gulp plugins.

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

Инструменты контейнеризации

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

Docker

Для многих Docker — это среда разработки на основе контейнеров. Платформа с открытым исходным кодом — это не только контейнеры, но это часто упоминаемая причина для ее использования.

The Docker logo.

На первый взгляд, это простой процесс: нажмите кнопку и получите виртуальную среду разработки в песочнице. Конечно, все, что кажется простым сверху, глубоко под землей. Docker сочетает в себе пользовательский интерфейс (UI), CLI и API с обеспечением безопасности для быстрого развертывания в ваших руках. Для многих разработчиков Docker будет играть центральную роль в создании новых приложений. У веб-разработчиков — в частности, разработчиков WordPress — есть выбор инструментов для этой работы. Local от Flywheel и DevKinsta являются ведущими платформами.

The DevKinsta app is powered by Docker.

Примечание: Недавно мы запустили DevKinsta — локальный инструмент разработки, который поможет вам создать новые сайты WordPress. Вы также можете развернуть сайты на своем аккаунте Kinsta одним щелчком мыши. Docker также интегрируется со многими инструментами — и некоторые из них уже используются в вашем рабочем процессе. Такие приложения, как GitHub, VS Code и другие, могут подключаться к Docker и обеспечивать плавную интеграцию. В целом, Docker может занять целую серию статей о том, что он содержит. Несмотря на это, все это может оказаться ненужным. Скорее всего, вы используете Docker ежедневно и уже знаете, насколько он замечателен!

LXD

Проще говоря, LXD — это менеджер контейнеров для дистрибутивов Linux. Он основан на образах и поставляется с несколькими предварительно созданными образами для Linux. Использование LXD дает вам уверенность в том, что вы будете разрабатывать на той же ОС конечного пользователя, которая используется по умолчанию.

The LXD website.

Она была основана разработчиками Ubuntu компанией Canonical и, конечно, поддерживает структуру с открытым исходным кодом. Вы можете создавать безопасные среды с помощью непривилегированных контейнеров, контролировать использование ресурсов с помощью множества ресурсов и даже управлять сетями. LXD также масштабируется, что означает, что вы можете запустить тысячи вычислительных узлов или оставить все просто. Для облачных приложений LXD интегрируется с OpenNebula — последняя имеет официальные драйверы для управления экземплярами LXD. По умолчанию многие инструменты контейнеризации используют Ubuntu в качестве стандартной виртуальной среды. Несмотря на это, LXD оптимизирован для работы с дистрибутивом. Если вы еще не пробовали его использовать, стоит потратить время на пробное использование. Вы можете обнаружить, что он подходит для конкретных рабочих процессов или клиентских проектов лучше, чем конкуренты.

Инструменты оптимизации изображений

Активы (или медиа, или любое другое удобное для вас название) в изобилии присутствуют в Интернете. Существуют целые онлайн-культуры, посвященные изображениям и основанные на них. Поэтому очень важно, чтобы ваши проекты веб-разработки работали хорошо, несмотря на количество используемых изображений. Вот некоторые из наиболее популярных и превосходных инструментов оптимизации изображений.

ShortPixel

The ShortPixel website.

Существует множество приложений для оптимизации изображений, но ShortPixel имеет субъективно надежный алгоритм. Он способен уменьшить размер файла изображения без ущерба для качества. Если быть придирчивым, то можно предположить, что поскольку по умолчанию установлено максимальное сжатие, то больше некуда идти, если изображение недостаточно сжато. Тем не менее, это не является серьезным замечанием. ShortPixel имеет множество функций под капотом. Здесь есть три уровня сжатия, отличный оптимизатор PDF и даже компрессор GIF. Последний — это то, что вы не найдете во многих других инструментах, так что это приятное дополнение к линейке продуктов. Весь интерфейс также доступен: Вы перетаскиваете изображения в загрузчик и ждете, пока ShortPixel начнет свою работу. После обработки изображений вы можете загрузить их в пакетном режиме или выбрать отдельные изображения для загрузки:

Downloading images from ShortPixel.

Инструменты ShortPixel API также очень надежны. Вы найдете отдельные API для уменьшения онлайн и офлайн изображений, обширные клиентские библиотеки PHP и .NET, адаптивный движок на основе JavaScript и многое другое. Мы бы сказали, что ShortPixel — это инструмент для разработчиков, поскольку он отлично подходит для подключения вашего сайта или приложения. Мы также считаем, что он в мгновение ока перекроет вашу зависимость от TinyPNG, особенно если вы хотите использовать его как часть большого рабочего процесса.

TinyPNG

Пришло время для всеми любимого инструмента оптимизации изображений — TinyPNG. В этот пункт можно также включить TinyJPG, хотя оба инструмента работают с одними и теми же форматами изображений.

The TinyPNG website.

Вы увидите, что TinyPNG не сильно изменился за прошедшие годы. Это по-прежнему простой инструмент для оптимизации изображений с помощью перетаскивания. Здесь нет никаких «колокольчиков» или «свистков», и нет обширного набора форматов файлов. Тем не менее, что TinyPNG действительно предлагает, так это высочайшее удобство использования и множество интеграций с другими инструментами. Например, есть плагин для Photoshop и — для более тонких приложений — функциональный API для разработчиков. Даже пользователи Python могут принять участие в работе, поскольку API поддерживает и этот язык. С помощью API было создано несколько плагинов для множества сторонних инструментов. Мы не утверждаем, что TinyPNG обладает монополией на рынке оптимизации изображений, но для многих пользователей он часто является первым выбором. Взять изображение и поместить его в загрузчик занимает считанные секунды, а когда вы получаете в ответ 99,9% идеального представления вашего изображения, ему легко доверять.

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

Ранее мы говорили о тестировании API и основного кода сайта, однако это не учитывает производительность вашего сайта. Вот несколько любимых нами инструментов, которые также могут помочь вам проанализировать работу ваших сайтов.

Responsively

The Responsively app.

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

Viewing different devices in Responsively.

Самое замечательное в этом то, что вы можете сравнивать макеты бок о бок. Это дает вам надежный шанс повысить согласованность между устройствами. Каждое устройство имеет точный дизайн, и есть из чего выбрать, что очень удобно, если ваш сайт ориентирован на конкретные устройства. Вы также можете добавить специальные расширения для браузеров Mozilla Firefox, Microsoft Edge и Google Chrome, чтобы отправлять страницы в браузер Responsively. После этого вы можете открыть встроенные инструменты разработчика и приступить к работе.

The Responsively inspector.

Есть масса других возможностей, таких как функция скриншотов, поддержка горячей загрузки и многое другое, что поможет вам в разработке. Трудно поспорить с теглайном, что Responsively — это «браузер веб-разработчика». В конечном итоге он может стать основным компонентом вашего рабочего процесса.

Google Lighthouse

Для многих PageSpeed Insights от Google является ценным инструментом, позволяющим узнать, как работает сайт и где можно улучшить скорость загрузки.

Google’s PageSpeed Insights.

Тем не менее, некоторые программы под капотом более интересны для углубленного изучения. Оно также может лучше соответствовать вашим потребностям. Google Lighthouse может быть запущен на любой веб-странице и предоставляет аудиты и отчеты по производительности страницы, SEO, Progressive Web Apps (PWA) и т. д. Основные способы запуска Google Lighthouse — из командной строки, с помощью DevTools Chrome или в качестве модуля Node. Если вы используете интерфейс PageSpeed Insights, Lighthouse генерирует некоторые из оценок и предоставляет дополнительные сведения. Стоит отметить, что на первый взгляд Google Lighthouse и PageSpeed Insights похожи. Но PageSpeed Insights использует лабораторные данные в сочетании с реальными данными пользователей. В анализе Lighthouse данные пользователей не учитываются, а измеряется больше элементов вашего сайта. На наш взгляд, стоит использовать и PageSpeed Insights, и Lighthouse, особенно если цель вашего клиента — попасть в топ страниц результатов поисковых систем (SERP). В любом случае, это надежный инструмент, который нужно иметь под рукой, и он может даже вытеснить PageSpeed Insights в качестве предпочтительного инструмента производительности.

Cypress

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

The Cypress homepage.

В то время как большинство инструментов для сквозного тестирования основаны на Selenium, Cypress идет в другом направлении. Это означает, что проблемы, которые пользователи находят в инструментах тестирования на базе Selenium, здесь отсутствуют. На самом деле разработчики хотят сделать настройку, написание и выполнение тестов легким делом. Для этого они создали архитектуру с нуля и сосредоточились на сквозном тестировании, исключив другие формы. Для повышения производительности Cypress работает в том же цикле выполнения, что и ваша программа, а не выполняет удаленные команды по сети. Поскольку тестовый код запускается в браузере, нет необходимости учитывать привязку к драйверу или языку. Несмотря на это, вы можете компилировать код до JavaScript перед запуском тестов. Если вы инженер по обеспечению качества (QA) или разработчик, который хочет, чтобы сквозное тестирование имело доступ к вашей работе, Cypress должен привлечь ваше внимание. Самое приятное, что есть и полнофункциональный бесплатный уровень!

Stack Overflow и поисковые системы

На один момент позвольте нам расширить границы того, что считается инструментом веб-разработки. Stack Overflow хорошо известен всем, кто хоть немного знаком с веб-разработкой:

The Stack Overflow website.

Это сайт вопросов и ответов, посвященный программированию, и он является частью сети Stack Exchange, которая охватывает всевозможные другие темы:

One of many niche sites in the Stack Exchange network.

Он известен как основной ресурс для тысяч разработчиков, и, несмотря на некоторые споры вокруг его сообщества, посещаемость остается значительной. Мы бы рискнули сказать, что Stack, наряду с выбранной вами поисковой системой, представляет собой гибкий инструмент веб-разработки для обучения и совершенствования своих навыков. Например, вы, скорее всего, обратитесь к Stack Overflow, когда столкнетесь с проблемой, связанной с кодом. Аналогичным образом, когда появляется ошибка, которую вы не знаете, как решить, введение ее в поисковую систему — самый быстрый способ найти нужный ответ. Учитывая, что 90% опрошенных пользователей обращаются к Stack Overflow для решения проблем, вполне вероятно, что все пользуются этим инструментом. Однако для новичков — или даже если вы не можете сформулировать свою проблему — поисковые системы, вероятно, будут немного дружелюбнее.

Ссылки для веб-разработчиков

Если вы являетесь разработчиком, который придерживается этики «RTFM», вам не нужно будет убеждать себя в этом в следующих нескольких статьях. Напротив, если вы любите вникать в проблему и разбираться в ней, знайте, что до вас уже было бесчисленное множество разработчиков, которые, скорее всего, нашли ответ. Учитывая это, обратите внимание на следующие несколько инструментов для веб-разработки, все из которых основаны на справочных материалах из Интернета.

MDN Web Docs

Еще в начале существования сети существовал сайт Webmonkey под управлением Lycos, целью которого было обучение веб-разработке и программированию новых пользователей. Дух этого сайта продолжает жить в MDN Web Docs от Mozilla. Webmoney закрылся в 2004 году, а MDN Web Docs появился в 2005 году, так что между ними существует естественная связь.

The MDN Web Docs homepage.

Это коллекция ресурсов, которые в одних случаях помогут вам научиться программированию для Интернета, а в других — для продуктов, специфичных для Mozilla. Содержание разделено на две большие категории: технологии и справочные руководства. В зависимости от имеющихся у вас способностей и опыта вам предлагается несколько учебных пособий, специальное справочное руководство и некоторые дополнительные ресурсы для первых. Все справочники относятся к конкретным нишам и отраслям в индустрии разработки. Например, справочник по веб-разработке служит «краеугольной» страницей для дополнительных руководств по HTML, CSS и JavaScript.

MDN Web Docs JavaScript page.

Есть также широкие взгляды на различные отрасли, такие как разработка игр и то, что нужно, чтобы начать работать в этой сфере:

The MDN guide on game development.

MDN Web Docs является обязательным чтением для начинающего веб-разработчика, а также предлагает более чем достаточно ценного для эксперта. Если и есть сайт, который заслуживает закладки в браузере, то это он!

DevDocs — API Documentation Browser

В прошлом вы хранили все руководства к купленным вами товарам в пыльном ящике или шкафу. Поскольку жизнь стала более цифровой, эти бумажные руководства уступили место PDF-файлам, загружаемым с веб-сайта каждого производителя. Благодаря этому у нас теперь есть сайты, которые собирают цифровые версии руководств в курируемые библиотеки. Это позволяет вам найти то, что вам нужно, в одном хранилище. Таким образом, вполне логично, что такое хранилище должно существовать и для тем веб-разработки. Короче говоря, DevDocs — это библиотека документации для API, и это то, что, как мы думаем, будет ценно практически для всех разработчиков:

The DevDocs homepage.

Прежде чем просматривать библиотеку, необходимо включить желаемую документацию по API. Это можно сделать на экране Предпочтения:

The DevDocs Preferences screen.

После этого вы сможете получить доступ к соответствующей документации из специального древовидного меню:

The WordPress API screen.

Это простое решение неэффективной проблемы, когда в одном месте хранится множество ссылок на API. DevDocs — еще один сайт, который заслуживает закладки, и жаль, что нет настольного приложения для еще более быстрого поиска.

CSS-Tricks

Крис Койер — это имя знакомо многим веб-разработчикам. Мы уверены, что вы уже знакомы с основанным им сайтом CSS-Tricks. Как следует из названия, это сайт, посвященный фронтенд-кодингу, в частности CSS, и тому, как стать лучше.

The CSS-Tricks homepage.

Как отмечается на странице «О сайте», первые несколько лет преобладающей темой был CSS. Однако с тех пор HTML, JavaScript, WordPress и многое другое стали не менее важными и часто обсуждаемыми темами. В результате сайт сфокусирован на фронтенд-разработке и содержит множество статей, видео и руководств для вдохновения.

The blogroll for CSS-Tricks.

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

The CSS-Tricks Almanac.

Хотя в CSS-Tricks есть аспекты, похожие на справочники, это не справочный ресурс как таковой. Тем не менее, он должен стать для вас постоянным местом посещения, будь то RSS-канал или другое решение. Контент высокого качества и может бросить вам вызов, о котором вы раньше не задумывались. По крайней мере, подпишитесь на рассылку и ждите, когда CSS-Tricks попадет в ваш почтовый ящик.

DEV Community

Представьте, что вы можете взять отличные части из социальных сетей, веб-разработки и Stack Overflow, а затем создать один сайт, который объединит их. DEV Community может стать таким результатом.

The DEV Community homepage.

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

The DEV Community timeline for the JavaScript tag.

Справедливо предположить, что такую информацию можно найти везде — если вы готовы ее искать. Плюс сообщества DEV в том, что оно находится здесь, и это направленная подборка тем по разработке. Думайте об этом как о треке съезда разработчиков, а не как о подслушанном разговоре на автобусной остановке. Это еще один сайт, который будет хорошо работать в вашей RSS-ленте или в виде дайджеста в вашем почтовом ящике. По сути, это еще и «спящий» ресурс, поскольку вы будете часто заходить сюда, даже не подозревая об этом.

Can I use…

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

The Can I use… homepage.

Принцип работы прост: вы вводите селектор или свойство CSS в поле поиска, и база данных выдает, можно ли использовать его для создания веб-сайтов. Вы не ограничены только CSS. Поддерживаются также JavaScript и HTML:

Searching for an HTML element in Can I use…

Это база данных для внешних языков, поэтому она не будет искать результаты для PHP, Python или других серверных языков. Несмотря на это, Can I use… — это огромный и ценный инструмент, который поможет вам в вопросах доступности и проектирования для различных устройств. Это простое предложение, позволяющее найти определенный элемент и сразу увидеть, поддерживает ли его ваш целевой браузер:

The browser support table in Can I use…

Если присмотреться, можно также найти статистику, например, дату выпуска элемента и процент использования:

Information for a specific element in Can I use…

В целом, «Могу ли я использовать…» может использоваться нерегулярно. Однако на определенных этапах проекта она будет открыта почти все время. Как только вы выясните, что поддерживают ваши целевые браузеры, Can I use… переместится обратно в закладки и будет ждать, когда он понадобится в следующий раз. Это полезный сервис, который может стать «водоносом», когда речь идет о вашем коде фронтенда.

Итоги

Время и деньги ограничены, и есть определенная логика в том, чтобы выбрать те же старые инструменты веб-разработки, которые вы всегда использовали. Тем не менее, обдуманный выбор потребностей проекта окупится временем, затратами и производительностью. В этом посте мы рассмотрели 60 удивительных инструментов веб-разработки, которые вы можете использовать в 2022 году, чтобы придать импульс вам и вашей команде. Возможно, вы уже используете их. Если верить различным опросам, все больше разработчиков обращаются к GitHub, TypeScript, различным стекам веб-сервисов и одному из многочисленных фреймворков JavaScript, чтобы довести проект до конца.

Полное руководство по защите от скликивания вашей рекламы (72 стр.)
This is default text for notification bar

Конкуренты скликивают рекламу?

Подключите защиту и посмотрите, сколько ботов кликают на вашу контекстную рекламу Яндекс.Директ и оцените потери вашего бюджета! Если не понравится - мы вернем вам деньги.