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

👩‍💻 Анимация элемента dialog Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete. Читать...

⬇️ Бесконечная прокрутка логотипов на чистом HTML и CSS Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции. Читать...

👩‍💻 Создание навигации с «плавающим» фоном ссылок на чистом CSS Если у вас есть аккаунт на Vercel, вы, наверное, замечали, как плавно фон ссылок в панели навигации перемещается, следуя за курсором мыши. Такого эффекта несложно добиться с помощью CSS и нескольких строчек JS. Однако, интереса ради, я решил попробовать добиться похожего эффекта на чистом CSS. Читать...

🧭 Не пиши код с пустой головой Ты можешь открыть редактор, начать писать «на ходу», и через полчаса не понимать, куда вообще двигался. 👉 Совет: перед началом — сформулируй цель словами. Прямо в коде, комментарием: “эта функция должна делать X при условии Y”. Это фокусирует мышление и снижает шанс, что ты уйдёшь не туда.

👩‍💻 Практические советы по доступности, которые можно применить сегодня Иногда, спеша уложиться в сроки, мы не задумываемся о доступности. Но пара небольших изменений может значительно улучшить сайт для всех пользователей, независимо от их возможностей и устройств. Читать...

👩‍💻 Создание анимации орбиты с помощью CSS переменных Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной. Читать...

👩‍💻 7 полезных HTML-трюков для веб-разработчиков Представляем семь HTML-приемов, которые помогут вам создавать более удобные и привлекательные сайты, улучшая взаимодействие с пользователями. Читать...

📈 Подборка статей для вашей карьеры • Тримодальный характер зарплат разработчиков • Иллюзия прогресса: почему мне не удалось дать студентам-айтишникам реальный опыт • Из подземелья в QA: как и почему я перешёл в тестирование после 14 лет работы сисадмином в метрополитене • Interview copilots: как кандидаты используют ChatGPT на интервью • Моя история входа в IT: как я ломал стены своих ограничений

👩‍💻 Новый оператор безопасного присваивания в JavaScript: ?= В современной разработке на JavaScript для асинхронной работы и обработки ошибок часто применяются try-catch и async-await, что утяжеляет код. Новый оператор ?= упрощает обработку ошибок и улучшает читаемость. В статье рассматриваются его работа, особенности и преимущества. Читать...

👩‍💻 Использование CSS анимации, основанной на прокрутке, для индикации прогресса прокрутки на основе секций Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль. Читать...

👩‍💻 Две мощные техники: CSS Reset и normalize.css В современной веб-разработке CSS сброс и нормализация — две важные техники, позволяющие добиться согласованности стилей в разных браузерах. Читать...

⁉️ Хотите узнать, как устроен рабочий процесс в ML и получить базовые навыки работы с данными? 23 июля в 20:00 МСК OTUS проводит открытый урок «ML для начинающих – первые шаги с Jupyter Notebook». Вас ждёт: – Обзор этапов машинного обучения: от подготовки данных до первой модели. – Настройка виртуального окружения для изоляции экспериментов. – Знакомство с Jupyter Notebook: анализ, визуализация, код и Markdown вместе. Этот урок — идеальная отправная точка перед стартом курса «Специализация Machine Learning». Все участники получат скидку на обучение. ➡️ Регистрация открыта: https://vk.cc/cNV4VG Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, erid: 2Vtzqw4vmLU

👩‍💻 Hover Glyph Button Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript. Открыть код...

👩‍💻 Тонкая настройка текстовых полей Веб формы и поля ввода поддерживают множество дополнительных атрибутов, способных дать подсказку браузеру и улучшить пользовательский опыт заполнения форм в Интернете. Приложив совсем немного дополнительных усилий, можно сделать так, чтобы формы помогали, а не мешали. Читать...

👩‍💻 Откройте для себя весь потенциал AbortController В этой статье я расскажу об одном из стандартных API JavaScript, о котором, вы, возможно не слышали. Это AbortController. Читать...

😈 Разработчики dzen.ru, что с вами не так? Статья о сайте дзен, точнее об отсутсвии простого и известного фунционала на нём, который есть почти на каждом форуме. В статье много боли и вопросов, почему так могло произойти. Подключайтесь, будем выяснять вместе. Читать...

👩‍💻 Collapsible Timeline Таймлайн с возможностью раскрывать пункты. Сделан на SVG, CSS и JavaScript. Открыть код

👩‍💻 Предоставление определения типа для CSS с @property Пишите более безопасный CSS, используя @property, позволяющий определять типы для пользовательских свойств. Узнайте, почему традиционные запасные значения могут не сработать и как функции @property повышают устойчивость определений пользовательских свойств. Читать...

🕶 Оптимизируй не код, а точки фрустрации Часто мы тратим часы на «ускорение» функции, которую никто не замечает. А вот неудобный скрипт билда бесит всю команду каждый день. 👉 Совет: ищи, где чаще всего замирает поток работы — неудобный лог, лишний клик, нестабильная сборка. Оптимизируя эти точки, ты повышаешь продуктивность не на проценты, а в разы.

🔝 Эффективные способы реализации паттерна Singleton в JavaScript и TypeScript Рассказываем о лучших подходах к созданию паттерна Singleton в JavaScript и TypeScript. Также обсудим его плюсы и возможные недостатки при использовании в проектах. Читать...