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

2023-04-12 11:07:36 #фишка дня

Как сымитировать эффект печатной машинки на одном лишь CSS?

Очень просто! Используйте функцию анимации steps и анимируйте ширину ступенчато. Остальное скройте: https://codepen.io/alinaki/pen/vYVNdOO

Ну разве что символы придётся посчитать самому...

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

2023-04-12 08:05:01 #такое дня

Давайте дадим слово защитникам Tailwind.

Что заставляет вас учить целый DSL вместо того, чтобы просто использовать CSS?

Пишете ли вы код на Tailwind вручную, или генерируете конструктором?

Пробовали ли другие Atomic-подходы? Пробовали ли БЭМ?

Вы все поголовно из бакенда?

Давайте, господа, вам слово. А то мне аж страшно.

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

2023-04-11 18:36:44 #статья дня

Что самое опасное может сказать фронтенд-разработчик, верстающий макет или готовящий ui-kit?

Опустим сейчас (несуществующее) разделение на настоящий и ненастоящий фронтенд.

Вот это:

— Я умею нормально называть классы, они у меня всегда уникальные!

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

Ребят, штуки вроде пространств имён, БЭМ, OOCSS, CSS-in-JS, CSS modules появились не потому что их разработчики глупы или ленивы. Они появились потому что все мы люди и толпа может быть как умнее одного человека, так и бесконечно глупее. Ок, если не глупее, то, как минимум невнимательнее.

Ведь подобная ситуация она везде, не только в вёрстке.

Ну вот давайте возьмём для примера Next.js. За базу там взяты CSS-модули, поэтому уже один только этот факт делает вопрос: «А css-модули уже устарели, да?», — некорректным.

Да, «гладить» фреймворк против шерсти не стоит. Да, создать глобальный класс для компонента способом, не предусмотренным документацией (созданием отдельного глобального скоупа) будет проблемой (То же самое касается и css-in-js).

Но зато насколько легче решаются остальные 99% задач!

Короче, чтобы вам сегодня сделать своё понимание кода и его сборки чуть лучше и заодно понять сопутствующие проблемы CSS-модулей горячо рекомендую эту статью: https://habr.com/ru/post/688844/

Как включить их в сборку, как типизировать. Зачем вообще типизировать и как экспорты по умолчанию всё портят.

Прекрасно и максимально понятно написано. Заодно скилл вебпака подтянете :)

#css #cssmodules #webpack #бородач Открыть/Комментировать

2023-04-11 16:01:03 Можно бесконечно смотреть на три вещи: как течет вода, горит огонь и фронтендеры пилят монолит

Ребята из банды фронтендов TeamSnack решили раз и навсегда разобраться в подходах к микросервисам. Сравнивать будут Single-spa(SystemJS) и Webpack Module Federation. Обещают живое общение с едой и напитками, а также интерактив в Miro с рабочими схемами, которые можно потом протестировать в работе.

Когда: 14 апреля, 19:00 - 21:00

Где: ценители ламповой атмосферы могут приехать в офис Cloud (Москва, 2-я Звенигородская улица, 28), а для закоренелых удаленщиков доступен онлайн-формат в Telegram-канале сообщества.

Все детали можно узнать у самой команды TeamSnack: https://t.me/+PxcNlJNaH0tmZGYy

Реклама. Рекламодатель: ООО «Облачные технологии». erid: LatgBqVdz Открыть/Комментировать

2023-04-11 12:01:28 #фишка дня

Я писал как-то о том, что одной из одновременно полезных и раздражающих вещей в CSS-препроцессорах является возможность создавать вложенность, nesting.

Склеивать селекторы, классы в БЭМ и не только, вкладывать теги... Удобно? Писать — да, поддерживать — не очень. Вот тут: https://t.me/htmlshit/1643

К чему это я?

К тому, что Chrome 112 начал поддерживать CSS Nesting! Официальный! Который теперь часть спецификации: https://www.w3.org/TR/css-nesting-1/

.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}

Ну и на видео показан процесс отладки этого дела в DevTools.

Статья в блоге разработчиков Chrome: https://developer.chrome.com/articles/css-nesting/, хороший способ вспомнить, что к чему.

Моё мнение остаётся прежним: для псевдоклассов, псевдоэлементов или влияния на соседей (+, ~) — очень хорошо. Для формирования БЭМ (склеивания классов) — нет.

Всем nesting, котаны!

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

2023-04-11 08:13:05 Это — Дмитрий Безуглый, у него огромный опыт во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд?

Дима участвовал в принятии решений по разработке на все команды Вконтакте, с нуля запустил рекламный кабинет для новичков и выстроил множество процессов в команде как тимлид. А если вы используете Яндекс.Трекер, то знайте, его интерфейсы – тоже работа Димы.

Сейчас Дима — CTO Chrome Extension Frogly. Сервис помогает в изучении иностранных языков.

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

