Доброе утро!

Ещё одна хорошая статья про гриды на русском. Автор показывает как использовать grid-area — очень мощный инструмент для организации блоков, который особенно полезен, если на декстопе и мобилке совсем разные сетки.
https://habr.com/company/poiskvps/blog/423709/

Пример использования пакета pkg для упаковки js кода в исполняемый фал для любой платформы. С помощью него можно делать кроссплатформеные тулзы.
https://dev.to/jochemstoel/bundle-your-node-app-to-a-single-executable-for-windows-linux-and-osx-2c89

Статья про игру Underrun, написанную на JS. Примечательно то, что вся игра с сжатом виде занимает меньше 10КБ. Посмотрите демку — результат впечатляет. Там же есть ссылки на код, которы интересно поразбирать.
https://phoboslab.org/log/2018/09/underrun-making-of

Доброе утро!

В Chrome 69 была добавлена очень сомнительная фича: авторизация в сервисах гуглах автоматически логинит в самом браузере. В добавок к этому очистка браузера не удаляет куки гугла. Благо, что после реакции пользователей Google собираются откатить эти изменения, но осадочек остался.
https://www.blog.google/products/chrome/product-updates-based-your-feedback/

Статья про новую фичу Yarn: Plug’n’play, позволяющую обойтись без установки node_modules в каждый отдельный проект, а использовать общий кэш. Делается это при помощи изменения “require”.
https://habr.com/post/423487/

Доброе утро!

Chrome на Android уже начал блокировать скрипты на медленном (2g) соединении. При этом он отправляет специальный заголовок на сервер. В идеале получив такой, сайт должен выдать легкую читабельную версию. В статье подробности и примеры раных сайтов.
https://timkadlec.com/remembers/2018-09-06-chromes-noscript-intervention/

Хорошая статья про то как отрисовываются страницы в браузере. Будет полезна тем, кто только начал разбираться с вебом.
https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10

Новая версия create-react-app. К сожалению, hot reloading так и не завезли.
https://github.com/facebook/create-react-app/issues/5103

Доброе утро!

Шпаргалка API консоли браузера (Chrome) с примерами. Я для себя нашел несколько новых функций.
https://medium.com/@stylesam/api-командной-строки-консоли-справка-комманд-d5b87608cbf1

Началась работа над стандартом для кастомизации полос прокрутки. Можно будет задать цвет и ширину полос CSS свойствами элемента, что сильно отличается от того, что используется сейчас с префиксом webkit (псевдоэлементы)
http://css-live.ru/vecssti-s-polej/css-scrollbars-fpwd.html

Наткнулся на довольно забавный эффект “динамического плейсхолдера”, которым хочу поделиться.
https://codepen.io/joelewis/pen/ePOrmV/

Доброе утро!

Если вы уже начали использовать гриды, то скорее всего иногда задаётесь вопросом “а зачем тогда флексы?”. По ссылке статья, которая пытается ответить на этот вопрос.
https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

WYSIWYG редактор, написанный на JS и отлично работающий в вечнозеленых браузерах. Интересно, что редактор не работает напрямую с HTML внутри contenteditable, а использует свою собственную модель внутри.
https://trix-editor.org

Библиотека для работы с русскими названиями и именами. Умет склонять по падежам города и имена, а так же определять пол по имени.
https://github.com/nodkz/lvovich

Доброе утро!

Продвинутая техника для инициализации скриптов на сайте. Автор предлагает разбивать код на таски и запускать их во время простоя браузера, но при этом давая возможность запускать их вне очереди, если возникла необходимость.
https://philipwalton.com/articles/idle-until-urgent/

Вышел create-react-app v2. Обновили зависимости и добавили несколько новых фич. А вот hot reloading так и не завезли.
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

Гайд по использованию Chrome Dev Tools для работы с анимациями. Оказывается, он много чего умеет делать.
https://webdesign.tutsplus.com/articles/quick-tip-chrome-animation-dev-tools--cms-31505

Доброе утро!

Большая статья с примерами про использование анимации в интерфейсах. Очень советую к прочтению.
https://habr.com/post/424383/

Вышел Edge 18. Добавили очень много изменений. Самое интересное: поддержка Web Authentication API. Так же немного улучшили Dev Tools. И да, доля Edge до сих пор меньше IE11.
https://docs.microsoft.com/en-us/microsoft-edge/dev-guide

Небольшое объявление. Я буду на московском HolyJS в ноябре. Если вы тоже, то пишите, всегда интересно пообщаться.

Доброе утро!

Хорошая статья про применение патерна pub-sub во фронтенде.
https://itnext.io/why-every-beginner-front-end-developer-should-know-publish-subscribe-pattern-72a12cd68d44

Генератор статических сайтов Cogear. От Gatsby отличается тем, что позволяет использовать не только React, а также Vue и Angular.
https://cogearjs.org

Node.js Foundation и JS Foundation заявили об объединении. Такие объединения — всегда хорошо и позволят избежать несовместимости стандартов.
https://tproger.ru/news/nodejs-javascript-union/

Доброе утро!

Большая статья про доступность от Яндекса. Читать интересно и познавательно.
https://habr.com/company/yandex/blog/424879/

Сайт с гайдами про фронтенд. Все статьи небольшие и хороши для быстрого изучения. Обратите внимание на секцию Network. Часто вижу недостаток понимая работы сети.
https://flaviocopes.com/

Я обновил сайт канала, за дизайн огромное спасибо читателю канала. Модерации там сейчас нет, потому ссылки могут попадаться разные. Сайт написан на ReasonML и живет в AWS Lambda.
https://breakfastjs.com

Доброе утро!

Большая и качественная статья про производительность, а точнее, про то как выстраивать метрики. Там есть ссылки на полезные инструменты.
https://medium.com/@addyosmani/start-performance-budgeting-dabde04cf6a3

Заметка на хабре про то, почему стоит использовать ReasonML и ReasonReact. Там всё верно, но автор не рассказал про минусы языка, например отсутствие нормального синтаксиса для асинхронных операция (только колбеки и промисы).
https://habr.com/company/ruvds/blog/424965/

В новом стандарте CSS изменят поведение псевдокласса :empty, что может сломать существующие сайты. Проверьте, не используете ли вы его.
http://css-live.ru/vecssti-s-polej/new-empty-pseudo-class-selectors-level-4.html

Доброе утро!

В Firefox Dev Tools появился удобный инструмент для визуального редактирования clip-path.  Удобно, когда надо выравнять изображение.
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes
Плюс обучающее видео
https://www.youtube.com/watch?v=w8pksaGhjfA

Firefox стал поддерживать WebP (до этого был только Chrome). Есть шанс, что этот формат видео (изображений) станет единым для веба.
https://www.cnet.com/news/firefox-to-support-googles-webp-image-format-for-a-faster-web/

Интересная атака на сайты, использующие jQuery. Если кратко, то не используйте jQuery(location.hash). Но читать очень увлекательно.
https://blog.sheddow.xyz/css-timing-attack/

Доброе утро!

Статья про композицию компонентов в React (но пойдёт и для других фреймворков). Автор показывает несколько хороших примеров.
https://developers.digital.abc.net.au/2018/09/28/composing-components/

Простое объяснение почему в HTML не стоит активно добавлять новые элементы.
http://css-live.ru/html5/pochemu-my-ne-dobavim-v-html-element.html

Наткнулся тут на популярную тулзу, которая предлагает “удобные” хуки для гита. В качестве примера у них запуск тестов перед коммитом. Довольно плохая практика делать локально то, что можно выкинуть в CI.
https://github.com/typicode/husky

Доброе утро!

Гайд по использованию Winston — библиотеки для логов в NodeJS. Сама библиотека довольно мощная и в небольших проектах может и не нужна.
https://thisdavej.com/using-winston-a-versatile-logging-library-for-node-js/

Результаты js13kGames 2018 (соревнование по написанию игр на JS, с размером меньше 13 КБ). Очень интересно разглядывать код таких игр.
https://blog.github.com/2018-10-05-js13kgames-highlights-2018/

Новость около фронтенда: новые ARM процессоры содержать быстрый способ переводить float в int, что может быть использовано браузерами для ускорения   JS.
https://daringfireball.net/linked/2018/10/11/arm-v83-javascript

Доброе утро!

Список хороших и плохих практик при разработки софта. Хочу отметить пункт про тесты: если тесты сложно писать и долго запускать, то писать их будут очень неохотно.
https://guides.hexlet.io/check-list-of-engineering-practices/

