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

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

Знакомство с терминалом: 8 главных команд
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 удаленной машины.
Это далеко не все команды для терминала, но зная эти восемь вам будет гораздо проще освоиться и начать работу. Удачи в обучении!
Другие статьи о терминале
- 26 января 2023

Что такое webpack
Webpack — инструмент для сборки проекта перед деплоем, то есть загрузкой на хостинг.
Что понимается под сборкой? Представьте, что вы работаете над проектом, в котором 50 CSS и JavaScript-файлов. Если вы их вручную подключите в HTML с помощью тегов <link>
и <script>
, то потратите немало времени. Вёрстка разрастётся, документ станет тяжёлым, и с ним будет сложно работать.
Webpack автоматизирует эту работу — он разбивает файлы на пакеты и подключает на страницы, а мы с его помощью собираем проект. Ещё он помогает оптимизировать приложение: сжимает картинки, шрифты и видео, минимизирует код — но для этого нужно установить дополнительные npm-пакеты. Также с помощью сборщика настраивается локальный сервер и запускаются приложения в браузере без заливки на хостинг.
Есть и другие сборщики: rollup, esbuild, vite или parsel. Но, как показывает статистика npm, они не такие популярные.
Webpack используется в большинстве проектов, а также в основе уже готовых сборок — бойлерплейтов. Причина такой популярности — webpack стабильный и гибкий. Если вы разберётесь с его настройками, то сможете менять конфигурацию под любой проект.
⭐ Изучите все возможности Webpack и научитесь его использовать в своих проектах. Пройдите курс от HTML Academy.
- 23 декабря 2022

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

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

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

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

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

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

Основные протоколы передачи данных
Протоколы — это правила в интернете, по которым устройства с разными операционными системами и программным обеспечением обмениваются данными. С их помощью, например, пользователь Safari на MacBook получает сообщение, отправленное через Chrome на Android.
Чтобы обмениваться данными было удобнее, задачи по их отправке и получению разделены. Создана архитектура «клиент-сервер», где клиент отправляет запрос, а сервер принимает его и возвращает ответ.
Сервер — это специальная программа, или мощный компьютер, его ещё называют хост-системой. Клиент — любое устройство для работы с сайтом, например, ноутбук, смартфон или бортовой компьютер в автомобиле.
Веб-приложение — это клиент-серверное приложение, в котором клиентом выступает браузер. Допустим, на сервере хранится HTML-страница с кодом. Браузер получает файл и показывает этот код как привычную страницу сайта.
- 24 июня 2022