🖥 Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

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

🔗 Ссылка

CodeBase | Frontend | #article

🔥 Быстро проверить, что слушает порт в 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 ©

⚡️Card Beam Animation — Эффектная анимация "распыления" кредитных карт.

Технологии: CSS, JS

🔗 Ссылка

CodeBase | Frontend | #animate

Кто на что учился

🦥Ленивый программист

⚡️ Подготовил для вас небольшую подборку годноты ⚡️

➡️ Анимация

🔵 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

🚀 Статьи по Linux // Пробрасываем USB-устройство по сети в Линуксе

Показываю, как подключить USB-токен к удалённой машине без костылей: разбираем проброс устройств через ядро, нужные модули и пару подводных камней из практики.

📌 Читать тут

#linux

🐧 Linux Club

⚙️ Что такое свойство 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 | #Основы

🚨Подборка каналов для технарей от наших друзей:

📱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 - Бесплатные андроид премиум приложения.

🖥 Этот CSS пора оставить в прошлом

Показываю, как переписать привычные решения — центрирование, сетки, эффекты и адаптивность — на свежие фичи вроде :has(), контейнерных запросов и subgrid. Коротко, практично и без JS.

🔗 Ссылка

CodeBase | Frontend | #article

Что мешает вайбкодить тебе?

🦥Ленивый программист ©