Defront — про фронтенд-разработку и не только
5.01K subscribers
21 photos
1.09K links
Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков

Обсуждение постов @defrontchat

Также советую канал @webnya
Download Telegram
Google активно работает над концепцией "Ambient Computing". Её идея заключается в том, чтобы на первый план вышли приложения и сервисы, "растворив" железо, на котором они работают, предоставив пользователям возможность использовать любое приложение на любой платформе.

Под концепцию "Ambient Computing" попадает всё, что происходит с Flutter — тулкитом для написания кросс-платформенных приложений на языке Dart, использующих нативные элементы интерфейса.

Сейчас Flutter поддерживает разработку приложений для Web, iOS и Android. В прошлом году была анонсирована поддержка десктопных операционных систем. На данный момент есть alpha-версия Flutter, поддерживающая macOS, параллельно ведётся работа над поддержкой Windows. Сегодня была представлена Linux-версия, над которой работали ребята из Canonical (Ubuntu). Flutter для Linux использует интерфейсные элементы GTK+, но пока поддержка Linux находится в состоянии alpha.

Ambient Computing — очень амбициозная идея, чтобы она полетела, имхо, Google нужно привлечь разработчиков профессиональных приложений (Adobe, Autodesk и т.п.)

#announcement #flutter #dart

https://medium.com/flutter/announcing-flutter-linux-alpha-with-canonical-19eb824590a9
Иногда новые спецификации добавляются в браузеры очень быстро, а иногда очень медленно. Почему так происходит? У разработчиков браузеров есть свои цели и приоритеты, которые не всегда совпадают с пожеланиями других компаний и сообщества. Компания Igalia помогает внешним компаниям в добавлении новых фич в браузеры. Например, её нанимал Bloomberg для добавления поддержки гридов в Chromium и WebKit.

Сегодня Igalia анонсировала Open Prioritizaiton. Это экспериментальный проект, который позволяет сообществу и небольшим компаниям профинансировать реализацию новых спецификаций. Сейчас в списке доступных задач есть добавление поддержки цветового пространства lab в Firefox, :focus-visible в WebKit, атрибута inert в WebKit, selector list arguments для :not() в Chrome, CSS Containment в WebKit и добавление поддержки установки SVG-атрибута d с помощью CSS в Firefox.

В общем, если что-то из этого списка вам близко, можно поучаствовать в проекте. Я задонатил пару баксов в поддержку CSS Containment.

#announcement #browser

https://www.igalia.com/open-prioritization/
Недавно Google обновил планы по переходу на mobile-first поиск — "Prepare for mobile-first indexing (with a little extra time)".

Количество пользователей интернета, использующих смартфоны, давно превысило количество пользователей десктопных платформ. Именно поэтому Google продвигает разные инициативы, улучшающие опыт работы с мобильным вебом. В том числе было запланировано включение mobile-first индексирования с сентября 2020 года, но из-за пандемии дата была перенесена на конец марта 2021 года.

Mobile-first индексирование означает, что поисковик будет использовать мобильные версии страниц для ранжирования. В статье есть рекомендации, что проверить и исправить, чтобы сайт не упал в результатах поисковой выдачи.

#seo #google #announcement

https://webmasters.googleblog.com/2020/07/prepare-for-mobile-first-indexing-with.html
Команда разработчиков Moment.js официально объявила о прекращении развития библиотеки.

Moment.js — самая популярная библиотека для работы с датами и временем на сегодняшний день. Она была создана в 2011 году с прицелом на потребности разработчиков того времени. За весь период существования библиотеки её дизайн не менялся, но сообщество хотело изменений, особенно иммутабельности и переработки архитектуры таким образом, чтобы библиотека стала дружить с тришейкингом. Внесение этих изменений вызвало бы вопросы у текущих пользователей библиотеки, так как получилась бы совершенно другая библиотека. Разработчики Moment.js не захотели идти по пути Angular и разработали альтернативную библиотеку — Luxon.

С сентября 2020 года в Moment.js не будут добавляться новые фичи, не будут больше обсуждаться вопросы тришейкинга, не будет никаких мажорных изменений (это означает, что никогда не будет 3-ей версии), возможно, не будут исправляться какие-либо баги и поведенческие странности, если они будут связаны с архитектурными проблемами. Но будут исправляться все проблемы безопасности, будет обновляться база часовых поясов IANA.

