1 000 диджитанцев
Число подписчиков канала достигло тысячи. Для тех, кто с нами недавно, рассказываем, что мы успели рассмотреть с момента запуска.
Сперва мы поделились историей о том, как мы делали 3D-карту для сайта Гран-при Формулы-1, и информацией о том, как легко создавать объемные объекты с помощью Displacement Mapping и ThreeJS.
Рассказали про микровзаимодействия, связанные с кликами и тапами, поделились нашей библиотекой react-interactions, а также показали, как можно оживить блоки за счет их вращения вместе с устройством пользователя.
Написали много заметок про React: запустили цикл по интерфейсным элементам, рассказали про FaCC, показали наш UIKit и сделали демо про Redux Form.
Показали метод, с помощью которого легко исправить баги при прокрутке блоков в iOS Safari.
Дали ссылку на нашу образовательную презентацию про 2D в canvas.
Пробежались по теме создания Telegram-ботов: рассказали, как использовать Telegram для дистрибуции контента и как можно быстро получить часовой пояс пользователя.
Погрузились в работу со временем: рассказали, как можно централизировать расчеты при создании приложений, как синхронизировать время в браузера с часами сервера и как правильно делать обратный отсчет в JavaScript.
Рассказали про стрелочные функции в JavaScript-классах и напомнили про нюансы работы с логическим оператором И.
Поделились знаниями про то, как сохранять Emoji в базу данных и правильно организовать динамическую отдачу файлов с сервера.
Дальше больше, не переключайтесь.
Число подписчиков канала достигло тысячи. Для тех, кто с нами недавно, рассказываем, что мы успели рассмотреть с момента запуска.
Сперва мы поделились историей о том, как мы делали 3D-карту для сайта Гран-при Формулы-1, и информацией о том, как легко создавать объемные объекты с помощью Displacement Mapping и ThreeJS.
Рассказали про микровзаимодействия, связанные с кликами и тапами, поделились нашей библиотекой react-interactions, а также показали, как можно оживить блоки за счет их вращения вместе с устройством пользователя.
Написали много заметок про React: запустили цикл по интерфейсным элементам, рассказали про FaCC, показали наш UIKit и сделали демо про Redux Form.
Показали метод, с помощью которого легко исправить баги при прокрутке блоков в iOS Safari.
Дали ссылку на нашу образовательную презентацию про 2D в canvas.
Пробежались по теме создания Telegram-ботов: рассказали, как использовать Telegram для дистрибуции контента и как можно быстро получить часовой пояс пользователя.
Погрузились в работу со временем: рассказали, как можно централизировать расчеты при создании приложений, как синхронизировать время в браузера с часами сервера и как правильно делать обратный отсчет в JavaScript.
Рассказали про стрелочные функции в JavaScript-классах и напомнили про нюансы работы с логическим оператором И.
Поделились знаниями про то, как сохранять Emoji в базу данных и правильно организовать динамическую отдачу файлов с сервера.
Дальше больше, не переключайтесь.
Придержите дверь
Протокол HTTP, начиная с версии 1.1, создает постоянное соединение (HTTP keep-alive) для нескольких запросов на один и тот же хост. Это позволяет снизить загрузку процессора и расход памяти, так как открывается меньше соединений одновременно. При HTTPS-соединениях разница более заметна, так как создание защищенного соединения требует больших ресурсов и дополнительного сетевого обмена между клиентом и сервером.
Многие разработчики, которые не учитывают или не знают этой информации, в итоге обнаруживают, что их приложение работает медленней, чем они ожидали.
Давайте рассмотрим эту проблему на примере следующей задачи: получить с помощью API GitHub все репозитории GeoIP вместе с их релизами. Одним запросом это сделать нельзя: сначала нужно получить список репозиториев, а затем для каждого запросить релизы.
Рассмотрим решение двумя способами. На первый взгляд разницы между ними нет, но если мы выполним скрипты, то получим совершенно разные результаты.
Что же не так? В первом случае между сервером и клиентом создается одно соединение для всех запросов, во втором случае — каждый раз создается новый объект клиента, и, соответственно, для каждого запроса создается новое соединение, что приводит к потерям во времени.
Также можно представить следующую ситуацию — на сайте при определенных действиях пользователей происходит обращение к API какого-либо сервиса. В таком случае при запросе на ваш сервер происходит обращение на другой сервер согласно API сервиса, и для каждого такого запроса расходуются ресурсы на создание соединения. В высоконагруженных системах это может привести к существенным потерям в ресурсах и скорости работы.
Исправить это можно, например, переложив работу по созданию внешних запросов на специального демона, который сможет пользоваться возможностями keep-alive и поддерживать набор постоянных соединений.
Протокол HTTP, начиная с версии 1.1, создает постоянное соединение (HTTP keep-alive) для нескольких запросов на один и тот же хост. Это позволяет снизить загрузку процессора и расход памяти, так как открывается меньше соединений одновременно. При HTTPS-соединениях разница более заметна, так как создание защищенного соединения требует больших ресурсов и дополнительного сетевого обмена между клиентом и сервером.
Многие разработчики, которые не учитывают или не знают этой информации, в итоге обнаруживают, что их приложение работает медленней, чем они ожидали.
Давайте рассмотрим эту проблему на примере следующей задачи: получить с помощью API GitHub все репозитории GeoIP вместе с их релизами. Одним запросом это сделать нельзя: сначала нужно получить список репозиториев, а затем для каждого запросить релизы.
Рассмотрим решение двумя способами. На первый взгляд разницы между ними нет, но если мы выполним скрипты, то получим совершенно разные результаты.
Что же не так? В первом случае между сервером и клиентом создается одно соединение для всех запросов, во втором случае — каждый раз создается новый объект клиента, и, соответственно, для каждого запроса создается новое соединение, что приводит к потерям во времени.
Также можно представить следующую ситуацию — на сайте при определенных действиях пользователей происходит обращение к API какого-либо сервиса. В таком случае при запросе на ваш сервер происходит обращение на другой сервер согласно API сервиса, и для каждого такого запроса расходуются ресурсы на создание соединения. В высоконагруженных системах это может привести к существенным потерям в ресурсах и скорости работы.
Исправить это можно, например, переложив работу по созданию внешних запросов на специального демона, который сможет пользоваться возможностями keep-alive и поддерживать набор постоянных соединений.
Оно само! Я ничего не трогал
Многие компании до сих пор не используют инструменты для анализа JavaScript-кода, и, как следствие, каждый разработчик в их команде пишет код по-своему и допускает ошибки из-за невнимательности.
Сейчас стандартом в решении этих проблем стал ESLint, который очень легко настроить и подключить к проекту. Однако многих раздражает необходимость регулярно исправлять ошибки, которые находит этот инструмент. Такие разработчики считают, что траты времени на возвращение к написанным ранее строкам кода для добавления какого-нибудь пробела ничем не оправданы, и отказываются от использования ESLint, даже не узнав, что автоматизировать можно не только анализ, но и исправление.
Самый простой способ — добавить в используемую IDE плагин ESLint и включить в нем автоисправление кода на основе правил из файла
Многие компании до сих пор не используют инструменты для анализа JavaScript-кода, и, как следствие, каждый разработчик в их команде пишет код по-своему и допускает ошибки из-за невнимательности.
Сейчас стандартом в решении этих проблем стал ESLint, который очень легко настроить и подключить к проекту. Однако многих раздражает необходимость регулярно исправлять ошибки, которые находит этот инструмент. Такие разработчики считают, что траты времени на возвращение к написанным ранее строкам кода для добавления какого-нибудь пробела ничем не оправданы, и отказываются от использования ESLint, даже не узнав, что автоматизировать можно не только анализ, но и исправление.
Самый простой способ — добавить в используемую IDE плагин ESLint и включить в нем автоисправление кода на основе правил из файла
.eslintrc. Например, если вы используете Visual Studio Code, то после установки плагина ESLint и активации опции eslint.autoFixOnSave в настройках редактора большинство ошибок в коде будет исправляться автоматически при сохранении файлов.Вот мой сертификат
В последние годы большое внимание уделяется обеспечению безопасного соединения. Сейчас наличие SSL-сертификатов влияет даже на ранжирование сайтов в поисковых системах.
Зачастую работа системы без HTTPS и вовсе невозможна: например, если разрабатывать серверную часть для Telegram-бота или организовывать обмен с другим сервисом, который уже использует безопасное соединение.
Многих останавливает необходимость приобретать сертификаты, особенно если проект еще находится на этапе разработки или в рамках системы требуются сертификаты для нескольких доменов.
Но и у этой проблемы есть простое решение: с помощью консольной утилиты Certbot можно получать бесплатные SSL-сертификаты, которые будут работать до 90 дней.
Certbot легко установить: например, в случае с сервером на базе Debian, это делается буквально за секунду с помощью
Помимо получения сертификатов, эта утилита может даже самостоятельно создавать виртуальные хосты для HTTPS в настройках используемого web-сервера.
Если планируется использование сертификатов в production, то важно не забывать настраивать автообновление сертификатов, добавив в Cron сервера команду
В последние годы большое внимание уделяется обеспечению безопасного соединения. Сейчас наличие SSL-сертификатов влияет даже на ранжирование сайтов в поисковых системах.
Зачастую работа системы без HTTPS и вовсе невозможна: например, если разрабатывать серверную часть для Telegram-бота или организовывать обмен с другим сервисом, который уже использует безопасное соединение.
Многих останавливает необходимость приобретать сертификаты, особенно если проект еще находится на этапе разработки или в рамках системы требуются сертификаты для нескольких доменов.
Но и у этой проблемы есть простое решение: с помощью консольной утилиты Certbot можно получать бесплатные SSL-сертификаты, которые будут работать до 90 дней.
Certbot легко установить: например, в случае с сервером на базе Debian, это делается буквально за секунду с помощью
apt-get install.Помимо получения сертификатов, эта утилита может даже самостоятельно создавать виртуальные хосты для HTTPS в настройках используемого web-сервера.
Если планируется использование сертификатов в production, то важно не забывать настраивать автообновление сертификатов, добавив в Cron сервера команду
certbot renew.«Т» значит Типограф
На удобство использования веб-приложений и сайтов влияет не только дизайн или интерфейс, но и такая, казалось бы, простая вещь, как тексты. Если не подготавливать их с учетом норм экранной типографики, специфики и правил русского языка, то это может негативно сказаться на восприятии материалов и скорости работы пользователя с системой.
В текстах должны использоваться правильные тире и кавычки, в цифрах нужна разбивка на разряды, союзы и предлоги должны быть на одной строке со следующим словом, так же как и конструкции вида «1 кг». Правил очень много и вручную прорабатывать их все если и возможно, то неоправданно долго, но к нашему общему счастью это можно автоматизировать.
Мы разделяем работу по типографике на две части:
1) форматирование служебных и интерфейсных текстов;
2) автоматическая обработка системой динамических текстов.
Первая часть позволяет не тратить ресурсы сервера или браузера на регулярное форматирование статических текстов из интерфейса системы: разработчики во время работы над версткой веб-приложения обрабатывают нужные предложения прямо в IDE с помощью плагинов для типографики.
Вторая же служит для форматирования backend-ом текстов, добавляемых пользователями или импортируемых из других систем. Так, например, мы обрабатываем загружаемые из Telegram-канала заметки для раздела Chulakov Notes на сайте Студии. Мы рекомендуем «оттипографить» текст один раз и сохранить полученный HTML-код в базу данных, чтобы ускорить загрузку страниц. В рамках JavaScript-стека можно использовать для обработки библиотеку typograf, в PHP — «Типограф Муравьёва».
Выносить автоформатирование в браузер пользователя не стоит, поскольку это приводит к заметным задержкам в отрисовке интерфейсов.
На удобство использования веб-приложений и сайтов влияет не только дизайн или интерфейс, но и такая, казалось бы, простая вещь, как тексты. Если не подготавливать их с учетом норм экранной типографики, специфики и правил русского языка, то это может негативно сказаться на восприятии материалов и скорости работы пользователя с системой.
В текстах должны использоваться правильные тире и кавычки, в цифрах нужна разбивка на разряды, союзы и предлоги должны быть на одной строке со следующим словом, так же как и конструкции вида «1 кг». Правил очень много и вручную прорабатывать их все если и возможно, то неоправданно долго, но к нашему общему счастью это можно автоматизировать.
Мы разделяем работу по типографике на две части:
1) форматирование служебных и интерфейсных текстов;
2) автоматическая обработка системой динамических текстов.
Первая часть позволяет не тратить ресурсы сервера или браузера на регулярное форматирование статических текстов из интерфейса системы: разработчики во время работы над версткой веб-приложения обрабатывают нужные предложения прямо в IDE с помощью плагинов для типографики.
Вторая же служит для форматирования backend-ом текстов, добавляемых пользователями или импортируемых из других систем. Так, например, мы обрабатываем загружаемые из Telegram-канала заметки для раздела Chulakov Notes на сайте Студии. Мы рекомендуем «оттипографить» текст один раз и сохранить полученный HTML-код в базу данных, чтобы ускорить загрузку страниц. В рамках JavaScript-стека можно использовать для обработки библиотеку typograf, в PHP — «Типограф Муравьёва».
Выносить автоформатирование в браузер пользователя не стоит, поскольку это приводит к заметным задержкам в отрисовке интерфейсов.
Скачай меня, если сможешь
В нашей практике неоднократно возникали ситуации, когда необходимо было дать пользователю возможность скачать изображение, которое он сделал на сайте и уже видит в браузере. Например, если пользователь накладывает эффекты на фотографию или создает какую-нибудь открытку с помощью конструктора. Применять в такой ситуации backend для генерации файла для скачивания очень избыточно: даже если получится идеально продублировать логику отрисовки, все равно остается вероятность визуального несоответствия с изображением в браузере.
Ранее мы поделились с вами нашей образовательной презентацией по базовым возможностям 2D-контекста canvas, а сейчас хотим обратить внимание на то, что содержимое холста можно скачать.
Многие знают, что это делают, нажав правой кнопкой мыши на canvas-элемент и выбрав команду «Сохранить изображение как». К сожалению, тех, кто об этом не знает, значительно больше, и полагаться на такое решение нельзя. Необходима понятная всем кнопка «Скачать».
Исправить ситуацию поможет функция
Для наглядности мы собрали небольшое демо, где рисуется простой график, который можно скачать как PNG-файл:
https://codepen.io/OlegChulakovStudio/pen/KyEBEN
В нашей практике неоднократно возникали ситуации, когда необходимо было дать пользователю возможность скачать изображение, которое он сделал на сайте и уже видит в браузере. Например, если пользователь накладывает эффекты на фотографию или создает какую-нибудь открытку с помощью конструктора. Применять в такой ситуации backend для генерации файла для скачивания очень избыточно: даже если получится идеально продублировать логику отрисовки, все равно остается вероятность визуального несоответствия с изображением в браузере.
Ранее мы поделились с вами нашей образовательной презентацией по базовым возможностям 2D-контекста canvas, а сейчас хотим обратить внимание на то, что содержимое холста можно скачать.
Многие знают, что это делают, нажав правой кнопкой мыши на canvas-элемент и выбрав команду «Сохранить изображение как». К сожалению, тех, кто об этом не знает, значительно больше, и полагаться на такое решение нельзя. Необходима понятная всем кнопка «Скачать».
Исправить ситуацию поможет функция
toDataURL, переводящая изображение на холсте в base64-код, который можно использовать в качестве атрибута href для ссылки.Для наглядности мы собрали небольшое демо, где рисуется простой график, который можно скачать как PNG-файл:
https://codepen.io/OlegChulakovStudio/pen/KyEBEN
Не падай больше
Если в рамках базы данных проекта есть таблица с большим количеством строк, то во время выполнения миграции, изменяющей структуру этой таблицы, веб-приложение может быть недоступно.
Вызвано это тем, что MySQL, выполняя операцию
Для решения этой проблемы можно воспользоваться Percona Server — инструментом, значительно расширяющим возможности MySQL.
Встроенная в него утилита
Если в рамках базы данных проекта есть таблица с большим количеством строк, то во время выполнения миграции, изменяющей структуру этой таблицы, веб-приложение может быть недоступно.
Вызвано это тем, что MySQL, выполняя операцию
ALTER TABLE, перезаписывает каждую строку таблицы, и чем их больше, тем дольше будут выполняться операции добавления/удаления колонки, изменения индексов и т.д. Для решения этой проблемы можно воспользоваться Percona Server — инструментом, значительно расширяющим возможности MySQL.
Встроенная в него утилита
pt-online-schema-change позволяет изменять структуру таблиц, не вызывая блокировок и простоев. Для этого она самостоятельно создает копию изменяемой таблицы с новой структурой, копирует в нее данные из основной таблицы, обновляет структуру и заменяет старую таблицу новой. За счет этого автоматически исключаются вызываемые миграциями сбои в работе веб-приложений.Косякам тут не место
При добавлении новых возможностей, рефакторинге существующего функционала или исправлении бага необходимо быть уверенным, что эти действия не поломают уже реализованную логику.
Если в системе есть готовые тесты, после любой модификации кода останется только запустить их, чтобы убедиться в работоспособности проекта и отдельных его частей.
Наряду с другими фреймворками Студия располагает достаточным количеством крупных проектов, написанных на основе Yii2 Framework, для которого существует отличный модуль для создания тестов.
В этой заметке мы расскажем про быстрый старт и настройку окружения для организации тестов различных типов для advanced-шаблона Yii2, в рамках которого уже есть минимальные конфигурационные файлы Codeception и специальные директории.
Для каждого типа тестирования необходимо сгенерировать так называемый suite — набор классов-помощников и служебных каталогов, обеспечивающих работу инструментов и методов тестирования.
Для модульных unit-тестов генерация suite-набора выполняется такой командой.
Наборы подключаемых модулей, предоставляющих тот или иной функционал тестирования, можно изменять в файле
Для генерации теста можно использовать такую команду. Класс изначально содержит только один тест, который можно запустить следующим образом.
При CI-разработке мы советуем писать тесты до написания кода, действуя по технологии TDD. Такой подход помогает выявить и спроектировать оптимальную архитектуру основных объектов системы.
При добавлении новых возможностей, рефакторинге существующего функционала или исправлении бага необходимо быть уверенным, что эти действия не поломают уже реализованную логику.
Если в системе есть готовые тесты, после любой модификации кода останется только запустить их, чтобы убедиться в работоспособности проекта и отдельных его частей.
Наряду с другими фреймворками Студия располагает достаточным количеством крупных проектов, написанных на основе Yii2 Framework, для которого существует отличный модуль для создания тестов.
В этой заметке мы расскажем про быстрый старт и настройку окружения для организации тестов различных типов для advanced-шаблона Yii2, в рамках которого уже есть минимальные конфигурационные файлы Codeception и специальные директории.
Для каждого типа тестирования необходимо сгенерировать так называемый suite — набор классов-помощников и служебных каталогов, обеспечивающих работу инструментов и методов тестирования.
Для модульных unit-тестов генерация suite-набора выполняется такой командой.
Наборы подключаемых модулей, предоставляющих тот или иной функционал тестирования, можно изменять в файле
unit.suite.yml. Например, для того чтобы использовать контекст приложения Yii2, в частности его ORM, дополним кофигурационный файл и пересобирем конфигурацию тестирования командой build.Для генерации теста можно использовать такую команду. Класс изначально содержит только один тест, который можно запустить следующим образом.
При CI-разработке мы советуем писать тесты до написания кода, действуя по технологии TDD. Такой подход помогает выявить и спроектировать оптимальную архитектуру основных объектов системы.
Автоматизируй это
В одной из недавних заметок мы писали про возможность скачать содержимое тега
Так, мы освободили наших дизайнеров от рутинной работы, сделав для PR-менеджера инструмент, который автоматически создает изображения для всех социальных сетей по гайдам Студии. Требуется только ввести текст и загрузить изображение.
Собрали для вас упрощенный пример того, как может работать подобный инструмент:
https://codepen.io/OlegChulakovStudio/pen/EbMLrJ
В одной из недавних заметок мы писали про возможность скачать содержимое тега
canvas в виде файла. Совместив это с другими функциями 2D-контекста, можно разрабатывать различные инструменты автоматизации. Например, можно упростить обработку фотографий или генерировать изображения в рамках определенного стиля.Так, мы освободили наших дизайнеров от рутинной работы, сделав для PR-менеджера инструмент, который автоматически создает изображения для всех социальных сетей по гайдам Студии. Требуется только ввести текст и загрузить изображение.
Собрали для вас упрощенный пример того, как может работать подобный инструмент:
https://codepen.io/OlegChulakovStudio/pen/EbMLrJ
Реактивные окна
Сегодня мы покажем удобное решение для создания модальных окон с использованием React и Redux. Оно основано на идее Дэна Абрамова, заключающейся в передаче имени встраиваемого компонента и всех необходимых параметров в store с последующим рендером на основе этих данных.
Мы подготовили наглядный интерактивный пример в коде которого также можно найти:
1. применение react-transition-group для анимации;
2. использование решения для блокировки скролла в iOS;
3. механику сохранения ширины страницы при изменении
Сегодня мы покажем удобное решение для создания модальных окон с использованием React и Redux. Оно основано на идее Дэна Абрамова, заключающейся в передаче имени встраиваемого компонента и всех необходимых параметров в store с последующим рендером на основе этих данных.
Мы подготовили наглядный интерактивный пример в коде которого также можно найти:
1. применение react-transition-group для анимации;
2. использование решения для блокировки скролла в iOS;
3. механику сохранения ширины страницы при изменении
overflow за счет компенсации ширины body вычисленным заранее размером скроллбара.Hands up and give me your cache!
Когда у веб-приложения большая посещаемость, даже простые операции могут приводить к заметному повышению нагрузки и увеличению времени ответа. Поэтому стоит делать замеры и выполнять микрооптимизации до запуска кода в production.
Например, во многих PHP-фреймворках, включая Yii2, выполняется загрузка минимум нескольких config-файлов с последующим их объединением в один массив. Это удобная и распространенная практика разделения конфигов, однако одни и те же процедуры подключения и слияния массивов происходят при каждом запросе к приложению. И чем больше запросов, тем больше это влияет на сервер и время загрузки.
Простейший способ оптимизировать подобные ситуации — выполнить операцию один раз и сохранить результат в кэш. Но стоит иметь в виду, что это лучше делать только в рамках production-окружения, чтобы кэш не мешал процессу разработки.
Когда у веб-приложения большая посещаемость, даже простые операции могут приводить к заметному повышению нагрузки и увеличению времени ответа. Поэтому стоит делать замеры и выполнять микрооптимизации до запуска кода в production.
Например, во многих PHP-фреймворках, включая Yii2, выполняется загрузка минимум нескольких config-файлов с последующим их объединением в один массив. Это удобная и распространенная практика разделения конфигов, однако одни и те же процедуры подключения и слияния массивов происходят при каждом запросе к приложению. И чем больше запросов, тем больше это влияет на сервер и время загрузки.
Простейший способ оптимизировать подобные ситуации — выполнить операцию один раз и сохранить результат в кэш. Но стоит иметь в виду, что это лучше делать только в рамках production-окружения, чтобы кэш не мешал процессу разработки.
Время лечит
Как правильно сделать анимацию линий на графике или полет снаряда в игре, чтобы на всех устройствах скорость была одинаковой?
В примерах даже от таких библиотек, как PixiJS, можно встретить неправильный код: размер или позиция элемента меняются на определенную величину при каждом тике — колбэке setInterval или requestAnimationFrame. Это упрощенные примеры, и важно не перенести такое же поведение в production.
Использование setInterval приведет к тормозам на слабых устройствах. Может не хватить ресурсов для отрисовки каждые N миллисекунд.
Движение на фиксированную величину при каждом requestAnimationFrame приведет к разной скорости. На мощных устройствах requestAnimationFrame будет срабатывать часто и скорость анимации будет большой, а на слабых — наоборот. В зависимости от производительности и нагрузки, у одних пользователей объект может двигаться на пиксель каждые 15 мс, а в других — только 2 раза в секунду.
Решение — работать со временем. Если мы знаем, что за секунду элемент должен сдвинуться на 100 пикселей, а с момента прошлого вызова прошло полсекунды, то нужно сместить объект на 50 пикселей. Все просто.
Как правильно сделать анимацию линий на графике или полет снаряда в игре, чтобы на всех устройствах скорость была одинаковой?
В примерах даже от таких библиотек, как PixiJS, можно встретить неправильный код: размер или позиция элемента меняются на определенную величину при каждом тике — колбэке setInterval или requestAnimationFrame. Это упрощенные примеры, и важно не перенести такое же поведение в production.
Использование setInterval приведет к тормозам на слабых устройствах. Может не хватить ресурсов для отрисовки каждые N миллисекунд.
Движение на фиксированную величину при каждом requestAnimationFrame приведет к разной скорости. На мощных устройствах requestAnimationFrame будет срабатывать часто и скорость анимации будет большой, а на слабых — наоборот. В зависимости от производительности и нагрузки, у одних пользователей объект может двигаться на пиксель каждые 15 мс, а в других — только 2 раза в секунду.
Решение — работать со временем. Если мы знаем, что за секунду элемент должен сдвинуться на 100 пикселей, а с момента прошлого вызова прошло полсекунды, то нужно сместить объект на 50 пикселей. Все просто.
Разошлись во времени
Несколько мелочей в дополнение к прошлой заметке:
1. Чтобы избежать обрыва анимации при возникновении ошибки в коде, стоит разместить вызов
2. Для расчета дельты можно использовать временную метку, которую
3. Многие библиотеки для 2D- и 3D-графики вычисляют дельту самостоятельно. Примеры: PixiJS и ThreeJS.
Несколько мелочей в дополнение к прошлой заметке:
1. Чтобы избежать обрыва анимации при возникновении ошибки в коде, стоит разместить вызов
requestAnimationFrame в начале колбэка.2. Для расчета дельты можно использовать временную метку, которую
requestAnimationFrame передает аргументом в колбэк. Она есть и в популярных полифилах вроде raf, где вычисляется на основе performance.now() или Date.now().3. Многие библиотеки для 2D- и 3D-графики вычисляют дельту самостоятельно. Примеры: PixiJS и ThreeJS.
Выполнять!
Что делать, если нужно выполнить php-скрипт, содержащий команду, которая запрещена в конфигурации? Даже если есть доступ к
Одним из решений является запуск нужного скрипта в командной строке c добавлением аргумента
Таким образом, чтобы разблокировать для скрипта все php-функции, можно использовать команду:
Что делать, если нужно выполнить php-скрипт, содержащий команду, которая запрещена в конфигурации? Даже если есть доступ к
php.ini, включение функций вроде exec может привести к угрозам безопасности сервера.Одним из решений является запуск нужного скрипта в командной строке c добавлением аргумента
-d. Значения перечисленных в нем параметров будут заменены указанными в команде. Остальные параметры будут соответствовать php.ini.Таким образом, чтобы разблокировать для скрипта все php-функции, можно использовать команду:
php -d disable_functions="" script.phpДавай сам
В этой заметке расскажем, как организовать Docker-архитектуру, которая сама узнает о новых контейнерах с web-приложениями и опубликует их.
Для доступа к приложениям из внешней среды используется контейнер с прокси-сервером на основе nginx. Он является единственным в Docker-окружении доступным внешней среде по портам 80 (http) и 443 (https). В зависимости от запрашиваемого доменного имени nginx проксирует запрос на соответствующий backend-сервис внутри Docker-сети.
Backend-сервис — это контейнер с web-приложением, принимающий запросы на 80-й порт от nginx. Таких контейнеров в окружении может быть много, и их количество будет расти с релизами новых web-сайтов и сервисов.
Автоматизировать деплоймент новых контейнеров с web-приложениями можно с помощью сервиса на основе образа nginx-proxy.
При добавлении нового сайта нужно обновить конфигурацию nginx и сделать reload. Чтобы не делать этого вручную, избежать ошибок и не тратить время специалистов, используем docker-gen, который уже встроен в образ nginx-proxy.
Контейнер nginx-proxy реализует функцию Service Discovery в нашей Docker-сети, реагируя на регистрацию новых или остановку существующих Docker-контейнеров. Управлением сервисами внутри контейнера с nginx и docker-gen занимается менеджер процессов forego.
Для того чтобы nginx-сервис замечал изменения в окружении, необходимо запускать контейнеры с environment-константой
В этой заметке расскажем, как организовать Docker-архитектуру, которая сама узнает о новых контейнерах с web-приложениями и опубликует их.
Для доступа к приложениям из внешней среды используется контейнер с прокси-сервером на основе nginx. Он является единственным в Docker-окружении доступным внешней среде по портам 80 (http) и 443 (https). В зависимости от запрашиваемого доменного имени nginx проксирует запрос на соответствующий backend-сервис внутри Docker-сети.
Backend-сервис — это контейнер с web-приложением, принимающий запросы на 80-й порт от nginx. Таких контейнеров в окружении может быть много, и их количество будет расти с релизами новых web-сайтов и сервисов.
Автоматизировать деплоймент новых контейнеров с web-приложениями можно с помощью сервиса на основе образа nginx-proxy.
При добавлении нового сайта нужно обновить конфигурацию nginx и сделать reload. Чтобы не делать этого вручную, избежать ошибок и не тратить время специалистов, используем docker-gen, который уже встроен в образ nginx-proxy.
Контейнер nginx-proxy реализует функцию Service Discovery в нашей Docker-сети, реагируя на регистрацию новых или остановку существующих Docker-контейнеров. Управлением сервисами внутри контейнера с nginx и docker-gen занимается менеджер процессов forego.
Для того чтобы nginx-сервис замечал изменения в окружении, необходимо запускать контейнеры с environment-константой
VIRTUAL_HOST. Значением этой константы будет доменное имя web-приложения, для которого произойдет автоматическая настройка проксирования http(s)-запросов.
Защищайся
Месяц назад мы рассказали про важность SSL-сертификатов для современных сайтов и сервисов.
Давайте рассмотрим решение, которое позволит автоматизировать процесс получения бесплатных сертификатов в рамках Docker-архитектуры, описанной в прошлой заметке.
Нам понадобится сервис letsencrypt-nginx-proxy-companion, который является компаньоном к nginx-proxy и уже умеет с ним взаимодействовать.
Контейнер letsencrypt-nginx-proxy-companion автоматически генерирует новые и обновляет существующие сертификаты, а также дает знать об этом nginx-proxy. Таким образом, для web-приложений, требующих SSL, автоматически изменяются конфигурационные файлы для проксирующего nginx-сервера.
Чтобы сгенерировать сертификат, нам необходимо добавить две константы окружения для команды запуска Docker-контейнера:
1.
2.
Месяц назад мы рассказали про важность SSL-сертификатов для современных сайтов и сервисов.
Давайте рассмотрим решение, которое позволит автоматизировать процесс получения бесплатных сертификатов в рамках Docker-архитектуры, описанной в прошлой заметке.
Нам понадобится сервис letsencrypt-nginx-proxy-companion, который является компаньоном к nginx-proxy и уже умеет с ним взаимодействовать.
Контейнер letsencrypt-nginx-proxy-companion автоматически генерирует новые и обновляет существующие сертификаты, а также дает знать об этом nginx-proxy. Таким образом, для web-приложений, требующих SSL, автоматически изменяются конфигурационные файлы для проксирующего nginx-сервера.
Чтобы сгенерировать сертификат, нам необходимо добавить две константы окружения для команды запуска Docker-контейнера:
1.
LETSENCRYPT_HOST — список доменных имен, для которых нужно получить SSL-сертификат.2.
LETSENCRYPT_EMAIL — email для регистрации в Let’s Encrypt.
Вы не ответили на мой запрос
Политика безопасности браузеров не позволяет делать AJAX-запросы на другие домены без разрешения от сервера, на который эти запросы поступают.
Но если сервер вернет в ответе специальные заголовки, то кросс-доменный запрос выполнится успешно.
Примеры добавления заголовков на стороне различных веб-серверов и фреймворков:
https://bitbucket.org/snippets/OlegChulakovStudio/reEKM5
Если на стороне frontend требуется работа с сессией, то при отправке запроса нужно активировать флаг
https://bitbucket.org/snippets/OlegChulakovStudio/ye7pRa
Политика безопасности браузеров не позволяет делать AJAX-запросы на другие домены без разрешения от сервера, на который эти запросы поступают.
Но если сервер вернет в ответе специальные заголовки, то кросс-доменный запрос выполнится успешно.
Примеры добавления заголовков на стороне различных веб-серверов и фреймворков:
https://bitbucket.org/snippets/OlegChulakovStudio/reEKM5
Если на стороне frontend требуется работа с сессией, то при отправке запроса нужно активировать флаг
withCredentials, который позволит работать с cookie: https://bitbucket.org/snippets/OlegChulakovStudio/ye7pRa
Погоди
Во многих сервисах пользователям приходится заполнять формы с большим количеством полей. И чем их больше, тем больнее терять введенные данные.
Чтобы спасти пользователя от такой досадной неудачи, обычно используют блокировку перехода и открывают модальное окно с вопросом о подтверждении намерений.
Чтобы реализовать это на стеке React, Redux, React Router 4, можно воспользоваться методом
Используя наработки из заметок про формы и модальные окна в React, мы собрали новое интерактивное демо с кодом решения:
https://codesandbox.io/s/zlp6zwkr3p
Если перейти к форме, начать ее заполнять, а затем попытаться покинуть страницу, то приложение поможет предотвратить потерю введенных данных.
Во многих сервисах пользователям приходится заполнять формы с большим количеством полей. И чем их больше, тем больнее терять введенные данные.
Чтобы спасти пользователя от такой досадной неудачи, обычно используют блокировку перехода и открывают модальное окно с вопросом о подтверждении намерений.
Чтобы реализовать это на стеке React, Redux, React Router 4, можно воспользоваться методом
block объекта history, который получают из компонента высшего порядка withRouter. Вызвать его нужно в методе жизненного цикла componentWillUnmount.Используя наработки из заметок про формы и модальные окна в React, мы собрали новое интерактивное демо с кодом решения:
https://codesandbox.io/s/zlp6zwkr3p
Если перейти к форме, начать ее заполнять, а затем попытаться покинуть страницу, то приложение поможет предотвратить потерю введенных данных.
Игра Сервера
Для управления конфигурациями на удаленных машинах мы используем Ansible. Чтобы начать его применять, достаточно:
1) установить Ansible на локальной машине;
2) открыть доступ по SSH-ключу на нужные хосты;
3) на декларативном языке в формате YAML описать задачи, которые необходимо выполнить на хостовых машинах.
В Ansible есть много модулей для установки ПО, выполнения консольных команд, управления пользователями, файловой системой и сетевой инфраструктурой. Также есть поддержка Docker для работы с образами, контейнерами и сервисами.
Рассмотрим пример, в котором необходимо установить инфраструктуру для web-окружения: nginx, Apache, PHP, MySQL. У нас имеются Docker-сервисы, описанные в docker-compose:
https://bitbucket.org/snippets/OlegChulakovStudio/Bez6q5
Напишем конфигурацию Ansible, которая позволит запустить эти сервисы на удаленных машинах.
Сначала сформируем задачи:
1) создать на удаленной машине директорию, в которую мы поместим наш файл
2) скопировать в эту директорию файл
3) запустить сервисы из
Получим такую конфигурацию:
https://bitbucket.org/snippets/OlegChulakovStudio/ke7KBb
Для ее запуска необходимо выполнить команду:
Для управления конфигурациями на удаленных машинах мы используем Ansible. Чтобы начать его применять, достаточно:
1) установить Ansible на локальной машине;
2) открыть доступ по SSH-ключу на нужные хосты;
3) на декларативном языке в формате YAML описать задачи, которые необходимо выполнить на хостовых машинах.
В Ansible есть много модулей для установки ПО, выполнения консольных команд, управления пользователями, файловой системой и сетевой инфраструктурой. Также есть поддержка Docker для работы с образами, контейнерами и сервисами.
Рассмотрим пример, в котором необходимо установить инфраструктуру для web-окружения: nginx, Apache, PHP, MySQL. У нас имеются Docker-сервисы, описанные в docker-compose:
https://bitbucket.org/snippets/OlegChulakovStudio/Bez6q5
Напишем конфигурацию Ansible, которая позволит запустить эти сервисы на удаленных машинах.
Сначала сформируем задачи:
1) создать на удаленной машине директорию, в которую мы поместим наш файл
docker-compose.yml;2) скопировать в эту директорию файл
docker-compose.yml;3) запустить сервисы из
docker-compose.Получим такую конфигурацию:
https://bitbucket.org/snippets/OlegChulakovStudio/ke7KBb
Для ее запуска необходимо выполнить команду:
ansible-playbook ./install.yml -i example.host.comДавай плавнее
Все, кто занимается созданием анимаций, знают про функции плавности (easing) и помнят, как работают основные.
Иногда приходится делать необычные анимации, которых не добиться популярными функциями плавности. Взять, к примеру, появление заголовка на главной странице bakucitycircuit.com — каждый символ заголовка появляется из прозрачности с эффектом включения люминесцентной лампы.
Эту задачу мы решили с помощью GSAP и плагина CustomEase. В коде эта анимация выглядит как обычный
Все, кто занимается созданием анимаций, знают про функции плавности (easing) и помнят, как работают основные.
Иногда приходится делать необычные анимации, которых не добиться популярными функциями плавности. Взять, к примеру, появление заголовка на главной странице bakucitycircuit.com — каждый символ заголовка появляется из прозрачности с эффектом включения люминесцентной лампы.
Эту задачу мы решили с помощью GSAP и плагина CustomEase. В коде эта анимация выглядит как обычный
fromTo от opacity:0 до opacity:1. Но для нее мы создали в конструкторе специальный easing, вычисленный в процессе неоднократного включения и выключения ламп в офисе Студии.