Будни разработчика

2023-07-07 12:22:50 #фишка дня

Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.

Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.

Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.

#html #button #label #бородач Открыть/Комментировать

2023-07-07 09:07:06 Прекрати мечтать и стань мидлом за 50 дней

Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих.

Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.

JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.

JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке.

CSS доширак — готовые анимации, hover-эффекты и прелоадеры, которые можно вставить в свой проект и настроить пока заваривается Доширак.

Развивайся с нами, ведь так проще! Открыть/Комментировать

2023-07-07 06:59:56 #инструмент дня

С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?

Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm

Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.

Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...

Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.

Моя рекомендация!

#npm #node #package Открыть/Комментировать

2023-07-06 18:04:56 #видео дня

Вы спорили об этом всю свою карьеру. Делали предположения, правильные и не очень. А потом появились is, has, контейнерные запросы, слои... И всё заново.

О чём это я? Конечно же о производительности селекторов CSS!

Насколько быстр начальный рендер? Насколько замедляется перерисовка экрана при использовании новомодных фишек CSS? На все эти вопросы ответить можно только... только читая исходники браузерных движков. Вам не лень? Мне — точно.

А вот Патрику Броссе вот было не лень. И на недавно прошедшем CSS DAY он выступил с докладом, который так и называется: Style Recalculation Secrets They Don’t Want You To Know

Собственно, ссылочка:



А для самых внимательных — в имени ссылка на слайды.

Вышло офигенски залипательно, рекомендую всем.

#css #performance Открыть/Комментировать

2023-07-06 16:01:55 Сделайте карьеру в IT!

Skillbox совместно с РАНХиГС проводит набор на онлайн-бакалавриат по направлению «Веб-разработка».

Всё как в классическом вузе: семинары, сессия, студенческие льготы и отсрочка от армии, только все занятия и экзамены — онлайн.

За время обучения вы:

— Освоите frontend- и backend-разработку.
— С 1-го курса начнёте проектировать интерфейсы и создавать проекты для портфолио.
— Изучите принципы дизайна, освоите самые популярные языки программирования.
— Узнаете, как работать с базами данных, поддерживать работу сайтов.
— Освоите инструменты веб-аналитики. Научитесь создавать и применять алгоритмы.
— Научитесь тестировать веб-приложения.

Программировать безумно интересно. Переходите по ссылке за подробностями: https://epic.st/betaP2

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880 Открыть/Комментировать

2023-07-06 11:54:57 #новость дня

Итак, всем знакомая проблема: назначили два вида transform-преобразований, например, translate и rotate и пошли делать анимацию на ключевых кадрах.

А в анимации указали только translate. И бум — никакого вам поворота. Вот так.

А все дело в том, что в CSS до недавнего времени не существовало понятия композиции анимаций и преобразований. А теперь есть! Так и называется: animation-composition. И значения add, replace и accumulate.

Подробнее и примеры в блоге разработчиков Chrome. Вот кодпен с демо: https://codepen.io/web-dot-dev/pen/VwGRBVX

Я больше вам скажу, вчера вышел Firefox 115, который начал поддерживать композицию из коробки! Так что можно сказать — пора.

#animate #transform #composition Открыть/Комментировать

2023-07-05 13:28:33 #инструмент дня

Пожалуй, только лишь карась на дне не слышал аббревиатур LCP, TTFB, BPP, CLS и так далее. Что их всех объединяет?

А это все метрики производительности веб-проектов. Если вы запускали тот же самый Lighthouse, то наверняка знаете, что на получение 100% влияет очень и очень многое. Так вот.

Сегодняшний инструмент дня это набор сниппетов для Chrome DevTools для визуализации и считывания влияющих на параметры производительности показателей:
https://webperf-snippets.nucliweb.net/

Что забавно, там даже есть сниппет чтобы искать изображения за пределами экрана, у которых не включена ленивая загрузка! Сомнительно, но почему бы и нет...

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

Прекрасная штука, в общем.

#performance #devtools Открыть/Комментировать

2023-07-04 15:12:24 #ссылка дня

Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.

1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en

2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings

Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.

Ломайте свои интерфейсы сами и избегайте XSS, котаны.

#xss #naughty #injection #бородач Открыть/Комментировать

2023-07-04 09:40:51 #игра дня

Я скидывал сюда много обучающих игр по CSS, но по JavaScript (и вообще любому языку) ещё нет. Кажется, настало время это исправить. С какого же жанра начать?

Давайте с RPG! Яркий представитель этого жанра — https://codecombat.com/

Вообще, больше ЛогоМиры напоминает, чем что-нибудь ещё... но битвы наличествуют! :)

У игры имеется подписка, но основные уровни проходятся бесплатно. Дальше рассмотрим больше.

#js #education #learn Открыть/Комментировать

2023-07-03 16:32:39 #заметка дня

Что делать, если нужная вам библиотека не предоставила типы для всех публичных методов?

Ну вот такое вот архитектурное решение: метод экспортирован из модуля, а тип или интерфейс — нет?

Делать unknown или any? Копировать и переопределять с помощью as?

Ни в коем случае! Вам нужен простой советский... ReturnType: https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype

Пример использования — на иллюстрации. Ну или ещё можно так:

const createPerson = () => ({
firstName: 'John',
lastName: 'Doe'
})

type Person = ReturnType

Не делайте ерунды, котаны. Читайте документацию.

#typescript #ts #types #бородач

720 viewsSergey Bekharsky, edited  13:32

Открыть/Комментировать