#ссылка дня

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

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

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

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

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

Собственно, вот: https://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, второе издание: https://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. Основы от Роджера Дадлера: https://rogerdudler.github.io/git-guide/

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

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

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

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

10. Ещё одно визуальное руководство: https://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

#статья дня

Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?

Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?

Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…

Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.

Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/

Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.

Ну что делать.

#cookie #localStorage #бородач

#такое дня

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

Одной из неочевидных вещей является хранение текстур в памяти.

Окааааазывается, очень грубо, все ваши прекрасно упакованные и минимизированные жипеги, пнг и прочие тга надо распаковать. И положить в память информацию по каждому пикселю отдельно. А это очень и очень много.

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

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

https://bugs.telegram.org/c/16633
https://bugs.telegram.org/c/16842

Причина максимально банальна, о чём я сказал выше: распаковка текстур.

Например, в одном из пакетов каждый кадр видеостикера — огромный красный квадрат размером 15000x15000 пикселей. Итого, каждый распакованный кадр займёт 600 Мбайт и весь стикер — до 27 Гбайт. А сжать его можно до нескольких килобайт же. Красота.

В общем, картиночки — страшная сила, котаны.

#статья дня

Самая имбовая статья рунета на тему оптического выравнивания иконок: https://habr.com/ru/companies/badoo/articles/333992/

Математика не стареет! Вечнозелёная статья, люблю такие.

Что не так с выравниванием вообще?

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

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

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

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

А вот сервис для проверки соответствия визуального центра геометрическому: https://javier.xyz/visual-center

#optics #geometry

#библиотека дня

Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.

Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.

Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.

Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌

Вообще, я где-то видел адаптированный из вскода компонент, но не могу найти. Там хороший пример адаптации чистого дом-компонента на классах был...

#react #component

#фишка дня

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

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html #бородач

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor

#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat