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

2023-05-19 19:17:32 #хорошее дня

Если ваше ретро не похоже на это, даже не пытайтесь меня приглашать в свою компанию!

Результат в комментариях. Ребята из Ugears, конечно, делают вещи :)

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

2023-05-19 13:46:18 #фишка дня

У каждого уважающего себя веб-разработчика помимо всех используемых клиентами браузеров имеются их Nightly или Canary-версии. Ну или Technology Preview для самых умных.

Зачем это надо? Чтобы пробовать новые фишечки, конечно же!

Итак, некоторое время назад я писал о том, что совсем скоро в CSS можно будет описывать scroll-зависимые анимации. И вот это время неумолимо надвигается!

Берём Chrome Canary 115 и заходим сюда: https://scroll-driven-animations.style/

Это набор демок от самого Ван Дамма. Правда, Брамуса Он деврел в Google (сколько их у гугла развелось...)

Брамус давно занимается CSS scroll-анимациями и помогает сформировать спецификацию.

Настоятельно рекомендую попробовать! Полифиллы имеются, если что.

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

2023-05-18 18:59:56 Недавно в Авито открыли две классные позиции для бэкендеров разного уровня.

Бэкенд-разработчик в Автохаб
Вы:
- Имеете опыт коммерческой разработки на Go или PHP;
- Знаете SQL, работали с реляционными БД;
- Знаете базовые принципы построения архитектуры;
- Умеете писать поддерживаемый и тестируемый код.

Старший бэкенд-разработчик в команду внутренних проектов
‌Вы:
- Имеете опыт коммерческой разработки на Go от 2 лет;
- Разрабатывали многопоточные приложения;
- Знакомы с Linux и умеете работать с командной строкой;
- Знаете SQL, работали с реляционными БД;
- Любите и умеете писать тесты;
- Имеете опыт проектирования систем с нуля;
- Умеете проводить код-ревью.

ЗП обсуждается с кандидатами лично, но вот что предлагают прямо сейчас:
- Талантливая команда и возможность реализовать свои идеи в проекте с многомиллионной аудиторией;
- Мощное железо, дополнительные мониторы и всё что нужно для комфортной работы;
- Прозрачная система премий;
- Личный бюджет на обучение, который можно тратить на книги, курсы и конференции;
- ДМС со стоматологией с первого дня;
- Удалёнка.

Если нашли для себя что-то интересное, советуем не откладывать и сразу переходить по ссылкам. Открыть/Комментировать

2023-05-18 14:59:05 #инструмент дня

Миграции с JavaScript на TypeScript часто заходят не туда. Или не заканчиваются. Или откатываются. Зачастую в лучшем случае весь новый код начинает писаться на TypeScript и всё на этом.

Да, ещё не факт, что оно вам надо вообще, но это тема иной беседы.

Итак, с чего же начать вашу миграцию если автоматизированные средства, расставляющие везде any, вам не подходят, а //@ts-nocheck — для быдла?

Начните с модулей с наибольшим числом зависимостей, говорит нам Matt Pocock, а он в общем-то в курсе, о чём утверждает, он учит людей тайпскрипту фулл-тайм :)

А как найти эти самые модули? Очень просто, возьмите построитель диаграмм зависимостей. Madge вполне подойдёт: https://github.com/pahen/madge

Ну и никто не мешает весь новый код писать сразу на TS.

#typescript #javascript #ts #js #diagram #deps Открыть/Комментировать

2023-05-17 19:01:59 #инструмент дня

Не так давно Ахмад Шадид (Ahmad Shadeed) выпустил статью и проект с названием DefensiveCSS: https://defensivecss.dev/

Название проекта — "защитный" CSS — будет точнее переводить по смыслу как "устойчивый". Это набор простых практик, как сделать вашу вёрстку чуть-чуть умнее, чуть-чуть гибче, чуть-чуть предсказуемее.

И это "чуть", применённое на всём проекте, превращается в раскладку, которую довольно сложно сломать неверным контентом или экраном странного разрешения.

