Жидкие эффекты на 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-инструментам — рассказали в статье. Материал пригодится, если вы работаете рядом с разработчиками или сами пробуете внедрять ИИ в процессы.

#ии #новости

Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux

Естественно, Liquid Glass

Нашел интересный CodePen-проект: Apple со своим обновлением заставили сообщество переосмыслять Liquid Glass, не без этого. Автор реализовал такое с помощью пользовательского шейдера (shaderMaterial) на WebGL с помощью three.js.

Посмотреть код можно здесь: https://codepen.io/supah/pen/dPodbrX

#codepen #css #javascript
@tproger_web

Cloudflare призналась, что не может вернуть нормальную скорость работы в РФ

С начала июня сайты на Cloudflare начали открываться через раз или вообще не грузятся. Сегодня сама компания подтвердила: трафик в России упал на ~30%, страницы «обрезаются» после 16 КБ, а сделать с этим ничего нельзя...

По версии Cloudflare, трафик режут крупные провайдеры. Почему — неизвестно. Официальных писем от госструктур не было.

Так и живем.

@your_tech

Деплоим свой React-сайт, или что делать на сервере

Когда ваш первый сайт готов, и VPS арендован, появляются закономерные вопросы: как развернуть проект на домене? Пост подойдет новичкам, которые впервые привязывают что-то свое к домену.


Шаг 1. Стягиваем код

Сначала клонируем репозиторий проекта на VPS:

git clone https://github.com/username/repo-name.git
cd repo-name/

Если для запуска понадобится Node.js определенной версии, установим через официальный скрипт:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

После этого установим зависимости проекта (их указываем в package.json):

npm install

Если на сервере маловато оперативной памяти (например, минималка на 1-2 ГБ RAM) — может помочь добавление swap-файла:

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

Шаг 2. Настраиваем переменные окружения

Создаем файл .env в корне проекта. Админ использует условно бесплатную БД Supabase, потому шаблон состоит из таких средовых переменных:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

Обратите внимание на префикс NEXT_PUBLIC_ — он необходим, чтобы переменные стали доступны на клиенте в приложениях, построенных на Next.js.


Шаг 3. Собираем проект

Для деплоя нужна готовая сборка с оптимизированными файлами в папке build/

npm run build

Шаг 4. Автоматический запуск с PM2

pm2 — удобный менеджер процессов для Node.js, с его помощью каждый новый коммит будет «усвоен» автоматически. Устанавливаем глобально:

sudo apt install -y curl
sudo npm install -g pm2

Запускаем приложение через конфигурационный файл:

pm2 start ecosystem.config.js
pm2 save
pm2 startup

Последняя команда создаст автозапуск после перезагрузки сервера.


Шаг 5. Установка и настройка Nginx

nginx будет выступать обратным прокси и обеспечит работу по доменному имени. Устанавливаем:

sudo apt update
sudo apt install -y nginx

Создаём конфигурацию сайта:

sudo vim /etc/nginx/sites-available/helenkapatsa

Это стартовая версия конфиги. Адаптировать ее под свои нужды помогут документация и нейронки:

server {
    listen 80;
    server_name example.com www.example.com;

    location / {
        proxy_pass http://localhost:3000; # порт вашего React-приложения или PM2 процесса
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Активируем сайт и проверяем конфигурацию:

sudo ln -s /etc/nginx/sites-available/domain/etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

Шаг 6. Получаем SSL-сертификат Let's Encrypt

Для безопасной работы сайта нужен сертификат. Установим certbot:

sudo apt install -y certbot python3-certbot-nginx

Добавим в доменном регистраторе (например, reg.ru) ресурсные записи:
A - @ - [IP-адрес сервера без портов]
А - www - [IP-адрес сервера без портов]

«Усвоение» записей обычно занимает не больше получаса.

Запустим получение сертификата:

sudo certbot --nginx -d example.com -d www.example.com

Certbot автоматически настроит Nginx на использование HTTPS. Его, правда, придется перегенерировать раз в 4 месяца. Но можно настроить и автообновление.

Бывает, что, несмотря на отсутствие правил файервола, блокирующих порты 80 и 443, генерация SSL-сертификата через Let's Encrypt падает. Это может быть связано с политиками хостинг-провайдера, NAT, или другими непрозрачными ограничениями.

Если столкнулись с такой проблемой, попробуйте сменить хостинг-провайдера — чаще всего это решает вопрос с выдачей сертификата.

Это последний шаг, теперь ваш сайт на домене, и у вас в копилке новая ачивка :)

#бэкенд #react
@tproger_web

Mobile‑first или Desktop‑first? Как выбрать с чего начать вёрстку

При запуске проекта важно определить: что приоритетнее — мобильный или десктопный интерфейс? Эта статья объясняет:

— Почему mobile‑first = UX для пальцев: удобство планшетов и смартфонов, индексирование Google.
— Когда desktop‑first выигрывает: дашборды, CRM, интерфейсы с насыщенным взаимодействием.
— Простые примеры медиазапросов (@media (min-width) vs max-width) и практические советы по написанию адаптивного CSS.

С чего обычно начинаете вы?

#фронтенд #css #адаптивность

SSE vs WebSocket: разобрались, что где лучше работает

В вебе есть множество способов обмена данными. Но наиболее популярные из них сегодня — SSE и WebSocket. При этом у них есть кардинальные различия. Например, SSE это односторонняя технология для общения сервера с клиентом, в то время как WebSocket позволяет взаимодействовать им в двухстороннем режиме.

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

#sse #websocket