Новости 512 #193

В этом выпуске: Firefox 93, TypeScript 4.5 Beta, разновидности DOM, дебаггинг CSS, стратегии работы с ветками в git, XSS-атаки, security-релизы Node.js и Redis, а также первые результаты внедрения RenderingNG в Google Chrome.

Интересные публикации

Макс Кравец из Holyweb написал статью о DOM. Если когда-то давно DOM был у нас один, то теперь есть и его разновидности, которые решают разные задачи, например, виртуальный DOM и теневой, или «shadow», DOM. Именно об этом Макс и рассказывает. Он начинает с построения самого DOM, а потом раскрывает, как и почему появились его братья. Получилось лаконично и очень доступно, так что если у вас в голове существовало запутанное определение — вот вам простая и понятная альтернатива.

Стефани Эклз (Stephanie Eckles) на Smashing Magazine опубликовала гайд по дебаггингу CSS. Она говорит о четырех наиболее частых проблемах CSS: переполнении контента, проблемах из-за специфических особенностей браузеров, неожиданных проблемах с наследованием стилей от каскада, а также неполадках в CSS из-за изменения DOM. Сначала Стефани делится общими рекомендациями, а затем пишет адресно по каждой из перечисленных проблем. По каждому пункту есть пример, подробное объяснение и скрины из DevTools с нужными инструментами и процессом дебаггинга.

Ахмад Шадид (Ahmad Shadeed) в своем блоге опубликовал статью о том, как задать border-radius элементу по условию. Вы скажете: «Ислам, постой, мы же все умеем это делать медиа-запросами, в чем смысл?». Смысл в том, что Ахмад сделал это без медиа-запросов и дополнительных классов для разных случаев. По сути, он вычисляет border-radius в CSS-выражении, используя свойства max() и min(). Возможно, это не самый интуитивно понятный пример, но тоже решение, которое показывает, как можно проявить, скажем так, «смекалочку» и использовать возможности CSS нетривиальным способом.

Существуют разные стратегии работы с ветками в git, это зависит от многих факторов, и в каждой компании думают, что их подход — самый верный. Тобиас Гюнтер (Tobias Günther) на css-tricks опубликовал небольшую статью о том, что стоит держать в голове при определении стратегии работы с ветками, и сделал обзор двух популярных конвенций работы с ветками: Git Flow и GitHub Flow. Вы могли про них слышать, но если нет — обязательно поинтересуйтесь.

Поговорим о безопасности. Речь пойдет о XSS, или кросс-сайтовом скриптинге. На Хабре была опубликована текстовая версия доклада Татьяны Новиковой о XSS. В статье есть и теория, и примеры последствий, а также защитные меры. Татьяна напоминает, что стоит следить за новостями безопасности и обновлять программное обеспечение.

Юрий Голубев из Mail.ru опубликовал на Хабре статью с интригующим названием — «Как переверстать весь проект, не переверстывая его». Он рассказывает о кейсе на проекте почты, в котором нужно было реализовать изменение контента в зависимости от размера боковой колонки. Звучит просто, а на деле оказалось, что нет. В итоге задача решилась при помощи флексов, CSS-переменных и Resize Observer API.

Относительно недавно похожий материал уже был, но я хочу обратить ваше внимание на обзор браузерных хранилищ данных от Антона Жиянова. В своем блоге автор коротко, но ясно описывает разные виду браузерных хранилищ и прикладывает ссылки на более подробное чтиво. Он говорит и о куках, и о штуках поновее, как IndexedDB, а в заключение делится своими выводами.

В нашем с вами любимом IT-инфополе регулярно возникают споры о том, нужно ли знание алгоритмов. Вот вам пример задачи, в которой без алгоритмов не обойтись. Разработчики VS Code рассказали, как ускорили алгоритм раскраски скобок в 10 тысяч раз. Раньше фича была реализована в расширении, его функциональность, как особо полезную, решили перенести в ядро редактора. В статье есть подробный обзор алгоритма, процесса переработки и демо проблемы с производительностью. Осторожно, внутри оценка алгоритмической сложности, диаграммы и разбор итогового алгоритма. Между прочим, сложность итогового алгоритма — логарифмическая.

Закроет рубрику небольшой блиц интересных ссылок.