Я это всегда называл гигиеной кода, но не догадался свести воедино

Так вот, вспомнил я о нём потому что мой бывший коллега Даниэль Ющик (
Daniel Yuschick) выкатил плагин для Stylelint, проверяющий ваш CSS на наличие defensive-практик.

Собственно: https://github.com/yuschick/stylelint-plugin-defensive-css

Если у вас на проекте нет линтера стилей — ну не страшно, ознакомьтесь с проектом DefensiveCSS и не совершайте глупых ошибок.

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

2023-05-17 11:15:47 Как мы сделали незаметную капчу?

Как сделать так, чтобы капча работала и отсеивала ботов, а пользователям не приходилось вводить текст с картинки? На этот вопрос отвечают разработчики Yandex SmartCaptcha — в статье они делятся историей создания сервиса, рассказывают про изменение кода, рефакторинг архитектуры, невидимую для пользователя проверку и заботу о людях.

Читайте статью в новом блоге Yandex Cloud и Yandex Infrastructure на Хабре, и не забудьте подписаться, чтобы не пропустить истории о том, как мы строим инфраструктуру Яндекса и делаем публичную облачную платформу. Открыть/Комментировать

2023-05-16 10:29:36 #такое дня

Я как-то под новостью о том, что браузеры начали внедрять очередной виджет форм (selectmenu) написал, что браузеры ни один элемент форм не сделали нормально. Собеседник обиделся.

Но даже такой простой элемент как текстовое поле (input type="text") не обошёлся без проблем. Мы уже знаем, что size="1" неправильно работает в Firefox потому что IE. А теперь ещё интересного: атрибуту maxlength нельзя слепо доверять.

Что делает maxlength? Не даёт ввести в поле символов больше, чем указано. Если вставите — браузер обрежет (уже звоночек).

Дальше веселее.

Эмодзи во всех браузерах считаются по глифам, и только Safari — считает за 1 символ. Ссылка на баг: https://bugs.webkit.org/show_bug.cgi?id=252900

Поведение Safari верно с точки зрения человека, но... браузеры пишут инженеры.

Ещё из проблем — скринридеры никак не оповещают о том, что длина превышена. Сплошное веселье.

В любом случае, не забывайте, что ничему приходящему со стороны браузера в принципе доверять нельзя.

#html #maxlength #bug Открыть/Комментировать

2023-05-15 12:29:11 #инструмент дня

Кто слышал о Modernizr? Поднимите руки

В общем, этот инструмент тестирует возможности браузеров на поддержку каких-либо фишек HTML5/CSS3 и далее и позволяет, например, условно подключать полифиллы или применять какие-нибудь иные методы обхода. Особенно удобно когда `@supports`-правила могут не работать или — сюрприз — не поддерживаться вообще.

Ну и одной из фишек является добавление классов со списком поддерживаемых фич. Вроде js flexbox flexboxlegacy canvas canvastext webgl и так далее.

На рынке он давно, потому интересно, какие же есть альтернативы.

И вот свежий проект SupportsCSS. Сфера его работы в целом такая же, как у модернайзера, но ориентирован уже на современные селекторы CSS. Так сказать, стряхнуть лишнее.

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

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

2023-05-14 15:18:43 #фишка дня

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

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

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

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

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

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

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

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

2023-05-12 10:26:37 #игра дня

Ну что, обучающие игры у нас уже были: тарелки на флексах, лягушки на флексах, огород на гридах, tower defence на флексах, ну и сборники всего и сразу.

Давайте бахнем хардкором: https://css-challenges.com/

Ваша задача – повторить изображённое на экране минимальным числом правил. Есть обучающий блок. Все задачи поделены на уровни. Встречаются и крайне упоротые

Коллекция пополняется, в том числе и сообществом. Есть прекрасный раздел Tips&Tricks в котором полно неочевидных фишек и сниппетов.

Дерзайте

P. S. было бы глупо не упомянуть заодно о https://cssbattle.dev/

Там, кстати, небезызвестный Илья Стрельцын в лидерах :)

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