Доброе утро! Сегодня про CSS.

Единица измерения "fr" в CSS. Что такое и как использовать. + Перевод.

Используем CSS переменные правильно.

Мнение о том, что лучше встривать SVG в код звучит вполне разумно.

Видео: Кому нужны флексы. Очень советую подписаться на ролики академии, особено шорты — пятиминутные ролики обёясняющие какую либо технологию.

Доброе утро!

Подробный список подводных камней в service worker и как их обойти.

Хороший цикл статей о валидации форм. Ссылки на остальные в конце статьи.

Opera Neon 46. Ничего примечательного, кроме апдейта на 59 хромиум.

Большая статья описывающая правильный подход к роутингу в реакте. Если у вас сложное приложение и надоело бороться с react-router, то будет очень полезно. Там же есть ссылка на несколько хелперов для построения роутинга.

В nodejs найдена некая уязвимость, апдейт будет выпушен ближайшие недели, рекомендуют обновиться всем.

Заметка в блоке Uber, про новый мобильный сайт на Preact. Уложилиси в 50KB.

Доброе утро!

npm пакеты могут быть скомпрометированы из-за слабых паролей. Есть выжимка на русском.
Представьте проблему: вы сделали npm install bable, а он подтянул пакет, который при запуске зашифрует файлы или отправит их по сети куда либо. Потому не забывайте про докер (или виртуалки).

Заметка о минусах AMP. + перевод. Кратко: много мелких минусов, лучше делать сайты быстрыми обычными технологиями.
Мне кажется, что AMP вредная технология, но есть подозрение, что она будет захватывать всё больше рынка.

Тестирование с Headless Chrome, Karma, Mocha, Chai — гайд из блога гугла.

Sonar - линтер для сайтов. Проверяется различный проблемы на живом сайте.

Можем ли мы перестать упаковывать код?. Качественная статья сравнивающая подходы со сборкой кода в бандлы и загрузкой модулей отдельно.

Почему Reddit выбрали TS для разработки. В заметке только сравнение с Flow.

Как сделать переиспользуемый компонент списка https://goo.gl/VBW32u
UI Kitten — набор готовых компонентов для React Native.

Доброе утро!

Гайд фронтенд инженера. Подробная статья для быстрого входа в экосистему реакта.

TC39 — комитет, занимающийся развитием JS. В этой статье можно узнать как они работают и какие фичи планируют выпустить.

История веба: Противостояние SOAP и REST.

github.com/acdlite/recompose/ — набор высокоуровневых функций для работы с реактом. Проще всего понять, заглянув в примеры. Есть курс на egghead.

Доброе утро!

Я уже говорил, что считаю reasonml перспективной технологией для веба, но сейчас сказывается нехватка документации и туториалов. Но постепенно они начинают появляться. Вот, например, хороший туториал "ваше первое приложение" на Reason React.

Заметка об использовании background fetch API. Пока меня пугает возможность того, что сайт, даже после ухода со страницы, будет скачивать файлы. Особенно неприятно это может быть с мобильным интернетом.

React-UWP — набор реакт компонентов в стиле Microsoft UWP (это как материал дезайн, только от МС).

Хороший гайд по лучшим практикам async/await. По мне так async/await — лучшее, что случилось с синтаксисом JS. Нужно пользоваться этим инструментом.

Rekit 2.0 выглядит как правильно сделанное "программирование мышкой". Если надумаете использовать помните, что в нестандартных проектах такие решения обычно добавляют боли больше чем пользы.

Лара Крофт в браузере. Почему бы и нет?)

Я продолжаю переводить статьи про историю веба. "Окно в кафе" не совсем техническая, но познавательная. Не судите строго, пятница же (:
Хороших выходных!

Доброе утро!

В Prettier 1.5 появилась поддержка GraphQL, CSS-in-JS и JSON. Если вы до сих пор не используете prettier, то стоит начать. Позволяет сократить дискуссии на тему кодстайла в ревью. Может код получается не такой как вы хотите, но он детерминирован.

Ink позволяет использовать реакт для консольных "интерфейсов". По сути: ещё одна вариация react-blessed.

Вышла версия 1 GatsbyJS. Это генератор статических сайтов с приделаным реактом. Тот случай, когда хочется статический сайт, а hugo и jekyll уже недостаточно.

Модель для вебпака позволяющий делать tree shaking в commonjs модулях. Он удаляет неиспользуемые поля module.exports, позволяя UglifyJS плагину вырезать неиспользуемый код.

Доброе утро!
По техническим причинам сегодня подборки не будет.

Но есть списк различных каналов про фронтенд разработку https://github.com/andrew--r/channels

Конкретных каналов посоветовать не могу — сам пока не посмотрел.

Доброе утро!

Гайдлайн по работе с https://github.com/wearehive/project-guidelines/blob/master/README.md
От гита до кодстайла. Автор не просто говорит как надо делать, но обосновывает почему так надо.

Смотрите какая крутая штука
http://gpu.rocks/
Позволяет делать вычисления на gpu, используя нормальный синтаксис.

Статья на css-tricks про различные способы анимировать элементы:
https://css-tricks.com/repeatable-staggered-animation-three-ways-sass-gsap-web-animations-api/

Доброе утро!

К сожалению неделя выдаётся напряженной и я не успеваю просматривать всё, что есть. Но подборки постараюсь делать.

Encrypted Media Extensions, API позволяющая реализовать DRM защиту контента в браузерах ближе на один шаг. Очень спорная штука, но это тот случай, когда согласиться придётся. Иначе вендоры просто сделают по своему, плюнув на комитет и стандарты. Подробнее о принципах работы EME тут.

Вся движуха с AMP и похожими подходами в фейсбуке и телеграме похоже может поменять веб.

Как превратить ваш сайт в PWA. Базовый туториал, с которого можно начать.

На подходе новые фичи regex в хроме. Именованные группы будут очень полезны, стоит взять в обиход.

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

Подробности внутрненних изменений в reactjs, связанных с переходом на fiber.
Довольно низкоуровневые подробности, будет полезно тем, кто делает тяжелые приложения.

Желаю хороших выходных ;)

