Логово верстальщика

👩‍💻 Как реализовать наследование в JavaScript: 7 способов Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач. Читать...

🔝 Самые интересные статьи за последние дни: • OAuth 2.0, OpenID Connect и SSO для самых маленьких • 250 000 товаров и миллионы характеристик: как мы скрестили Битрикс с Symfony и MongoDB • JavaScript-фреймворки и библиотеки, на которые стоит обратить внимание в 2025 году • Onlyoffice и Р7 офис: макросы на Javascript (туториал) • Призываю переименовать Layers в Feature-Sliced Design методологии

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition. Читать...

⚙️ Предзагрузка отзывчивых изображений Статья объясняет, как правильно предзагружать отзывчивые изображения, чтобы ускорить загрузку страниц. Рассматривается взаимодействие предзагрузки с решениями браузера для выбора изображений под устройство. Читать...

👩‍💻 Обзор наследования в JavaScript Статья изучает различные шаблоны наследования в JavaScript, основанные на прототипах. Обсуждаются их преимущества и применение в зависимости от задач для оптимального управления объектными отношениями. Читать...

👩‍💻 Реализация кнопки с таймером блокировки Создайте кнопку, которая становится недоступной (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); });

👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику Читать...

👩‍💻 Шаблон “Декоратор” в разработке на TypeScript Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода. Читать...

🧨 Работа с куки-файлами хуже сапёрного дела Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами. Читать...

🪞 Читай свой код через день Когда пишешь, всё кажется логичным. Но стоит отойти — и через сутки видишь хаос. 👉 Совет: откладывай код на ночь. Утром перечитай свежим взглядом — часто сам найдёшь то, что коллеги заметили бы на ревью. Это маленький хак для самопроверки.

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий. Читать...

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий. Читать...

📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript. Читать...

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

📈 Подборка статей для вашей карьеры • Как ручному тестировщику стать автоматизатором? • Сколько времени тратить на работу? • Найм дизайнеров глазами лида • Software Architect vs Solution Architect • От юношеской мечты до реализации, верхом на депрессии

Онлайн-магистратура с IT специальностями от Яндекса Совместно с ИТМО, МИФИ, МФТИ. Онлайн-магистратура с актуальными программами и гибким графиком обучения. Получите высокооплачиваемую IT профессию, официальный диплом и практические знания. Господдержка оплаты. Совмещение с работой! Подать заявку #реклама 16+ О рекламодателе

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов. Читать...

👩‍💻 Улучшение производительности с делегированием событий Статья объясняет технику делегирования событий в веб-разработке, показывая, как использование одного слушателя на родительском элементе упрощает управление событиями и повышает производительность. Читать...

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий Если вы погружены в мир судоку, то наверняка ищете варианты ускоренного решения задач по программированию. Предлагаем ознакомиться с одним из них. Использование в нем хэш-карт и рекурсий значительно ускоряет решение головоломки. Читать...

👩‍💻 Переходите на сторону light-dark() Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя. Читать...