Доброе утро!

Убер релизнул набор компонентов для рендера на WebGL2
http://uber.github.io/luma.gl/

С небольшим перевесом в голосовании DRM защиту внесли в стандарт W3C
https://boingboing.net/2017/09/18/antifeatures-for-all.html

Платежи теперь тоже почти везде
https://www.w3.org/blog/wpwg/2017/09/14/payment-request-api-now-being-implemented-in-all-major-browsers-advances-on-the-recommendation-track/

Шпаргалка по верстке писем в 2017м году
https://www.campaignmonitor.com/css/

Chrome будет автоматически редиректить на https при использовании .dev доменов
https://ma.ttias.be/chrome-force-dev-domains-https-via-preloaded-hsts/

Chrome 62. Большая фича: получение значения качества сигнала. То есть приложение может на лету адаптироваться к плохому интернету. Payment API теперь доступен в IOS, вариативные шрифты, стриминг изображениея, 4х и 8ми значные HEX цвета и многое другое
https://blog.chromium.org/2017/09/chrome-62-beta-network-quality.html

Safari 11. WebAssembly, P2P WebRTC, Media Capture API, вариантывный шрифты. Посмотрите лучше лог:
https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html

Про вариативные шрифты и как они улучшат нашу жизнь (когда нибудь)
https://www.smashingmagazine.com/2017/09/new-font-technologies-improve-web/

Короткое, но полезное видео про дебаг ноды
https://www.youtube.com/watch?v=Xb_0awoShR8

Браузеры всё сильнее закручивают гайки для http трафика, но не забывают про безопасность https. Небольшая заметка про ошибки https в хроме.
https://threatpost.ru/whats-triggers-https-chrome-browser-warnings/22394/

Хороших выходных! Встретимся в понедельник, в 9:00

Начинаем новую неделю!

Только ленивый про это не неписал, но Фейсбук одумался и перелицензировал свои библиотеки (а главное React) под лицензией MIT. Это показывает, что сообщество дейтсвительно работает.
https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/

Тут coffeescrpt откопали непонятно зачем.
http://coffeescript.org/announcing-coffeescript-2/

Шпаргалка по современному JS
https://github.com/mbeaudru/modern-js-cheatsheet

Либа для поиска пути в графе. Мало кому пригодится, но производительность впечатляет.
https://github.com/anvaka/ngraph.path

Дополненная реальность потихоньку проникает в веб. Репозиторий и экспериментами в этой области.
https://github.com/jeromeetienne/AR.js

Доброе утро! На сегодня немного (или много) чтения.

Официальный гайд по верстке дл iPhone X. Как и ожидалось выглядит грустно. А вот концепция констант очень крутая. Надеюсь другие браузеры быстро подхватят.
https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Годная статья про состояние веба и как его мониторить. Примеры, практики, и прочее. Очень советую ознакомиться.
https://medium.com/@fox/talk-the-state-of-the-web-3e12f8e413b3

Статья "код с типа или без" и "TS vs Flow". Но хоть статья и спорная, есть цифры и хорошие доводы.
https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/

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

React 16. Теперь из рендера можно возвращать массивы и строки. Обработка ошибок рендера. Появились порталы — возможность рендерить в DOM элемент вне дерева реакта. Ускорился серверный рендер и уменьшился размер бандлов. Главное, что теперь реакт перешел на новую архитектуру (fiber), которая позволит в слдующих релизах сильно улучшить производительность. И как писал вчера, теперь реакт под MIT лицензией. Какжется больше нет поводов использовать другие либы для интерфейсов.
https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html

Подробности про новый серверный рендер. Самая крутая фича, что можно рендерить прямо в стрим, отдавая пользователю html по ходу рендера.
https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67

Enzyme 3.0 (тулза для тестирования реакт компонентов). Теперь поддержка свежего реакта.
https://github.com/airbnb/enzyme/blob/master/CHANGELOG.md

Доброе утро!

Заметка о неправильных представлениях о Payment Request API.
Я довольно много пишу про PR API. Но только потому, что считаю эту технологию крайне важной.
https://medium.com/dev-channel/addressing-common-misconceptions-about-the-payment-request-api-4d0db51dae75

Generic Sensor API. Позволяет считывать положение и скорость устройства в пространстве. Пока в хроме за флагами.
https://developers.google.com/web/updates/2017/09/sensors-for-the-web

Firefox Quantum. Пока в бете, но можно уже попробовать. Наконец в ФФ появилась поддержка нескольких CPU (лучше поздно, чем никогда)
https://blog.mozilla.org/blog/2017/09/26/firefox-quantum-beta-developer-edition/

Просто забавное: имплементация винампа на JS
https://github.com/captbaritone/winamp2-js

React 16 имеет обратно совместимый API. И это при том, что внутренности были переписаны. Вот короткий рассказ как этого добились:
https://code.facebook.com/posts/1716776591680069

