اکنون در دسترس! پژوهش تلگرام ۲۰۲۵ — مهمترین بینشهای سال 
Логово верстальщика
رفتن به کانال در Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
نمایش بیشتر8 243
مشترکین
+224 ساعت
-137 روز
+1730 روز
آرشیو پست ها
8 242
🔝 Самые интересные статьи за последние дни:
• Вышел TypeScript 5.7
• Обзор на Model Context Protocol (MCP) от Anthropic
• Рецепты TypeScript: типизированное преобразование объекта
• Многослойная архитектура FrontEnd-приложений на основании SOLID, часть 2
• JavaScript. Как сделать невероятно быстрый многопоточный Data Grid на 1 000 000 строк. Часть 1/2: нюансы работы с DOM
8 242
👩💻 Реализация кнопки с таймером блокировки
Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.
Ожидаемое поведение:
• При нажатии на кнопку она становится недоступной.
• На кнопке отображается обратный отсчёт времени: 5... 4... 3....
• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.
Решение задачи🔽
<button id="timer-button">Нажми меня</button> #timer-button { padding: 10px 20px; font-size: 16px; cursor: pointer; } #timer-button:disabled { background-color: #ccc; cursor: not-allowed; } const button = document.getElementById('timer-button'); button.addEventListener('click', () => { let countdown = 5; // Деактивируем кнопку и запускаем таймер button.disabled = true; const interval = setInterval(() => { button.textContent = `Ждите... ${countdown}`; countdown--; if (countdown < 0) { clearInterval(interval); button.disabled = false; button.textContent = 'Нажми меня'; } }, 1000); });
8 242
👩💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO
Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику
Читать...
8 242
🔎 Подборка зарубежных вакансий
Frontend разработчик
🟢JavaScript, ES6, XHR/AJAX, DOM, HTML5, CSS3, Git
🟢от 2 500 до 3 500 $ | от 3 до 6 лет
Frontend-разработчик
🟢CMS WordPress, UX/UI, Figma, Adobe, HTML, CSS
🟢от 130 000 до 180 000 ₸ | Без опыта
Middle Frontend-разработчик
🟢HTML5, CSS3, JavaScript, TypeScript, React.js, Vue.js, RESTful API, GraphQL, Git, JIRA, Bitbucket, Confluence
🟢от 1 200 € | от 3 до 6 лет
Front-end developer (middle)
🟢JavaScript, Git, Node.js, TypeScript, CSS3, GraphQL, WebSocket, CI/CD, Vue.js, Svelte
🟢до 800 000 ₸ | от 3 до 6 лет
8 242
🧩 Держи всё в порядке
Хаос на рабочем столе, папки с проектами называются «Новая папка (2)», а задачи записаны в трёх разных местах? Такой беспорядок убивает продуктивность.
👉 Совет: выбери один инструмент для управления задачами (Trello, Notion или просто блокнот) и держи все свои проекты там. Организуй рабочий стол, придумай систему именования файлов и придерживайся её. Это может показаться мелочью, но мозг лучше работает в упорядоченной среде.
8 242
👩💻 Шаблон “Декоратор” в разработке на TypeScript
Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода.
Читать...
8 242
📝 Подборка вакансий для лидов
Техлид фронтенд-разработки (React и Vue)
• TypeScript, JavaScript, React, Next.js, Vue.js, Nuxt.js
• от 200 000 до 250 000 ₽ | опыт не указан
Team Lead Vue.JS/Golang (команда Promo Games)
• Vue.js, Pixi.JS, Golang, PostgreSQL, Redis
• Уровень дохода не указан | от 2 лет
Team Lead разработки (Angular)
• Angular 14+, Node.js (Nest.js), MongoDB (ORM mongoose), PostgreSQL (ORM sequelize)
• Уровень дохода не указан | от 5 лет8 242
⚙️ Что такое 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 242
🧨 Работа с куки-файлами хуже сапёрного дела
Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.
Читать...
8 242
📝 Подборка вакансий для сеньоров
Ведущий React Native разработчик
• HTML, CSS, TypeScript, React, React Native
• от 200 000 до 250 000 ₽ | от 1-3 лет
React Native Senior Developer
• Git, GitLab, iOS, React Native, JavaScript, TypeScript, Адаптивная верстка
• от 200 000 до 300 000 ₽ | от 5 лет
Senior FullStack Developer (TS, React.JS, Nest.JS)
• Linux, Docker, Redis, MongoDB, React, NestJS, TypeScript
• Уровень дохода не указан | от 4 лет
Fullstack TypeScript Developer
• TypeScript, Node.js, SQL, React, Git, Docker
• Уровень дохода не указан | опыт не указан8 242
👩💻 Text Illumination
Сцена с анимированным появлением текста. Сделана на SVG и CSS.
Открыть код...
8 242
👩💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript
В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.
Читать...
8 242
👩💻 Динамический поиск в списке
Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст.
Ожидаемое поведение:
• При вводе текста список фильтруется по введённым данным.
• Поиск нечувствителен к регистру.
• Если текстовое поле пустое, отображается весь список.
Решение задачи🔽
<input type="text" id="searchInput" placeholder="Введите текст для поиска"> <ul id="itemList"> <li>Apple</li> <li>Banana</li> <li>Orange</li> <li>Grapes</li> <li>Peach</li> </ul> const searchInput = document.getElementById('searchInput'); const itemList = document.getElementById('itemList'); const items = itemList.getElementsByTagName('li'); searchInput.addEventListener('input', () => { const filter = searchInput.value.toLowerCase(); Array.from(items).forEach((item) => { const text = item.textContent.toLowerCase(); item.style.display = text.includes(filter) ? '' : 'none'; }); });
8 242
📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер
Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.
Читать...
8 242
📝 Подборка вакансий для джунов
Frontend разработчик (React)
• React, Redux, HTML, CSS, TypeScript, Webpack
• Уровень дохода не указан | от 3 лет
Frontend developer (Angular)
• JavaScript, Angular, TypeScript, HTML5, CSS3, REST, Git, SASS, WebPack
• Уровень дохода не указан | опыт не указан
Frontend разработчик (React)
• React, TypeScript, JavaScript, Node.js, Express, Git
• Уровень дохода не указан | опыт не указан
Frontend developer (Vue.js)
• Vue.js, Nuxt.js, JavaScript, ES6, Git, REST, SASS, LESS, WebPack, Gulp, Grunt
• от 140 000 до 180 000 ₽ | опыт не указан
Frontend разработчик (Angular)
• Angular 13+, TypeScript, JavaScript, RxJs, Git, Leaflet, Ionic, Chart.js, CI/CD
• от 120 000 ₽ | опыт не указан8 242
⚙️ Что такое
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 242
👩💻 Fluid Simulation
Сцена с интересной симуляцией жидкости с текстом. Сделана на CSS и JavaScript.
Открыть код...
8 242
📝 Подборка вакансий для джунов
Junior React Разработчик
• HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass, TypeScript, Next.js, Docker, Webpack
• от 60 000 до 90 000 ₽ | опыт не указан
Разработчик Laravel и REACT в Scrum команду
• Laravel, React, REST API, Git
• от 50 000 до 1 000 000 ₽ | опыт не указан
JavaScript Developer (NGFW)
• JavaScript, React, TypeScript, Node.js
• Уровень дохода не указан | от 2 лет
Frontend разработчик (Vue.js)
• JavaScript, TypeScript, Vue.js, SASS, Gulp, WebPack, HTML, CSS
• от 50 000 до 90 000 ₽ | опыт не указан8 242
👩💻 Анимация "пульсации" кнопки
Создайте кнопку, которая при наведении начинает "пульсировать" — её размер плавно увеличивается и уменьшается в течение короткого времени.
Ожидаемое поведение:
• Кнопка остаётся статичной, пока на неё не навели мышь.
• При наведении запускается бесконечная анимация "пульсации".
• При убирании мыши анимация прекращается.
Решение задачи🔽
<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); } }
