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

2023-05-04 11:01:01 Добавили сканер уязвимостей в Yandex Container Registry

Платформа Yandex Cloud открыла общий доступ к сканеру, который до этого был доступен только в режиме превью.

С помощью него вы можете:

— проводить анализ контейнерных образов на предмет уязвимостей;
— использовать крупнейшую базу уязвимостей;
— сканировать образы при непрерывном развёртывании приложений;
— создавать CI-сценарии для проверки безопасности.

Из нового — теперь можно сканировать контейнерные образы автоматически при загрузке.

Сканер уязвимостей работает только с образами из Container Registry.

Подробнее о сканере уязвимостей Открыть/Комментировать

2023-05-03 21:54:16 #шок дня

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

Нет, не думал. Есть разница между вечнозелёным и сиюминутным контентом. Статьи про золотую сетку и правила потока это одно, статьи про анимации — совсем другое. И тем не менее, мы здесь.

Итак, вам, пожалуй, все уши прожужжали о том, что нужно пытаться избегать JS-анимаций, если вам не нужен полный контроль над анимацией. Что все CSS-анимации давно выполняются на GPU с шикарной производительностью. Что браузеры становятся лучше и лучше... А не совсем.

Итак, всем известна библиотека анимаций от GreenSock — GSAP. Её авторы очень постарались, чтобы собрать в ней буквально всё, что нужно. Подражателей и альтернатив море, включая Animate API, но с трона пока не скинули.

И вот в 2015 году они записали интересный вебинар: "CSS animations performance: the untold story", вот и ссылка: https://greensock.com/css-performance/

Ну и сразу на видео:



TL;DR: если вы совмещаете transform-анимации с анимированием позиции, вас ждёт неприятный сюрприз.

Погоди, скажете вы, всем известно, что анимировать left-top это мерзко и вообще, ведь богоподобные трансформы исполняются на GPU.

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

А не так, господа, синхронизация потоков выполнения GPU и CPU-анимаций и перерисовок. Даже сейчас, запуская их демо на моём M2, я вижу подёргивания на CSS-версии: http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/

Да, авторы оставили дисклеймер, что многое зависит от вашей раскладки в принципе (стоит избегать вложенности, например), но... кто вообще последний раз об этом задумывался?

В общем, рекомендую и видео к просмотру, и CodePen с демо к протыку и приложенные к статье ссылки прочесть.

А почему я вообще начал с упоминания 2015 года? Ну, я думал, за столько лет стало получше. Оказалось, чуть хуже, чем ожидалось.

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

2023-05-03 10:41:17 #шпаргалка дня

Уникальное предложение!

Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg

Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.

#pr #process #work #бородач Открыть/Комментировать

2023-05-02 15:23:11 #статья дня

Я, честно говоря, плохо понимаю, как я пропустил появление тригонометрических и математических функций в CSS.

Добро пожаловать в ад девятиклассников.

Итак, хотите вы того или нет, но sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), exp() и так далее уже с нами.

Для начала можно попробовать въехать в abs, round, mod вместе со статьёй легендарной Аны Тюдор: https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/

А потом изучить обзорную статью о, собственно, тригонометрических функциях: https://web.dev/css-trig-functions/

А я, тем временем, буду пробовать перевести свою прыгающую коробочку на них...

Посмотрим, что из этого выйдет.

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

2023-05-02 10:00:50 Управляйте проектами команд разработки

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

Tracker поможет эффективно выстроить процессы:

— управляйте задачами: настраивайте типы, статусы, параметры, используйте шаблоны, декомпозируйте;

— работайте по гибким методологиям (Agile) с помощью досок задач;

— контролируйте сроки и формируйте календарный план с помощью Проектов и диаграммы Ганта;

— приоритезируйте задачи в бэклоге и планируйте их выполнение с помощью спринтов;

— автоматизируйте рутинные действия с помощью триггеров, автодействий, макросов;

— подключайте репозитории исходного кода и привязывайте коммиты к задачам;

— интегрируйте системы для сборки, тестирования, развёртывания приложений.

Вы можете легко перенести процессы в Tracker с помощью API или инструмента миграции.

Попробуйте Yandex Tracker прямо сейчас Открыть/Комментировать

2023-05-01 18:50:45 #ссылка дня

Чем отличается alt от title? А border от outline? А *.d.ts от *.ts? А for..in от for..of? А display: none от visibility: hidden? А slice от splice?

Как же я задолбался форматирование применять.