Небольшая заметка про рендер в React. Пойдёт тем, кто только начал работать с фреймворком.
https://habr.com/company/plarium/blog/426197/

Почитать позже: набор из 7 статей про именование сущностей. Довольно старая публикация, но всё равно актуальная.
http://arlobelshee.com/good-naming-is-a-process-not-a-single-step/

Доброе утро!

В Chrome 70. Появились PWA для Windows. Credential Management API позволит логинится на сайты, используя отпечаток пальца (или face id) на телефоне. На Windows появилась поддержка Web Bluetooth.
https://developers.google.com/web/updates/2018/10/nic70

Разбор новой фичи фейсбука с трёхмерными фото. Интересно читать, как автор расковыривал вебсайт, чтоы понять механизм работы.
https://medium.com/@akella/how-facebook-3d-photos-work-8424cf48f061

Продвинутый топик: пошаговое описание установки TLS соединения. Позволяет, например, лучше понять, почему HTTPS ресурс грузится дольше, чем HTTP.
https://tls.ulfheim.net

Доброе утро!

Статья про отличие правил grid-template и grid-auto при работе с гридами. Советую к прочтению. Такие маленькие нюансы важно знать, чтобы использовать инструмент по полной.
https://bitsofco.de/understanding-the-difference-between-grid-template-and-grid-auto/

В Edge 18 появилась поддержка Web Authentication API. Она уже есть в Chrome, FF, Opera. Safari в разработке. Надеюсь разработчики начнут использовать эту фичу.
https://blogs.windows.com/msedgedev/2018/10/04/edgehtml-18-october-2018-update

Хорошая заметка про использование контекста в React и как его делать правильно, чтобы избежать перерисовок.
https://frontarm.com/articles/react-context-performance/

Доброе утро!

Подборка ссылок под заголовком “33 концепта, которые должен знать каждый JS разработчик”. Там есть базовые, такие как работа с таймерами и продвинутые, такие как каррирование. Для каждого концепта набор ссылок на статьи.
https://github.com/leonardomso/33-js-concepts

Chrome 72 поддерживает поля в классах, как на уровне инстанса, так и статические.
https://twitter.com/chicoxyzzy/status/1053626408772165632

Доброе утро!

Гайд про то как делать разные бандлы для старых и новых браузеров, используя webpack. Это крайне полезная техника в случаях, когда доля старых браузеров (привет IE) мала, поддерживать её надо, но не хочется поставлять большой бандл для новых браузеров.
https://www.smashingmagazine.com/2018/10/smart-bundling-legacy-code-browsers/

Omi — новый фремворк, использующий веб-компоненты. Во многом черпает идеи из React. Он так же использует свой виртуальный DOM, но при этом рендерит компоненты в Shadow DOM. Если встроенные механизмы работы со стейтом и CSSinJS. Написано это дело на TypeScript и весит 4KB (если не считать полифилов). Выглядит очень интересно, хотя экосистемы вокруг пока нет.
https://github.com/Tencent/omi

Доброе утро!

Видео + расшифровка лекции про архитектуру фронтенда. Там про основные критерии качества, разные базовые подходы и сравнение между ними. Читать интересно и полезно.
https://habr.com/company/yandex/blog/425611/

Angular 7. Список изменений не выглядит особо внушительным, больше похоже на минорный апедейт.
https://tproger.ru/news/angular-7-0-release/

Подборка ресурсов для изучения Vue, разбитая по уровнем, от базовых до продвинутых. Я планирую пройтись по всем и разобраться в этом фреймворке детально. Тогда смогу по нему писать более адекватные новости.
https://zendev.com/2018/10/18/how-to-learn-vue-js.html

Доброе утро!

Статья, в которой автор рассматривает разные виды пагинации и объясняет, почему не стоит использовать бесконечный скролл (когда можно сделать по другому). Самый правильный аргумент: пользователь теряет контроль.
https://logrocket.com/blog/infinite-scroll/

Если вам всегда хотелось писать на Perl для браузера, то у вас теперь есть такая возможность. Компилятор Perl в WebAssembly. Зачем? Во славу Сатане, конечно.
https://webperl.zero-g.net

Хочу порекомендовать канал, где я узнаю новости и инсайды о будущем JS, WebAssembly и о других передовых технологиях во фронтенде.
https://t.me/juliarderity