Доброе утро!

Русскоязычный гайд по созданию PWA приложение, которые можно добавить в Play Store. Тема это интересная для бизнеса и важно быть в курсе того, как это работает.
https://habr.com/en/post/439238/

Очень подробная статья на русском про использование логических свойств в CSS.  Название немного странное, но суть в том, что это свойства помогающие, например, правильно работать с текстом справа-налево
https://medium.com/web-standards/logical-css-props-c5046c563640

К новому фильму Капитан Марвел сделали промо сайт в стиле 90х. Только бегущей строки не хватает.
https://www.marvel.com/captainmarvel

Доброе утро!

Очень простая оптимизация для загрузки шрифтов из Google Fonts, позволяющая избежать интерфейса без отрисованных символов.
https://googlefonts.3perf.com/

А вот ещё интересный сниппет, который умеет предзагружать страницы, на которые пользователь собрался кликнуть. Я бы поостерегся вешать его как есть на всё, но саму технику можно взять на вооружение.
https://instant.page/

Забавная новость: лидер (?) безопасности Microsoft заявил, что IE должен рассматриваться не как браузер, а как средство совместимости со старыми системами.
https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/

Доброе утро!

Читатель канала прислал ссылку на статью с описанием различных техник предзагрузки (и пререндера) для страниц
https://www.keycdn.com/blog/resource-hints

Интересная движуха в мире типизированного JS. Команда MDN решила использовать Flowtype вместо TS. Если кратко, то причина в том что он не добавляет конструкций отличных от JS.
https://github.com/davidflanagan/mdn/blob/d621e594aaa5a22d8700479eedb54db44b766af4/ADRs/002-use-flow-for-typechecking.md

Подборка тем для изучения фронтенда. Можно спорить насколько она корректная, но для новичков может стать хорошим ответом на вопрос “с чего начать?”
https://medium.com/@ABatickaya/100daysofcode-7584c0ddfc1a

Доброе утро!

Очень хорошая статья про тифографику в вебе. А именно про разные характеристики шрифта. Когда нибудь ловили себя на том, что пробуете разные CSS свойства, чтобы выровнять текст относительно иконки? Этот текст должен прояснить то как шрифт работает.
http://westonthayer.com/writing/intro-to-font-metrics/

Подробности апдейта механизма защиты приватности в Safari. Теперь они ещё больше ограничивают работу скриптов для трека. При этом по умолчанию считается, что авторизационные куки HttpOnly (что логично)
https://webkit.org/blog/8613/intelligent-tracking-prevention-2-1/

Доброе утро!

Хорошая статья про доступность интерактивных элементов на мобильных. В целом, полезно всем.
https://medium.com/p/aac0330569ae

Расшифровка доклада про WebAssembly. Там прям очень много и очень интересно, включая опыт, примеры и применение. Если интересуетесь темой, то не проходите мимо.
https://habr.com/en/company/jugru/blog/441140/

Библиотека, которая позволяет в браузере определить тип картинки на порно/не_порно (там 5 категорий). Использует натренированную модель Tensorflow. Может быть полезна, если нужно фильтровать картинки, добавляемые пользователями еще на клиенте;
https://github.com/infinitered/nsfwjs

Доброе утро!

Фреймворк для быстрого старта приложения на nodejs. Идея очень интересная: забросили файлы и всё работает. Конечно, для продакшена такое не пойдёт, но быстро поднять сайт для тестирования идеи — отлично.
https://zeroserver.io/

Простое и ползеное руководство по оптимизации загрузки шрифтов из Google Fonts https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d

Анализ использования AMP версий страниц (и их аналога в Яндексе). Интересно видеть цифры (улучшилось) и советы.
https://habr.com/ru/post/440742/

Доброе утро!

Шпаргалка по приоритетам загрузки ресурсов на странице. Для тех, кто как и я, не может запомнить различие между defer и async
https://addyosmani.com/blog/script-priorities/

Вопрос на Stack Overflow: почему nodejs может обрабатывать много запросов, при том, что она работает в одном потоке. И там же хороший разбор почему. Интересно для тех, кто использует ноду, но не лез в детали работы.
https://stackoverflow.com/questions/34855352/how-in-general-does-node-js-handle-10-000-concurrent-requests

