Знания HTML, CSS и JS недостаточно. По крайней мере, если вы хотите работать самостоятельно

Перевод статьи «HTML, CSS & JS are not enough (esp if you plan to be a independent dev)».

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

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

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

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

1. Система доменных имен

Все знают, что такое доменные имена, но нужно также уметь ими пользоваться. Надо разбираться, что такое TXT records, CNAME, A records (см. типы ресурсных записей DNS), серверы имен и т. п. вещи.

Все мы знаем, как публиковать веб-проекты на Netlify и Vercel (Zeit), но нужно также уметь подключать купленные нами домены на GoDaddy и Namecheap.

Самый обиходный способ сделать это — добавить серверы имен Zeit/Netlify к аккаунтам на GoDaddy/Namecheap. Это свяжет ваш домен с вашим хостом.

Также для подключения домена к хосту можно использовать записи CNAME или TXT.

На Netlify и Vercel есть официальные примеры, поясняющие, как все это делается на этих платформах.

2. SSL-сертификаты

Теперь, когда все браузеры сделали обязательным использование протокола HTTPS, стало важным уметь создавать и подключать сертификат для сайта (если вы, конечно, не хотите видеть на своем сайте пометку «Not Secure»).

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

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

Раньше SSL-сертификаты были исключительно платными, но сейчас некоторые сообщества и компании начали раздавать их бесплатно — просто ради большей свободы и безопасности в интернете.

Популярными SSL-провайдерами являются, например, Cloudflare и LetsEncrypt. У LetsEncrypt есть специальный инструмент для генерации сертификата — ZeroSSL. А на Cloudflare вы найдете отличную статью, объясняющую, что такое SSL-сертификаты и как их использовать.

3. REST API, бэкенд, базы данных и аутентификация

Если вы хотите работать только с фронтендом, все это для вас не обязательно, но я считаю, что эти вещи в любом случае важны и их стоит изучить.

Rest API

Я имею в виду не только использование API в браузере при помощи JavaScript. Важно уметь создавать Rest API. Это поможет вам куда лучше разобраться в проектировании систем и программ. Когда вы научитесь запрашивать и сортировать данные в API, вы определенно станете лучшим разработчиком.

Бэкенд и базы данных

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

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

Сегодня, благодаря Node, фронтендеру писать код бэкенда стало куда легче, ведь можно обойтись своим любимым JavaScript.

Базы данных это тоже очень полезная тема. Рано или поздно у вас наверняка возникнет необходимость сохранять данные или получать их динамически. Самый простой вариант — изучить Mongo DB: эта СУБД прекрасно работает с Node (при помощи Mongoose).

Стратегии аутентификации

Изучите, как работают разные формы клиент-серверной аутентификации. Например, Local Auth/JWT, oAuth 2.0, пользовательские сессии и т. п.

4. Linux, SSH

Это одна из самых важных вещей, упускаемых из виду начинающими разработчиками. Большинство корпораций (да и серьезных стартапов) не полагаются на Netlify, Zeit и другие подобные платформы. Они размещают свой код на собственных облачных серверах на таких сервисах как AWS, GCP, Digital Ocean и Heroku. Угадайте, на чем работают эти серверы? На Linux. Так что, пожалуйста, прекращайте использовать Windows в качестве среды для кодинга.

Ситуация, когда исключительно разработчик-сеньор занимается сервером и ops-частью, совершенно не обязательна. Если научитесь делать это самостоятельно, это пойдет вам только на пользу в дальнейшем.

Изучайте команды Linux, учитесь работать с файлами: архивировать и извлекать из архивов, искать с помощью grep, пользоваться командами git, редактировать код в терминале (на сервере у вас не будет GUI или VSCode, так что осваивайте VIM, Nano и т. д.).

Еще одна важная вещь, достойная изучения, — SSH. Именно этот протокол чаще всего используется для подключения к серверам.

5. Серверы, Nginx, проброс портов

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

Я понимаю, что никакая компания не даст доступ к серверам человеку, который еще только учится. Но знаете, что? Серверы в наше время довольно дешевы, heroku может даже предоставить один бесплатно.

Чтобы научиться работать с сервером, можно оплатить свой собственный. Например, Digital Ocean Droplet. Они очень дешевы, всего порядка 5 долларов в месяц за linux-машину. На ней вы можете сделать бэкенд своего проекта, добавить mongodb, хранить файлы.

7. WordPress

Может, вам не понравится то, что я скажу, но WordPress используется на 25% всех сайтов, так что она очень популярна. И многие фриланс-проекты предполагают работу именно с WordPress. Вам может казаться, что эта CMS уже устарела, но она определенно одна из самых простых и надежных на рынке.

Вот несколько преимуществ, которые дает использование WordPress (по сравнению с новомодными Headless CMS):

1. Она проще для людей, не связанных с технологиями.
2. С этой системой знакомы люди, создающие контент. Например, моя подруга, занимающаяся написанием текстов, добавила знание WordPress в раздел с навыками в своем резюме.
3. Благодаря плагинам вроде Yoast и AIO эта CMS отлично приспособлена для SEO.
4. Богатая экосистема плагинов это тоже существенный плюс.

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

8. SEO, цифровой маркетинг, Google Analytics, копирайтинг

Мне случалось встречать разработчиков, которые создавали потрясающие проекты, но были совершенно неспособны правильно продвигать их или продавать.

Поэтому нужно иметь хотя бы базовое представление о том, как работает поисковик Google, как ранжируются страницы и т. п.

SEO

Многие люди думают, что SEO — это просто добавление мета-данных в тег head, но на самом деле все гораздо сложнее. Здесь нужно разбираться в ключевых словах, структурировании данных, стратегиях ранжирования страниц и прочих вещах такого рода.

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

Следует, однако, иметь в виду, что SEO это игра вдолгую, здесь качество важнее количества, и немедленных результатов ждать не стоит. Но поверьте мне: результаты будут, и оно того стоит.

Цифровой маркетинг

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

Я не призываю вас углубляться в тонкости маркетинга. Просто изучите основы трекинга пикселей Google/Facebook — что это такое, как добавить и т. п.

Google Analytics

Эти инструменты способны на многое, а между тем люди редко используют их потенциал. Мне случалось видеть, что разработчики просто добавляют скрипты Google Analytics на свой сайт и на этом успокаиваются. Люди, проснитесь! Тут есть, чем заняться.

Навыки написания текстов

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

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

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