Telegram Web Link
Репозиторий, в котором собраны лучшие практики по тестированию JavaScript и Node.js приложений

Подборка советов составлена на основе десятков статей, книг и инструментов:
— cтруктура тестов,
— тесты для бэкенда и микросервисов,
— UI-тесты для веб-компонентов,
— анализ эффективности тестов,
— настройка CI.

Сохраните, чтобы не потерять: https://github.com/goldbergyoni/javascript-testing-best-practices

#javascript #nodejs #тестирование #лучшиепрактики
👍6🔥21
Бэкенд без боли: что нужно знать фронтендеру

Вы начали разбираться во фронтенде, уже пишете интерфейсы и подключаете данные. Но тут появляется слово вроде «rate limiting» — и всё, паника.

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

Этот материал — как мини-гид по миру бэкенда для тех, кто с ним только начинает сталкиваться. Без лишней теории, коротко, по делу, простыми словами. Чтобы не просто копировать чужие fetch-запросы, а понимать, как всё устроено.

#фронтенд #бэкенд
🔥102👍1
Vue Watch & WatchEffect: не просто реактивность — гибкий контроль

Как работают watch и watchEffect можно узнать из документации Vue. А в этой статье вы узнаете, как их можно применять не просто для отслеживания переменных, а чтобы контролировать API-запросы, выполнять побочные эффекты и управлять логикой реактивности в Vue, избегая грязного кода.

#фронтенд #vue
3👍2
#простымисловами: Что такое FOUС и как его избежать

FOUC раздражает пользователей, но есть простые и эффективные способы его избежать.

В этом посте мы разобрали для вас, что это такое, почему возникает и как его избежать!

#фронтенд #fouc
👍74🔥2😁2👎1
Virtual Mirror Library — библиотека виртуального макияжа и онлайн примерки аксессуаров

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

Здесь автор рассказала, как ей пришла в голову эта идея и как она её реализовала. Код, основные вехи проекта и инструкция по использованию также ждут вас внутри статьи.

Мужики, делитесь фотками тестов 😤

#фронтенд #javascript
Please open Telegram to view this post
VIEW IN TELEGRAM
😁3🤔3
Media is too big
VIEW IN TELEGRAM
Жидкие эффекты на CSS

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

#фронтенд #css
13🤩5😁2💩2
Скример для новичков
😁21🤯41
Blur без JS: как CSS создаёт размытые заглушки для изображений

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

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

#фронтенд #css #lqip
🔥63
Media is too big
VIEW IN TELEGRAM
Бесконечная скролл-галерея

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

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

#codepen
5👍2
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 #основы
👍25💩8🔥2
Почему ваше приложение тормозит: архитектурные bottlenecks, которые никто не замечает

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

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

#nodejs

@backend_tproger | Другие наши каналы
👍1🔥1
2025/07/10 23:39:17
Back to Top
HTML Embed Code: