В этом году в преддверии весны, Кодабра совместно со школой «Летово» проводит конкурс, посвященный программированию, робототехнике и VR — «IT-герои». По этому замечательному поводу мы решили рассказать Хабру, кто же для нас самих является героем, на кого мы ориентируемся при обучении детей профессиям нового века, а перед кем снимаем шляпу за их вклад в популяризацию и развитие технологий.

Эта статья будет посвящена выдающимся людям, повлиявшим на становление Web 2.0 и его победное шествие по планете. Прежде всего веб-программистам и технологическим евангелистам, работой которых мы вдохновлялись. Обращаем ваше внимание, что этот рейтинг является полностью субъективным, а расположение тех или иных имен в списке выбрано скорее из художественных соображений, чем из их вклада относительно друг друга.

Автор статьи о буферах, потоках и двоичных данных в Node.js, перевод которой мы публикуем, говорит, что он понимает ощущения тех начинающих разработчиков, не имеющих специального образования, которым все эти сущности кажутся таинственными и непонятными. По его словам, это может заставить начинающих отложить в долгий ящик попытки разобраться со внутренними механизмами Node, сославшись на то, что всё это предназначено не для них, а лишь для профессионалов высшего класса, да для разработчиков пакетов. Сегодня он собирается исправить ситуацию и помочь всем желающим вникнуть в суть буферов, потоков и двоичных данных в Node.js и научиться со всем этим работать.

О производительности react

React не зря считается очень производительным фреймворком. Он позволяет создавать быстрые динамические страницы с большим количеством элементов.

Но бывают ситуации, когда элементов на странице становится очень много и встроенной производительности react не хватает. Тогда приходится применять различные приемы для оптимизации.

Я проводил некоторые эксперименты, как Googlebot разбирает и рендерит JavaScript, и наткнулся на несколько интересных вещей. Первое — то, что функция Math.random() в Googlebot выдаёт полностью детерминированные серии чисел. Я написал маленький скрипт, который использует этот баг для точной идентификации гуглобота:


Источник

При первом вызове Math.random() из гуглобота результат всегда будет 0,14881141134537756, второй вызов всегда вернёт 0,19426893815398216. Скрипт по ссылке выше просто использует эту информацию для идентификации бота Google, хотя немножко обфусцирует свои действия, чтобы они не выглядели слишком произвольными.

Недавно я познакомился с замечательной серией статей "Thinking in Ramda", которые проясняют на простых и ясных примерах способы написания кода в функциональном стиле с использованием библиотеки Ramda. Эти статьи показались мне настолько прекрасными, что я не смог удержаться от того, чтобы не перевести их на русский язык. Надеюсь, что в этом будет польза для многих людей :) Давайте начнём перевод с первой вступительной статьи.

1. Первые шаги
2. Сочетаем функции
3. Частичное применение (каррирование)
4. Декларативное программирование
5. Бесточечная нотация
6. Неизменяемость и объекты
7. Неизменяемость и массивы
8. Линзы
9. Заключение

Данный пост — это начало серии статей «Мышление в стиле Ramda» о функциональном программировании.

Я буду использовать библиотеку Ramda в этих статьях, хотя многие из обсуждаемых идей применимы также к множеству других библиотек, таких как Underscore и Lodash, а также к другим языкам программирования.

Я буду придерживаться лёгкой, менее академической стороны функционального программирования. Это в основном потому что я хочу, чтобы серия была доступна большему числу людей, но также частично и потому что я сам не так близок к истинно функциональной дороге.

Паттерн "observer" известен наверное с момента появления самого ооп. Упрощенно можно представить что есть объект который хранит список слушателей и имеет метод "добавить", "удалить" и "оповестить", а внешний код либо подписывается либо оповещает подписчиков

class Observable {
  listeners = new Set();
  subscribe(listener){
    this.listeners.add(listener)
  }
  unsubscribe(listener){
    this.listeners.delete(listener)
  }
  notify(){
    for(const listener of this.listeners){
       listener();
    }
  }
}

