Софт

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

10 библиотек для CSS и JS анимации

10 библиотек для CSS и JS анимации

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

Читать дальше
Софт
  • 3 марта 2023
Знакомство с терминалом: 8 главных команд

Знакомство с терминалом: 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

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

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

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

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

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

⭐ Изучите все возможности Webpack и научитесь его использовать в своих проектах. Пройдите курс от HTML Academy.

Читать дальше
Софт
  • 23 декабря 2022
Линтер ES Lint

Линтер ES Lint

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

Читать дальше
Софт
  • 24 октября 2022
34 инструмента для веб-разработчика на каждый день

34 инструмента для веб-разработчика на каждый день

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

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

Читать дальше
Софт
  • 8 августа 2022
Как защитить приложение от хакеров

Как защитить приложение от хакеров

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

Читать дальше
Софт
  • 6 июля 2022
Основные протоколы передачи данных

Основные протоколы передачи данных

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

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

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

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

Читать дальше
Софт
  • 24 июня 2022