CodeBase | Frontend

Когда многие решили, что видео с T800 - это CGI, CEO EngineAI Чжао Тонъян вышел на ринг и лично принял удар ногой от робота🦶 Никакой графики, всё настоящее. 📷 🦥Ленивый программист ©

⚙️ Что такое свойство aspect-ratio в CSS и зачем оно используется? Свойство aspect-ratio задаёт соотношение сторон элемента, удерживая пропорции при изменении размеров.

Больше не нужно рассчитывать высоту через отступы или JavaScript — теперь это делается нативно

➡️ Пример:

<div class="card"></div>

<style>
  .card {
    width: 300px;
    aspect-ratio: 16 / 9;
    background: #007bff;
    border-radius: 8px;
  }
</style>

🗣 В этом примере элемент всегда сохраняет пропорции 16:9, независимо от ширины контейнера. Частые применения:

• видео, изображения и превью с фиксированным соотношением сторон • карточки, аватары и responsive UI • создание адаптивных сеток без "резиновых" искажений

CodeBase | Frontend | #CSS

🚨Подборка каналов для технарей от наших друзей: 📱https://t.me/Geek_book_hub Бесплатная библиотека с книгами - программирование, электроника, айти. 📱https://t.me/club_arduino Мемы и полезные материалы для ардуинщика, электронщика, DIY'щика. 📱https://t.me/forprinting3D Если у тебя есть 3д принтер, тогда тебе сюда, тут лучшие модели и идеи для печати. 📱 https://t.me/Ali_radio_top Лучшие предложения, скидки и акции с алиэкспресс. 📱 https://t.me/Pirate_Gram - Бесплатные андроид премиум приложения.

Господи, да в чём проблема стать фронтендером? Подписался на эти три канала: 👉 Фронтенд 👉 Верстка 👉 Node.JS Заходишь каждый день, тратишь 15 минут и изучаешь актуальную информацию. Можешь сразу применять на практике. ВСЁ! Это настолько просто, что даже твой кот справится. Подпишись сейчас, потом спасибо скажешь.

⚡️🎄 — Анимированная сцена с вращающейся новогодней ёлкой. Технологии: CSS, JS 🔗 Ссылка CodeBase | Frontend | #animate

🚨 7 смертельных ошибок CLI, которые уничтожат твой Linux Приветствую, коллега по скриптам! Работа под root требует максимальной осторожности. Вот главные "самострелы", которые могут привести к краху системы: 1. rm -rf /: Безоговорочное уничтожение всей файловой системы. 2. Fork Bomb (:(){ :|:& };:): Бесконечное порождение процессов, исчерпывающее системные ресурсы. 3. dd: Неправильное указание if и of (вход/выход) уничтожит диск. 4. rm $VAR: Неэкранированная переменная может привести к стиранию лишнего. 5. .:$PATH: Добавление текущего каталога (.) создает лазейку для троянских программ. 6. chmod -R 777 /: Некорректная установка прав доступа на корневую файловую систему. Неправильное использование chmod -R (например, 555 или 777) на корневом каталоге (/) может разрушить файловую систему и сделать систему непригодной для использования. 7. Использование R-утилит (rlogin, rsh, rcp): Эти утилиты небезопасны и передают данные в открытом виде. Их следует удалить из системы и использовать ssh в качестве замены. #Linux #CLI #Безопасность #Ошибки #Сисадмин #linux 🐧 Linux Club ©

Что мешает вайбкодить тебе? 🦥Ленивый программист ©

🖥 Этот CSS пора оставить в прошлом Показываю, как переписать привычные решения — центрирование, сетки, эффекты и адаптивность — на свежие фичи вроде :has(), контейнерных запросов и subgrid. Коротко, практично и без JS. 🔗 Ссылка CodeBase | Frontend | #article

🚨Подборка каналов для технарей от наших друзей: 📱https://t.me/Geek_book_hub Бесплатная библиотека с книгами - программирование, электроника, айти. 📱https://t.me/club_arduino Мемы и полезные материалы для ардуинщика, электронщика, DIY'щика. 📱https://t.me/forprinting3D Если у тебя есть 3д принтер, тогда тебе сюда, тут лучшие модели и идеи для печати. 📱 https://t.me/Ali_radio_top Лучшие предложения, скидки и акции с алиэкспресс. 📱 https://t.me/Pirate_Gram - Бесплатные андроид премиум приложения.

⚙️ Что такое свойство object-position в CSS и зачем оно используется? Свойство object-position управляет тем, какая часть изображения или видео видна, если используется object-fit.

Оно определяет точку выравнивания содержимого внутри контейнера

➡️ Пример:

<div class="wrapper">
  <img src="photo.jpg" alt="пример">
</div>

<style>
  .wrapper {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
</style>

🗣️ Популярные приёмы: • center center — по центру (по умолчанию) • top, bottom, left, right — выравнивание по сторонам • можно задавать точные координаты: object-position: 30% 70%

object-position — инструмент точного контроля над кадрированием без редактирования изображений

CodeBase | Frontend | #Основы

🚀 Статьи по Linux // Пробрасываем USB-устройство по сети в Линуксе Показываю, как подключить USB-токен к удалённой машине без костылей: разбираем проброс устройств через ядро, нужные модули и пару подводных камней из практики. 📌 Читать тут #linux 🐧 Linux Club

Программисты, в целом, народ ленивый 🦥Ленивый программист ©

⚡️ Подготовил для вас небольшую подборку годноты ⚡️ ➡️ Анимация 🔵 Animate.css – библиотека CSS анимаций 🔵 Magic – кроссбраузерные анимации 🔵 Hover.css – набор анимаций CSS ➡️ Фоновая заставка 🔵 Coverr – Короткие видео для фона на сайт 🔵 Subte Patterns – Фоны для сайта ➡️ Шпаргалки 🔵 FlexBox – шпаргалка по Flexbox 🔵 CSS Cheat Sheet – шпаргалка по CSS 🔵 Emmet Cheat Sheet – шпаргалка по Emmet

Если вам нравится такой формат постов, добавь 🔥🔥🔥

CodeBase | Frontend | #cheat_sheets #bg

Кто на что учился 🦥Ленивый программист

⚡️Card Beam Animation — Эффектная анимация "распыления" кредитных карт. Технологии: CSS, JS 🔗 Ссылка CodeBase | Frontend | #animate

🔥 Быстро проверить, что слушает порт в Linux Иногда нужно понять, какой процесс занял порт (например, 80 или 443) и почему сервис не стартует. 🔎 Проверка через ss:

ss -ltnp | grep ':80'

-l — только listening сокеты -t — TCP -n — не резолвить имена -p — показывать PID/имя процесса Пример вывода:

LISTEN 0 128 *:80 *:* users:(("nginx",pid=1234,fd=6))

Альтернативы: lsof -i :80 — если привычнее через lsof fuser 80/tcp — быстрый вариант, сразу PID ⚡️ Когда полезно: при конфликте сервисов (Apache vs Nginx) при отладке firewall (порт слушает, но снаружи не доступен) при проверке автозапуска демонов 👉 Лайфхак: если процесс «убегает» после запуска, можно использовать ss -ltunp в цикле:

watch -n1 "ss -ltunp | grep ':80'"

Так поймаете короткоживущие процессы. #linux 🐧 Linux Club ©