Доброе утро! Сежая подброка на сегодня.

*Angular 4*
Основные изменения
• Уменьшен размер конечного кода
• Код для работы с анимацие вынесен из ядра
• Улучшен синтаксис ngIf и ngFor
• Добавлен модуль для серверного рендеринга
• Улучшена поддержка Typescript 2.2 и добавлены Sourcemaps для шаблонов
http://angularjs.blogspot.co.id/2017/03/angular-400-now-available.html

*Разработчики хрома планируют избавится от модальных диалогов*
В статье можно узнать чем заменить alert, confirm и prompt
https://developers.google.com/web/updates/2017/03/dialogs-policy

*Safari 10.1*
Fetch API, Кастомные элементы, валидация форм, гриды, async/await и много других полезностей
https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html

*Next.js 2.0*
Новая версия фреймворк для серверного рендера React приложений
https://zeit.co/blog/next2

Желаю продуктивного дня. Новая подборка в понедельник, в девять утра!

Доброе утро! Пока приходите в рабочий настрой свежая подборка:

Простое объяснение того как работает сборка мусора в v8.
Оригинал — https://medium.com/@_lrlna/garbage-collection-in-v8-an-illustrated-guide-d24a952ee3b8
и перевод — https://medium.com/devschacht/сборщик-мусора-в-v8-иллюстрированное-руководство-d3e496a4d378

Статья "NaN is not a not a number"
https://zerkmsit.wordpress.com/2016/04/21/nan-is-not-a-not-a-number/
рассказывает что такое NaN и как он хранится в памяти.
Перевод — http://css-live.ru/articles/pochemu-nan-eto-ne-not-a-number.html

Подборка паттернов для работы с React — https://vasanthk.gitbooks.io/react-bits/.
Если используете эту библиотеку — добавте в закладки, пригодится.

Удачно недели, увидимя завтра в 9:00 по Москве (:

Доброе утро! Подборка для просмотра/чтения пока пьёте кофе.

Видео с кратким обзором того как работает фронт твитера (английский, 17 минут).
https://pusher.com/sessions/meetup/viennajs/view-source-twittercom
Предыстория (как шли от серверного рендера к клиентскому и обратно).
Небольшое введение в flight.js (напоминает bemjs).
К сожалению видео не расскрывает деталей.

Очень полезная новость для всех у кого нет windows под рукой. Microsoft запартнёрилась с Browserstack.
Теперь Edge доступен совершенно бесплатно как для ручного тестирования, так и для селениума.
https://www.browserstack.com/test-on-microsoft-edge-browser

Статья на английском про то как начать разработку приложения на React. Описывается имеено подготовка: становка пакетов, структура приложений и дургие тулзы. Подойдёт тем, кто ещё не работал с библиотекой, но хочет начать делать новое приложение.
https://hackernoon.com/simple-react-development-in-2017-113bd563691f

Встретимся завтра в 9:00 по Москве (:

Доброе утро! Немного полезностей перед началом рабочего дня.

Если вдруг не видели, то вот доклад Никиты Прокопова на HolyJS про данные на фронтенде.
Рассказывает о том, что центром приложения являются данные. А рендер (будь то реакт или другая библиотека) вторичны. Видео длинное (50 минут), но на двойной скорости будет как раз.
https://www.youtube.com/watch?v=ZWNtxmrA4UY


Если видео уже смотрели или хотите ещё почитать, пока допиваете свой кофе, то вот отличная статья про рендер большого количества элементов на canvas при помощи d3.
https://bocoup.com/blog/smoothly-animate-thousands-of-points-with-html5-canvas-and-d3
Интересно рассмотреть код, который генерирует разные структуры, она занимает десяток строк для каждой:
https://bl.ocks.org/pbeshai/65420c8d722cdbb0600b276c3adcc6e8#common.js


Полезные ссылки
https://codesandbox.io/ — песочница для реакта. Можно открыть, накидать элементов и посмотреть как они выглядят, а так же пошарить ссылку.
https://polished.js.org — инструментарий для написания CSS внутри JS.

Новая подборка завтра в 9:00. Хорошего дня! (:

Приветствую! Свежая подборка на сегодня.

Firefox выкатил обновление инструментов разработчика. Если кратко, то они добавили больше фич, которые есть в хроме. Так же добавили совместимость с расширениями от хрома.
https://hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features

Большая статья о том, что Африка и Азия потенциально большие рынки для веб приложения и о том, какие особенности нужно учесть при разработке, например размер канала, объем памяти устройств и поведение пользователей.
https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-1

Инструменты:
https://github.com/rafrex/detect-it — библиотека для определения устройств ввода.

Свежий выпуск завтра, в 9:00 по Москве!
ps. завтрашнюю подборку я вынужден отправить через планировщик, не ругайте сильно, если она не дойдёт

Доброе утро! С вами говорит автоответчик.

Поиск мертвого кода в хроме https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf
Поможет выделить реально используемые куски кода в вашем приложении. Доступно в Canary, но со временем доедет и в стабильную сборку.

Введение в функциональное программирование в Javascript (перевод книги "Mostly adequate guide to FP"). Большая часть уже переведена на русский.
https://github.com/MostlyAdequate/mostly-adequate-guide-ru
За утро, конечно, её не осилить, а вот на выходные самое то. Книга рассматривает разные аспекты функционального подхода, а главное содержит примеры.

Инструменты:
https://new.shoutem.com — визуальный редактор для создания приложений на react native без знания программирования. Позволяет создавать простые приложения для ios и android.

Удачных выходных! Увидимся в понедельник утром.
ps. если вы это видите, то команды curl и at сработали отлично

Поздравляю с началом новой недели! Сегодня про оптимизацию.

Отличный доклад с последнего MoscowJS о бенчммарках и разнице в скорости es3 и es2015 кода. youtu.be...

Очень подробная статья про оптимизацию реакт приложений. medium.com...

Вышла новая версия Preact. github.com....
Быстрее, лучше, совместимее.

Ссылки:
https://atomiks.github.io/tippyjs/ небольшая библиотека для красивых поповеров.
https://limonte.github.io/sweetalert2/ компонент для замены стандартных алертов

Свежая подборка завтра в 9:00. Удачного дня (:

Поделиться каналом с коллегами можно с помощью ссылки http://t.me/breakfastjs

Доброе утро! Сегодня будет только одна ссылка, которую я очень рекомендую к прочтению. Отличная статья с примерами про новые фичи regex в javascript
https://ponyfoo.com/articles/regular-expressions-post-es6
Некоторые из техник уже можно использовать. Некоторые будут появляться в ближайшее время.

Ссылки:
https://github.com/wingify/across-tabs библиотека для кроссдоменной коммуникации между табами.
https://limonte.github.io/sweetalert2/ набор красивых алертов

На сегодня пара интересных статей.

Описание работы фронтенда в Сбербанке. https://habrahabr.ru/company/efs/blog/325916/
Довольно интересно почитать, что использует крупнейший и неповоротливый банк. На удивление не всё так плохо: Реакт, Тайпскрипт, Редакс. К тому же ребята поддерживают IE8!

После того как Опера перешла на Blink, а Firefox переделал систему расширений, стало возможным сделать одно расширение сразу под все браузеры (safari в пролёте). Статья с примером https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/

Доброе утро. Сегодня важные апдейты.

Вышел Edge 15. CSS переменные, платежи MS Wallet, WebVR и другое
Изменения https://docs.microsoft.com/en-us/microsoft-edge/dev-guide
Маркетинговая статья https://blogs.windows.com/msedgedev/2017/04/11/introducing-edgehtml-15/

Хром добавил механизм "Scroll anchoring" https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html
Суть в том, что страница не начинает прокручиваться, если контент выше вьюпорта увеличил высоту, например, если загрузилась картинка и раздвинула страницу.
Если такое поведение браузера вам мешает, его можно исключить с помощью CSS свойства overflow-anchor

https://simpleicons.org/ — Классный набор иконок различных веб сервисов.

Доброе утро!

Подробное объяснение базовых принципов работы CSS (английский) https://madebymike.com.au/writing/the-invisible-parts-of-CSS/

Из новостей:
Хроминум теперь можно запускать без интерфейса (пока только линукс и докер). https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
В связи с этим разработка Phantomjs скорее всего будет остановлена. https://groups.google.com/forum/#!topic/phantomjs/9aI5d-LDuNE

Доброе утро! Сегодня про гриды.

Пока настраиваетесь на рабочий лад, можете поиграть в игру, объясняющую принципы работы Grid CSS. http://cssgridgarden.com
Если вы до сих пор не притрагивались к этой технологии, то это отличный шанс понять как её использовать.

Если хотите углубиться в вопрос, то вот эта статья будет полезна http://css-live.ru/articles/znakomstvo-s-css-grid-layout.html
В Firefox есть поддержка гридов в DevTools

Увидимся завтра в 9 утра (:

Доброе утро!

Хорошая статья на hackernoon о том, что возможно em и rem вам не нужны. Автор разбирает основные заблуждения об относительны размерах. Так же доступен перевод.

Полезные ссылки:
CSSSR/csssr-project-template шаблон проекта от студии CSSSR. Хорошо подойдёт для быстрого создания небольшого сайта
ymaps/metro-jsapi библиотека позволяющая работать с картой метро от яндекса
hunterloftis/awaiting набор функций для работы с async/await

Доброе утро! С опозданием свежая подборка.
Вводное видео про рендер приложения на канвасе. https://www.youtube.com/watch?v=TxNfcvT9sAg
Стоит поглядеть на двойной скорости и потом посмотреть ссылки из видео

А если рендер в канвас вам кажется странной идеей (а так и есть), то пока допиваете кофе можете почитать статью про undefined и как с ним бороться
https://rainsoft.io/7-tips-to-handle-undefined-in-javascript/

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

Отличная статья про использование es6 модулей без сборки. С примерами и измерениями.
https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/
Если кратко: фича клёвая, но грузить много мелких файлов всегда минус.

Настройка tree-shaking в webpack2 (когда из кода удаляются неиспользуемые экспорты).
http://2ality.com/2015/12/webpack-tree-shaking.html

Если пользуетесь первым вебпаком, то этот инструмент просто необходим http://webpack.github.io/analyse/

Доброе утро! Сегодня про апдейты браузеров.

Стабильный Chrome 58. https://developers.google.com/web/updates/2017/04/nic58
IndexedDB, полный экран на мобилках в PWA, свойство flow-root, фиксы безопасности
Про flow-root можно почитать тут http://css-live.ru/faq/displayflow-root-not-clearfix.html

Firefox 53 https://www.mozilla.org/en-US/firefox/53.0/releasenotes/
Прозрачные видео и разные изменения интерфейса, например улучшена работа с разрешениями, подробней и с картинками тут
https://medium.com/@pastith/feeling-safer-online-with-firefox-b9fe13af6600

Хороших выходных, увидимся в понедельник в 9 утра по Москве (:

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

Крутейшая статья о CSS переменных с примерами
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
Особенно зацените манипуляции с 3d.

Очень подробный разбор свойства writing-mode. Пригодится всем, кто делает вёрстку сложнее, чем таблицы на бутстрапе.
https://24ways.org/2016/css-writing-modes/

Продуктивного дня и до встречи завтра в 9:00 по Москве

Доброе утро. Сегодня про автотесты.

Натнкулся на обзорную статью про инструменты тестирования
https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a
Не так ценна статья как ссылки в конце.

Персонально, я остановился на таком наборе: mocka, chai, sinon, karma, webdriverIO.
Mocha+chai+sinon — отличный конструктор, покрывающий все нужны и хорошо конфигурируемый. Кроме того, любую из частей можно выкинуть. У кармы нет аналогов. WebdriverIO имеет самый адекватный API из селениум библиотек (вкуовщина).
А если жизнь вас припёрла писать тесты на отображение, то есть https://github.com/gemini-testing/gemini

Доброе утро, планировщик опять подвёл (:

сегодня советую посмотреть видео про работу с DevTools в хроме
https://www.youtube.com/watch?v=v5r_n6Tq0uk
Например, если нажать Cmd+Shift+P, то откроется попап для ввода команд

Доброе утро!
Прежде всего не забудьте пройти опрос о будущих фичах javascript внутри v8. https://goo.gl/fhmV4s
Как ни странно, но голосование за фичи сделано правильно только у Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/status/, можно проголосовать за service workers ;)
У FF тоже есть нечто подобное... https://qsurvey.mozilla.com/s3/FirefoxInput/

Airbnb на дня показал интересную штуку: рендер реакта в Sketch файлы. https://github.com/airbnb/react-sketchapp
Есть подробная статья http://airbnb.design/painting-with-code/