Доброе утро!

Стабильный релиз Chrome 62. Про эту версию я писал ранее, там много интересного, но самое главное, что Payment API появился на мобилках. Плюс уже можно обкатывать вариативные шрифты на пользователях.
https://developers.google.com/web/updates/2017/10/nic62

Ну и полезно будет вспомнить, что добавили для разработчиков. Появилась работа с кешем, дебаг гридов, возможность использовать await в консоли.
https://developers.google.com/web/updates/2017/08/devtools-release-notes

Мы уже привыкли именовать CSS классы по БЭМ или другой методологии. А вот для именования областей в гридах ничего не было. Вот хорошая статья, которая предлагает несколько правил именования.
https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/

Доброе утро!

Firefox Nightly может работать с PWA на андроиде.
https://twitter.com/kennethrohde/status/920676961298649088

Перевод небольшой заметки про WebP. Кажется, уже пора задумываться об использовании, особенно тем, кто использует много графики на сайте.
https://medium.com/web-standards/webp-worth-it-fc08e230f46e

Похоже мы переходим в новый этап оптимизации сайтов. Появляется все больше браузерных API, позволяющих на ходу менять поведение, в зависимости от состояния. Представьте себе сайт, который отключает анимации, если страница на текущем устройстве работает плохо. Вот статья, которая рассказывает как работать с Pain Timing API.
https://www.sitepen.com/blog/2017/10/06/improving-performance-with-the-paint-timing-api/

Ну и напоследок: туториал по работе с GSAP (это такой фреймворк для анимаций)
https://css-tricks.com/writing-smarter-animation-code/

Хороших выходных!

Доброе утро!

Разработчики из Microsoft делают Napa.js. Это такая надстройка над v8, которую можно вызывать из ноды. Е] назначение — паралеллить сложные вычисления. Можно представить, что это более прокаченная версия воркеров.
https://github.com/Microsoft/napajs

Большая статья про серверный рендер и его масштабирование. Крайне рекомендую к прочтению, если вы используете реакт.
http://arkwright.github.io/scaling-react-server-side-rendering.html

Подборка инструментов от Paypal, предназначенных для создания подключаемых скриптов.
https://medium.com/@bluepnume/introducing-paypals-open-source-cross-domain-javascript-suite-95f991b2731d

Доброе утро!

Чеклист для проверки вашего сайта. Начиная от микроразметки и заканчивая доступностью. Хорошо всегда иметь под рукой.
https://github.com/thedaviddias/Front-End-Checklist

Забавная заметка о том как сделать модем с помощью Web Audio API
https://martinmelhus.com/web-audio-modem/

Тулза для проверки доступности от команды гитхаба.
https://github.com/github/accessibilityjs

Доброе утро!

Очень хорошая новость для всего сообщества. Mozilla привлекает Microsoft, Google и Samsung к работе над MDN. По сути это уже единственный нормальный источник знаний про фронтенд, и очень хорошо, что его собираются поддерживать крупные игроки,
https://blog.mozilla.org/blog/2017/10/18/mozilla-brings-microsoft-google-w3c-samsung-together-create-cross-browser-documentation-mdn/

Разработчики Mozilla похоже полностью окунулись в Rust. Сначала движок для CSS, теперь вот JIT компилятор. Обещают, что благодаря фичас раста будет проще добавлять оптимизации.
https://blog.mozilla.org/javascript/2017/10/20/holyjit-a-new-hope/

Потихоньку завозят видео с Chrome Dev Summit. Много про PWA. Я пока ничего толком не посмотрел, потому порекомендовать не могу.
https://www.youtube.com/watch?v=5xj4kqSFs8Q&list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

Доброе утро!

Firefox 57 перестанет работать со старыми расширениями. Среди тех расширений — Firebug. Конечно, никто им сейчас не пользуется. А когда то это был прорывной и единственный инструмент, который стал прототипом для современных инструментов разработчика в браузере.
https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug

Ещё один список, который полезно иметь под рукой: список тегов, которые можно использовать в HEAD.
https://github.com/Konfuze/HEAD

Небольшой, но подробный гайд про атрибут ALT у тега IMG. Та мелочь, про которую часто забываем.
https://axesslab.com/alt-texts/

DevTools в Chrome 63. Наконец то можно эмулировать пуши в браузере. Те, кто работал с пушами, знают какая боль была, при необходимости отправить тестовый пуш.
https://developers.google.com/web/updates/2017/10/devtools-release-notes

Страница, на которой можно поиграться с разными вариативными шрифтами. Это нереально круто.
http://www.axis-praxis.org/

Доброе утро!

Сегодня я хочу обратить ваше внимание на очень важную проблему. Проблему адаптации сайтов для людей с плохим зрением и слепых. Со стороны это выглядит как огромное вложение времени в обучение и процесс разработки. Но на деле нужно просто следовать нескольким правилам. Вот отличная русскоязычная шпаргалка, которую обязательно стоит прочитать.
http://weblind.ru

