Минутка 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