Разработчики рекомендуют не использовать Moment.js для новых проектов без поддержки старых браузеров, вместо неё рекомендуются Luxon, Date.js, date-fns и js-Jode. Также сейчас TC39 работает над Temporal (современной заменой объекта Date), в которой реализуется основная масса фич библиотек для работы с временем.

#announcement #date #library

https://momentjs.com/docs/#/-project-status/
Дэниэл Апплкуист — член W3C Technical Architecture Group — призывает сообщество присоединиться к разработке стандартов — "Why Get Involved in Web Standards?"

Дэниэл пишет о том, что он работает над улучшением прозрачности разработки web-стандартов и вовлечением в процесс большего числа разработчиков. Если вы думали над тем, чтобы присоединиться к разработке стандартов, но не знали с чего начать, то вам поможет Web Platform Contribution Guide. В нём рассказывается о процессе разработки стандартов и о том, как можно помочь. Также можно присоединиться к TPAC брейкаутам — докладам на тему разработки разных web-стандартов. Обычно брейкауты проводятся среди членов рабочих групп W3C, но в этом году в них может поучаствовать любой разработчик.

Если у вас есть какие-либо вопросы, то Дэниэл готов на них ответить. Все подробности можно найти в конце статьи.

#announcement #spec

https://dev.to/torgo/why-get-involved-in-web-standards-1p4h
Давид Хейнемейер Ханссон — автор веб-фреймворка Ruby on Rails — вчера представил Hotwire — альтернативный подход для создания SPA-подобных приложений, который использовался для создания почтового клиента hey.com.

Hotwire предоставляет набор из трёх библиотек: Turbo, Stimulus и Strada — для создания современных web-приложений без упора на JavaScript. Stimulus — это JavaScript-фреймворк, который был предоставлен пару лет назад. Его особенность заключается в HTML-центричном подходе для описания состояния и поведения приложения в браузере. Strada — это библиотека, облегчающие создание гибридных мобильных приложений. На данный момент она находится в стадии активной разработки, и более подробной информаци о ней нет. Turbo — это новая библиотека, помогающая в создании интерактивных страниц. Turbo интегрирует между собой бэкенд, который для обновляемых частей приложения вместо JSON отправляет отрендеренный HTML, и клиент, который подписывается на обновления с бэкенда по web-сокету и подменяет части приложения прилетевшими кусочками HTML-кода.

Видел в твиттере и на hackernews разные мысли по поводу этого подхода. Кто-то пишет о том, что ребята переизобрели Laravel Lifewire. Кто-то хвалит за продвижение идеи минимального использования JavaScript. Кто-то ругает за то, что отказ от JSON смешивает между собой слои представления и приложения. Подход, как минимум, интересный, но будет ли он развиваться за пределами Ruby-экосистемы, пока остаётся вопросом.

#jsframeworks #announcement

https://hotwire.dev/
https://twitter.com/dhh/status/1341420143239450624
Неделю назад Себастьян Маккензи — автор Babel и Yarn — написал пост про то, что его проект Rome привлёк инвестиции.

Rome — это тулчейн с открытым исходным кодом, цель которого — консолидация разных инструментов для работы с JavaScript (пакетный менеджер, линтер, тест-раннер, сборщик и т.п.) В отличие от других инструментов Rome использует единое ядро для всех задач, ускоряя работу всего фронтенд-пайплайна.

Привлечённые инвестиции (4.5 миллиона долларов) пойдут на найм фулл-тайм разработчиков. Себастьян пишет о том, что не планирует закрывать какие-то части Rome, инструмент будет доступен без ограничений. Зарабатывать планируют на вспомогательных сервисах.

В общем, проект полетел. Очень интересно, как он повлияет на JavaScript-экосистему в будущем.

#announcement #tool

https://rome.tools/blog/announcing-rome-tools-inc/
Вчера в блоге Google появилась новость о том, что Google Docs переходит на движок рендеринга, работающий поверх canvas, — "Google Docs will now use canvas based rendering: this may impact some Chrome extensions".

После публикации в сети появились обсуждения насколько это оправдано. Своими мыслями поделился один из авторов оригинального Google Docs. Он говорит о том, что HTML-движки хороши для рендеринга обычных сайтов, но им не хватает фич для реализации полноценных WISWYG-редакторов. И о том, что кастомный движок рендеринга выигрывает по скорости у HTML-движков благодаря ограниченному набору функций.

