Как мы сделали незаметную капчу?

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

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

#инструмент дня

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

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

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

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

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

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

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

#css #stylelint

#инструмент дня

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

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

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

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

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

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

#typescript #javascript #ts #js #diagram #deps

#фишка дня

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

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

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

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

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

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

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

#css #scroll #animation

#хорошее дня

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

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

#work

#инструмент дня

Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?

И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js

Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.

А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8

#css #js #performance

#заметка дня

Есть такой элемент — template. Название говорит само за себя: это шаблон.

Пишете в него некий HTML/SVG код, потом клонируете и вставляете куда вам надо.

На этом месте апологеты фреймворков ухмыльнулись, но вы же не одни на свете, да?

const content = template.content. firstElementChild.cloneNode(true);

Важно понимать, что содержимое шаблона — это фрагмент (обёртка над реальными нодами, если грубо), поэтому обращаться с ним надо соответственно.

Почему для этой цели не использовать просто скрытый div или — привет из прошлого — script type="text/template"?

Ну второе вообще не в кассу, это просто абьюз. А первое:
- Контент внутри темплейта не будет загружаться, пока не склонирован явно: ни картинки, ни стили, ни скрипты
- Валидатор игнорирует содержимое, хоть dd храните там, хоть td
- Поисковые системы знают про template и точно не индексируют. А с div hidden всё не так однозначно.
- Ну и именование говорит само за себя. Сахар все любят.

#html #template

#ссылка дня

По какому принципу разделяются позиции Junior, Middle, Senior, Lead, Principle?

Что отличает Engineering Manager от Lead Developer?

Почему часто отказываются от именований, что я представил выше, используя старые добрые слесарь шестого разряда?

На все эти вопросы даёт ответ т. н. матрица компетенций. Суть — таблица, где прописаны желаемые знания и умения по каждому из уровней, в нашем случае, инженеров. Иногда с чёткими примерами (тесты пиши, да).

Я не могу поделиться матрицей компетенций нашей компании (разрешения не спрашивал), но наткнулся на весьма интересную и достаточно полную от некой австралийской консалтинговой компании.

Собственно, вот: http://eng-skills-matrix.expert360.com/

По подобной матрице проходят performance review и решения о повышении зарплаты или вертикальном/горизонтальном переводе сотрудников.

Ну и как роадмап вполне можно использовать (хотя ссылки на отдельные роадмапы тоже есть).

Развивайтесь, котаны!

#matrix #work #competence

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case #бородач

#инструмент дня

Я много обещал рассказать о сетапе для разработки веба, но руки не доходили. Так что приходится кусочками 🙂

Если кто общался со мной в чате, знает: первая рекомендация для работы — это Node Version Manager, nvm.

Зачем управлять версиями ноды? Oh, sweet summer child...

Ну, как минимум, проекты не всегда переводят на поддержку самых последних версий, даже всеми любимые фронтенд-утилиты. Да и legacy strikes back.

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

И тут на сцену выходит Volta: https://volta.sh/

Написана на Rust, быстро инициализируется, позволяет задать нужную ноду прямо в package.json! В итоге переключился на новый проект — и у тебя уже другая версия Node.js

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

#js #node #nvm #volta

#статья дня

Взгляни на КПДВ, друг. Каким будет значение background-color в первом и во втором варианте?

Скорее всего, в одном из случаев ты точно ошибся. Но это нормально, CSS настолько мощно продвинулся за последние несколько лет, что каскад и знания о нём давно пора обновить.

И Лидия Захарова из HTML Academy выкатила шикарную статью: "Как работает каскад в CSS".

https://htmlacademy.ru/blog/css/cascade-works

Как происходит обработка значений, фильтрация, расчёт каскада. Что под капотом у браузера?

Достаточно кратко и суть передана отлично. Рекомендую!

#css

#ссылка дня

Я не удивлюсь, если в комментариях напишут: "Ну ты чо вообще, все это знают", но тем не менее.

У Google помимо прекрасных блогов разработчиков (того же Chrome) и весьма неплохой документации на их проекты имеется и простая обучающая платформа — Code Labs.

https://codelabs.developers.google.com/

Повторю, это не тайна, но я не знал, что материалов настолько много. От дизайна и веба до Flutter и ИИ. Ну и всеми любимый Python, куда ж без него.

Прошел несколько примеров по Flutter. Да, это в основном "пиши вот так", но на то оно и простая платформа. На некий путь вполне может навести, руку набить. Ну и бесплатно при этом.

Моя рекомендация, в общем.

#google #dev #education

#расширение дня

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

Сегодняшнее расширение пытается решить проблему недостаточного контраста на сайтах: https://fixa11y.com/

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

Полезная вещь, короче, надо сказать.

#css #a11y #contrast #бородач

#статья дня

Давайте честно, у кого были проблемы с пониманием 3D-преобразований в CSS? А у кого есть?

Да не надо стесняться, у всех были и есть. Кубик на CSS нарисовать могут не только лишь все. А всё почему?

А всё потому что у вас интерактивных тренажёров не было. К счастью, делает их не только Джош Комо, но и вот Брэд Вудс: https://garden.bradwoods.io/notes/css/3d

Сослался я на записки по 3D-преобразованиям, но вообще этот проект — хороший пример того, как можно делать заметки по ходу изучения какой-то темы. От объектов в JS до отладки SQL. Хорошая шпаргалка, рекомендую всем так делать. Ну или хотя бы отрабатывать навыки в кодпене, со временем тоже неплохо накопится.

#css #js #cheatsheet #interactive #бородач

#фишка дня

