Всё по фронтенду, бэкенду и девопсу в одном месте Разместить рекламу: @tproger_sales_bot Правила общения: https://tprg.ru/rules Другие каналы: @tproger_channels Сайт: https://tprg.ru/site Регистрация в перечне РКН: https://tprg.ru/64ai
var, let, const — в чём разница?
В JavaScript есть три способа объявить переменную. Все они ведут себя по-разному. Разберём детально, но простыми словами, чтобы больше не было путаницы.
🟡 var — привет из прошлого
Особенности:
🔁 Область видимости: не блочная, а функциональная
🔼 Всплывает (hoisting) — поднимается вверх функции, но без значения
🔄 Можно переобъявить и изменить
😵 Может вести себя неожиданно
if (true) {
var a = 1;
}
console.log(a); // 1 — переменная "вышла" из блока
console.log(b); // undefined — переменная есть, но ещё без значения
var b = 2;
if (true) {
let c = 10;
}
console.log(c); // ❌ ReferenceError — переменная вне блока
let d = 5;
let d = 6; // ❌ тоже ошибка — уже объявлена
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
— только если пишете поддержку старого кода. В новом — не надо.Blur без JS: как CSS создаёт размытые заглушки для изображений
Представьте: на вашем сайте вместо сплошной пустоты или блоков скачут удобные размытые заглушки (LQIP
), и всё это срабатывает без JavaScript, обёрток и лишней разметки. При этом цвет заглушек не выбирается вручную под каждую картинку, а подставляется автоматически на основе цветов изображения. Один кастомный CSS-переменный --lqip
, немного битовой арифметики и радиальные градиенты — и браузер сам создаёт нужный LQIP-плейсхолдер.
Код битовой упаковки, ограничения css calc()
, градиенты в сетке 3×2 и другие детали уже ждут вас в статье: https://leanrada.com/notes/css-only-lqip/
#фронтенд #css #lqip
Жидкие эффекты на CSS
Этот 6‑минутный ролик показывает, как с помощью только CSS создать плавное «жидкое» движение в фонах, кнопках и карточках с эффектом растекающейся жидкости. Урок идеально подходит, если вы хотите добавить анимацию без нагрузки JS и расширить визуальный арсенал интерфейса.
#фронтенд #css
#простымисловами: Что такое FOUС и как его избежать
FOUC раздражает пользователей, но есть простые и эффективные способы его избежать.
В этом посте мы разобрали для вас, что это такое, почему возникает и как его избежать!
#фронтенд #fouc
Бэкенд без боли: что нужно знать фронтендеру
Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.
На этом этапе многим не хватает простой вещи — базового словаря. Понять, что происходит «на той стороне», помогает даже знание пары ключевых терминов.
Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.
#фронтенд #бэкенд
Хватит искать работу в одиночку!
Ты крутой айтишник, но поиск работы превращается в квест: бесконечные резюме, где важны не навыки, а кейворды, десятки собеседований и постоянный стресс. Знакомо? Всё это выматывает и демотивирует. Мы тебя понимаем — и готовы поддержать!
Команда Tproger открывает первое реалити-шоу в Телеграм о поиске работы — «Код найма».
Вместе с опытными менторами ты пройдешь все этапы найма:
➡️ Прокачаешь резюме так, чтобы его заметили
➡️ Научишься проходить собеседования без волнения
➡️ Получишь честную обратную связь от рекрутеров
➡️ И, главное, дойдёшь до оффера в компании мечты!
Весь путь будет проходить на глазах у подписчиков канала — они тоже смогут давать советы и поддерживать тебя.
Хочешь стать героем нашего реалити и получить шанс найти работу мечты?
✍️ Заполняй анкету
Мы выберем трёх участников, которым поможем пройти весь путь до оффера.
Присоединяйся к «Коду найма» — и пусть твой следующий оффер станет началом новой жизни!
Краткая история JavaScript
В этом году JavaScript исполняется 30 лет. За это время язык прошёл путь от 10‑дневного прототипа до платформы, питающей серверы, приложения и AI-инструменты.
В статье — ключевые вехи эволюции: появление XMLHttpRequest, Node.js, TypeScript, Deno, Bun и даже планы TS на Go. Здесь вы получите не просто хронологию, а понимание, как JavaScript меняет мир разработки.
#javascript #историяit
CSS Custom Highlight API: стилизуйте текст, не ломая DOM
Представьте, что выделять важные фразы можно не вставляя <span>
, да ещё с управлением из JavaScript. CSS Custom Highlight API позволяет создавать стилизованные диапазоны текста почти без изменений в DOM-структуре. От ::selection
до пользовательских псевдо-элементов стили — всё настраивается через JS и CSS, а документация показывает примеры применения и текущую поддержку браузеров.
Подробности по ссылке: https://tproger.ru/articles/css-custom-highlight-api
#фронтенд #css #api
Чек-лист для проверки доступности вашего сайта для всех пользователей
Хорошая и важная статья, в которой обсуждается доступность сайтов для всех пользователей. Контрольный список включает тестирование с помощью инструментов проверки специальных возможностей, использование семантического HTML, использование альтернативного текста для изображений и пиктограмм и других возможностей.
Несложное, но большое дело — проверить свой сайт на выполнение всех пунктов.
#тестирование #лучшиепрактики #интерфейс
Video To ASCII Art
Энтузиаст сделал проект, который превращает короткие видео в ASCII-арт. Проект реализован с помощью CSS и JavaScript.
По ссылке можно посмотреть код проекта и попробовать воспроизвести различные видео: https://codepen.io/konstantindenerz/pen/YzgRQZj
#codepen
Одна переменная на три мира: как синхронизировать значение между HTML, CSS и JavaScript
В статье Крис Койер показывает, как установить переменную size
в Pug и передать её одновременно в HTML (для генерации сетки), CSS (через --size
для настройки grid-template-columns) и JavaScript (через window.size
для навигации по стрелкам). Простой приём, который позволяет управлять интерфейсом из одного источника данных.
#фронтенд #pug #css #javascript
буквально: *у нас есть Железный человек дома*
Разраб сделал интерфейс для интерактивной работы с БД почти как у Тони Старка. Чуть-чуть лагает, конечно, но завораживает!
@your_tech
MVP на Flask, а платите как за стартап: как «простое» приложение вышло на $2000 в месяц
Многие думают, что простой стек = дешёвое обслуживание. Но как только появляются очереди, вебсокеты, графики и AI — даже скромный проект обрастает сервисами и инфраструктурой, а за облачные ресурсы внезапно уходит больше, чем на саму разработку.
В этой статье — путь от MVP на Flask до продакшна с Kubernetes, балансировкой и мониторингом, который стоит как SaaS среднего уровня.
А сколько стоит поддержка вашего проекта?
#бэкенд #инфраструктура #devops
Docker для инженеров: 6 приёмов, которые выведут вас за пределы docker build
Если вы используете Docker только для запуска контейнеров, пора углубиться. В статье — шесть практик, которые помогут выйти за рамки docker build и научат думать как инженер.
#бэкенд #devops #docker
Бесконечная скролл-галерея
Полезный проект для тех, кто изучает создание частых элементов сайтов. Тут вы увидите, как можно реализовать галерею изображений с бесконечной прокруткой, а также с анимацией разворота карточек в галерее.
Можете прям так и забирать к себе на сайт или доработать на ваш вкус.
#codepen
Virtual Mirror Library — библиотека виртуального макияжа и онлайн примерки аксессуаров
Приложений, которые поддерживают онлайн-примерку косметики, одежды или даже мебели в квартире, сегодня много. Но на этот раз предлагаю вам оценить проект, который не требует установки и работает прямиком из браузера.
Здесь автор рассказала, как ей пришла в голову эта идея и как она её реализовала. Код, основные вехи проекта и инструкция по использованию также ждут вас внутри статьи.
Мужики, делитесь фотками тестов 😤
#фронтенд #javascript
Vue Watch & WatchEffect: не просто реактивность — гибкий контроль
Как работают watch
и watchEffect
можно узнать из документации Vue. А в этой статье вы узнаете, как их можно применять не просто для отслеживания переменных, а чтобы контролировать API-запросы, выполнять побочные эффекты и управлять логикой реактивности в Vue, избегая грязного кода.
#фронтенд #vue
Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений
Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.
Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices
#javascript #nodejs #тестирование #лучшиепрактики
CSS-стилизация курсоров нового уровня
Представьте не просто смену стрелки, а настоящий динамичный указатель: текст внутри, плавные анимации, фильтры и смена состояния при клике — всё это возможно благодаря JavaScript поверх CSS.
В статье показано, как превратить обычный <div>
в кастомный курсор, который отслеживает движение мыши, меняет внешний вид при отдельных состояниях и автоматически отключается на тач-устройствах и при запросе снижения анимации.
#фронтенд #css #ux
Интересный codepen-проект: Book Writing Animation
Анимация набора текста сделана при помощи пакета typewriter-effect
. Он позволяет создать зрелищные и динамичные эффекты печати текста на веб-страницах.
Исходники: https://codepen.io/wakana-k/pen/bGxaoNv
#codepen
Перенаправления в Angie: return, rewrite и примеры их применения
Сколько времени вы тратите на настройку location
, rewrite
и редиректы в Nginx? Angie упрощает это до пары строк: return 301
для HTTPS, rewrite
с регулярками и даже спец-код 444
для «отсечения ботов». Готовьтесь управлять запросами элегантно и безопасно — без избыточной конфигурации.
Все подробности — в статье.
#бэкенд #angie
Революция в условном рендеринге React
Если вам надоело писать if
, &&
и ? :
в каждом React-компоненте, эта статья — находка. Здесь показано, как использовать декларативные абстракции (<Show>
, <Switch>
, <Match>
) в React, вдохновившись стилем SolidJS, чтобы сделать условный рендер читаемым и масштабируемым. А ещё — как эти паттерны можно адаптировать под ваш собственный фреймворк.
#react
CORS от А до Я: как не ломать фронт ради бэкенда
Ошибка CORS — один из самых частых стоперов на стыке фронта и API. В статье по шагам разбирается, зачем вообще нужен механизм Cross-Origin, какие бывают типы запросов, как устроен preflight и в чём чаще всего ошибаются разработчики. Плюс — готовые конфиги для разных серверов, чтобы настроить CORS правильно с первого раза.
#cors
#простымисловами: Что такое Web Worker
Web Worker — это способ запустить тяжёлую задачу в браузере в фоновом потоке, не тормозя интерфейс.
Зачем он нужен
В браузере весь ваш JavaScript обычно работает в одном потоке — основном.
И если вы запускаете что-то тяжёлое (например, сложные вычисления или работу с большими данными), страдает весь интерфейс: кнопки не нажимаются, анимации замирают, скролл лагает.
Чтобы избежать этого, тяжёлую работу можно вынести в Web Worker. Тогда основная страница продолжит работать плавно.
Как это работает
Вы создаёте отдельный файл со скриптом, который будет работать в фоне:
// worker.js
self.onmessage = function(event) {
const result = event.data * 2;
self.postMessage(result);
};
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
console.log('Результат от воркера:', event.data);
};
worker.postMessage(21); // отправляем 21, получаем 42
postMessage
и onmessage
. Вы как бы обмениваетесь сообщениями между потоками.alert
, prompt
, confirm
.Как выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ
Можно ли выучить CSS и HTML и стать фронтендером бесплатно, не покупая курсы от онлайн-школ? Узнали у экспертов, какими источниками пользоваться, чтобы начать карьеру во фронтенде: https://tproger.ru/articles/kak-besplatno-vyuchit-html-i-css
#фронтенд
От монолита к микросервисам: реальный кейс развёртывания сайта на Spring Boot + Angular SSR с Docker и Nginx
У нас на сайте появилась статья, где автор делится практическим опытом перехода от монолитного приложения к микросервисной архитектуре с использованием Spring Boot и Angular SSR. В ней подробно описаны этапы:
— настройки Docker Compose;
— интеграции Nginx;
— настройки HTTPS;
— и решения проблем с CORS.
Также рассматриваются способы защиты от ботов и оптимизации конфигурации для стабильной работы сайта.
#java #docker #springboot #angular #nginx
От подписчика: Как работают generics в TypeScript на реальном примере
Вам когда-нибудь приходилось писать универсальную функцию, которая работает с разными типами данных — и при этом хочется сохранить строгую типизацию? Именно для таких случаев в TypeScript есть generics. Концепция, знакомая по Java, C#, Kotlin и даже Rust или Go, здесь реализована лаконично и мощно.
🔍 Когда это действительно нужно
Представим задачу: есть сервис генерации изображений. В зависимости от исполнителя (например, OpenAI или DeepAI) параметры запроса могут отличаться. Чтобы избежать ошибок и сделать код устойчивым к изменениям, можно связать тип исполнителя с набором параметров с помощью generics.
📦 Типы параметров:
export type OpenAIImageGenerationType = {
contentId: string;
buffer: Buffer;
prompt: string;
};
export type DeepAIImageGenerationType = {
contentId: string;
gender: GenderType;
n: number;
};
export enum GenerationExecutorTypeEnum {
DEEP_IMAGE_GENERATION = 'deep_image_generation',
OPEN_IMAGE_GENERATION = 'open_image_generation'
}
export type ExecutorToParamsMap = {
[GenerationExecutorTypeEnum.OPEN_IMAGE_GENERATION]: OpenAIImageGenerationType;
[GenerationExecutorTypeEnum.DEEP_IMAGE_GENERATION]: DeepAIImageGenerationType;
};
export type GenerationJobType<E extends keyof ExecutorToParamsMap> = {
name: string;
executor: E;
params: ExecutorToParamsMap[E];
timeout?: number;
};
class JobImageGenerationService {
async createGenerationJob<E extends keyof ExecutorToParamsMap>(
incomingJob: GenerationJobType<E>
): Promise<void> {
// Тут мы уверены, что переданы нужные параметры под нужного исполнителя
}
}
await this.jobImageGenerationService.createGenerationJob({
name: "generate_image",
executor: GenerationExecutorTypeEnum.DEEP_IMAGE_GENERATION,
params: {
contentId,
gender,
n,
}
});