Доброе утро!

В новой версии TypeScript появилась возможность присваивать тип на основании условий. Плюс несколько фич для работы кастомных рендеров JSX.
https://blogs.msdn.microsoft.com/typescript/2018/03/15/announcing-typescript-2-8-rc/

Одна из дурацких "фич" CSS — это коллапс маржинов. Небольшая заметка, где визуально показано как это работает и как избежать.
https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/

Крайне радует, что разработчики браузеров заботятся о приватности пользователей. Даже в неочевидных местах. Команда Firefox спрятала за флаги API доступа к двум сенсорам (Proximity и Ambient Light), которые могли выдать информацию о пользователе без его ведома. Скорее всего вы ими и так не пользовались.
https://www.bleepingcomputer.com/news/software/firefox-gets-privacy-boost-by-disabling-proximity-and-ambient-light-sensor-apis/

Доброе утро!

Подборка различных инструментов для JS разработчика. Нашел для себя несколько крайне полезных, о которых раньше не знал.
https://habr.ru/p/351480/

Совсем краткая статься с примером использования Credential Management API для получения пароля пользователя. Одно из главных преимуществ, это то, что можно залогинить пользователя не показывая форму логина, а просто запросив разрешение через стандартный интерфейс.
https://noteskeeper.ru/1373/

Google AMP выставляет своей фичей скорость открытия страницы и работы. Но на самом деле ли это так? В статье автор разбирается в вопросе, делает замеры и сравнивает с работой  обычных сайтов. Вывод достаточно ожидаемый: такой же производительности можно добиться сделав сайт нормально и оптимизировав его (не считая предзагрузки самим поисковиком).
https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/

Доброе утро!

Новинки в Chrome 66. На мой взгляд самое интересное это Clipboard API, поддержка функций внутри CSS медиа выражений, блок catch в JS больше не обязан иметь аргумент-ошибку, fetch теперь можно отменять. Там еще очень много полезных фич, которые можно использовать.
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html

