Добро пожаловать на канал команды разработки группы 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-рельефа. Об этой заумной штуке даже на Википедии есть.

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

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

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

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

Делаем это на ThreeJS

Для тех кому мало демки и хочется получить «рецепт», покажем как можно легко совместить объект с картой смещений.

Если вооружиться библиотекой Three.JS, то это совсем несложно, даже если объект не является плоскостью. Смотрите:
https://codepen.io/OlegChulakovStudio/pen/pWrBop?editors=0010

О Backend-стеке

При разработке сервисов мы делаем упор на обеспечение максимальной гибкости, расширяемости и модульности систем, а также на работу с высокими нагрузками. Поэтому в качестве основы для Backend-части мы, как правило, используем популярные фреймворки и СУБД.

Серверная часть большинства наших проектов основана на PHP-фреймворках Yii 2 и Laravel, а также же на NodeJS (для Real-time сервисов, ботов и тд).

Взаимодействие клиентской части с Backend-ом осуществляется, чаще всего, через, проектируемые нами для каждого проекта, REST API. Таким образом, мы добиваемся большей гибкости в интерфейсах, а также делаем единую серверную часть для веб-сайтов и мобильных приложений.

Попытаемся перечислить, чем же занимаются наши Backend-разработчики:

Разработка систем и сервисов:
— Проектирование архитектуры приложения и БД с учетом возможных нагрузок в режиме реального времени
— Реализация гибкой масштабируемости системы на основе кластеризации и репликации баз данных
— Построение запросов для выборки и анализа больших объемов аналитической и статистической информации
— Настройка серверов, кэширование кода и запросов к базам данных

Интеграция с программными системами:
— 1С, ERP-системы
— Платежные сервисы и эквайринг
— Социальные сети
— Службы доставки
— SMS-шлюзы

Поддержка существующих программных систем:
— Оптимизация существующих реляционных структур базы данных
— Рефакторинг кода
— Переработка компонентов системы для повышения производительности и безопасности

Создание сервисов, основанных на машинном обучении:
— Рекомендательные сервисы
— Анализ и обработка поступающих данных
— Автоматическое взаимодействие системы с пользователем

Разработка Real-time приложений:
— Системы с динамично меняющимися данными
— Онлайн-чаты
— Боты для мессенджеров
— Backend для игр

База сохрани эмоджи 🙏

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

Причиной является то, что некоторые UTF-символы не лежат в диапазоне BMP, и для их хранения требуется более 3 байт.

Если вы используете такую популярную СУБД как MySQL, то этих проблем можно избежать, используя кодировку utf8mb4, которая реализована в MySQL с версии 5.5.3.

Для решения нужно:
1) Необходимым текстовым полям в базе данных задать эту кодировку. Например, так:
CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci
2) Настроить соединение в конфигурации вашего фреймворка или CMS. Примеры:
https://bitbucket.org/snippets/OlegChulakovStudio/EqEj7L

Chramework

Помимо работы над проектами наших любимых клиентов, мы все время трудимся над разработкой внутренних инструментов и стартапов. Мы настолько любим это дело, что у нас даже есть для этого отдельная команда — Chulakov Lab:
https://chulakov.ru/lab

В этом квартале мы планируем запустить аж 9 студийных проектов. Девять, Карл! У нас тут и система учета документов, и бот управления проектами, и система подбора подрядчиков, и чего тут вообще только нет.

Мы задумались об оптимизации времени на верстку наших сервисов. И решили сделать корпоративную библиотеку компонентов (кнопочки, формочки, вот-это-вот-все).

Разумеется, у нас давно есть свой «бутстрап» (https://library.chulakov.ru), но он сделан по-старинке и не очень подходит для использования в React-среде.

Ребята с энтузиазмом восприняли идею создания библиотеки компонентов на React и сделали первую версию, буквально, за пару дней.

Торжественно окрестили новую библиотеку «Chramework» (Chulakov + Framework, ну вы поняли, да?) и уже начали использовать в разработке.

Так же, мы собрали себе документацию с демками с помощью react-styleguidist (хорошая штука). Вот поглядите:
https://chramework.chulakov.ru

THIS IS THE MOST IMPORTANT LINE

При разработке UI Kit на React для себя или клиента, важно обеспечить его легкую установку, использование и обновление во всех проектах.

Для этого лучше всего разместить UI Kit в NPM. С его помощью можно установить UI Kit в проект командой npm install, подключать компоненты используя import и добиться централизованного обновления библиотеки.

Когда мы занимались этим в первый раз, то столкнулись с массой ошибок при импорте компонентов библиотеки в проект. На определенном этапе поисков ответа мы наткнулись на статью разработчика, который, очевидно, очень много страдал пока искал решение этой же проблемы:
https://medium.com/@BrodaNoel/how-to-create-a-react-component-and-publish-it-in-npm-668ad7d363ce

Особого внимания заслуживает комментарий к заветной строчке в конфиге Webpack:
THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide

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

Прокрутка внутри всплывающих блоков в Safari на iOS

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

Хотим рассказать решение одной из связанных с ним частых проблем, которая, мы уверены, сгубила нервы многих Frontend-разработчиков по всему миру. А именно проблему прокрутки внутри блоков, расположенных поверх страницы (таких как, например, модальные окна или боковые меню).

Увы, если положить блок, например, с помощью position: fixed поверх страницы, задать ему размеры и указать overflow: auto, то iOS Safari при его прокрутке устроит вам настоящий парад багов (https://vimeo.com/239318767/2240902c40):
1) Вместо (и во время) прокрутки в блоке двигается страница на фоне.
2) Как следствие, раскрываются/схлопываются верхняя и нижняя панели браузера.
3) Если контент блока меньше его высоты (прокрутка не нужна), то свайпы всегда прокручивают страницу на фоне.
4) Если блок полноэкранный, то его нижняя часть уходит под нижнюю панель браузера.
5) Меняется высота всплывающего блока и появляется пустота под ним.

Если изучить сайты с подобными элементами, то видно, что эту проблему либо игнорируют вообще, либо исправляют не полностью, либо чинят с помощью JavaScript-прокрутки вроде iScroll (что приводит к десятку других проблем и багов, вроде неверного расчета высоты прокручиваемой области или невозможности пользоваться элементами форм).

От этой проблемы и всех ее симптомов можно достаточно легко избавиться. Рассказываем как:

Отключить прокрутку страницы можно с помощью CSS, добавив position: fixed для body. Страница при этом прокрутится к началу, но эту мелочь легко исправить, установив, также, в стилях body значение свойства top соответствующее текущему положению прокрутки страницы.

В плане кода, решение проблемы легко умещается в один CSS-класс и пару функций (заблокировать/разблокировать прокрутку):
https://bitbucket.org/snippets/OlegChulakovStudio/RgBX8x

Посмотреть решение в действии вы можете, например, на бете новой мобильной версии онлайн-гипермаркета «Утконос» (https://www.utkonos.ru), презентацию и историю создания которой мы скоро опубликуем на сайте Студии.