В redux-е этот паттерн применяется без всяких изменений  — пакет "react-redux" предоставляет функцию connect которая оборачивает компонент и при вызове componentDidMount вызовет subscribe() метод у Observable, при вызове componentWillUnmount()  вызовет  unsubscribе() а dispatch() просто вызовет метод trigger() который в цикле вызовет всех слушателей где каждый в свою очередь вызовет mapStateToProps() и потом в зависимости от того изменилось ли значение  —  вызовет setState() на самом компоненте. Все очень просто, но платой за такую простоту реализации является необходимость работать с состоянием иммутабельно и нормализировать данные а при изменении отдельного объекта или даже одного свойства оповещать абсолютно всех подписчиков-компонентов даже если они никак не зависят от той измененной части состояния и при этом в компоненте-подписчике необходимо явно указывать от каких частей стора он зависит внутри mapStateToProps()

Голосовые боты были и остаются полезной фичей для общения с клиентами. Потому что если что-то возможно автоматизировать, то надо срочно это делать. Подтверждение заказов и информация о них, запись обратной связи от клиентов, распознавание голоса и действия согласно тому, что распозналось и т.д. Кстати, о последнем – сделать бота с распознаванием в 2018 году стало еще проще: Voximplant отлично умеет распознавать и транскрибировать речь, а инструмент Dialogflow от “корпорации добра” хорошо анализирует текст. Ниже я покажу, как можно быстро собрать демо-бота, который расскажет о погоде в названном городе.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

От переводчиков

Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы поговорим о новостях в мире Angular. Мы подготовили для вас наиболее интересные материалы и отобрали список вопросов, который вам должен понравиться. Отметим только, что если вы будете ждать от этой статьи ответа на вопрос "Чем Angular лучше других технологий?", то придется вас огорчить, у нас не будет ответа на него. Почему? Как правило, все мнения вида "Технология X лучше технологии Y" почти всегда не более, чем отражение точки зрения высказывающегося. Однако для тех, кто только начинает изучать этот фреймворк, мы постараемся объяснить, что дает вам эта технология и какую пользу она приносит. Также не проходите мимо и ответьте на опрос, самые популярные ответы будут отправлены Игорю Минару (ведущий разработчик команды Angular). Ну что же, приступим.

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

Разумеется, вы можете подойти к коллеге, и сказать, что он/она по невнимательности забыл поставить картинку, но ведь это же не наш метод.

Владислав Власов, инженер-программист в Developer Soft и преподаватель курса Нетологии, специально для блога написал цикл статей о EcmaScript6. В первой части на примерах рассмотрели динамический анализ кода в EcmaScript с помощью Iroh.js. В этой статье расскажем, как реализовать отменяемые Promises.

Асинхронность и планировщик событий в EcmaScript

Концепция Promise (обещаний) — одна из ключевых в современном EcmaScript. Promise позволяют обеспечить последовательное выполнение асинхронных действий за счет организации их в цепочки, которые вдобавок предоставляют перехват ошибок. Современный синтаксис async/await операторов технически также основан на Promise, и является лишь синтаксическим сахаром.



При всей своей богатой функциональности, Promise обладают одним недостатком — не поддерживают возможность отмены запущенного действия. Для того чтобы понять, как обойти это ограничение, необходимо рассмотреть, как возникают и функционируют асинхронные действия в EcmaScript, ведь Promise — лишь обёртка для них.

Синтаксис оператора spread

1. Синтаксис оператора spread это просто три точки: …
2. Оператор spread позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.

Эти определения могут быть непонятны без контекста. Давайте рассмотрим несколько вариантов использования, чтобы лучше понять, что я имею в виду.

JavaScript постоянно развивается, в нём появляются различные новшества и улучшения. Одно из таких новшеств, появившееся в ES6 — оператор расширения. Он выглядит как троеточие (...). Этот оператор позволяет разделять итерируемые объекты там, где ожидается либо полное отсутствие, либо наличие одного или нескольких аргументов. Сухие определения обычно бывает непросто понять без практических примеров. Поэтому рассмотрим несколько вариантов использования оператора расширения, которые помогут вникнуть в его сущность.

