Доброе утро!

Руководство по использованию счетчиков в CSS. Это очень мощная фича, которая может упростить вёрстку страниц с большим количеством иерархий и сквозной нумерацией.
https://medium.com/@samanthaming/a-guide-to-css-counter-8e80039ac547

Небольшая заметка про дизайн “самого плохого случая”. То, про что создатели сайтов и приложений часто забывают: отсутствие сети, ошибки в ответах сервера, отсутствие данных. При этом такие случаи важно правильно показывать в UI.
https://uxdesign.cc/designing-for-the-worst-cases-eba546ec042

Помните введение DRM в браузерах? Вот интересные последствия пошли: разработчик open source браузера жалуется, что не может получить от гугла разрешения на использование Widevine (закрытое ПО). Похожая история была с браузером Brave
https://blog.samuelmaddock.com/posts/google-widevine-blocked-my-browser/

Доброе утро!

12 полезных правил при написании CSS. Очень крутой список, хотелось бы побольше такого.
https://nicothin.pro/page/reflex

Firefox планирует изменить UI для запроса пушей а браузере. Вместо надоедливого попапа будет только иконка. Это очень хорошо для пользователей, но сайтам нужно будет скорректировать дизайн.
https://blog.nightly.mozilla.org/2019/04/01/reducing-notification-permission-prompt-spam-in-firefox/

Хочу поделиться каналом, который сам читаю (и откуда таскаю ссылки иногда). Канал не шумный, ссылки полезные и к каждой прилагается короткое авторское описание. https://t.me/smart_dev
Также у них есть чат @smart_dev_chat

Доброе утро!

Старый SASS компилятор, написанный на Ruby больше не поддерживается. Подозреваю, что все уже давно используют LibSass, который поддерживает почти полное API. Команда проекта молодцы, сделали хороший продукт и поддерживали его.
http://sass.logdown.com/posts/7828841-ruby-sass-is-unsupported

Сайт с различными (базовыми) UX элементами и описанием, что нужно учитывать для каждого. А ещё там для каждого компонента есть несколько ссылок на статьи. Пока подборка небольшая, но есть надежда, что будет расти.
https://www.checklist.design/

Перевод статьи Дена Абрамова про использование хука useEffect. Статья большая, но если вы используете React, то знание необходимое.
https://habr.com/ru/company/ruvds/blog/445276/

Доброе утро!

Список изменений в Safari 12.1. Несколько улучшений стандартных инпутов, Share API и другое. Также сделали механизм предотвращения трекинга более агрессивным. Но моя любимая новинка: медиа выражение prefers-color-scheme, позволяющее сайтам понять, что пользователь запрашивает темную тему.
https://webkit.org/blog/8718/new-webkit-features-in-safari-12-1/

Анонс TypeScript 3.4. Добавили сохранение стейта между компиляциями, что может ускорить сборку в CI. Улучшенное выведение типов для функций высшего порядка. Ну и другие небольшие и полезные изменения.
https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/

Понемногу появляются статьи о практическом использовании WebAssembly. По ссылке текст про то как заменяли обработку данных в браузере с JS на WASM внутри отдельного воркера. Подробностей не очень много.
https://www.smashingmagazine.com/2019/04/webassembly-speed-web-app/

Доброе утро!

Состоялся релиз первой версии нового Edge, который базируется на Chromium. Также команда представила модель разработки, сходную с родительской платформой: есть Beta, Dev и Canary версии. К браузеру точно стоит присматриваться, учитывая, что он будет по умолчанию у многих пользователей.
https://blogs.windows.com/msedgedev/2019/04/08/microsoft-edge-preview-channel-details

Поддержка нового атрибута у изображений для ленивой загрузки. Позволяет отложить загрузку изображений до того момента, когда они попадут во вьюпорт. Подобный подход использовался и ранее с помощью JS, но если браузер сможет “умно” подгружать изображения при простое сети результат может быть намного лучше.
https://addyosmani.com/blog/lazy-loading/


