Жидкие эффекты на 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

Что не так с var — и почему его всё реже используют

В предыдущем посте многие высказывались по поводу того, что var не является устаревший способом. Давайте разберемся.

Да, var — не устарел и не запрещён. Он по-прежнему часть JavaScript. Но в современной разработке ему предпочитают let и const. Не потому что это модно, а потому что так безопаснее и предсказуемее.

✅ Почему let и const — лучше:

— работают в пределах блока, а не всей функции;
— защищают от доступа до инициализации (TDZ);
— не позволяют случайно переобъявить переменную;
— делают поведение кода очевидным — особенно в условиях и циклах.

🚫 Почему var — неудачный выбор по умолчанию:

— всплывает с undefined, даже если объявлен ниже;
— работает во всей функции, а не в том месте, где его видно;
— легко переопределяется и ведёт себя неожиданно в асинхронных сценариях и циклах.

⚙️ А как же производительность?

На уровне сборки (Vite, esbuild, Webpack) весь ваш let и const может быть скомпилирован в var, если это действительно ускоряет загрузку.

Вы пишете безопасно, а сборщик сам оптимизирует.

📌 Когда var всё-таки уместен?

Если вы работаете со старым кодом, пишете под очень старые браузеры, или используете особые трюки с hoisting — var может быть оправдан. Но это редкость, а не рекомендация.

Всё ещё не согласны? Делитесь вашим мнением в комментариях.

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

Первый сайт «своими руками»: пошаговая инструкция без фреймворков

Начало не всегда должно быть сложным. В этом гайде поэтапно разбирается создание сайта на чистом HTML и CSS — от структуры папок до стилей, адаптивного меню и внедрения Google Fonts. Полезно как новичкам, так и тем, кто хочет освежить фундамент перед переходом на современные фреймворки.

А вы когда последний раз вручную писали сайт без сборщиков?

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

ИИ должен помогать, а не мешать: почему техлиды разочарованы

Кажется, что AI-инструменты — это сплошной буст для команд: код подскажет, баги найдёт, документацию напишет. Но на деле всё сложнее.

Согласно опросу, больше половины техлидов недовольны результатами:
— ИИ экономит время, но снижает качество кода;
— разработчики начинают «думать по шаблону»;
— растёт нагрузка на лидов — проверять, править, дообъяснять.

Почему так получилось и как компании адаптируют подход к AI-инструментам — рассказали в статье. Материал пригодится, если вы работаете рядом с разработчиками или сами пробуете внедрять ИИ в процессы.

#ии #новости