Всем привет! Это «Новости 512» от CSSSR. В новом выпуске мы посмотрим на релизы браузеров, поговорим об индивидуальных свойствах трансформации, разных паттернах компонентов и разметки и — внезапно — поговорим о безопасности и шифровании. Ещё мы попробуем создать чат и поиграем в пару увлекательных игр: про Vim и бытность тимлидом. В этом же выпуске — другие интересные материалы недели и релизы. Поехали!
Интересные публикации
На web.dev была опубликована статья об индивидуальных свойствах трансформации. Эта фича, которую уже поддерживают Firefox и Safari, теперь появилась и в Chrome. Фича позволяет использовать компоненты свойства transform отдельно, не повторяя уже написанный код. Т.е. вы можете использовать отдельно rotate() как свойство и аналогично другие. Выглядит и правда гораздо проще для анимаций. Есть и ещё одна прикольная вещь: теперь трансформации применяются в фиксированном порядке. Напомню, что в transform они применяются в порядке объявления, а при раздельном применении — в порядке translate, rotate, scale. В статье описаны примеры, некоторые другие нюансы работы новой фичи, а также рассказывается больше о мотивации.
Следующий материал — для тех, кто любит математику и CSS одновременно. Руслан Евич в Smashing Magazine написал статью о том, как при помощи функции clamp() можно не использовать большое количество медиа-запросов. Автор показывает, как во многих случаях можно заменить блоки медиа-запросов одним выражением. Что я могу сказать: персонально я не стал бы так делать на проде, если бы у меня в команде не были такие же условные математики, как я. Выражения в некоторых случаях огромные и абсолютно не читаются, и разобраться по ним в стилях и поведении в разных условиях просто нереально. Почему эта статья здесь? Потому что всегда полезно посмотреть на другие способы решения задач или применения технологии/функции: иногда это наталкивает на интересные идеи, и это как минимум отличная разминка для ума и развития его гибкости.
Следующая статья о CSS Grid. В ней Темани Афиф (Temani Afif) разбирается в неявном поведении гридов, а в частности в том, что такое явная и неявная сетки, как они формируются и работают. Явная сетка — это та, которая задаётся вами при непосредственной разметке колонок и строк в стилях, а неявная — это та, которая достраивается, если вы располагаете внутри grid-контейнера элементы, но не полностью описываете его место в явной сетке. В статье он, конечно, приводит несколько примеров такого поведения гридов. Наверное, логичнее явно указать конфигурацию для всех элементов и не злоупотреблять неявными элементами сетки, но знать, как это работает, очень даже полезно. Как минимум для того, чтобы выявлять баги, которые могут быть с этим связаны.
Ещё одна статья Ахмада Шадида (Ahmad Shadeed) в новостях. Как вы знаете, иногда полезно исследовать разные проекты через DevTools, для того чтобы посмотреть на разные детали реализации и что-то почерпнуть. Этим и занялся Ахмад в своей новой статье, а разбирался он в некоторых элементах Figma, всем вам известного дизайн-инструмента. Он демонстрирует всю мощь флексов и гридов, проникая в дебри устройства интерфейса вкладки Design в Figma. Получилось очень интересно: он разобрал устройство ряда контролов, сочетания флексов и гридов, постарался сделать вывод о том, почему оно устроено именно так. Обязательно полюбопытствуйте.
Адам Аргайл (Adam Argyle) на web.dev опубликовал сборник паттернов за 2022 год. Если вы постоянно слушаете новости, то можете помнить, что его статьи с реализациями отдельных компонентов и паттернов попадали в выпуски. Он как раз собрал их, и получился крутой сборник. Он разделён на 3 больших части: компоненты, анимации и работа с темами. Там же небольшой раздел с паттернами разметки. Здесь — 16 компонентов, реализация тем и переключателя темы, а также 4 анимации. Загляните, возможно какой-то из пунктов пригодится вам на проекте уже сегодня.
Гайды от этого автора также попадали в новости, и не раз. Игорь Агапов на Хабре опубликовал очередной практический гайд. На этот раз он создаёт чат на стеке React, Nest и PostgresSQL. В этом же обучающем проекте будет возможность использовать Docker, SocketIO, ORM Prisma и TailwindCSS. Вместо тысячи слов нужно взять и сделать ручками. Чат — очень распространённый учебный проект, и, возможно, вы такое уже делали. Но если вы делали похожую задачу с использованием других технологий и хотите попробовать эти, этот гайд как раз для вас.
Следующая статья касается шифрования и информационной безопасности. Алексей Прусс написал на Хабре статью о построении архитектуры приложения для интеграции алгоритмов шифрования в приложении для финансового учёта. Алексей рассказывает о проблеме утечки данных и о том, как обезопасить их даже в случае утечки. Он рассматривает разные варианты, рассказывает о том, который подошёл лучше всех, и показывает пример реализации на стеке React, TypeScript, RxJS с применением асимметричного и гомоморфного шифрования. Кстати, статья — из песочницы, зацените и поддержите автора.
Ещё одна статья из песочницы, но попроще. Она посвящена нашей любимой теме — Event Loop. В ней автор собственно разбирается с базовыми понятиями Event Loop, не касаясь его работы в браузере. Если вы чувствуете себя не до конца разобравшимися в теме, загляните посмотреть на ещё одну статью. Если вы уже мудрый аксакал, зайдите посмотреть и подсказать, поддержать начинающего автора.
Следующий материал посвящён оптимизации зависимостей Node.js для AWS Lambda. Джеймс Бесуик (James Beswick) в блоге Amazon опубликовал статью о том, как ускорить время «холодного» старта Node.js на Lambda до 70%, используя бандлинг и минификацию кода. В статье вы найдёте примеры, деплой тестового проектика и способ сравнения времени старта при помощи Artillery.
Вы всегда хотели научиться пользоваться Vim? Сделайте это играючи при помощи игры об управлении Vim, которая называется Vim Adventures. Предлагается походить по уровням и научиться горячим клавишам и комбинациям редактора. Попробуйте — вначале слегка ломает мозг, но потом становится намного понятнее.
Завершит рубрику ещё одна игра. На этот раз это симулятор тимлида от компании Wrike. Всё просто: теперь вы тимлид, у вас есть бэклог, команда и ограниченное количество дней на все задачи. Вы должны всё успеть и не выгореть. Попробуйте. И удачи!
Новости релизов
Сначала браузеры. Вышел Chrome 104. Выше я уже рассказывал про использование индивидуальных свойств transform и статью об этом. Только напомню, что эта фича уже поддерживается в Safari и Firefox. Было добавлено предельное время существования Cookie. Была добавлена поддержка синтаксиса сравнения для медиа-запросов из спецификации 4-го уровня. Это значит, что они станут короче: для обозначения границ можно будет использовать математические операторы сравнения. Также был устранён ряд уязвимостей. В DevTools вернулась фича Restart frame, а также появилась опция выбора скорости воспроизведения в Record panel. Больше подробностей — в обзорах Пита ЛеПажа (Pete LePage) и Джеселин Ин (Jecelyn Yeen).
Mozilla выпустила Firefox 103. Теперь по умолчанию включен режим полной защиты Cookie, был внесён ещё ряд изменений, касающихся безопасности в режиме HTTP и работы iframe. Также была повышена производительность браузера на мониторах с высокой частотой обновления, улучшен режим работы с PDF. Здесь также были устранены уязвимости: целых 10 штук, 4 из которых были помечены как опасные. Следом за релизом быстро вышел патч 103.0.1, в котором включено аппаратное ускорение для новых видеокарт AMD и устранена проблема, приводящая к крашу приложения.
Язык Go отметился релизом 1.19. В этом релизе, как отмечали разработчики в заметке к предыдущему, продолжилась работа над расширением поддержки дженериков (generics). Кроме того, продолжились работы над повышением производительности, а в сборщике мусора появился новый параметр для управления потреблением памяти memory limit. Подробности по параметру добавили в общий гайд по работе со сборщиком мусора. Я также приложу ссылку к описанию выпуска.
Команда Rome выпустила версию 0.8.0 Rome Tools. В ней линтер был помечен как альфа и появились рекомендуемые правила линтинга. Также появилась возможность добавить кастомный файл конфигурации. Насколько я понял по репозиторию, инструмент закончили переписывать на Rust и разработка продолжается.
Также отмечу релизы ядра Linux 5.19, Linux Mint 21 и корректирующий выпуск VirtualBox 6.1.36.
Другие новости
В прошлом выпуске я говорил, что постараюсь узнать про Rome больше, и тут удачно вышел очередной релиз, о котором я рассказал в предыдущей рубрике. Это хорошо и означает, что разработка продолжается. Теперь ещё парочка новостей.
Странная волна клонов популярных репозиториев с вредоносными изменениями прокатилась по GitHub. Разработчик Стивен Лейси (Stephen Lacy) в своем твиттере написал о том, что обнаружил заражённые малварью клоны порядка 35000 репозиториев. GitHub заявляет, что расследует инцидент. Пока понятно, что сами репозитории не заражены, аккаунты мейнтейнеров не были скомпрометированы, а все зараженные клоны репозиториев сейчас под карантином. Кому и зачем это было нужно, пока непонятно. Посмотрим, выяснят ли что-нибудь исследователи безопасности из GitHub.
Ещё одна новость связана с GitLab. Компания обсуждает внутри возможность удаления проектов на бесплатных аккаунтах. Это может коснуться проектов, которые были неактивны в течение года. Это обсуждается потому, что по оценке до 25% серверных ресурсов затрачивается на неактивные проекты и форки. Посмотрим, к чему это в итоге приведёт. Но на всякий случай, если вы держите свои проекты там и планируете длительный отпуск, стоит подумать о бэкапе своего проекта.
Все ссылки и публикации вы найдёте в описании выпуска. Всем пока и до встречи в следующем выпуске!