Прошлый раз я писал про supported-color-schemes в Sarafi, позволяющей детектить цветовую тему интерфейса пользователя. Тут ещё немного подробностей. Было бы здорово, если и другие браузеры поддержали эту фичу. (забавно, но это ещё один “бит” для трекинга пользователей)
https://medium.com/dev-channel/what-does-dark-modes-supported-color-schemes-actually-do-69c2eacdfa1d

Доброе утро!

ReasonReact получил новый JSX синтаксис, который позволяет писать функциональный компоненты с хуками в виде, близком к тому, что имеем в JS. И при этом со звучащей системой типов.
https://reasonml.github.io/reason-react/docs/en/components

Хорошая статья на русском про кэширование в JS движках. Для тех, кому интересно как устроено внутри.
https://habr.com/ru/company/otus/blog/446446/

Подробности и немного примеров использования нового API для взаимодействия с устройствами через USB и Bluetooth.
https://blog.scottlogic.com/2019/04/03/upcoming-webhid-api.html

Доброе утро!

Большая вводная статья про GraphQL на русском. К сожалению, основные проблемы и их решения там не описаны, но для понимания базовых вещей отлично подойдёт.
https://habr.com/en/company/ruvds/blog/445268/

Система сборки фронтенда для WordPress. Предоставляет структуру проекта, препроцессоры для JS и CSS. Использует gulp. Мне сложно сказать, насколько легко это встраивается в сам Wordpress, но если вы работаете с этой CMS, то может быть интересно.
https://www.wordpressify.co/

Вводная статья на русском про регулярные выражения. Будет, в основном, полезна начинающим.
https://proglib.io/p/dont-fear-regex/

Доброе утро!

На днях открыл для себя альтернативу Storybook: Docz. Позволяет писать документацию в Markdown, вставляя внутрь React компоненты. В отличие от Storybook нет такого богатого набора плагинов, но базовая функциональность уже хорошая. Отлично подходит для документации к компонентам.
https://www.docz.site/

Пост в блоге WebKit про трекинг клика ссылок. Они там объяснят, почему не хотят просто отключить атрибут ping: иначе сайты начнут использовать другие методы, ухудшающие пользовательский опыт.
https://webkit.org/blog/8821/link-click-analytics-and-privacy/

API для работы с Google Translate из NodeJS.
https://github.com/googleapis/nodejs-translate

Доброе утро!

Интересная статья от Яндекса про создание темной темы для почты. Особенность в том, что они перекрашивают не только интерфейс, но и сами письма.
https://habr.com/ru/company/yandex/blog/446780/

Обратный взгляд на AMP страницы. Если ваш сайт и так сделан нормально, то грузится он будет быстрее. В целом статья больше про боль от того, что Google перекраивает интернет по своему, чем про конкретные вещи.
https://unlikekinds.com/article/google-amp-page-speed

Небольшой тест на проверку знаний CSS селекторов. Я ответил правильно лишь на половину 😩
https://codepen.io/pehaa/full/ROapJZ

Доброе утро!

Хорошая заметка на русском про использование директивы @supports в CSS. Пойдёт тем, кто решил разобраться в этой фиче.
https://medium.com/webbdev/css-264fc77cc04

Есть шансы, что в Chrome появится ленивая загрузка iframe. Если вам интересна эта тема, то больше деталей в треде по ссылке.
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/jxiJvQc-gVg

Вышла новая Opera. Сомневаюсь, что он займёт большую долю когда-либо, однако по старой памяти люди могут его начать устанавливать. Плюс наличие встроенного VPN.
https://itc.ua/news/vyishla-opera-60-reborn-3-pervyiy-desktopnyiy-brauzer-c-podderzhkoy-interneta-budushhego-web-3-kriptokoshelkom-i-besplatnyim-vpn/

Доброе утро!