У многих возникли вопросы по поводу доступности. Я немного потестил тестовый документ из статьи, и с доступностью там более менее всё ок. Озвучивание текста включается с помощью хоткея cmd+option+z — появится div с aria-live вне области просмотра с текстом документа текущей страницы. При перемещении по документу озвучивается текущая строка.

Обновление Google Docs будет раскатываться постепенно в течение двух ближайших месяцев. После обновления браузерные расширения, работающие с HTML-разметкой приложения, перестанут работать.

#architecture #announcement #google #a11y

https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html
https://news.ycombinator.com/item?id=27129858 (обсуждение на Hacker News)
Минко Гечев из Google представил Angular DevTools — "Introducing Angular DevTools".

Angular DevTools — это расширение для Chrome, облегчающее отладку и профилирование Angular-приложений. Оно было разработано с нуля с участием разработчиков Augury — популярного расширения для отладки Angular.

С помощью Angular DevTools можно инспектировать и редактировать дерево компонентов, профилировать исполнение цикла отслеживания изменений (change detection cycle). Также в рамках этого проекта был улучшен опыт отладки Angular-приложений: был добавлен новый API и улучшены сообщения об ошибках. В следующих релизах разработчики планируют добавить наиболее полезные фичи Augury.

Angular DevTools поддерживает приложения, разработанные с помощью Angular v9 и выше на базе Ivy.

#angular #debug #announcement

https://blog.angular.io/introducing-angular-devtools-2d59ff4cf62f
Два дня назад вышла новая мажорная версия текстового редактора Sublime Text. Бенджамин Шааф рассказал о его новых возможностях — "Sublime Text 4".

Теперь Sublime Text поставляется со встроенной поддержкой TypeScript, TSX и JSX. Есть все основные фичи: подсветка синтаксиса, автодополнение кода, переход к объявлению.

Переработан UI приложения. Теперь его компоновка происходит на GPU, улучшая отзывчивость интерфейса при работе с большими проектами. Также немного обновили дизайн и добавили поддержку автоматической смены тем.

Был переписан движок автодополнения кода. Теперь он понимает структуру проекта и, в целом, стал более полезен. В списке автодополнения были добавлены значки типа символа и опция для перехода к месту его объявления в коде.

Был улучшен движок подсветки синтаксиса. Упрощено открытие вкладок в режиме split view. Добавлена нативная поддержка Apple Silicon и Linux ARM64.

#tool #programming #announcement

https://www.sublimetext.com/blog/articles/sublime-text-4
Пару дней назад Эрик Симонс — создатель StackBlitz, online-песочницы для разработки приложений — рассказал о новой фиче проекта — "Introducing WebContainers: Run Node.js natively in your browser".

WebContainers — это проприетарный механизм для запуска Node.js-приложений внутри браузера с помощью WebAssembly. В StackBlitz он используется для создания локальной изолированной среды для разработки серверных приложений внутри браузера (Next.js, NestJS). Несмотря на исполнение кода с помощью wasm-версии Node.js работает всё быстро. В статье написано, что сборка приложения в WebContainer быстрее локальной сборки на 20%. Этот результат получен благодаря использованию кастомного npm-клиента (об этом Эрик написал в комментариях на HackerNews).

Кроме скорости у WebContainers есть другие плюсы. Потенциальные вредоносные скрипты не смогут получить доступ к машине-хосту. Очень просто разворачивать новые среды, что хорошо подходит для быстрого тестирования фич или создания примеров кода с воспроизведением ошибок. Есть бесшовная интеграция с отладчиком Chrome DevTools

В общем, интересная технология, но на данный момент она находится в статусе беты и работает только в Chromium-based браузерах.

#nodejs #webassembly #announcement

https://blog.stackblitz.com/posts/introducing-webcontainers/
https://news.ycombinator.com/item?id=27223012
Владан Дзерик из Facebook рассказал об изменении приоритетов разработки Flow — "Clarity on Flow’s Direction and Open Source Engagement".

Разработка Flow теперь полностью сконцентрируется на потребностях Facebook: быстрой проверке типов на огромной кодовой базе, улучшению типобезопасности и DX. Проект будет продолжать разрабатываться на GitHub, но пулл-реквесты и ишью, не совпадающие с видением разработчиков, будут закрываться. Встроенные определения типов (DOM, Node, React и т.п.) будут вынесены в репозиторий flow-typed, чтобы их обновление не было привязано к релизному циклу Flow. Также планируют добавлять новые синтаксические конструкции. И по этому поводу хочется немного поспекулировать.

