Доброе утро!

Хорошая статья про использование заголовков на странице (на самом деле про доступность).
https://www.24a11y.com/2018/the-d-in-the-dom/

Малоизвестные возможности JS. По большей части малоизвестны они потому что не стоит их использовать. Но знать про некоторые полезно.
https://medium.com/webbdev/малоизвестные-возможности-javascript-6e401ce3a48d

И ещё одна фича языка, котора вы вряд ли будете использовать — асинхронные генераторы. По ссылке заметка с примером где их использовать таки можно.
https://medium.com/@andreasimonecosta/goodbye-transform-streams-long-live-es9-async-generators-86e60284fb80

Доброе утро!

В продаже уже появилось переиздание Рефакторинга — знаменитой книги Мартина Фаулера. Примечательно, что теперь в ней примеры на JavaScript. Если вы не читали первую часть, то отличный случай ознакомиться. Ну или подождите русского перевода.
https://martinfowler.com/books/refactoring.html

Подборка вопросов для собеседований по фронтенду. Не уверен, что это хорошая идея использовать для собеседований, но как минимум проверка своих знаний.
https://h5bp.github.io/Front-end-Developer-Interview-Questions/

Подробная заметка про правильное использование атрибута tabindex
https://bitsofco.de/how-and-when-to-use-the-tabindex-attribute/

Доброе утро!

Релиза Firefox 64. Добавили поддержку кастомных линий прокрутки по спецификации. Напомню, что в Chrome это пока работает через псевдоклассы.
https://hacks.mozilla.org/2018/12/firefox-64-released/

Подборка библиотек для работы с графами. Штука нишевая, но когда я искал для себя последний раз пришлось перепробовать кучу и разбираться.
https://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript

Подборка трюков для отладки CSS в Chrome Dev Tools. Скорее всего большую часть вы уже знаете, но можете найти и новые приёмы.
https://www.heartinternet.uk/blog/16-devtools-tips-and-tricks-every-css-developer-need-to-know/

Доброе утро!

Очень хорошая новость: экспериментальный релиз Puppeteer для Firefox. Выпустили бы ещё для Safari и было бы счастье в E2E тестировании (ну почти).
https://github.com/GoogleChrome/puppeteer/tree/master/experimental/puppeteer-firefox

Небольшое интро в Shadow DOM. Скорее начальный уровень.
https://bitsofco.de/what-is-the-shadow-dom/

В React на замену componentWillReceiveProps пришёл новый статический метод getDerivedStateFromProps. Как его использовать не сразу очевидно (по крайней мере для меня), а примеров по нему маловато. Вот один из них.
https://blog.bitsrc.io/managing-derived-state-from-props-in-react-f26b5b15069

Доброе утро!

Большой текст про React Hooks, объясняющий почему был выбран именно такой дизайн и какие минусы у альтернатив. Если вы используете React, то рекомендую к прочтению.
https://overreacted.io/why-do-hooks-rely-on-call-order/

Google Analytics сейчас почти стандартный выбор для аналитики. При этом стандартный способ подключения добавляет на сайт ещё и Tag Manager. Что в итоге добавляет 73КБ. Если вам не нужно ничего кроме трека событий и ошибок, то по ссылке простой сниппет в 1.5 КБ, который шлёт запросы напрямую в GA.
https://minimalanalytics.com/

Ревер-прокси, который может рендерить клиентскую страничку с помощью Chrome и отдавать уже в готовом виде. Это может пригодится, если у вас есть приложение с рендером только в браузере (например Angular 1), но нужно отдавать готовую вёрстку поисковым роботам.
https://github.com/rendora/rendora

Доброе утро! Сегодня два так называемых Case Study, с которыми полезно ознакомиться.

Pinterest получил хороший прирост к пользовательским метрикам на сайте после перехода на PWA. Они объясняют это уменьшением времени до первого рендера. Вполне возможно, что некоторые юзабилити изменения тоже внесли свою лепту. В любом случае хороший пример использования новых технологий.
https://tproger.ru/translations/pinterest-pwa/

Последствия перехода на GraphQL веб-приложения Neflix. Опыт очень положительный. Если вы ещё не пробовали GraphQL, то очень советую.
https://medium.com/netflix-techblog/our-learnings-from-adopting-graphql-f099de39ae5f

Доброе утро!

Интересный способ использования Service Worker для того, чтобы подменять битые картинки на заглушки.
https://bitsofco.de/handling-broken-images-with-service-worker/