Мой любимый фронтенд-твиттер Кричащий Банан показал очень интересную штуку: тип Simplify<T>, взятый из https://github.com/sindresorhus/type-fest (отличная репа, кстати, куча полезных типов).

Что это и зачем? Я вот сразу не понял. Ну, ты же сам обычно типы пишешь, зачем упрощать? А все просто.

Мы предполагаем, что A — собирательный тип. Например, комбинация из Partial и Omit, что достаточно часто приходится делать:

type A = { foo: string; bar: number };
type B = Omit<A, "bar"> & Partial<A>

И IDE покажет... ну, бестолковую фигню покажет, которая не даст вам никакой информации. Как этого избежать? Можно B... упростить. И будет красиво! Смотрим КДПВ или вот, ссылку на песочницу, сразу ясно что к чему.

Не забываем посылать спасибы авторам Type Fest и Кричащему банану :)

#typescript #ts

#статья дня

Злые Марсиане выпускают крутейшие статьи с завидной регулярностью. Вот очередная: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms

На сей раз — про ошибки при разработке форм. И их, согласно статье, 11. Давайте кратко пробежимся.

1. Ставь autocomplete в нужное положение (username, current-password etc.).

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

2. type="email", тут всё ясно.

3. Интерактивные элементы должны быть кнопками или ссылками, а не дивами (и ведь находятся же).

4. Не забывай про существование тега form (и такие тоже существуют).

5. Не используй placeholder как label.

6. Помни о label, особенно для галочек.

7. Состояние :focus должно быть визуально подтверждено.

8. Маркируй невидимые поля для скринридеров.

9. Не прерывай ввод внезапной валидацией (бесит).

10. Исключи случайную повторную отправку формы.

11. Помни о сетевых задержках.

В статье полно примеров и объяснений. Проверяйте свои формы, котаны.

#form #ux

#фишка дня

Как заставить пользователя сгенерировать надёжный пароль?

Ну, вообще — никак. Только организационно. Пришлые посетители — они и психануть могут.

Но вот в экосистеме Apple такая попытка имеется. И называется — атрибут passwordrules.

Поддерживается он не только встроенными менеджерами паролей на яблочных ОС и, соответственно, браузером Safari, но и популярным менеджером паролей 1Password.

Самое забавное, что у Apple даже специальный инструмент для проверки правил имеется: https://developer.apple.com/password-rules/

Будет ли это стандартом в скором времени? Скорее всего, нет: пользователи не очень любят ограничения, пока не прилетит в лицо. Так что надеемся на методы входа, исключающие ввод паролей в принципе.

Впрочем, пропозал есть: https://github.com/whatwg/html/issues/3518

Но если вы в могучем тырпрайзе и в вашем тырпрайзе или яблоки, или 1Password — тема рабочая.

#password #security #1password #apple

Как специалисту по безопасности повысить свою квалификацию?

Каждый день появляется примерно 70 новых уязвимостей. Поэтому специалистам по безопасности важно постоянно развиваться и учиться новому. Специально для Middle и Senior ИТ-специалистов, которые отвечают за цифровую безопасность компании и продуктов, команда Yandex Cloud разработала курсы:

— «Защита облачной инфраструктуры» поможет настроить и поддерживать необходимый уровень безопасности;

— «DevSecOps в облачном CI/CD» научит обеспечивать безопасность приложений, познакомит с методологией DevSecOps, которая поможет автоматизировать проверки безопасности и экономить ресурсы;

— «Аутентификация и управление доступом» поможет подготовиться к росту инфраструктуры и команды, научит настраивать и регулировать доступ в облаке.

Также скоро появятся курсы «Погружение в сетевую безопасность» и «Compliance».

Обучение бесплатное — уроки откроются сразу после регистрации ➡️

#ссылка дня

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

1. Собственно, введение в Git от GitHub: https://guides.github.com/introduction/git-handbook/

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

В их введении описывается, что такое вообще система контроля версий, репозитории, основы Git и GitHub (пулл-реквесты и т. д.)

2. Интерактивный сервис по изучению веток: https://learngitbranching.js.org/

Игра, практически. Красивое.

3. ProGit, второе издание: http://git-scm.com/book/en/v2

4. Книга от авторов GitTower — многим нравится иметь приложение на компьютере. Примерно то же самое, что в руководстве от GitHub: https://www.git-tower.com/learn/git/ebook/

5. Опять же, руководство от Atlassian — авторов конкурента GitHub, BitBucket: https://www.atlassian.com/git/tutorials

6. Основы от Роджера Дадлера: http://rogerdudler.github.io/git-guide/

Есть версия на русском.

7. Пошаговое руководство в основы и не только: https://gitimmersion.com/

8. Ещё одно: http://think-like-a-git.net/

9. Для любителей видеоуроков и конкретных решений: https://gitforeverybody.com/free-git-tutorials/

10. Ещё одно визуальное руководство: http://git-school.github.io/visualizing-git/

11. Ну и мой любимый универсальный сайт https://learnxinyminutes.com/docs/git/

Там не только Git, там вообще всё :)

Не переставайте учиться, котаны.

#git #linkdump #бородач

#фишка дня

Как тестировать асинхронный код, собственно, fetch, не имея доступа к интернету и не поднимая локальный сервер?

Не знаю, зачем вам это может понадобиться (тесты, опять же), но Data URL придёт на помощь!

Просто подставьте что-то вроде 'data:,\uFEFF{"name":"htmlshit"}' вместо URL в fetch и наслаждайтесь.

\uFEFF это BOM символ. Технически, его можно не включать.

#fetch #data #trick