Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Ахмад Шадид написал статью про прошлое и настоящее кроссбраузерной CSS-разработки — "The State of CSS Cross-Browser Development".
Раньше разработчики сталкивались с большим количеством кроссбраузерных проблем. Ситуация стала гораздо лучше после появления гридов, флексбоксов и ухода на пенсию IE. Тем не менее ещё остаются нерешённые кроссбраузерные проблемы. Например, Safari растягивает изображения внутри флекс-контейнеров,
Хорошая новость заключается в том, что в рамках инициативы Compat2021 Google, Microsoft, Igalia и Mozilla начали работу над улучшением поддержки CSS-стандартов, которые наиболее критичны для разработчиков.
#css #history
https://ishadeed.com/article/cross-browser-development/
Раньше разработчики сталкивались с большим количеством кроссбраузерных проблем. Ситуация стала гораздо лучше после появления гридов, флексбоксов и ухода на пенсию IE. Тем не менее ещё остаются нерешённые кроссбраузерные проблемы. Например, Safari растягивает изображения внутри флекс-контейнеров,
position: sticky для заголовков таблиц работает неконсистентно, анимация гридов есть только в Firefox и т.п.Хорошая новость заключается в том, что в рамках инициативы Compat2021 Google, Microsoft, Igalia и Mozilla начали работу над улучшением поддержки CSS-стандартов, которые наиболее критичны для разработчиков.
#css #history
https://ishadeed.com/article/cross-browser-development/
Ishadeed
The State of CSS Cross-Browser Development
My thoughts on why cross-browser development is better than in the past.
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Карло Пиовесан — разработчик Cheerp — попробовал выяснить, можно ли в автоматическом режиме преобразовать JavaScript-код в эквивалентный более производительный JavaScript-код и поделился результатами своего исследования в статье "A JavaScript optimizing compiler".
Карло написал очень ограниченный транспилятор из JavaScript в C++. Прогнал через него код бенчмарков. Затем получившийся C++-код скомпилировал обратно в JavaScript-код с помощью Cheerp с применением оптимизаций на уровне компилятора (Cheerp — это компилятор, построенный на базе LLVM, аналог Emscripten).
В результате такого преобразования кода, большинство бенчмарков показали прирост производительности. Особенно хорошо показал себя код для проверки простых чисел — он стал быстрее на 80%.
Этот подход нельзя использовать в продакшене, так как транспилятор из JavaScript в C++ очень хрупкий и покрывает только небольшое подмножество JavaScript. Тем не менее проведённый эксперимент говорит о том, что у этой стратегии оптимизации есть право на жизнь.
#experimental #js #performance
https://medium.com/leaningtech/a-javascript-optimizing-compiler-3fd3f49bd071
Карло написал очень ограниченный транспилятор из JavaScript в C++. Прогнал через него код бенчмарков. Затем получившийся C++-код скомпилировал обратно в JavaScript-код с помощью Cheerp с применением оптимизаций на уровне компилятора (Cheerp — это компилятор, построенный на базе LLVM, аналог Emscripten).
В результате такого преобразования кода, большинство бенчмарков показали прирост производительности. Особенно хорошо показал себя код для проверки простых чисел — он стал быстрее на 80%.
Этот подход нельзя использовать в продакшене, так как транспилятор из JavaScript в C++ очень хрупкий и покрывает только небольшое подмножество JavaScript. Тем не менее проведённый эксперимент говорит о том, что у этой стратегии оптимизации есть право на жизнь.
#experimental #js #performance
https://medium.com/leaningtech/a-javascript-optimizing-compiler-3fd3f49bd071
Medium
A JavaScript optimizing compiler
JavaScript to C++ to faster JavaScript. Benchmarks included.
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Александр Косс рассказал про историю появления и развития библиотеки date-fns.
Разработка библиотеки началась осенью 2014 года. На тот момент date-fns не претендовал на замену Moment.js и включал в себя одну функцию
В 2015 году Александр нанял своего брата, чтобы он сделал порт функций из Moment.js. С этого момента проект начал набирать небольшую популярность. В 2016 году Дэн Абрамов попиарил date-fns у себя в твиттере. После этого события пришло очень много новых пользователей, вскрылись проблемы, которые можно было решить только изменением API. Большой поток запросов, багов и сопутствующей работы привёл к тому, что Александр перегорел. Но в 2019 году смог выделить три месяца на фулл-тайм разработку date-fns, и в августе 2019 года вышла вторая версия с переделанным API, из-за чего многие пользователи остались недовольны.
Тем не менее проект продолжал расти, набирать популярность и привлекать средства на opencollective. На данный момент команда разработки привлекла половину необходимого бюджета для дальнейшего развития и поддержки date-fns.
В общем, крутая история. Передаю разработчикам свой респект.
#opensource #history #date
https://twitter.com/kossnocorp/status/1392449481053032450
Разработка библиотеки началась осенью 2014 года. На тот момент date-fns не претендовал на замену Moment.js и включал в себя одну функцию
startOfDay (у аналогичной функции в Moment.js были проблемы с производительностью). У проекта не было какой-либо стратегии развития, дополнительные функции добавлялись по мере необходимости.В 2015 году Александр нанял своего брата, чтобы он сделал порт функций из Moment.js. С этого момента проект начал набирать небольшую популярность. В 2016 году Дэн Абрамов попиарил date-fns у себя в твиттере. После этого события пришло очень много новых пользователей, вскрылись проблемы, которые можно было решить только изменением API. Большой поток запросов, багов и сопутствующей работы привёл к тому, что Александр перегорел. Но в 2019 году смог выделить три месяца на фулл-тайм разработку date-fns, и в августе 2019 года вышла вторая версия с переделанным API, из-за чего многие пользователи остались недовольны.
Тем не менее проект продолжал расти, набирать популярность и привлекать средства на opencollective. На данный момент команда разработки привлекла половину необходимого бюджета для дальнейшего развития и поддержки date-fns.
В общем, крутая история. Передаю разработчикам свой респект.
#opensource #history #date
https://twitter.com/kossnocorp/status/1392449481053032450
Twitter
Sasha 🐑💨 Koss
🧵 How date-fns came about A story of open-source raised from 0 to 42M npm downloads a month. A story of burnout, stress, disappointment, but also perseverance, and will. How we went from spending personal money to funding the hire of 3 part-time devs.
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Вчера в блоге 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 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)
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Эдди Османи написал статью про использование Puppeteer для анализа производительности сайта — "Web Performance Recipes With Puppeteer".
Puppeteer — это библиотека для автоматизированного управления браузерами (Chrome, Edge, Opera, Firefox). Её используют для пререндеринга страниц SPA-приложений, для тестирования, генерации скриншотов страницы и т.п.
В статье Эдди делится Puppeteer-скриптами, которые могут быть полезны для решения проблем производительности. Например, для оценки влияния стороннего кода, для получения метрик производительности (FCP, LCP, CLS), для поиска утечек памяти, для измерения FPS страницы и многого другого.
Полезная статья. Рекомендую заглянуть, если интересуетесь темой производительности.
#performance
https://addyosmani.com/blog/puppeteer-recipes/
Puppeteer — это библиотека для автоматизированного управления браузерами (Chrome, Edge, Opera, Firefox). Её используют для пререндеринга страниц SPA-приложений, для тестирования, генерации скриншотов страницы и т.п.
В статье Эдди делится Puppeteer-скриптами, которые могут быть полезны для решения проблем производительности. Например, для оценки влияния стороннего кода, для получения метрик производительности (FCP, LCP, CLS), для поиска утечек памяти, для измерения FPS страницы и многого другого.
Полезная статья. Рекомендую заглянуть, если интересуетесь темой производительности.
#performance
https://addyosmani.com/blog/puppeteer-recipes/
Addyosmani
Web Performance Recipes With Puppeteer
This guide has recipes for automating Web Performance measurement with Puppeteer.
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Сара Суайдан рассказала об оптимизации содержимого страницы для режима чтения — "Design for reading: tips for optimizing content for Reader modes and reading apps".
Стили страницы могут быть доступны не для всех пользователей, например они недоступны для пользователей RSS-ридеров или при использовании режима чтения в браузере. Поэтому очень не рекомендуется размещать контент на уровне стилей. Если с помощью разметки нельзя выразить текущее визуальное представление (например, сложную анимацию), то нужно добавить её описание. Иногда, наоборот, нужно скрыть какую-либо часть контента в режиме для чтения. В этом случае может помочь глобальный атрибут
Основная мысль статьи. Наш контент не всегда выглядит так, как мы этого хотим. Это не должно иметь большого значения, если поддерживать строгое разделение между контентом и стилями; контент будет доступен всем пользователям.
#html #css
https://www.sarasoueidan.com/blog/tips-for-reader-modes/
Стили страницы могут быть доступны не для всех пользователей, например они недоступны для пользователей RSS-ридеров или при использовании режима чтения в браузере. Поэтому очень не рекомендуется размещать контент на уровне стилей. Если с помощью разметки нельзя выразить текущее визуальное представление (например, сложную анимацию), то нужно добавить её описание. Иногда, наоборот, нужно скрыть какую-либо часть контента в режиме для чтения. В этом случае может помочь глобальный атрибут
hidden.Основная мысль статьи. Наш контент не всегда выглядит так, как мы этого хотим. Это не должно иметь большого значения, если поддерживать строгое разделение между контентом и стилями; контент будет доступен всем пользователям.
#html #css
https://www.sarasoueidan.com/blog/tips-for-reader-modes/
Sarasoueidan
Design for reading: tips for optimizing content for Reader modes and reading apps
– The personal website of Sara Soueidan, inclusive design engineer
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Брайан Карделл из Igalia поделился планами по прототипированию поддержки CSS-селектора :has() — "Can I :has()".
Cелектор :has() добавляет в CSS возможность стилизации элемента на основе его содержимого. Это единственный селектор в таком роде — другие селекторы работают по направлению от детей к родителям. Он появился в черновике спецификации Selectors Level 4 в 2011 году, но до сих пор не был имплементирован в браузерах. Основная сложность заключается в том, что :has() ломает принципы работы со стилями, которые лежат в основе многих оптимизаций, благодаря которым браузеры могут поддерживать стабильные 60 fps.
На протяжении десяти лет в рабочей группе CSS возникали обсуждения по поводу :has(), но они никуда не вели, потому что никто не брался за прототипирование. Недавно компанию Igalia наняла компания eyeo (разрабатывает Adblock Browser и Adblock Plus) для того, чтобы сдвинуть эту фичу с мёртвой точки. Ребята планируют сделать прототипы и в принципе понять, возможно ли реализовать :has() без проблем для производительности. Этот эксперимент определит дальнейшую судьбу селектора. Либо он будет добавлен в браузеры, либо его функциональность будет реализована в другом виде, например, на уровне DOM API.
#css #experimental
https://bkardell.com/blog/canihas.html
Cелектор :has() добавляет в CSS возможность стилизации элемента на основе его содержимого. Это единственный селектор в таком роде — другие селекторы работают по направлению от детей к родителям. Он появился в черновике спецификации Selectors Level 4 в 2011 году, но до сих пор не был имплементирован в браузерах. Основная сложность заключается в том, что :has() ломает принципы работы со стилями, которые лежат в основе многих оптимизаций, благодаря которым браузеры могут поддерживать стабильные 60 fps.
На протяжении десяти лет в рабочей группе CSS возникали обсуждения по поводу :has(), но они никуда не вели, потому что никто не брался за прототипирование. Недавно компанию Igalia наняла компания eyeo (разрабатывает Adblock Browser и Adblock Plus) для того, чтобы сдвинуть эту фичу с мёртвой точки. Ребята планируют сделать прототипы и в принципе понять, возможно ли реализовать :has() без проблем для производительности. Этот эксперимент определит дальнейшую судьбу селектора. Либо он будет добавлен в браузеры, либо его функциональность будет реализована в другом виде, например, на уровне DOM API.
#css #experimental
https://bkardell.com/blog/canihas.html
Bkardell
Can I :has()
As you might know, my company (Igalia) works on all of the web engines and we contribute a lot. I'm very proud of all of the things we're able to do to improve both the features o
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
За прошедшие две недели в канале для патронов Defront было опубликовано десять постов:
— Приоритизация загрузки ресурсов HTML-страницы
— Островная архитектура (Islands Architecture)
— Неизвестный HTML
— Zx — утилита для упрощения работы с shell-скриптами
— Разработка компонента для просмотра введённого пароля
— Недостатки снапшот-тестов
— Opossum — реализация паттерна circuit breaker в Node.js
— Разочарование в JPEG XL
— Как убедить других разработчиков в правоте своей идеи
— Преимущества и недостатки сабсеттинга шрифтов
Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, на оплату аренды квартиры, покупку еды и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
— Приоритизация загрузки ресурсов HTML-страницы
— Островная архитектура (Islands Architecture)
— Неизвестный HTML
— Zx — утилита для упрощения работы с shell-скриптами
— Разработка компонента для просмотра введённого пароля
— Недостатки снапшот-тестов
— Opossum — реализация паттерна circuit breaker в Node.js
— Разочарование в JPEG XL
— Как убедить других разработчиков в правоте своей идеи
— Преимущества и недостатки сабсеттинга шрифтов
Становитесь патроном канала на Patreon, чтобы получить доступ к дополнительным постам в Defront Plus. Все донаты идут на поддержку канала, на оплату аренды квартиры, покупку еды и т.п.
Спасибо всем, кто читает и поддерживает Defront!
https://www.patreon.com/myshov
Forwarded from Defront — про фронтенд-разработку и не только (Alexander Myshov)
Дэн Вандеркам рассказал о ситуациях, в которых система типов TypeScript проявляет свою ненадёжность (unsoudness) — "The Seven Sources of Unsoundness in TypeScript".
Надёжная система типов гарантирует соответствие статических типов в коде программы фактическим типам на этапе её выполнения. В TypeScript система типов ненадёжна. Более того разработчики языка осознанно не преследуют цель создания надёжной системы типов, потому что это противоречит более важной цели — максимально поддержать паттерны и подходы, используемые в JavaScript. Поэтому при использовании TypeScript нужно учитывать потенциальные проблемы, чтобы код не взорвался в продакшене.
Самые главные источники ненадёжности — это использование any, type assertions, получение значений из объектов и массивов, неправильные определения типов библиотек, вариантность при работе с массивами, отсутствие инвалидации уточнения типов после вызова функции и рекурсивные типы.
Очень хорошая статья. Рекомендую почитать всем, кто использует TypeScript.
#typescript
https://effectivetypescript.com/2021/05/06/unsoundness/
Надёжная система типов гарантирует соответствие статических типов в коде программы фактическим типам на этапе её выполнения. В TypeScript система типов ненадёжна. Более того разработчики языка осознанно не преследуют цель создания надёжной системы типов, потому что это противоречит более важной цели — максимально поддержать паттерны и подходы, используемые в JavaScript. Поэтому при использовании TypeScript нужно учитывать потенциальные проблемы, чтобы код не взорвался в продакшене.
Самые главные источники ненадёжности — это использование any, type assertions, получение значений из объектов и массивов, неправильные определения типов библиотек, вариантность при работе с массивами, отсутствие инвалидации уточнения типов после вызова функции и рекурсивные типы.
Очень хорошая статья. Рекомендую почитать всем, кто использует TypeScript.
#typescript
https://effectivetypescript.com/2021/05/06/unsoundness/
Effectivetypescript
Effective TypeScript › The Seven Sources of Unsoundness in TypeScript
Hang out on the internet much and you'll hear gripes about how TypeScript isn't "sound," and that this makes it a poor choice of language. In this post, I'll explain what this means and walk through the sources of unsoundness in TypeScript. Rest assured,…
Forwarded from Вебня (Roman Dvornov)
Learn CSS — An evergreen CSS course
https://web.dev/learn/css/
На сайте web.dev появился курс для изучения CSS. В нем основные фундаментальные темы CSS вынесены в отдельные секции, что удобно для изучения конкретной части, а не все сразу. Как можно понять из определения, обещают поддерживать в актуальном состоянии.
Кстати, на web.dev есть множество курсов по другим темам
https://web.dev/learn/css/
На сайте web.dev появился курс для изучения CSS. В нем основные фундаментальные темы CSS вынесены в отдельные секции, что удобно для изучения конкретной части, а не все сразу. Как можно понять из определения, обещают поддерживать в актуальном состоянии.
Кстати, на web.dev есть множество курсов по другим темам
Forwarded from Coding: работа и стажировки для программистов
Печальная правда о пропуске копий в C++
[ Статья ]
[ Статья ]
Telegraph
Печальная правда о пропуске копий в C++
Пропуск копий (copy elision) – это оптимизация компилятора, которая, как и следует из имени, устраняет лишние операции копирования и перемещения. Она аналогична классической оптимизации размножения копий, но выполняется конкретно для объектов C++, которые…
Forwarded from Coding: работа и стажировки для программистов
#вакансии
Ищут Middle backend/fullstack C#/.Net разработчиков в команду развития криптовалютного обменника Netex24.net для работы с блокчейн проектами.
Стек:
C#, .Net Core 2.2, MS SQL Server, Javascript, Vue.js, AngularJS
Требования:
— Уверенное знание C#
— Опыт работы с .NET не менее 3-х лет
— Знание технологии ASP .NET WebApi2
— Опыт работы с БД MS SQL
Будет плюсом:
— Знание HTML, CSS
— Знание JavaScript, AngularJS, Vue.js
— Знание основ криптографии и их применение
Проекты в разработке и планы на будущее:
криптобиржа, криптовалютный p2p-обменник для работы с банковскими картами, универсальный шлюз для криптовалютных платежей, p2p-обменник на атомарных свопах, мультивалютный криптокошелек.
Условия:
— удаленка + редкие командировки для совместной работы в коворкинге
— З/П до 250 000 рублей (обсуждается по результатам собеседования)
Отклик: @HRDforIT
Ищут Middle backend/fullstack C#/.Net разработчиков в команду развития криптовалютного обменника Netex24.net для работы с блокчейн проектами.
Стек:
C#, .Net Core 2.2, MS SQL Server, Javascript, Vue.js, AngularJS
Требования:
— Уверенное знание C#
— Опыт работы с .NET не менее 3-х лет
— Знание технологии ASP .NET WebApi2
— Опыт работы с БД MS SQL
Будет плюсом:
— Знание HTML, CSS
— Знание JavaScript, AngularJS, Vue.js
— Знание основ криптографии и их применение
Проекты в разработке и планы на будущее:
криптобиржа, криптовалютный p2p-обменник для работы с банковскими картами, универсальный шлюз для криптовалютных платежей, p2p-обменник на атомарных свопах, мультивалютный криптокошелек.
Условия:
— удаленка + редкие командировки для совместной работы в коворкинге
— З/П до 250 000 рублей (обсуждается по результатам собеседования)
Отклик: @HRDforIT
Forwarded from Веб-стандарты (Веб-стандарты)
Нативная валидация ввода в CSS. София Валитова рассказывает про HTML-атрибуты на полях ввода и CSS-псевдоклассы, которые позволяют проверять корректность введённых данных.
https://ariarzer.dev/native-css-validation.html
https://ariarzer.dev/native-css-validation.html
Forwarded from Coding: работа и стажировки для программистов
Работа с параметрами в EEPROM
[ Статья ]
[ Статья ]
Telegraph
Работа с параметрами в EEPROM
Введение Привет, Хабр. Наконец-то у меня появилось свободное время и я могу еще немного поделиться своим опытом, возможно кому-то это будет полезно, и поможет в его работе, и я этому буду безусловно рад. Ну что же,.... Смотря на то, как студенты делают свои…
Forwarded from Coding: работа и стажировки для программистов
Stm32 + USB на шаблонах C++. Продолжение. Делаем CDC
[ Статья ]
[ Статья ]
Telegraph
Stm32 + USB на шаблонах C++. Продолжение. Делаем CDC
Продолжаю разработку полностью шаблонной библиотеки под микроконтроллеры Stm32, в прошлой статье рассказал об успешной (почти) реализации HID устройства. Еще одним популярным классом USB является виртуальный COM-порт (VCP) из класса CDC. Популярность объясняется…
Forwarded from Веб-стандарты (Вадим)
CSS для метрик Web Vitals. Кейти Хемпениус и Юна Кравец о том, как стили влияют на качество и скорость интерфейсов и что можно сделать, чтобы улучшить CLS и LCP и получить хорошие очки в Lighthouse.
https://web.dev/css-web-vitals/
https://web.dev/css-web-vitals/
Forwarded from Веб-стандарты (Веб-стандарты)
Как ускорить JavaScript в WebAssembly. Лин Кларк разбирается, зачем может понадобиться запускать JS не в браузерном JS-движке, как это устроено и как сделать это максимально эффективно.
https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly
https://bytecodealliance.org/articles/making-javascript-run-fast-on-webassembly