Доброе утро!

Статья, которая будет полезна тем, кто занимается дизайном сайта. Автор рассматривает применение CSS анимаций для улучшения пользовательского опыта.
https://www.creativebloq.com/features/explore-the-new-frontier-of-css-animation

Apple выпустили JS API для встраивания карт. Применимость ограничена, в виду того, что сами карты нормально работают только в США. Но лучше больше конкуренции, чем меньше.
https://developer.apple.com/videos/play/wwdc2018/212/

Доля Firefox падает, а Chrome растёт. Удивительного тут ничего нет, но немного грустно, что единственный открытый (ну почти) браузер медленно, но верно уходит с рынка.
http://www.opennet.ru/opennews/art.shtml?num=48717

Доброе утро!

Подборка единиц измерения из спецификации CSS, о которых вы возможно даже не знали. И не все из них поддерживаются браузерами.
https://dev.to/maxart2501/the-new-and-old-css-units-youve-never-heard-about-1mn1

Принцип работы CORS в браузерах один из ключевых, но не все его понимают. По ссылке хорошая статья, которая разжевывает детали работы браузеров при запросе к сторонним доменам.
https://frontendian.co/cors

В v8 вынесли часть работы сборщика мусора в отдельный тред. Это напрямую влияет на скорость исполнения кода, не требуя от разработчика никаких изменений в коде. У меня есть подозрение, что будет хороший прирост в React, который порождает много временных объектов. Если вам интересны детали, то по ссылке подробное описание механизма.
https://v8project.blogspot.com/2018/06/concurrent-marking.html

Доброе утро!

Несколько трюков по использованию Chrome Dev Tools. Советую заглянуть и проверить все ли вы знаете. Такие мелочи очень упрощают жизнь, если вам приходится часто отлаживать веб-приложения.
https://www.lucidchart.com/techblog/2018/04/17/time-saving-chrome-devtools-shortcuts/

Статья про опыт создания персональной цветовой схемы для VS Code. Автор подошел не просто со стороны выбора понравившихся цветов, но так же учитывал контрастность и доступность цветов. Такие же принципы можно использовать и при разработке сайта.
https://css-tricks.com/creating-a-vs-code-theme/

Очень подробный и детальный гайд по созданию пагинации в React приложении. Автор разбил всё на маленькие шаги с хорошими пояснениями.
https://scotch.io/tutorials/build-custom-pagination-with-react

Доброе утро!

HyperMD — надстройка на CodeMirror, которая добавляет кучу плагинов для визуального редактирования текста. Работает довольно хорошо.
https://laobubu.net/HyperMD/

Vue Native. По названию понятно, что это Vue фреймворк, только для создания нативных мобильных приложений. Иронично, что внутри он конвертируется в React Native.
https://blog.geekyants.com/introducing-vue-native-b66f71d50438

Pollyjs — библиотека от команды Netflix для удобного тестирования запросов к серверу из браузера. Подменяет браузерные API (fetch и XHR) и позволяет перехватывать запросы и менять ответы.
https://github.com/Netflix/pollyjs

Доброе утро!

Большая подробная статья о том как Яндекс деньги на React переписывали. Там есть очень годные замечания о встречающихся проблемах.
https://habr.com/p/414183/

В новой Mac OS появится тёмный режим. И похоже, что WebKit будет прокидывать в CSS медиа выражение prefers-dark-interface, которое будет указывать на необходимость включить темный режим на сайте. Очень надеюсь, что браузеры стандартизиют эту фичу, а веб-разработчики и дизайнеры начнут использовать.
https://twitter.com/Keithamus/status/1007557906378706944

В Airbnb решили перестать использовать React Native. Они столкнулись с ожидаемой проблемой: такие обертки плохо работают для сложных случаев. Фреймворк не удалось использовать универсальным способом для обеих платформ. В итоге Появились раздельные команды, код стало сложно поддерживать.
https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a

Доброе утрой

Тем временем модули завезли во все десктопные браузеры (кроме IE). Это не значит, что нужно бежать и всё переделывать, но пора разобраться как это работает.
https://developers.google.com/web/fundamentals/primers/modules

Статья с громким названием "Не используйте placeholder атрибут". На самом деле она про некорректное использование и про то как делать правильно. Статья очень детальная, с кучей примеров и отсылок на другие статьи. Рекомендую прочитать.
https://www.smashingmagazine.com/2018/06/placeholder-attribute/

Доброе утро!

Семь полезных советов по оптимизации анимации, сделанной через JavaScript.
https://www.sitepoint.com/7-performance-tips-jank-free-javascript-animations/

pickr — очень милый и хорошо работающий компонент для выбора цвета. Не содержит каких либо зависимостей и может использоваться где угодно.
https://github.com/Simonwep/pickr