Живой чеклист для проверки многих параметров вашего фронтенда. Очень удобно проверять перед релизом. Значения сохраняются в localStorage, так что можно к нему возвращаться периодически. А еще можно его распечатать и отмечать на бумаге (:
https://frontendchecklist.io/

Статья про опыт использования CSS грид в продакшене.  Автор рассказывает о возникших проблемах и дает полезные ссылки. Для браузеров без поддержки гридов делают довольны скудный фолбек.
https://techblog.commercetools.com/gss-grid-application-layout-in-production-f60c65a05cfa

Доброе утро!

Небольшая заметка по использованию новой фичи React – error boundaries. В статье показано как их использовать для логгирования в Rollbar, но легко можно переделать на любой другой логгер, например Sentry.
https://rollbar.com/blog/react-error-boundaries/

Большая и основательная статья о применении машинного обучения при сборке JS бандлов. Только вот на практике построение такой системы имеет мало смысла. Это микрооптимизации, которые дают слишком малый прирост, а требуют много усилий.
http://blog.mgechev.com/2018/03/18/machine-learning-data-driven-bundling-webpack-javascript-markov-chain-angular-react/

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

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

План развития функциональности Firefox на 2018 год. Среди возможных фич есть блокировка трекеров. По сути идея неконтролируемого веба проиграла. Даже Firefox, который всегда был за открытость выходит из нейтралитета и будет блокировать код на своё усмотрение (с припиской "лучше для пользователя").
http://www.opennet.ru/opennews/art.shtml?num=48312

MDN на данный момент лучшая документация по веб-технологиям. И её сделали еще лучше, добавив интерактивные примеры и песочницы с кодом. Теперь многие вещи можно проверить прямо на месте.
https://hacks.mozilla.org/2018/03/bringing-interactive-examples-to-mdn/

Доброе утро!

Просто замечательная подборка CSS сниппетов, которые часто пригождаются в работе. Скорее всего вы уже используете многое из этого.
https://justmarkup.com/log/2018/03/collection-of-css-snippets/

Наглядное объяснение того как работает display:contents. Сейчас это поддерживают только Chrome и FF, но полезно знать, что такой инструмент есть и знать как он работает.
https://bitsofco.de/how-display-contents-works/

Заметка, которая привлекает к себе довольно много внимания последнее время. В заметке рассказывают о преимуществах монорепозитория. Возможно вы уже задумывались о таком подходе для организации кода. Как понять нужно ли оно вам. Задайте себе вопрос "Есть ли в компании отдельная команда, которая будет поддерживать тулинг для монорепы?". Если ответ "нет", то оно вам не надо.
https://danluu.com/monorepo/

Доброе утро!

AMP при всей своей ограниченности, всё же позволяют делать минимальные интерактивные элементы. Большая статья с описанием того как такие страницы делают в BBC. Крайне советую обратить внимание, потому как это первый нормальный гайд, который показывает как делать такие штуки.
https://www.smashingmagazine.com/2018/03/bbc-interactive-content-amp-apps-web

Команда React опять меняет публичный API. На этот раз будут запрещены методы componentWillMount, componentWillReceiveProps, componentWillUpdate. В статье показано как писать код, избегая этих методов.
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

У меня случился небольшой отпуск, и потому я сделаю перерыв. Следующий выпуск новостей будет в среду. Если вы ищите другие каналы по фронтенду, то я могу посоветовать два, которые сам читаю: https://t.me/forwebdev и https://t.me/webstandards_ru

Доброе утро! Я вернулся из отпуска и готов продолжать ежедневные подборки! На сегодня аж три большие и качественные статьи.

Статья про использование новых типов данных JavaScript: Map, Set, WeakMap, WeakSet. Описаны основные принципы работы и когда их применять.
https://www.sitepoint.com/es6-collections-map-set-weakmap-weakset/

Большой гайд для новичков по использованию геолокации. Автор шаг за шагом создает небольшое приложение показывая основные хитрости.
https://hackernoon.com/the-comprehensive-beginners-guide-to-javascript-geolocation-tracking-11f7a1bba400

Хорошая статья про формы для сбора контактных данных. Рассмотрены основные ошибки и лучшие практики. Много отсылок на различные исследования UX в этой области. В принципе, подходит для любых форм.
https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/

Доброе утро!

AMP от Google создают веб заново. Но на первый взгляд возможностей предоставляют мало. Однако это не так. В этом руководстве показано как делать простые, но визуально приятные анимации и карусели.
https://codelabs.developers.google.com/codelabs/amp-beautiful-interactive-canonical/

Сравнение 23х библиотек компонентов для React. Хорошая отправная точка, если вы ищете библиотеку для использования, но не можете выбрать среди всего разнообразия.
https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42

Электронная почта до сих пор является значимым инструментов в вебе. Но вёрстка писем это целый отдельный мир. Я нашел хороший гайд, в котором собрана подборка на другие материалы по теме.
https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4

Доброе утро!

В блоге вебкита появилось руководство по использованию ApplePay. Я всеми руками за то, чтоб сайтов поддерживающих встроенные платежные системы было больше. Намного лучше, чем вводить данные карты.
Интересный факт: в Safari есть специальный стиль для кнопки, которые делает ее кнопкой для оплаты (-webkit-appearance: -apple-pay-button;”)
https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/

Диаграмма новых lifecycle методов React.
https://twitter.com/dan_abramov/status/981712092611989509

Гайд по использованию Presentation API, где показано как выводить отдельное изображение на второй экран. Будет интересно, если делаете приложения в вебе.
https://developers.google.com/web/updates/2018/04/present-web-pages-to-secondary-attached-displays

Доброе утро!

В Firefox Nightly появился инструмент для просмотра странице в виде дерева, которое видят читалки экрана. Намного проще отлаживать доступность сайта.
https://twitter.com/hdv/status/983439670741749760

Небольшой пример как отменять уже запущенный fetch. Требуется AbortController, который пока еще не везде доступен.
https://www.loxodrome.io/post/cancelling-requests/

Не практичная, но примечательная новость. Мартин Фаулер, автор одной из самых знаменитых (для разработчиков ПО) книг "Рефакторинг" решил сделать переиздание. Примечательно, что языком для примеров выбран JavaScript (вместо Java в первом издании).
https://martinfowler.com/articles/201803-refactoring-2nd-ed.html

Доброе утро!

Safari 11.1 полон фич, которые так дано ждали. Service Workers для оффлайна, Payment Request API для платежей (надеюсь все перейдут на этот способ), font-display для изменения поведения загрузки шрифтов и много другого.
https://webkit.org/blog/8216/new-webkit-features-in-safari-11-1/

Кажется это лучший русскоязычный гайд по TDD (техника разработки через тестирование), что я видел. Автор делает игру крестики-нолики пошагово, объясняя детально все нюансы. TDD не всегда хорошо применим, но незаменим при написании сложной изолированной бизнес-логики. Поэтому как минимум стоит иметь его в своём инструментарии.
https://bespoyasov.ru/ttt-tdd/

Объяснение монад "на пальцах". Автор подошел к объяснению, начав с простых примеров и усложняя их. Будет хорошим чтением на выходные.
https://medium.com/@evinsellin/teaching-monads-slightly-differently-2af62c4af8ce

Судя по всему телеграм начнут блокировать ближайшее время (есть постановление суда).
Простейший способ заставить телеграм работать — использовать проски.
Например этот tg://socks?server=telegram%2Evpn99%2Enet&port=55655
Важно! я к этому прокси никакого отношения не имею

На сайте канала https://breakfastjs.com/ вы всегда можете найти свежие обзоры ссылок и подписаться на email рассылку (скоро первый выпуск)

Также у меня есть твиттер https://twitter.com/slonoed

update: нет, я не собираюсь бросать канал, буду продолжать писать, и надеюсь вы меня будете читать

Доброе утро!

Описание практического применения асинхронных генераторов, который появятся в Node 10 (и уже есть в некоторых браузерах). Применение заключено в том, чтобы вытаскивать данные из стримов с помощью цикла for, а не используя подписки на эвент. В виду того, что стримы скоро появятся и в браузерах — фича полезная.
http://2ality.com/2018/04/async-iter-nodejs.html

Список из трёх лучших практик для создания автокомплита, который хорошо работает на мобильных устройствах.
https://blog.algolia.com/search-autocomplete-on-mobile/

В  Electron (платформа, на которой можно писать веб-приложения для десктопа) обзавелась встроеным API для внутренних платежей. Пока привязка только к Mac App Store.
https://electronjs.org/blog/in-app-purchases

Доброе утро!

Замер скорости AMP на 50 различных сайтах. Автор показывает, что загрузка не такая уж и мгновенная, и что основной выигрыш по сравнению с оригинальными страницами за счёт ужасной оптимизации последних.
https://habr.ru/post/353256/

Статья актуальная тем, кто уже позиционирует себя как Senior Software Developer. В ней автор размышляет, что делать дальше и как расти. Ведь в какой то момент писать код более эффективно невозможно, а повышения зарплаты хочется.
https://medium.com/p/78b9956a9c66

Очень подробный гайд по созданию приложения с бекендов, построенным на AWS AppSync. Этот сервис от Амазона позволяет очень легко делать GraphQL API и мапить его на таблицы в DynamoDB. Если вам нужен будет простой бэкенд, то это довольно хорошее решение.
https://tylermcginnis.com/building-serverless-react-graphql-apps-with-aws-appsync/

Доброе утро!

Chrome 67 принес много классных фич в инструменты разработчика. Например запросы из вкладки Network теперь можно копировать в виду JS кода с fetch. В инспекторе показываются CSS переменные. Полезные улучшения вкладки Performance. И много чего ещё.
https://developers.google.com/web/updates/2018/04/devtools

Противостояние W3C и WHATWG. А на деле цирк с конями. Если раньше разработчики браузеров хоть как то договаривались с W3C, то теперь уже очевидно, что организация занимается фигнёй и её стандарты просто не работают.
https://habrahabr.ru/post/353514/

Кто-то должен был это сделать: операционная система на JavaScript. Без комментариев.
https://habrahabr.ru/post/353524/

Доброе утро!

Небольшая заметка про font-display.  После выхода Safari 11.1 единственный браузер без поддержки — IE. Так что пора уже внедрять на страницы, если вы этого не делали.
https://css-tricks.com/hey-hey-font-display/

Статья про поиску элементов и перемещению по DOM дереву без использования дополнительных библиотек. Много примеров и даже даже есть домашнее задание.
https://zellwk.com/blog/dom-traversals/

То чего вам возможно не хватало для начала работы с CSS Grids: набор лучших практик и советов по использованию. Гриды — очень мощный инструмент, который перекрывает возможности других фич CSS. И от того часто возникают вопросы как и когда его применять. Ответы вы можете найти в статье.
https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Доброе утро!

Библиотека для анимаций react-spring. Пока ещё в стадии разработки, но результаты уже неплохие. Библиотека имеет декларативный API и высокую производительность за счёт того, что рендерится вне реакта.
https://blog.usejournal.com/why-react-needed-yet-another-animation-library-introducing-react-spring-8212e424c5ce

Простой и наглядный пример как использовать CSS Grid вместо сетки Bootstrap. Проверьте поддержку в браузерах, возможно вы уже можете начать использовать гриды.
https://blog.theodo.fr/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/

В догонку ещё один хороший набор приёмов и советов по использованию CSS Grid.
https://css-tricks.com/another-collection-of-interesting-facts-about-css-grid/

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

Практичный гайд по использованию нового контекста в React. Автор показывает как сделать модальное окно, которое использует контекст как API.
https://medium.com/@BogdanSoare/how-to-use-reacts-new-context-api-to-easily-manage-modals-2ae45c7def81

Очень большой и подробный гайд по работе с GraphQL в React. Очень детально разобраны многие нюансы и даже показано как создать свой клиент GraphQL.
https://www.robinwieruch.de/react-with-graphql-tutorial/

Релиз Redux 4. Изменений совсем не много, что хорошо. Но есть и очень хороший пункт, про то, что убрали Lodash из зависимостей, который использовался всего из-за одного метода.
https://github.com/reactjs/redux/releases/tag/v4.0.0

Доброе утро!

Помимо создания новых кастомных компонентов Web Components позволяют расширить уже имеющиеся в браузерах. В этой статье показано, как можно добавить дополнительную функциональность ссылкам.
https://blog.revillweb.com/extending-native-dom-elements-with-web-components-233350c8e86a

В Webpack 4.6 добавили возможность помечать импортируемые модули для предзагрузки. Такие модули будут добавляться как link[rel=prefetch] (загрузить во время простоя) или link[rel=preload] (загрузить не блокируя отрисовку), что может ускорить навигацию.
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

Классический MS Paint сделаный на JS. Хороший пример разработки сложных интерактивных штуковин в вебе. Загляните в код, он очень аккуратный и хорошо документированный.
https://github.com/1j01/jspaint