Chulakov Dev

2020-12-31 11:00:17 Веб-разработка. Подборка полезного контента для новогодних праздников
#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 Открыть/Комментировать

2020-12-25 11:00:07 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-параметров, которые впоследствии становятся ключами суперглобального массива $_SERVER на уровне PHP.

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

Все исходники проекта располагаются в директории src, внутри которой они делятся на два изолированных типа, которые впоследствии будут собраны в два различных образа — PHP и Node.js. Таким образом, финальная поставка продукта будет состоять из трех образов: Nginx, PHP-FPM и Node.js.

Chulakov Dev Открыть/Комментировать

2020-12-18 11:00:02 Азы безопасности в PHP от Александра Макарова
#backend #php #security

Используя современные библиотеки и фреймворки, мы не задумываемся о том, как их механизмы обеспечивают безопасность нашего приложения. Например, как шифруются и хранятся пароли пользователей, как валидируются email- и IP-адреса, указанные в формах ввода, как работают с данными объекты-обертки, предоставляющие доступ к HTTP-заголовкам, cуперглобальным переменным.

Если грамотно использовать современные фреймворки, то также можно в меньшей степени задумываться и об SQL-инъекциях и XSS-атаках. А если мы делаем что-то не так?

Рекомендуем посмотреть выступление Александра Макарова про базовую безопасность в PHP.

Основной тезис доклада — «нельзя доверять данным, несмотря ни на что».

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

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

Chulakov Dev Открыть/Комментировать

2020-12-14 10:00:03 Способы слияния массивов в PHP
#backend #php #basics

Работа с массивами является неотъемлемой частью жизни PHP-разработчика. В массивы поступают выборки данных из БД, результаты чтения файлов и обращений к внешним API — список таких операций весьма велик.

Крайне часто необходимо сливать несколько массивов в результирующий с различными артефактами на выходе. Рассмотрим способы слияния и их отличия.

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

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

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

Слияние с заменой значений. Функция array_replace также позволяет сохранить числовые ключи, при этом заменяя значение в исходном массиве значениями из других переданных массивов в случае совпадения ключей.

Оценить разницу в работе трех способов слияния можно в «песочнице». Открыть/Комментировать

2020-12-11 11:00:23 Слоты в React.js
#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. Открыть/Комментировать

2020-12-04 17:10:57 ​​Design is Frontend

Подружить аналитику, дизайн и разработку — реально. Об этом и не только арт-директор Студии Александр расскажет на онлайн-конференции Design is Frontend.

Мероприятие состоится в следующую среду, 9 декабря. Наш спикер будет выступать с 15:30 до 16:00 по московскому времени.

Только не забудьте предварительно пройти бесплатную регистрацию Открыть/Комментировать

2020-12-04 11:00:13 Что наша жизнь? Игра!
#learning #jokes #games

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

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

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

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

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

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

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

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

Chulakov Dev Открыть/Комментировать

2020-12-03 17:59:01 ​​Минутка гордости

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

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

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

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

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

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

Chulakov Dev Открыть/Комментировать

2020-11-30 10:00:08 Доступность. Все, что вы хотели знать, но не знали, где спросить
#frontend #ux #ui

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

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

Chulakov Dev Открыть/Комментировать

2020-11-27 18:34:48 Как попасть в команду разработчиков Студии?

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

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

Задать свои вопросы вы сможете во время эфира. Открыть/Комментировать