Серия «Визуализированный JavaScript» от Лидии Халли (Lydia Hallie) показывает важные концепции языка, такие как области видимости и hoisting, промисы, Event Loop, генераторы и итераторы, а также прототипное наследование. Получилось подробно и информативно, поможет разложить по полочкам в голове, рекомендую.

Интересуетесь текущим состоянием React и движением к React 18? В issue на GitHub Дэн Абрамов делится текущим восприятием и деталями работы над будущим релизом. Внимание, Дэн отмечает, что это только промежуточные идеи, а до релиза React 18 ещё достаточно далеко.

Далее — список ресурсов для изучения доступности и доступной разработки от Татьяны Фокиной.

Закроет блок официальная дизайн-система W3C. Непременно взгляните.

Новости релизов

Первый релиз этого выпуска — Firefox 93. Теперь браузер поддерживает формат изображений AVIF, а новый движок WebRender включен по умолчанию и не отключается. Браузер научили выгружать тяжелые вкладки из памяти и блокировать небезопасные загрузки файлов. Кроме того, подвезли много дополнений к DOM API, оптимизацию потребления памяти DevTools и улучшения приватности. Подробности — в блоге Mozilla и release notes.

Вышла бета TypeScript 4.5. Релиз многообещающий: в новой версии появится поддержка компиляции в ES-модули, а из файлов можно будет импортировать типы и функции через один порт, добавив к типу идентификатор type. Также была представлена оптимизация условных типов, которая позволяет уменьшить потребление памяти. Релиз запланирован на 16 ноября. Это, конечно, не все изменения, подробнее о нововведениях можно прочитать в блоге TypeScript.

Доступна версия Python 3.10. В этом релизе подвезли паттерн матчинг и реализовали операторы case и match. Еще одно значимое нововведение — намного более информативные сообщения об ошибках: даже появилась шутка, что фича оставила миллионы преподавателей Python без работы. Отличный релиз, полный список изменений вы найдете в release notes.

Вернемся к безопасности.

Запланирована серия security-релизов Node.js. На этот раз без серьезных проблем. Релиз должен быть доступен уже сегодня и затронет версии 12, 14 и 16 популярного рантайма. Были исправлены 2 уязвимости средней опасности, о более серьезных ошибках не сообщалось.

Также серией релизов отметилась СУБД Redis. Здесь уязвимостей было довольно много, целых 8 штук. Большая часть из них связана с переполнением буфера и манипуляциями при помощи Lua-скриптов. Разработчики проекта рекомендуют обновиться как можно скорее.

Ещё одна уязвимость была замечена в PHP. Оказалось, что есть способ обойти директиву disable_functions в php.ini. Подробности можно прочитать в issue на GitHub.

Также на этой неделе отмечу релиз мобильной ОС Android 12 и веб-сервера Lighttpd 1.4.60.

Другие новости

В блоге разработки Google Chrome появилась статья о первых результатах внедрения нового движка рендеринга RenderingNG и его компонентов. Пока речь, конечно, не идёт о полном внедрении — переход готовят постепенно, включая отдельные части и оптимизации. Собственно, результаты: графика рендерится в 6 раз быстрее, задержки при обработке страниц сократились на 8%, а время работы от аккумулятора увеличилось на полпроцента. Пока речь идет об оптимизациях, которые позволяют эффективнее использовать современные возможности процессоров, например, многоядерность. Были реализованы некоторые механизмы оптимизации растеризации и рендеринга разметки. Часть изменений будет доступна в Chrome уже в этом году.

Вы уже могли слышать, что в России появится свой Фонд свободного программного обеспечения. Некоммерческая организация призвана объединить крупнейшие компании и разработчиков свободного ПО, координировать деятельность разработчиков, научных и образовательных организаций. Идея, конечно, хорошая: развивать open source, привлекать студентов и устраивать конференции, не изобретать велосипед для разных проектов и инициатив. Но посмотрим, что из этого получится, потому что частенько выходит не «как лучше», а «как всегда». Увидим ли мы российский GitHub и прочие радости — покажет время, будем следить за развитием событий.

Пишите нам и читайте

Telegram—канал CSSSR

Twitter CSSSR

Twitter новостей

Telegram ведущего

Twitter ведущего

Комментарии

Продолжая пользование данным Сайтом, вы даете свое согласие на сбор и обработку технической информации (cookies). Подробнее о cookies читайте вПолитике конфиденциальности.