Доброе утро!

В React появится новый функциональный API для работы со стейтом и сайд-эффектами, названый Hooks. На первый взгляд это должно упростить код и тестирование. Есть и минусы: хуки работают таким образом, что нужно соблюдать определенные правила при написании, которые совсем неочевидны.
https://reactjs.org/docs/hooks-intro.html

Статья от Dropbox про использование Brotli вместо gzip для сжатия статики. В среднем вышла экономия на 20%. Будет интересно тем, кто раздает статику со своих серверов и платит много за трафик, или если скорость загрузки статики критична.
https://blogs.dropbox.com/tech/2017/04/deploying-brotli-for-static-content/

Интересная заметка про то, что порядок полей в объектах в JS стабилен. Дружеское напоминание: никогда не пишите код, основывающийся на знание такого порядка.
https://www.stefanjudis.com/today-i-learned/property-order-is-predictable-in-javascript-objects-since-es2015/

Доброе утро!

Руководство по использованию ReportingObserver. Этот API позволяет отлавливать различные предупреждения браузера. По хорошему его вывод должен логироваться также как логируются ошибки.
https://habr.com/company/ruvds/blog/427403/

Смешно и грустно: типичный сайт в 2018м году.
https://2018.bloomca.me/ru

Библиотека для хранения данных в браузере. Интересной особенностью является то, что она хранит дубликаты во всех возможных хранилищах и умеет восстанавливать стертые записи.
https://github.com/gruns/irondb

Доброе утро!

Продолжая историю хуков в React. Сайт, где каждый день публикуется новый хук (сейчас их там аж два).
https://usehooks.com

