Доброе утро!

Формат stories (как в инстаграме) настолько популярный, что пихают его везде, где только можно. Вот теперь и гугл в выдаче будет показывать нечто похожее для AMP сайтов.
https://www.searchengines.ru/amp-stories.html

Еще одна реализация Material дизайна в React компонентах. Автор обещает хорошую производительность.
https://jamesmfriedman.github.io/rmwc/

И первая (которую я вижу) реализация Material на Vue.
https://vuetifyjs.com/en/

Для меня Ember — довольно удивительная штука. Когда другие фреймворки просто забивают на поддержку (привет Angular 1), Ember уверено, и главное, консистентно развивается. Вышла третья версия с множеством изменений. Я не слежу за экосистемой Ember, потому не могу сказать, что из этого хорошо, а что плохо.
https://emberjs.com/blog/2018/02/14/ember-3-0-released.html

Доброе утро!

Релиз Babel 7. Там много изменений как в поддержке новых фич языка, так и в самом инструменте. Со стороны языка для меня наиболее интересен оператор “?.” который позволяет избавится от длинных цепочек проверок вложенных свойств.
Вообще Babel — удивительный инструмент. Вместе с Webpack они сильно поменяли процесс разработки сложных приложений на JS, убрав боль поддержки старых браузеров и введя в ход постепенный апгрейд на новые версии без изменения кода. Хорошо, что они развиваются и имеют четкий план на будущее.
https://medium.freecodecamp.org/8c1ade684039

Ну и к слову о сборщика: вот статья со сравнением популярных инструментов. А в заголовке вопрос “конфигурировать или не конфигурировать?”. Так вот ответ просто: если ваш инструмент не имеет тонкой настройки, может стартанете вы быстро, но потом проклянете пытаясь сделать чтото, что разработчик инструмента не предусмотрел из коробки. Мой выбор: Webpack и Make.
https://dev.to/netlify/choosing-a-javascript-build-tool-to-config-or-not-config-2ia8

Отвлечемся от технического: обзор зарплат фронтендеров. Комментировать не буду, смотрите сами.
https://vc.ru/33311-rynok-zarplat-frontend-razrabotchikov

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

Очень хороший туториал по созданию композиции страницы на гридах. Сделано пошагово и очень понятно.
https://medium.com/p/fca9e956e725

В Flow сильно улучшили вывод ошибок, сделав поиск проблем в коде намного удобнее. Явно равняются на Elm, где в этой области проделана большая работа.
https://medium.com/flow-type/better-flow-error-messages-for-the-javascript-ecosystem-73b6da948ae2

Книга по новым и ожидаемым фичам JS. Много примеров. Часть этих фич, вы скорее всего уже исопользуете благодаря Babel.
http://exploringjs.com/es2018-es2019/toc.html

Доброе утро!

Сперва о главном: не обновляйтесь на npm 5.7.0. Там очень стремный код, который меняет права директорий на линуксах. Тред с багом вообще превратился в чад и угар. В целом хорошее правило: ждать недельку после релиза.
https://github.com/npm/npm/issues/19883

Ну и чтоб далеко не ходить: новые фичи в этой версии npm. Добавили автомержилку лок файлов. Раньше при конфликтах проще было удалить и установить зависимости заново. Добавили команду npm ci, которая просто устанавливает зависимости, указанные в package-lock.json и не пытается выбрать свежие версии. Это позволяет ускорить установку от двух до десяти раз. В остальном — багфиксы.
http://blog.npmjs.org/post/171139955345/v570

Вот такая небольшая заметка про обрезку текста, если он не помещается в контейнер. Ничего нового, но повторение не помешает ;)
https://assortment.io/posts/handling-long-titles-with-truncation
Подписчик канала добавляет важную деталь: нужно добавлять title="..." с тем же содержимым, что и в заголовке, чтобы была хоть какая-то возможность его прочитать удобно (по ховеру)

Доброе утро!

Похоже, что начиная с версии 16.3 React получит новый API для работы с контекстом. В этой статье показан простейший пример: использование контекста для пробрасывания значения темы стилей.
https://jwheatley.co/the-future-of-state-in-react/

Наконец то хорошая статья про использование асинхронных генераторов. Автор создает Drag&Drop компонент и использует генераторы для обработки событий. Код местами выглядит страшно, но само применение интересно (учитывая, что это нативная фича языка).
https://medium.com/dailyjs/decoupling-business-logic-using-async-generators-cc257f80ab33

