Доброе утро!

Adobe закончит поддерживать Flash в 2020. Это пример того как надо поддерживать свой софт. Adobe много лет вкладывается в HTML технологии и помогает перейти разработчикам, не прекращая выпускать патчи (в противоположность тому как Microsoft убивал Silverlight).

Гайд по использованию WebCrypto API
В современных реалиях передавать информацию в незашифрованном виде — не лучшая идея. И очень хорошо, что браузеры стали поддерживать шифрование нативно.

Не забудте принять участие в ежегодном опросе о JS.

Объяснение работы Event Loop в nodejs. Если работаете с нодой, то полезно знать.

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

Гайд по созданию форм в AMP приложениях.

Откуда взялся favicon. Из цикла "история веба".

Хороших выходных!

Доброе утро!

В React 16 добавлена возможность обрабатывать ошибки рендера. Уже можно попробовать как оно работает в бете (подробнее). Одна из самых ожидаемых фич.

Огромное количество информации о том куда и главное как развиваться веб-разработчику в этом репозитории.

Философия кодинга в NASA. Заметка совсем не про фронтенд, но мне показалась очень интересной.

Так как я не могу просмотреть все ссылки в интернете (было бы здорово, но увы), мне нужна ваша помощь. Я завел специальную форму, куда можно отправить заинтересовавшую вас ссылку. Скидывайте туда всё, что вас хотя бы самую малость заинтересовало, даже если это кажется мелочью.
Ссылка на форму.
Она так же есть в описании канала. Или просто пишите @slonoed
Хорошей недели!

В новом v8 пофикшены многие проблемы с производительностью. В том числе проблема с .bind() и количеством текста в функции.

Список 10 вещей, которые должен знать сильный JS разработчик.

Promise.prototype.finally продвинулся ближе к добавлению в спеку. Действительно хорошая фича, которую хочется использовать.

Полезная заметка 5 CSS свойств, о которых вы, возможно, не знали.

Доброе утро!

Подборка вопросов про JS на интервью. + перевод.

Принципы использования клиентских API. Действительно хорошая подборка небольших правил, которые сделают код чище и более поддерживаемым.

Являются ли уведомления сомнительным паттерном?. Автор показывает проблему с периодичными уведомлениями, которые используются для вовлечения пользователя, а не для информирования. Правда никакого решения предлагает.

Походе я впервые увидел полезное применения гридов. Использование grid-auto-flow: dense (попробуйте оба режима и изменяйте размер окна).

Доброе утро!

Злоумышленник занимал в NPM имена похожие на популярные пакеты. Уязвимость состояла в том, что имитируя правильную работу пакеты при запуске отправляли ENV переменные.

Shoelace — небольшая альтернатива бутстрапу, которая кастомизируется через CSS переменные. Выглядит очень интересно, но IE не поддерживает.

Драфт браузерных расширений для W3C. Чтиво скучное. Важно то, что модель расширений хрома победила и со временем это окажется в спеке.

Рассказ о переходе на Elm. Меня пока не впечатляет: интероп с JS так и остался куцым.

Команда Nodejs выпустила заявление о вредоносных пакетах, про которые я писал вчера. А в другом посте они рассказывают как у них всё проверяется. Но мы то знаем...

Огромная подборка ссылок на тему фронтенда.

node-on-mobile/node-on-android — еще один способ запихнуть ноду на мобильник. Интересен концепт: само приложение запускается как сервер внутри shared library, интерфейс рисуется через WebView. Конечно, не взлетит, но идея забавная.

Подборка на выходные: 450 курсов по CS. Все курсы разбиты на три категории сложности и имеют пятибальную оценку. Очень хороший способ углубиться в текущей области или посмотреть, что находится в смежных.

Желаю хорошо отдохнуть и научиться чему-то новому!

Доброе утро!

На днях произошло интересно событие. Некий Greg Blass написал пост в котором жаловался, что Apple плохие и не хотят реализовывать PWA в мобильном сафари. Даже Service Worker отсутствует. А через несколько дней статус SW в webkit перешел из "рассматривается" в "в работе". Лично я с ужасом жду, когда каждый сайт будет запускать процесс, отжирающий батарейку в телефоне.

А вот подробная статья, объясняющая как работает Service Worker и описывающая основные эвенты внутри него.

Список "Что за фигня, Javascript" , в котором приведены основные неудачные места в языке. Но главное, что есть ответы почему так.

JetBrains Ring UI — библиотека реакт и ангуляр1 компонентов. Выглядит довольно симпатично, хоть и несколько устаревши. Компонентов много, работают хорошо. В любом случае приятно иметь еще одну альтернативу бутстрапу.

Доброе утро!

Было ожидаемо, что браузеры начнут бороться с рекламой. Скорее всего мобильный хром 62 получит блокировщик. Сейчас можно и нужно тестить ваши сайты в канари, чтобы понять, что ничего не разваливается.

Создана рабочая группа по WebAssembly. Одна из целей группы — принести поддержку статических и динамических языков.

Историй про взломанные расширения для хрома будет все больше. Вот свежая. Выход простой: для серфинга по важным для вас сайтам используйте чистый браузер.

stackblitz.com — очень клёвая песочница для работы с react/angular.

Продолжаю переводить заметки про историю веба, теперь История Википедии.

Доброе утро!

https://devtube.ru/ — коллекция видео с IT-событие. Есть отдельный раздел про фронтенд.

https://css-tricks.com/the-critical-request/
Хороший туториал о приоритетах загрузки ресурсов в браузерах и как все это правильно организовать. В конце есть чеклист для проверки сайта.

https://medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3
Статья от разработчика Netflix, где он задается вопросом "а зачем был переход на es6 классы в React?" Я его недовольство полностью разделяю. Изменения ради изменения никогда не было хорошей идеей.

https://www.opennet.ru/opennews/art.shtml?num=46987
Firefox 55 принесет довольно много нововведений, как визуальных так и внутренних.

В США появились судебные прецеденты, когда судьи штрафовали сайта за отсутствие доступности для людей с ограниченными возможностями.
http://www.lflegal.com/2017/08/ny-web-cases/
Похоже, что доступность сайтов переходит из разряда пожеланий в разряд требований к сайту.

Небольшая заметка с видео о том как работает font-display: optional
https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/
Идея простая: если шрифт в кеше, то браузер покажет его, если нет, то покажет дефолтный (и таким оставит).

Как определить, что сайт работает в безголовом хроме
https://antoinevastel.github.io/bot%20detection/2017/08/05/detect-chrome-headless.html
Это может быть полезно для предотвращения автоматизированного сканирования сайта и различных атак.

Элегантный способ уменьшить размер большого PNG с прозрачностью
http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/
Суть в том, что делается две картинки JPEG и PNG маска прозрачности. А потом все комбинируется в SVG.
Есть даже готовая автоматизация https://codepen.io/shshaw/full/LVKEdv

Когда то считалось, что информация на странице, которая находится после скрола люди читают реже. На этой странице собраны ссылки показывающие, что это не так
http://abovethefold.fyi/
Появились мобильники и удобные тачпады. Паттерны нужно применять, когда они работают. И выбрасывать, когда нет.

https://nodejs.org/en/blog/release/v8.3.0/
Вышедшая версия ноды получила новый v8 с хорошим увеличением производительности.

https://medium.com/@prateekbh/progressive-web-games-part-1-62dcb89c39ff
Набор постов (пока только два), в которых автор пытается скопировать игру из апстора и сделать её PWA сайтом.

https://hackernoon.com/your-node-js-authentication-tutorial-is-wrong-f1a3bf831a46
Типичные ошибки аутентификации, про которые стоит знать, если имеете с ней дело.

https://www.smashingmagazine.com/2017/08/ai-chatbot-web-speech-api-node-js/
Крутая задача на выходные: построить своего голосового веб чатбота.

Доброе утро!

Трансляция с Яндекс субботника
https://www.youtube.com/watch?v=MKrX3Fld-WI
Все доклады довольно интересные. Особенно могу отметить рассказ про React fiber и два доклада про тестирование.

Простой способ использовать es6 модули в ноде без сборщиков
https://blogs.windows.com/msedgedev/2017/08/10/es-modules-node-today/

Фейсбук дает приоритет новостям со ссылками на быстрые страницы
https://newsroom.fb.com/news/2017/08/news-feed-fyi-showing-you-stories-that-link-to-faster-loading-webpages/
Похоже все двигается в этом направлении. Так что теперь скорость загрузки — инструмент SEO.