Список из десяти каналов для веб-разработчика. Будет чем заняться на праздниках. Если у вас есть любимый канал по фронтенду или программированию в целом, напишите мне.
https://medium.com/@ryandsouza13/10-youtube-channels-web-developers-should-subscribe-to-86fc814e9d62

Хорошая статья на русском про использование Tensorflow в JS. Знаний про нейронные сети не даст, но можно поразвлекаться делая классификаторы изображений в браузере.
https://habr.com/company/piter/blog/432984/

Доброе утро! Выхожу на связь после долгих праздников.

Опыт использования GraphQL в Airbnb. Там много практических советов и хитростей.
https://medium.com/airbnb-engineering/how-airbnb-is-moving-10x-faster-at-scale-with-graphql-and-apollo-aa4ec92d69e2

В США иски к сайтам с плохой доступностью появляются почти каждый день. По ссылке случай со страницей популярной певицы. Со временем эта движуха в том или ином виде доползёт и до вас.
https://www.theguardian.com/music/2019/jan/04/beyonce-parkwood-entertainment-sued-over-website-accessibility

Минификатор, который поддерживает ES6+ код.
https://github.com/terser-js/terser

Доброе утро! Вчера вышла осечка и новости отправил раньше. Извините, если разбудил кого.

Что изучать в 2019 (стороны JavaScript). Автор проанализировал тренды и составил список из нескольких вещей. Не могу сказать, что это корректный список, но если ищите, что поизучать, то пойдёт.
https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2019-b4142f38df20

Я уже постил этот сайт с советами по использованию Dev Tools. Автор составил подборку из пяти самых популярных в прошлом году. Но в целом там стоит все посмотреть.
https://umaar.com/dev-tips/190-five-popular-2018-tips/

Интересный трюк для создания градиента в бэкграунде мультистрочного текста
https://css-tricks.com/multi-line-inline-gradient/

Доброе утро! Сегодня подборка разных инструментов.

Библиотека для работы с жестами в React, использующая хуки.
https://github.com/drcmda/react-with-gesture
Посмотрите пример и код, выглядит очень читаемо.
https://codesandbox.io/embed/j0y0vpz59

Небольшая тулза, генерирующая SVG фильтры для изображений. Она выдаёт код, который можно подкрутить под свои нужды. Применение ограничено, но сам приём интересный.
https://yoksel.github.io/svg-gradient-map/#/

Facebook выпустили свой инструмент для работы и локализацией. По сути своя вариация gettext, что хорошо. Но непонятно, почему не использовать просто gettext.
https://facebookincubator.github.io/fbt/

Доброе утро!

Подборка советов по написанию тестов для NodeJS. Некоторые пункты спорные, но в целом очень хороший чеклист, которому можно следовать.
https://habr.com/company/ruvds/blog/435462/

Инструмент, который позволяет найти JS код, нарисовавший конкретный символ на странице. Это может быть очень полезно, если вам в наследство достался сайт с огромной кучей jquery кода и багов.
http://www.fromjs.com/

Практическое применение двух новых фич React: Lazy и Suspend.
https://blog.bitsrc.io/improve-react-performance-using-lazy-loading-and-suspense-933903171954

Следующие пару недель я в разъездах и новости могут быть нерегулярными.

Доброе утро!

Уже несколько раз я упоминал, что мне очень нравится GraphQL. Но как и у любой другой технологии у неё есть минусы который нужно знать и уметь с ними работать. Вот пара статей, который рассматривают GraphQL с “плохой” стороны.
https://habr.com/ru/post/425041/
https://habr.com/ru/post/435690/

У всех пользователей включен JavaScript, так? Не так. Небольшая диаграмма показывающая, что JS может не работать по разным причинам и всегда хорошо уметь жить с этим.
https://kryogenix.org/code/browser/everyonehasjs.html

Очередной (что хорошо) пример сложной раскладки на гридах.
https://css-irl.info/solving-a-tricky-layout-problem/

Доброе утро!

Хороший разбор плюсов и минусов TypeScript. Автор старается непредвзято оценить насколько плюсы перевешивают минусы.
https://medium.com/javascript-scene/the-typescript-tax-132ff4cb175b

Безумная идея: анимация в URL. По ссылке примеры как сделать прогресс бар с помощью юникода и эмоджи.
http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/

Небольшое интро по работе с денежными значениями в JS и использованию библиотеки Dinerojs
https://medium.com/devschacht/how-to-handle-monetary-values-in-javascript-bb0706840f0e

Доброе утро!

Для тех, кто использует MacOS. Утилита добавляющая превью JSON в Finder. Мелочь, а приятно.
http://www.sagtau.com/quicklookjson.html

Ещё небольшая заметка про использование GraphQL в продакшене. Там не очень много полезного, но всё же.
https://verve.co/engineering/graphql-a-retrospective/

Не очень люблю ссылки на твиттер, но тут тред про новые PWA фичи в мобильном Safari. IOS потихоньку расширяет возможности веба. Как разработчику мне это нравится, как пользователю не очень (:
https://twitter.com/mhartington/status/1089292031548145666

Доброе утро!

Google получил монополию среди браузеров и последствия потихоньку начинают проявляться. Chromium планирует изменить API расширений, чтобы они не могли блокировать URL ресурсов. Этой фичей активно пользуются блокировщики рекламы.
https://habr.com/ru/post/437548/

Большой гайд по использованию WebAuthn — нового вида аутентификации в браузерах. Я очень надеюсь, что он обретет популярность и можно будет использовать вместо пароля или третьих сервисов.
https://webauthn.guide

Статья про переход с Enzyme на стандартный инструмент для тестирования React компонентов. Я планирую как раз отказаться от Enzyme и было интересно увидеть реальный примеры на
https://medium.com/flatiron-labs/refactoring-an-enzyme-component-test-to-use-react-testing-library-f5c36da6716f

Доброе утро!

PWA приложения теперь будут доступны в Google Play Store. По сути для конечного пользователя такое приложение практически не будет отличаться ничем от других из официального магазина. По ссылке сама новость, а так же нюансы публикации и работы таких приложений.
https://medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

Jest v24. Добавили очень интересный концепт “todo” тестов. Позволяет писать заглушки, который потом могут ронять тест, напоминая, что их надо заменить настоящим тестом.
https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly

Google+ скоро совсем всё. Если вы используете кнопку авторизации или шарилку на сайте (я всё ещё встречаю такие),  то они отвалятся ближайшие недели.
https://itc.ua/news/polnoe-otklyuchenie-google-dlya-obyichnyih-polzovateley-zaplanirovano-na-2-aprelya-kompaniya-preduprezhdaet-o-polnom-udalenii-dannyih/

Доброе утро!

В Chrome Dev Tools добавили полезную фичу: возможность сделать лог вместо точки останова, раньше для этого приходилось использовать условную точку останова и писать там console.log, а теперь всё более наглядно. Ещё добавили тултип, который появляется при инспекции элементов. Ну и другие полезности.
https://developers.google.com/web/updates/2019/01/devtools

Довольно интересное решение: генерировать альтернативный текст к картинке, при помощи машинного обучения. Могу представить применение в разметке контента, сгенерированного пользователем.
https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/

Статья про практическое использование position:sticky и нюансы.
https://medium.com/web-standards/sticky-bc7ff7088693

Доброе утро!

Руководство по производительности CSS со стороны сети. Как правильно грузить стили и прочие хитрости. Очень рекомендую
https://css-live.ru/articles/css-i-proizvoditelnost-seti.html

Около фронтенда: игра, где надо выбирать правильный дизайн из двух предложенных. В каком то смысле — это тренировка визуального вкуса
https://cantunsee.space/

Доброе утро!

Тут уже из каждой колонки (канала) вещали про React с хуками. Я этого давно ждал и тоже напишу. Как водится версия была багнутая и сразу выкатили патч.
https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

Интересная статья, в которой автор рассуждает о необходимости разделять бизнес логику приложения и слой отображения. Есть несколько стоящих мыслей.
https://michel.codes/blogs/ui-as-an-afterthought

Сборщик мусора в Redux. Автор рассказывает как дебажил утечку памяти, связанную с Redux. Не то, чтобы супер полезно, но интересно.
https://developers.soundcloud.com/blog/garbage-collection-in-redux-applications

Доброе утро!

Интересная статья на русском про реализацию медиа плеера с поддержкой новых DRM механизмов.
https://habr.com/en/company/jugru/blog/426727/

Библиотека для выгрузки файлов. Особенность в том, что есть встроенный механизм для выбора файлов из Instagram, Google Drive, Dropbox и других.
https://github.com/transloadit/uppy

Большая и очень подробная статья про использование новых фич Regex. Очень советую, если вы ещё не знаете как использовать именованные группы и прочие штуки.
https://www.smashingmagazine.com/2019/02/regexp-features-regular-expressions/