Подробности о том как работают AMP с URL оригинального сайта. По сути сайт запаковывается в архив и подписывается сертификатом. После чего поисковики (и не только) могут раздавать такой архив, а браузер проверять оригинальность контента. Меня удивляет как быстро это внедряют. Видимо очень нужно Google.
https://blog.cloudflare.com/announcing-amp-real-url/

Большой гайд про использование preload. В целом полезно всем.
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

Подробности Safari TP 80. Добавили ResizeObserver, noreferrer (я думал уже давно есть). Ещё запретили старый формат распространения расширений (в виде пакетов). В остальном мелочи.
https://webkit.org/blog/8825/release-notes-for-safari-technology-preview-80/

Я ухожу в отпуск, так что новостей пока не будет. Встретимся через неделю. Удачи!

Доброе утро! Я вернулся, а значит встречайте утренние подборки новостей.

Руководство по использованию модулей в NodeJS 12. Там есть несколько неочевидных моментов, которые отличаются от того как работает с модулями, например Webpack. Бросаться переделывать ничего не надо, но начать писать код с учетом стандарта полезно, и убережет вас от миграции в будущем.
http://2ality.com/2019/04/nodejs-esm-impl.html

Хороший гайд по отладке проблем производительности анимаций. По шагам показывают как определить узкие места.
https://www.viget.com/articles/animation-performance-101-measuring-with-dev-tools/

Начиная с Chrome 74 (который уже релизнулся), JS классы поддерживают приватные поля.
https://developers.google.com/web/updates/2019/04/nic74

Доброе утро!

Подробный разбор часто используемых заголовков HTTP ответа. Это та информация, которую нужно знать при работе с вебом.
https://www.twilio.com/blog/a-http-headers-for-the-responsible-developer

Игра, где нужно повторить фигуры с помощью CSS, используя минимальное количество кода. Есть глобальный рейтинг.
https://cssbattle.dev

Новая версия фреймворка Svelte. Его фишка в том, что там происходит очень много кодогенерации на этапе компиляции. В посте есть видео, где Rich Harris рассказывает как это всё работает и почему было сделано. Пока это всё не выглядит как готовое решение для продакшена, но сам подход интересный.
https://habr.com/en/post/449450/

Доброе утро!

Небольшая заметка про “Идеальный юнит тест”. Набор небольших правил призванных сделать тесты более читаемыми.
https://javascriptplayground.com/the-perfect-javascript-unit-test/

На днях в Firefox отвалились все расширения. Это было связано с истекшим сертификатом. При разработке сайтов мы редко связываемся с ситуациями, когда сломанный билд нельзя быстро откатить. Ведь пользователю всего лишь нужно перезагрузить страницу. Но уже есть инструменты (Service workers, AMP) в которых апдейт занимает долгое время, и надо быть очень аккуратным с выкатыванием апдейтов.
http://www.opennet.ru/opennews/art.shtml?num=50623

Новости AMP. Там много нового, но самое интересное – это поддержка  Signed HTTP Exchanges. Для AMP эта штука дает возможность показывать URL сайта в строке браузера (вместо google.com). Но на деле её применение шире: дистрибуция подписанных сайтов не с сервера самого сайта.
https://webplatform.news/issues/2019-04-29

Доброе утро! Сегодня новости про Microsoft.

Microsoft запускают Visual Studio Online — веб версию VS Code, работающую в браузере. Браузерные редакторы и IDE существуют уже давно, но пользоваться ими крайне сложно. Может сейчас получится лучше. Хотя позиционируют его не как полноценную рабочую среду, а как приложение-компаньон.
https://devblogs.microsoft.com/visualstudio/intelligent-productivity-and-collaboration-from-anywhere/

Релиз Edge на MacOs. Выглядит как Chrome. Работает также. Зачем? Видимо, чтобы было.
https://www.theverge.com/2019/5/6/18528881/microsoft-edge-macos-mac-browser-teaser-build-2019

React Native для Windows. Позволяет писать приложения для десктопов, мобильных, Xbox, и всего, что на Windows 10.
https://github.com/microsoft/react-native-windows

