Deep Digital

Что наша жизнь? Игра!
#learning #jokes #games

Установлено, что дети эффективнее познают окружающий мир в игровой форме 👶

Чем разработчики хуже детей? Развлечься или провести время ожидания с пользой поможет интерактивная обучающая веб-игра CodeCombat.

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

И все это у вас в браузере 🌐

Поиграть можно на четырех языках:
— Python — установлен по умолчанию 🐍;
— JavaScript — нас вежливо предупредили, что это не Java 😂;
— CoffeeScript;
— C++ 🔥

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

Помимо игры выше, есть другие проекты, которые тоже заслуживают внимания:
— Elevator Saga;
— Screeps.

Так что бросайте свои «плойки» — играем и развиваемся 😎

Chulakov Dev

​​Минутка гордости 😎

На вопрос «Как вы провели этот год?» мы ответим, что много работали. И в офисе, и во время самоизоляции.

Вчера состоялось одно из самых ожидаемых событий в российском digital-сообществе: вышли итоги глобального рейтинга веб-студий — лучших разработчиков сайтов и сервисов 2020.

По итогам рейтингов мы снова лучшие, причем сразу в нескольких номинациях.

🥇 Студия заняла первое место в рейтинге по работе с крупнейшими компаниями в сфере финансов, инвестиций и банков.
🥇 Студия также возглавила рейтинг разработчиков корпоративных сайтов и сервисов.
🥇 Студия признана агентством № 1 для телекома по результатам рейтинга креативности веб-студий.
🥈 Студия вошла в ТОП-2 веб-студий России.

Мы благодарны всем клиентам, которые доверили нам реализацию своих проектов. В следующем году мы поставим еще более амбициозные цели и вместе их достигнем 😎

Хотите стать частью нашей команды и отправиться на покорение digital-высот? Пишите нам на hr@chulakov.ru

Chulakov Dev

Доступность. Все, что вы хотели знать, но не знали, где спросить
#frontend #ux #ui

Постоянно пополняющийся список ресурсов для создания доступных сайтов — от стандартов W3C до лучших практик, курсов и блогов.

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

Chulakov Dev

Как попасть в команду разработчиков Студии?

Поговорим об этом в пятницу, 27 ноября, в 19:00. В прямом эфире Instagram Live HR-директор Анна пообщается с Frontend Тeam Lead Сергеем. Они обсудят, какие задачи выполняет отдел разработки и как вступить в его ряды.

Бонус — история карьерного роста Сергея в Chulakov Studio.

Задать свои вопросы вы сможете во время эфира.

PHP 8: почти новогодний подарок
#php #release #backend

Вышел релиз PHP 8 🎉

Ну а в преддверии этого события было организовано мероприятие с участием основных core-разработчиков — Дмитрия Стогова и Никиты Попова.

Если вы не смотрели прямую трансляцию, то запись мероприятия можно найти здесь. Стоит досмотреть до конца, чтобы послушать сессию «вопрос-ответ» с участием core-разработчиков.

Мы бы хотели выделить несколько наиболее полезных фич, которые точно будем применять. Итак, поехали 👇

— Атрибуты/аннотации. Раньше аналогичный функционал был реализован различными библиотеками на основе обычного DocBlock, который с трудом понимается IDE, и нужно было все держать в голове. Теперь же каждому будет доступно создание собственных атрибутов и получение из них метаинформации.

— Расширенная типизация. Раз, два, три! Более строгая типизация была добавлена уже в 7-й версии, но сейчас мы получаем больше возможностей: mixed, static и union types.

— Именованные аргументы. Мы все ближе к Python? 🤔 Нет, но данное поведение теперь позволит пропускать необязательные параметры при вызове функций. Надеемся, это не приведет к росту количества параметров в библиотеках и вашем коде 😎

Все остальные изменения тоже хороши. Язык становится разнообразнее и чище. Мы, как и большинство фреймворков, уже готовы к выходу PHP 8.

А как обстоят дела у вас❓

Chulakov Dev

Как попасть в команду разработчиков Студии?

Поговорим об этом в пятницу, 27 ноября, в 19:00. В прямом эфире Instagram Live HR-директор Анна пообщается с Frontend Тeam Lead Сергеем. Они обсудят, какие задачи выполняет отдел разработки и как вступить в его ряды.

Бонус — история карьерного роста Сергея в Chulakov Studio.

Задать свои вопросы вы сможете во время эфира.

Chulakov Dev

СберИндекс — статистика, которой нам не хватало.
Часть 3/3: про инфраструктуру
#release #sber #devops #docker #swarm #gluster

Мы уже рассказали про фишки frontend и backend реализации проекта «СберИндекс».

Где все это работает? 🤔 Конечно же, в SberCloud.

Мы подготовили автоматизированную сборку необходимых сервисов в Docker-образы, которые в промышленной инфраструктуре разворачиваются и масштабируются в режиме Docker Swarm.

Для работы продукта предусмотрен Swarm-стек.

Frontend-приложение состоит из двух сервисов:
— nginx-proxy-frontend. Строится на образе Nginx и работает как http-прокси перед контейнером с основным приложением на Node.js.
— frontend-app. Сервис основного приложения клиентской части на Next.js. Обрабатывает http-запросы от nginx-proxy-frontend и взаимодействует с backend-сервисом nginx-fastcgi-api по RESTful API.

Backend-приложение содержит следующие сервисы:
— nginx-fastcgi-api. Работает в режиме fastcgi-прокси для php-fpm-сервиса, отвечающего за RESTful API для клиентского приложения. Основывается на образе Nginx.
—nginx-fastcgi-admin. Отвечает за взаимодействие с сервисом административной панели по протоколу fastcgi. Основывается на образе Nginx.
— backend-app. Сервис основного php-приложения на Yii, предоставляющий fastcgi-интерфейсы с административной панелью и RESTful API. Основан на кастомизированном образе php-fpm.
— queue-app. Отдельный сервис с очередью, реализующий обработку фоновых процессов импорта данных. Основан на php-fpm-образе и использует функциональность Yii для работы с очередями.

Конечно, при сборке каждого образа мы добавляли необходимые дополнительные пакеты и библиотеки. Например, расширения для PHP и конфигурационные файлы для Nginx.

Все сервисы стека описаны в docker-compose.yml.

Стоит отметить, что Redis и СУБД MariaDB не контейнеризированы и развернуты как отдельные инстансы в инфраструктуре SberCloud с учетом репликации и масштабирования.
Управлением общими файловыми ресурсами, которые монтируются к виртуальным машинам в качестве подключаемых томов для Docker-контейнеров, занимается распределенная файловая система GlusterFS.

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

Спасибо, Сбер 🎉

Chulakov Dev

СберИндекс — статистика, которой нам не хватало.
Часть 2/3: про Backend
#release #sber #backend #yii #mysql #redis #restful

В прошлой заметке мы рассказали о примечательных инструментах, которые применили при разработке клиентской части сервиса в проекте «СберИндекс».

А как же backend? 😧 Бизнес-логика приложения реализована на Yii Framework в связке с MariaDB в качестве реляционной СУБД.

Разбираемся с фишками на бэке:

— Redis — обеспечивает хранение кэша аналитических данных для построения графиков. С учетом высокой алгоритмической сложности выборки и фильтрации этих данных кэширование сильно сокращает время отклика интерфейсов продукта.
— Поддержка мультиязычности всего контента, в том числе графиков и легенд.
— Интеграция с «ДомКлик» — для автоматизации получения необходимых данных для графиков по рынку недвижимости в России.
— Стандартизация данных из различных сервисов для безболезненного изменения вариантов отображения графиков.
— Импорт данных. Сервис позволяет импортировать и валидировать аналитические данные из формата JSON.
— Специализированный интерфейс административной панели позволяет влиять на тип графиков и тонко конфигурировать их внешний вид. Для администраторов сервиса реализован предпросмотр графиков без их публикации, в режиме черновиков.
— CQRS в основе архитектуры для организации RESTful API. Подход позволил значительно уменьшить отклик RESTful API и оптимизировать объем обрабатываемых данных, что важно для динамически растущего аналитического сервиса.

