В блоге Акселя Раушмайера недавно была опубликована новая статья — "Evaluating JavaScript code via import()".
Код, который использует модульную систему JS, не может быть выполнен с помощью
Выглядит это так:
При желании можно получить доступ ко всем экспортируемым объектам. Также можно вставлять data URI прямо в статический импорт, и он будет работать.
Маловероятно, что вы будете использовать этот трюк. Тем не менее статья интересная, почитать стоит.
#esm #trick
https://2ality.com/2019/10/eval-via-import.html
Код, который использует модульную систему JS, не может быть выполнен с помощью
eval(). Для того чтобы обойти это ограничение, можно использовать динамический импорт import() с закодированным кодом модуля в виде data URI.Выглядит это так:
const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javanoscript;charset=utf-8,'
+ encodedJs;
import(dataUri);При желании можно получить доступ ко всем экспортируемым объектам. Также можно вставлять data URI прямо в статический импорт, и он будет работать.
Маловероятно, что вы будете использовать этот трюк. Тем не менее статья интересная, почитать стоит.
#esm #trick
https://2ality.com/2019/10/eval-via-import.html
CSS является блокирующим ресурсом. Это означает, что браузер должен скачать и распарсить CSS прежде чем показать страницу. Если размер CSS большой, то он может очень сильно влиять на воспринимаемую скорость загрузки сайта. В блоге webdev есть статья с объяснением того, как решить эту проблему — "Extract critical CSS".
Критический CSS — это тот CSS, который необходим для отображения части страницы, которая видна до прокрутки страницы (above-the-fold content). Для того чтобы страница отобразилась как можно раньше, критический CSS инлайнят в тег <head>. Есть несколько библиотек, которые можно для этого использовать — Critical, CriticalCSS и Penthouse. В конце статьи есть ссылка на туториал "Extract and inline critical CSS with Critical", где подробно разбирается работа с Critical.
Если у вас есть сайт, при загрузке которого некоторое время отображается простой белый экран, советую заглянуть в статью. Вполне возможно, что проблема кроется в большом объёме CSS.
#performance #css
https://web.dev/extract-critical-css
Критический CSS — это тот CSS, который необходим для отображения части страницы, которая видна до прокрутки страницы (above-the-fold content). Для того чтобы страница отобразилась как можно раньше, критический CSS инлайнят в тег <head>. Есть несколько библиотек, которые можно для этого использовать — Critical, CriticalCSS и Penthouse. В конце статьи есть ссылка на туториал "Extract and inline critical CSS with Critical", где подробно разбирается работа с Critical.
Если у вас есть сайт, при загрузке которого некоторое время отображается простой белый экран, советую заглянуть в статью. Вполне возможно, что проблема кроется в большом объёме CSS.
#performance #css
https://web.dev/extract-critical-css
web.dev
Extract critical CSS | Articles | web.dev
Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.
Нравится нам это или нет, но порноиндустрия одна из причин, которая послужила развитию веба. Девид Волш расспросил разработчика из PornHub про особенности работы над самым большим сайтом для взрослых — "Interview with a Pornhub Web Developer".
Основной набор технологий на бэкенде — Nginx, PHP, MySQL, Memcached, Redis. Для более специфичных задач используются Varnish, ElasticSearch, NodeJS, Go, Vertica. На фронте используют Vanilla JS, потихоньку избавляясь от jQuery, начинают экспериментировать со Vue. Для измерения производительности клиентского кода используют внешнюю RUM-систему, локально развёрнутые инстансы WebpageTest и кастомную систему, встроенную в видеоплейер. Над видеоплейером работает выделенная команда разработчиков.
Каких-то инсайтов, связанных с производительностью, в статье нет, но её можно почитать просто ради интереса.
#performance #interview
https://davidwalsh.name/pornhub-interview
Основной набор технологий на бэкенде — Nginx, PHP, MySQL, Memcached, Redis. Для более специфичных задач используются Varnish, ElasticSearch, NodeJS, Go, Vertica. На фронте используют Vanilla JS, потихоньку избавляясь от jQuery, начинают экспериментировать со Vue. Для измерения производительности клиентского кода используют внешнюю RUM-систему, локально развёрнутые инстансы WebpageTest и кастомную систему, встроенную в видеоплейер. Над видеоплейером работает выделенная команда разработчиков.
Каких-то инсайтов, связанных с производительностью, в статье нет, но её можно почитать просто ради интереса.
#performance #interview
https://davidwalsh.name/pornhub-interview
DWB
Interview with a Pornhub Web Developer
A chat with the PornHub development team, about working in the adult website industry, technology, virtual reality, and more.
Полина Гуртовая и Рита Клубочкина опубликовали в блоге Злых Марсиан большую статью про использование изображений в вебе — "Images done right: Web graphics, good to the last byte".
В начале статьи рассказывается про то, как CSS-пиксели матчатся на экраны устройств, и почему физический размер пикселей отличается у мониторов и смартфонов. Есть разделы, посвящённые SVG и самым популярным форматам растровых изображений. Для меня самое полезное — сравнение результатов работы разных инструментов для разных форматов. Например, для сжатия PNG лучше всего подходит ImageOptim, а JPEG лучше всего жмут Squoosh и Imagemin. Есть бенчмарки с WebP, которые показывают его эффективность по сравнению с PNG и JPEG. Для анимациий не рекомендуют использовать GIF, вместо него рекомендуется использовать mp4 или webm. В самом начале статьи есть cheat-sheet, который может помочь с выбором наиболее подходящего формата.
Статья очень хорошая. Рекомендую почитать всем без исключения.
#graphic #optimization
https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
В начале статьи рассказывается про то, как CSS-пиксели матчатся на экраны устройств, и почему физический размер пикселей отличается у мониторов и смартфонов. Есть разделы, посвящённые SVG и самым популярным форматам растровых изображений. Для меня самое полезное — сравнение результатов работы разных инструментов для разных форматов. Например, для сжатия PNG лучше всего подходит ImageOptim, а JPEG лучше всего жмут Squoosh и Imagemin. Есть бенчмарки с WebP, которые показывают его эффективность по сравнению с PNG и JPEG. Для анимациий не рекомендуют использовать GIF, вместо него рекомендуется использовать mp4 или webm. В самом начале статьи есть cheat-sheet, который может помочь с выбором наиболее подходящего формата.
Статья очень хорошая. Рекомендую почитать всем без исключения.
#graphic #optimization
https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques
evilmartians.com
Images done right: Web graphics, good to the last byte—Martian Chronicles, Evil Martians’ team blog
Start taking graphics on the web seriously and boost your applications' performance by learning the essentials about digital image formats.
Филлип Уолтон недавно опубликовал статью про проблему каскадной инвалидации кэша — «Cascading Cache Invalidation».
Нежелательная инвалидация может возникнуть тогда, когда сборщик генерирует имена файлов с хэшами, которые напрямую импортируются в других файлах. Предположим, что во время сборки из всех файлов, находящихся в node_modules, создаётся файл
Для решения этой проблемы Филлип предлагает использовать import maps (на данный момент поддержка есть только в Chrome за флагом), сервис воркеры или AMD-загрузчик (в статье разбирается пример SystemJS с Rollup.js).
Webpack не подвержен этой проблеме, но с ним есть другие особенности, которые могут приводить к неочевидным ошибкам.
В общем, статья полезная. Рекомендую почитать.
#performance #bundle
https://philipwalton.com/articles/cascading-cache-invalidation/
Нежелательная инвалидация может возникнуть тогда, когда сборщик генерирует имена файлов с хэшами, которые напрямую импортируются в других файлах. Предположим, что во время сборки из всех файлов, находящихся в node_modules, создаётся файл
vendor.<hash>.js. Если этот файл импортируется в других модулях, то из-за постоянно меняющегося хэша, будут изменяться хэши у всех зависимых модулей. Соответственно, браузер будет заново загружать тот код, который фактически не менялся. Для решения этой проблемы Филлип предлагает использовать import maps (на данный момент поддержка есть только в Chrome за флагом), сервис воркеры или AMD-загрузчик (в статье разбирается пример SystemJS с Rollup.js).
Webpack не подвержен этой проблеме, но с ним есть другие особенности, которые могут приводить к неочевидным ошибкам.
В общем, статья полезная. Рекомендую почитать.
#performance #bundle
https://philipwalton.com/articles/cascading-cache-invalidation/
Philipwalton
Cascading Cache Invalidation
Thoughts on web development, open source, software architecture, and the future.
Николас Гаутей опубликовал статью про использование WebPageTest с SPA-приложениями — "Recipes for Performance Testing Single Page Applications in WebPageTest".
При прогоне тестов на производительность у SPA-приложений недостаточно замерять обычную загрузку страницы, так как страница динамически меняет своё состояние в зависимости от пользовательского ввода. Ситуация усугубляется ещё тем, что при использовании React и Redux, нельзя просто менять элементы ввода с помощью
Николас в статье делится советами как обойти эти проблемы. Например, для того чтобы вводимый текст изменял стор приложения, можно программно создавать и отправлять событие ввода на произвольном элементе ввода. React будет воспринимать это событие точно так же, как если бы оно было инициировано действиями пользователя. В статье есть и другие рецепты — выбор элементов, переходы по элементам навигации, адаптация тестов производительности для IE11.
Статья будет полезна, если вы планируете отслеживать регресс клиентской производительности.
#performance #testing
https://css-tricks.com/recipes-for-performance-testing-single-page-applications-in-webpagetest/
При прогоне тестов на производительность у SPA-приложений недостаточно замерять обычную загрузку страницы, так как страница динамически меняет своё состояние в зависимости от пользовательского ввода. Ситуация усугубляется ещё тем, что при использовании React и Redux, нельзя просто менять элементы ввода с помощью
innerText на уровне DOM API, так как при таком изменении текста не будет меняться состояние стора.Николас в статье делится советами как обойти эти проблемы. Например, для того чтобы вводимый текст изменял стор приложения, можно программно создавать и отправлять событие ввода на произвольном элементе ввода. React будет воспринимать это событие точно так же, как если бы оно было инициировано действиями пользователя. В статье есть и другие рецепты — выбор элементов, переходы по элементам навигации, адаптация тестов производительности для IE11.
Статья будет полезна, если вы планируете отслеживать регресс клиентской производительности.
#performance #testing
https://css-tricks.com/recipes-for-performance-testing-single-page-applications-in-webpagetest/
CSS-Tricks
Recipes for Performance Testing Single Page Applications in WebPageTest | CSS-Tricks
WebPageTest is an online tool and an Open Source project to help developers audit the performance of their websites. As a Web Performance Evangelist at
Нашёл в твиттере ссылку на интересную статью Франсуа Шолле — "Notes to Myself on Software Engineering".
Статья представляет собой список "напоминалок" про процесс разработки софта, проектирование API и про карьеру. Хочу выделить из неё пять пунктов:
— Хороший софт делает трудные вещи простыми. Если на первый взгляд проблема кажется сложной, это не означает, что решение тоже должно быть сложным.
— При проектировании сценариев взаимодействия с API следует задать самому себе несколько вопросов. Какие это сценарии? Какая оптимальная последовательность действий для их достижения? Какой наиболее простой программный интерфейс может это реализовать?
— API создаётся для пользователей. Проявляйте эмпатию вне зависимости от того, пользуются ли им профессионалы или новички.
— Продуктивность сводится к высокой скорости принятия решений и к действию.
— Прогресс в карьерном росте выражается не количеством людей, которым вы управляете, а в том, какую ценность вы даёте миру.
В статье очень много хороших мыслей, рекомендую почитать.
#list #softwaredesign #career
https://medium.com/s/story/notes-to-myself-on-software-engineering-c890f16f4e4d
Статья представляет собой список "напоминалок" про процесс разработки софта, проектирование API и про карьеру. Хочу выделить из неё пять пунктов:
— Хороший софт делает трудные вещи простыми. Если на первый взгляд проблема кажется сложной, это не означает, что решение тоже должно быть сложным.
— При проектировании сценариев взаимодействия с API следует задать самому себе несколько вопросов. Какие это сценарии? Какая оптимальная последовательность действий для их достижения? Какой наиболее простой программный интерфейс может это реализовать?
— API создаётся для пользователей. Проявляйте эмпатию вне зависимости от того, пользуются ли им профессионалы или новички.
— Продуктивность сводится к высокой скорости принятия решений и к действию.
— Прогресс в карьерном росте выражается не количеством людей, которым вы управляете, а в том, какую ценность вы даёте миру.
В статье очень много хороших мыслей, рекомендую почитать.
#list #softwaredesign #career
https://medium.com/s/story/notes-to-myself-on-software-engineering-c890f16f4e4d
Medium
Notes to Myself on Software Engineering
A laundry list of personal reminders
Марк Ноттингэм — участвует в разработке протоколов HTTP и QUIC — написал пост про возможности, которые предоставляет HTTP/2 при проектировании классических HTTP API — "How Multiplexing Changes Your HTTP APIs".
HTTP API подвержен проблеме избыточной детализации. Например, при запросе большого количества однотипных сущностей каждый запрос будет отправляться независимо (
Марк пишет о том, что появление мультиплексирования в HTTP/2 (отправка множества параллельных запросов в рамках одного соединения), позволяет избавиться от необходимости создания специальных API для обработки батч-запросов. В статье, есть пример синтетического теста с 40 запросами. Для HTTP/1 накладные расходы на передачу данных составляют около 6Kb, для HTTP/2 — всего в 1440 байт. То есть благодаря HTTP/2 можно проектировать API любой степени детализации, не беспокоясь о проблемах неоптимальной передачи данных.
Мысли в статье интересные. Но мне не хватило сравнения описываемого подхода с GraphQL (плюсы, минусы, бенчмарки).
#http #performance #musings
https://www.mnot.net/blog/2019/10/13/h2_api_multiplexing
HTTP API подвержен проблеме избыточной детализации. Например, при запросе большого количества однотипных сущностей каждый запрос будет отправляться независимо (
/widgets/id1, /widgets/id2 ). Такой подход неоптимален. Для решения этой проблемы создают дополнительные эндпойнты, которые могу обрабатывать запросы "батчами" ( /widgets/id1,id2,id3 ). Ещё можно использовать GraphQL, описывая список необходимых сущностей с помощью специального синтаксиса.Марк пишет о том, что появление мультиплексирования в HTTP/2 (отправка множества параллельных запросов в рамках одного соединения), позволяет избавиться от необходимости создания специальных API для обработки батч-запросов. В статье, есть пример синтетического теста с 40 запросами. Для HTTP/1 накладные расходы на передачу данных составляют около 6Kb, для HTTP/2 — всего в 1440 байт. То есть благодаря HTTP/2 можно проектировать API любой степени детализации, не беспокоясь о проблемах неоптимальной передачи данных.
Мысли в статье интересные. Но мне не хватило сравнения описываемого подхода с GraphQL (плюсы, минусы, бенчмарки).
#http #performance #musings
https://www.mnot.net/blog/2019/10/13/h2_api_multiplexing
Mark Nottingham
How Multiplexing Changes Your HTTP APIs
When I first learned about SPDY, I was excited about it for a number of reasons, but near the top of the list was its potential impact on APIs that use HTTP.
Прочитал статью Артура Басака — "Должен ли фронтенд разработчик уметь писать бэкенды?"
Артур пишет про то, что граница между фронтендом и бэкендом очень размыта. На западе под фронтендом понимается работа с CSS/HTML. У нас чаще всего по-другому — под фронтом понимается JavaScript, а владение CSS/HTML подразумевается как само собой разумеющееся.
С другой стороны фронтенд и бэкенд сильно переплетены друг с другом — для разработки сложных вещей требуется понимание и того, и другого. Например, в микросервисных архитектурах может использоваться Backend For Frontend (BFF) — сервис, который собирает и подготавливает данные для рендеринга или передачи на клиент. В компаниях BFF обычно разрабатывают фронтенд-разработчики.
В конце статьи есть хорошая мысль: любая технология — это всего лишь инструмент. Чем большим количеством инструментов владеет разработчик, тем больше он ценится на рынке.
#musings #backend #frontend
https://medium.com/front-end-in-regions-grodno/front-back-e1198c42d673
Артур пишет про то, что граница между фронтендом и бэкендом очень размыта. На западе под фронтендом понимается работа с CSS/HTML. У нас чаще всего по-другому — под фронтом понимается JavaScript, а владение CSS/HTML подразумевается как само собой разумеющееся.
С другой стороны фронтенд и бэкенд сильно переплетены друг с другом — для разработки сложных вещей требуется понимание и того, и другого. Например, в микросервисных архитектурах может использоваться Backend For Frontend (BFF) — сервис, который собирает и подготавливает данные для рендеринга или передачи на клиент. В компаниях BFF обычно разрабатывают фронтенд-разработчики.
В конце статьи есть хорошая мысль: любая технология — это всего лишь инструмент. Чем большим количеством инструментов владеет разработчик, тем больше он ценится на рынке.
#musings #backend #frontend
https://medium.com/front-end-in-regions-grodno/front-back-e1198c42d673
Medium
Должен ли фронтенд разработчик уметь писать бэкенды?
Читаю твиттер и удивляюсь тому, какое разделение разработчиков (или раскол?) на западе. Под термином фронтенд там подразумевают CSS и HTML…
На этой неделе в сообществе web-разработчиков развернулся спор "HTTP/2 vs GraphQL". Марк-Андрэ Жиру встал на защиту GraphQL со статьёй "Is GraphQL Still Relevant in an HTTP2 World?"
В статье говорится о том, что HTTP/2 может помочь в снижении количества запросов к серверу и в более быстрой доставке ресурсов клиенту. Но тем не менее он не решает проблему поддержки большого количества эндпойнтов, с которым хорошо справляется GraphQL. Марк ещё пишет о том, что GraphQL очень удобен при разработке приложений, построенных на базе компонентов. GraphQL предоставляет много разных возможностей из коробки (интроспекция, типизированная схема и т.п.). Поддержка GraphQL существует во многих языках. В статье ещё есть раздел про сетевые ограничения, которые сказываются на дизайне API, построенных на базе HTTP/2, но мне он показался неубедительным.
В общем, рекомендую прочитать статью, если интересно узнать позицию всех сторон спора.
#http #graphql
https://medium.com/@__xuorig__/is-graphql-still-relevant-in-an-http2-world-64964f207b8
В статье говорится о том, что HTTP/2 может помочь в снижении количества запросов к серверу и в более быстрой доставке ресурсов клиенту. Но тем не менее он не решает проблему поддержки большого количества эндпойнтов, с которым хорошо справляется GraphQL. Марк ещё пишет о том, что GraphQL очень удобен при разработке приложений, построенных на базе компонентов. GraphQL предоставляет много разных возможностей из коробки (интроспекция, типизированная схема и т.п.). Поддержка GraphQL существует во многих языках. В статье ещё есть раздел про сетевые ограничения, которые сказываются на дизайне API, построенных на базе HTTP/2, но мне он показался неубедительным.
В общем, рекомендую прочитать статью, если интересно узнать позицию всех сторон спора.
#http #graphql
https://medium.com/@__xuorig__/is-graphql-still-relevant-in-an-http2-world-64964f207b8
Medium
Is GraphQL Still Relevant in an HTTP2 World?
GraphQL offers a lot more than reduced round trips.
Грег Уитворт — участник рабочей группы CSS и разработчик MS Edge — рассказал про результаты исследования среди разработчиков для выявления проблем при работе с <select> — "Can we please style the <select> control?!"
Исследование проводилось среди 1400 разработчиков при этом оценивался масштаб пользователей, который будет затронут потенциальными нововведениями. Самыми желаемыми функциями оказались встроенный поиск элементов и полноценная возможность стилизации у элемента <select>. Грег пишет, что пока не известно, каким образом будут реализованы все пожелания. Для этого в рамках WICG OpenUI будет создан прототип элемента управления, он послужит основой для создания нового предложения в стандарт.
Очень круто, что ребята из Microsoft взяли на себе ответственность по улучшению <select>. Скорее всего первые прототипы элемента будут реализованы в Edge.
#future #html
http://gwhitworth.com/blog/2019/10/can-we-please-style-select/
Исследование проводилось среди 1400 разработчиков при этом оценивался масштаб пользователей, который будет затронут потенциальными нововведениями. Самыми желаемыми функциями оказались встроенный поиск элементов и полноценная возможность стилизации у элемента <select>. Грег пишет, что пока не известно, каким образом будут реализованы все пожелания. Для этого в рамках WICG OpenUI будет создан прототип элемента управления, он послужит основой для создания нового предложения в стандарт.
Очень круто, что ребята из Microsoft взяли на себе ответственность по улучшению <select>. Скорее всего первые прототипы элемента будут реализованы в Edge.
#future #html
http://gwhitworth.com/blog/2019/10/can-we-please-style-select/
Сегодня столкнулся с новым атрибутом cookie
Cookie пользователей отправляются на сервер при любых запросах, даже если запрашивается статический ресурс с чужого сервера. Например если страница сайта
Этот атрибут может содержать несколько параметров:
—
—
—
Предположительно с версии Chrome 80 (февраль 2020) все куки без атрибута
#security #cookie
https://web.dev/samesite-cookies-explained/
SameSite. На web.dev есть хорошая статья про то, зачем о нужен и какую проблему решает — "SameSite cookies explained".Cookie пользователей отправляются на сервер при любых запросах, даже если запрашивается статический ресурс с чужого сервера. Например если страница сайта
site.com содержит изображение сайта site.net, при запросе изображения в запросе будут отправлены все куки пользователя для site.net. Чтобы ограничить отправку кук только тому сайту, которому они принадлежат (first-party) можно воспользоваться новым атрибутом SameSite.Этот атрибут может содержать несколько параметров:
—
Strict — ограничить отправку cookie только first-party;—
Lax — тоже что и Strict + отправлять куки при переходе на другой сайт;—
None — не ограничивать отправку cookie (будет работать только с Secure ).Предположительно с версии Chrome 80 (февраль 2020) все куки без атрибута
SameSite будут интерпретироваться как если бы для них был установлен SameSite=Lax. Поэтому если вы используете cookie, которые должны отправляться при любых запросах, для них необходимо явно установить SameSite=None.#security #cookie
https://web.dev/samesite-cookies-explained/
web.dev
SameSite cookies explained | Articles | web.dev
Learn to mark your cookies for first-party and third-party usage with the SameSite attribute. You can enhance your site's security by using SameSite's Lax and Strict values to improve protection against CSRF attacks. Specifying the new None attribute lets…
Посмотрел доклад Эда Соудена — работает над государственными сайтами Великобритании — "What even is a table? A quick look at Accessibility APIs".
Эд рассказывает про работу с таблицами с точки зрения доступности. Скринридеры позволяют перемещаться по таблицам не только от колонки к колонке, но и к следующей строке в пределах одной колонки. Если применить к таблице свойство
В конце доклада Эд советует всегда "слушать" вёрстку сайта с помощью скринридеров и не использовать атрибут
Доклад интересный. Очень рекомендую посмотреть, если интересуетесь темой a11y.
#a11y #internals
https://vimeo.com/139062429
Эд рассказывает про работу с таблицами с точки зрения доступности. Скринридеры позволяют перемещаться по таблицам не только от колонки к колонке, но и к следующей строке в пределах одной колонки. Если применить к таблице свойство
display: block, например, чтобы добавить overflow: scroll для небольших экранов, то скринридер больше ну будет воспринимать таблицу как таблицу и навигация будет сломана. Более того недостаточно использовать семантические теги, так как браузеры использует эвристику для определения табличной вёрстки. Если таблица состоит из одной ячейки, то она не будет считаться таблицей. Если таблица состоит из трёх-четырёх ячеек, которые занимают 95% ширины страницы, то она тоже не будет считаться таблицей (в Firefox). Но если таблица содержит двадцать строк, то она становится таблицей. Если в таблице в строках чередуется цвет, то она тоже будет считаться таблицей.В конце доклада Эд советует всегда "слушать" вёрстку сайта с помощью скринридеров и не использовать атрибут
role="table" для изменения семантики элемента, так это может вести к проблемам.Доклад интересный. Очень рекомендую посмотреть, если интересуетесь темой a11y.
#a11y #internals
https://vimeo.com/139062429
Vimeo
SOTB5 - What even is a table? A quick look at Accessibility APIs - Edd Sowden
Let’s talk about how to make your single page JavaScript app accessible to as many people as possible. We will cover the tools that you have available to you…
Недавно Иван Немытченко сделал небольшой сайт, посвящённый make — makefile.site.
Есть распространённое заблуждение, что make используется только для сборок программ, написанных на C. На самом деле его можно использовать как раннер разных задач. Например, часто в больших проектах его используют для упрощения запуска проекта в режиме отладки, запуска тестов, сборки проекта и многого другого.
На сайте человеческим языком объясняются принципы работы make. Читать эту документацию гораздо проще чем официальную man страницу. На данный момент ещё не всё дописано, но самое важное уже есть. Рекомендую посмотреть.
#doc #tool
makefile.site
Есть распространённое заблуждение, что make используется только для сборок программ, написанных на C. На самом деле его можно использовать как раннер разных задач. Например, часто в больших проектах его используют для упрощения запуска проекта в режиме отладки, запуска тестов, сборки проекта и многого другого.
На сайте человеческим языком объясняются принципы работы make. Читать эту документацию гораздо проще чем официальную man страницу. На данный момент ещё не всё дописано, но самое важное уже есть. Рекомендую посмотреть.
#doc #tool
makefile.site
Сегодня двенадцатая версия Node.JS получила официальный статус LTS (12.13.0). LTS релиз поддерживается 30 месяцев, обычные версии — 6 месяцев. Я пропустил анонс прошлого релиза 12.12.0, который состоялся 10 октября, поэтому перечислю самые интересные нововведения нового релиза и 12.12.0.
В LTS релизе npm был обновлён до версии 6.12.0. Эта версия включает node-gyp, который поддерживает Python 3 для сборки нативных модулей.
Добавлен флаг
JSON-модули вернулись в экспериментальный статус. Это связано с тем, что участники whatwg решили переработать спецификацию JSON-модулей, для того чтобы предотвратить потенциально-возможные уязвимости.
В модуле
Продолжается процесс внедрения поддержки source maps. Появился флаг
В модуле
Метод
#nodejs #release
https://github.com/nodejs/node/releases/tag/v12.13.0
В LTS релизе npm был обновлён до версии 6.12.0. Эта версия включает node-gyp, который поддерживает Python 3 для сборки нативных модулей.
Добавлен флаг
--force-context-aware для предотвращения загрузки нативных модулей, которые не могу быть одновременно использованы в разных воркерах в рамках одного процесса ("Context Aware"). Новый флаг позволяет явно накладывать ограничения на используемые модули в Electron и других встраиваемых окружениях.JSON-модули вернулись в экспериментальный статус. Это связано с тем, что участники whatwg решили переработать спецификацию JSON-модулей, для того чтобы предотвратить потенциально-возможные уязвимости.
В модуле
fs был добавлен opendir, с помощью которого можно асинхронно получить элементы директории. Этот метод очень полезен при чтении директорий с очень большим количеством элементов внутри.Продолжается процесс внедрения поддержки source maps. Появился флаг
--enable-source-maps для включения source maps в стектрейсах.В модуле
tls исправлен баг с опцией pauseOnConnect. Добавлена возможность использования HSM (Hardware Security Module) для получения доступа к приватным ключам.Метод
process._tickCallback объявлен deprecated.#nodejs #release
https://github.com/nodejs/node/releases/tag/v12.13.0
GitHub
Release 2019-10-21, Version 12.13.0 'Erbium' (LTS), @targos · nodejs/node
This release marks the transition of Node.js 12.x into Long Term Support (LTS) with the codename 'Erbium'. The 12.x release line now moves into "Active LTS" and will remain so unt...
Сегодня Firefox обновился до версии 70. В блоге Mozilla Hacks появился пост про новый релиз — "Firefox 70 — a bountiful release for all".
Самое интересная новая пользовательская фича — возможность генерирования паролей в
Появилась поддержка CSS-свойств
В движке JavaScript реализована поддержка числовых разделителей —
В инструментах разработчика теперь отображаются подсказки для неактивных CSS-свойств. Появилась возможность ставить точки останова на мутациях DOM-дерева. Улучшили поддержку средств анализа доступности: добавили информацию о контрастности в инструменте выбора цвета и добавили средство автоматического анализа доступности страницы с клавиатуры.
#firefox #release
https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/
Самое интересная новая пользовательская фича — возможность генерирования паролей в
<input type="password">. Сгенерировать пароль можно через контекстное меню. Или если у поля ввода есть атрибут autocomplete="new-password", то при фокусе на нём будет появляться диалог для генерации пароля.Появилась поддержка CSS-свойств
text-decoration-thickness, text-underline-offset и text-decoration-skip-ink, с помощью которых можно управлять внешним видом линии подчёркивания. В display появилась поддержка значений, состоящих из двух ключевых свойств, например, display: block flex;.В движке JavaScript реализована поддержка числовых разделителей —
1_000_000. Добавлен Intl.RelativeTimeFormat.formatToParts, с помощью которого можно получить составные части относительных дат. Выполнение JS стало быстрее благодаря новому интерпретатору.В инструментах разработчика теперь отображаются подсказки для неактивных CSS-свойств. Появилась возможность ставить точки останова на мутациях DOM-дерева. Улучшили поддержку средств анализа доступности: добавили информацию о контрастности в инструменте выбора цвета и добавили средство автоматического анализа доступности страницы с клавиатуры.
#firefox #release
https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/
Mozilla Hacks – the Web developer blog
Firefox 70 — a bountiful release for all
Firefox 70 is released today, and includes great new features such as secure password generation with Lockwise and the new Firefox Privacy Protection Report, as well as cool additions for ...
Хочу начать публиковать каждую субботу анонсы ближайших бесплатных мероприятий, связанных с web-разработкой (фронт, бэк). Как отнесётесь к таким постам?
Anonymous Poll
65%
Положительно
24%
Нейтрально
11%
Негативно
Неделя релизов продолжается. Вчера вышел Chrome 78. Разработчики браузера опубликовали статью про новинки релиза — "New in Chrome 78".
В рамках имплементации спецификации Houdini CSS Properties and Values API Level 1 добавлен метод
Изменилась стратегия обновления сервис воркеров. Если сервис воркер подключался с помощью
Добавлены новые экспериментальные возможности, которые можно включить для пользователей вашего сайта в рамках Orgin Trials. Например, с этой версии можно включить Native File System API для доступа к файлам из веб-приложения. Также можно включить SMS Receiver API, с помощью которого можно получить одноразовый пароль из SMS-сообщения.
В инструментах разработчика можно увидеть, какое количество времени сторонние скрипты блокировали главный поток. Также появилась возможность аудита приложения, если были использованы Request Blocking или Local Overrides. Теперь можно сообщить о проблеме в Chrome Dev Tools с помощью меню
#release #chrome
https://developers.google.com/web/updates/2019/10/nic78
В рамках имплементации спецификации Houdini CSS Properties and Values API Level 1 добавлен метод
window.CSS.registerProperty, с помощью которого можно задать начальное значение, фоллбек, тип и другие параметры CSS-переменных.Изменилась стратегия обновления сервис воркеров. Если сервис воркер подключался с помощью
importScripts(), то браузер подгружал новую версию скрипта тогда, когда был изменён его путь. С версии 78 сервис воркеры будут обновляться и в том случае, когда содержимое скрипта будет изменено.Добавлены новые экспериментальные возможности, которые можно включить для пользователей вашего сайта в рамках Orgin Trials. Например, с этой версии можно включить Native File System API для доступа к файлам из веб-приложения. Также можно включить SMS Receiver API, с помощью которого можно получить одноразовый пароль из SMS-сообщения.
В инструментах разработчика можно увидеть, какое количество времени сторонние скрипты блокировали главный поток. Также появилась возможность аудита приложения, если были использованы Request Blocking или Local Overrides. Теперь можно сообщить о проблеме в Chrome Dev Tools с помощью меню
Main Menu > Help > Report a DevTools issue.#release #chrome
https://developers.google.com/web/updates/2019/10/nic78
Chrome for Developers
New in Chrome 78 | Blog | Chrome for Developers
Chrome 78 is rolling out now! You can now provide "types" for CSS variables. You get fresher service workers because byte-for-byte checks are now performed for noscripts imported by importScripts(). And I've got details for two new origin trials that provide…
Случайно увидел ссылку на статью про TTFB от Гарри Робертса — "Time to First Byte: What It Is and Why It Matters".
TTFB (Time To First Byte) — время прошедшее от запроса ресурса до первого байта ответа — один из основных показателей производительности web-приложений. Максимальное сокращение этого времени лежит в основе всех оптимизаций. В статье есть список того, что может влиять на TTFB: роутинг в CDN, время чтения ресурсов с файловой системы, приоритизация в HTTP/2, время исполнения кода бэкенда, скорость работы запросов в базе данных и т.п. Для анализа того, что происходило на сервере во время обработки запроса, можно использовать Server Timing API.
В общем, статья полезная. Рекомендую посмотреть.
#performance #metrics
https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/
TTFB (Time To First Byte) — время прошедшее от запроса ресурса до первого байта ответа — один из основных показателей производительности web-приложений. Максимальное сокращение этого времени лежит в основе всех оптимизаций. В статье есть список того, что может влиять на TTFB: роутинг в CDN, время чтения ресурсов с файловой системы, приоритизация в HTTP/2, время исполнения кода бэкенда, скорость работы запросов в базе данных и т.п. Для анализа того, что происходило на сервере во время обработки запроса, можно использовать Server Timing API.
В общем, статья полезная. Рекомендую посмотреть.
#performance #metrics
https://csswizardry.com/2019/08/time-to-first-byte-what-it-is-and-why-it-matters/
Csswizardry
Time to First Byte: What It Is and How to Improve It – CSS Wizardry
Just how much does TTFB matter when it comes to front-end performance?
Пару дней назад вышла минорная версия языка elm — 19.1. По этому поводу Эван Чаплицки — дизайнер языка — написал пост про то, над чем шла работа в последнее время — "The Syntax Cliff".
Elm часто подвергается критике. Она возникает из-за того, что большая часть фронтенд-сообщества и команда разработки языка ставят в приоритет разные вещи. Это очень хорошо видно на примере последнего релиза. Самое большое изменение в 19.1 — улучшенные сообщения компилятора при парсинге синтаксически некорректного кода. Эван решил приоритезировать эту фичу, чтобы снизить порог входа в язык. Теперь сообщения об ошибках фактически обучают синтаксису и особенностям языка. Казалось бы, изменение небольшое, но оно имеет очень важное значение для увеличения сообщества за счёт новых людей, которые начинают изучение языка и не бросают его из-за борьбы с компилятором.
Я видел много разных мнений по поводу Elm. Но что бы ни говорили, он уже оказал большое влияние на индустрию — дружелюбие компилятора Elm ставят в пример другим проектам.
#elm #release
https://elm-lang.org/news/the-syntax-cliff
Elm часто подвергается критике. Она возникает из-за того, что большая часть фронтенд-сообщества и команда разработки языка ставят в приоритет разные вещи. Это очень хорошо видно на примере последнего релиза. Самое большое изменение в 19.1 — улучшенные сообщения компилятора при парсинге синтаксически некорректного кода. Эван решил приоритезировать эту фичу, чтобы снизить порог входа в язык. Теперь сообщения об ошибках фактически обучают синтаксису и особенностям языка. Казалось бы, изменение небольшое, но оно имеет очень важное значение для увеличения сообщества за счёт новых людей, которые начинают изучение языка и не бросают его из-за борьбы с компилятором.
Я видел много разных мнений по поводу Elm. Но что бы ни говорили, он уже оказал большое влияние на индустрию — дружелюбие компилятора Elm ставят в пример другим проектам.
#elm #release
https://elm-lang.org/news/the-syntax-cliff
Майкл Шарналь недавно написал статью про исправление отображения фотографий в браузере, если они были сняты в портретной ориентации — "Image orientation on the web".
Информация о том, как был повёрнут фотоаппарат во время съёмки, находится в EXIF-данных изображения. Для того, чтобы изображение отображалось корректно, надо чтобы браузер прочитал эту информацию и повернул изображение. В Firefox для этого используется CSS-свойство
Пока не все браузеры отображают изображения в правильной ориентации. Одно из решений этой проблемы — поворачивать изображения при их сохранении на сервер. В статье описывается, как это сделать с помощью Node.JS.
Статья хорошая. Читать стоит, если работаете с загружаемым контентом пользователей.
#image #nodejs
https://justmarkup.com/articles/2019-10-21-image-orientation/
Информация о том, как был повёрнут фотоаппарат во время съёмки, находится в EXIF-данных изображения. Для того, чтобы изображение отображалось корректно, надо чтобы браузер прочитал эту информацию и повернул изображение. В Firefox для этого используется CSS-свойство
image-orientation: from-image , в Safari изображение поворачивается автоматически, если есть EXIF-данные. Рабочая группа CSS решила, что последний вариант лучший и объявила image-orientation: from-image deprecated.Пока не все браузеры отображают изображения в правильной ориентации. Одно из решений этой проблемы — поворачивать изображения при их сохранении на сервер. В статье описывается, как это сделать с помощью Node.JS.
Статья хорошая. Читать стоит, если работаете с загружаемым контентом пользователей.
#image #nodejs
https://justmarkup.com/articles/2019-10-21-image-orientation/
Justmarkup
image orientation on the web
Learn about the current status of image orientation on the web, how to fix it using Node.js and a look in the future