Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
Логово верстальщика
Открыть в Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
Больше8 227
Подписчики
-624 часа
-147 дней
-1530 день
Архив постов
8 227
⚙️ Что такое 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 227
🧨 Работа с куки-файлами хуже сапёрного дела
Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.
Читать...
8 227
👩💻 Text Illumination
Сцена с анимированным появлением текста. Сделана на SVG и CSS.
Открыть код...
8 227
👩💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript
В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.
Читать...
8 227
🎨 UI для разработчика — это тоже UI
Ты сделал админку, отладочный дашборд или просто лог-страницу. Вроде «только для себя» — но ты в ней путаешься.
👉 Совет: даже если интерфейс внутренний, подходи к нему как к продукту. Сделай удобно, понятно, визуально чисто. Чем меньше усилий тратится на навигацию — тем больше остаётся на работу.
8 227
Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Попробовать
#реклама
yandex.ru
О рекламодателе
8 227
⚙️ Что такое
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 227
👩💻 Fluid Simulation
Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript.
Открыть код...
8 227
👩💻 TypeScript в деталях: настраиваем tsconfig.json правильно
Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.
Читать...
8 227
🔝 Самые интересные статьи за последние дни:
• Упрощаем CSS-анимации с помощью свойств display и размеров элемента
• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года
• Возможности поля HTML-документа, часть 2. Внедряем CSS и JS
• Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке
• Разработка Task Manager с нуля до полнофункционального продукта
8 227
👩💻 Подсчёт частоты элементов в массиве
Напишите функцию, которая принимает массив и возвращает объект, где ключи — это уникальные элементы массива, а значения — количество их вхождений.
Пример:
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 227
👩💻 Улучшение производительности с делегированием событий
Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность.
Читать...
8 227
👩💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий
Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки.
Читать...
8 227
👩💻 Переходите на сторону light-dark()
Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.
Читать...
8 227
👩💻 10 лучших CSS-библиотек и фреймворков для быстрой разработки фронтенда
Запутался в CSS-фреймворках? Мы собрали ТОП-10 самых крутых инструментов, которые реально экономят время на фронтенде. От тяжеловеса Bootstrap до минималистичного Milligram – разобрали плюсы каждого и объяснили, когда что использовать.
Читать...
8 227
👩💻 Signature animation
Поле для ввода подписи с интересной анимацией. Сделана на SVG, CSS и JavaScript.
Открыть код...
8 227
👩💻 Кнопка с "волновым" эффектом
Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика.
Ожидаемое поведение:
• При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение.
• Анимация должна быть плавной и не мешать повторным кликам.
Решение задачи🔽
<button class="ripple-button">Нажми меня</button> .ripple-button { position: relative; overflow: hidden; padding: 10px 20px; font-size: 16px; color: white; background-color: #007BFF; border: none; border-radius: 4px; cursor: pointer; } .ripple-button .ripple { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 0.6s linear; background-color: rgba(255, 255, 255, 0.6); } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } document.querySelector('.ripple-button').addEventListener('click', function (event) { const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`; ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`; ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`; ripple.className = 'ripple'; this.appendChild(ripple); ripple.addEventListener('animationend', () => ripple.remove()); });
8 227
Техника мечты со скидками до 90%
Ищете новые SSD, смартфон или холодильник? 11.11 на Wildberries — топовая техника со скидками до 90%. Не ждите особого случая: один клик — и всё нужное у вашей двери!
Узнать больше
#реклама
wildberries.ru
О рекламодателе
8 227
👩💻 Стрелочная функция vs. обычная функция в JavaScript
Статья раскрывает ключевые отличия между стрелочными и обычными функциями в JavaScript, объясняя их влияние на выполнение кода. Рассматриваются ситуации, в которых предпочтителен каждый тип функций.
Читать...