В заключительной части серии заметок расскажем про организацию инфраструктуры проекта. До встречи 🙌

Chulakov Dev

СберИндекс — статистика, которой нам не хватало.
Часть 1/3: про Frontend
#release #sber #frontend #react #nextjs

Наличие качественных статистических данных — в наше время это не роскошь, а необходимость.

Для экосистемы продуктов Сбера мы разработали статистический и аналитический сервис «СберИндекс». Далее мы расскажем о самых примечательных технологиях, библиотеках и фреймворках, которые были задействованы в этом проекте. И начнем с frontend-части сервиса 😎

При разработке клиентской части мы использовали наши любимые базовые инструменты — фреймворк Next.js и библиотеку Redux, а также ряд полезных библиотек, помогающих решить бизнес-задачи в рамках сервиса:

— React Google Charts — библиотека для построения графиков и диаграмм от Google, набор инструментов которой идеально подходит для задач сайта. Именно с помощью этой библиотеки мы реализовали наглядное представление статистических данных в виде графиков различного типа.
— React HTML Parser — преобразует HTML-текст в React-компоненты, и, в отличие от своего аналога dangerouslySetInnerHTML, библиотека проводит ряд проверок и оптимизацию невалидной разметки. Через него пропускались тексты, заполненные с помощью WYSIWYG в панели управления сервисом: исследования, описания графиков и разделов и т.д.
— React-responsive — библиотека помогает адаптировать сложные элементы интерфейса под любое устройство. Одним из решающих факторов в выборе инструмента стала возможность использования методов библиотеки при SSR. Вместо привычных ширины и высоты окна на сервере библиотека использует User-Agent пользователя.
— Anime.js — легковесная, но продвинутая библиотека для реализации js-анимаций. С помощью этой библиотеки выполнены некоторые микровзаимодействия, например, анимация появления попапов.

Продолжение следует! В следующей заметке расскажем об инфраструктуре и backend-части сервиса.

Chulakov Dev

Минутка HR

Хотим поделиться с вами крутой новостью. Мы запустили телеграм-канал @chulakov_team. Канал будет полезен для всех, кто хочет развиваться в сфере digital.

HR-специалисты Студии подготовили полезную информацию для трудоустройства, а также для профессионального и личностного развития:
— актуальные вакансии Студии;
— лайфхаки по составлению продающего резюме;
— правила создания портфолио;
— советы по подготовке и прохождению технических интервью;
— списки необходимых навыков для digital-профессий;
— упражнения по постановке мотивирующей цели в карьере;
— подборки инструментов по саморазвитию и многое другое.

Подписывайтесь и будьте в курсе HR-трендов 😎

Опять это окружение
#frontend #react #nextjs

Фреймворк Next.js позволяет быстро приступить к разработке интерактивных интерфейсов, выстраивая компонентную архитектуру и обеспечивая бесшовность переходов пользователя внутри SPA-приложения.

Однако его базовой конфигурации не всегда достаточно для решения определенного рода проблем. Именно поэтому мы постоянно дорабатываем свои корпоративные шаблоны приложений, основанные на Next.js.

Недавно при реализации CI/CD-процесса мы столкнулись с проблемой. При сборке проекта с помощью CLI next конкретные значения используемых переменных окружения зашиваются в код финального бандла. И для того чтобы менять значение env-переменных, необходимо пересобирать проект.

Такой подход нас не устроил, так как необходимо было подменять значения переменных окружения при непосредственном запуске Docker-образа в различных средах. Например, для stage- и production-окружения значение переменной API_URL, которое содержит базовый URL для используемого RESTful API, может различаться.

Второй неприятностью стало то, что одноименной переменной в нашем коде на стороне сервера и клиента должны соответствовать значения различных переменных окружения. Например, в коде у нас есть переменная apiUrl, значение которой на клиентской стороне должно браться из переменной окружения CLIENT_API_URL, а на сервере — SERVER_API_URL. Ведь на сервере запрос к API делается внутри сети, а на клиенте — через внешний http-запрос на доменное имя backend-проекта.

