#ссылка дня

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

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

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

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

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

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

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

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

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

#matrix #work #competence

#ссылка дня

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

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

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

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

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

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

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

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

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

#matrix #work #competence #бородач

#заметка дня

Многим из вас знакомо видео выше. неудивительно, ведь я использую его как промо канала. Не всегда удачно, но почти 12000 вас уже здесь :)

Так вот, на иллюстрации — не совсем оно. А имитация на HTML и CSS. Оригинальное было сделано моим коллегой в After Effects.

Но на чистом CSS подобные прыгающие анимации сделать было невозможно... до недавнего времени. Теперь же на Chrome или Firefox (не iOS), есть возможность использовать функцию анимации linear(). Обратите внимание, не linear!

Вот так:

linear(0, 0.14 4.43%, 0.93 16.722%, 1.14 24.312%, 1.15 29.933%, 1.01 43.094%, 0.97 50.995%, 1 76.878%, 0.99);

Это буквально параметры кривой: https://developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear/

Раньше у нас в лучшем случае была возможность описывать кривые Безье, но добиться правильного пружиняшего эффекта с ними было невозможно :)

Теперь о задержки проигрывания на диагоналях...

Сначала я упёрся в аналитическое решение через nth-child: https://codepen.io/alinaki/pen/PoLNMgj

И всё прекрасно получалось, но из-за повторяющейся природы nth-child, чтобы выйти за пределы главной диагонали пришлось внести ограничения по номерам элементов, иначе, начиная с 9 диагонали, затрагивалась 2 (из 12):

.cell:nth-child(7n + 10):not(:nth-child(-n + 17)) {
  --i: 10;
}

...делать мне этого очень не хотелось.

Собственно, запись :nth-child(-n + 17) буквально выделяет первые 17 нод.

И тут я обратил внимание, что суммы индексов колонки и строки на элементах по нужным мне диагоналям одинаковы, так что с помощью Pug я их передал в CSS-переменные: https://codepen.io/alinaki/pen/mdoEPbR

Как-то так:

each r, rx in rows
  each c, cx in cols
    - d = rx + cx + 1
    .cell(style=`--dia: ${d};`)

А почему я упомянул вчера счётчики? Ну куда-то выводить переменную диагонали для отладки надо было же.

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

Всем неглавных диагоналей за мой счёт, котаны!

#css #matrix #pug

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://t.me/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

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

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://t.me/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

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

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform #бородач

#статья дня

От перемены мест слагаемых сумма не меняется, не правда ли?

А если речь о композиции? Например, композиции трансформаций в CSS?

Ну, вот, например раз:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

и два

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: translate(-33.1%, 20.2%) scale(3);
}

Это одно и то же, или нет? Так-то ответ интуитивен: нет, не одно и то же. Школьного курса математики должно хватить для понимания. Ну, окей.

А вот если так, три:

.demo {
  transition: transform 1s ease;
  transform: rotate(0);
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Что-то резко стало сложно, не правда ли? А что если я вам скажу, что итог номера три равнозначен итогу номера два? И именно он приведён на видео к посту.

Почему так? Потому что браузер немножечко сходит с ума от того преобразует то, что от него требуют, и организует переданные значения в единую матрицу преобразований, нивелируя порядок translate и scale.

А подробнее об этом в статье Джейка Арчибальда: https://jakearchibald.com/2025/animating-zooming/

CSS, конечно, прекрасен.

#css #transform #matrix