Доброе утро! Нас тут уже больше сотни (:

https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5
Очень грамотно расписано как правильно формировать стейт приложения. Всегда пользуюсь таким подходом.

Zeit 3.0 https://zeit.co/blog/next3
Пишут, что стал быстрее, лучше и с красивыми ошибками.

http://2ality.com/2017/08/promise-try.html
Предложение нового метода Promise.try для консистентной обработки ошибок в промисах. Хотя теперь не очень понятно, зачем, если есть async/await.

https://github.com/Mitranim/posterus
Библиотека с футурами. Одна из основных фишек — возможность прерывания. Выглядит монструозно. Но если у вас в проекте есть сложные асинхронные цепочки, то может подойти.

https://pair-code.github.io
Библиотека для машинного обучения на GPU прямо в браузере.

https://www.react-simple-maps.io/
Очень крутой компонент для работы с картами в reactjs

Доброе утро!

https://github.com/web-standards-ru/calendar
Календарь событий по фронтенду.

http://www.opennet.ru/opennews/art.shtml?num=47012
W3C рассматривает вопрос перевода предыдущих спецификаций HTML в разряд устаревших. Хотя я сомневаюсь, что браузеры скоро уберут поддержки. Многие сайты до сих пор используют старые форматы.

http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/
Бета Bootstrap 4. Снаружи изменений мало. Внутри переписали весь js, перешли на sass и выкинули старый браузеры <=IE9

https://medium.com/react-native-training/react-animations-in-depth-433e2b3f0e8e
Подборка подходов к анимации элементов. Странно, что нет самого очевидно: через Element.animate.

Доброе утро!

Большая статья на тему, а нужны ли вас веб-шрифты?
https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae
Автор очень подробно расписывает все случаи, когда нужны и почему лучше использовать встроенные. Читать крайне увлекательно.

Хром 61 в бете
https://blog.chromium.org/2017/08/chrome-61-beta-javascript-modules.html
Самое интересное: апи для платежей. Плюс появится возможность вызвать диалог шарилки нативно на андроиде и много других хороших изменений.

Подборка CSS градиентов, сделанных из фотографий
https://gradient.world

Небольшой туториал по изготовлению симпатичной анимации глаза
https://deanhume.com/Home/BlogPost/lazy-loading-images-using-intersection-observer/10163

Уже через неделю после релиза nodejs 8.3 вышла следущая версия.
https://nodejs.org/en/blog/release/v8.4.0/
Самое интересное: появилась поддержка http2 (за флагом).

Puppeteer — библиотека для работы с безголовым хромом. Можно использовать для скриншотов или краулинга. Работает очень хорошо.
https://github.com/GoogleChrome/puppeteer

Дашборд для вебпака. Позволяет смотреть статуc билда, размеры бандлов и прочее. Сделан на электроне.
https://formidable.com/blog/2017/introducing-electron-webpack-dashboard/

У HTML Academy накопился уже целый список небольший видео про веб. Мне этот формат очень нравится.
https://www.youtube.com/playlist?list=PLQJNT2fdCJngOj0mGZaTcZRyfSBTCWHe1

Хороших выходных!

Доброе утро!

Реакт лицензируется под хитрой лицензией: BSD + Patents license. Apache Software Foundation включил эту лизензию в "черный список" и многим, кто использовал реакт для проектов под лицензией апаче теперь выкидывать реакт. ФБ дал объяснение:
https://code.facebook.com/posts/112130496157735/explaining-react-s-license/
Если кратко: мы сожелеем, но лизензию не поменяем.

Предложение использовать единый AST для всех браузеров, чтобы сделать загрузку быстрее. Хорошо, что веб двигает не только в строну WebAssembly
https://yoric.github.io/post/binary-ast-newsletter-1/

Судя по новой версии, TypeScript тоже решил избавиться от необходимости аргумента-ошибки в try-catch
https://blogs.msdn.microsoft.com/typescript/2017/08/17/announcing-typescript-2-5-rc/

Flow теперь еще лучше работает с реактом.
https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627

Мелочь, а приятно: хром теперь поддерживает верхнеуровневый await в консоли.

Доброе утро!

Вы наверняка встречали плохо спроектирвоаные формы для ввода кредиток. Вот, чтобы не делать таких отличный гайд:
https://medium.com/outsystems-experts/javascript-events-unmasked-how-to-create-an-input-mask-for-mobile-fc0df165e8b2

Раньше многие ошибки в Nodejs можно было отличить только по строке сообщения. Начиная с восьмой версии ошибкам будут добавлять поле code.
https://developer.ibm.com/node/2017/07/05/node-js-errors-changes-you-need-to-know-about/

Небольшая заметка про PWA с серверным рендером
https://medium.com/dev-channel/building-a-hybrid-rendered-pwa-c9d645baf158

Утилита для создания подмножества шрифта для уменьшения размера
https://github.com/filamentgroup/glyphhanger

http://bubb.surge.sh - очень милый тултип

Доброе утро!

Очень клевое видео про WebAssembly (английский) с подробностями как оно работает внутри
https://www.youtube.com/watch?v=GQcmRnWo7rs&

Реализация базовых алгоритмов на TS. Можно использовать как шпаргалку.
https://github.com/jiayihu/pretty-algorithms

Подборка из десяти языков, которые компилируются в JS
https://www.sitepoint.com/10-languages-compile-javascript/

Polymer 3.0 будет доставляться через NPM вместо Bower. Вообще интересно бы узнать, как много людей пользуется альтернативными менеджерами пакетов.
https://www.polymer-project.org/blog/2017-08-22-npm-modules