В заключительной части истории про миграцию на Angular мы поделимся избранными местами нашей внутренней документации, помогающими нашим разработчикам освоиться в новом фреймворке. Речь пойдет про особенности новых логики компиляции компонентов, Change Detection и концепции трансклуда. Это актуальные конвенции, использующиеся прямо сейчас при работе с Angular. Ну и в конце — несколько ссылок на англоязычные статьи и видео, которые мы рекомендуем коллегам.

Перевод статьи об эксперименте с бинарным кодом в Glimmer, соавторы публикации: Сара Клаттербак, Чад Хиетала и Том Дейл.

Чуть более года назад Ember.js претерпел значительные изменения. В тесном сотрудничестве между инженерами LinkedIn и Open Source сообществом, мы заменили у Ember движок для рендиранга на новую библиотеку, Glimmer VM, что улучшило производительность и значительно уменьшило размер скомпилированных шаблонов.

Glimmer относится к Handlebars шаблонам как функциональный язык программирования и компилирует их в последовательность инструкций, которые могут быть выполнены в браузере. Эти инструкции, или опкоды (прим. переводчика коды операций) кодируются в компактную структуру данных в виде JSON.

Когда мы перенесли наше веб приложение linkedin.com на Glimmer, мы увидели значительные улучшения во времени загрузки. В дополнении к уменьшению размера файлов на 40%, мы также сократили время, затрачиваемое браузером на анализ JavaScript, благодаря компиляции шаблонов в JSON. Более того, это изменение улучшило время загрузки в 90% случаев более чем на 1 секунду.

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

Последние три года я занимаюсь разработкой серверов на Node.js и в процессе работы у меня накопилась некоторая кодовая база, которую я решил оформить в виде фреймворка и выложил в open-source.

Основными особенностями фреймворка можно назвать:

• простую архитектуру, без всякой JS – магии
• автоматическую сериализацию/десериализацию моделей (например, не нужно проверять пришло ли поле с клиента, все проверяется автоматически)
• возможность генерации схемы API
• генерацию документации на основе схемы
• генерацию полностью типизированного SDK для клиента (на данный момент речь про JS frontend)

В данной статье мы поговорим немного о Node.js и рассмотрим данный фреймворк

Всем кому интересно – прошу под кат

На нашем обучающем портале открывается новая профессия — Fullstack JavaScript-разработчик. С помощью актуальных фреймворков ReactJS и Node.js мы научим реализовывать и frontend сайта (то, что пользователь видит в браузере), и серверную часть. Описание и программа под катом.

Переход в гибридном режиме — естественная процедура, хорошо подготовленная и описанная командой Angular. Тем не менее, на практике возникают сложности и затыки, которые приходится решать на лету. В сегодняшнем продолжении нашей статьи про миграцию на Angular мы расскажем про проблемы, с которыми столкнулась команда Skyeng, и поделимся своими решениями.

Публикуем перевод седьмой части часть серии материалов об особенностях работы различных механизмов JavaScript. Наша сегодняшняя тема — веб-воркеры. В частности, речь пойдёт о различных типах веб-воркеров, о том, как организована совместная работа тех частей, из которых они состоят, а также об их возможностях и об ограничениях, с которыми можно столкнуться в разных сценариях их использования. Здесь же будет показано 5 вариантов практического применения веб-воркеров.

В январе мы в Skyeng закончили перевод нашей платформы Vimbox с AngularJS на Angular 4. За время подготовки и перехода у нас накопилось много записей, посвященных планированию, решению возникающих проблем и новым конвенциям работы, и мы решили поделиться ими в трех статьях на Хабре. Надеемся, что наши заметки окажутся полезными структурно похожим на наш Vimbox проектам, которые только начали переезжать или собираются сделать это.