Node v8.6. Ничего супер важного. https://nodejs.org/en/blog/release/v8.6.0/
Однако в этой версии закрыта критичная уязвимость. Если вы используете 8.x, обновитесь на 8.6 (ветки 4.x и 6.x не затронуты)
https://nodejs.org/en/blog/vulnerability/september-2017-path-validation/

Отличная статья об оптимизации размера бандла. С метриками, тулзами и подробностями.
https://evilmartians.com/chronicles/size-limit-make-the-web-lighter

Видео про использование распознования речи в вебе.
https://www.youtube.com/watch?v=0mJC0A72Fnw

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

Доброе утро! Начинаем новую неделю.

Небольшая заметка от команды Ebay про шрифты на сайте. При первом посещении показывают системный и грузят кастомный шрифт в кеш.
http://www.ebaytechblog.com/2017/09/21/ebays-font-loading-strategy/

CTO Mozilla написал пост про грустное будущее Firefox: несмотря на то, что браузер становится лучше, Google активно вытесняет его рекламой.
https://andreasgal.com/2017/07/19/firefox-marketshare-revisited/

97 вещей, которые должен знать каждый программист. Набор годных советов, которые интересно читать.
https://97-things-every-x-should-know.gitbooks.io/97-things-every-programmer-should-know/content/ru/index.html

Разные подходы к организации файлов в React проекте.
https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed

Доброе утро! Сегодня несколько крупных статей для чтения, выбирайте понравившуюся!

Статья про доступность кастомных элементов: пока все плохо, но есть предложение указывать необходимое поведение через JS
https://medium.com/dev-channel/the-future-of-accessibility-for-custom-elements-291cfb3ffabe

Как изготовить переключатель темы со светлой на темную
https://medium.com/web-standards/a-theme-switcher-96174d95be75

Небольшой экскурс в историю: как появился, развивался и, в каком то смысле, умер фреймворк Extjs.
https://hackernoon.com/the-rise-and-fall-of-ext-js-c9d727131991

Видео про различие и работу тайпчекеров в JS.
https://www.youtube.com/watch?v=MuC8I1JBKv0

Доброе утро!

Еще одна статья про использование font-display для загрузки шрифтов
https://www.sitepoint.com/css-font-display-future-font-rendering-web/

Бага в IE позволяет считать текст в поисковой строке сторонним сайтом. Это уже за гранью.
https://3dnews.ru/software-news/959186

Небольшое сравнение скорости работы Nodejs, N-API и WebAssembly на стандартных алгоритмах. Меня заинтересовало тем, что победители разные.
https://github.com/zandaqo/iswasmfast

Перевод очень хорошей статьи про ощущение скорости работы веба. В оригинальной статье много ссылок, по которым стоит походить.
https://habrahabr.ru/post/338598/

Скрипт, который позволяет делать "размазанные" SVG варианты картинок для заглушек
https://github.com/technopagan/sqip

Доброе утро!

Эдди Османи выпустил сайт-книгу про оптимизацию изображений. Она большая, но определенно стоит того, чтобы прочитать. Внутри много инфы про то как работает сжатие изображений, какие различия в форматах, описываются инструменты, методики доставки изображений. Все это подкреплено кучей картинок и схем. Надеюсь, что таких книг будет больше в будущем.
https://images.guide

Хорошая статья про то как работает Array.sort() в разных браузерах. Интересный момент в том, что своя реализации в некоторых условиях будет быстрее нативной.
https://alistapart.com/article/what-i-talk-about-when-i-talk-about-sorting

Небольшая новость: вышла спека HTML 5.2. Ничего интересного для практического применения
https://www.w3.org/blog/news/archives/6553

Доброе утро!

NPM 5.5.0. Добавили двухфакторную авторизацию и работу с паролями.
http://blog.npmjs.org/post/166044150500/v550-2017-10-04

Поддержка гридов все лучше и лучше, но до сих пор нет ясности в каких случаях стоит их использовать, а в каких нет. Эта статья показывает основные приложения, а также отличие от флексов
https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/

Разработчики из Mozilla выкатили интерактивную обучалку по гридам
https://mozilladevelopers.github.io/playground/

А вот практический пример использования гридов для создания разметки как в комиксах
https://codepen.io/rrenula/pen/LzLXYJ

Доброе утро! Начинаем новую неделю.

Подробности про то как работает "деоптимизатор" в v8. Читать интересно, но есть ли практическая польза — сомневаюсь.
https://v8project.blogspot.dk/2017/10/lazy-unlinking.html

Еще одна статья о v8. Про улучшение производительности Proxy.
https://v8project.blogspot.dk/2017/10/optimizing-proxies.html

Ну и немного практики, которая многих затронет (или уже затронула). Статья про опыт перехода на React 16. Вроде не все так плохо.
https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6