Доброе утро!

Теперь вместе с NPM поставляется утилита npx. Упрощает работу с CLI утилитами и многое другое. Более подробно описано в этой статье.

Видео про использование JS внутри Uber. В основном про высокоуровневые вопросы разработки и масштабирования.

Как сгенерировать изображение внутри service worker. Так как канваc недоступен, автор предлагает работать с бинарными данными напрямую. Пример хорошо показывает насколько гибким может быть веб, если копнуть глубоко.

github.com/jaredreich/pell — компактный (1kb), wysiwyg редактор

Доброе утро!

Twitter стал использовать AMP. Если вы расчитываете на трафик из твиттера, то стоит взять на вооружение.

Если размер кода критичен, а все инструменты уже использованы, то может выручить bundle-buddy. Анализирует сорсмапы и показывает дубликаты.

Или вот способ уменьшения размера страницы при помощи переименования CSS классов. Способ довольно бессмысленный, учитывая, что gzip такое хорошо сжимает. Но может пригодиться.

Крутой туториал по WebVR. Только где бы взять девайс для тестирования?

Небольшая статья об использовании гироскопа. Будет полезно как в играх, так и в приложениях. Мне понравился пример с жестом "встряхивание".

howtographql.com — туториал по graphql. Мечтаю о том, чтобы такой был для каждой новой технологии. Видео, пошаговые инструкции. Всё доступно и понятно.

Как один сайт получил 100 балов в Google Lighthouse. Напомню, что Lighthouse — это тулза для проверки качества сайтов.

native.directory — курируемая подборка react-native библиотек.

Доброе утро!

Мне всегда нравилось качество extjs фреймворка. Оказывается теперь у них есть набор реакт компонентов. Стоит от $700. Что намного меньше времени разработки набора таких компонентов и потому может быть оправдано.

Большой гайд по WebRTC. Много живых примеров с кодом.

Smashingmagazine как всегда радует подробными статьями. На этот раз рецепт создания идеального слайдера.

Доброе утро!

Видео интро в Gatsbyjs (статический генератор сайтов). Для своего сайта я использую Hugo, но Gatsby хорош интерграцией с реактом.

Разработка небольшого бекенда на nodejs теперь стандартная часть работы фронтендера. Чтобы не упустить важных деталей при разработке, используйте чеклист.

Небольшая, но полезная статья про дизайн таблиц в приложениях.

Статья, разбирающая забавную особенность JS. Хотя меня такие скрытые штуки пугают. Можно скопировать чужой код и получить проблемы.

Новость про то, как сменившее владельца расширение для хрома стало показывать рекламу. Напоминаю, что ставить расширения из стора, которые могут обновляться — довольно опасное занятие. Для себя я выбрал такой подход: расширения от крупных компаний из стора, остальное — из сырцов.

Доброе утро!

2ГИС начали использовать preact для мобильного сайта. Причина — размер и производительность.

Обзор различных инструментов для e2e тестирования.

Заметка о текущем состоянии интернационализации в JS.

Подборка примеров react-motion. Много совершенно различных примеров анимации.

Доброе утро!

Яндекс запустил сервис Радар, на котором можно посмотреть статистику по поисковым системам и браузерам в России еще трех странах. Наиболее полезным является срез по браузерам за год. ИЕ в два рази больше чем Edge, а Amigo обошел Safari. На мобильниках видно, что Самсунг браузер потихоньку ползет вверх.

Статья про плавный переход на гриды.

Список новых фич в инструментах разработчика в Хроме 61. Они наконец сделали, что в панели перфа скрол вниз действительно делает скрол вниз, а не масштабирование.