Size: a a a

Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только

2019 October 07
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
В блоге Акселя Раушмайера недавно была опубликована новая статья — "Evaluating JavaScript code via import()".

Код, который использует модульную систему JS, не может быть выполнен с помощью eval(). Для того чтобы обойти это ограничение, можно использовать динамический импорт import() с закодированным кодом модуля в виде data URI.

Выглядит это так:
const js = `console.log('Hello everyone!');`;
const encodedJs = encodeURIComponent(js);
const dataUri = 'data:text/javascript;charset=utf-8,'
 + encodedJs;
import(dataUri);


При желании можно получить доступ ко всем экспортируемым объектам. Также можно вставлять data URI прямо в статический импорт, и он будет работать.

Маловероятно, что вы будете использовать этот трюк. Тем не менее статья интересная, почитать стоит.

#esm #trick

https://2ality.com/2019/10/eval-via-import.html
источник
2019 October 08
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
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
источник
2019 October 09
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Нравится нам это или нет, но порноиндустрия одна из причин, которая послужила развитию веба. Девид Волш расспросил разработчика из 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
источник
2019 October 10
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Полина Гуртовая и Рита Клубочкина опубликовали в блоге Злых Марсиан большую статью про использование изображений в вебе — "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
источник
2019 October 11
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Филлип Уолтон недавно опубликовал статью про проблему каскадной инвалидации кэша — «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/
источник
2019 October 12
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Николас Гаутей опубликовал статью про использование WebPageTest с SPA-приложениями — "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/
источник
2019 October 13
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Нашёл в твиттере ссылку на интересную статью Франсуа Шолле — "Notes to Myself on Software Engineering".

Статья представляет собой список "напоминалок" про процесс разработки софта, проектирование API и про карьеру. Хочу выделить из неё пять пунктов:

— Хороший софт делает трудные вещи простыми. Если на первый взгляд проблема кажется сложной, это не означает, что решение тоже должно быть сложным.
— При проектировании сценариев взаимодействия с API следует задать самому себе несколько вопросов. Какие это сценарии? Какая оптимальная последовательность действий для их достижения? Какой наиболее простой программный интерфейс может это реализовать?
— API создаётся для пользователей. Проявляйте эмпатию вне зависимости от того, пользуются ли им профессионалы или новички.
— Продуктивность сводится к высокой скорости принятия решений и к действию.
— Прогресс в карьерном росте выражается не количеством людей, которым вы управляете, а в том, какую ценность вы даёте миру.

В статье очень много хороших мыслей, рекомендую почитать.

#list #softwaredesign #career

https://medium.com/s/story/notes-to-myself-on-software-engineering-c890f16f4e4d
источник
2019 October 14
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Марк Ноттингэм — участвует в разработке протоколов HTTP и QUIC — написал пост про возможности, которые предоставляет HTTP/2 при проектировании классических HTTP API — "How Multiplexing Changes Your HTTP APIs".

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
источник
2019 October 15
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Прочитал статью Артура Басака — "Должен ли фронтенд разработчик уметь писать бэкенды?"

Артур пишет про то, что граница между фронтендом и бэкендом очень размыта. На западе под фронтендом понимается работа с CSS/HTML. У нас чаще всего по-другому — под фронтом понимается JavaScript, а владение CSS/HTML подразумевается как само собой разумеющееся.

С другой стороны фронтенд и бэкенд сильно переплетены друг с другом — для разработки сложных вещей требуется понимание и того, и другого. Например, в микросервисных архитектурах может использоваться Backend For Frontend (BFF) — сервис, который собирает и подготавливает данные для рендеринга или передачи на клиент. В компаниях BFF обычно разрабатывают фронтенд-разработчики.

В конце статьи есть хорошая мысль: любая технология — это всего лишь инструмент. Чем большим количеством инструментов владеет разработчик, тем больше он ценится на рынке.

#musings #backend #frontend

https://medium.com/front-end-in-regions-grodno/front-back-e1198c42d673
источник
2019 October 16
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
На этой неделе в сообществе 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
источник
2019 October 17
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Грег Уитворт — участник рабочей группы 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/
источник
2019 October 18
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Сегодня столкнулся с новым атрибутом cookie 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/
источник
2019 October 19
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Посмотрел доклад Эда Соудена — работает над государственными сайтами Великобритании — "What even is a table? A quick look at Accessibility APIs".