Доброе утро! Последнее время выпуски не отличались стабильностью. Постараюсь быть более регулярным.

Читатель канала прислал ссылку на своё руководство про трекинг ошибок в React приложениях с помощью Sentry. Логирование ошибок должно быть в проекте изначально, а Sentry отличный вариант для старта.
https://hackernoon.com/tracking-errors-in-react-app-with-sentry-d6091a84b64e

Руководство по использованию атрибута inputmode, который позволяет браузеру показать наиболее подходящий способ ввода. Главное применение — выбор клавиатуры на телефоне. Многие сайта почему то забывают про эту фичу.
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

Новость важная для веба в целом. Поисковый бот Google будет использовать Chrome последней версии. Это означает, что не нужно думать про необходимость работать в старом браузере только из-за индексирования. Если кто знает как дело обстоит с Яндексом — поделитесь.
https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html

Доброе утро!

Статья из двух частей на русском, про то как создать PWA из вебсайта и выложить его в Google Play. Внизу там много полезных ссылок по теме.
https://habr.com/en/company/mailru/blog/450504/

Google Fonts теперь поддерживает указание font-display для загружаемого шрифта. Для сайтов, которые изначально беспокоились об оптимизации и имели шрифты у себя, поводов переходить на Google Fonts нет. А вот для остальных сайтов фича приятная.
https://scotch.io/bar-talk/google-fonts-now-supports-font-display

Я написал руководство по созданию пользовательских правил для eslint. Полезная практика, которую я использую в своих проектах.
https://slonoed.net/ru/custom-eslint-rule/

Доброе утро!

Официальная canary версия браузера Edge для MacOS. Я очень сомневаюсь, что у неё будет хоть сколько нибудь пользователей, но проверить, что ваш сайт открывается и работает стоит (скорее всего всё ок, ведь это Chromium).
https://blogs.windows.com/msedgedev/2019/05/20/microsoft-edge-macos-canary-preview/

Новый формат BinaryAST, который позволит отправлять не JS, а уже разобранное синтаксическое дерево. Таким образом браузер пропускает фазу парсинга, что даст прирост в скорости начала работы сайта. В отличие от WebAssembly этот подход очень легко наложить на уже имеющиеся проекты,
https://www.opennet.ru/opennews/art.shtml?num=50701

Разбор внутреннего устройства JPEG картинок. Это скорее теория и может быть не всем интересна.
https://parametric.press/issue-01/unraveling-the-jpeg/

Доброе утро!

В новом Firefox (67) теперь тоже поддерживается prefers-color-scheme и сайт может реагировать включенную тёмную тему в системе. Теперь дело за дизайнерами сайтов.
https://hacks.mozilla.org/2019/05/firefox-67-dark-mode-css-webrender/

Если вы используете AWS Lambda и используете JS, то проверьте, что обновились на верную 8 или выше. Шестая больше не поддерживается.
https://aws.amazon.com/ru/blogs/developer/node-js-6-is-approaching-end-of-life-upgrade-your-aws-lambda-functions-to-the-node-js-10-lts/

Руководство по созданию IO игр. Это простые мультиплеерные игры в браузере для большого количества игроков. Самой известно была agar.io.
https://habr.com/ru/post/450574/

Доброе утро!

Хороший пример использования  WebAssembly от команды eBay. Они использовали WASM для компиляции C++ библиотеки для распознавания штрих-кодов.
https://www.ebayinc.com/stories/blogs/tech/webassembly-at-ebay-a-real-world-use-case/

Туториал по работе с Google Sheets из NodeJS. Может быть вполне полезно как небольшая БД, которую можно редактировать руками. Или выводить отчёты.
https://blog.stephsmith.io/tutorial-google-sheets-api-node-js/

Большая статья про создание сложных таблиц (доступность, маленькие экраны и так далее).
https://www.smashingmagazine.com/2019/02/complex-web-tables/