现已上线！2025 年 Telegram 研究 — 年度关键洞察 
Логово верстальщика
前往频道在 Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
显示更多8 252
订阅者
-624 小时
-197 天
+7230 天
帖子存档
8 251
👩💻 Как выбрать библиотеку для управления состоянием в Vue.js
Веб-разработка тесна связана с управлением состоянием, особенно если это касается сложных структур. Рассказываем, какие библиотеки помогут в этом и какие у них есть преимущества.
Читать...
8 251
🔍 Как найти утечки памяти на сайтах и в веб-приложениях
Утечки памяти мешают пользователям долго работать с вашим веб-приложением – из-за них можно потерять аудиторию. Попробуем разобраться как этого издежать.
Читать...
8 251
⚙️ Что такое Content Security Policy (CSP) и зачем она нужна?
Content Security Policy (CSP) — это механизм безопасности, ограничивающий источники загружаемого контента на веб-странице. CSP помогает предотвращать атаки XSS и другие угрозы, задавая правила через HTTP-заголовок или
<meta>.
➡️ Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.example.com;">
<title>Пример CSP</title>
</head>
<body>
<script src="https://apis.example.com/library.js"></script>
<script>
// Этот скрипт выполнится, так как он разрешен
console.log("Скрипт из разрешенного источника работает.");
</script>
<script>
// Этот скрипт нарушит политику CSP, так как он inline
alert("Inline скрипт заблокирован!");
</script>
</body>
</html>🗣️ В этом примере политика CSP разрешает загрузку ресурсов только с того же домена ('self') и скриптов с определенного внешнего источника. Inline-скрипты и неразрешенные ресурсы будут заблокированы, повышая безопасность приложения.🖥 Подробнее тут
8 251
🧨 Работа с куки-файлами хуже сапёрного дела
Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.
Читать...
8 251
👩💻 Text Illumination
Сцена с анимированным появлением текста. Сделана на SVG и CSS.
Открыть код...
8 251
👩💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript
В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.
Читать...
8 251
🎨 UI для разработчика — это тоже UI
Ты сделал админку, отладочный дашборд или просто лог-страницу. Вроде «только для себя» — но ты в ней путаешься.
👉 Совет: даже если интерфейс внутренний, подходи к нему как к продукту. Сделай удобно, понятно, визуально чисто. Чем меньше усилий тратится на навигацию — тем больше остаётся на работу.
8 251
⚙️ Что такое
box-shadow в CSS и как оно работает?
box-shadow — это свойство CSS, которое добавляет тень к элементу. Оно позволяет задавать смещение, размытие, размер растушёвки и цвет тени.
➡️ Пример:
<div class="box">Я с тенью</div>
<style>
.box {
width: 200px;
height: 100px;
background: lightblue;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Смещение и размытие тени */
}
</style>🗣️ В этом примере box-shadow добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.🖥 Подробнее тут
8 251
👩💻 Fluid Simulation
Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript.
Открыть код...
8 251
👩💻 Анимация "пульсации" кнопки
Создайте кнопку, которая при наведении начинает "пульсировать" — её размер плавно увеличивается и уменьшается в течение короткого времени.
Ожидаемое поведение:
• Кнопка остаётся статичной, пока на неё не навели мышь.
• При наведении запускается бесконечная анимация "пульсации".
• При убирании мыши анимация прекращается.
Решение задачи🔽
<button class="pulse-button">Наведи на меня</button> .pulse-button { padding: 10px 20px; font-size: 16px; color: white; background-color: #28a745; border: none; border-radius: 8px; cursor: pointer; transition: transform 0.2s ease; } .pulse-button:hover { animation: pulse 1s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
8 251
👩💻 TypeScript в деталях: настраиваем tsconfig.json правильно
Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.
Читать...
8 251
🔝 Самые интересные статьи за последние дни:
• Упрощаем CSS-анимации с помощью свойств display и размеров элемента
• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года
• Возможности поля HTML-документа, часть 2. Внедряем CSS и JS
• Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке
• Разработка Task Manager с нуля до полнофункционального продукта
8 251
👩💻 Подсчёт частоты элементов в массиве
Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений.
Пример:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}function countFrequency(array) { return array.reduce((acc, item) => { acc[item] = (acc[item] || 0) + 1; return acc; }, {}); } // Пример использования: const input = [1, 2, 2, 3, 4, 3, 5, 3]; const result = countFrequency(input); console.log(result); // Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
8 251
👩💻 Улучшение производительности с делегированием событий
Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.
Читать...
8 251
Если ты ищешь работу в IT «как все» — готовься сидеть на 50–70к и жаловаться, что рынок перегрет.
Истина простая: hh и резюме в стиле «я джун без опыта» = путь в никуда, ведь 90% новичков остаются джунами навсегда.
Меня зовут Алексей Кирилин. Я прошёл путь от ноунейма до оффера на 300к+.
И я знаю, как реально устроиться на первую работу с зарплатой от 150к.
У себя показываю:
— вакансии, куда берут без опыта (но ты о них не знаешь, ведь они не на hh)
— схема прохождения собеседований, которая ломает сценарий рекрутера
— упаковка резюме так, чтобы тебя не скипали.
В закрепе — стратегия выхода на 150к без опыта, конкретный рабочий план.
Хочешь жирный оффер — ЖМИ
8 251
👩💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий
Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки.
Читать...
8 251
Бесплатный курс по дизайну: веб, графический и UX/UI
Получи востребованные навыки:
- создание дизайна сайтов и приложений
- создание инфографики и карточек для маркетплейсов
- работа в графическом редакторе Figma и др.
Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰
Зарегистрироваться
#реклама 16+
ydaev.ru
О рекламодателе
8 251
👩💻 Переходите на сторону light-dark()
Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.
Читать...
8 251
👩💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда
Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.
Читать...
