Дайджест свежих материалов из мира фронтенда за последнюю неделю №342 (3 — 9 декабря 2018)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
256K+
JavaScript *
Прототипно-ориентированный язык программирования
267,24
Рейтинг
Почему у React элементов есть свойство $$typeof?
4 мин
Перевод
О механизме React по предотвращению возможности инъекции JSON для XSS, и об избегании типовых уязвимостей.
О композиции функций в JavaScript
4 мин
Давайте пофантазируем на тему функциональной композиции, а так же проясним смысл оператора композиции/пайплайна.
TL;DR
Compose functions like a boss:
Популярные реализации compose — при вызове создают новые и новые функции на основе рекурсии, какие здесь минусы и как это обойти.
Разработка доступных интерфейсов
16 мин
По данным Росстата 1 млн. человек имеют проблемы со зрением, начиная от астигматизма и заканчивая слепотой и с трудом могут пользоваться обычными сайтами. Попробуйте протестировать ваш ресурс на доступность: зажмурьте глаза, чтобы экран размылся и кликайте, вводите текст, переходите по страницам. Если привычные действия неудобно выполнять, то можно задуматься над доступностью.
Хорошие примеры доступных сайтов у Пенсионного Фонда и Госуслуг. Чтобы ваш ресурс стал доступным, такой масштабной работы, как для ПФР, не требуется. Достаточно применить три принципа, добавить в закладки два сайта с подробной документацией по разработке доступных сайтов и немного адаптировать рабочий процесс под новую парадигму. В результате ваши ресурсы перейдут на новую ступень: будут доступными и удобными для людей с ограниченными возможностями.
О том, как быстро и эффективно разрабатывать доступные ресурсы сегодняшняя расшифровка доклада Сергея Кригера на Frontend Conf.
Хорошие примеры доступных сайтов у Пенсионного Фонда и Госуслуг. Чтобы ваш ресурс стал доступным, такой масштабной работы, как для ПФР, не требуется. Достаточно применить три принципа, добавить в закладки два сайта с подробной документацией по разработке доступных сайтов и немного адаптировать рабочий процесс под новую парадигму. В результате ваши ресурсы перейдут на новую ступень: будут доступными и удобными для людей с ограниченными возможностями.
О том, как быстро и эффективно разрабатывать доступные ресурсы сегодняшняя расшифровка доклада Сергея Кригера на Frontend Conf.
Imba: JavaScript-совместимый язык для быстрой работы с DOM
7 мин
Перевод
Imba — это опенсорсный язык программирования, созданный компанией Scrimba специально для разработки веб-приложений. Он компилируется в JavaScript и способен работать внутри существующей JS-экосистемы. Речь идёт, например, о Node.js, об npm, о Webpack.
Основная сильная сторона Imba заключается в том, что этот язык позволят создавать гораздо более быстрые приложения, чем те, которые основаны на библиотеках, применяющих технологию Virtual DOM, наподобие React и Vue. Рост производительности приложений достигается за счёт того, как Imba работает с обновлениями DOM. Подробности об этом можно почитать здесь.
Автор этого материала, сооснователь проекта Scrimba, говорит, что пользуется Imba уже несколько лет. По его словам, писать на этом языке — сплошное удовольствие, так как он, в сравнении с JavaScript, отличается более чистым синтаксисом, что улучшает читабельность кода.
Этот материал представляет собой руководство по Imba для начинающих, освоение которого позволит приступить к созданию простых приложений. Сначала здесь будут раскрыты основы языка, потом будет рассмотрена разработка пользовательских интерфейсов с его помощью. Тут же будет показана настройка среды разработки для программирования на Imba.
Основная сильная сторона Imba заключается в том, что этот язык позволят создавать гораздо более быстрые приложения, чем те, которые основаны на библиотеках, применяющих технологию Virtual DOM, наподобие React и Vue. Рост производительности приложений достигается за счёт того, как Imba работает с обновлениями DOM. Подробности об этом можно почитать здесь.
Автор этого материала, сооснователь проекта Scrimba, говорит, что пользуется Imba уже несколько лет. По его словам, писать на этом языке — сплошное удовольствие, так как он, в сравнении с JavaScript, отличается более чистым синтаксисом, что улучшает читабельность кода.
Этот материал представляет собой руководство по Imba для начинающих, освоение которого позволит приступить к созданию простых приложений. Сначала здесь будут раскрыты основы языка, потом будет рассмотрена разработка пользовательских интерфейсов с его помощью. Тут же будет показана настройка среды разработки для программирования на Imba.
Синхронный тренд JS: опрос
1 мин
Доброго дня!
Начиная с 8 LTS async/await полностью поддерживается на платформе Node; начиная с Chrome 62 (октябрь 2017) в консоли можно использовать await вне тела асинхронной функции, т.е. top-level. На сегодня на этапе Stage 2 находится соответствующий proposal в tc39. В то же время существует огромное количество легаси-кода с коллбэками даже без промисов, со смесью того и другого, и всякие другие комбинации. Где-то даже остались следы генераторов. Т.е. в мире JavaScript сосуществуют как минимум 4 разные модели реализации (а)синхронности.
А что предпочитаете вы? Не откажите в любезности уделить минутку ответу. Спасибо!
Начиная с 8 LTS async/await полностью поддерживается на платформе Node; начиная с Chrome 62 (октябрь 2017) в консоли можно использовать await вне тела асинхронной функции, т.е. top-level. На сегодня на этапе Stage 2 находится соответствующий proposal в tc39. В то же время существует огромное количество легаси-кода с коллбэками даже без промисов, со смесью того и другого, и всякие другие комбинации. Где-то даже остались следы генераторов. Т.е. в мире JavaScript сосуществуют как минимум 4 разные модели реализации (а)синхронности.
А что предпочитаете вы? Не откажите в любезности уделить минутку ответу. Спасибо!
Использование SVG путей в canvas для движения объектов
3 мин
Если для анимации объекта в canvas (и не только), нужно перемещать его по некоторому желаемому пути, возможно даже по нескольким, которые могут выбираться случайным образом или последовательно, то это можно сделать с помощью svg путей. Давайте, для начала, запустим по траектории простой но зеленый квадрат.
Для этого сделаем или позаимствуем svg, с одним или несколькими путями.
Создадим элемент с помощью функции document.createElementNS. MDN сообщает нам, что метод имеет базовую поддержку во всех современных браузерах. Затем добавим созданному элементу путь.
Для этого сделаем или позаимствуем svg, с одним или несколькими путями.
Создадим элемент с помощью функции document.createElementNS. MDN сообщает нам, что метод имеет базовую поддержку во всех современных браузерах. Затем добавим созданному элементу путь.
Веб-технологии для дизайнеров — возвращаю долг
3 мин
Есть у меня долг перед Хабром. Два года назад я написал статью «Веб-технологии для дизайнеров — зачем и как», а продолжение статьи так и не выпустил. И вот, наконец, я могу вернуть часть этого долга. Весь ноябрь по утрам и выходным я записывал обучающие видео про JS для дизайнеров. По ходу проекта экспериментировал с разными форматами, оборудованием и постобработкой. В этом посте я подведу итог месяца работы над курсом и расскажу о том, чему научился сам, пока его записывал.
Неприятные ошибки при написании юнит тестов
9 мин
На днях я буду делать внутренний доклад, на котором расскажу нашим разработчикам про неприятные ошибки, которые могут возникнуть при написании юнит тестов. Самые неприятные с моей точки зрения ошибки — когда тесты проходят, но при этом делают это настолько некорректно, что лучше бы не проходили. И я решил поделиться примерами таких ошибок со всеми. Наверняка ещё что-нибудь подскажете из этой области. Примеры написаны для Node.JS и Mocha, но в целом эти ошибки справедливы и для любой другой экосистемы.
Чтобы было интереснее, часть из них оформлена в виде проблемного кода и спойлера, открыв который, вы увидите, в чём была проблема. Так что рекомендую сначала смотреть на код, находить в нём ошибку, а затем открывать спойлер. Решения проблем указано не будет — предлагаю самим подумать над ним. Просто потому, что я ленивый. Порядок списка не имеет глубокого смысла — просто это очерёдность, в которой я вспоминал про всякие реальные проблемы, которые доводили нас до кровавых слёз. Наверняка многие вещи покажется вам очевидными — но даже опытные разработчики могут случайно написать такой код.
Чтобы было интереснее, часть из них оформлена в виде проблемного кода и спойлера, открыв который, вы увидите, в чём была проблема. Так что рекомендую сначала смотреть на код, находить в нём ошибку, а затем открывать спойлер. Решения проблем указано не будет — предлагаю самим подумать над ним. Просто потому, что я ленивый. Порядок списка не имеет глубокого смысла — просто это очерёдность, в которой я вспоминал про всякие реальные проблемы, которые доводили нас до кровавых слёз. Наверняка многие вещи покажется вам очевидными — но даже опытные разработчики могут случайно написать такой код.
Кратко о redux-saga каналах
4 мин
Добрый день, дорогие друзья.
В данной статье хотел бы максимально просто и кратко описать механизм redux-saga каналов, на примерах приближенных к реальным кейсам, надеюсь у меня это вышло.
Итак, начнем.
Прямой эфир: инфраструктура фронтенда
3 мин
Всем привет! Меня зовут Роман Дворнов, я Lead Engineer в команде Frontend Architecture в Авито. Мы занимаемся созданием и развитием технической платформы фронтенда, чтобы другие команды могли быстрее создавать интерфейсы и продукты. Мы с коллегами запланировали серию онлайнов, в которых будем обсуждать актуальные вопросы разработки клиентской части.
11 декабря на нашем ютуб-канале пройдёт первый прямой эфир. Обсудим инфраструктуру фронтенда. В дискуссии будут участвовать эксперты из Яндекса, Tinkoff, Mail.Ru и Авито. Под катом — примерные вопросы, которые планируем обсуждать (дополняйте список), и ссылка на предстоящую трансляцию. Добавляйте пост в закладки: после встречи обновим его и выложим видео.
На-click-ать известность, или как взбудоражить робота и … остальных
22 мин
Давным-давно,
NB перестал спрашивать, видимо, опасаясь раздражать явно более опытного собеседника.NB: - А как привести много посетителей на свой новый сайт?
GURU: - Ну можно ссылок «раскидать» на разных форумах и в соц. сетях. Поисковая оптимизация поможет и контент. Можно тизерные сети привлечь, а можно много раз посетить сайт через разные прокси ...
NB: - И чем же помогут такие посещения, ведь это иллюзия живых людей?
GURU: - Счетчик статистики от google или от yandex объяснит поисковикам, что сайт становится популярным. Да еще и реферер можно связать с посещаемыми сайтами по запросам. Подрастет позиция в поисковиках, а значит и подрастет поисковый трафик.
NB: - А где же взять такое количество прокси?
GURU: - Где?… Ну в интернете поищи...
GURU закатил глаза, как бы подчеркивая исчерпанность темы про прокси и замолчал…
В погоне за веб стандартами
3 мин
Перевод
Мы уже рассказывали с какими проблемами мы сталкиваемся занимаясь фронтенд разработкой в 2018 году. Давайте посмотрим как далеко мы уходим от стандартов когда пишем наш код
и как мы можем решить эту проблему.
и как мы можем решить эту проблему.
Ближайшие события
Руководство по JavaScript, часть 9: обзор возможностей стандартов ES7, ES8 и ES9
11 мин
Туториал
Перевод
Сегодня, в девятой части перевода руководства по JavaScript, будет сделан обзор возможностей, которые появились в языке благодаря стандартам ES7, ES8 и ES9.
→ Часть 1: первая программа, особенности языка, стандарты
→ Часть 2: стиль кода и структура программ
→ Часть 3: переменные, типы данных, выражения, объекты
→ Часть 4: функции
→ Часть 5: массивы и циклы
→ Часть 6: исключения, точка с запятой, шаблонные литералы
→ Часть 7: строгий режим, ключевое слово this, события, модули, математические вычисления
→ Часть 8: обзор возможностей стандарта ES6
→ Часть 9: обзор возможностей стандартов ES7, ES8 и ES9
→ Часть 1: первая программа, особенности языка, стандарты
→ Часть 2: стиль кода и структура программ
→ Часть 3: переменные, типы данных, выражения, объекты
→ Часть 4: функции
→ Часть 5: массивы и циклы
→ Часть 6: исключения, точка с запятой, шаблонные литералы
→ Часть 7: строгий режим, ключевое слово this, события, модули, математические вычисления
→ Часть 8: обзор возможностей стандарта ES6
→ Часть 9: обзор возможностей стандартов ES7, ES8 и ES9
Angular 6+ полное руководство по внедрению зависимостей. providedIn vs providers:[]
7 мин
Перевод
В Angular 6 появился новый улучшенный синтаксис для внедрения зависимостей сервисов в приложение (provideIn). Несмотря на то, что уже вышел Angular 7, эта тема до сих пор остается актуальной. Существует много путаницы в комментариях GitHub, Slack и Stack Overflow, так что давайте подробно разберем эту тему.
В данной статье мы рассмотрим:
- Внедрение зависимостей (dependency injection);
- Старый способ внедрения зависимостей в Angular (providers: []);
- Новый способ внедрения зависимостей в Angular (providedIn: 'root' | SomeModule);
- Сценарии использования provideIn;
- Рекомендации по использованию нового синтаксиса в приложениях;
- Подведем итоги.
Малоизвестные возможности JavaScript
11 мин
Перевод
JavaScript часто называют самым простым языком для новичков, в программировании на котором сложнее всего достичь мастерства. Автор материала, перевод которого мы публикуем, говорит, что не может не согласиться с этим утверждением. Всё дело в том, что JS — это по-настоящему старый и по-настоящему гибкий язык. Он полон таинственных синтаксических конструкций и устаревших возможностей, всё ещё им поддерживаемых.
Сегодня мы поговорим о малоизвестных возможностях JavaScript и о вариантах их практического применения.
Сегодня мы поговорим о малоизвестных возможностях JavaScript и о вариантах их практического применения.
Тактичный робот: умеет слушать и не перебивает
5 мин
Туториал
Распознавание речи (далее – ASR, Automatic Speech Recognition) используется при создании ботов и/или IVR, а также для автоматизированных опросов. Voximplant использует ASR, предоставляемый «корпорацией добра» – гугловское распознавание работает быстро и с высокой точностью, но… Как всегда, есть один нюанс. Человек может делать паузы даже в коротких предложениях, при этом нам нужна гарантия, что ASR не воспримет паузу как окончание ответа. Если ASR думает, что человек закончил говорить, то после «ответа» сценарий может включить синтез голоса со следующим вопросом – в это же самое время человек продолжит говорить и получит плохой пользовательский опыт: бот/IVR перебивает человека. Сегодня мы расскажем, как с этим бороться, чтобы ваши пользователи не огорчались от общения с железными помощниками.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №341 (26 ноября — 2 декабря 2018)
4 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Начать с React и Bootstrap за 2 дня. День №1
10 мин
Туториал
Сразу скажу, что сайт будет быстрее работать, если заменить Bootstrap на чистый CSS и JS. Эта статья про то, как быстро начать разрабатывать красивые web-приложения, а оптимизация это уже отдельный вопрос, выходящий за пределы этой статьи.
Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).
В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:
Для начала надо хотя бы немного разбираться в HTML, CSS, JavaScript, XML, DOM, ООП и уметь работать в терминале (командной строке).
Где брать материалы для изучения?
Для изучения HTML и CSS рекомендую htmlbook.ru
Для изучения JavaScript рекомендую learn.javascript.ru
Для изучения XML рекомендую msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih
Про DOM можно почитать в уроке по JavaScript learn.javascript.ru/dom-nodes
Для изучения ООП рекомендую видеокурс proglib.io/p/oop-videocourse
Для изучения командной строки Windows рекомендую cmd.readthedocs.io/cmd.html
Для изучения терминала в Mac рекомендую ixrevo.me/mac-os-x-terminal
Если вы работаете в Linux, то bash и аналоги знаете, в крайнем случае man или help вам помогут.
Для изучения React использую learn-reactjs.ru (который является переводом официальной документации React: reactjs.org).
Для изучения Bootstrap использую bootstrap-4.ru (который является переводом официальной документации Bootstrap: getbootstrap.com).
Для того, чтобы подружить React и Bootstrap нашёл отличную статью webformyself.com/kak-ispolzovat-bootstrap-s-react
Для изучения JavaScript рекомендую learn.javascript.ru
Для изучения XML рекомендую msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih
Про DOM можно почитать в уроке по JavaScript learn.javascript.ru/dom-nodes
Для изучения ООП рекомендую видеокурс proglib.io/p/oop-videocourse
Для изучения командной строки Windows рекомендую cmd.readthedocs.io/cmd.html
Для изучения терминала в Mac рекомендую ixrevo.me/mac-os-x-terminal
Если вы работаете в Linux, то bash и аналоги знаете, в крайнем случае man или help вам помогут.
Для изучения React использую learn-reactjs.ru (который является переводом официальной документации React: reactjs.org).
Для изучения Bootstrap использую bootstrap-4.ru (который является переводом официальной документации Bootstrap: getbootstrap.com).
Для того, чтобы подружить React и Bootstrap нашёл отличную статью webformyself.com/kak-ispolzovat-bootstrap-s-react
В этой статье сделаю выжимку минимально необходимого для работы и сделаем такой таймер:
Расширение для хрома: создание, публикация, опыт
7 мин
В поисках новых площадок для деятельности, я обратил внимание на "виджеты" хрома, которыми пользуюсь давно, но никогда не придавал им значения. Тут же захотелось попробовать что-нибудь реализовать.
Идеей стало создание таск-менеджера для разработчика (и не только), который был бы всегда под рукой. В нем должны были отобразиться актуальные тикеты trello и jira, реквесты в gitlab и т.п. Это те вещи, которые я обычно искал, набирая ключевые слова в адресную строку браузера, типа "jira PM-20".
Расширение для хрома
Идеей стало создание таск-менеджера для разработчика (и не только), который был бы всегда под рукой. В нем должны были отобразиться актуальные тикеты trello и jira, реквесты в gitlab и т.п. Это те вещи, которые я обычно искал, набирая ключевые слова в адресную строку браузера, типа "jira PM-20".
Расширение для хрома