В блоге разработчиков Google появилась статья про то как использовать новый WebXR Device API. В примере показано как сделать простую сцену с дополненой реальностью. Если у вас есть телефон с Android O, то отличная игрушка на выходные.
https://developers.google.com/web/updates/2018/06/ar-for-the-web

Доброе утро!

Подробная статья про использование упрощенной графики для ускорения загрузки сайта. Мне очень понравилась версия с Traced SVG. Намного лучше, чем заглушки в виде низкокачественного размытого изображения.
https://www.contentful.com/blog/2018/06/21/svg-image-previews/

Я уже много писал про вариативные шрифты, но вроде не попадалось таких хороших интро на русском.
http://css.yoksel.ru/opentype-variable-fonts/

Обзор способов работы с литералами, появившимися в ES6.
https://habr.com/company/ruvds/blog/414377/

Доброе утро!

В NodeJS 10.5 появилась экспериментальная поддержка тредов. Пока там не возможности использовать общую память кроме SharedArrayBuffer, потому отличия от cluster не так много. Фича скорее полезно создателям фреймворков, нежели тем, кто делает обычное приложение.
https://habr.com/post/415165/

Cucumber.js позволяет писать тесты на обычном языке. Идея в том, чтобы тесты мог писать кто угодно. Для меня загадка в том, кто действительно будет так делать, но сам концепт рабочий и выглядит интересно. По ссылке статья с объяснением как это настроить и использовать.
https://medium.com/@anephenix/end-to-end-testing-single-page-apps-and-node-js-apis-with-cucumber-js-and-puppeteer-ad5a519ace0

Отличная обучающая статья. Построение SPA приложения без фреймворка, шаг за шагом. Такие туториалы помогают понимать концепт намного лучше, чем сухие статьи.
https://www.sitepoint.com/single-page-app-without-framework/

Доброе утро!

A2O — утилита для конвертирования IOS приложения в WebAssembly для запуска в браузере.
https://blog.tombo.io/a2o-a-converter-from-ios-app-to-web-app-is-now-open-source-ff001fb8dcc5
Демку простой игры, перенесенной таким образом можно увидеть тут. http://demo.tombo.io/
Выглядит впечатляюще.

DevTube. Из названия понятно, что это ютуб, но для видео про разработку ПО. Там очень много всего. Есть видео на русском, но нельзя отфильтровать по языку.
https://dev.tube/

Простой, но интересный трюк: использовать эмоджи как иконки, обесцветив их.
https://preethisam.com/2018/06/25/how-to-use-emojis-as-icons/

Доброе утро!

Большая статья про измерении производительности загрузки. Из этой статьи я узнал, что есть такой браузерный API navigator.sendBeacon, который позволяет отправить данные на сервер, даже когда страница уже выгружается.
https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing/

Забавная пятничная новость. Компиляция PHP в WebAssembly для запуска в браузере. Зачем? Потому что могут! В целом я мало представляю применение. На PHP нет особо интересных библиотек общего назначения, которые стоило бы портировать.
https://github.com/oraoto/pib

Три новые фичи JS, которые скорее всего войдут в JS. Я бы сказал это самое лучшее улучшение синтаксиса за долго время.
https://medium.freecodecamp.org/here-are-three-upcoming-changes-to-javascript-that-youll-love-387bce1bfb0b

Доброе утро!

Узнал о существовании такого акронима как RAIL (Response, Animation, Idle and Load). По сути формализация различных метрик производительности страницы. По ссылке подробное описание и другие ссылки для чтения.
https://www.keycdn.com/blog/rail-performance-model/

Статья про использование PurgeCSS — тулзы, которая вырезает неиспользуемый CSS, анализируя исходники. Судя по всем идеальная для статических сайтов, использующий библиотеки, типа Bootstrap.
https://frontstuff.io/how-i-dropped-250-kb-of-dead-css-weight-with-purgecss

Я до сих пор удивляюсь, когда вижу релизы Opera. Мне совершенно непонятно, кто её целевая аудитория теперь. По сути хром с сомнительной пользы свистелками. Если у вас популярный вебсайт и есть аналитика, расскажите мне, как выглядит аудитория оперы.
https://tproger.ru/news/opera-54/

Доброе утро!

Очень хороший обзор базовых фич NodeJS, который нацелен на фронтендеров, знающих JS, но не имеющих опыта с нодой.
https://blog.bloomca.me/2018/06/21/nodejs-guide-for-frontend-developers.html

Недавно в канале была ссылка про редкие единицы измерения в CSS, а тут я еще про одну узнал — “ch”, равна ширине латинской буквы O в шрифте.
https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/

