Логово верстальщика
8.21K subscribers
991 photos
48 videos
4 files
1.5K links
Канал для верстальщиков с инфой о HTML и CSS, а так же JavaScript на уровне верстальщиков.

Канал на бирже - https://telega.in/c/webdevlair

По вопросам рекламы или разработки: @g_abashkin
Download Telegram
👩‍💻 Откройте для себя весь потенциал AbortController

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Hover Glyph Button

Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
👩‍💻 Тонкая настройка текстовых полей

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Две мощные техники: CSS Reset и normalize.css

В современной веб-разработке CSS сброс и нормализация — две важные техники, позволяющие добиться согласованности стилей в разных браузерах.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Использование CSS анимации, основанной на прокрутке, для индикации прогресса прокрутки на основе секций

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
👩‍💻 Новый оператор безопасного присваивания в JavaScript: ?=

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👎1
🎛 Разделяй зоны ответственности в голове, не только в коде

Ты отвечаешь за архитектуру, а ещё за баги, а ещё за багфиксы, а ещё за багфиксы багфиксов? Психическая нагрузка растёт, даже если задач немного.

👉 Совет: распределяй мышление по режимам: отдельно — для глубокой разработки, отдельно — для поддержки, отдельно — для хаоса и фаерфайтинга. Сознательное переключение режимов помогает держать контроль и меньше уставать.
👍2
👩‍💻 Создание анимации орбиты с помощью CSS переменных

Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
👩‍💻 String ends with?

Завершите решение так, чтобы оно возвращало значение true, если переданный первый аргумент (строка) заканчивается 2-м аргументом (также строкой).

Пример кода:

solution('abc', 'bc') // returns true
solution('abc', 'd') // returns false


Решение задачи🔽

function solution(str, ending) {
return ending === '' || str.slice(-ending.length) === ending;
}

// Примеры использования
console.log(solution('abc', 'bc')); // возвращает true
console.log(solution('abc', 'd')); // возвращает false
console.log(solution('abc', '')); // возвращает true
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
👩‍💻 Практические советы по доступности, которые можно применить сегодня

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
👩‍💻 Создание навигации с «плавающим» фоном ссылок на чистом CSS

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
👩‍💻 On-Scroll Fire Transition

Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript.

Открыть код...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
⬇️ Бесконечная прокрутка логотипов на чистом HTML и CSS

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
👩‍💻 Анимация элемента dialog

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

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
⚡️ Как развернуть Supabase в облаке Timeweb Cloud

В статье расскажем, как Supabase — бесплатный аналог Google Firebase — помогает разработчикам быстро создавать приложения и сайты. Узнаете, как работать с базой данных, аутентификацией, хранением файлов и реальным временем, без необходимости управлять сервером.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🔍 Maskito: то, что вы давно искали

В этой статье рассмотрим, как форматировать ввод данных в формах для удобства пользователей. Обсудим проблемы существующих библиотек маскирования и предложим более эффективное собственное решение.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Что, если использовать контейнерные единицы измерения для... всего

Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться!

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
👩‍💻 Как прослушивать несколько событий в веб-компоненте

Сегодня поговорим о том, как использовать handleEvent() для обработки нескольких типов событий.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
➡️ Руководство по Convex. Часть 1

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

Читать...
Please open Telegram to view this post
VIEW IN TELEGRAM
🧠 Умей держать «рабочий контекст» в памяти

Самое страшное в переключении задач — не потерянное время, а сброшенное состояние мозга. Забываешь, о чём думал, и заново восстанавливаешь цепочку.

👉 Совет: перед переключением запиши текущее состояние: что делал, что осталось, какие идеи были на подходе. Даже короткий текстовый файл спасает от "А где я вообще остановился?"
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍2