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

Статья про опыт оптимизации страницы магазина. Обратите внимание как как они подходили к метрикам и тестировали в продакшене. Хороший опыт, чтобы перенять.
https://medium.com/idealo-tech-blog/how-we-got-into-the-top-3-of-the-fastest-e-commerce-websites-62cb8dafad05

Я уже постил ссылку на эту статью на английским, но теперь вышел перевод. Статья про стилизацию компонентов в зависимости от их количества на чистом CSS. Очень круто, что для таких задач всё меньше нужен JS.
http://css-live.ru/articles/resheno-s-pomoshhyu-css-logicheskaya-stilizaciya-na-osnove-chisla-elementov.html

Firefox решил окончательно избавиться от старых расширений XUL. У FF была специальная версия с долгой поддержкой, которая закончится в сентябре. Как любят говорить “ушла эпоха”.
https://tproger.ru/news/firefox-add-ons-remove/

Доброе утро!

Главная новость дня — релиз Babel 7.0. Пакеты в npm теперь живут в одном неймспейсе. Удалили stage и годовые пресеты. Теперь вместо них preset-env, которые позволяет задать целевую среду исполнения. Конфиг теперь можно писать на JS. Поддержка TypeScript. И многое другое. Я уже продолжительное время живу на бете и проблем никаких не было. Для миграции со старых версий даже сделали отдельный инструмент.
https://babeljs.io/blog/2018/08/27/7.0.0

Google Maps меняют ценовую политику. Лимиты стали меньше, а цены больше. По ссылке обзор новых цен и сравнение с другим картографическими сервисами.
https://www.inderapotheke.de/blog/farewell-google-maps

Доброе утро!

Яндекс полностью убирает механизм ранжирования сайтов в зависимости от количества ссылок ведущих на них. И теперь позиция сайта будет зависеть от качества контента и полезности сайта для юзера.
https://webmaster.yandex.ru/blog/yandeks-zamenyaet-tits-na-iks-novyy-pokazatel-kachestva-sayta

Начиная с версии 69 Chrome не будет менять фокус на страницу в бэкграунде если в ней был вызван метод window.confirm(). Он просто вернёт false. Это еще один шаг к удалению этих ужасных диалогов.
https://www.chromestatus.com/feature/5140698722467840

Небольшое объявление: я занимаюсь переделкой сайта канала (breakfastjs.com), и мне нужна помощь человека, понимающего в дизайне. Если интересно, то пишите в личку (@slonoed).

Доброе утро!

Большая и хорошая статья про UX форм на мобильных устройствах.
https://www.smashingmagazine.com/2018/08/ux-html5-mobile-form-part-1/

Экосистема Puppeteer (инструмент для e2e тестирования) обрастает новыми инструментами. Вот, например, плагин, который записывает действия в браузере и создаёт на их основе код для теста, как это делает плагин для селениума.
https://github.com/checkly/puppeteer-recorder

Новость около фронтенда. Один из мейнтейнеров Lerna решил включить в лицензию пункт, запрещающий использовать библиотеку компаниям, которые не нравятся ему по политическим мотивам. Это и смешно и грустно. К счастью, уже откатили, но всё равно неприятно, что политику тащат в Open Source.
https://github.com/lerna/lerna/pull/1616

Доброе утро!

JavaScript не нужен! (* на медленном соединении). Похоже есть ненулевой шанс, что Chrome на андроиде начнет отключать JS при плохой сети. В целом в этом есть смысл. Задайте себе вопрос: ваш сайт будет работать (хотя бы частично) без JS?
https://www.chromestatus.com/feature/4775088607985664

Небольшая заметка про основные элементы безопасности веб-приложения. Хорошее место для старта (ну если не считать английского языка).
https://medium.freecodecamp.org/a-quick-introduction-to-web-security-f90beaf4dd41

Небольшая заметка про px vs em. В ней есть небольшая, но интересная статистика. Про то, что 3% пользователей используют масштабирование на сайте. Хотелось бы, конечно больше статистики на эту тему.
https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5cfb20831773

Доброе утро!

Очень позитивная новость с утра: Firefox будет предотвращать отслеживание пользователя между сайтами. Такое же поведение давно есть в Safari. Было бы здорово, чтоб остальные браузеры подтянулись.
http://www.opennet.ru/opennews/art.shtml?num=49201

Подборка из шести докладов на фронтенд тематику. Все практичные, все полезные. К тому же на русском
https://habr.com/company/oleg-bunin/blog/420965/

Коллекция JS проектов на тему искусственного интеллекта. Есть исходники.
https://aijs.rocks/

Доброе утро!

Большой и детальный гайд по использованию связки GraphQL+ExpressJS+Postgres. Автор пошагово проходит через настройку и написание кода.
https://www.robinwieruch.de/graphql-apollo-server-tutorial/