React компонент для визуального редактирования мейла. Судя по демке, выглядит и работает довольно хорошо.
https://github.com/unroll-io/react-email-editor

Доброе утро!

Результаты Js13kGames. В этом соревновании нужно делать HTML5 игры, которые умещаются в 13kb.
http://2017.js13kgames.com/#winners

TypeScript отметил пятилетие. Когда он только вышел, я был сильно скептичен. Но за пять лет экосистема хорошо подросла и язык стал действительно удобным.
https://blogs.msdn.microsoft.com/typescript/2017/10/02/typescript-turns-5/

Другой подход для HOC в React. Автор предлагает использовать свойства. По мне идея спорная, но вот в комментариях интересные обсуждения почему так делать не стоит.
https://medium.com/tandemly/im-breaking-up-with-higher-order-components-44b0df2db052

Моя заметка про то, почему стоит использовать в hsl() вместо rgb или HEX кодов в CSS
http://slonoed.net/stop-using-rgb-colors-ru

Доброе утро!

Использование стримов в браузере. Chrome и FF уже поддерживают базовые вещи. Например уже можно читать стрим из fetch().
https://www.sitepen.com/blog/2017/10/02/a-guide-to-faster-web-app-io-and-data-operations-with-streams/

Видео с Full Stack Fest 2017. Пока не посмотрел все, но явно есть интересные видео.
https://www.youtube.com/playlist?list=PLe9psSNJBf743rgLMRVKytyQkDUolnZnY

Сравнение оберток для создания приложений для мобилок (таких, как PhoneGap и React Native).
https://www.outsystems.com/blog/free-cross-platform-mobile-app-development-tools-compared-2017.html

Очень крутая подборка фильтров для изображений в CSS.
http://bennettfeely.com/image-effects

Статья рассказывающая почему побочные эффекты в функциях зло (привет функциональное программирование). Но написана так хорошо и с картинками, что читать просто приятно.
http://blog.csssr.ru/2017/10/07/side-effects/

Тут опубликовали результаты CSS Grid Challenge 2017. Это был небольшое соревнование на тему реализации сложной структуры на гридиах. Интересно посмотреть для чего и как участники использовали гриды, а при необходимости и утащить код 😉
https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners

Как сделать кнопки аудио плеера (стоп, пауза, плей) на чистом CSS.
https://css-tricks.com/making-pure-css-playpause-button

Доброе утро!

У Flow улучшилась поддержка React. Статья, которая рассказывает про новые фичи.
https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627

Большая коллекция ссылок на инструменты, связанные с Chrome Dev Tools. Есть даже адаптер для Edge.
https://github.com/ChromeDevTools/awesome-chrome-devtools

Как Slack гриды начал использовать. Дельная статья с примерами.
https://slack.engineering/rebuilding-slack-com-b124c405c193

Статья про использование Nest.js. Выглядит страшно (декораторы, контроллеры и прочий ад), но в плане структуры проекта может быть неплохим выбором.
https://auth0.com/blog/nestjs-brings-typescript-to-nodejs-and-express/

На этом неделя завершена. Хороших выходных!

Доброе утро!

Promise в ноде может вызывать утечки памяти. Причем если работать не с промисом, а с async функцией, то причина утечки более очевидна. Если интересны подробности, рекомендую статью.
https://alexn.org/blog/2017/10/11/javascript-promise-leaks-memory.html

Релиз TypeScript 2.6. Разные полезные мелочи, например добавили возможность написать комментарий для подавления ошибки в коде.
https://blogs.msdn.microsoft.com/typescript/2017/10/12/announcing-typescript-2-6-rc/

Taucharts one. Очень приятная на вид библиотека для рисования графиков.
https://blog.taucharts.com/taucharts-one/

Программирование музыки на JS в полу визуальном редакторе. Очень забавная вещица.
https://jackschaedler.github.io/jazzari/

Доброе утро! Несколько статей для чтения пока допиваете свой кофе.

Отличная статья в блоге Grammarly о создании расширений для браузеров. Много пользуюсь их расширением, работает отлично (только не в сафари).
https://tech.grammarly.com/blog/building-browser-extensions-at-scale

Заметка "почему не стоит использовать функциональные компоненты в реакте". Автор предлагает несколько хороших аргументов. Аргументы слабые, так как тот же recompose позволяет отказаться от классов.
https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c

Очень клевая статья о работе event loop
https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

Доброе утро!

Блог, посвященный плохим интерфейсам. Полезно смотреть на явные ошибки в интерфейсах и не делать так.
http://grumpy.website

Видео как новый v8 оптимизирует код. Смотреть интересно, есть практически полезная инфа.
https://www.youtube.com/watch?time_continue=661&v=YqOhBezMx1o

Почему код должны форматировать роботы. Если кратко: используйте Prettier.
https://medium.freecodecamp.org/why-robots-should-format-our-code-159fd06d17f7