Доброе утро!

Небольшая заметка про доступность модальных окон. Не так много надо сделать, чтобы окна работали правильно.
https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/

Рассуждение на тему зачем нужен HTTPS для статических сайтов. Основная причина — защита от атак на транспортном уровне. Такое часто случается, когда провайдер хочет воткнуть рекламу.
https://www.troyhunt.com/heres-why-your-static-website-needs-https/

Большое пошаговое руководство по работе с GraphQL. Похоже на отличное место для старта.
https://www.howtographql.com/

На днях взломали аккаунт мейнтейнера eslint и добавили зловредный код в пакет. Причина классическая: пароль для NPM использовался где то еще и не была включена двух-факторная авторизация.
https://eslint.org/blog/2018/07/postmortem-for-malicious-package-publishes

Очень интересное исследование про доступность капчи. Роботы уже легко распознают тексты, голос и картинки. При этом усложнять капчу дальше нельзя — люди не пройдут. В статье рассказывается про другие способы, такие как отслеживание поведения.
https://www.w3.org/TR/turingtest/

Доброе утро! Вчера промашка вышла (:

Большой стайл гайд по использованию React и Redux. Вполне хорошо освещает стандартные проблемы, связанные с использованием этих библиотек вместе.
https://github.com/iraycd/React-Redux-Styleguide

Пару недель назад состоялся релиз спецификации кодека AV1. Это большое дело, потому как это бесплатный кодек, с лучшим алгоритмом сжатия видео (в два раза лучше чем популярный x264( и поддержанный большими компаниями. Надеюсь браузера и провайдеры поддержат его.
https://blog.mozilla.org/blog/2018/07/11/royalty-free-web-video-codecs/

Для разработки своих пет-проектов я часто использую удаленный сервер. По ссылке — мой вариант настройки и использования.
https://slonoed.net/remote-dev-server-ru

Доброе утро!

Большая статья про создание сетки фотографий в Google Photos. Подробно описаны технические детали. Очень советую к прочтению. Там много интересных подходов.
https://medium.com/google-design/google-photos-45b714dfbed1

PWACompat — библиотека, помогающая делать кроссбрузерные PWA приложения. На лету добавляет нужные для конкретного браузера иконки, метатеги и прочее.
https://developers.google.com/web/updates/2018/07/pwacompat

Подборка ссылок по изучению CSS Grid. Конкретного посоветовать не могу, но скорее всего вы найдёте интересное.
https://zendev.com/ultimate-guide-to-learning-css.html

Доброе утро!

Хорошая статья от Airbnb про оптимизацию серверного рендера. Там интересная часть про настройку HAProxy
https://medium.com/airbnb-engineering/operationalizing-node-js-for-server-side-rendering-c5ba718acfc9

ReaKit — набор компонентов для React. Очень хорошо сделана композиция компонентов, но то как задаются стили — ужас.
https://reakit.io/

Небольшая тузла для генерации изображения из кода. Выглядит интересно, хотя применения я придумать не могу. Разве что генерировать картинки для презентаций.
https://github.com/mixn/carbon-now-cli

Доброе утро!

Список деталей важных для SEO. Хорошо иметь под рукой, если разрабатываете публичные страницы и поиск имеет значение.
https://habr.com/post/417503/

Статья про будущее WebAssembly. Самое интересное: треды и сборщик мусора. Еще хвостовая рекурсия если вдруг кто-то захочет использовать Lisp :D
https://blog.scottlogic.com/2018/07/20/wasm-future.html

Firefox тестируют новые возможности движка Servo для переноса части вычислений по отрисовке страницы на GPU. В теории это может дать хороший прирост производительности.
http://www.opennet.ru/opennews/art.shtml?num=48989

Доброе утро!

Интро на русском в CSS Paint API. Это фича, позволяющая имплементировать новые CSS свойства на канвасе. Поддержка пока не очень, но играться уже можно.
https://habr.com/company/ruvds/blog/417075/

Большая статья с разбором зловредных скриптов и что они могут сделать. Ничего особенно опасного или нового, но автор сделал очень детальный отчет, который интересно читать.
https://css-tricks.com/anatomy-of-a-malicious-script-how-a-website-can-take-over-your-browser/

Гайд по использованию AWS Lambda для построения риалтаймового API поверх GraphQL.
https://andrewgriffithsonline.com/blog/serverless-websockets-on-aws/

Доброе утро!

Очень крутой пример того, на что способен CSS. Набор фильтров как в Instagram.
https://una.im/CSSgram/

ndb — новая тулза для дебага ноды. Пока это мало отличается от дебага через Chrome, учитывая, что он внутри и используется. Но обещают добавлять ещё фичей.
https://github.com/GoogleChromeLabs/ndb

Wordpress обзавёлся плагином для поддержки возможностей PWA приложений. Насколько хорошо оно работает я не знаю, но фича занятная.
https://wordpress.org/plugins/pwa/

Доброе утро!

Большая новость. Релизнулся Chrome 68,  в котором все http сайты помечен как небезопасные. При этом иконка остается серой.

А вот с октября при вводе чего либо в инпуты на http сайте иконка будет становиться красной. Думаю, что в течении пары лет браузер начнет показывать целый скрин с предупреждением. И это хорошо.
https://blog.google/products/chrome/milestone-chrome-security-marking-http-not-secure/

Из интересного: новый Page Lifecycle API, который позволит реагировать на заморозку страницы браузером (например, когда она в бэкграунде)
https://developers.google.com/web/updates/2018/07/nic68

А вот в консоль наконец приехала фича с ранним выполнением команд и подсказкой параметров функций.
https://developers.google.com/web/updates/2018/05/devtools

Доброе утро!

Статья про Feature Policy. Если вкратце, то это способ сайту указать какие фичи код сайта может использовать. Нужно это для того, чтобы подключенные библиотеки не могли получить доступа к критичным вещам. Нужна фича на фоне последних взломов NPM.
https://developers.google.com/web/updates/2018/06/feature-policy

Команда Github выпилила jQuery в пользу нативных функций браузера. Очень здорово, что они продолжают поддерживать такой легкий код, не притаскивая большие фреймворки.
https://habr.com/post/418257/

React Select — компонент для создания компонента селекта с кучей фич. Из всех что я использовал этот сделан наиболее хорошо. Новость в том, что автор выпустил вторую версию.
https://react-select.com/home

Доброе утро!

Интересная заметка про то, почему Youtube хорошо работает только в Chrome. Они используют Shadow DOM 0, который не работает в других браузерах.
https://habr.com/post/418105/

Когда то я постил ссылку на чеклист производительности. Тут вот появился перевод на русский. Формат чеклистов мне особо нравится, идеально пройтись по такому и сразу наделать тикетов.
https://github.com/lex111/Front-End-Performance-Checklist

Firefox 64 получит дополнительные фичи для предотвращения трекинга. Было бы круто, если бы остальные браузеры подхватили.
http://www.opennet.ru/opennews/art.shtml?num=49011

Доброе утро!

Об этом я уже много говорил, но повторить стоит: Google теперь используют скорость загрузки страницы при ранжировании. Не удивлюсь, если Яндекс последует примером.
https://developers.google.com/web/updates/2018/07/search-ads-speed

Релиз TypeScript 3.0. Там очень много новых фич, про которые мне сложно рассуждать (не работаю с TS). Понравилось, что сильно улучшили вывод ошибок, а так же добавили базовый рефакторинг в тулинг вокруг языка.
https://blogs.msdn.microsoft.com/typescript/2018/07/30/announcing-typescript-3-0/

Небольшая заметка про пять новых (относительно) свойств CSS и примеры их использования.
https://www.creativebloq.com/how-to/5-hot-new-css-features-and-how-to-use-them

Доброе утро! На сегодня у меня только одна новость.

Вчера вышел релиз Fusion.js, фреймворка для построения изоморфных приложений от инженеров Uber. По сути это Koa вокруг которого построена система плагинов. А плагинов понаписано уже довольно много (в том числе аналитика, метрики, graphql, redux и прочее). Сам фреймворк и плагины используют Flowtype для типизации.
У меня есть проекты на этом фреймворке уже год. Опыт довольно позитивный. Хорошо подойдёт, если вам нужно делать сайты периодически и не хочется настраивать всё с нуля каждый раз.
https://eng.uber.com/fusionjs/

Доброе утро!

Статья про текущее состояние нового оператора |> (pipeline) в JS. Пока так и не решили, что делать с await внутри цепочки.
https://habr.com/company/mailru/blog/418125/

Примеры создания CSS селекторов, которые зависят от числа элементов. Там в конце хороший пример: карусель, в которой контролы и скрол появляются только при большом количестве внутренних блоков.
https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/

Remeda — библиотека утили, похожая на Lodash, но с типами для TypeScript и ленивым выполнением.
https://github.com/remeda/remeda

Доброе утро!

Mailru закрыли разработку браузера Амиго. Интересно, что компания продолжит делать свои браузеры, а причиной закрытия стала плохая репутация Амиго, тянущаяся с тех времён, когда его распространяли через сторонний софт.
https://habr.com/company/mailru/blog/418785/.com!s-segodnyashnego-dnya-ma

Описание API и примеры работы с Page Lifecycle API, который появился в хроме. Напомню, что этот механизм предназначен для реагирования приложения на действия браузера, например, когда последний тормозит страницу в бэкграунде. Это хорошая фича, если у вас долгоживущее приложение, типо чата.
https://developers.google.com/web/updates/2018/07/page-lifecycle-api

Chrome теперь может запускаться на VR платформе Daydream. Приведёт ли это к тому, что нужно будет UI и UX сайтов оптимизировать под VR?
https://tproger.ru/news/daydream-vr-chrome/

Доброе утро!

Статья про новый Beacon API. В статье рассказано, что применение это аналитика и дебаггинг. Странно, что не упоминается такое применение отправка несохраненных данных, когда пользователь закрыл страницу.
https://www.smashingmagazine.com/2018/07/logging-activity-web-beacon-api/

Очень часто при разработке фронтенда нужно писать простой (иногда не очень) бэкенд. И по не знанию и отсутствию опыта можно наделать дыр в безопасности. По ссылке список основных вещей, про которые часто забывают. Стоит ознакомиться. В конце есть ссылки на другие ресурсы.
https://medium.com/@nodepractices/were-under-attack-23-node-js-security-best-practices-e33c146cb87d

Русскоязычный гайд по React в виде репозитория. Подойдет как шпаргалка.
https://github.com/lex111/react-from-zero

Доброе утро!

Firefox 61 получил поддержку SameSite cookie. Это механизм позволяющий запретить использование куки при запросах с других доменов, что является защитой от CSRF. К сожалению, Safari старые IE и некоторые мобильные браузеры до сих пор не поддерживают, а значит CSRF токены никуда не денутся.
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/61#HTTP

Еще одна, но очень милая на вид библиотека для создания графиков. Имеет хороший API и кастомизируемость.
https://apexcharts.com/

Посмотрите какой простой паттерн, позволяющий убрать выброс ошибок внутри async функций.
https://github.com/xobotyi/await-of/blob/master/src/await-of.js

Сегодня у меня начинается отпуск, поэтому следующие новости в конце месяца. До встречи!

Доброе утро!

Я только вернулся из отпуска и утренней подборки сегодня не будет. А вот вечером подготовлю рассылку со всем интересным, что было за пару последних недель. Напоминаю, что подписаться на рассылку можно на сайте https://breakfastjs.com

С завтрашнего дня продолжаем в обычном режиме: свежая подборка в 9:00 по Москве.
Канал ведёт Дмитрий Мананников aka @slonoed (:

Доброе утро!

Вчера всем подписанным на email рассылку должна была придти небольшая подборка.

Читатель канала прислал ссылку на свой перевод книги “Путь к изучению React”. Книга детальная и содержит много примеров. Подойдёт тем, кто хочет разобраться с React не копаясь в документации и разрозненных гайдах. По ссылке вы можете скачать книгу бесплатно или за вознаграждение авторам.
https://leanpub.com/the-road-to-learn-react-russian

Доброе утро!

Scroll Snap — новая фича в Chrome, которая позволяет декларативно менять поведение прокрутки. С одной стороны это хорошо для реализации каруселей, с другой стороны может сломать ожидание поведения прокрутки.
https://developers.google.com/web/updates/2018/07/css-scroll-snap

Порт Windows 2000 на WebAsembly. Очень впечатляет, даже в сапера играть можно :D
https://bellard.org/jslinux/vm.html?url=https://bellard.org/jslinux/win2k.cfg&mem=192&graphic=1

Небольшое объявление. Один хороший, но неопытный верстальщик ищет удаленную работу. Если вы ищите кого-то ответственного для вёрстки страниц или компонентов, то напишите @alekseevaiana