Исторически Flow позиционировался как "JavaScript с типами", то есть как тайпчекер. С добавлением новых синтаксических структур он превратится в полноценный язык. По сути Flow становится языком для фронтенда, кодовая база которого на 100% принадлежит Facebook. [Также вы можете вспомнить про Rescript (ex-ReasonML), но он полагается на bucklescript, разработанный Bloomberg, и насколько я знаю, Facebook не участвует в его развитии.] С учётом того, что в Facebook работают довольно сильные спецы по дизайну языков (знаю точно, что там работает Эрик Майер), в итоге может получиться что-то интересное.

#flow #announcement

https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engagement-e721a4eb4d8b
Фред Шотт — автор проекта Snowpack — представил первую публичную бета-версию статического генератора сайтов Astro — "Introducing Astro: Ship Less JavaScript".

Astro помогает создавать быстрые статические сайты с помощью популярных компонентных фреймворков (React, Vue, Svelte, Preact) или с помощью обычного HTML и JavaScript. По умолчанию он настроен так, чтобы на клиент не попадал JavaScript. Если какому-то компоненту для работы требуется дополнительный код, он загружается и инициализируется независимо от самой страницы.

Есть поддержка инициализации компонентов "по требованию" с загрузкой кода компонента только в том случае, когда он попадает во вьюпорт браузера. Есть поддержка TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX и т.п.

#announcement #ssg

https://astro.build/blog/introducing-astro
Сокращение информации в User-Agent Chrome

В январе 2020 года разработчики Chrome объявили о намерении сократить передаваемую информацию в User-Agent для улучшения приватности. Из-за пандемии этот процесс отложили, и вот несколько дней назад был опубликован обновлённый план — "User-Agent Reduction Origin Trial and Dates".

Начиная с Chrome 92 (июль 2021) при обращении к методам navigator.userAgent, navigator.appVersion, navigator.platform выводится предупреждение. С четвёртой фазы (в Chrome 101) актуальной станет только мажорная версия; MINOR.BUILD.PATCH будут обнулены — Chrome 101.0.0.0. В шестой фазе (Chrome 110) на смартфонах будет удалена информация о модели устройства. В седьмой фазе (Chrome 113) миграция на новый формат User-Agent будет завершена. Если сайтам нужна детальная информация о клиенте, то они смогут получить к ней доступ с помощью User Agent Client Hints.

#chrome #announcement

https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html
Потенциальные проблемы с сертификатами Let's Encrypt

Вчера Скот Хелм написал статью о том, что 30 сентября истёк срок действия корневого сертификата IdentTrust DST Root CA X3, который используется Let's Encrypt. Из-за этого на старых устройствах перестали открываться некоторые сайты, так как сертификат Let's Encrypt используют миллионы HTTPS-сайтов. Эта ситуация возникла из-за прекращения обновления прошивок старых устройств.

IdentTrust и Let's Encrypt придумали решение, чтобы корневой сертификат оставался валидным до 2024 года для Android-устройств с версиями ОС выше 2.3.6. Пользователи Android с более старыми версиями столкнутся с проблемами.

Сертификат IdenTrust DST Root CA X3 невалиден для:
— Windows < XP SP3
— macOS < 10.12,
— iOS < 10
— Android < 7.1.1 (версии >= 2.3.6 будут работать с ISRG Root X1 cross-sign)
— OpenSSL <= 1.0.2
— Ubuntu < 16.04
— Debian < 8
— Mozilla Firefox < 50
— Java 8 < 8u141
— Java 7 < 7u151,
— NSS < 3.26
— Amazon FireOS (Silk Browser)

Если у вас или у ваших знакомых внезапно перестал открываться любимый сайт, то скорее всего причина в этом.

#announcement #security

https://scotthelme.co.uk/lets-encrypt-old-root-expiration/
Прекращение поддержки IE11 в Google Search

Разработчики Google Search сообщили о прекращении поддержки Internet Explorer 11. Прекращение поддержки означает перевод пользователей IE11 в специальную версию поисковика, которая обслуживает неактуальные браузеры. Также в декабре 2020 года была прекращена поддержка IE11 в Gmail и Google Docs.

Если вы до сих пор исправляете ошибки в Internet Explorer, появился хороший повод, чтобы обдумать с вашими менеджерами целесообразность его поддержки.

#announcement #google #ie

https://9to5google.com/2021/10/01/google-search-internet-explorer-11/
Веб-версии Adobe Photoshop и Illustrator