JS уже давно имеет многопоточность в виде iframe и воркеров. Но общение с ними было всегда через postMessage или shared arrays. Теперь появилась возможность (Chrome) рисовать на канвасе из воркера. То есть мы получаем многопоточность, но с ограниченым API.
https://developers.google.com/web/updates/2018/08/offscreen-canvas

Газета Guardian выложила код фронтенда на гитхаб. Хорошо документирован и использует Flowtype.
https://github.com/guardian/frontend

Доброе утро!

Я вчера писал, что iframe живёт в отдельном потоке, но один из читателей канала справедливо заметил, что это не так. У команды Chromium есть планы, но реализации нет нигде.
http://www.chromium.org/developers/design-documents/oop-iframes

Начиная с Chrome сортировка массивов будет стабильна даже если в массиве больше элементов, так как будет использоваться новый алгоритм. Но удивительно то, что были разработчики, которые использовали эту скрытую стабильность. Это так же плохо как надеятся на порядок ключей в JSON, ведь в доках про это ни слова. А теперь еще и браузер костыль добавляет.
https://mathiasbynens.be/demo/sort-stability

Небольшое введение в Web Locks API. Это механизм позволяющий синхронизировать данные между вкладками на безопасный манер. В статье есть пример про предотвращение дубликатов транзакций в трейдерском приложении.
https://www.sitepen.com/blog/2018/08/14/cross-tab-synchronization-with-the-web-locks-api/

Доброе утро!

Вчера обновился Chrome, в котором полностью изменили дизайн. Если хотите вернуть старый дизайн, то на странице chrome://flags надо выбрать UI Layout for the browser = Default.
Добавили поддержку непрямоугольных экранов (напомню, что теперь это не только iphone x). Остальные фичи довольно небольшие.
https://developers.google.com/web/updates/2018/09/nic69

Большая статья про производительность React приложений. Много теории и много практики.
https://www.simform.com/react-performance/

Архив веб-дизайна. Очень много выглядит архаично, но есть интересные идеи. В целом интересно посмотреть как выглядел веб раньше.
https://www.webdesignmuseum.org/

Доброе утро!

Firefox теперь поддерживает вариативные шрифты. Теперь у них поддержка среди всех основных браузеров. Очень хочется видеть больше продуктов их использующих.
https://hacks.mozilla.org/2018/09/variable-fonts-arrive-in-firefox-62/

Интересная заметка про Google, который переходит на TypeScript. Closure compiler когда то опережал своё время, но теперь время двигаться дальше.
http://neugierig.org/software/blog/2018/09/typescript-at-google.html

Чтиво на выходные для тех, кто хочет освоить Vue: две переведённые книги. Одна про сам фреймворк ($10), другая про тестирование ($5). Написаны хорошо, разжевывается подробно. Сам я больше люблю документацию читать, но если вам эти книги сэкономят час времени на изучение, то считай покупка отбилась.
https://leanpub.com/vuejs2-russian
https://leanpub.com/testingvueru

Доброе утро!

Подборка различной статистики про пользователей браузера Firefox на десктопе. Из интересного: топ расширений — адблокеры, Intel лидирует по железу, экраны в 1366 точек всё ешё доминируют, flash у половины.
https://data.firefox.com/

Небольшая статья про написание стилей для печати.
https://www.sitepoint.com/css-printer-friendly-pages/

Список новых фич в инструментах разработчика Chrome 70. Наконец есть автодополнение при заполнении поля при создании условной точке останова.
https://developers.google.com/web/updates/2018/08/devtools

Доброе утро!

Сейчас идёт сбор данных в опросе State of JavaScript. Не поленитесь, пройдите. Результаты будут в ноябре.
https://stateofjs.com/

Небольшая заметка про использование функции window.matchMedia, которая позволяет работать с медиа выражениями в JS.
https://www.sitepoint.com/javascript-media-queries/

Доброе утро!

Перевод книги (ну или очень большой статьи) про оптимизацию изображение. Охвачено всё, что только можно.
https://habr.com/post/422531/

Очень простая и маленькая карусель без зависимостей. Может стать простой альтернативой популярному Slick
https://pawelgrzybek.github.io/siema/

Нашел очень удобную тулзу: заметки для кода с возможностью выполнения. Можно быстро пробовать идеи и сохранять код. Поддерживает много языков.
https://github.com/netgusto/nodebook

С Днём Программиста!

Сегодня хочу рассказать про несколько книг, которые доказали свою полезность в профессии. Вполне возможно вы их уже читали и перечитывали.

Clean Code (R. Martin). Та самая книга, которую можно найти в любом топе “книг для программистов”. По сути она про правильный дизайн ПО. А это то, что отличает “кодера” от инженера.

Code complete (S. McConnell). Это моя любимая. Книга о практических аспектах программирования (именования переменных, написание циклов и т.д.).

Don’t make me think (S. Krug). Нельзя сказать, что эта книга для всех программистов, но точно полезна тем, кто занимается фронтендом. В ней описан простой работающий подход к тестированию интерфейсов.

