Софт

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Дисклеймер: подборка нисколько не претендует на полноту.

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

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

Чтобы обмениваться данными было удобнее, задачи по их отправке и получению разделены. Создана архитектура «клиент-сервер», где клиент отправляет запрос, а сервер принимает его и возвращает ответ.

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

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

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

Если он не знаком с HTML, то вряд ли сможет это сделать — он передаст задачу вам. Но что, если вы в отпуске, заболели или занимаетесь более важными задачами? Как раз для этого и существуют системы управления контентом, или CMS — чтобы менять контент на сайте, не залезая в код.

Планирование — это не только «записать дела в столбик и вычёркивать». Это система, которая помогает снять головную боль и освободить мысли для чего-то другого.

Многие думают, что если начать планировать время, то окажется, что его нет и вовсе. На самом деле, планирование даёт возможность взглянуть на своё время как бы со стороны. У нас всех есть одинаковое количество времени. Вопрос в том, как его организовать.

Давайте разбёрем, как построить свою систему планирования в Notion.

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

Буфер обмена — это область, в которой могут храниться такие объекты как текст, файл, изображение и даже целая папка.

Кроме клика мышкой или нажатия на тачпад, копировать и вставлять информацию можно сочетанием кнопок компьютера. Комбинацию Ctrl + C - Ctrl + V первым делом осваивают, пожалуй, все, кто только начал знакомиться с компьютером. При работе с текстовыми файлами это и правда часто выручает.

Для копирования информации вам могут пригодиться следующие сочетания клавиш:

• Ctrl + C — скопировать выделенный участок текста, файл, картинку;
• Ctrl + V — вставить то, что скопировали из буфера обмена, в файл или в папку;
• Ctrl + A — выделить всё. Это может быть весь текст или все файлы в папке;
• Ctrl + X — вырезать. Работает как сочетание Ctrl + C, только файл или текст пропадут из того места, откуда его вырезали.

При вставке из буфера обмена информация оттуда не удаляется. Это значит, что можно один раз скопировать что-либо, а затем много раз вставлять картинку или текст куда требуется.

А вот если скопировать в буфер обмена другой файл или кусок текста, то информация в нём сменится на последнее, что вы скопировали.

И учтите, если выключить компьютер, то вся скопированная информация автоматически сотрётся, и при следующем включении компьютера её там уже не будет. Так что перед выключением убедитесь, что вы сохранили всё, что нужно.

Копировать можно всё что угодно: текст, картинку, папку, видео- или аудиофайл, html-страницу. Но если вы скопировали текст, то вставить его можно только в текстовый файл в Word или в редактор кода, в строку мессенджера — в общем туда, где этот самый текст можно было бы написать. Если вы скопировали файл или папку, то их можно вставить в папку в проводнике компьютера. Картинки же можно вставить как в папку, так и в текстовый или графический редактор.

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

Скриншот можно вставить в файл Google Docs, WhatsApp, Telegram:

Скриншот можно вставить в readme.md или коммит GitHub. Причем картинка сразу же загружается и вставляется уже в синтаксисе Markdown:

А так это выглядит во вкладке Preview:

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

Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от компании Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.

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

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

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

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools

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

Песочницы начали массово появляться в 2010–2013 гг. Сейчас часть таких сервисов уходит от привычного понимания песочницы как места для кодинга и развивается как сообщество веб-разработчиков. Внутри сервиса складываются группы пользователей. Можно общаться в Discord, размещать работы в галерее, подписываться на понравившихся разработчиков и дизайнеров.

Редактор кода — часть вашего рабочего места и программа, в которой вы проводите больше всего времени во время работы (ну, не считая браузера со StackOverflow). А рабочее место должно не мешать продуктивно работать. Сам по себе редактор — просто поле для ввода текста, он не умеет экономить время. Но расширения вполне помогают сделать работу проще и эффективнее.

Мы спросили у фронтенд-разработчиков, какими плагинами VS Code они пользуются для продуктивной работы, и делимся подборкой с вами.