Как стать автором
Обновить
10
0
Алексей Сегодин @Aleksei_Segodin

Арт-директор / дизайнер широкого профиля

Отправить сообщение

Как создавать уникальные лабиринты

Время на прочтение11 мин
Количество просмотров15K

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

А что если мы хотим тоже сделать свой интересный и уникальный лабиринт? Очевидно, нужно создать эти самые правила. Далее я постараюсь кратко, понятно и без лишних непонятных букв рассказать о разработке своего подхода к генерации различного рода лабиринтов. Объясню, почему я этим занялся, с чего начинал и как всё развилось до вполне приличного алгоритма на основе подхода и почему каждый из вас может взять этот подход за основу и адаптировать его под свои желания.
Погрузиться в мир лабиринтов
Всего голосов 45: ↑45 и ↓0+45
Комментарии14

Создание красивых градиентов на CSS

Время на прочтение5 мин
Количество просмотров22K
Вот линейный градиент на CSS, идущий от чисто жёлтого до чисто синего цвета:


Заметили, что в центре он становится бледным и грязным?

Это явление Эрик Кеннеди назвал «мёртвой зоной серого». Если вы тщательно не выбираете цвета для своих градиентов, то в ваших градиентах на CSS часто возникает такая обесцвеченная часть посередине.

Однако, как оказалось, можно полностью избавиться от мёртвой зоны серого. В этом посте я расскажу, почему она возникает, и о том, как можно использовать теорию цвета для создания насыщенных, ярких градиентов, «живых» по всей своей длине.
Читать дальше →
Всего голосов 56: ↑52 и ↓4+59
Комментарии30

Современная архитектура Electron приложений в 2021

Время на прочтение6 мин
Количество просмотров14K

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

Читать далее
Всего голосов 18: ↑18 и ↓0+18
Комментарии6

Лучшие стратегии разработки фронтенда в 2022 году

Время на прочтение13 мин
Количество просмотров25K
Эта статья специально написана так, чтобы ставить перед читателями неоднозначные задачи, вызывать у них противоречивые чувства и давать им пищу для размышлений. Речь здесь пойдёт о множестве свежих идей, о которых вы, вероятнее всего, пока не слышали.

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



Ещё я постараюсь выражать свои мысли как можно проще — так, чтобы даже люди, не являющиеся разработчиками, смогли бы, хотя бы в общих чертах, меня понять.
Читать дальше →
Всего голосов 31: ↑26 и ↓5+31
Комментарии35

Фотогалерея на максималках

Время на прочтение20 мин
Количество просмотров11K

~1 год назад я начал разрабатывать свою фотогалерею (песочницу для теста всяких технологий). Данная статья – это описание её архитектуры, а также различные твики/лайфхаки/микрогайды которые я узнал за время разработки + немного про производительность.

Читать далее
Всего голосов 20: ↑19 и ↓1+22
Комментарии2

HTTP/3 от А до Я: основные концепции. Часть 1

Время на прочтение20 мин
Количество просмотров86K

image
Фото Florencia Viadana, Unsplash.com


После почти пятилетних разработок протокол HTTP/3 наконец приближается к окончательному выпуску. Предыдущие итерации уже доступны как экспериментальная функция, но в 2021 году мы ждём широкого распространения протокола. Что такое HTTP/3? Зачем выпускать его так рано после HTTP/2? Как его можно или нужно использовать? Как он влияет на производительность?

Читать дальше →
Всего голосов 79: ↑78 и ↓1+95
Комментарии48

<img>. Доклад Яндекса

Время на прочтение30 мин
Количество просмотров27K
«Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». В докладе я постарался разобраться, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.

— Всем привет. У меня доклад с интригующим названием в виде одного тега.
Всего голосов 45: ↑45 и ↓0+45
Комментарии4

Как сделать эффективное всплывающее окно, или Как убедить всех не делать всплывающие окна. Обзор исследований

Время на прочтение4 мин
Количество просмотров8K

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

Если исследования не помогут и всплывашку все равно решат делать, то в конце статьи есть данные о том, какие поп-апы работают лучше. 

Читать далее
Всего голосов 17: ↑17 и ↓0+17
Комментарии12

Трюки CSS, которые сделают из вас ниндзя верстки

Время на прочтение5 мин
Количество просмотров50K

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


Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").


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


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


Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.


grid + place-items


Здесь вы найдете полное визуальное руководство по Grid и Flexbox.


Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.

Всего голосов 28: ↑26 и ↓2+33
Комментарии8

Малоизвестные, но крутые атрибуты в HTML

Время на прочтение4 мин
Количество просмотров30K


Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.
Всего голосов 48: ↑46 и ↓2+63
Комментарии15

Минимальное PWA

Время на прочтение6 мин
Количество просмотров22K