Есть такая проблема, как дупликация кода. Оказывает, решать её можно во вполне автоматическим (ну почти) режиме. В статье описание какие инструменты использовать и как для того, чтобы найти дупликаты в JS и CSS.
http://elijahmanor.com/js-copypaste-detect/

Доброе утро!

Андрей Романов проделал огромную работу и собрал различные статьи про опыт использования различных библиотек и подходов. Очень советую добавить в закладки и периодически читать статьи по ссылкам.
https://github.com/andrew--r/frontend-case-studies

"Что Google AMP значит для JavaScript сообщества?". Автор показывает интересную точку зрения. AMP родился из-за того, что сообщество не смогло договориться о нормальном использовании JS и Google был вынужден ограничить разработчиков. Но автор предлагает не только бороться с AMP как со вторым вебом, но и учится у него.
https://molily.de/amp/

В Webpack 4 появилась новые настройки: mode и optimization, которые позволяют включать в режиме разработки всякие полезности, а в продакшене оптимизировать по различным параметрам.
https://medium.com/p/5423a6bc597a

Доброе утро! Сегодня подборка из трёх отличных статей.

В CSS добавляется всё больше фич, что делает его пригодным для атак различного рода. Автор рассматривает разные векторы атаки при подключении вредоносного CSS. Это ешё одно напоминание о том, что нужно следить за всеми внешними ресурсами на вашем сайте.
https://jakearchibald.com/2018/third-party-css-is-not-safe/

Хорошая статья, описывающая практический опыт использования вариативных шрифтов. Поддержка браузерами пока не очень хороша (~60%), но со временем такие шрифты захватят веб.
http://css-live.ru/articles/kak-ispolzovat-variativnye-shrifty-v-realnom-mire.html

Большой гайд по использованию Web Bluetooth. а мой взгляд использование BT устройства может открыть для веба огромное количество возможностей. Хорошо, что появляются статьи по разработке.
http://jem-space.ru/nachinaiem-razrabotku-s-pomoshchiu-vieb-bluetooth-i-proghriessivnykh-vieb-prilozhienii-kontrol-mira-s-poddierzhkoi-bluetooth-s-komfortom-intiernieta/

Доброе утро!

Подборка небольших сниппетов CSS с объяснением принципа работы. Отличный способ обучения.
https://atomiks.github.io/30-seconds-of-css/
Плюс перевод https://habr.ru/p/350160/

Одна из проблем использования GraphQL, который видно снаружи — это возможность атаки за счет тяжелых запросов. Это особенно актуально, для сервисов, где оплата идет за использованное время процессора (как AWS Lambda). В статье рассмотрено несколько приёмов, которые позволят защитить себя от злоумышленника.
https://dev-blog.apollodata.com/securing-your-graphql-api-from-malicious-queries-16130a324a6b

Библиотека для рисования на канвасе с поддержкой пользовательских эвентов. Работает довольно быстро, а главное, что API выглядит очень хорошо.
https://konvajs.github.io/

Доброе утро!

Оказывается поисковый робот Google использует старую версию Chrome для анализа страницы. А это значит, что во время рендера не будут работать некоторые фичи, например кастомные свойства. Это значит, что для робота ваш сайт может оказаться “сломаным”, что повлечет понижение в выдаче.
https://twitter.com/ebidel/status/968989651888295936

В v8 появился механизм для отслеживания утечек памяти. Теперь в инструментах разработчика будут видны структуры данных из C++. Это позволить проще отлаживать утечки, даже если они находятся в других фреймах.
https://v8project.blogspot.dk/2018/03/tracing-js-dom.html


Реализация Container Queries при помощи ResizeObserver. Выглядит очень здорово. Автор заявляет, что работает быстро, но замеров не показывает.
http://css-live.ru/javascript/otzyvchivye-komponenty-reshenie-problemy-vyrazhenij-ot-kontejnera.html

Доброе утро!

Сегодня не классической подборки. Вместо этого я расскажу, откуда беру свежие новости для BreakfastJS.
У меня стоит агрегатор, который следит за популярными twitter аккаунтами, email рассылками и каналами. И оттуда вытаскивает все ссылки. Далее по ссылкам ходит парсер и достаёт описания с сайтов. Всё это складывается в БД.

Периодически отдельный процесс ходит в БД, выгребает свежие записи и формирует html страницу, которую вы можете увидеть сами тут https://breakfastjs.com

