From d090a5346b2b7d274bc47d91807d4429755aa1c5 Mon Sep 17 00:00:00 2001 From: Islam Vindizhev Date: Fri, 15 Dec 2023 17:57:37 +0300 Subject: [PATCH 1/2] =?UTF-8?q?Add=20news=20issue=20=E2=84=96246?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _posts/news512/news-246.md | 87 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 _posts/news512/news-246.md diff --git a/_posts/news512/news-246.md b/_posts/news512/news-246.md new file mode 100644 index 00000000..d04f328f --- /dev/null +++ b/_posts/news512/news-246.md @@ -0,0 +1,87 @@ +--- +title: 'В этом выпуске: Chrome 120, Firefox 120, PHP 8.3 и Astro 4, современные фреймворки через создание своего собственного, элемент ``, новый оптимизирующий компилятор V8 Maglev, прокачка PM2 и на другие интересные материалы.' +soundcloudLink: 'https://soundcloud.com/csssr/chrome-120-firefox-120-php-83-astro-4-sozday-freymvork-reyting-superkompyuterov' +date: '2023-12-15T00:00:00.000Z' +episodeNumber: 246 +tag: 'news' +author: 'Ислам Виндижев' +--- + +Всем привет, это «Новости 512» от CSSSR. В этом выпуске мы поговорим о релизах Chrome 120, Firefox 120, PHP 8.3 и Astro 4, изучим современные фреймворки через создание своего собственного, разберёмся с элементом ``, посмотрим на новый оптимизирующий компилятор V8 Maglev, глянем, как можно прокачать PM2 и на другие интересные материалы. В конце выпуска мы немного поговорим о конкурсе от Prettier, нашем спасении от восстания машин и чуть-чуть о суперкомпьютерах. + + + ### Интересные публикации + +Одна из моих любимых категорий статей — это те, в которых что-то изучается через создание. Это как раз тот случай. Нолан Лоусон (Nolan Lawson) в своём блоге [предлагает](https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/) разобраться в том, как работают современные JS-фреймворки через создание своего собственного. Что такое современный? Он имеет в виду, что фреймворк должен уметь в реактивность, использовать клонированные шаблоны для рендера DOM и использовать современные JavaScript API. Собственно, все эти фичи он и реализует по очереди в своём небольшом фреймворке. Понятно, что это просто пример для разбора концепций, статья не очень большая. Но разобраться вполне себе можно. Рекомендую поделать руками и внимательно почитать. + + +Джейк Лазароф (Jake Lazaroff) задался вопросом: можно ли не зацикливаться на JS-фреймворках? Его точка зрения такова: можно вообще не париться. Доказывает он это довольно [интересным способом](https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/). Он реализует простое TODO-приложение, в котором каждый компонент реализует при помощи разного JS-фреймворка. Он пытается показать, что такой подход возможен, а веб-компоненты в этом очень помогут. Он оговаривается, что вряд ли вы действительно напишете такое приложение, но такая ситуация может возникнуть, например, при миграции с одного фреймворка на другой. + +Про элемент `` многим уже вполне себе известно. Это нативное диалоговое окно в HTML, которое может работать как в режиме диалогового, так и в режиме модального. Александр Григоренко на Хабре написал [статью](https://habr.com/ru/articles/778542/) про работу с новым элементом. Помимо общих сведений, он рассматривает особенности и тонкости работы нового элемента, а также решение ряда проблем, которые могут возникать при его использовании. + +Команда V8 в своём блоге [рассказала](https://v8.dev/blog/maglev) о новом оптимизирующем компиляторе движка Maglev. Вы наверняка слышали про Sparkplug и TurboFan, Maglev находится примерно между ними. В статье раскрывается мотивация создания ещё одного оптимизирующего компилятора (если коротко — сделать нечто среднее между двумя существующими для определённых случаев) и технические подробности. Работа существующих элементов V8 вместе с новым компилятором улучшила бенчмарки и уменьшила потребление энергии устройствами. Цифры и подробности — в блоге V8. + +Даниель Лемире (Daniel Lemire) [задался вопросом](https://lemire.me/blog/2023/11/25/a-simple-websocket-benchmark-in-javascript-node-js-versus-bun/), какой рантайм лучше работает с WebSocket. Он сравнил Node.js и Bun. Сейчас вообще частенько сравнивают Bun с чем-нибудь, сами понимаете почему. В итоге пришёл к выводу, что Bun быстрее на 40%. В статье вы найдёте ссылки на код и описание самого бенчмарка. Кейс был довольно простой, но заслуживает немного внимания. + +Если вы работали с мало-мальски реальным Node.js-приложением из реального мира, вы наверняка сталкивались с управлением процессами приложений и менеджером PM2. Если нет, коротко скажу, что это менеджер процессов, который позволяет кластеризовать и распределять нагрузку на сервер. В некоторых случаях его возможностей не хватает. Именно о таком случае [рассказал на Хабре](https://habr.com/ru/articles/778316/) Вячеслав Волков. В его случае нужно было научить PM2 автоматически масштабировать приложение при различных нагрузках. Для этого он написал свой плагин `pm2-autoscale`, который доступен любому желающему для установки и участия в разработке. Автор будет рад вашей помощи и отзывам. + +К выходу готовится [обновлённое CLI-приложение форматтера Prettier](https://prettier.io/blog/2023/11/30/cli-deep-dive.html). Фабио Спампинато (Fabio Spampinato), который как раз над ним работал, рассказал о том, что изменилось. Если упрощать, его основной задачей была оптимизация. Он погрузился в детали, рассказал о том, как поработал над кэшированием, самим форматированием и другими частями приложения. Если вы любите разбираться в том, как работают ваши любимые инструменты, вам обязательно понравится. + +Следующая пара материалов посвящена тестам. Представьте себе «прекрасную» ситуацию, в которой ваш фронтенд, который вы гоняете по тестам в Playwright, вообще-то выбросил исключение и упал, а тест всё равно прошёл. Неприятненько. Стефан Юдис (Stefan Judis) рассказал о том, как избежать таких ситуаций с ложно-позитивными тестами [при помощи фикстур](https://www.checklyhq.com/blog/track-frontend-javascript-exceptions-with-playwright/). Он рассказывает о самой фиче, приводит примеры и рассказывает, в каких ещё случаях это может быть полезно. + +Ещё один материал — исчерпывающая [шпаргалка по Puppeteer](https://proxiesapi.com/articles/the-complete-puppeteer-cheatsheet). Это именно шпаргалка без детального описания API и методов, только задача и кусочки кода. Возможно, вам пригодится. + +Санми Аканде (Sanmi Akande) в Smashing Magazine поделился [способами восстановления утраченных данных в git](https://www.smashingmagazine.com/2023/12/recovering-deleted-files-git-working-tree/). Он коротко рассказывает о том, как git вообще работает с файлами и изменениями, а также как могут быть удалены файлы и данные из них. Затем он рассматривает большое количество разных ситуаций, в которых можно либо, наоборот, нельзя восстановить утерянное. + +Завершит рубрику парочка видео. [Первое видео](https://www.youtube.com/watch?v=Hz_zCR28oKE) от всем известного Эвана Ю: примерно за час он рассказал о текущем состоянии фреймворка Vue и Vite. + +Второе [видео о 10 новых фичах JS](https://www.youtube.com/watch?v=ANCm3oG7htM), которые вы могли пропустить в 2023 году. Оно совсем короткое, идёт чуть меньше 6 минут. + + + ### Новости релизов + +Вышел Chrome 120. Был добавлен новый `CloseWatcher API`, который предоставляет разработчикам способ прослушивать и отвечать на запросы закрытия всплывающих и модальных компонентов. Для элемента `
` добавили поддержку атрибута `name`. Элементы `
` с одинаковым значением атрибута группируются, а одновременно можно открыть только один элемент — получается аккордеончик. Также продолжается работа над прекращением поддержки сторонних файлов cookie, в январе начнётся эксперимент на эту тему. DevTools также получил пару изменений, связанных с cookies, расширенный список игнорирования для дебаггера и ряд других небольших изменений. Больше подробностей — в официальных обзорах [Chrome](https://developer.chrome.com/blog/new-in-chrome-120) и [DevTools](https://developer.chrome.com/blog/new-in-devtools-120) от Google. + + +Firefox также отметился [версией 120](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/120). Теперь поддерживается атрибут `media` в элементе ``, вложенном в элементы ``, `