Я написал текст про то зачем и как делать код ревью. Он не относится напрямую к фронтенду, но в основном создан на основе моей работы с фронтендом.
https://slonoed.net/ru/code-review

Доброе утро!

Подробная статья про использование заголовка Cache-Control. Это одна из тех фундаментальных частей веба, которые очень полезно знать.
https://csswizardry.com/2019/03/cache-control-for-civilians/

Интересная заметка про автоматизированное тестирование вёрстки. Обратите внимание на используемые инструменты (могут пригодиться)
https://habr.com/ru/company/alfa/blog/441674/

Для тех, кто пользуется Reactjs: чем отличаются функциональные компоненты от классов в плане написания логики работы со стейтом и прочих хуков.
https://overreacted.io/how-are-function-components-different-from-classes/

Доброе утро!

Перевод статьи про использование @supports в CSS. Самое важное — это, собственно, примеры когда может понадобиться.
https://medium.com/web-standards/supports-92dba6de7ae7

Не то, чтобы новость полезная, но не могу пройти мимо. Скриншоты нового Edge, базирующегося на Chromium. Дат релиза пока нет.
https://www.neowin.net/news/exclusive-this-is-what-the-new-chromium-based-edge-looks-like

Немного хардкора (или развлечений). Разбор небольшой анимации, запиханной в 251 байт кода. Обратите внимание как умно хранится информация о “карте”.
https://habr.com/ru/post/441206/

Доброе утро!

Firefox добавит фичу, которая не даст скриптам проверять размер окна при ресайзе, используя пустые поля. Это делается, чтобы избежать отслеживания пользователя. Потенциально это может сломать некоторые сценарии работы скриптов.
https://www.zdnet.com/article/firefox-to-add-tor-browser-anti-fingerprinting-technique-called-letterboxing/

Заметка про популярную нынче технику по выдаче разных бандлов для новых и старых (привет IE) браузеров.
https://sgom.es/posts/2019-03-06-supporting-old-browsers-without-hurting-everyone/

Хорошая штука для начинающий: набор задачек по фронтенду. Там от базовых знаний до React. Не могу сказать, что этого хватит, чтобы разобраться с нуля, но подойдёт как план.
https://microsoft.github.io/frontend-bootcamp/

Доброе утро!

Статья про новый кодек для видео AV1 и как его использовать. Основное преимущество в размере. Будет актуально для сайтов, содержащих много видео. Там ещё есть ссылки на разбор самого кодека и его работы.
https://habr.com/ru/post/442020/

Список нововведений AMP. Наиболее интересное это встраивание рекламного видео.
https://amphtml.wordpress.com/2019/02/27/whats-new-in-amp-q1-2019-improvements-consent-videos-forms-and-lists/

Большая статья о внутренних оптимизациях Яндекс Браузера. Практической пользы там мало, но всё равно интересно.
https://habr.com/en/company/yandex/blog/442456/

Доброе утро!

В Chrome добавили первый встроенный JS модуль, который предоставляет асинхронный доступ к localStorage. Если эксперимент выйдет удачным, то мы можем увидеть больше стандартных API работающих через систему модулей.
https://developers.google.com/web/updates/2019/03/kv-storage

Статья про наследование классов в JS. Важно, что она не просто рассматривает синтаксис, а показывает, как это всё работает на самом деле через прототипы.
https://medium.com/@_jmoller/javascript-clases-and-inheritance-1f8de29c845c

Шуточный инструмент для уменьшения размера зависимостей: рандомно удаляет половину. Но если говорить серьёзно, то почти в каждом проекте можно найти зависимости, которые используются очень мало и их можно заменить просто своим кодом.
https://thanosjs.org/

Доброе утро!

Релиз Chrome 73. Там две интересных фичи. Во-первых поддержка PWA на Mac OS. Во-вторых штука под названием “Signed HTTP Exchanges”, которая позволяет подписать некий контент вашим сертификатом и раздавать из других мест. Гуглу это нужно, чтоб показывать правильный URL внутри AMP страниц.
https://developers.google.com/web/updates/2019/03/nic73#pwas-everywhere

Ещё одна библиотека для графиков. Использует Reactjs + d3. Не сказать, что нечто особенное, но может пригодится.
https://jask-oss.github.io/reaviz/