Когда у меня появляется свободная минута, я читаю получившуюся подборку, удаляю мусор, а к интересным добавляю своё ревью. Подборку таких ссылок вы можете видеть на этой странице https://breakfastjs.com/review

Ну а вечером я сажусь и выбираю самое интересное, чтобы утром у вас было что почитать 😊

И если вам мало утренней подборки, вы всегда можете зайти на сайт канала и найти что нибудь интересное для себя.

Доброе утро!

В Nginx добавили поддержку push для HTTP/2. Это значит, что можно отправлять браузеру ресурсы ещё до того как он их запросит. Это могут быть, например, картинки или файлы стилей. Большинству такая оптимизация не к чему, а тем к у кого вопрос загрузки критичный будет полезно.
https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/

Статья в которой автор показывает способы дебага кроме console.log(). Там много ссылок на другие статьи про дебаг JS приложений, по которым можно походить.
https://hackernoon.com/please-stop-using-console-log-its-broken-b5d7d396cf15

Довольно интересный инструмент: конвертирует Sketch файлы в React компоненты. При этом импортируемый компонент имеет различные биндинги, и будет отзываться на изменение свойств. Но как и все прошлый попытки, работает хорошо только на базовых примерах.
https://pagedraw.io/

Доброе утро!

На этой странице множество на вид простых картинок. Но если откроете инспектор, то увидите, что каждая картинка сделана лишь одним дивом, и никаких изображений внутри нет. Отличная демонстрация возможностей CSS.
https://a.singlediv.com/

Мне всегда Атом казался очень медленным редактором, но вот и его создатели признали это и начали делать новый редактор, в котором на JS будет работать только отображение, а внутренности работать на Rust.
https://github.com/atom/xray

Небольшой, но крайне полезный сервис для анализа шрифтов.
https://fontdrop.info/

Доброе утро!

На прошлой неделе показали будущее развитие React. Рендеринг хотят сделать асинхронным, для чего в 16й версии перешли на новую архитектуру внутри (fiber). Это значит, что отрисовка сложных деревьев не будет блокировать страницу. А главное это будет работать из коробки. Так же планируют добавить фичу для “придержания” рендера пока данные не будет готовы. Такое уже есть и вдругих фреймворках, а в реакте было реализовано на уровне роутера.
https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

Хорошая статься, разбирающая работу Math.random(). Будет особенно интересно читать, если раньше вы думали, что эта функция генерирует случайные числа.
https://medium.com/@frontman/случайные-числа-не-случайны-252e08e60828

Большая и очень качественная статья про разработку одного из самых сложных типов продуктов в вебе — текстового редактора. Описано очень много подходов и трюков, многие из которых можно применять и в разработке других приложений.
https://habrahabr.ru/company/oleg-bunin/blog/350252/

Доброе утро!

Релиз Chrome 65. Небольшие, но приятные новшества. Свойство display:contents, которое может сильно упростить верстку с флексами. CSS Paint API (одна из частей Houdini) позволить из JS создавать кастомные изображения для CSS (например для бордеров). Ещё добавили Server timing API, который позволяет от сервера отправить инфу для анализа производительности на клиенте. Штука спорная, важно следить, чтоб не утекли секреты.
https://developers.google.com/web/updates/2018/03/nic65

Меня довольно часто спрашивают, как учить JS, есть ли какой то гайд, ведь для новичка информации везде очень много. У меня такого гайда нет, но вот неплохой англоязычный вариант. Ценность он представляет тем, что там много хороших ссылок и они разбиты на несколько категорий: читать, смотреть, слушать, делать.
https://css-tricks.com/javascript-learning-landscape-2018/

На этом сайте собраны различные вариативные шрифты. Там же можно покрутить настройки и посмотреть как шрифты реагируют. Это очень круто и за вариативными шрифтами будущее веба и типографики.
https://v-fonts.com/

Доброе утро!

Веб разработка делает новый круг и снова в моде статические сайты. Тут даже придумали “современную архитектуру” и назвали JAMstack. Пока на сайте из интересного — примеры с описанием технологий.
https://jamstack.org/

Ссылка от читателя Александра Майорова. Канал куда публикуются выпуски подкастов о фронтенд тематики.
https://t.me/itradiostream

