Доброе утро!

Результаты опросов о состоянии JS в этом году. Все более менее ожидаемо. Для практической пользы обратите внимание на категорию "I've USED it before, and would NOT use it again”. То есть те вещи, которы люди пробовали и решили, что больше с таким работать не хотят.
https://stateofjs.com/2017/introduction/

В гридах есть трюк, который я постоянно использую: колонки занимают всю ширину, но при этом имеют минимальную границу. Тут подробней как это использовать:
https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431

Font Awesome 5. Все так же лучший набор бесплатных иконок.
https://fontawesome.com

Доброе утро!

HTML 5.2 теперь рекомендация w3c. А значит браузеры будут поддерживать фичи в нем. Из интересного: <dialog> и дополнительный настройка iframe для платежей.
https://www.w3.org/TR/html52/changes.html#changes

Понемногу появляется тулинг и планы на VR в вебе. Небольшая стать про WebXR. Это новое название старого Web VR, которое должно совместить как виртуальную, так и дополненную реальность.
https://blog.bigscreenvr.com/webxr-is-going-to-bring-vr-and-ar-to-the-masses-heres-why-ad2b790065fa

Stylable — еще один CSS препроцессор, который обещает решить все проблемы. Я смысла в нем так и не увидел.
https://24ways.org/2017/styling-components-typed-css-with-stylable/

В CSS есть функция counter(), которую можно использовать для разных интересных вещей.
https://pineco.de/using-css-counters/

С началом новой недели!

Pa11y — инструмент для автоматизированного тестирования доступности сайта.
https://github.com/pa11y/pa11y

И вот небольшой гайд про то как это использовать
https://24ways.org/2017/automating-your-accessibility-tests/

Еще один гайд в копилку CSS Grid: верстка календаря.
https://snook.ca/archives/html_and_css/calendar-css-grid

Яндекс открыл набор в школу разработки интерфейсов. Это, имхо, один из лучших способов прокачаться на начальном этапе.
https://academy.yandex.ru/events/frontend/shri_msk-2018/

