Добро пожаловать на канал команды разработки группы Chulakov Digital.

Мы планируем размещать здесь советы и рекомендации по разработке web-сервисов, примеры и заметки по созданию анимации, внутристудийные статьи и презентации, анонсы наших Open Source и корпоративных проектов, будем (самую чуточку) показывать процесс работы, а также курьезы, которые в нем возникают.

Если кто-то забыл или (такого конечно быть не может) не знал о наших успехах:

Ежегодно Студия Олега Чулакова запускает десятки сайтов, систем и веб-сервисов, выпускает мобильные приложения, занимаемся поддержкой федеральных и международных клиентов, а также тестированием всего этого добра.

Мы запустили много проектов (весьма неплохих, надо сказать) и, сейчас, компания входит в Топ-2 дизайн-студий, Топ-8 ведущих производственных digital-агентств России и является самым награждаемым российским digital-агентством по версии Tagline.

О Frontend-стеке

Сейчас в основе Frontend-а большинства наших проектов лежит корпоративный boilerplate, включающий в себя:
— React, React Router
— Redux, Redux Form
— ES6, Babel
— Webpack, Gulp
— Stylus, PostCSS
— ESlint

Для небольших или промо-проектов используем сборку, которая работает на Gulp и инструментах вроде Babel, Stylus, PostCSS, CSSO и UglifyJS.

Кроме того, мы знатно разбираемся в анимациях (эта тема, наверняка, многим интересна), делаем 2D-анимации, игры и 3D-интерактив с помощью:
— Canvas 2D-context (например, фоны на silasveta.com)
— CreateJS (гляньте на болид bakucitycircuit.com, врум!)
— PixiJS (мини-игры на главной playkot.com)
— ThreeJS (крутая 3D-карта Азербайджана bakucitycircuit.com/en/azerbaijan)

Стрелочные функции в классах JavaScript

Если вы разрабатываете на React или просто «пишете» на ECMAScript 6 и часто пользуетесь классами, то вам наверняка приходится бороться за сохранность контекста при вызове функций.

По нашим наблюдениям, эту проблему, как правило, решают с помощью bind:

this.doSomething.bind(this)

Мало кто знает, что можно избавиться от «кучи» bind-ов:
Если подключить к проекту babel-плагин transform-class-properties, то станет возможным использование в классах стрелочных функций, которые не теряют контекст экземпляра класса:

 class Test extends Component { 
  doSomething = () => {
    this.setState({ done: true });
  }
  render() {
    return <div onClick={this.doSomething}>Do it</div>
  }
}

Кроме того, у плагина есть ещё несколько классных возможностей (например, установка дефолтных свойств экземпляра без конструктора) с которыми можно ознакомиться перейдя по прикрепленной ссылке.

Displacement Mapping

Если кому-нибудь вскружила голову карта Азербайджана на сайте Гран-при Формулы 1 в Баку (https://bakucitycircuit.com/en/azerbaijan) и интересно как мы сделали трехмерный рельеф — нам не жалко рассказать.

Начнем с того, что 3D-модели города Баку и гор Азербайджана у нас не было (печаль, что уж говорить).

Мы раздобыли спутниковые снимки и начали много думать над тем, как превратить это в 3D. Теплым (Ростов же) апрельским днем мы прочитали про технику под названием Displacement mapping, которая идеально подходит под задачу связанную с построением 3D-рельефа. Об этой заумной штуке даже на Википедии есть.

Суть достаточно проста — за счет изображения (имя ему Карта Смещений) выдавливаются точки в плоском (и не только) объекте — чем светлее точка на изображении, тем сильнее выдвигается это место на объекте. Круто, а?

Мы вам даже демо не поленились сделать:
http://dev.chulakov.ru/displacement-map/public/

Кроме того, нам повезло найти сервис http://terrain.party/, в котором можно получить Карту Смещений для любого участка на планете. Так что, как вы поняли, мы довольно быстро добились желаемого результата.

В завтрашней заметке покажем вам еще одно крутое демо и расскажем как наложить Карту Смещений на объект, чтобы получить 3D-рельеф.