Какие характеристики должны быть у web-приложения, чтобы соответствовать критерию "прогрессивное"? Понятно, что, как и обычные web-приложения, прогрессивные строятся на базе "большой тройки" web-технологий - HTML/CSS/JS. Но что именно делает web-приложения прогрессивными?

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

Читать далее
Всего голосов 24: ↑22 и ↓2+27
Комментарии11

Нужны ли cookie-баннеры в эпоху GDPR — обсуждаем ситуацию и требования закона

Время на прочтение4 мин
Количество просмотров11K
Баннеры на сайтах с информацией о cookies часто закрывают чуть ли не половину контента, чем раздражают пользователей. Разберемся, что на самом деле требуют европейские законы, из-за которых эти всплывающие окна появились, и можно ли обойтись без баннеров совсем.

Читать дальше →
Всего голосов 18: ↑17 и ↓1+16
Комментарии13

Практика работы с потоками в Node.js 10.5.0

Время на прочтение7 мин
Количество просмотров24K
Совсем недавно вышла версия 10.5.0 платформы Node.js. Одной из её главных возможностей стала впервые добавленная в Node.js поддержка работы с потоками, пока носящая статус экспериментальной. Этот факт особенно интересен в свете того, что данная возможность теперь есть у платформы, адепты которой всегда гордились тем, что потоки ей, благодаря фантастической асинхронной подсистеме ввода-вывода, не нужны. Однако, поддержка потоков в Node.js всё же появилась. С чего бы это? Кому и зачем они могут пригодиться?



Если в двух словах, то нужно это для того, чтобы платформа Node.js могла бы достигнуть новых высот в тех областях, в которых раньше она показывала не самые замечательные результаты. Речь идёт о выполнении вычислений, интенсивно использующих ресурсы процессора. Это, в основном, является причиной того, что Node.js не отличается сильными позициями в таких сферах, как искусственный интеллект, машинное обучение, обработка больших объёмов данных. На то, чтобы позволить Node.js хорошо показать себя в решении подобных задач, направлено немало усилий, но тут эта платформа пока выглядит куда скромнее, чем, например, в деле разработки микросервисов.

Автор материала, перевод которого мы сегодня публикуем, говорит, что решил свести техническую документацию, которую можно найти в исходном пулл-запросе и в официальных источниках, к набору простых практических примеров. Он надеется, что, любой, кто разберёт эти примеры, узнает достаточно для того, чтобы приступить к работе с потоками в Node.js.
Читать дальше →
Всего голосов 26: ↑24 и ↓2+22
Комментарии15

Безопасность REST API от А до ПИ

Время на прочтение17 мин
Количество просмотров129K

Введение


Умение реализовать грамотное REST API — полезный навык в наше время, т.к. все больше сервисов предоставляют свои возможности с помощью API. Но разработка REST API не ограничивается реализацией HTTP запросов в определенном стиле и формированием ответов в соответствии со спецификацией. Задача обеспечения безопасности REST API не так очевидна, как, например, обеспечение безопасности баз данных, но ее необходимость не менее важна.
В настоящее время многие онлайн системы с помощью API передают приватные данные пользователей, такие как медицинские или финансовые. Текущая же ситуация с безопасностью в веб-приложениях весьма печальна: по данным Comnews порядка 70% содержат кри­тичес­кие уязвимости. Поэтому всем, кто участвует в проектировании, реализации и тестировании онлайн систем, важно иметь общую картину по существующим угрозам и способам обеспечения безопасности как всей системы, так и используемого REST API.

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

image
Читать дальше →
Всего голосов 52: ↑52 и ↓0+52
Комментарии22

CSS-функции min(), max() и clamp()

Время на прочтение12 мин
Количество просмотров67K
Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.



Сегодня я хочу рассказать об особенностях этих функций, объяснить всё то, что может оказаться в них непонятным, и привести практические примеры их использования.
Читать дальше →
Всего голосов 24: ↑23 и ↓1+35
Комментарии11

Простой подход к работе с отзывчивыми изображениями

Время на прочтение10 мин
Количество просмотров19K
Спецификация по отзывчивым изображениям — это фантастический документ, в котором описано множество вариантов использования таких изображений. Но опыт подсказывает мне, что чаще всего при работе с ними нужно знать лишь о том, как отдавать клиенту копии одного и того же изображения разного размера, выбирая их в зависимости от ширины области просмотра страницы. Мы называем это «переключением разрешения». Для решения этой задачи можно воспользоваться атрибутами srcset и sizes.

Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.



И, кстати, пользуясь отзывчивыми изображениями можно не беспокоиться о браузерной поддержке этой технологии. Интересующие нас атрибуты пользуются прекрасной поддержкой браузеров. И, кроме того, в нашем распоряжении имеется резервный механизм, предназначенный для старых браузеров вроде IE11.
Читать дальше →
Всего голосов 22: ↑21 и ↓1+34
Комментарии16

