Минутка PR
#chulakov #release
Много лет мы известны в профессиональном сообществе как дизайн-студия № 1 в России. Наша команда активно реализовывает масштабные и востребованные веб-сервисы для крупнейших банков и телекомов. Мы покоряем рейтинги, получаем награды, но продолжаем оставаться в сознании окружающих представителями исключительно мира дизайна.
На сегодняшний день, помимо дизайна и UX/UI-экспертизы, Студия развивает профессиональное сообщество технических специалистов: веб- и мобильных разработчиков, QA- и DevOps-инженеров, технических руководителей команд и архитекторов ПО.
На полностью обновленном сайте Студии Олега Чулакова мы пересмотрели подход к презентации проектов, показали свои текущие знания, навыки и компетенции.
Теперь каждый человек, которого интересует что угодно в цифровой сфере, от консалтинга до сложной разработки, должен знать, что digital — это мы 😎 И новый сайт прекрасно это отражает.
Переходите по ссылке и убедитесь сами 👇
#chulakov #release
Много лет мы известны в профессиональном сообществе как дизайн-студия № 1 в России. Наша команда активно реализовывает масштабные и востребованные веб-сервисы для крупнейших банков и телекомов. Мы покоряем рейтинги, получаем награды, но продолжаем оставаться в сознании окружающих представителями исключительно мира дизайна.
На сегодняшний день, помимо дизайна и UX/UI-экспертизы, Студия развивает профессиональное сообщество технических специалистов: веб- и мобильных разработчиков, QA- и DevOps-инженеров, технических руководителей команд и архитекторов ПО.
На полностью обновленном сайте Студии Олега Чулакова мы пересмотрели подход к презентации проектов, показали свои текущие знания, навыки и компетенции.
Теперь каждый человек, которого интересует что угодно в цифровой сфере, от консалтинга до сложной разработки, должен знать, что digital — это мы 😎 И новый сайт прекрасно это отражает.
Переходите по ссылке и убедитесь сами 👇
Опять это окружение
#frontend #react #nextjs
Фреймворк Next.js позволяет быстро приступить к разработке интерактивных интерфейсов, выстраивая компонентную архитектуру и обеспечивая бесшовность переходов пользователя внутри SPA-приложения.
Однако его базовой конфигурации не всегда достаточно для решения определенного рода проблем. Именно поэтому мы постоянно дорабатываем свои корпоративные шаблоны приложений, основанные на Next.js.
Недавно при реализации CI/CD-процесса мы столкнулись с проблемой. При сборке проекта с помощью CLI next конкретные значения используемых переменных окружения зашиваются в код финального бандла. И для того чтобы менять значение env-переменных, необходимо пересобирать проект.
Такой подход нас не устроил, так как необходимо было подменять значения переменных окружения при непосредственном запуске Docker-образа в различных средах. Например, для stage- и production-окружения значение переменной
Второй неприятностью стало то, что одноименной переменной в нашем коде на стороне сервера и клиента должны соответствовать значения различных переменных окружения. Например, в коде у нас есть переменная
В API Next.js для работы с env-переменными нет возможности разграничить конфигурацию на клиентскую и серверную. В новой версии была добавлена возможность создавать отдельные файлы для переменных окружения, однако нашы проблемы это не решало.
🧠 Собрав небольшой брейнcторминг, мы нашли выход и написали хелпер, который помог нам справиться с задачами, описанными выше.
Next.js предоставляет интерфейс Runtime Configuration, с помощью которого возможно указать два набора конфигураций в файле: next.config.js — для сервера serverRuntimeConfig, общий — для клиента и сервера publicRuntimeConfig. В полях конфигураций и будут записаны переменные окружения, как это видно из документации.
#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. В полях конфигураций и будут записаны переменные окружения, как это видно из документации.
Минутка HR
Хотим поделиться с вами крутой новостью. Мы запустили телеграм-канал @chulakov_team. Канал будет полезен для всех, кто хочет развиваться в сфере digital.
HR-специалисты Студии подготовили полезную информацию для трудоустройства, а также для профессионального и личностного развития:
— актуальные вакансии Студии;
— лайфхаки по составлению продающего резюме;
— правила создания портфолио;
— советы по подготовке и прохождению технических интервью;
— списки необходимых навыков для digital-профессий;
— упражнения по постановке мотивирующей цели в карьере;
— подборки инструментов по саморазвитию и многое другое.
Подписывайтесь и будьте в курсе HR-трендов 😎
Хотим поделиться с вами крутой новостью. Мы запустили телеграм-канал @chulakov_team. Канал будет полезен для всех, кто хочет развиваться в сфере digital.
HR-специалисты Студии подготовили полезную информацию для трудоустройства, а также для профессионального и личностного развития:
— актуальные вакансии Студии;
— лайфхаки по составлению продающего резюме;
— правила создания портфолио;
— советы по подготовке и прохождению технических интервью;
— списки необходимых навыков для digital-профессий;
— упражнения по постановке мотивирующей цели в карьере;
— подборки инструментов по саморазвитию и многое другое.
Подписывайтесь и будьте в курсе HR-трендов 😎
СберИндекс — статистика, которой нам не хватало.
Часть 1/3: про Frontend
#release #sber #frontend #react #nextjs
Наличие качественных статистических данных — в наше время это не роскошь, а необходимость.
Для экосистемы продуктов Сбера мы разработали статистический и аналитический сервис «СберИндекс». Далее мы расскажем о самых примечательных технологиях, библиотеках и фреймворках, которые были задействованы в этом проекте. И начнем с frontend-части сервиса 😎
При разработке клиентской части мы использовали наши любимые базовые инструменты — фреймворк Next.js и библиотеку Redux, а также ряд полезных библиотек, помогающих решить бизнес-задачи в рамках сервиса:
— React Google Charts — библиотека для построения графиков и диаграмм от Google, набор инструментов которой идеально подходит для задач сайта. Именно с помощью этой библиотеки мы реализовали наглядное представление статистических данных в виде графиков различного типа.
— React HTML Parser — преобразует HTML-текст в React-компоненты, и, в отличие от своего аналога
— React-responsive — библиотека помогает адаптировать сложные элементы интерфейса под любое устройство. Одним из решающих факторов в выборе инструмента стала возможность использования методов библиотеки при SSR. Вместо привычных ширины и высоты окна на сервере библиотека использует
— Anime.js — легковесная, но продвинутая библиотека для реализации js-анимаций. С помощью этой библиотеки выполнены некоторые микровзаимодействия, например, анимация появления попапов.
Продолжение следует! В следующей заметке расскажем об инфраструктуре и backend-части сервиса.
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
СберИндекс — статистика, которой нам не хватало.
Часть 2/3: про Backend
#release #sber #backend #yii #mysql #redis #restful
В прошлой заметке мы рассказали о примечательных инструментах, которые применили при разработке клиентской части сервиса в проекте «СберИндекс».
А как же backend? 😧 Бизнес-логика приложения реализована на Yii Framework в связке с MariaDB в качестве реляционной СУБД.
Разбираемся с фишками на бэке:
— Redis — обеспечивает хранение кэша аналитических данных для построения графиков. С учетом высокой алгоритмической сложности выборки и фильтрации этих данных кэширование сильно сокращает время отклика интерфейсов продукта.
— Поддержка мультиязычности всего контента, в том числе графиков и легенд.
— Интеграция с «ДомКлик» — для автоматизации получения необходимых данных для графиков по рынку недвижимости в России.
— Стандартизация данных из различных сервисов для безболезненного изменения вариантов отображения графиков.
— Импорт данных. Сервис позволяет импортировать и валидировать аналитические данные из формата JSON.
— Специализированный интерфейс административной панели позволяет влиять на тип графиков и тонко конфигурировать их внешний вид. Для администраторов сервиса реализован предпросмотр графиков без их публикации, в режиме черновиков.
— CQRS в основе архитектуры для организации RESTful API. Подход позволил значительно уменьшить отклик RESTful API и оптимизировать объем обрабатываемых данных, что важно для динамически растущего аналитического сервиса.
В заключительной части серии заметок расскажем про организацию инфраструктуры проекта. До встречи 🙌
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
СберИндекс — статистика, которой нам не хватало.
Часть 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.
Все сервисы стека описаны в
Стоит отметить, что Redis и СУБД MariaDB не контейнеризированы и развернуты как отдельные инстансы в инфраструктуре SberCloud с учетом репликации и масштабирования.
Управлением общими файловыми ресурсами, которые монтируются к виртуальным машинам в качестве подключаемых томов для Docker-контейнеров, занимается распределенная файловая система GlusterFS.
Одна из важных составляющих качественного продукта — грамотная система менеджмента и постановки задач со стороны клиента. Мы рады, что работаем в тесном симбиозе с командой Сбера и делаем продукты такого уровня.
Спасибо, Сбер 🎉
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
Как попасть в команду разработчиков Студии?
Поговорим об этом в пятницу, 27 ноября, в 19:00. В прямом эфире Instagram Live HR-директор Анна пообщается с Frontend Тeam Lead Сергеем. Они обсудят, какие задачи выполняет отдел разработки и как вступить в его ряды.
Бонус — история карьерного роста Сергея в Chulakov Studio.
Задать свои вопросы вы сможете во время эфира.
Chulakov Dev
Поговорим об этом в пятницу, 27 ноября, в 19:00. В прямом эфире Instagram Live HR-директор Анна пообщается с Frontend Тeam Lead Сергеем. Они обсудят, какие задачи выполняет отдел разработки и как вступить в его ряды.
Бонус — история карьерного роста Сергея в Chulakov Studio.
Задать свои вопросы вы сможете во время эфира.
Chulakov Dev
PHP 8: почти новогодний подарок
#php #release #backend
Вышел релиз PHP 8 🎉
Ну а в преддверии этого события было организовано мероприятие с участием основных core-разработчиков — Дмитрия Стогова и Никиты Попова.
Если вы не смотрели прямую трансляцию, то запись мероприятия можно найти здесь. Стоит досмотреть до конца, чтобы послушать сессию «вопрос-ответ» с участием core-разработчиков.
Мы бы хотели выделить несколько наиболее полезных фич, которые точно будем применять. Итак, поехали 👇
— Атрибуты/аннотации. Раньше аналогичный функционал был реализован различными библиотеками на основе обычного
— Расширенная типизация. Раз, два, три! Более строгая типизация была добавлена уже в 7-й версии, но сейчас мы получаем больше возможностей:
— Именованные аргументы. Мы все ближе к Python? 🤔 Нет, но данное поведение теперь позволит пропускать необязательные параметры при вызове функций. Надеемся, это не приведет к росту количества параметров в библиотеках и вашем коде 😎
Все остальные изменения тоже хороши. Язык становится разнообразнее и чище. Мы, как и большинство фреймворков, уже готовы к выходу PHP 8.
А как обстоят дела у вас❓
Chulakov Dev
#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.
Задать свои вопросы вы сможете во время эфира.
Поговорим об этом в пятницу, 27 ноября, в 19:00. В прямом эфире Instagram Live HR-директор Анна пообщается с Frontend Тeam Lead Сергеем. Они обсудят, какие задачи выполняет отдел разработки и как вступить в его ряды.
Бонус — история карьерного роста Сергея в Chulakov Studio.
Задать свои вопросы вы сможете во время эфира.
Доступность. Все, что вы хотели знать, но не знали, где спросить
#frontend #ux #ui
Постоянно пополняющийся список ресурсов для создания доступных сайтов — от стандартов W3C до лучших практик, курсов и блогов.
Каталог будет интересен не только разработчикам, но и дизайнерам, ведь сайт не может быть доступным, если он плохо спроектирован.
Chulakov Dev
#frontend #ux #ui
Постоянно пополняющийся список ресурсов для создания доступных сайтов — от стандартов W3C до лучших практик, курсов и блогов.
Каталог будет интересен не только разработчикам, но и дизайнерам, ведь сайт не может быть доступным, если он плохо спроектирован.
Chulakov Dev
Минутка гордости 😎
На вопрос «Как вы провели этот год?» мы ответим, что много работали. И в офисе, и во время самоизоляции.
Вчера состоялось одно из самых ожидаемых событий в российском digital-сообществе: вышли итоги глобального рейтинга веб-студий — лучших разработчиков сайтов и сервисов 2020.
По итогам рейтингов мы снова лучшие, причем сразу в нескольких номинациях.
🥇 Студия заняла первое место в рейтинге по работе с крупнейшими компаниями в сфере финансов, инвестиций и банков.
🥇 Студия также возглавила рейтинг разработчиков корпоративных сайтов и сервисов.
🥇 Студия признана агентством № 1 для телекома по результатам рейтинга креативности веб-студий.
🥈 Студия вошла в ТОП-2 веб-студий России.
Мы благодарны всем клиентам, которые доверили нам реализацию своих проектов. В следующем году мы поставим еще более амбициозные цели и вместе их достигнем 😎
Хотите стать частью нашей команды и отправиться на покорение digital-высот? Пишите нам на hr@chulakov.ru
Chulakov Dev
На вопрос «Как вы провели этот год?» мы ответим, что много работали. И в офисе, и во время самоизоляции.
Вчера состоялось одно из самых ожидаемых событий в российском digital-сообществе: вышли итоги глобального рейтинга веб-студий — лучших разработчиков сайтов и сервисов 2020.
По итогам рейтингов мы снова лучшие, причем сразу в нескольких номинациях.
🥇 Студия заняла первое место в рейтинге по работе с крупнейшими компаниями в сфере финансов, инвестиций и банков.
🥇 Студия также возглавила рейтинг разработчиков корпоративных сайтов и сервисов.
🥇 Студия признана агентством № 1 для телекома по результатам рейтинга креативности веб-студий.
🥈 Студия вошла в ТОП-2 веб-студий России.
Мы благодарны всем клиентам, которые доверили нам реализацию своих проектов. В следующем году мы поставим еще более амбициозные цели и вместе их достигнем 😎
Хотите стать частью нашей команды и отправиться на покорение digital-высот? Пишите нам на hr@chulakov.ru
Chulakov Dev
Что наша жизнь? Игра!
#learning #jokes #games
Установлено, что дети эффективнее познают окружающий мир в игровой форме 👶
Чем разработчики хуже детей? Развлечься или провести время ожидания с пользой поможет интерактивная обучающая веб-игра CodeCombat.
Вы познакомитесь с базовым синтаксисом представленных языков, их управляющими конструкциями, простыми структурами данных, а также займетесь решением топологических задач оптимизационного характера.
И все это у вас в браузере 🌐
Поиграть можно на четырех языках:
— Python — установлен по умолчанию 🐍;
— JavaScript — нас вежливо предупредили, что это не Java 😂;
— CoffeeScript;
— C++ 🔥
Не обошлось, конечно, и без минусов. За линейный рост сложности заданий придется платить 💵, иначе, начиная с определенных уровней, придется нелегко.
Помимо игры выше, есть другие проекты, которые тоже заслуживают внимания:
— Elevator Saga;
— Screeps.
Так что бросайте свои «плойки» — играем и развиваемся 😎
Chulakov Dev
#learning #jokes #games
Установлено, что дети эффективнее познают окружающий мир в игровой форме 👶
Чем разработчики хуже детей? Развлечься или провести время ожидания с пользой поможет интерактивная обучающая веб-игра CodeCombat.
Вы познакомитесь с базовым синтаксисом представленных языков, их управляющими конструкциями, простыми структурами данных, а также займетесь решением топологических задач оптимизационного характера.
И все это у вас в браузере 🌐
Поиграть можно на четырех языках:
— Python — установлен по умолчанию 🐍;
— JavaScript — нас вежливо предупредили, что это не Java 😂;
— CoffeeScript;
— C++ 🔥
Не обошлось, конечно, и без минусов. За линейный рост сложности заданий придется платить 💵, иначе, начиная с определенных уровней, придется нелегко.
Помимо игры выше, есть другие проекты, которые тоже заслуживают внимания:
— Elevator Saga;
— Screeps.
Так что бросайте свои «плойки» — играем и развиваемся 😎
Chulakov Dev
CodeCombat
CodeCombat: Learn to Code by Playing a Game
Learn programming with a multiplayer live coding strategy game for beginners. Learn Python or JavaScript as you defeat ogres, solve mazes, and level up. Open source HTML5 game!
Design is Frontend
Подружить аналитику, дизайн и разработку — реально. Об этом и не только арт-директор Студии Александр расскажет на онлайн-конференции Design is Frontend.
Мероприятие состоится в следующую среду, 9 декабря. Наш спикер будет выступать с 15:30 до 16:00 по московскому времени.
Только не забудьте предварительно пройти бесплатную регистрацию 😎
Подружить аналитику, дизайн и разработку — реально. Об этом и не только арт-директор Студии Александр расскажет на онлайн-конференции Design is Frontend.
Мероприятие состоится в следующую среду, 9 декабря. Наш спикер будет выступать с 15:30 до 16:00 по московскому времени.
Только не забудьте предварительно пройти бесплатную регистрацию 😎
Слоты в React.js
#frontend #react
Современные frontend-библиотеки и фреймворки для работы с UI, будь то React, Angular или Vue.js, решают важную задачу разделения интерфейса на отдельные компоненты. У каждой такой библиотеки свой синтаксис, API и подходы к реализации компонентов.
Работая с различным стеком технологий, специалисты Студии выделили одну полезную особенность в API распределения контента у фреймворков Vue.js и Angular — слоты. Мы решили перенять такой подход для своих React-приложений.
В React-компонентах по умолчанию дочерние элементы можно добавить только в определенное место JSX-разметки.
Такой подход хорош для решения большинства задач, но создает ряд трудностей для компонентов со сложной структурой, дочерние элементы которых должны быть разнесены в различные части JSX-разметки.
Такую задачу мы решаем с помощью API React.Children. Используя методы объекта
Для наглядной демонстрации мы подготовили небольшой пример, в котором решена задача с разделением свойства children для компонента страницы. В результате было выделено три слота:
#frontend #react
Современные frontend-библиотеки и фреймворки для работы с UI, будь то React, Angular или Vue.js, решают важную задачу разделения интерфейса на отдельные компоненты. У каждой такой библиотеки свой синтаксис, API и подходы к реализации компонентов.
Работая с различным стеком технологий, специалисты Студии выделили одну полезную особенность в API распределения контента у фреймворков Vue.js и Angular — слоты. Мы решили перенять такой подход для своих React-приложений.
В React-компонентах по умолчанию дочерние элементы можно добавить только в определенное место JSX-разметки.
Такой подход хорош для решения большинства задач, но создает ряд трудностей для компонентов со сложной структурой, дочерние элементы которых должны быть разнесены в различные части JSX-разметки.
Такую задачу мы решаем с помощью API React.Children. Используя методы объекта
Children, мы можем легко разделить список дочерних элементов на несколько отдельных групп — слотов. Все, что нужно сделать, — в цикле сопоставить тип дочернего элемента с компонентом, от которого он был создан.Для наглядной демонстрации мы подготовили небольшой пример, в котором решена задача с разделением свойства children для компонента страницы. В результате было выделено три слота:
header, content, footer.Способы слияния массивов в PHP
#backend #php #basics
Работа с массивами является неотъемлемой частью жизни PHP-разработчика. В массивы поступают выборки данных из БД, результаты чтения файлов и обращений к внешним API — список таких операций весьма велик.
Крайне часто необходимо сливать несколько массивов в результирующий с различными артефактами на выходе. Рассмотрим способы слияния и их отличия.
Классический. Пожалуй, самый распространенный способ, знакомый всем и каждому. Функция array_merge решает нашу проблему в случаях, когда нет необходимости следить за изменением или неизменностью числовых ключей массива.
Сложение массивов. Этот вариант мало кто использует, хотя он является классическим с точки зрения алгебры-логики. Стоит отметить, что операция такого арифметического сложения попытается сохранить числовые ключи в результирующем массиве, добавив элементы слагаемых массивов последовательно, в порядке их упоминания при сложении.
Есть два важных момента: при перемене мест слагаемых сумма меняется 😱; если в слагаемых массивах имеются значения с одинаковыми числовыми ключами, то итоговый массив будет содержать значение первого слагаемого.
Слияние с заменой значений. Функция array_replace также позволяет сохранить числовые ключи, при этом заменяя значение в исходном массиве значениями из других переданных массивов в случае совпадения ключей.
Оценить разницу в работе трех способов слияния можно в «песочнице».
#backend #php #basics
Работа с массивами является неотъемлемой частью жизни PHP-разработчика. В массивы поступают выборки данных из БД, результаты чтения файлов и обращений к внешним API — список таких операций весьма велик.
Крайне часто необходимо сливать несколько массивов в результирующий с различными артефактами на выходе. Рассмотрим способы слияния и их отличия.
Классический. Пожалуй, самый распространенный способ, знакомый всем и каждому. Функция array_merge решает нашу проблему в случаях, когда нет необходимости следить за изменением или неизменностью числовых ключей массива.
Сложение массивов. Этот вариант мало кто использует, хотя он является классическим с точки зрения алгебры-логики. Стоит отметить, что операция такого арифметического сложения попытается сохранить числовые ключи в результирующем массиве, добавив элементы слагаемых массивов последовательно, в порядке их упоминания при сложении.
Есть два важных момента: при перемене мест слагаемых сумма меняется 😱; если в слагаемых массивах имеются значения с одинаковыми числовыми ключами, то итоговый массив будет содержать значение первого слагаемого.
Слияние с заменой значений. Функция array_replace также позволяет сохранить числовые ключи, при этом заменяя значение в исходном массиве значениями из других переданных массивов в случае совпадения ключей.
Оценить разницу в работе трех способов слияния можно в «песочнице».
Азы безопасности в PHP от Александра Макарова
#backend #php #security
Используя современные библиотеки и фреймворки, мы не задумываемся о том, как их механизмы обеспечивают безопасность нашего приложения. Например, как шифруются и хранятся пароли пользователей, как валидируются email- и IP-адреса, указанные в формах ввода, как работают с данными объекты-обертки, предоставляющие доступ к HTTP-заголовкам, cуперглобальным переменным.
Если грамотно использовать современные фреймворки, то также можно в меньшей степени задумываться и об SQL-инъекциях и XSS-атаках. А если мы делаем что-то не так? 🤔
Рекомендуем посмотреть выступление Александра Макарова про базовую безопасность в PHP.
Основной тезис доклада — «нельзя доверять данным, несмотря ни на что».
Автор расскажет про способы фильтрации и валидации данных, про проблематику экранирования различных выходных потоков данных и про отдельные виды угроз.
В конце видео приводится список полезных статей и источников для чтения. Рекомендуем посмотреть в первую очередь специалистам среднего уровня и выше — тем разработчикам, которые могут влиять на архитектуру продукта через выбор используемых фреймворков, библиотек и подходов.
Chulakov Dev
#backend #php #security
Используя современные библиотеки и фреймворки, мы не задумываемся о том, как их механизмы обеспечивают безопасность нашего приложения. Например, как шифруются и хранятся пароли пользователей, как валидируются email- и IP-адреса, указанные в формах ввода, как работают с данными объекты-обертки, предоставляющие доступ к HTTP-заголовкам, cуперглобальным переменным.
Если грамотно использовать современные фреймворки, то также можно в меньшей степени задумываться и об SQL-инъекциях и XSS-атаках. А если мы делаем что-то не так? 🤔
Рекомендуем посмотреть выступление Александра Макарова про базовую безопасность в PHP.
Основной тезис доклада — «нельзя доверять данным, несмотря ни на что».
Автор расскажет про способы фильтрации и валидации данных, про проблематику экранирования различных выходных потоков данных и про отдельные виды угроз.
В конце видео приводится список полезных статей и источников для чтения. Рекомендуем посмотреть в первую очередь специалистам среднего уровня и выше — тем разработчикам, которые могут влиять на архитектуру продукта через выбор используемых фреймворков, библиотек и подходов.
Chulakov Dev
Nginx: PHP и Node.js под одним доменом
#devops #backend #frontend
Планируя архитектуру веб-сервиса с SPA и RESTful API, мы часто применяем несколько разноуровневых доменных имен. Например, на домене some-site.ru размещаем основное клиентское приложение, а на поддомене api.some-site.ru — backend-приложение с API. Это могут быть два различных веб-сервиса на абсолютно различном стеке.
Рассмотрим, как организовать общую маршрутизацию http-запросов между двумя сервисами под одним доменом. Разделять запросы по сервисам будем с помощью префиксов в части URI. Например, http-запросы, поступающие на адрес some-site.ru/api/some-method-route, будут проксироваться на сервис php-fpm, остальные запросы, без префикса api, будут уходить на upstream c Node.js.
Для решения такой задачи необходимо написать правила для веб-сервера Nginx, который должен выступать в виде fastcgi- и http-прокси-сервера одновременно, а также маршрутизировать соответствующие запросы по двум различным upstream-целям.
Для наглядности и понимания общей архитектуры мы собрали небольшой проект. В директории ci располагаются инструкции по сборке Docker-образов для доставки их, например, на серверы с Docker Swarm.
Отдельного внимания заслуживает файл конфигурации Nginx.
Для того чтобы роутинг и окружение в PHP работали верно, нам необходимо произвести модификацию некоторых fastcgi-параметров, которые впоследствии становятся ключами суперглобального массива
Стоит отметить, что представленный проект лишь демонстрирует возможность объединения разнородных апстримов под одним доменным именем и не несет большой прикладной пользы.
Все исходники проекта располагаются в директории src, внутри которой они делятся на два изолированных типа, которые впоследствии будут собраны в два различных образа — PHP и Node.js. Таким образом, финальная поставка продукта будет состоять из трех образов: Nginx, PHP-FPM и Node.js.
Chulakov Dev
#devops #backend #frontend
Планируя архитектуру веб-сервиса с SPA и RESTful API, мы часто применяем несколько разноуровневых доменных имен. Например, на домене some-site.ru размещаем основное клиентское приложение, а на поддомене api.some-site.ru — backend-приложение с API. Это могут быть два различных веб-сервиса на абсолютно различном стеке.
Рассмотрим, как организовать общую маршрутизацию http-запросов между двумя сервисами под одним доменом. Разделять запросы по сервисам будем с помощью префиксов в части URI. Например, http-запросы, поступающие на адрес some-site.ru/api/some-method-route, будут проксироваться на сервис php-fpm, остальные запросы, без префикса api, будут уходить на upstream c Node.js.
Для решения такой задачи необходимо написать правила для веб-сервера Nginx, который должен выступать в виде fastcgi- и http-прокси-сервера одновременно, а также маршрутизировать соответствующие запросы по двум различным upstream-целям.
Для наглядности и понимания общей архитектуры мы собрали небольшой проект. В директории ci располагаются инструкции по сборке Docker-образов для доставки их, например, на серверы с Docker Swarm.
Отдельного внимания заслуживает файл конфигурации Nginx.
Для того чтобы роутинг и окружение в PHP работали верно, нам необходимо произвести модификацию некоторых fastcgi-параметров, которые впоследствии становятся ключами суперглобального массива
$_SERVER на уровне PHP.Стоит отметить, что представленный проект лишь демонстрирует возможность объединения разнородных апстримов под одним доменным именем и не несет большой прикладной пользы.
Все исходники проекта располагаются в директории src, внутри которой они делятся на два изолированных типа, которые впоследствии будут собраны в два различных образа — PHP и Node.js. Таким образом, финальная поставка продукта будет состоять из трех образов: Nginx, PHP-FPM и Node.js.
Chulakov Dev
💩1
Веб-разработка. Подборка полезного контента для новогодних праздников
#frontend #backend
Специалисты Студии Олега Чулакова поздравляют вас с наступающим Новым годом. А чтобы праздники прошли с толком, наши разработчики подобрали несколько интересных YouTube-каналов.
Frontend-разработка:
— https://youtube.com/c/WebDevSimplified — про fullstack-разработку на JavaScript;
— https://youtube.com/c/YauhenKavalchuk — про frontend-разработку;
— https://youtube.com/c/GoogleChromeDevelopers — разборы новых фич и объяснение существующих технологий;
— https://youtube.com/c/VladilenMinin — туториалы по технологиям, которые нужно знать здесь и сейчас;
— https://youtube.com/c/TraversyMedia — туториалы с fullstack-уклоном;
— https://youtube.com/c/pepelsbey — подкасты и выступления Вадима Макеева на тему frontend-разработки и верстки;
— https://youtube.com/c/Web-standardsRu — знаменитый канал «Веб-стандарты» — подкасты и беседы с ведущими специалистами направления;
— https://youtube.com/c/HolyJS — доклады участников конференции HolyJS;
— https://youtube.com/user/shiffman — Coding challenge, по большей части рисование на канвасе на p5.js, и здесь можно прокачать свой английский 🏴
Backend-разработка:
— https://youtube.com/c/PHPPoint — набирающий популярность канал PHP-разработчиков;
— https://youtube.com/c/HexletOrg — канал онлайн-университета Хекслет;
— https://youtube.com/c/BadooTech — технический канал «Баду»;
— https://youtube.com/user/codefestru — канал конференции разработчиков CodeFest.
Приятного просмотра и всего наилучшего в Новом году 🎄
Chulakov Dev
#frontend #backend
Специалисты Студии Олега Чулакова поздравляют вас с наступающим Новым годом. А чтобы праздники прошли с толком, наши разработчики подобрали несколько интересных YouTube-каналов.
Frontend-разработка:
— https://youtube.com/c/WebDevSimplified — про fullstack-разработку на JavaScript;
— https://youtube.com/c/YauhenKavalchuk — про frontend-разработку;
— https://youtube.com/c/GoogleChromeDevelopers — разборы новых фич и объяснение существующих технологий;
— https://youtube.com/c/VladilenMinin — туториалы по технологиям, которые нужно знать здесь и сейчас;
— https://youtube.com/c/TraversyMedia — туториалы с fullstack-уклоном;
— https://youtube.com/c/pepelsbey — подкасты и выступления Вадима Макеева на тему frontend-разработки и верстки;
— https://youtube.com/c/Web-standardsRu — знаменитый канал «Веб-стандарты» — подкасты и беседы с ведущими специалистами направления;
— https://youtube.com/c/HolyJS — доклады участников конференции HolyJS;
— https://youtube.com/user/shiffman — Coding challenge, по большей части рисование на канвасе на p5.js, и здесь можно прокачать свой английский 🏴
Backend-разработка:
— https://youtube.com/c/PHPPoint — набирающий популярность канал PHP-разработчиков;
— https://youtube.com/c/HexletOrg — канал онлайн-университета Хекслет;
— https://youtube.com/c/BadooTech — технический канал «Баду»;
— https://youtube.com/user/codefestru — канал конференции разработчиков CodeFest.
Приятного просмотра и всего наилучшего в Новом году 🎄
Chulakov Dev
💩1
Трейты в PHP — зло? Наш взгляд на проблему
#backend #php
В конце прошлого года перед релизом PHP 8 ведущие разработчики языка высказались про неудачную реализацию трейтов в PHP. А после прошел интересный батл «Трейты в PHP — зло?».
Мы относимся к написанию и использованию собственных трейтов с большой осторожностью, стараясь их избегать. И вот несколько причин:
— трейты могут увеличивать связанность (coupling) вашего кода;
— частично решают проблему переиспользования типового инфраструктурного или обслуживающего кода, при этом несут опасность накопления бизнес-логики в руках новичка;
— трейты фактически не определяют структуру и не являются типом, но при этом позволяют применять внутри своих методов конструкции ООП. Например, вызов конструктора или обращения к контексту
А как вы относитесь к трейтам в PHP?
Chulakov Dev
#backend #php
В конце прошлого года перед релизом PHP 8 ведущие разработчики языка высказались про неудачную реализацию трейтов в PHP. А после прошел интересный батл «Трейты в PHP — зло?».
Мы относимся к написанию и использованию собственных трейтов с большой осторожностью, стараясь их избегать. И вот несколько причин:
— трейты могут увеличивать связанность (coupling) вашего кода;
— частично решают проблему переиспользования типового инфраструктурного или обслуживающего кода, при этом несут опасность накопления бизнес-логики в руках новичка;
— трейты фактически не определяют структуру и не являются типом, но при этом позволяют применять внутри своих методов конструкции ООП. Например, вызов конструктора или обращения к контексту
$this. При этом разработчик не может гарантировать, что поведение класса, к которому будет подключен трейт, совпадет с ожидаемым поведением логики работы методов трейта.А как вы относитесь к трейтам в PHP?
Chulakov Dev
❤2💩1
Быстрая сортировка массива по внешнему списку в PHP
#backend #php #lifehack
Иногда возникает необходимость отсортировать массив объектов или массив значений на основе списка значений, хранящегося в другом массиве.
Рассмотрим пример, когда эталонная последовательность идентификаторов, по которой должны быть отсортированы элементы массива
Очевидное решение, которое приходит в голову, — алгоритм на основе цикла, который содержит в себе дополнительные условные проверки и переменные для промежуточного хранения результата.
Для получения более оптимального и красивого решения задачи такой специфической сортировки мы воспользовались несколькими стандартными PHP-функциями для работы с массивами.
В алгоритме предусмотрено решение сопутствующей проблемы, когда набор сортируемых ключей массива
Поэкспериментировать с работой алгоритма можно в «песочнице».
Chulakov Dev
#backend #php #lifehack
Иногда возникает необходимость отсортировать массив объектов или массив значений на основе списка значений, хранящегося в другом массиве.
Рассмотрим пример, когда эталонная последовательность идентификаторов, по которой должны быть отсортированы элементы массива
$items, хранится в переменной $orders.Очевидное решение, которое приходит в голову, — алгоритм на основе цикла, который содержит в себе дополнительные условные проверки и переменные для промежуточного хранения результата.
Для получения более оптимального и красивого решения задачи такой специфической сортировки мы воспользовались несколькими стандартными PHP-функциями для работы с массивами.
В алгоритме предусмотрено решение сопутствующей проблемы, когда набор сортируемых ключей массива
$items может не полностью включать в себя значения массива $orders. Итоговый массив фильтруется по callback-функции, которая проверяет тип значений результирующего массива.Поэкспериментировать с работой алгоритма можно в «песочнице».
Chulakov Dev
💩1
PHP Intl. Правильная транслитерация кириллицы
#backend #php
Современные фреймворки предоставляют готовый функционал в составе библиотек или хелперов для работы с библиотекой ICU через API Intl.
Такой функционал необходим для поддержки интернационализации разрабатываемого веб-сервиса. На основе указанной локали могут устанавливаться форматы отображения валют, времени и даты, а также подбираться настройки для инициализации транслитераторов.
В разделе «Телеграм-каналы» сайта Студии во время автоматического импорта постов из наших каналов производится транслитерация названий заметок для формирования ЧПУ.
После первого релиза мы обнаружили, что транслитерация некоторых букв русского алфавита производится не совсем корректно, даже при верно установленной локали на уровне фреймворка.
Например, уникальная часть URL заметки про релиз PHP 8 после транслитерации имела вид
Для того чтобы транслитерация кириллицы производилась по традиционным правилам, необходимо произвести конфигурацию объекта-транслитератора, передав следующее значение параметра
После такой конфигурации результат преобразования наименования заметки изменится на
Стоит напомнить, что непосредственная работа с объектами-транслитераторами в зависимости от фреймворка может быть организована на различных уровнях абстракции. Например, конфигурация и подмена таких объектов может осуществляться через механизмы внедрения зависимостей.
Chulakov Dev
#backend #php
Современные фреймворки предоставляют готовый функционал в составе библиотек или хелперов для работы с библиотекой ICU через API Intl.
Такой функционал необходим для поддержки интернационализации разрабатываемого веб-сервиса. На основе указанной локали могут устанавливаться форматы отображения валют, времени и даты, а также подбираться настройки для инициализации транслитераторов.
В разделе «Телеграм-каналы» сайта Студии во время автоматического импорта постов из наших каналов производится транслитерация названий заметок для формирования ЧПУ.
После первого релиза мы обнаружили, что транслитерация некоторых букв русского алфавита производится не совсем корректно, даже при верно установленной локали на уровне фреймворка.
Например, уникальная часть URL заметки про релиз PHP 8 после транслитерации имела вид
php-8-pocti-novogodnij-podarok. Замена некоторых букв произошла некорректно.Для того чтобы транслитерация кириллицы производилась по традиционным правилам, необходимо произвести конфигурацию объекта-транслитератора, передав следующее значение параметра
$id:Russian-Latin/BGN; Any-Latin; Latin-ASCII; NFD; [:Nonspacing Mark:] Remove; NFC;После такой конфигурации результат преобразования наименования заметки изменится на
php-8-pochti-novogodniy-podarok.Стоит напомнить, что непосредственная работа с объектами-транслитераторами в зависимости от фреймворка может быть организована на различных уровнях абстракции. Например, конфигурация и подмена таких объектов может осуществляться через механизмы внедрения зависимостей.
Chulakov Dev
🔥2💩1