Очень хороший гайд по использованию z-index.
https://hackernoon.com/my-approach-to-using-z-index-eca67feb079c

Релиз Node 8.8. Поддержка http2 теперь без флага.
https://nodejs.org/en/blog/release/v8.8.0/

Wiki.js — движок для вики страниц на ноде.
https://wiki.js.org

Доброе утро!

Видео (30 мин) про современные подходы к ускорению загрузки страниц.
https://www.youtube.com/watch?v=_srJ7eHS3IM

Небольшой гайд по созданию кастомных элементов. Может пригодиться, если вы делаете виджет или библиотеку и не хотите тянуть лишние зависимости.
https://ayushgp.github.io/html-web-components-using-vanilla-js/

Очень крутой тайловый менеджер на React.
https://github.com/palantir/react-mosaic

Система управления контентом (CMS), написаная на Node (поверх Koa). Позволяет быстро собирать REST API. Подойдет, когда не хочется писать все самому, но и отдаваться на откуп вендору (аля Firebase) тоже не очень.
https://strapi.io

Доброе утро!

CSS Houdini — это способ писать полифилы для CSS на JS. Вот есть сайт с подборкой действительно крутых фич. Например изменить стиль чекбокса. Не сделать другой элемент поверх, а действительно перекрасить галочку. Для того, чтобы заработало нужен последний хром, и включенный флаг “Experimental Web Platform features” в chrome://flags/
http://lab.iamvdo.me

Язык разметки HEML для генерации HTML для мейлов. Поддерживает работу из Node кода. Если работаете с мейлами, обязательно зацените.
https://heml.io/

Тут на глаза попалась очередная статья про зловредные майнеры на сайтах. Думаю, что следующим этапом монетизации веба станет “белый” майнинг. Когда пользователю при входе дают выбор: смотри рекламу, или позволь легально майнить криптовалюту.
https://xakep.ru/2017/10/30/coinhive-everywhere/

Еще немного подробностей по использованию Payment API.
https://medium.com/dev-channel/how-payment-methods-work-in-the-payment-request-api-54b8f2ee03c5

Доброе утро!

Релиз SVGO 1.0.0. Напомню, что тулза позволяет очень круто оптимизировать SVG, особенно экспортированные из редакторов. Это один из тех инструментов, которые всегда нужно иметь под рукой.
https://github.com/svg/svgo/releases/tag/v1.0.0

Уже скоро выйдет стабильная версия Chrome 63. А вместе с ним и новая версия v8.
Самое интересное это появление Promise.prototype.finally. С другой стороны, если вы используете async/await, то уже можете использовать try/catch/finally.
https://v8project.blogspot.dk/2017/10/v8-release-63.html

За последние пару месяцев прошел все стадии от ненависти до любви к CSS in JS. Коллега пилит Styletron: либу, которая заточена под скорость. Там очень интересный способ генерации конечного CSS. В остальном те же плюсы и минусы, что у других подобных штук.
https://github.com/rtsao/styletron

Доброе утро!

Angular 5. Изменений много, обратная совместимость сохранена.
https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Через пару дней начнутся продажи Iphone X. Из-за нестандартного экрана пришлось придумывать способ узнать в CSS размеры “безопасной” области. Неплохой гад на тему:
http://css-live.ru/articles/ponimanie-vyuporta-webview-v-ios-11.html

На сегодня Dan Fabulich — мой герой. Он посмотрел все видео с Chrome Dev Summit и составил сжатый пересказ всех анонсов и небольшие ревью к каждому видео.
https://redfin.engineering/i-watched-all-of-the-chrome-dev-summit-2017-videos-so-you-dont-have-to-9b62a593c3cb

Ну и факультатив на сегодня: предложение ввести новый код ответа HTTP — 103 для лучшей работы с link-preload.
https://datatracker.ietf.org/doc/draft-ietf-httpbis-early-hints/?include_text=1

Доброе утро!

Apple предлагают развивать <template> и добавить в него возможность интерполяции данных. По сути может появится встроенный в браузер шаблонизатор, который будет хорошо оптимизирован. Затея отличная.
https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md

Node.JS 8.9 получила статус LTS. А значит можно спокойнее использовать в продакшене.
https://medium.com/the-node-js-collection/news-node-js-8-moves-into-long-term-support-and-node-js-9-becomes-the-new-current-release-line-74cf754a10a0

Как сделать TodoMVC без JS. Чисто академический, но очень крутой пример того, что можно сделать в браузере без JS.
http://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html

Хороших выходных! До связи в понедельник, в 9:00 по Москве.

Доброе утро!

В субботу прошла конференция Web Standards Days. Запись и описание докладов по ссылке. Особенно интересно про Custom Element.
https://wsd.events/2017/11/04/

