Доброе утро!

В октябре выходит Nodejs 10, который станет новой LTS версией. К счастью изменения в основном небольшие. Для пользователей ноды самое интересное, что в ошибках появятся коды, а значит не придется основываться на тексте сообщения. Вместе с нодой выдет и Npm 6, в котором обещают увеличение производительности аж в 17 раз.
https://medium.com/p/bf07abfa9076

Статья, которая напоминает ещё раз, что стили для активных элементов в фокусе не мелочь и надо делать их правильно. Ведь для многих людей это является важной фичей, без которой пользоваться сайтом невозможно.
http://css-live.ru/articles/fokusy-so-stilyami-dlya-fokusa.html

Амазон выпустил свой мобильный браузер для рынков развивающихся стран. Пока подробностей особо нет, но учитывая размеры и влияние Амазона могу представить, что они протолкнут его в массы.
http://gagadget.com/36265-amazon-vyipustil-svoj-mobilnyij-brauzer/

Доброе утро!

Небольшой гайд про новые (относительно) единицы измерения в CSS: vh и vw. Если очень интересное применение: делать вставки в тексте, которые занимаю всю высоту экрана.
https://alligator.io/css/viewport-units/

Интерактивный пример того как одинаковые сетки можно делать на флексах и гридах.
http://www.gridtoflex.com/

Те из вас, кто был подписан на почтовую рассылку http://breakfastjs.com/, вчера получили первую подборку. Постараюсь делать её периодичной и выделять там самое важное и то, что не попадает на канал.

Доброе утро! Праздники кончились (почти) и я снова возвращаюсь с утренними подборками.

Очень качественный и большой гайд, посвящённый регулярным выражениям в JS. В нём так же рассмотренные все новые фичи, включая именованные группы и флаги.
https://flaviocopes.com/javascript-regular-expressions/

Впечатляющий пример использования CSS не по назначению — рисование картины тольк с помощью стилей.
https://github.com/cyanharlow/purecss-francine

Сегодня те, кто подписан на email рассылку (смотри предыдущее сообщение) получат новый выпуск, в котором будут все интересные ссылки за прошедшую неделю.

Доброе утро! Надеюсь вам понравилась вчерашняя рассылка на email.

Edge был последним браузером, который внедрил Service Workers. А значит теперь они поддерживаются всеми современными браузерами. Конечно, остался IE11, доля которого колеблется на уровне 1-2%, что достаточно много. Но уже нет повода не использовать воркеры.
https://jakearchibald.github.io/isserviceworkerready/

Селекторы 4го уровня CSS. Меня они немного пугают, похоже CSS превращается в язык, на котором можно будет писать ну очень плохой код.
https://medium.com/@stylesam/intriguing-css-level-4-selectors-e33756fc5ef

Нам в команду нужны medium и senior фронтендеры. Описание по ссылке. Резюме слать мне в чат или на email@slonoed.net
http://telegra.ph/Software-Engineer---Frontend-Aarhus-Denmark-05-02

Доброе утро!

Небольшая библиотека для декларативного описания структуры и анимации блоков на странице. Выглядит интересно. Вполне может оказаться "той самой" библиотекой для создания лендингов и простых страниц.
https://layerjs.org/

2ГИС опубликовали статью про вёрстку страниц на арабском (справа на лево). Я даже и не знал, что там столько нюансов. Даже если вы не  поддерживаете такие языки, всё равно статью прочитать стоит — узнаете много интересного.
https://habr.com/p/358148

В npm, начиная с версии 5.10, появилась команда audit, котора может показать проблемы в зависимостях вашего проекта. Фича, которую уже давно хотели и решали сторонними утилитами. Ещё бы ввести аудит кода, который публикуется в npm, но это пока мечты.
https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure

Доброе утро!

Удивительно, но в FF до сих пор не было поддержки script[type=module]. Но начиная с 60й версии это будет работать. Конечно для того, чтобы от них появилась польза хорошо бы иметь http2, иначе всё равно придётся собирать бандл.
https://bugzilla.mozilla.org/show_bug.cgi?id=1438139

Небольшая консольная утилита, которая позволяет интерактивно выбирать npm скрипты для запуска. Очень удобно, когда работаешь с новым проектом и не хочется постоянно смотреть в package.json
https://github.com/ruyadorno/ntl

Я тут начал небольшой проект по созданию отдельного инструмента для рефакторинга JS. Если у вас есть идеи как улучшить, или пример похожих штуковин, то напишите мне.
https://github.com/slonoed/jsref

Доброе утро!

Оказывается в CSS уже есть зачатки “анимации по траектории” — мощного механизма для сложных анимаций. Для большинства это не особо нужная вещь, но её развитие позволит создавать библиотеки анимаций на чистом CSS там, где раньше приходилось использовать JS.
http://css-live.ru/articles/dvizhenie-po-traektorii-v-css-pomimo-bolshoj-trojki-svojstv.html

