Жидкие эффекты на CSS

Этот 6‑минутный ролик показывает, как с помощью только CSS создать плавное «жидкое» движение в фонах, кнопках и карточках с эффектом растекающейся жидкости. Урок идеально подходит, если вы хотите добавить анимацию без нагрузки JS и расширить визуальный арсенал интерфейса.

#фронтенд #css

Скример для новичков

Blur без JS: как CSS создаёт размытые заглушки для изображений

Представьте: на вашем сайте вместо сплошной пустоты или блоков скачут удобные размытые заглушки (LQIP), и всё это срабатывает без JavaScript, обёрток и лишней разметки. При этом цвет заглушек не выбирается вручную под каждую картинку, а подставляется автоматически на основе цветов изображения. Один кастомный CSS-переменный --lqip, немного битовой арифметики и радиальные градиенты — и браузер сам создаёт нужный LQIP-плейсхолдер.

Код битовой упаковки, ограничения css calc(), градиенты в сетке 3×2 и другие детали уже ждут вас в статье: https://leanrada.com/notes/css-only-lqip/

#фронтенд #css #lqip

Бесконечная скролл-галерея

Полезный проект для тех, кто изучает создание частых элементов сайтов. Тут вы увидите, как можно реализовать галерею изображений с бесконечной прокруткой, а также с анимацией разворота карточек в галерее.

Можете прям так и забирать к себе на сайт или доработать на ваш вкус.

#codepen

var, let, const — в чём разница?

В JavaScript есть три способа объявить переменную. Все они ведут себя по-разному. Разберём детально, но простыми словами, чтобы больше не было путаницы.

🟡 var — привет из прошлого

Особенности:

🔁 Область видимости: не блочная, а функциональная

🔼 Всплывает (hoisting) — поднимается вверх функции, но без значения

🔄 Можно переобъявить и изменить

😵 Может вести себя неожиданно

if (true) {
  var a = 1;
}
console.log(a); // 1 — переменная "вышла" из блока

console.log(b); // undefined — переменная есть, но ещё без значения
var b = 2;

🔵 let — современный стандарт

Особенности:

🔁 Область видимости: блочная

🔼 Всплывает, но в «мертвой зоне» (TDZ — Temporal Dead Zone), поэтому использовать до объявления нельзя

❌ Нельзя переобъявить в той же области видимости

✅ Можно менять значение

if (true) {
  let c = 10;
}
console.log(c); // ❌ ReferenceError — переменная вне блока

let d = 5;
let d = 6; // ❌ тоже ошибка — уже объявлена

🟢 const — постоянство с нюансами

Особенности:

🔁 Область видимости: как у let — блочная

❌ Нельзя изменить значение

⚠️ Но если значение — объект или массив, можно менять его внутренности

📌 Нужно обязательно сразу присвоить значение при объявлении

const x = 42;
x = 100; // ❌ ошибка

const user = { name: "Alice" };
user.name = "Bob"; // ✅ работает
user = { name: "Charlie" }; // ❌ ошибка

В чём подвох в циклах?

Один из частых багов — поведение var в цикле.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 3, 3, 3 — потому что var одна на весь цикл

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// 0, 1, 2 — потому что let создаёт новую переменную на каждой итерации

Что использовать?

const — почти всегда. Надёжно, понятно, предсказуемо.
let — если переменная будет меняться.
var — только если пишете поддержку старого кода. В новом — не надо.

#простымисловами #javascript #основы

Почему ваше приложение тормозит: архитектурные bottlenecks, которые никто не замечает

Как найти и устранить архитектурные bottleneck'и: причины тормозов, типовые ошибки и пошаговая методика диагностики.

— Читать дальше «Почему ваше приложение тормозит: архитектурные bottlenecks, которые никто не замечает»

#nodejs

@backend_tproger | Другие наши каналы

Один вечер + GPT → адаптивный SPA-сайт на Next.js без кода

Представьте, что вы описываете сайт в текстовом поле — и через пару минут получаете готовый SPA на Next.js с адаптивной вёрсткой, Tailwind, формой подписки и даже аналитикой. Без HTML, без CSS, без сборки руками. Это не будущее, а рабочий кейс: в статье показано, как GPT и Vercel V0 позволяют разработчику сэкономить часы, а то и дни, на типовых задачах.

#фронтенд #nextjs #ии

10 телеграм-каналов, которые реально читают сеньоры

Ваша лента — это поле битвы за ваше внимание. Мы опросили опытных айтишников и в этой подборке собрали 10 каналов, которые действительно читают и обсуждают профессионалы Middle/Senior — где разбирают архитектуру, непростые кейсы, масштабируемость и производительность. Без воды и хайпа — только реальные разборы и экспертные идеи.

Мы упустили какой-то важный канал? Поделитесь им в комментариях.

Для чего используется stopPropagation()

Данный метод используется для предотвращения всплытия или поднятия события вверх по цепочке из предков целевого элемента. Другими словами, он прекращает передачу события от целевого элемента к его предкам. Рассмотрим пример ниже.

При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.

#основы #javascript