Доброе утро! Сегодня с запозданием (:

Подборка советов при использовании React
https://react.holiday/

Фичи, которые будут удалены или запрещены в Chrome 64. Посмотрити, не используете ли вы что либо из этого
https://developers.google.com/web/updates/2017/12/chrome-64-deprecations

Гайд по использованию консоли Node.js.
https://hackernoon.com/know-node-repl-better-dbd15bca0af6

Доброе утро!

Свежий релиз v8. Улучшения производительности. Например, UglifyJS запущенный на этой вервии работает на 20% быстрее. Потребление памяти уменьшено.
Из фич самое интересное: именованные группы в RegEx
https://v8project.blogspot.dk/2017/12/v8-release-64.html

Большой гайд про то как трекать действия пользователя. Довольно полезно.
https://hackernoon.com/a-user-encounters-a-javascript-error-youll-never-guess-what-happens-next-dc1a6f725490

Если кому то было важно, то появилась русская документация к сборщику Parcel
https://ru.parceljs.org/

Доброе утро!

Как правильно делать кнопку “Домой”
https://www.nngroup.com/articles/homepage-links/

Подборка популярных библиотек для  написания CSS-in-JS
https://alligator.io/react/css-in-js-roundup-styling-react-components/

Safari TP 46. Сервис воркеры включены по умолчанию.
https://webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/

В Edge тоже появились Service Workers.
https://blogs.windows.com/msedgedev/2017/12/19/service-workers-going-beyond-page/

Доброе утро! Сегодня немного запоздало.

Основные события фронтенда в 2017м году. Есть смысл пробежать глазами и понять, что вы пропустили.
https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f

TodoMVC часто используют для примера работы со стеком. При этом в рамках такого маленького приложения сложно показать все преимущества, а главное проблемы. Вот подборка более реальных примеров на разных стеках.
https://github.com/gothinkster/realworld

Наткнулся на библиотеку для работы с изображениями в ноде. Она не новая, но судя по API довольно мощная.
https://github.com/oliver-moran/jimp

Доброе утро!

Как Tinder делали PWA. Очень качественная и подробная статья с метриками и множеством подробностей
https://medium.com/p/78919d98ece0

Подборка лучших статей про Angular за прошедший год
https://malcoded.com/posts/angular-top-2017

Про текущий бюджеты производительности. Как быстро должна загружаться страница?
https://habrahabr.ru/post/345212/

Доброе утро!

“Подборка из 16ти докладов, который стоит посмотреть разработчику и дизайнеру”. Добавляйте в закладки на праздники.
https://www.shopify.com/partners/blog/conference-talks

15го февраля хром начнет блокировать рекламу, которая по его мнению назойлива. У меня есть подозрение, что будут ложные срабатывания на элементах сайта, которые ведут себя похоже.
http://www.opennet.ru/opennews/art.shtml?num=47776

Недавно на канале была ссылка с результатами опроса про состояние JS в 2017м. Вот выводы, которые делает автор опроса:
https://medium.freecodecamp.org/i-just-asked-23-000-developers-what-they-think-of-javascript-heres-what-i-learned-9a06b61998fa

Доброе утро!

Введение в Service Workers на русском. Если еще не разбирались в этой технологии, то самое время
https://habrahabr.ru/company/2gis/blog/345552/

Небольшая заметка про разные техники асинхронной загрузки CSS
https://www.filamentgroup.com/lab/async-css.html

Статья про то, как майнинг в браузерах набирает обороты. Очень надеюсь, что подписчики такого не делают на своих сайтах (по крайней мере скрыто). Однако нужно быть аккуратным и следить за своим кодом. Не удивлюсь, если появятся истории, как в популярную JS библиотеку был встроен майнер.
https://geektimes.ru/post/296865/

Доброе утро!

Небольшой гайд в двух частях про то как добавить поддержку оффлайна
https://css-tricks.com/making-your-web-app-work-offline-part-1/

Как ускорить Nodejs приложение с помощью C++ кода. Не то, чтобы очень практично, но круто, что есть такая возможность.
https://medium.com/the-node-js-collection/speed-up-your-node-js-app-with-native-addons-5e76a06f4a40

Подборка забавных изображений  иконок на CSS. В конце есть гайды как делать такое.
https://codepen.io/EleftheriaBatsou/post/my-journey-with-pure-css-images

Доброе утро!

Сегодня последний выпуск в этом году. Следующий будет 8го января. Для тех, кто хочет провести выходные с пользой я подготовил подборку ресурсов, где вы можете найти много полезного. Некоторые из ссылок уже были в breaskfastjs.

Аж 99 видео с конференций про React и React Native за последние месяцы
http://meetupfeed.com/the-latest-react-and-react-native-conferences-on-99-videos-react-talks-digest-q3-2017/

Подборка лучших статей про Angular за прошедший год
https://malcoded.com/posts/angular-top-2017

Краткая выжимка из всех видео с Chrome Dev Summit 2017. Можно выбрать понравившееся и смотреть.
https://redfin.engineering/i-watched-all-of-the-chrome-dev-summit-2017-videos-so-you-dont-have-to-9b62a593c3cb

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

Если вы только начинаете свой путь как фронтенд разработчик или хотите помочь другому, то могу посоветовать https://htmlacademy.ru/
Меня впечатлило, насколько хорошо и качественно они сделаны.

Еще хочу рассказать про два подкаста (возможно вы уже их слушаете).
Первый — это Веб-стандарты. Один из самых качественных подкастов. Обсуждают новости, технологии. Уклон больше в верстку, чем в JS. Мне как человеку, который с версткой встречается редко слушать крайне интересно.
Второй подкаст — это Frontend Weekend. Выпуски сделаны в виде интервью. Технических деталей не много. Больше инфы про сообщество и конкретные проекты.

А те, кто хочет следить за новостями в период моего отсутствия могут использовать сайт канала где автоматически собираются ссылки с различных источников. К сожалению, никакой модерации там пока нет.
https://breakfastjs.com/

На этом всё. Желаю профессионального и личного роста в будущем году. Увидимся через полторы недели.
С вами был Дмитрий Мананников (@slonoed).

Доброе утро! Breakfastjs снова в эфире!

За прошедшие каникулы произошло довольно много всего. Поэтому сегодня основные моменты.

Про уязвимости Meltdown/Spectre слышно было отовсюду. Что неудивительно: проблема есть чуть ли не в каждом компьютере. Ссылок на уязвимость давать не буду, полно статей на всех языках. Фронтенд это тоже затронуло: Chrome и Firefox выключили SharedArrayBuffer и изменили поведение performance.now(). Если вы не используете эти фичи, то можно ограничится стандартным уровнем паники.

Ещё одна популярная статья в которой рассказывается очевидная вещь: коду, который вы не контролируете нельзя доверять (да неужели?!). Автор показал несколько методов как спрятать вредоносный код для сбора паролей и номеров карт. Пока решение только одно: не использовать непроверенный код в чувствительных частях сайта.
https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5

Ну и неплохая подборка библиотек и технологий, которые стоит изучить в 2018м году.
https://medium.com/p/258d9638e612

Мне очень важно, чтобы канал был вам интересен, потому я прошу ваш выбрать наиболее интересные темы. Это займет несколько секунд, но принесёт много пользы.
https://goo.gl/forms/oa3i6nds6xCGNSWs2

Увидимся завтра, в 9 утра по Москве.

Спасибо всем за отзывы в опросе из предыдущего поста! Все пожелания учту.

Заметка Андрея Романова “Нужны ли CSS-препроцессоры в 2018 году”. Спойлер: нужны
http://andrew-r.ru/notes/?go=all/preprocessors-vs-vanilla-css/

Очень правильная статья про гриды: пример реализации вполне стандартной разметки.
https://medium.com/@petermouland/css-grid-flexbox-solving-real-world-problems-1cce3ecb2b51

Статья про развитие верстальщика. Обратите внимание на схему. Она может довольно спорная, но это неплохое место, чтоб проверить себя: какие области упущены.
https://habrahabr.ru/post/346010/

Bootstrap в привкусом MSDOS. Практической пользы нет. Это просто надо видеть.
https://kristopolous.github.io/BOOTSTRA.386

Доброе утро!

Для серфинга по интернету я использую Safari. Не потому, что мне нравится как он работает, а потому что его разработчики думают о приватности. И тут вот нашел довольно старую, но интересную статейку про то как это работает. В одной части даже используют машинное обучение.
https://webkit.org/blog/7675/intelligent-tracking-prevention/

Чеклист производительности сайта. На самом деле очень качественный и подробный гайд на эту тему. Там очень много ссылок на другие источники.
https://www.smashingmagazine.com/2018/01/front-end-performance-checklist-2018-pdf-pages/

А вот тут началась интересная движуха против Google AMP (легкие страницы, получающие приоритет в выдаче). Я в целом согласен с тем, что нельзя давать гуглу перестраивать веб под себя. При этом я довольно скептичен: пока гугл не прижмут на уровне антимонопольных служб он будет двигаться в этом направлении и дальше.
http://ampletter.org/

Доброе утро!

Кастомные элементы в Firefox. Честно говоря не знаю как относиться к этой технологии, но вероятно она с нами надолго.
https://bugzilla.mozilla.org/show_bug.cgi?id=1406825

Простая и понятная шпаргалка по вертикальному выравниванию. Сохраните на рабочий стол.
http://patrickbrosset.com/lab/2018-01-10-css-alignment-cheatsheet/
И к шпаргалке прилагается статья
https://medium.com/@patrickbrosset/demystifying-css-alignment-2d3ea7a02a36

Война окончена. Победители ликуют. Комитет tc39, который занимается будущим JS обсуждает внесение правки с рекомендацией использовать точку с запятой в коде.
https://github.com/tc39/ecma262/pull/1062/files#diff-3540caefa502006d8a33cb1385720803R11068

Доброе утро!

AWS предоставляет множество способов создать бэкенд без пляски с серверами. Вот очень крутой гайд по использованию AppSync. Это такой способ декларативно создать GraphQL API. Для простых приложений может быть очень полезно.
https://hackernoon.com/aws-appsync-up-and-running-560a42d96ba7

Интрумент для измерения производительности React компонентов. Позволяет выводить данные как в консоль так и в виде таблицы в браузерном расширении.
https://github.com/nitin42/react-perf-devtool

У языка ReasonML появилась документация на русском. https://reasonml.github.io/docs/ru/
Проблема в том, что перевод сейчас — это смесь моего перевода и Google Translate (неизвестно, что хуже). Потому, если вам интересна эта технология, то перевод документации тоже отличный способ изучения и помощи сообществу. Переводить можно тут https://crowdin.com/project/reason/ru

Nerv — супербыстрая (по заявлению автора) альтернатива React. Поддерживает API от React 16 и при этом работает с IE8.
https://github.com/NervJS/nerv

Доброе утро!

На прошлой неделе я писал, что люди недовольны Google AMP. И что гугл перестраивает веб под себя. А тут очень радостная новость. Они хотят принести в веб “Web Packaging Format“. По сути это возможность запаковать бандл с сайтом и подписать его так, что клиенты (например, браузеры) смогут доверять бандлу как оригинальному источнику.
Ссылка на заявление от гугла.
https://amphtml.wordpress.com/2018/01/09/improving-urls-for-amp-pages/
Объяснение того, как технология должна работать
https://github.com/WICG/webpackage/blob/master/explainer.md

Статья про UX тренды мобильной разработки в 2018м. Очень многое подходит и для мобильного веба. Статья качественная с множеством примеров, не проходите мимо.
https://uxplanet.org/12-mobile-ux-design-trends-for-2018-5b4ce7e8445f

Для нативной работы ES модулей в ноде нужно использовать расширение mjs у файлов. Что довольно странно. Тут вот пошла движуха в попытке сделать возможным использование расширения js.
https://gist.github.com/ceejbot/b49f8789b2ab6b09548ccb72813a1054

Доброе утро!

Подборка наиболее популярных проектов в прошлом году. Смотреть на звездочки не особо полезно. А вот просто посмотреть список и незнакомые проекты стоит.
https://risingstars.js.org/2017/en/

Небольшая, но хорошая стать про применение конечных автоматов при написании логики интерфейса. Этот подход надо иметь в инструментарии.
https://medium.com/@vursen/state-machine-for-sticky-blocks-70ca0bf4ee97

React elemental — еще одна библиотека компонентов. Качество так себе, но стилизация иногда выглядит хорошо.
https://linkiwi.github.io/react-elemental-docs/

Доброе утро!

Очень интересная новость. В США слепая женщина подает в суд на сайты, которые не работают с читалками экрана. И это очень круто. Компании не делают сайты для слепых — аудитория маленькая, а затраты есть. Но если будут судебные иски, то дело пойдет. Это сигнал, что движуха вокруг доступности в вебе набирает обороты.
https://nypost.com/2018/01/07/blind-woman-sues-30-websites-over-handicap-accessibility/

Подборка статьей (английский): по одной каждый день в январе.
https://www.javascriptjanuary.com/

У канала новый логотип! За это большое спасибо @maximtsirlin. С ним очень приятно и продуктивно работать.
Посмотреть его другие работы и контактные данные  можно на сайте http://maximtsirlin.com