В Microsoft Excel появится возможность использовать JS для написания функций. Я очень удивлён, что это появилось только сейчас. Давно пора было выкинуть VB.
https://dev.office.com/blogs/azure-machine-learning-javascript-custom-functions-and-power-bi-custom-visuals-further-expand-developers-capabilities-with-excel

Сравнение различных библиотек для работы со стейтом в React. Хорошая отправная точка, чтобы понять разные подходы.
https://hackernoon.com/the-react-state-museum-a278c726315

Доброе утро!

Статья про новые фичи JS, такие как символы итераторы, генераторы. В статье не только показывают примеры как ими пользоваться, но и рассказывается зачем они были добавлены в язык и когда ими надо пользоваться.
https://medium.freecodecamp.org/4003d7bbed32

Список, в котором собраны гайды по созданию чего либо. Например криптовалюты или игрового движка. Примеры на разных языках, в том числе и на JS.
https://github.com/danistefanovic/build-your-own-x

Небольшое интро по работе с дочерними процессами в NodeJS. Такое бывает нужно при создании консольных утилит, а так же, когда внутри ноды надо запустить другую утилиту и работать с её вводом/выводом.
http://2ality.com/2018/05/child-process-streams.html

Доброе утро!

Разработчики Google предлагают начать использовать новую метрику при оценке скорости работы сайта — задержка первого ввода (First Input Delay). Это время с начала загрузки страницы и до того момента, когда пользователь получил фидбек на действие (клик, тап, фокус). Учитывая последние тенденции, я не удивлюсь, если эта метрика начнет влиять на ранжирование в поиске.
https://developers.google.com/web/updates/2018/05/first-input-delay
Есть небольшая либа, которая позволяет трекать эту метрику https://github.com/GoogleChromeLabs/first-input-delay

Всё что вы хотели знать о кастомных свойствах CSS, но боялись спросить. Большой гайд, в котором не только подробное описание как и когда использовать. Но главное когда и как не использовать, чтоб не получить нечитаемый код.
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/

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

Когда я сталкиваюсь с новым языком, я первым делом иду на https://learnxinyminutes.com, где собраны очень короткие описания. Этого обычно достаточно, чтобы читать код.

Когда мне нужно улучшить свои знания в области какого либо фреймворка или библиотеки, я ищу видео уроки на https://egghead.io/. Они всегда небольшие и качественно сделано.

Если смотреть видео лень, то на сайте https://alligator.io/ можно найти много материала по фронтенду.

Доброе утро!

Большая статья про редизайн Smashing Magazine. Описан не только сам процесс, но и разные подходы в выборе элементов для интерфейса. Очень рекомендую.
https://habr.com/company/jugru/blog/358642/

В хром недавно выкатили фичу, которая выключала автопроигрывание звука, чтобы пользователей не доставала реклама. А заодно сломали звук в играх. Сейчас они это откатили, но обещают вернуть осенью и дают время поправить код. Похоже Crhome становится новым IE, навязывая свои правила на правах монополиста.
https://tproger.ru/news/chrome-autoplay-policy-delaying/

Практическое применение всего того, что нам рассказывали на уроках математики (тригонометрии) в школе. Автор показывает как сделать небольшую анимацию на JS.
https://habr.com/p/358496/

Доброе утро!

Я тут понял, что каналу уже больше года. И каждое утро (ну ладно, почти каждое) я пишу новости для вас. Надеюсь это помогло вам в вашей профессиональной деятельности.

Как сделать переключаемые темы с помощью CSS переменных. Конечно, такого можно добиться препроцессорами и несколькими CSS файлами, но тогда увеличивается время загрузки, а с переменными работает отлично.
https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a

Вот интересная новость. Начиная с Chrome 69, HTTPS сайты перестанут помечаться как безопасные. Я думаю причины тут два. Во-первых все сайты должны иметь https и странно это поведение как то выделять. Достаточно отмечать небезопасными HTTP. Во-вторых HTTPS не означает полную безопасность, а лишь означает что трафик шифрованный.
https://itc.ua/news/iz-google-chrome-ischeznut-znachki-bezopasnosti-soedineniya-na-https-saytah/

Большая статья о том как использовать Proxy. В конце очень краткий список применений и я хочу заметить, что он неверный. Использовать прокси стоит лишь для побочных целей (отладка/логирование/итд), но не для бизнес логики. Иначе можно сделать код нечитаемым.
https://www.atyantik.com/proxy-javascript-es6-feature/

Доброе утро!

Качественный материал о кривых Безье. С наглядными интерактивными примерами, кодом и математикой, лежащей за кривыми.
https://www.joshwcomeau.com/posts/dynamic-bezier-curves