Да весь фронтенд это нагромождение похожих по написанию или даже по сути вещей. Как разобраться?

И тут нам поможет проект https://thisthat.dev/. Он буквально проходится по таким скользким определениям или сущностям и разбирает каждый из них.

Проект открытый, предлагайте ваши == и ===.

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

2023-04-30 13:17:03 #заметка дня

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

Я использовал Vim активно лет 12 назад, имел огромный конфиг, но в итоге сполз с него на Sublime, Atom, а потом и VS Code. Причиной стала лучшая поддержка нужных мне инструментов. Vim остался горячо любимым редактором на удалённых серверах. И от конфига я отказался в пользу сырых режимов, это положительно сказалось на работе в разных средах.

К слову, Vim может искать по многогигабайтным логам легко и просто, а эти ваши VS Code и даже Sublime — нет.

Но суть не в этом. Суть в том, что Vim и другие независимые редакторы спасла… Microsoft. Как?

Раньше каждая IDE реализовывала свой механизм работы с конкретным языком. И как правило, это было некое проприетарное (в смысле непереносимое) решение. Но всё изменил приход LSP: Language Server Protocol.

Такого раньше не было: открытый стандарт взаимодействия редактора и языка. Автодополнение, ссылки, определения, документация… А главное, протокол-то открытый.

Поддерживается уже огромное количество языков и редакторов. И тут мы подходим к главному.

О преимуществах Vim есть огромный свежий тред Кирилла Мокевнина, CEO Hexlet: https://twitter.com/mokevnin/status/1567594899859546115

Оригинальный Vim не поддерживает LSP, зато его поддерживает Neovim. И тут все любители модальных редакторов получили второе дыхание.

Но вот я правда был очень удивлён, как Microsoft снова перевернула мир свободного ПО. Это, конечно, поразительно.

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

2023-04-29 17:01:00 #фишка дня

Как предотвратить взаимодействие пользователя с элементом?

pointer-events: none — скажете вы.

Да. Но нет. А что насчёт клавиатурного фокуса? А скринридеры? Так не пойдёт.

Благо, есть решение!

Начиная с Firefox 112 и Safari 15.5 у нас наконец-то есть поддержка атрибута inert. Что это такое?

Ну, исходя из названия inert (инертный) он ни с чем не должен взаимодействовать. Как инертные газы (как вам отсылочка, пахнуло школьной химией, да?).

То есть, если вы зададите элементу атрибут inert, то:
1. Будет предотвращена обработка события click.
2. Элемент перестанет получать фокус и...
3. ...станет недоступен для скринридеров (исключён из a11y tree).

Поддержка уже давно есть в Chrome, начиная со 102 версии, и теперь, с вводом в строй Firefox 112 — есть во всех современных движках.

Ну и, естественно, присущие атрибуту свойства можно повторить ручками, вот пример: https://codepen.io/alinaki/pen/ZEqJepB

#inert #attribute #html #a11y Открыть/Комментировать

2023-04-29 10:29:57 #codepen дня

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

В какой-то момент я устал быть душнилой и отвечать всем: "Но... ведь... SVG..."

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

А вот уже достаточно хорошо известный вам бывший деврел Google Джей не поленился и таки сделал этот чёртов переключатель!

Смотрите: https://codepen.io/jh3y/pen/LYgjpYZ

Явно покруче чем наш с Киренковым трёхпозиционный... пора поднимать ставки, котаны :)

Кто пасхалку найдёт?

В общем, меня забавляют эти дуэли. Надо бы поучаствовать в какой-нибудь :)

#tiktok #switch #design #challenge Открыть/Комментировать

2023-04-28 17:01:08 Самый недооценённый канал для фронтендеров

Контент создаётся вместе с тимлидами с опытом работы в Вконтакте, Яндексе, Telegram Open Network и Frogly! Собрали подборку полезных статей и видео оттуда, читайте и подписывайтесь:

ChatGPT во фронтенде — для всех, кто хочет понять, как применять нейросети в веб-разработке

Как повысить качество кода — и облегчить работу для всех, кто работает над проектом

Как прокачаться от джуна до миддла — секреты быстрого роста от middle frontend-разработчика из VK

Как писать чистый код — о том, как делать код понятным и читаемым

Что случилось с CSS в 2022 — об основных изменениях за последний год

Ещё у сообщества есть чат, в котором можно задать любой вопрос по фронтенд-разработке. А помимо полезного контента там и мемы про разработку бывают:)

Канал: @karpovdev Открыть/Комментировать