Разработка в Wargaming – встреча с Максимом Барышниковым, Head of Platform (ч.I)

Время на прочтение25 мин
Количество просмотров11K

Все побежали, и я побежал. Недавно я запустил серию онлайн-митапов, куда приглашаю на дискуссию экспертов в области разработки крупных IT-проектов. Нашим первым гостем был Максим Барышников, Head of Platform из Wargaming. Ниже – расшифровка нашего разговора, вернее, её первая часть, посвященная архитектуре.


Из этой части вы узнаете, например:


  • сколько людей работает в Wargaming и сколько строк кода в «Танках»
  • как, какие и куда едут байты во время боя в «Танках»
  • какие подходы используют в Wargaming для обеспечения масштабируемости и отказоустойчивости
  • какие архитектурные боли испытывают и на какие компромиссы между геймплеем и инженерными практиками идут
  • почему в Python приходится отключать garbage collector, и где используется Erlang
  • какие у Wargaming open source policies, и что они открывают в паблик

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


image

Читать дальше →
Всего голосов 34: ↑30 и ↓4+43
Комментарии4

Шпаргалки по безопасности: Nodejs

Время на прочтение11 мин
Количество просмотров17K


Довольно много уже было сказано о популярности NodeJS. Рост количества приложений очевиден – NodeJS довольно прост в освоении, имеет огромное количество библиотек, а также динамично развивающуюся экосистему.

Мы подготовили рекомендации для NodeJS разработчиков, основываясь на OWASP Cheat Sheets, которые помогут вам предусмотреть проблемы с безопасностью при разработке приложений.

Рекомендации к безопасности NodeJS приложений можно разделить на следующие категории:

  • Безопасность при разработке приложения;
  • Безопасность сервера;
  • Безопасность платформы;

Читать дальше →
Всего голосов 15: ↑12 и ↓3+15
Комментарии2

Визуализация работы сервис-воркеров

Время на прочтение5 мин
Количество просмотров16K


Доброго времени суток, друзья!

Вероятно, многие из вас слышали о таком новшестве в экосистеме JavaScript, как сервис-воркеры (Service Workers), которые являются ключевым элементом современной веб-разработки. Сервис-воркеры становятся все более востребованными, в первую очередь, благодаря популярности прогрессивных веб-приложений (Progressive Web Applications — PWA).

Когда я впервые услышал о них, я задался вопросом: «Когда мы должны использовать сервис-воркеры? В каким сценариях или контексте мы можем их использовать?»

В данной статье мы рассмотрим несколько практических примеров использования сервис-воркеров, что впоследствии, смею надеяться, сделает счастливыми ваших пользователей.

Полагаю, прежде чем разбирать практические примеры, необходимо хотя бы в общих чертах рассмотреть теоретические основы работы сервис-воркеров. Для начинающих разработчиков это послужит хорошим подспорьем в дальнейших начинаниях.
Читать дальше →
Всего голосов 17: ↑17 и ↓0+17
Комментарии3

Ускоряем фронтенд. Когда много запросов к серверу — это хорошо

Время на прочтение10 мин
Количество просмотров25K
В этой статье описываются некоторые методы ускорения загрузки фронтенд-приложений, чтобы реализовать отзывчивый, быстрый пользовательский интерфейс.

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

Процесс загрузки разделим на три этапа. Для каждого этапа сформулируем общие стратегии повышения производительности:

  1. Начальная отрисовка: сколько времени требуется, чтобы пользователь увидел хоть что-то
    • Сократить запросы, блокирующие рендеринг
    • Избегать последовательных цепочек
    • Повторно использовать соединения с сервером
    • Сервис-воркеры для мгновенного рендеринга
  2. Загрузка приложения: сколько времени требуется, чтобы пользователь смог использовать приложение
    • Разбить пакет приложения на части. Загружать только необходимые ресурсы. Максимизация попаданий в кэш
    • Проверить, что хэши частей пакета не меняются без необходимости
    • Запрашивать данные для страницы до загрузки всего приложения
    • Не блокировать рендеринг загрузкой второстепенных данных
    • Рассмотреть рендеринг на стороне сервера
  3. Следующая страница: сколько времени требуется для перехода на следующую страницу
    • Запрашивать дополнительный код до того, как он понадобится
    • Кэшировать и повторно использовать данные на клиенте
Читать дальше →
Всего голосов 31: ↑31 и ↓0+31
Комментарии4

Информация

В рейтинге
Не участвует
Откуда
Wrocław, Dolnoslaskie, Польша
Дата рождения
Зарегистрирован
Активность