Тулза, которая позволяет перегнать SVG файл в React component.
https://github.com/smooth-code/svgr

Гриды позволяют сделать очень крутую фичу — правильно работающие тайлы. Посмотрите пример и подвигайте браузер.
https://codepen.io/slonoed/pen/zPrEOE

Компилятор F# в JS. Сам язык мне очень нравится, но вот отсутствие крупных компаний, которые бы его использовали пугает.
http://fable.io

Доброе утро! Вчера совсем забыл, что в РФ выходной (:
Надеюсь никого не разбудил.

Хорошая заметка про grid vs flexbox
https://aerolab.co/blog/flexbox-grids/

Подборка библиотек и инструментов для работы с анимациями
https://habrahabr.ru/post/341554/

Сравнение выигрыша в размере для вариативного шрифта. В некоторых случаях до трети размера.
http://stuff.djr.com/gimlet-vf-size-test/

Довольно милая библиотека для графиков
https://frappe.github.io/charts/

Доброе утро!

Node.js 8 принесла большое количество фич. А вот девятая версия больше про внутренний рефакторинг. Использовать ее нет практического смысла.
https://nodejs.org/en/blog/release/v9.0.0/

import.meta — новая часть модулей, которая предназначена упорядочить уже имеющуюся метаинфу о модулях
http://2ality.com/2017/11/import-meta.html

Хороший начальный гад по http2
https://dexecure.com/blog/how-to-create-http2-static-file-server-nodejs-with-examples/

И вот история как BBC переключил часть статики на http2
https://medium.com/bbc-design-engineering/http-2-is-easy-just-turn-it-on-34baad2d1fb1

Доброе утро! Сегодня очень крутая подборка статей. Каждую можно добавлять в закладки.

Таблицы в вебе используются редко именно как таблицы для вывода данных. Однако, если вы столкнетесь с такой задачей, то вот детальный разбор того как делать таблицы правильно.
https://alistapart.com/article/web-typography-tables

Интересный трюк. Если уменьшить контраст jpeg изображения, то оно будет меньше весить (до 30%). Потом можно вернуть контраст с помощью CSS фильтра.
https://css-tricks.com/contrast-swap-technique-improved-image-performance-css-filters/

Очень редко вижу и использую в CSS функцию “attr”. А между тем у нее довольно много хороших применений.
https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

Доброе утро!

Лучшие практики при работе с Node.js. Весьма полезный список.
https://github.com/i0natan/nodebestpractices

Сессия вопросов и ответов с техдиром NPM. Больше всего меня заинтересовало упоминание новой тулзы “npm ci”, которая должна позволить ускорить установку пакетов при сборке.
https://hashnode.com/ama/with-npm-cj9hbs5pw01hcc0wuqm3tatci

Ни разу не использовал aspect-ratio в медиа выражениях. А оказывается можно делать интересные штуки с его помощью
https://www.chenhuijing.com/blog/aspect-ratio-media-queries/

Если захочется чего то позабористей на выходных, вот статья про лямбда исчисление
https://medium.com/@ahlechandre/lambda-calculus-with-javascript-897f7e81f259

Доброе утро!

В React 16 появились порталы. Вот интересное применение: рендерить компонент в другом окне.
https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

Новые значение для text-decoration позволят обозначить некоторый текст как текст с ошибками и браузер подсветит такой текст (обычно красная волнистая линия).
https://drafts.csswg.org/css-text-decor-3/#text-decoration-line-property

Вот этот код делает именно то, что нужно: убирает концевые пробелы со всех строк в массиве
addressParts.map(Function.prototype.call, String.prototype.trim)
Почему так:
http://blog.bloomca.me/2017/11/08/the-most-clever-line-of-javascript.html

Доброе утро!

Статья про то как Graphql легко позволяет добавить кеширование и трассировку запросов
https://dev-blog.apollodata.com/the-graphql-stack-how-everything-fits-together-35f8bf34f841

Исчерпывающий гайд по построению адаптивных таблиц. Крайне полезно.
http://adrianroselli.com/2017/11/a-responsive-accessible-table.html

Инструмент для быстрого подбора bootstrap компонентов, простой, но довольно удобный, когда много работаешь с бутстрапом
https://hackerthemes.com/bootstrap-buffet/#!

Доброе утро!

Познавательное видео про историю JavaScript. Откуда взялось и как развивалось. Практической пользы нет.
https://www.youtube.com/watch?v=a2e3cAc4Ux4

Подборка примеров хорошего UI в живых приложениях
https://www.reallygoodux.io/

Запись с Я.Субботника. Все по делу, смотреть интересно.
https://www.youtube.com/watch?v=RWo53WDVDo8

Библиотека для биндинга данных в реакте. Насколько хорошо это работает сказать не могу. Выглядит интересно.
https://github.com/Volicon/NestedLink