Софт

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

ls

ls — команда для быстрого просмотра содержимого папки. Она имеет ряд опций для изменения вывода, таких как -l для длинного формата и -a для отображения скрытых файлов. Команда ls не умеет искать файлы или папки по определенным критериям, таким как имя, размер или содержимое.

ls -l — перечисляет файлы и папки в текущей папке в длинном формате, включая права доступа к файлам, права владения и временные метки. Выглядит это так:

➜  neural ls -l
total 0
-rw-r--r--  1 keks  staff   0 25 янв 16:54 keks.md
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 meow
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 suchscreenshot
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 verywow
drwxr-xr-x  2 keks  staff  64 25 янв 16:54 wow
➜  neural

ls -a — выводит список всех папок и файлов (даже скрытых) внутри текущей папки.

cd

cd — команда для перехода в другую папку.

Примеры:

• cd /usr/local/bin — переход в папку /usr/local/bin
• cd .. — переход в папку на уровень выше.
• cd ~ — переход в домашнюю папку текущего пользователя.

cp

cp — команда для копирования файлов и папок. Она имеет опции для рекурсивного копирования папок (-r) и для сохранения атрибутов файлов (-p). Команда cp не умеет копировать между файловыми системами или по сети.

Примеры:

• cp file.txt /tmp — копирует файл file.txt в папку /tmp.
• cp -r dir /tmp — копирует папку dir и все её содержимое в папку /tmp.
• cp file1.txt file2.txt /tmp — копирует файлы file1.txt и file2.txt в папку /tmp.

mv

mv — команда для перемещения и переименования файлов и папок.

Примеры:

• mv file.txt /tmp — перемещает файл file.txt в папку /tmp.
• mv dir /tmp — перемещает папку dir в папку /tmp.
• mv file1.txt file2.txt — переименовывает файл file1.txt в file2.txt.

rm

rm — команда для удаления файлов и папок. Возможно рекурсивное удаление папок (-r) и принудительное удаление файлов без запроса подтверждения (-f).

Примеры:

• rm file.txt — удаляет файл file.txt.
• rm -r dir — рекурсивно удаляет папку dir и всё её содержимое.
• rm -f file.txt — удаляет файл file.txt без подтверждения.

Важно: команда rm не имеет возможности восстановления удаленных файлов или папок. После удаления файла или папки с помощью команды rm он исчезает навсегда.

grep

grep — поиск в файлах и потоках. Команда имеет опции для рекурсивного поиска (-r), игнорирования регистра (-i) и печати контекста результатов поиска (-C).

Примеры:

• grep "pattern" file.txt — ищет в файле file.txt строки, содержащие строку pattern.
• grep -r "pattern" dir — рекурсивно ищет в папку dir и всем её содержимом строки, содержащие строку pattern.
• cat file.txt | grep "pattern" — ищет в выводе команды cat (которая отображает содержимое file.txt) строки, содержащие строку pattern.

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

find

Поиск файлов и папок по многим критериям, таким как имя, тип, размер и время модификации.

Примеры:

• find . -name "pattern" — ищет в текущей папке и всех подпапках файлы и каталоги с именами, соответствующими шаблону pattern.
• find / -type f -size +100M — поиск во всей файловой системе файлов размером более 100 мегабайт.
• find / -mtime +30 — поиск во всей файловой системе файлов, которые не были изменены за последние 30 дней.

Команда find может быть медленной при поиске в больших каталогах или файловых системах, поскольку ей приходится обходить всё дерево файлов. Она также не имеет возможности искать шаблоны в содержимом файлов, для этого лучше использовать grep.

ssh

Подключение к удаленной машине с помощью протокола Secure Shell (SSH).

Команда ssh позволяет безопасно подключаться к удаленным машинам и выполнять команды или передавать файлы через зашифрованное соединение. Она имеет ряд опций для управления соединением, таких как перенаправление портов и аутентификация ключей.

Примеры:

• ssh user@host — подключается к удалённой машине на host как пользователь user.
• ssh -p 2222 user@host — подключается к удалённой машине на host через порт 2222 как пользователь user.
• ssh -L 8000:localhost:80 user@host — подключается к удаленной машине на host как пользователь user и перенаправляет трафик с локального порта 8000 на порт 80 удаленной машины.

Это далеко не все команды для терминала, но зная эти восемь вам будет гораздо проще освоиться и начать работу. Удачи в обучении!

Другие статьи о терминале

• Полезные команды в cmd на windows
• Как сделать красивую консоль в Windows, Mac OS и Linux
• Работа с Git через консоль

Webpack — инструмент для сборки проекта перед деплоем, то есть загрузкой на хостинг.

Что понимается под сборкой? Представьте, что вы работаете над проектом, в котором 50 CSS и JavaScript-файлов. Если вы их вручную подключите в HTML с помощью тегов <link> и <script>, то потратите немало времени. Вёрстка разрастётся, документ станет тяжёлым, и с ним будет сложно работать.

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

Есть и другие сборщики: rollup, esbuild, vite или parsel. Но, как показывает статистика npm, они не такие популярные.

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

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

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

При работе в VS Code полезно иметь инструменты, упрощающие кодинг. Мы собрали популярные расширения, которые вам помогут. Надеюсь.

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

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

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

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

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

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

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

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