Эд рассказывает про работу с таблицами с точки зрения доступности. Скринридеры позволяют перемещаться по таблицам не только от колонки к колонке, но и к следующей строке в пределах одной колонки. Если применить к таблице свойство display: block, например, чтобы добавить overflow: scroll для небольших экранов, то скринридер больше ну будет воспринимать таблицу как таблицу и навигация будет сломана. Более того недостаточно использовать семантические теги, так как браузеры использует эвристику для определения табличной вёрстки. Если таблица состоит из одной ячейки, то она не будет считаться таблицей. Если таблица состоит из трёх-четырёх ячеек, которые занимают 95% ширины страницы, то она тоже не будет считаться таблицей (в Firefox). Но если таблица содержит двадцать строк, то она становится таблицей. Если в таблице в строках чередуется цвет, то она тоже будет считаться таблицей.

В конце доклада Эд советует всегда "слушать" вёрстку сайта с помощью скринридеров и не использовать атрибут role="table" для изменения семантики элемента, так это может вести к проблемам.

Доклад интересный. Очень рекомендую посмотреть, если интересуетесь темой a11y.

#a11y #internals

https://vimeo.com/139062429
источник
2019 October 20
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Недавно Иван Немытченко сделал небольшой сайт, посвящённый make — makefile.site.

Есть распространённое заблуждение, что make используется только для сборок программ, написанных на C. На самом деле его можно использовать как раннер разных задач. Например, часто в больших проектах его используют для упрощения запуска проекта в режиме отладки, запуска тестов, сборки проекта и многого другого.

На сайте человеческим языком объясняются принципы работы make. Читать эту документацию гораздо проще чем официальную man страницу. На данный момент ещё не всё дописано, но самое важное уже есть. Рекомендую посмотреть.

#doc #tool

makefile.site
источник
2019 October 21
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Сегодня двенадцатая версия 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 для сборки нативных модулей.

Добавлен флаг --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
источник
2019 October 22
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Сегодня Firefox обновился до версии 70. В блоге Mozilla Hacks появился пост про новый релиз — "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/
источник
2019 October 23
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Хочу начать публиковать каждую субботу анонсы ближайших бесплатных мероприятий, связанных с web-разработкой (фронт, бэк). Как отнесётесь к таким постам?
Анонимный опрос
65%
Положительно
24%
Нейтрально
11%
Негативно
Проголосовало: 572
источник
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Неделя релизов продолжается. Вчера вышел Chrome 78. Разработчики браузера опубликовали статью про новинки релиза — "New in Chrome 78".

В рамках имплементации спецификации 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
источник
2019 October 24
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Случайно увидел ссылку на статью про 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/
источник
2019 October 25
Defront (при поддержке Зарплата.ру) — про фронтенд-разработку и не только
Пару дней назад вышла минорная версия языка elm — 19.1. По этому поводу Эван Чаплицки — дизайнер языка — написал пост про то, над чем шла работа в последнее время — "The Syntax Cliff".

Elm часто подвергается критике. Она возникает из-за того, что большая часть фронтенд-сообщества и команда разработки языка ставят в приоритет разные вещи. Это очень хорошо видно на примере последнего релиза. Самое большое изменение в 19.1 — улучшенные сообщения компилятора при парсинге синтаксически некорректного кода. Эван решил приоритезировать эту фичу, чтобы снизить порог входа в язык. Теперь сообщения об ошибках фактически обучают синтаксису и особенностям языка. Казалось бы, изменение небольшое, но оно имеет очень важное значение для увеличения сообщества за счёт новых людей, которые начинают изучение языка и не бросают его из-за борьбы с компилятором.

Я видел много разных мнений по поводу Elm. Но что бы ни говорили, он уже оказал большое влияние на индустрию — дружелюбие компилятора Elm ставят в пример другим проектам.

#elm #release

https://elm-lang.org/news/the-syntax-cliff
источник