На конференции Adobe MAX 2021 были представлены веб-версии Photoshop и Illustrator. Томас Натстад и Набель Аль-Шама рассказали о технологиях, которые сделали веб-версию Photoshop возможной — "Photoshop's journey to the web".

Веб-версия Photoshop использует WebAssembly и кодовую базу своего старшего брата. Чтобы производительность приложения была хорошей, порт использует новые фичи WebAssembly и Emscripten: многопоточность, SIMD и поддержку обработки исключений. Для поддержки современных дисплеев используется новое цветовое пространство P3 в canvas.

Интерфейс Photoshop построен на веб-компонентах с помощью библиотеки LitElement. В некоторых частях приложения используется React.

Photoshop for Web поддерживает только базовые функции редактирования изображений и комментирование. Также на презентации была представлена веб-версия Adobe Illustrator, но на данный момент она пока недоступна.

Adobe Photoshop и Illustrator работают только в Chrome и Edge.

#webassembly #announcement

https://web.dev/ps-on-the-web/
Потенциальные проблемы с Firefox 100 и Chrome 100

Близится день, когда Firefox и Chrome дойдут до сотой версии. Это не просто красивая цифра, но и потенциальная причина ошибок.

Немного истории. Opera стала первым браузером, дошедшим до версии 10. В альфа-версии десятки поломались сайты, неправильно парсившие User-Agent. Их логика парсинга предусматривала только одну цифру в версии, поэтому Opera 10 превращалась в Opera 1, ломая отображение сайта.

Подобная ситуация может случиться с Firefox 100 и Chrome 100, если логика парсинга не предусматривает трёхзначные числа. Поэтому разработчики браузеров рекомендуют проверить работу своих проектов с изменением версии браузера в User-Agent. Разработчики Chrome пошли немного дальше и сделали специальный флаг #force-major-version-to-100, который автоматически подымает версию Chrome до 100.

#announcement #web

https://developer.chrome.com/blog/force-major-version-to-100/
https://www.otsukare.info/2021/04/20/ua-three-digits-get-ready
Открытие исходного кода фреймворка Remix

Райан Флоуренс и Майкл Джексон — авторы React Router и Reach UI — полгода назад представили новый проект Remix — фреймворк для разработки приложений с серверным рендерингом на базе React. Всё это время он распространялся платно. После привлечения трёх миллионов долларов в качестве инвестиций они открыли исходный код проекта под лицензией MIT.

По сути Remix — это конкурент Next.js. Райан и Майкл в презентации дипломатично ушли от сравнения с Next.js. Говорят, что друзья с создателем Next.js и хотят жить в мире, но по лендингу проекта видно, что Remix претендует на свой кусок пирога. Более того они поделились планами по монентизации проекта. Они планируют создавать платные сервисы вокруг фреймворка, как это сделал Vercel с Next.js.

Основные отличия от Next.js. В Remix серверный код можно размещать внутри React-компонентов. Кастомный транспилятор удаляет этот код при создании бандла для клиента, и оставляет в серверной сборке. То есть это что-то похожее на серверные компоненты из React 18. Ещё очень большой упор в презентации был сделан на эргономику работы с формами — выглядит всё, действительно, очень удобно и привычно. На сайте проекта также говорится про улучшение флоу загрузки приложения, но над этой фичей работает core-команда React, а не Remix, и она появится в Next.js (или уже появилась?).

В общем, меня лично проект не сильно впечатлил. Однако за проектом стоят известные разработчики в React-сообществе и есть инвестиции, поэтому проект будет развиваться. В конце концов здоровая конкуренция это всегда хорошо.

#announcement #react #jsframeworks

https://remix.run/ (сайт проекта)
https://www.youtube.com/watch?v=wsJaUjd1rUo (презентация Remix)
Фонд UI

Chrome начал спонсировать независимых разработчиков и исследователей, работающих над вебом — "The UI fund".

На грант могут податься все желающие. Нет ограничений по срокам подачи заявок. Основное условие — работа над проектом, затрагивающим CSS, HTML или UI-инструменты. Под эти категории попадают инструменты для работы c HTML и CSS, работа над спецификациями или UI-исследованиями, работа в области доступности или работа над Open UI. Ведут проект Сара Дразнер и Николь Салливан. Для поддержки будут привлекаться эксперты из индустрии.

Очень крутая инициатива. В первую очередь она полезна майнтейнерам библиотек и всем, кто помогает в развитии веб-экосистемы.

#opensource #announcement

https://web.dev/ui-fund/