В API Next.js для работы с env-переменными нет возможности разграничить конфигурацию на клиентскую и серверную. В новой версии была добавлена возможность создавать отдельные файлы для переменных окружения, однако нашы проблемы это не решало.

🧠 Собрав небольшой брейнcторминг, мы нашли выход и написали хелпер, который помог нам справиться с задачами, описанными выше.

Next.js предоставляет интерфейс Runtime Configuration, с помощью которого возможно указать два набора конфигураций в файле: next.config.js — для сервера serverRuntimeConfig, общий — для клиента и сервера publicRuntimeConfig. В полях конфигураций и будут записаны переменные окружения, как это видно из документации.

Минутка PR
#chulakov #release

Много лет мы известны в профессиональном сообществе как дизайн-студия № 1 в России. Наша команда активно реализовывает масштабные и востребованные веб-сервисы для крупнейших банков и телекомов. Мы покоряем рейтинги, получаем награды, но продолжаем оставаться в сознании окружающих представителями исключительно мира дизайна.

На сегодняшний день, помимо дизайна и UX/UI-экспертизы, Студия развивает профессиональное сообщество технических специалистов: веб- и мобильных разработчиков, QA- и DevOps-инженеров, технических руководителей команд и архитекторов ПО.

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

Теперь каждый человек, которого интересует что угодно в цифровой сфере, от консалтинга до сложной разработки, должен знать, что digital — это мы 😎 И новый сайт прекрасно это отражает.

Переходите по ссылке и убедитесь сами 👇

Не ORM единым
#orm #dbms #doctrine #activerecord #php

Для абстрагирования работы с БД современные фреймворки используют Persistence Layer, где обычно реализуется паттерн Active Record или применяется ORM.

В результате на уровне приложения мы работаем с map-объектами, которые предоставляют удобный API для безопасного (насколько это возможно) манипулирования данными. Такое удобство может негативно сказываться на общей производительности приложения, особенно при сложных выборка зависимых данных.

Одним из решений проблем производительности является внедрение подхода CQRS. Здесь работа по чтению и записи данных разделяется на отдельные методы-обработчики, но от автоматического мапинга данных придется отказаться в пользу plain-text-запросов на выборку данных.

Разобраться с таким подходом новичку поможет доклад ниже 👇

Ура[?]! Мы выбрали микросервисы
#backend #architecture

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

Например, как выделить атомарные микросервисы на определенном уровне абстракции. Или каким образом быстро организовать внутреннее взаимодействие между микросервисами на основе gRPC.

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

— «Целостность данных в микросервисной архитектуре»;
— «Event-Driven Architecture в контексте микросервисов: основные паттерны».

Отправка почты кабанчику
#backend #debug #php

При разработке и внедрении веб-сервисов мы постоянно используем нотификацию пользователей посредством email-уведомлений. Регистрация, восстановление забытого пароля, маркетинговые акции — все эти события влекут за собой доставку контента пользователю через почту в виде текстовых или html-писем.

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

Современные фреймворки в debug-режиме позволяют конфигурировать свои компоненты-мейлеры для мнимой отправки писем в файлы. Так, Yii Mailer имеет параметр конфигурации useFileTransport, а Laravel позволяет указывать драйвер отправки.

Для себя мы нашли более удобный способ эмуляции отправки и просмотра email-уведомлений — MailHog. Причем для фреймворка такой сервис настраивается и представляется абсолютно так же, как и реальный внешний SMTP-сервер, правда, без шифрования.

Этот сервис состоит из двух основных частей — SMTP-сервера и HTTP-приложения для просмотра и управления полученными от клиентов письмами. При этом реализовано несколько режимов хранения писем — в оперативной памяти и в файловой системе. Приятным дополнением ко всему является возможность поставки сервиса в окружение Docker и Docker Compose, а значит, интеграция и внедрение в окружение наших разработчиков.

Низкая связанность бывает разной
#backend #frontend #grasp

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