Доброе утро!

У ReactJS появилась русская документация. Это очень здорово, учитывая, что она содержит не только описание API, но и множество туториалов, которые было сложно читать людям, плохо знающим английский.
https://ru.reactjs.org

Тут интересный текст о портировании Scratch с Flash на Web. (Scratch — это среда разработки на визуальном языке программирования для детей).
https://bocoup.com/blog/porting-scratch-from-flash-to-javascript-performance-interoperability-and-extensions

Статья про нормализацию Unicode текста и использование метода  String.prototype.normalize. Будет полезна, если вы работает с обработкой пользовательского ввода. Ну и в целом полезно знать о существовании такого API.
https://withblue.ink/2019/03/11/why-you-need-to-normalize-unicode-strings.html

Бонусная новость: если у вам MacOS, то Chrome 73 получил встроенный тёмный режим.

Доброе утро!

Хорошая практическая статья про оптимизацию загрузки изображений.
https://vc.ru/design/61079-uskorit-sayt-s-mnozhestvom-kartinok-rukovodstvo-po-otlozhennoy-zagruzke-izobrazheniy

Статья на русском про доступность. Будем надеяться, что со временем появится больше переводом.
https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C/What_is_accessibility

GitHub планирует менять пользовательское соглашение. Там есть важный пункт, про ограничение пользователей, находящихся на территории, попадающей под санкции США. Некоторым бизнесам нужно это принимать во внимание, если GitHub критичен для разработки.
http://www.opennet.ru/opennews/art.shtml?num=50326

Доброе утро!

Статья на русском про использование Live Regions. По сути рассказывает как правильно помечать динамический контент (вроде чатов, логов), что бы правильно работало с точки зрения доступности.
https://medium.com/web-standards/aria-live-regions-713f6a7813d3

Подробности внедрения модулей в nodejs. Разработчики хотят сделать миграцию плавной, хотя чую, что проблемы будут вылезать тут и там.
https://github.com/nodejs/node/pull/26745

Довольно подробная шпаргалка по CSS Grids.
https://learncssgrid.com

Доброе утро!

Хорошая статья про изображения в резиновой вёрстке и как их правильно оптимизировать с точки зрения сети. Автор рассказывает какие есть подходы и хитрости.
https://css-tricks.com/planning-for-responsive-images/

Статья про конвертацию цветов в разные цветовые схемы. Применений мало где, но интересно посмотреть, что за математика стоит за привычными RGB и HSL.
https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8

Библиотека с набором функций для работы с Promise. Полезна, если в JS надо делать много связанных асинхронных операций.
https://github.com/blend/promise-utils

Доброе утро!

У комитета TC39 (который занимается стандартизацией JS) появился свой вебсайт. Там можно посмотреть статус предлагаемых фич и следить за развитием языка.
https://tc39.github.io/

Интересный эффект размытых границ изображения на чистом CSS. Правда, мне сложно представить применение в реальном дизайне.
https://css-tricks.com/blurred-borders-in-css/

Небольшая заметка про использование ссылок mailto, позволяющим открыть почтовый клиент.
https://css-tricks.com/all-about-mailto-links/

Доброе утро!

Больше подробностей о работе PWA на IOS.
https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945

Подборка различный полезных правил для eslint. Большая часть вполне логична, чтоб использовать по умолчанию.
https://github.com/sindresorhus/eslint-plugin-unicorn

Для тех кто использует vim. Большой плагин для автокомплита, копирующий функциональность VSCode. Позволяет подключаться к language server и многое другое. Я пока только играюсь с ним, но работает хорошо.
https://github.com/neoclide/coc.nvim

Доброе утро!

Несколько простых правил по написанию CSS селекторов для улучшения производительности.
https://habr.com/ru/post/445292/

Оригинальный способ добавить поле в объект, учитывая некое условие. Не сказал бы, что я хочу такое видеть в своём коде, но интересно что новый стандарт языка позволяет делать такие трюки.
https://dev.to/jfet97/the-shortest-way-to-conditional-insert-properties-into-an-object-literal-4ag7

Небольшой туториал по построению p2p чата за 15 минут при помощи библиотеки bugout.
https://davidwalsh.name/build-a-decentralized-web-chat-in-15-minutes