Вчера я писал про то, что в новом Chrome появилась частичная поддержка Houdini (API, которое позволит создавать кастомные CSS свойства). На дела за флагами скрывается много больше интересного и можно попробовать уже сейчас. И вот очень хорошее пошаговое интро для этого.
https://codersblock.com/blog/say-hello-to-houdini-and-the-css-paint-api/

Доброе утро!

Никогда не задумывался над тем, что можно анимировать свойство content в CSS и получить слайдшоу на одном диве. Это и другие интересные подходы к анимации в статье по ссылке.
https://medium.com/p/80bbcc3c739d

Cytoscape — библиотека для рисования и анализа графов. Использует canvas. Содержит огромное количество фич, в том числе разные раскладки. Из коробки можно строить очень сложные графики с гибкой кастомизацией. Аналогов ей я не нашел.
http://js.cytoscape.org/

А вот это уже немного страшно. С помощью юникода в JS можно "спрятать" дополнительные символы в именах полей. То есть копипаста с какого нибудь сайта может оказаться атакой, даже если на вид код выглядит нормально.
https://www.stefanjudis.com/blog/hidden-messages-in-javascript-property-names/

Доброе утро!

Пример использования CSS свойства clip-path, которое задает зону отображения элемента, обрезая его по заданному контуру. По ссылке — живой пример.
https://css-tricks.com/notched-boxes/

Качественное и подробное руководство (как и всегда на smashingmagazine) руководство по созданию статического сайта с помощью шаблонизатора Nunjucks.
https://www.smashingmagazine.com/2018/03/static-site-with-nunjucks/

Инструмент для удаления неиспользуемых стилей. С такими надо быть очень аккуратными и понимать, что вы делаете, иначе можно удалить стили, которые подключаются каким либо неявным способом. Хороший способ проверить является ли стиль неиспользуемым: вставить пиксель в бэкграунд и смотреть статистику запросов.
https://github.com/uncss/uncss

Доброе утро!

Подробности работы механизма для предотвращения трекинга в Safari. Если вы трекаете пользователей между разными доменами, то информация к размышлению.
https://webkit.org/blog/8142/intelligent-tracking-prevention-1-1/

Результаты большого опроса на Stack Overflow. Много разной инфы: технологии, зарплаты и прочее.
https://insights.stackoverflow.com/survey/2018/

Перевод подробной и крайне полезной статьи о том как поисковики (Гугл в частности) индексируют страницы, построенные динамически. Если контент сайта должен быть в поисковике, то очень важно не допустить ошибки, которые могут его выкинуть из индекса.
https://habr.ru/p/350976/

Кнопка — один из основных интерактивных элементов на странице. И потому важно, чтобы они давали понятный фидбек при использовании. Эта небольшая статья рассматривает основные принципы и ошибки в дизайне кнопок.
https://cloudfour.com/thinks/designing-button-states/

Доброе утро!

Мне нужна ваша помощь в определении дальнейшего развития канала. Я сделал форму с тремя вопросами, которая займет у вас пару секунд.
https://goo.gl/forms/TCvN1uV0KDLCHnWK2

Очень хорошо сделанная библиотека для создания интерактивных туториалов прямо на странице. Чтобы понять, лучше посмотреть демо.
http://kamranahmed.info/driver

Команда Linkedin решила посмотреть на каком фреймворке сайт будет работать быстрее: Preact или Glimmer. Разница незначительна. Довольно странно видеть такие метрики, учитывая, что самим линкедином пользоваться невозможно совсем не из-за скорости загрузки.
https://engineering.linkedin.com/blog/2018/03/how-we-built-the-same-app-twice-with-preact-and-glimmerjs

Доброе утро!

Набор трюков, которые ускоряют JS. Это про v8, но многое будет актуально и для других движков. Однако, не забывайте, что оптимизация ради оптимизации — зло. Сначала сделайте замеры и убедитесь, что есть проблема, а потом уже оптимизируйте.
http://voidcanvas.com/javascript-performant-coding-tips/

В Chrome добавили Clipboard API, который работает только на HTTPS сайтах и требует разрешения пользователя. Зачем его использовать, если есть execCommand? Его использование более удобно (не надо создавать скрытое поле ввода) и асинхронно. К тому же в будущем мы увидим запрет на использование execCommand.
https://developers.google.com/web/updates/2018/03/clipboardapi

Небольшой гайд по CSS Grids, с которого можно начать знакомство с этой замечательной фичей.
https://medium.com/p/ebef540f733b