Если вы junior+ фронтендер и хотите научиться работать над масштабными проектами, вам сюда!

Записывайтесь на курс до 17 апреля, а по промокоду HTMLSHIT19 вы получите скидку 10%. Открыть/Комментировать

2023-04-10 20:14:31 #заметка дня

Продолжаем эпопею про написание пульта для телевизора на Flutter.

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

Потихоньку подбираемся к самому главному: как, собственно, посылать команды, точнее, нажатия кнопок.

А делается это довольно просто.
1. Постучались на WebSocket API, передав название приложения. Почему-то в моём случае стучаться пришлось на secure-вариант (ws vs wss, это как http vs https), разрешив использование самоподписанных сертификатов (потом расскажу, что не так).
2. Телевизор спросит разрешение на удалённое управление. И вот тут придётся подтверждать с пульта или джойстика на телевизоре, других вариантов нет. В ответ будет прислан токен. Чтобы больше не спрашивал — все дальнейшие запросы должны содержать в себе идентификатор приложения и токен, собственно. Как параметры запроса: ?name=xxx&token=yyy.
3. Формируем команду, на которую, естественно, опять нет никакой документации. Но когда это нам мешало? Копаемся в issues легендарной (в узком кругу) библиотеки Samsungctl, находим нужный формат.
4. Отправляем.
5. ...
6. Пищим от восторга.

На этом месте будет небольшая ода Джаваскрипту: нет на свете языка, который бы позволил быстрее настряпать всякие тестовые куски кода, вне зависимости от того, нужен вам UI, или нет. Ну, может, Python что-то способен противопоставить. Тяп-ляп и готов код, чтобы быстро проверить теорию или соответствие стандарта вашему телевизору: https://gist.github.com/bekharsky/80fce4263304eedcec7a46045b1a0ebd

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

И посоветуйте, кто чем вебсокеты отлаживает. Что-нибудь вроде Postman, но не Postman.

К слову, если у кого-нибудь есть телевизоры Samsung и кому не лень, проверьте код выше (он просто выключает звук) и напишите модель в комментарии, пожалуйста (как узнать модель — смотрите ссылку в первых словах поста, там про API телевизора). Это мне потом очень поможет :)

Удачи в ваших пет-проектах, котаны.

P. S. если кому интересно, вот тут человек на Go автоматизирует браузер телевизора, чтобы дашборды Grafana запустить. Целый кладезь команд и подсказок. Красивое: https://gist.github.com/freman/8d98742de09d476c4d3d9e5d55f9db63

#flutter #dart #websockets Открыть/Комментировать

2023-04-10 16:12:52 #фишка дня

А знали ли вы, что в Chrome DevTools есть возможность эмулировать различные доступные на устройствах сенсоры?

Ну из очевидного: гироскоп, компас, освещённость.

Джей, деврел в Google, замапил сенсоры на 3D-кубик и запилил для нас демо на побаловаться: https://codepen.io/jh3y/pen/KKQZQNj

Открывайте пример, врубайте DevTools, вызывайте сочетанием Ctrl(Cmd)-Shift-P панель команд и ищите там Sensors. Как найдёте — сообщите

#codepen #devtools #sensors #бородач Открыть/Комментировать

2023-04-09 16:37:18 #фишка дня

Давайте сегодня продолжим тему SVG.

Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.

Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111

Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().

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

Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.

1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.

Вуаля: https://codepen.io/alinaki/pen/eYPmayO

Такое можно и с текстом провернуть, кто первый? :)

#svg #path #length Открыть/Комментировать

2023-04-07 10:33:02 #заметка дня

Как разместить иконки на странице или в web-приложении?

Очевидно — картинкой. Шрифтом ещё. CSS-спрайтом. SVG... Но один из наиболее удобных и универсальных способов — это SVG-спрайты.

По сути всё просто: работаем с элементом symbol. Символ — это буквально что угодно в SVG, что не отобразится сразу, но на что можно будет сослаться.

SVG-файл становится контейнером таких символов:










И кладём этот контейнер куда угодно. Например, в файл или сразу в HTML (об этом ниже). А дальше всё очень просто:





Удобно отлаживать, меньше запросов. Сплошные плюсы. Понятно, что так можно не только иконки хранить.

Но как этим пользоваться, например, в React?

Как-как, компонент сделать, как всегда. Объявили компонент Icon и передаём в него id нужного спрайта. Смотрим в песочницу и запоминаем: https://codesandbox.io/s/condescending-bas-1beiol?file=/src/App.js

Так-то SVG можно встроить сразу в HTML, главное, скрыть не забыть. Но это, опять же, может стать задачей вашего любимого бандлера.

Вообще, моя любимая часть в песочнице это даже не спрайты, а ...props. Если интересно — потом расскажу, почему :)

Всем спрайт, котаны!

#svg #symbol #sprite #react

928 viewsedited  07:33

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