Пример создания плавающих меток для инпутов на чистом CSS с поддержкой доступности. Стоит взять на вооружение.
https://medium.com/@eugeniolujambio/accessible-css-only-floating-labels-74bf9173bc5f

Доброе утро!

Размышления на тему использования GraphqQL. Особенно меня заинтересовал раздел, где автор призывает не использовать GraphQL как модель данных для приложения. Советую ознакомится со статьёй, если вы работаете с GraphQL или собираетесь.
http://artsy.github.io/blog/2018/05/08/is-graphql-the-future/

Тут снова заговорили об использовании CSS селекторов во фрагменте URL для скролла. Оказывается эта идея витает давно и первое предложение датировано 2012м годом. Было бы здорово получить больше возможностей для указания позиции на странице в ссылке.
https://github.com/bryanmcquade/scroll-to-css-selector

Ещё одна статья про стилизацию кнопок. В ней так же описано использование селектора :focus-visible, который должен со временем появится в браузерах.
https://fvsch.com/code/styling-buttons/

Доброе утро!

Библиотека Material-UI для React получила релиз номер 1. Сама библиотека появилась три года назад и всё это время улучшалась. Иронично, что релиз состоялся после того, как Google анонсирован вторую версию своего дизайна.
https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb

Очень интересная обёртка над веб-компонентами. Использует декларативный API. Вполне возможно, что нечто такое станет следующей большой штукой в вебе.
https://github.com/hybridsjs/hybrids

Небольшой фреймворк для создания веб-приложений (сервер + клиент), использующий Vue внутри. Особо впечатляющим не выглядит.
https://github.com/egoist/saber.js

Доброе утро!

Две статьи про использование заголовков в ответах от сервера. В первой статье есть таблица с “полезностью”. Я советую пробежаться по всем, которые помечены как Useful и освежить в памяти принципы их использования.
https://www.fastly.com/blog/headers-we-dont-want
https://www.fastly.com/blog/headers-we-want

Google заявил, что с первого июля будет индексировать мобильные версии сайта в первую очередь и поднимать их выше, чем не адаптированные.
https://habr.com/post/359092/
Вот по этой ссылке можете проверить ваш сайт.
https://search.google.com/test/mobile-friendly

Доброе утро!

Результаты опроса про тулинг во фронтенде. Есть данные по динамике (2016, 2018). React уверенно становится новым jQuery (в плане использования). Есть и смешные моменты: 50% разработчиков считает, что npm scripts — это таск ранер. Есть грустное: 43% не тестирует код.
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

Коллекция веб-компонентов в стиле мокапов. Применение ограничено, но сделаны они очень качественно. Можно использовать как пример кода, использующего lit-html
https://wiredjs.com/

Ещё одна статья про использование вариативных шрифтов. Я уже говорил не раз, но за этими шрифтами будущее типографики веба и UI.
https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html

Доброе утро!

Новое в Chrome 67. PWA на десктопе, BigInt, новый API для сенсоров. Но больше всего меня заинтересовала поддержка Web Authentication API, которая позволит избавиться от пароля и использовать сам браузер для аутентификации.
https://developers.google.com/web/updates/2018/05/nic67

Один из читателей вчера прислал ссылку на свою подборку материалов по lit-html. Там есть что почитать интересного.
https://github.com/web-padawan/awesome-lit-html

Реализация довольно интересного эффекта: изменение соседей при наведении на элемент.
https://codepen.io/Tepec/pen/deBZVa

Доброе утро!

Вы уже, наверное, сыты по горло новостями про GDPR, а тем более спамом, которым приходил на почту. Но вот на Хабре вышел перевод довольно неплохой статьи указывающей детали. Хотя закон такой размытый, что вероятность огрести есть у всех.
https://habr.com/post/359014/

Kit — окружение для создания своей библиотеки компонентов, не заморачиваясь с конфигами.
https://compositor.io/blog/introducing-kit/

На следующей неделе я в отпуске, поэтому утренней подборки не будет. Вместо этого сделаю email рассылку, на которую можно подписаться на сайте канала
https://breakfastjs.com/

Доброе утро!

Тем, кто подписан на email рассылку вчера пришло письмо с ссылками за предыдущую неделю. А сегодня новости про Google.

Google продолжает делать “свой веб с рекламой и кастомными компонентами.“ AMP страницы теперь поддерживают больше фичей.
https://amphtml.wordpress.com/2018/06/06/2058/

Ещё немного про GDPR. Никто до сих пор не может понять можно ли использовать Google Fonts.
https://github.com/google/fonts/issues/1495
Посему вот инструмент для скачивания шрифтов из сервиса. Только я не уверен, что скачанные шрифты можно легально использовать.
https://github.com/Bloggify/google-font-downloader

Google: “заблокированные в robot.txt страницы могут по-прежнему индексироваться при наличии ссылок, указывающих на них”
https://www.searchengines.ru/google-robots-txt.html