Nodejs 10.13 получила статус LTS. Можно обновлять прод сервреа (:
А вот фич там особо интересных широкой публике нет, разве что поддержка http2 и коды ошибок.
https://nodejs.org/en/blog/release/v10.13.0/

Консольная утилита для аудита сайта. Использует внутри Pagespeed, Lighthouse, A11y. Есть готовый докер контейнер.
https://github.com/thecreazy/siteaudit

Доброе утро!

Коллекция багов PWA. Очень полезный формат, помогающий обойти уже известные проблемы.
https://github.com/PWA-POLICE/pwa-bugs

Уверен, что вам уже надоели новости про хуки в реакте, но читатель канала подкинул ссылку на набор хуков.
https://rehooks.com/

А ещё библиотека Recompose будет жить в режиме поддержки.
https://github.com/acdlite/recompose/commit/7867de653abbb57a49934e52622a60b433bda918

Доброе утро!

В Safari TP появилась возможность использовать медиа выражение CSS для определения темной темы. Очень надеюсь, что сайты начнут использовать эту фичу и делать тёмные темы.
https://paulmillr.com/posts/using-dark-mode-in-css/

Статья про причины перехода PayPal (точнее его части) на GraphQL. Ничего нового, но показывает, что технология по сути устоялась и с нами надолго.
https://medium.com/paypal-engineering/graphql-a-success-story-for-paypal-checkout-3482f724fb53

Немного браузерных внутренностей: документ с исследованием производительности деструктуризации массива.
https://docs.google.com/document/d/1hWb-lQW4NSG9yRpyyiAA_9Ktytd5lypLnVLhPX9vamE/edit

Доброе утро!

Статья про дебаг приложений, написанных в функциональном стиле. При этом там описаны разные трюки, которые пригодятся при любом дебаге JS.
https://itnext.io/debugging-functional-javascript-545b6ea59660

Вышел Storybook 4. Туда добавили поддержку React Native, Ember и других. Плюс теперь внутр используется Webpack 4, что должно сделать пересборку еще быстрее. Если вы не пользовались, то повод посмотреть на этот инструмент.
https://medium.com/storybookjs/storybook-4-0-is-here-10b9857fc7de

Библиотека для построения простых графиков в CLI. Применение, конечно, ограничено, но выглядит мило.
https://github.com/chunqiuyiyu/ervy

Доброе утро!

Большая и главное очень _правильная_ статья про тестирование React  компонентов (многое подойдёт и к другим библиотекам). Очень советую к прочтению, тем более, что на русском.
https://medium.com/devschacht/what-and-how-to-test-with-jest-and-enzyme-full-instruction-on-react-components-testing-d3504f3fbc54

Очередной бандлер FuseBox. А к нему гайд по использованию. В статье расcказывают, чем он лучше Webpack (просто и быстрый), но какую проблему он решает при наличии Webpack всё равно непонятно.
https://auth0.com/blog/introducing-fusebox-an-alternative-to-webpack/

Анонс Google reCAPTCHA 3. Идея теперь не блокировать пользователей, подсовывая им тупые задачи с картинками или текстами, а незаметно трекать поведение и давать сигнал владельцу сайта о вероятности, что пользователь — робот, а владелец уже решает что делать постфактум.
https://xakep.ru/2018/11/01/recaptcha-v3/

Доброе утро!

Сегодня две ссылки, зато на большие статьи.

Описание того, как браузер превращает теги текста HTML в собственно DOM элементы. Ничего нового, но читать интересно.
https://alistapart.com/article/tags-to-dom

Вчера упоминал Webpack, а сегодня наткнулся на статью про организацию развесистой конфигурации сборки. Там и чанки и отдельный легаси бандл и разные среды. При этом руководство очень детальное (и очень большое).
https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development

Доброе утро!

Гайд про то как правильно делать тёмную тему на сайте: используя CSS переменные и новое медиа-выражение “prefers-color-scheme”.
https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode

Анонс запуска сайта test262.report. Там показано текущее состояние различных фич JS в браузерах. Для рядового разработчика не шибко полезно, но на базе этих данных компиляторы (Babel, Typescript) смогут на лету определять какие фичи требуют трансляции в старый стандарт. Сейчас для этого часто используется база caniuse.
https://bocoup.com/blog/announcing-test262-report

Day.js — компактная (2kb) замена Momenjs. API практически такой же.
https://github.com/iamkun/dayjs

Доброе утро!

Подборка различных трюков CSS с объяснением почему так. Подчерпнул для себя несколько интересных. Полезно иметь в инструментарии.
https://habr.com/company/poiskvps/blog/429110/

Необычная статья в разрезе фронтенда: обоснование необходимости доступности интерфейсов для бизнеса. Пойдёт, если нужно предоставить менеджерам вопрос: зачем тратить время на доступность.
https://www.w3.org/WAI/business-case/

Неожиданно (по крайней мере для меня): протокол HTTP/3. Пока думать про какое либо использование в продакшене нет смысла, но полезно знать, что оно есть.
https://daniel.haxx.se/blog/2018/11/11/http-3/

Доброе утро!

Подборка полезных советов по реализации страницы 404. Многие сайты уделяют ей мало внимания, а зря. Советую ознакомиться.
https://www.smashingmagazine.com/2018/11/the-101-course-on-crafting-404-pages/

Очень краткий туториал по использованию Oak — фреймворка для написания фронтенда на Go + WebAssembly. На случай если вы хотели попробовать, но не знали с чего начать.
https://tutorialedge.net/golang/writing-frontend-web-framework-webassembly-go/

Возможности JS, про которые многие не знают. Многие из них лучше и не использовать вовсе, но знать о существовании всегда полезно.
https://medium.com/webbdev/js-40d1c8881333

Доброе утро!

Проект GraphQL отпочковался от Facebook в отдельную организацию. Теперь сообщество будет двигать его в перед.  И это очень здорово учитывая, что это сейчас лучший протокол для загрузки данных на фронтенд.
https://medium.com/@leeb/introducing-the-graphql-foundation-3235d8186d6d

Интересный подход оптимизации загрузки CSS: стили инлайнятся в HTML, а потом кешируются воркером как отдельный файл. Идея интересная, но кажется овчинка выделки не стоит.
https://www.filamentgroup.com/lab/inlining-cache.html

Chrome будет блокировать всю рекламу на сайтах, где при кликах вылезают “неожиданные” попапы. Интересно, что обычно это порносайты. Интересно как будут выкручиваться.
https://www.searchengines.ru/chrome-block-decept.html

Доброе утро!

Заметка про опыт использования TypeScript на протяжении двух лет. Автор доволен и рекомендует использовать.
https://ecom.software/after-two-years-with-typescript-was-it-worth-it/

Скорее всего в Chrome появится API для работы с контактами (интересно в первую очередь для телефонов). По сути браузер медленно превращается в ОС.
https://github.com/beverloo/contact-api

Полезнейшая тулза, которая позволяет сконвертировать SVG в React компонент.
https://svgr.now.sh/

Доброе утро!

Очередное решение CSS in JS. Интересной особенностью является то, что он вытаскивает стили в CSS  файлы, а для динамических свойств транслирует JS переменные в CSS.
https://linaria.now.sh

Результаты опроса про состояние JS экосистемы в 2018м. В целом ничего неожиданно. Интересно посмотреть на демографию и зарплаты.
https://2018.stateofjs.com/

Гайд с примерами использования новых фич React: lazy и Suspense. Обе позволяют лучше обрабатывать загрузку с сервера в плане UX.
https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58

Доброе утро!

Исследование UX формы ввода адреса. Показывает, что два поля хуже чем одно. Это больше американская фича, но и отечественные сайты переняли дурацкий способ с двумя полями. Вообще на на сайте много интересных исследований на подобные темы.
http://uxmovement.com/forms/why-you-should-use-a-text-area-for-address-form-fields/

Сайт где собраны гайды по различным аспектам веб-разработки. Всё разбито по категориям. Удобно и познавательно. Стоит добавить в закладки.
https://web.dev

Минутка бесполезной статистики: JavaScript всё ещё самый популярный (по количеству коммитов на гитхабе) язык.
https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/

У меня будет занятая неделя, потому никаких новостей до следующей среды. А если будете на HolyJS и захотите пообщаться — пишите.

Доброе утро! Я снова с вами.

Хорошая статья про GraphQL. Хорошая тем, что в ней про практическое использование и небольшие хитрости, которые обычно обходят стороной.
https://github.com/nodkz/conf-talks/tree/master/articles/graphql

Опубликовали планы по разработке React. Хуки обещают в первом квартале.
https://reactjs.org/blog/2018/11/27/react-16-roadmap.html

Отчёт о недавней уязвимости в event-stream. Уязвимость для большинства пользователей была безобидна, но этот случай (а так же многие другие) показывают, что нужно делать что-то с системой зависимостей в JS. Мне видится логичным создание платного аналога NPM с аудитом безопасности.
https://schneid.io/blog/event-stream-vulnerability-explained/

Доброе утро!

У СКБ Контур есть дизайн гайд по использованию компонентов. Несмотря на то, что это сделано для их компонентов, очень многое можно использовать в своей работе. Очень советую обратить внимание.
https://guides.kontur.ru

Достаточно детальное руководство по использованию Background Fetch API. Этот инструмент позволяет загружать и выгружать файлы даже после закрытия вкладки. Такое и раньше делали сами браузеры, но теперь может контролироваться разработчиком.
https://medium.com/google-developer-experts/background-fetch-api-get-ready-to-use-it-69cca522cd8f

Статья про обфускацию кода. Интересно, но всегда нужно понимать, что это не даст абсолютной защиты от копирования кода, хотя и усложнит разбор.
https://tproger.ru/blogs/js-obfuscation/

Доброе утро!

Большая и подробная статья на русском про управление памятью в JS и как избежать утечек. Хороший материал от простого к сложному.
https://medium.com/webbdev/js-ae40719fd84e

Релиз Babel 7.2 в который включили приватные поля классов. Мне совсем не нравится эта фича, но приватным полям быть.
https://babeljs.io/blog/2018/12/03/7.2.0

Последние дни было много слухов про то, что Microsoft закапывают Edge и делают браузер на основе Chromium. Нормального анонса не было. Вполне возможно другая команда делает некий эксперимент, а журналисты раздули. Хотя будет иронично, если IE переживёт Edge.

Доброе утро!

Таки да. Edge будет использовать Chromium и v8.
https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/

Гайдлай по доступности на русском. Хорошее место для старта.
http://specialbank.ru/guide/dev_web.html

Тут очень большая статья с разбором эволюции Redux. Скорее для “продвинутых пользователей”. В том числе там описано почему были сделаны те или иные изменения и планы на будущее.
https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/

Доброе утро!

Очередное напоминание, что нельзя использовать скрипты с источников, которые вы не контролируете, особенно на страницах с платежами. По ссылке объяснение что делать, если по другому никак.
https://shkspr.mobi/blog/2018/11/major-sites-running-unauthenticated-javascript-on-their-payment-pages/

Интересная заметка про недавнюю оптимизацию spread оператора в v8.
https://v8.dev/blog/spread-elements