Йехуда Катц — один из отцов Ember, cargo и участник W3C — написал в твиттере большой тред, о распространённом заблуждении, что фронтенд — это специализация для джуниоров.
Код фронтенда в отличие от бэкенда работает во враждебном окружении: он должен работать во всех современных браузерах (их много), операционных системах и на разных устройствах (десктоп, мобильные). Нужно учитывать восстановление системы из невалидных состояний, например, когда крышка ноутбука закрывается во время отправки запроса на сервер или когда пользователь подключён к нестабильной сети. Опытные фронтенд-разработчики при решении своих задач должны учитывать эти и многие другие факторы. Более того, опытные разработчики должны создавать такие абстракции, которыми смогут эффективно пользоваться новички.
Разнообразие тулинга во фронтенде объясняется не уровнем подготовки специалистов, а, снова, враждебной средой, в которой должен работать код. Код нужно транспилировать, чтобы поддержать разные браузеры; можно, конечно, использовать старые версии языка, но это больно. Большие проекты используют PostCSS для использования новых фич CSS, добавления вендорных префиксов и для автоматического обхода ошибок в браузерах. Чтобы код был доставлен пользователю как можно быстрее, он должен быть собран сборщиком и минифицирован. Код нужно оптимизировать, потому что основная масса пользователей используют мобильные устройства на слабых процессорах.
В общем, хороший тред. Очень рекомендую почитать.
#musings #web
https://twitter.com/wycats/status/1342484366279098369
Код фронтенда в отличие от бэкенда работает во враждебном окружении: он должен работать во всех современных браузерах (их много), операционных системах и на разных устройствах (десктоп, мобильные). Нужно учитывать восстановление системы из невалидных состояний, например, когда крышка ноутбука закрывается во время отправки запроса на сервер или когда пользователь подключён к нестабильной сети. Опытные фронтенд-разработчики при решении своих задач должны учитывать эти и многие другие факторы. Более того, опытные разработчики должны создавать такие абстракции, которыми смогут эффективно пользоваться новички.
Разнообразие тулинга во фронтенде объясняется не уровнем подготовки специалистов, а, снова, враждебной средой, в которой должен работать код. Код нужно транспилировать, чтобы поддержать разные браузеры; можно, конечно, использовать старые версии языка, но это больно. Большие проекты используют PostCSS для использования новых фич CSS, добавления вендорных префиксов и для автоматического обхода ошибок в браузерах. Чтобы код был доставлен пользователю как можно быстрее, он должен быть собран сборщиком и минифицирован. Код нужно оптимизировать, потому что основная масса пользователей используют мобильные устройства на слабых процессорах.
В общем, хороший тред. Очень рекомендую почитать.
#musings #web
https://twitter.com/wycats/status/1342484366279098369
Twitter
Yehuda Katz
The thing I find frustrating about the idea that frontend dev is "for juniors" is that nobody would say it about other specializations. Someone might say that it's *better* if a compiler author worked in a more full stack role. They *wouldn't* say "compiler…
Мальте Юбэл из Google написал статью про современные практики работы с изображениями в web — "Maximally optimizing image loading for the web in 2021".
В статье рассказывается про то, как избежать сдвига контента при работе с отзывчивыми изображениями, про ленивую загрузку изображений, кэширование, новый формат AVIF, использование тега
Самым интересным в статье для меня было описание техник для снижения потребления и оптимизации CPU. Например, вставка изображений с атрибутом
Небольшая и очень полезная статья. Рекомендую почитать.
#graphics #web
https://www.industrialempathy.com/posts/image-optimizations/
В статье рассказывается про то, как избежать сдвига контента при работе с отзывчивыми изображениями, про ленивую загрузку изображений, кэширование, новый формат AVIF, использование тега
<picture> и работу с размытыми заглушками.Самым интересным в статье для меня было описание техник для снижения потребления и оптимизации CPU. Например, вставка изображений с атрибутом
decoding="async" даёт сигнал браузерам о том, что декодировать изображение можно вне главного потока (в твиттере в обсуждении статьи, лид, отвечающий за рендеринг в Chrome, говорит о том, что этот атрибут не включён по умолчанию, так как загружаемый контент моргал бы при загрузке). Ещё в статье есть описание трюка с использованием размытия с помощью SVG-фильтров, благодаря этому подходу изображения размываются только один раз при загрузке, а не на каждый layout страницы как при использовании CSS-фильтров.Небольшая и очень полезная статья. Рекомендую почитать.
#graphics #web
https://www.industrialempathy.com/posts/image-optimizations/
Industrialempathy
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the...
Дорогие подписчики, с Новым Годом! Желаю всего самого наилучшего, будьте сильными, верьте в себя и пусть вам всегда улыбается удача!
Рйо Ота рассказал, как можно сделать SSH-клиент, VNC-клиент и мессенджер без использования веб сокетов и WebRTC — "The Power of Pure HTTP – screen share, real-time messaging, SSH and VNC".
Обычно HTTP используется для передачи относительно небольших объёмов данных. Разработчики браузеров сейчас работают над возможностью отправки по сети
На данный момент возможность передачи
#experimental #http #api
https://dev.to/nwtgck/the-power-of-pure-http-screen-share-real-time-messaging-ssh-and-vnc-5ghc
Обычно HTTP используется для передачи относительно небольших объёмов данных. Разработчики браузеров сейчас работают над возможностью отправки по сети
ReadableStream с помощью fetch, то есть создания канала для передачи бесконечного потока данных. В статье разбираются примеры, как использовать эту фичу вместе с piping server, который позволяет организовать взаимодействие между двумя браузерами с помощью обычных GET- и POST-запросов. С помощью такого подхода можно сделать приложение просмотра удалённого рабочего стола, SSH-клиенты и другие подобные приложения, которые работают внутри браузера и используют обычный HTTP-канал в качестве транспорта.На данный момент возможность передачи
ReadableStream с помощью fetch есть только в Chrome в экспериментальном режиме.#experimental #http #api
https://dev.to/nwtgck/the-power-of-pure-http-screen-share-real-time-messaging-ssh-and-vnc-5ghc
DEV Community
The Power of Pure HTTP – screen share, real-time messaging, SSH and VNC
HTTP stream allow you to real-time communications such as screen share, messaging, SSH, VNC and so on. This post shows the power of pure HTTP stream using Piping Server.
Саймон Вики рассказал, почему нужно перестать загружать шрифты с CDN Google — "Time to Say Goodbye to Google Fonts".
Если использовать шрифты с CDN Google, браузер сначала должен разрезолвить домен для получения CSS, а затем домен, на котором лежат файлы шрифтов. В сетях с высокими задержками это может занять несколько секунд. Поэтому многие специалисты в области производительности рекомендуют хостить шрифты на своём домене, чтобы достичь максимально возможной скорости загрузки сайта.
Саймон пишет о том, что раньше загрузка шрифтов Google не была большой проблемой, потому что закэшированный файл шрифта мог использоваться другими сайтами. С включением изолированного кэша в Chrome 86 сайты загружают шрифты повторно, сводя на нет одно из основных преимуществ CDN. В Firefox тоже есть планы на добавление изолированного кэша, а в Safari он работает уже с 2013 года.
#fonts #performance
https://wicki.io/posts/2020-11-goodbye-google-fonts/
Если использовать шрифты с CDN Google, браузер сначала должен разрезолвить домен для получения CSS, а затем домен, на котором лежат файлы шрифтов. В сетях с высокими задержками это может занять несколько секунд. Поэтому многие специалисты в области производительности рекомендуют хостить шрифты на своём домене, чтобы достичь максимально возможной скорости загрузки сайта.
Саймон пишет о том, что раньше загрузка шрифтов Google не была большой проблемой, потому что закэшированный файл шрифта мог использоваться другими сайтами. С включением изолированного кэша в Chrome 86 сайты загружают шрифты повторно, сводя на нет одно из основных преимуществ CDN. В Firefox тоже есть планы на добавление изолированного кэша, а в Safari он работает уже с 2013 года.
#fonts #performance
https://wicki.io/posts/2020-11-goodbye-google-fonts/
Wicki.io
Time to Say Goodbye to Google Fonts: Cache Performance
This browser caching change kills the utility of cross-site resource CDNs like Google Fonts.
Дэвид Нолэн — ведущий разработчик ClojureScript — рассказал про свой путь в разработке, про ClojureScript и о том, как он стал его основным майнтейнером.
Дэвид говорит, что самое ценное, что он перенял от Ричарда Хикки (автор Clojure), умение говорить "нет". При работе над проектами, которые используют большое количество людей, нужно уметь говорить "нет", чтобы иметь силы продолжать работать над важными фичами. Но не нужно просто отказывать, нужно мотивировать находить своё решение. Если пользователи приходят с багами, самое лучшее, что можно сделать — помочь им самим исправить проблемный код. Также работа над проектом должна приносить радость, иначе можно быстро выгореть.
Интересная статья. В первую очередь рекомендую почитать всем, кто поддерживает open source проекты.
#opensource #clojurenoscript #history
https://github.com/readme/david-nolen
Дэвид говорит, что самое ценное, что он перенял от Ричарда Хикки (автор Clojure), умение говорить "нет". При работе над проектами, которые используют большое количество людей, нужно уметь говорить "нет", чтобы иметь силы продолжать работать над важными фичами. Но не нужно просто отказывать, нужно мотивировать находить своё решение. Если пользователи приходят с багами, самое лучшее, что можно сделать — помочь им самим исправить проблемный код. Также работа над проектом должна приносить радость, иначе можно быстро выгореть.
Интересная статья. В первую очередь рекомендую почитать всем, кто поддерживает open source проекты.
#opensource #clojurenoscript #history
https://github.com/readme/david-nolen
GitHub
David Nolen
David Nolen of ClojureScript emphasizes the importance of creating environments where potential for solutions can thrive.
Read more at The ReadME Project by GitHub.
Read more at The ReadME Project by GitHub.
Стэрен Джианнини решил отказаться от модных технологий и стал вести свой блог на чистом HTML и CSS без использования CMS, генераторов статических сайтов и т.п. Про это он написал статью "My stack will outlive yours".
Стэрен пишет о том, что концептуально в web'е существуют два вида страниц: web-страницы с простым содержанием и web-приложения. Обычный HTML и CSS покрывает всё необходимое, что может потребоваться для создания простых web-страниц: лендингов, сайтов-портфолио, блогов и сайтов с документацией. При разработке простого сайта не требуется настраивать сборку, устанавливать зависимости и использовать тяжёлые IDE. Он будет прекрасно работать и через 10 лет. Использование семантичной вёрстки поможет не заблудиться в коде, а если нужно будет поменять однотипные места на нескольких похожих страницах, то для этого можно использовать функцию редактора ”Replace in files”.
Мне лично нравится такой подход. Конечно, для сайтов с большим количеством страниц, это может быть непрактично, но для маленьких сайтов это хороший вариант.
#html #css #musings
https://blog.steren.fr/2020/my-stack-will-outlive-yours/
Стэрен пишет о том, что концептуально в web'е существуют два вида страниц: web-страницы с простым содержанием и web-приложения. Обычный HTML и CSS покрывает всё необходимое, что может потребоваться для создания простых web-страниц: лендингов, сайтов-портфолио, блогов и сайтов с документацией. При разработке простого сайта не требуется настраивать сборку, устанавливать зависимости и использовать тяжёлые IDE. Он будет прекрасно работать и через 10 лет. Использование семантичной вёрстки поможет не заблудиться в коде, а если нужно будет поменять однотипные места на нескольких похожих страницах, то для этого можно использовать функцию редактора ”Replace in files”.
Мне лично нравится такой подход. Конечно, для сайтов с большим количеством страниц, это может быть непрактично, но для маленьких сайтов это хороший вариант.
#html #css #musings
https://blog.steren.fr/2020/my-stack-will-outlive-yours/
blog.steren.fr
My stack will outlive yours
Петер Перлепес написал статью про обработку событий перехода страницы в фоновый режим — "Exploring the Page Visibility API for Detecting Page Background State".
Событие перехода страницы в фоновый может быть полезно, когда нужно отключить анимации, чтобы они не нагружали CPU, остановить прокрутку слайдера, чтобы сильно не ломать контекст пользователя, или когда нужно отправить собранные данные телеметрии приложения на сервер.
Все браузеры поддерживают события
#js #web
https://tech.trivago.com/2020/11/17/exploring-the-page-visibility-api-for-detecting-page-background-state/
Событие перехода страницы в фоновый может быть полезно, когда нужно отключить анимации, чтобы они не нагружали CPU, остановить прокрутку слайдера, чтобы сильно не ломать контекст пользователя, или когда нужно отправить собранные данные телеметрии приложения на сервер.
Все браузеры поддерживают события
beforeunload и unload, с помощью которых можно отловить закрытие страницы, но они ненадёжны на мобильных платформах. Ещё эти события могут негативно влиять на Back/Forward Cache браузера. Современный подход — использование событий Page Visibility API: pagehide и visibilitychange. С ними есть сложности, связанные с кроссбраузерностью. В статье рассказывается о том, как лучше всего их использовать.#js #web
https://tech.trivago.com/2020/11/17/exploring-the-page-visibility-api-for-detecting-page-background-state/
За прошедшие две недели в канале для патронов Defront было опубликовано много интересных постов:
— Великая стагнация индустрии разработки ПО
— Улучшение производительности cайта с помощью фасадов
— Влияние CSS-свойства content-visibility на доступность сайтов
— Как использовать web-шрифты, не ухудшая производительность
— Использование api-extractor в TypeScript-проектах
— React core team изнутри
— Как разработчики curl используют git
— Доступность ссылок на якоря
— Влияние data URI на производительность сайтов
— Как Discord добавил поддержку навигации с клавиатуры
Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
— Великая стагнация индустрии разработки ПО
— Улучшение производительности cайта с помощью фасадов
— Влияние CSS-свойства content-visibility на доступность сайтов
— Как использовать web-шрифты, не ухудшая производительность
— Использование api-extractor в TypeScript-проектах
— React core team изнутри
— Как разработчики curl используют git
— Доступность ссылок на якоря
— Влияние data URI на производительность сайтов
— Как Discord добавил поддержку навигации с клавиатуры
Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. На данный момент Patreon мой единственный источник дохода; все донаты идут на покупку еды, оплату аренды квартиры и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
Майкл Линч написал статью о том, в каком виде лучше всего отправлять код на код ревью, чтобы оно прошло максимально быстро — "How to Make Your Code Reviewer Fall in Love with You".
Самое важное правило для автора кода — ценить время ревьювера. Прежде чем отправить код на ревью, попробуйте сделать ревью самостоятельно. Если набор изменений слишком большой, его лучше разбить на несколько частей. Также вместе с пулл реквестом желательно давать дополнительную информацию о изменениях, чтобы проверяющие не тратили время на разбор кода, пытаясь понять почему проблема была решена именно так, а не иначе. Этот контекст может пригодиться автору кода и его коллегам в будущем.
Очень полезная статья. Must read для всех, кто работает в команде.
#programming
https://mtlynch.io/code-review-love/
Самое важное правило для автора кода — ценить время ревьювера. Прежде чем отправить код на ревью, попробуйте сделать ревью самостоятельно. Если набор изменений слишком большой, его лучше разбить на несколько частей. Также вместе с пулл реквестом желательно давать дополнительную информацию о изменениях, чтобы проверяющие не тратили время на разбор кода, пытаясь понять почему проблема была решена именно так, а не иначе. Этот контекст может пригодиться автору кода и его коллегам в будущем.
Очень полезная статья. Must read для всех, кто работает в команде.
#programming
https://mtlynch.io/code-review-love/
mtlynch.io
How to Make Your Code Reviewer Fall in Love with You
Best practices for code review when you're the author.
В прошлом году самой горячей темой стало усилившееся разногласие в отношении будущего веба между Apple, Google и Mozilla. Google продвигает идею "нативного" веба, добавляя в Chromium экспериментальные API для доступа К Bluetooth/USB-устройствам, файловой системе пользователя и т.п. Apple и Mozilla придерживаются консервативной позиции и не хотят добавлять некоторые API, предлагаемые Google, объясняя это заботой о приватности и безопасности пользователей.
Ноам Розенталь — участвует в разработке стандартов и движков браузеров — постарался объективно разобраться в этой теме и поделился своим видением решения возникшей проблемы — "Should The Web Expose Hardware Capabilities?".
В первой части статьи Ноам пытается понять обе стороны спора и пишет о том, что по-своему правы и Google, и Apple с Mozilla. С одной стороны мы хотим видеть развитие платформы, с другой стороны мы не хотим жертвовать безопасностью пользователей. Это очень серьёзный вопрос, например, в 2018 году исследователи в области безопасности рассказали о способе компроментации USB-ключей доступа с помощью WebUSB (Google эту проблему устранил). Чтобы избежать подобных проблем в будущем во второй части статьи автор предлагает внедрить модель доверия, в которой разработчики железа и браузеров могут ограничить урон, который может быть нанесён потенциально небезопасными API.
Статья большая и довольно интересная. Рекомендую почитать всем, кто интересуется темой разработки стандартов.
#web #specification
https://www.smashingmagazine.com/2021/01/web-expose-hardware-capabilities/
Ноам Розенталь — участвует в разработке стандартов и движков браузеров — постарался объективно разобраться в этой теме и поделился своим видением решения возникшей проблемы — "Should The Web Expose Hardware Capabilities?".
В первой части статьи Ноам пытается понять обе стороны спора и пишет о том, что по-своему правы и Google, и Apple с Mozilla. С одной стороны мы хотим видеть развитие платформы, с другой стороны мы не хотим жертвовать безопасностью пользователей. Это очень серьёзный вопрос, например, в 2018 году исследователи в области безопасности рассказали о способе компроментации USB-ключей доступа с помощью WebUSB (Google эту проблему устранил). Чтобы избежать подобных проблем в будущем во второй части статьи автор предлагает внедрить модель доверия, в которой разработчики железа и браузеров могут ограничить урон, который может быть нанесён потенциально небезопасными API.
Статья большая и довольно интересная. Рекомендую почитать всем, кто интересуется темой разработки стандартов.
#web #specification
https://www.smashingmagazine.com/2021/01/web-expose-hardware-capabilities/
Smashing Magazine
Should The Web Expose Hardware Capabilities? — Smashing Magazine
This article is a response to the Platform Adjacency Theory by Alex Russell, with specific takes on WebUSB and some alternative proposals for a way forward.
Матиас Байненс — разработчик V8 и Chrome — написал статью о том, как была реализована симуляция недостатков зрения в Chrome DevTools — "Simulating color vision deficiencies in the Blink Renderer".
Результаты исследования WebAIM говорят о том, что контраст текста — самая распространённая проблема доступности сайтов. Вы скорее всего встречали его упоминание в DevTools или Lighthouse и с большой вероятностью удивлялись тому, что эти инструменты жаловались на плохой контраст, в то время как вы могли легко всё прочитать. Дело в том, что анализ контраста включает в себя разные особенности восприятия цвета: кто-то не видит красный цвет, кто-то зелёный и т.п.
Для реализации симуляции недостатков зрения разработчики сделали прототип на обычных web-технологиях. Для этого они воспользовались SVG-фильтром на root-элементе. В этом фильтре описывается преобразование цветов на основе научной работы "A Physiologically-based Model for Simulation of Color Vision Deficiency". Чтобы не внедрять на страницу лишние элементы, решение с SVG было перенесено в движок браузера.
Очень интересная статья. Рекомендую почитать всем, кто интересуется доступностью и темой разработки браузеров.
#a11y #internals #chrome
https://developers.google.com/web/updates/2020/11/cvd
Результаты исследования WebAIM говорят о том, что контраст текста — самая распространённая проблема доступности сайтов. Вы скорее всего встречали его упоминание в DevTools или Lighthouse и с большой вероятностью удивлялись тому, что эти инструменты жаловались на плохой контраст, в то время как вы могли легко всё прочитать. Дело в том, что анализ контраста включает в себя разные особенности восприятия цвета: кто-то не видит красный цвет, кто-то зелёный и т.п.
Для реализации симуляции недостатков зрения разработчики сделали прототип на обычных web-технологиях. Для этого они воспользовались SVG-фильтром на root-элементе. В этом фильтре описывается преобразование цветов на основе научной работы "A Physiologically-based Model for Simulation of Color Vision Deficiency". Чтобы не внедрять на страницу лишние элементы, решение с SVG было перенесено в движок браузера.
Очень интересная статья. Рекомендую почитать всем, кто интересуется доступностью и темой разработки браузеров.
#a11y #internals #chrome
https://developers.google.com/web/updates/2020/11/cvd
Chrome for Developers
Simulating color vision deficiencies in the Blink Renderer | Chromium | Chrome for Developers
Why and how we implemented color vision deficiency simulation in DevTools and the Blink Renderer.
Томас Штайнер из Google рассказал, почему проект Excalidraw отказался от идеи создания десктопного приложения с помощью Electron — "Deprecating Excalidraw Electron in favor of the Web version".
Excalidraw — это клиентское web-приложение с открытым исходным кодом для создания диаграмм с возможностью совместного редактирования. Разработчики хотели сделать десктопную обёртку с помощью Electron для пубилкации в магазинах приложений, но это оказалось не очень простой задачей. В Electron нет поддержки автоматического обновления приложений на Linux, интеграция с нативными меню ОС не идеальна, для распространения приложения оно должно быть подписано цифровой подписью. Всё это решаемые проблемы, но у ребят не было желания заниматься поддержкой Electron-версии, поэтому они сфокусировались на добавлении в приложение PWA-фич.
В итоге по доступным возможностям получившееся приложение почти не уступает приложениям на Electron. В Excallidraw есть поддержка оффлайн-режима работы, простая установка и полноценная интеграция в ОС, прозрачная работа с файловой системой, поддержка drag'n'drop файлов, поддержка буфера обмена, есть регистрация приложения для открытия файлов с расширением .excalidraw.
Рекомендую почитать статью всем, кому интересно узнать про современные возможности PWA.
#electron #pwa
https://web.dev/deprecating-excalidraw-electron/
Excalidraw — это клиентское web-приложение с открытым исходным кодом для создания диаграмм с возможностью совместного редактирования. Разработчики хотели сделать десктопную обёртку с помощью Electron для пубилкации в магазинах приложений, но это оказалось не очень простой задачей. В Electron нет поддержки автоматического обновления приложений на Linux, интеграция с нативными меню ОС не идеальна, для распространения приложения оно должно быть подписано цифровой подписью. Всё это решаемые проблемы, но у ребят не было желания заниматься поддержкой Electron-версии, поэтому они сфокусировались на добавлении в приложение PWA-фич.
В итоге по доступным возможностям получившееся приложение почти не уступает приложениям на Electron. В Excallidraw есть поддержка оффлайн-режима работы, простая установка и полноценная интеграция в ОС, прозрачная работа с файловой системой, поддержка drag'n'drop файлов, поддержка буфера обмена, есть регистрация приложения для открытия файлов с расширением .excalidraw.
Рекомендую почитать статью всем, кому интересно узнать про современные возможности PWA.
#electron #pwa
https://web.dev/deprecating-excalidraw-electron/
web.dev
Deprecating Excalidraw Electron in favor of the web version
Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel hand-drawn. On the Excalidraw project, we decided to deprecate Excalidraw Desktop, an Electron wrapper for Excalidraw, in favor of the web version that you can—and…
Вчера случился фейл, и пост не был опубликован, поэтому сегодня будет два поста — сейчас и попозже.
Давайте продолжим тему PWA (Progressive Web App). Недавно Максимилиано Фиртман опубликовал свой традиционный пост с исследованием рынка PWA — "Progressive Web Apps in 2021".
Самое интересное из статьи. За прошедший год количество сайтов, доступных как PWA, выросло в два раза. Количество PWA стабильно растёт, но пока ещё очень сильно отстаёт от доступных приложений на нативных платформах.
В конце 2020 года Microsoft предоставила возможность публиковать в магазине приложений PWA на базе Chromium. Apple зарелизила новую фичу WKWebView — App-Bound Domains. Благодаря ей появилась возможность публикации PWA в AppStore для iOS 14, iPadOS 14 и macOS 11 Big Sur.
Многие компании в 2020 году стали распространять свои приложения как PWA: AppStore Connect (Apple), Hangouts/Duo/YouTube Music/Stadia (Google), Luna (Amazon) и другие.
Пост очень большой, рекомендую заглянуть, если планируете начать разрабатывать или уже занимаетесь разработкой PWA.
#pwa
https://firt.dev/pwa-2021/
Давайте продолжим тему PWA (Progressive Web App). Недавно Максимилиано Фиртман опубликовал свой традиционный пост с исследованием рынка PWA — "Progressive Web Apps in 2021".
Самое интересное из статьи. За прошедший год количество сайтов, доступных как PWA, выросло в два раза. Количество PWA стабильно растёт, но пока ещё очень сильно отстаёт от доступных приложений на нативных платформах.
В конце 2020 года Microsoft предоставила возможность публиковать в магазине приложений PWA на базе Chromium. Apple зарелизила новую фичу WKWebView — App-Bound Domains. Благодаря ей появилась возможность публикации PWA в AppStore для iOS 14, iPadOS 14 и macOS 11 Big Sur.
Многие компании в 2020 году стали распространять свои приложения как PWA: AppStore Connect (Apple), Hangouts/Duo/YouTube Music/Stadia (Google), Luna (Amazon) и другие.
Пост очень большой, рекомендую заглянуть, если планируете начать разрабатывать или уже занимаетесь разработкой PWA.
#pwa
https://firt.dev/pwa-2021/
firt.dev
Progressive Web Apps in 2021－firt.dev
The current status of the PWA platform, abilities, compatibility, app store distribution, PWA market share and more insights about the state of the platform
Стэфан Баумгартнер написал статью о том, почему не стоит использовать некоторые ООП-фичи TypeScript — "Tidy TypeScript: Avoid traditional OOP patterns".
Не нужно использовать статические классы. Они пришли в TypeScript из языков, где классы — основной механизм для структурирования кода. В мире JavaScript есть другие возможности, например, обычные модули.
Пространства имён (namespaces) были добавлены в TypeScript в первых версиях языка для удобства работы с кодом. Сейчас их могут прекрасно заменить модули. Неймспейсы иногда могут быть полезны во внешних файлах декларации, но их не следует использовать в коде проекта.
Ещё Стэфан предлагает отказаться от использования абстрактных классов. Абстрактные классы транспилируются в обычные классы, они могут быть без проблем инстанцированы в JavaScript, что может привести к проблемам.
Хорошая статья, но последний пункт про абстрактные классы мне кажется спорным.
#typenoscript
https://fettblog.eu/tidy-typenoscript-avoid-traditional-oop/
Не нужно использовать статические классы. Они пришли в TypeScript из языков, где классы — основной механизм для структурирования кода. В мире JavaScript есть другие возможности, например, обычные модули.
Пространства имён (namespaces) были добавлены в TypeScript в первых версиях языка для удобства работы с кодом. Сейчас их могут прекрасно заменить модули. Неймспейсы иногда могут быть полезны во внешних файлах декларации, но их не следует использовать в коде проекта.
Ещё Стэфан предлагает отказаться от использования абстрактных классов. Абстрактные классы транспилируются в обычные классы, они могут быть без проблем инстанцированы в JavaScript, что может привести к проблемам.
Хорошая статья, но последний пункт про абстрактные классы мне кажется спорным.
#typenoscript
https://fettblog.eu/tidy-typenoscript-avoid-traditional-oop/
fettblog.eu
Tidy TypeScript: Avoid traditional OOP patterns
This is the third article in a series of articles where I want to highlight ways on how to keep your TypeScript code neat and tidy. This series is heavily opinionated and you might find out things you don’t like. Don’t take it personally, it’s just an opinion.
В блоге V8 Мартин Бидлингмайер опубликовал статью про новый вспомогательный движок регэкспов, который позволяет избежать катастрофических откатов — "An additional non-backtracking RegExp engine".
V8 по умолчанию использует регэксп-движок Irregexp, который в свою очередь использует алгоритм бэктрекинга для проверки паттернов регэкспов. Этот алгоритм может приводить к катастрофическим откатам (сatastrophic backtracking). Катастрофический откат — это ситуация, когда проверка регулярного выражения не может быть выполнена за разумное время из-за экспоненциального роста количества возможных вариантов, которые должны быть обработаны движком. Катастрофические откаты могут использоваться для совершения DOS-атак, когда web-сервис обрабатывает входные данные пользователей с помощью регулярных выражений.
В V8 версии v8.8 был добавлен новый экспериментальный движок, который не подвержен проблеме экспоненциального взрыва, но гораздо медленнее (на данный момент) Irregexp. Его можно включить с помощью экспериментальных флагов V8.
Довольно хардкорная статья. Рекомендую почитать всем, кто интересуется темой разработки браузеров и безопасностью.
#v8 #security #internals
https://v8.dev/blog/non-backtracking-regexp
V8 по умолчанию использует регэксп-движок Irregexp, который в свою очередь использует алгоритм бэктрекинга для проверки паттернов регэкспов. Этот алгоритм может приводить к катастрофическим откатам (сatastrophic backtracking). Катастрофический откат — это ситуация, когда проверка регулярного выражения не может быть выполнена за разумное время из-за экспоненциального роста количества возможных вариантов, которые должны быть обработаны движком. Катастрофические откаты могут использоваться для совершения DOS-атак, когда web-сервис обрабатывает входные данные пользователей с помощью регулярных выражений.
В V8 версии v8.8 был добавлен новый экспериментальный движок, который не подвержен проблеме экспоненциального взрыва, но гораздо медленнее (на данный момент) Irregexp. Его можно включить с помощью экспериментальных флагов V8.
Довольно хардкорная статья. Рекомендую почитать всем, кто интересуется темой разработки браузеров и безопасностью.
#v8 #security #internals
https://v8.dev/blog/non-backtracking-regexp
v8.dev
An additional non-backtracking RegExp engine · V8
V8 now has an additional RegExp engine that serves as a fallback and prevents many instances of catastrophic backtracking.
Нашёл статью Джона Регера, в которой он рассказывает о том, почему мы не замечаем баги в своих программах, в то время как пользователи находят их очень быстро — "Operant Conditioning by Software Bugs".
В психологии есть понятие "оперантное обусловливание" (operant conditioning) — адаптация поведения человека как ответ на последствия, возникающие в результате этого поведения. Этот эффект можно объяснить на примере. У автора статьи был ноутбук, который постоянно крэшился из-за быстрой прокрутки страницы в браузере (проблема была в видеодрайвере). Чтобы система постоянно не ломалась, Джон подсознательно выработал привычку прокручивать страницу по чуть-чуть. У всех опытных пользователей компьютера есть много похожих привычек: не прерывать процесс установки, терпеливо ждать ответа от операционной системы, если она подвисла, не использовать эзотерические опции конфигурации и т.п.
Этим эффектом также можно объяснить, почему при тестировании своих собственных программ разработчики находят меньше ошибок, чем тестировщики.
Очень интересная статья. Рекомендую почитать.
#debug #psychology
https://blog.regehr.org/archives/861
https://news.ycombinator.com/item?id=16863233 (обсуждение на HN)
В психологии есть понятие "оперантное обусловливание" (operant conditioning) — адаптация поведения человека как ответ на последствия, возникающие в результате этого поведения. Этот эффект можно объяснить на примере. У автора статьи был ноутбук, который постоянно крэшился из-за быстрой прокрутки страницы в браузере (проблема была в видеодрайвере). Чтобы система постоянно не ломалась, Джон подсознательно выработал привычку прокручивать страницу по чуть-чуть. У всех опытных пользователей компьютера есть много похожих привычек: не прерывать процесс установки, терпеливо ждать ответа от операционной системы, если она подвисла, не использовать эзотерические опции конфигурации и т.п.
Этим эффектом также можно объяснить, почему при тестировании своих собственных программ разработчики находят меньше ошибок, чем тестировщики.
Очень интересная статья. Рекомендую почитать.
#debug #psychology
https://blog.regehr.org/archives/861
https://news.ycombinator.com/item?id=16863233 (обсуждение на HN)
Сегодня были опубликованы результаты ежегодного опроса JavaScript-сообщества (23 тысячи респондентов) — "State of JS 2020".
Из интересного. Среди фреймворков продолжают доминировать React, Vue и Angular. Набирает популярность Svelte — им удовлетворён наибольший процент разработчиков. Среди сборщиков наибольший показатель удовлетворённости у esbuild и Snowpack. GraphQL — самая популярная технология для управления данными. В этом году в категории бэкенд-фреймворков было добавлено много новых позиций, но самыми популярными фреймворками, как и в прошлом году, стали Next.js и Express. Redux и Relay продолжают терять свою популярность. Самый популярный транспилируемый язык — TypeScript.
#js #survey
https://2020.stateofjs.com/en-US/
https://2020.stateofjs.com/ru-RU/ (на русском языке)
Из интересного. Среди фреймворков продолжают доминировать React, Vue и Angular. Набирает популярность Svelte — им удовлетворён наибольший процент разработчиков. Среди сборщиков наибольший показатель удовлетворённости у esbuild и Snowpack. GraphQL — самая популярная технология для управления данными. В этом году в категории бэкенд-фреймворков было добавлено много новых позиций, но самыми популярными фреймворками, как и в прошлом году, стали Next.js и Express. Redux и Relay продолжают терять свою популярность. Самый популярный транспилируемый язык — TypeScript.
#js #survey
https://2020.stateofjs.com/en-US/
https://2020.stateofjs.com/ru-RU/ (на русском языке)
Stateofjs
State of JS 2020
The annual survey about the latest trends in the JavaScript ecosystem.
Синдре Сорхус — автор большого количества npm-пакетов — поделился своими планами миграции на нативную модульную систему — "Get Ready For ESM".
В конце апреля 2021 года будет прекращена поддержка Node.js 10. Это означает, что майнтейнеры пакетов могут начать использовать все фичи Node.js 12 в том числе и ECMAScript Modules. ESM решает проблему интероперабельности модулей между Node.js и web, включает strict-режим по умолчанию и поддерживает три-шейкинг.
Синдре планирует в этом году перевести все свои npm-пакеты (более тысячи) на ESM и планирует полностью отказаться от CommonJS. Также он призывает всех майнтейнеров npm-пакетов присоединиться к этой инициативе, чтобы ускорить процесс миграции всей JavaScript-экосистемы.
#esm #nodejs
https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77
В конце апреля 2021 года будет прекращена поддержка Node.js 10. Это означает, что майнтейнеры пакетов могут начать использовать все фичи Node.js 12 в том числе и ECMAScript Modules. ESM решает проблему интероперабельности модулей между Node.js и web, включает strict-режим по умолчанию и поддерживает три-шейкинг.
Синдре планирует в этом году перевести все свои npm-пакеты (более тысячи) на ESM и планирует полностью отказаться от CommonJS. Также он призывает всех майнтейнеров npm-пакетов присоединиться к этой инициативе, чтобы ускорить процесс миграции всей JavaScript-экосистемы.
#esm #nodejs
https://blog.sindresorhus.com/get-ready-for-esm-aa53530b3f77
Несколько дней назад вышла новая версия Snowpack. Фред Шотт — автор проекта — рассказал про все новинки релиза.
Snowpack — это инструмент для сборки фронтенд-приложений. В отличие от Webpack, Rollup и Parcel, приложения, использующие Snowpack, не нуждаются в пересборке бандла на каждое изменение файлов во время разработки. Snowpack транспилирует файлы точечно без бандлинга всех файлов, делегируя процесс создания графа зависимостей и его загрузки браузерам с помощью нативных JavaScript-модулей. То есть если вы пишете большое приложение и сделали изменения, например, в файле Header.tsx, то транспилироваться будет только он, тем самым уменьшая время обратной связи на каждое изменение файлов в разы по сравнению с другими бандлерами.
В Snowpack v3.0 были добавлены Streaming Imports. Благодаря им Snowpack может загружать и кэшировать npm-модули без явного использования
В общем, не релиз, а бомба. Рекомендую посмотреть в сторону Snowpack, если используете обычные сборщики и ждёте по несколько минут пересборки проекта при сохранении файлов.
#release #bundle #tool
https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0
Snowpack — это инструмент для сборки фронтенд-приложений. В отличие от Webpack, Rollup и Parcel, приложения, использующие Snowpack, не нуждаются в пересборке бандла на каждое изменение файлов во время разработки. Snowpack транспилирует файлы точечно без бандлинга всех файлов, делегируя процесс создания графа зависимостей и его загрузки браузерам с помощью нативных JavaScript-модулей. То есть если вы пишете большое приложение и сделали изменения, например, в файле Header.tsx, то транспилироваться будет только он, тем самым уменьшая время обратной связи на каждое изменение файлов в разы по сравнению с другими бандлерами.
В Snowpack v3.0 были добавлены Streaming Imports. Благодаря им Snowpack может загружать и кэшировать npm-модули без явного использования
npm install. С этой версии Snowpack может создавать оптимизированные production-билды с помощью esbuild (очень быстрый сборщик, написанный на Go). Реализован новый API, который уже используется в SvelteKit. Сгенерированные с помощью Snowpack файлы теперь можно без проблем импортировать в Node.js.В общем, не релиз, а бомба. Рекомендую посмотреть в сторону Snowpack, если используете обычные сборщики и ждёте по несколько минут пересборки проекта при сохранении файлов.
#release #bundle #tool
https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0
www.snowpack.dev
Snowpack v3.0
Snowpack v3.0 is here! Our biggest release yet with some serious new features, including pre-bundled streaming imports, built-in bundling & optimizations, new JavaScript APIs, and more.'
Дэниэл Дестефанис из Discord рассказал о том, как разработанные ими плагины для Figma упрощают жизнь разработчикам и дизайнерам — "Building open-source design tools to improve Discord’s design workflow".
Ребята из Discord сделали несколько плагинов для Figma, которые им помогают в работе. Плагин "Auto Theme" используется для автоматической генерации светлой/тёмной темы экранов приложения. Плагин "Design Lint" помогает быстро находить проблемные места в макете, когда в нём используются параметры, которых нет в дизайн-системе (цвет, радиус скругления углов и т.п.) Плагин "Table of Contents" генерирует список ссылок на основные части макета для помощи в навигации по документу. Плагин "Inspect" используется для упрощения разработки плагинов. Все плагины доступны на GitHub.
Интересная статья. Очень рекомендую заглянуть, если работаете с Figma.
#ux #tool
https://blog.discord.com/building-open-source-design-tools-to-improve-discords-design-workflow-9a25c29f9143
Ребята из Discord сделали несколько плагинов для Figma, которые им помогают в работе. Плагин "Auto Theme" используется для автоматической генерации светлой/тёмной темы экранов приложения. Плагин "Design Lint" помогает быстро находить проблемные места в макете, когда в нём используются параметры, которых нет в дизайн-системе (цвет, радиус скругления углов и т.п.) Плагин "Table of Contents" генерирует список ссылок на основные части макета для помощи в навигации по документу. Плагин "Inspect" используется для упрощения разработки плагинов. Все плагины доступны на GitHub.
Интересная статья. Очень рекомендую заглянуть, если работаете с Figma.
#ux #tool
https://blog.discord.com/building-open-source-design-tools-to-improve-discords-design-workflow-9a25c29f9143
Medium
Building open-source design tools to improve Discord’s design workflow
With the release of the Figma plugin API last year, the design team at discord saw an exciting opportunity.