В разработке мы используем различные архитектурные паттерны и далеко не всегда микросервисную архитектуру. Отдельного внимания заслуживает и модульный монолитный подход с организацией anticorruption layer для независимости каждого из модулей общей системы.

Который час, не подскажете?
#mobile_dev #ios #swift

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

Стандартные методы Swift позволяют получать системную дату и время iOS-устройства. Такой подход считается весьма ненадежным, и его применение не рекомендуется: время пользовательского устройства легко изменить с помощью системных настроек ОС. Рассмотрим альтернативные способы получения даты и времени, а также их достоинства и недостатки.

С помощью GPS 🛰 Если работа с GPS-модулем устройства доступна, то существует возможность запросить дату и время для текущего региона с помощью объекта CLLocation фреймворка CoreLocation.

Хитрость с UserDefaults. Это неоднозначное решение позволяет вычислять интервалы времени на основе сохранения времени первого запуска приложения в хранилище UserDefaults и дальнейшего отслеживания и фиксации временных интервалов в процессе работы приложения. Минус очевиден — все теряет смысл, если приложение удалить, а затем установить повторно 😭

NTPD. Весьма стабильный и надежный способ, если исключить возникновение сетевых проблем. Из популярных библиотек есть TrueTime и Kronos.

NTS. Cервис Cloudflare Secure Time Service, например, предоставляет возможность получения даты и времени посредством протокола NTS, обеспечивающего дополнительное шифрование для NTP.

С помощью backend-сервера. Если приложение взаимодействует с backend-сервером, например, по RESTful API и разработчики серверной логики — ваши близкие друзья или вы вообще одна команда, то попросите сделать для вас еще один REST-метод, возвращающий дату и время в нужном вам формате 😎

Становись иосником быстро и бесплатно
#ios #mobile_dev

Подборка бесплатных, а главное, полезных образовательных ресурсов, которые помогут постигнуть азы iOS-разработки:

— разработка первого приложения по стандартам Apple на UI Kit;
— гайд по Auto Layout;
— документация Apple;
— бесплатный курс от Стэнфордского университета по UI Kit;
— в дополнение к 👆 отсюда берем 8, 12, 13 темы;
— разъяснение некоторых тем прошлых курсов на русском языке;
— новый курс от Стэнфордского университета по использованию Swift UI;
— статья для обучения RxSwift.

Реактивные формы 🚀
#frontend #react

Работая с библиотекой React, важно отслеживать производительность интерфейса и его компонентов. Самый простой способ оптимизации производительности — уменьшение количества повторных рендерингов компонентов при пользовательском взаимодействии с ними.

Рассмотрим пример простого, но часто достаточно нагруженного компонента — формы ввода данных. Подобный код можно встретить как в туториалах, так и в реальных проектах. Поле, значение, state… — на первый взгляд все так 🤔

Но, используя state, мы заставляем ререндериться всю форму при каждом изменении значения поля input. Если форма обладает большим количеством разнородных полей, например, служит для фильтрации товаров в разделе интернет-магазина, то большое количество ее ререндеров негативно скажется на общей производительности интерфейса.

Именно смена состояния компонента вызывает его дополнительные перерисовки, которые могут являться избыточными. Вместо того чтобы перезаписывать state, используйте ref-ссылку 🥳

После внимательного просмотра нашей формы становится очевидно, что состояние поля ввода input необходимо только перед ее непосредственной отправкой на сервер. Тогда можно получить ссылку на DOM-элемент input и передать его значение в обработчике отправки формы. Пример оптимизированного кода с использованием ref смотрите здесь.

Такой подход в лоб может применяться для простых компонентов. Для более комплексных решений мы рекомендуем рассмотреть библиотеку react-hook-form. Под капотом она использует схожую с нашим примером механику и применяет ref-ссылки для получения доступа к значению поля.

Принципы работы веб на пальцах
#backend #frontend #qa #mobile

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

Иногда мы получаем неоднозначные ответы 😂

Для того чтобы быстро разобраться с общим принципом работы веб-сервисов, загляните по ссылке ниже 👇

З.Ы. Golang тут ни при чем 😎