Доброе утро!

Очень крутой сервис Glitch.me. Совмещает в себе совместный редактор кода и облачный Nodejs сервер. Можно накидать приложение на expressjs и тут же посмотреть его в живую. Подойдёт как для собеседования так и для совместной работы над задачей. По ссылке статья с описанием различных фич.
https://blog.bitsrc.io/introduction-to-glitch-for-node-js-apps-in-the-cloud-cd263de5683f

Я очень люблю чеклисты для проверки сайтов: позволяют не забыть мелочи. Вот небольшой (аж 4 пункта) чеклист на проверку настройки шрифтов.
https://www.zachleat.com/web/font-checklist/

Наткнулся на такой интересный эффект “открывания” футера сайта, используя position:sticky
https://codepen.io/rpsthecoder/pen/PdYJBW

Доброе утро!

Статья об использовании CSS Shapes. Фича позволяет задать форму обтекания текстом с помощью картинки (проще посмотреть скриншоты).
https://www.smashingmagazine.com/2018/09/css-shapes/

Начиная с Chrome 70 (сейчас в бете) браузер начинает поддерживать авторизацию с помощью устройств идентификации. Будет работать авторизация на макбуках и андроидах со сканером отпечатка. Если вы уже реализовали такой способ, поделитесь статистикой конверсий.
https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential

Reporting API. С помощью заголовка в ответе к странице указать куда браузеру нужно отправлять ошибки. Это может позволить отказаться от систем логирования на клиенте (таких как Raven) и уменьшить размер бандла.
https://developers.google.com/web/updates/2018/09/reportingapi

Доброе утро!

Сегодня выходит релиз ios 12 и watchos 5. И есть интересные фичи в Safari: улучшили инпуты для паролей, добавили полноэкранный режим на айпадах, поддержку плеера 3d моделей, и другой. Со стороны безопасности изменили алгоритм хранения кук третих сайтов. А вот на часах теперь будет отображаться HTML в email. А ваша рассылка поддерживает часы?)
https://developer.apple.com/safari/whats-new/

С помощью конического градиента можно сделать круговой индикатор прогресса на чистом CSS.
https://blog.logrocket.com/new-in-chrome-69-building-progress-doughnut-charts-with-conical-gradients-356820b1d081

Формализованный подход к выбору сторонних библиотек. Автор выбрал хорошие метрики для оценки. Я при выборе библиотек обычно смотрю на активность разработки и код, но такой комплексный подход мне кажется более логичным.
https://medium.freecodecamp.org/the-12-things-you-need-to-consider-when-evaluating-any-new-javascript-library-3908c4ed3f49

Доброе утро!

Интересная бага в WebKit. Большое количество вложенных div со свойством backdrop-filter выедают память и крешат девайс. Edge ведёт себя лучше — просто пишет, что страница сломана. Вряд ли вы используете это свойство в продакшене, но будте аккуратны.
https://habr.com/post/423411/

Довольно приятно выглядящий набор компонентов для Vue. Смущает только выбор шрифта и размера по умолчанию. Но если это можно настроить, то вполне хороший набор для создания прототипов.
https://lusaxweb.github.io/vuesax/

Новый инструмент для дизайна сайтов — Framer. В статье показаны разные примеры использования и трюки. Я пока ещё не тыкал, потому ничего конкретного сказать не могу.
https://medium.com/@PavelLaptev/framer-x-beta-overview-and-examples-58dba80a6865

Доброе утро!

После всей критики AMP, в Google таки решили работать с сообществом. Теперь они создают комитет, в который войдут представители разных компаний.
https://www.searchengines.ru/amp-governance.html

Bing тоже начал поддерживать AMP. Всё идёт к тому, что это станет “новым вебом”.
https://blogs.bing.com/Webmaster-Blog/September-2018/Introducing-Bing-AMP-viewer-and-Bing-AMP-cache

React DevTools обзавёлся профайлером. Смотреть производительность отрисовки компонентов можно были и раньше, используя стандартный профайлер, но очень неудобно. Новый инструмент более наглядный.
https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

Доброе утро!

“Низковисящий фрукт веб-производительности”. Подборка из 10 пунктов, которые позволят максимально ускорить сайт, приложим минимум усилий. Скорее всего большую часть советов вы уже используете.
http://mediatemple.net/blog/tips/low-hanging-fruit-web-performance/

Команда Unity (игровой движок) опубликовала большой пост про различие в производительности между asmjs и WebAssembly. Графики ожидаемый: WebAssembly намного лучше.
https://blogs.unity3d.com/2018/09/17/webassembly-load-times-and-performance/

Ну и ещё немного про игры: забавная “игра” по типу сапёра, где надо указать какие JS значения равны при использовании оператора ==. Проверьте, насколько хорошо вызнаете эту базовую часть JS.
https://slikts.github.io/js-equality-game/