Недавно побывал в гостях у Андрея Смирнова, и мы записали выпуск Frontend Weekend. Собственно про сам фронтенд там почти ничего нет, но есть часть, где я рассказываю про канал.
https://soundcloud.com/frontend-weekend/fw-59

Доброе утро!

CSS Grid Level 2 — набор фич, связанных с гридами. Основная фича — вложенные гриды. По ссылке большая статья, показывающая как это использовать.
https://www.smashingmagazine.com/2018/07/css-grid-2/

Небольшая заметка, рассказывающая как компания переходила с NodeJS на Go и обратно. Очень хороший пример того, как не надо делать. Не надо переписывать всё приложение, не проверив прототип и не убедившись, что команда может использовать новую технологию.
https://www.thenativeweb.io/blog/2018-06-12-15-47-from-node-to-go-there-and-back-again/

Недавно была история про уход Airbnb с React Native. Если вы не читали, то вот появился перевод статей.
https://medium.com/devschacht/react-native-at-airbnb-9cd91177f0d0

Доброе утро!


Наткнулся на довольно интересную вёрстку, которая хорошо демонстрирует использование CSS Grids.
https://codepen.io/mxbck/live/81020404c9d5fd873a717c4612c914dd
Автор сделал пост в блоге, рассказывая детали.
https://mxb.at/blog/layouts-of-tomorrow/

BackstopJS — инструмент для тестирования вёрстки. Собственно, в статье показано как настроить автоматизированное тестирование.
https://medium.com/@lucyhackwrench/как-и-зачем-тестировать-верстку-84a378bf7bb4

Доброе утро!

В CCS появятся вложенные селекторы (как в LESS и SCSS). Для меня это была одна из основных причин оставаться на препроцессорах.
https://github.com/w3c/csswg-drafts/pull/2878

На днях Яндекс проиндексировал Google Docs. И документы с открытым доступом стали доступны в поиске. Казалось бы при чем тут фронтенд? А при том, что в Google Docs интерфейс сделан так, что чтобы посмотреть доступ надо сделать несколько кликов на каждый файл и это проблема UX. По ссылке ответ Google (пользователи сами виноваты)
https://russia.googleblog.com/2018/07/google_5.html

Большая статья с кучей примеров того как показывать процесс ожидания пользователю.
https://medium.com/@fkadev/managing-complex-waiting-experiences-on-web-uis-29534d2d92a8

Доброе утро!

Видео Школы разработки интерфейсов в 2018. Очень хороший базовый материал и очень качественная запись.
https://www.youtube.com/playlist?list=PLKaafC45L_SRqYQW-nFYw8bOlm3IYc2BI

Сравнение производительности WebAssembly разных браузеров. Firefox аж в два раза обошел Crhome.
https://www.opennet.ru/opennews/art.shtml?num=48919

Отличная демонстрация того, что браузеры до сих пор не работают одинаково даже в простых вещах. ПРостой див рендерится совершенно по разному.
https://codepen.io/MartijnCuppens/pen/MXojmw

Доброе утро!

Publii — статичная CMS, к которой прилагается GUI для работы. Я давно искал нечто подобное. раньше вариант был использовать wordpress или возиться с кодом статических генераторов.
https://getpublii.com/

React компоненты, которые адаптируются к скорости сети. У автора пример не самый удачный, но сама идея показана и вполне может быть использована.
https://mxb.at/blog/connection-aware-components/

Уязвимость Spectre, с которой браузеры боролись отключением SharedArrayBuffer и изменением Performance API всё еще на месте, но вроде не так критична. Думаю браузеры быстро выпустят новые патчи.
https://xakep.ru/2018/07/02/browsers-spectre/

Доброе утро!

Заметка у Ильи Бирмана про уже поднадоевший спор о форме курсора на интерактивных элементах. Тут я с автором согласен.
https://ilyabirman.ru/meanwhile/all/arrow-and-finger/

Статья про tree shacking. Что это, как использовать и почему хорошо. Автор пишет, что этот прием стал популярен из-за Rollup, хотя тот же Closure Compiler мог такое делать давно.
https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/

Ещё одно напоминания, что расширения из магазина хрома совершенно небезопасны. Авторы часто продают расширения другим людям, а те уже монетизируют как умеют.
http://www.opennet.ru/opennews/art.shtml?num=48908

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

Интересный приём для быстрого прототипирования сайта. Гриды используются для быстрого изменения расположения блоков, а переменные для изменения цветов и других параметров.
https://medium.freecodecamp.org/how-to-quickly-prototype-apps-with-css-grid-and-css-variables-8d3d96d68eaa

Серия из трёх постов про использование гридов в IE. Автор показывает основные проблемы и как их решить или спрятать.
https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
https://css-tricks.com/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps/