Pull to refresh
0
0
Подгаев Алексей @alexiusp

User

Send message

Реализация циклической генерации подземелий «изнутри»: да что тут сложного?

Level of difficultyEasy
Reading time14 min
Views9.9K

Вам нравятся старые Legend of Zelda времён SNES и GBA? Может быть, вам пришлась по вкусу Dark Souls? А, возможно, вы ещё и фанат Quake? Но что объединяет все эти игры? Для меня это в первую очередь дизайн уровней. Головоломки, удобные шорткаты и нелинейность исследования - вот то, что делает карту игры частью общего игрового процесса и вдыхает жизнь в процесс исследования мира.

В наше время расцвета жанра rogue-lite вопрос генерации игровых уровней актуален как никогда. Однако по-настоящему интересные уровни в жанре - большая редкость, я бы даже сказал, феноменальная. Чаще всего уровни представляют собой просто наборы заранее заготовленных комнат-коробок, случайным образом приставленных друг к другу, без какой-либо логичной высокоуровневой картины. Но, всё же, я знаю одну игру, которая взяла принципиально другой подход: Unexplored. На мой взгляд, она пересмотрела устоявшийся стереотип об ограничениях левелдизайна в рогаликах. Всё, что для этого понадобилось - циклическая генерация подземелий (Cyclic dungeon generation).

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

Каких же?
Total votes 28: ↑28 and ↓0+34
Comments15

Код на React и TypeScript, который работает быстро. Доклад Яндекса

Reading time16 min
Views28K
Евангелисты Svelte и других библиотек любят показывать примеры тормозящих компонентов на React. React и TypeScript дают много возможностей создавать медленный код. После доклада Виктора victor-homyakov вы сможете писать более производительные компоненты без усложнения кода.

— Здравствуйте, меня зовут Виктор, я один из разработчиков страницы поиска Яндекса. На ней каждый день сотни миллионов пользователей вводят свои запросы, получают страницу со ссылками или сразу с правильными ответами. Из-за такого количества запросов нам очень важно, чтобы наш код работал оптимально. И, конечно, я сразу должен затронуть тему преждевременной оптимизации кода.
Читать дальше →
Total votes 20: ↑19 and ↓1+23
Comments30

React-компоненты шаблонов проектирования

Reading time18 min
Views11K

Эта документация поможет найти компромиссы между различными шаблонами (patterns) React, а также определить, когда использование каждого из них будет наиболее целесообразным. Нижеприведенные шаблоны позволят получить более практичный и многократно используемый код, придерживаясь принципов проектирования, таких как разделение ответственности, DRY (Don’t repeat yourself — не повторяй себя) и повторное использование кода. Некоторые из этих шаблонов помогут решить проблемы, которые возникают в больших React приложениях, таких как пробрасывание (prop drilling) или управление состоянием. Каждый основной шаблон включает пример, размещенный на CodeSandBox.

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

Читать далее
Total votes 10: ↑6 and ↓4+4
Comments1

Интервью с Дэном Абрамовым: React 17, Suspense, Redux, холивары

Reading time22 min
Views32K


Главный миф о Дэне Абрамове — что он «создал React». Но хотя это и не так, сейчас он имеет самое прямое отношение к фреймворку, так что поговорить с ним про React очень интересно. Обычно Дэна не увидеть на российских конференциях, но нам помог онлайн-формат, и на HolyJS его подробно расспросили Наталия Теплухина (член core team Vue.js) и Наталия Короткова (занимается веб-проектами с 2010 года).


Тут получился не поверхностный разговор о погоде, а обсуждение технической конкретики для тех, кто вдается в детали. Но под конец были и более общие вопросы: когда появится новая документация React, переписанная с нуля? Что не так с Redux? Как Дэн воспринимает холивары о фреймворках? Что он может рассказать о релокации?


Так что, если не осилите все технические детали в первой половине интервью, переходите ко второй, там попроще. Под катом — и видеозапись разговора, и текстовая расшифровка.

Total votes 24: ↑21 and ↓3+24
Comments9

Core Web Vitals: как Google решил оценивать сайты

Reading time7 min
Views20K


Всем привет!

Сегодня поговорим о важности пользовательского взаимодействия, ведь совсем скоро придется подготовить свои сайты к максимальному ускорению загрузки. Возможно, вы уже слышали про Core Web Vitals…

В прошлом году Google начал масштабный пересмотр факторов ранжирования в поисковике, чтобы улучшить качество поисковой выдачи. И в ноябре команда Google анонсировала Core Web Vitals — новые факторы оценки качества ресурсов, которые смогут влиять на индексацию и вступят в силу в мае 2021 года. Давайте разбираться.
Читать дальше →
Total votes 12: ↑10 and ↓2+11
Comments18

Кому с Redux жить хорошо

Reading time20 min
Views9.8K
Приветствую всех любителей хорошей инженерки! Меня зовут Евгений Иваха, я фронтенд-разработчик в команде, занимающейся дев-программой в ManyChat. В рамках дев-программы мы разрабатываем инструменты, позволяющие расширять функциональность ManyChat за счет интеграции со сторонними системами.

Существует мнение, что разработка через тестирование, или по канонам Test Driven Development (TDD) для фронтенда не применима. В данной статье я постараюсь развенчать этот миф и покажу, что это не только возможно, но и очень удобно и приятно.

Сам по себе React достаточно понятен любому разработчику, чего не скажешь про Redux. На первый взгляд может показаться, что это какой-то монструозный и непонятный инструмент. Прочитав данную статью, вы узнаете как разрабатывать приложения через тестирование на React, используя Redux, поймёте преимущества его использования, научитесь не открывать браузер при разработке фронтенд-приложений и экономить время на дебаге. Возможно, найдёте что-то новое для себя про написание фронтовых тестов.


Читать дальше →
Total votes 12: ↑10 and ↓2+10
Comments66

Версионность веб-приложений

Reading time7 min
Views30K

Общеизвестно, что каждый программный продукт в конечном итоге обретает номер поставляемой версии. Изначально это может быть цифра в README файле, на борде в JIRA либо просто в голове у тимлида или ПМа. Но в какой-то момент становится понятно, что нужно формализовать процесс назначения версии релизу, отобразить номер в приложении, интегрировать версионность в CI, аналитику и другие места. 

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

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

Читать далее
Total votes 9: ↑9 and ↓0+9
Comments13

Архитектурный паттерн Dependency Injection в React-приложении

Reading time15 min
Views38K

Расшифровка доклада Сергея Нестерова с конференции FrontendLive 2020.

Привет! Меня зовут Сергей, уже больше двух лет я работаю в группе компаний Тинькофф. Моя команда занимается разработкой системы для анализа качества обслуживания клиентов в Тинькофф, и, как вы, наверное, догадались, мы используем React в своем приложении. Не так давно мы внедрили в свой проект архитектурный паттерн Dependency Injection совместно с IoC-контейнерами. Сделали мы это не просто так: это позволило нам решить ряд проблем, которые тормозили разработку нового функционала.

Читать далее
Total votes 29: ↑28 and ↓1+32
Comments48

Lens JS как менеджер состояния приложения

Reading time5 min
Views7.1K

Обзор библиотеки lens-js и эксперименты с котиками.

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

Читать далее
Total votes 9: ↑8 and ↓1+10
Comments13

Фронтендер пишет нейронки. Уровень сложности «хочу на ручки»

Reading time13 min
Views17K

Рано или поздно, фронтенд - разработчик устает играть со своими фреймворками, устает докучать коллегам - бэкендерам, устает играть в девопс и начинает смотреть в сторону машинного обучения, дата - саенс и вот это вот все. Благо, каждый второй курс для тех кто хочет войти вайти способствует этому, крича на всех платформах, как это легко. Я тоже, насытившись перекладыванием данных из базы в API, а потом из API в таблицы и формы, решил взять небольшой отпуск и попробовать применить свои скилы фронтендера в машинном обучении. Благо, существуют такие люди как Daniel Shiffman и Charlie Gerard, которые своим примером помогают не бросить начатое, увидев первые страницы с математическими формулами.

Читать далее
Total votes 20: ↑20 and ↓0+20
Comments13

Ретроспектива разработки интерфейса листа персонажа

Reading time13 min
Views13K


Близится 2021 год, а значит, минуло почти 4 года с момента, когда я присоединился к разработке Pathfinder:Kingmaker в качестве разработчика интерфейсов. За это время игра превратилась из маленького прототипа с минимальным функционалом в огромную, сложную систему. Игра пережила релиз, год активного багофикса и поддержки DLC, а также портирование на консоль. И теперь, когда разработку этого проекта можно считать завершенной, пришло время оглянуться и попробовать собрать ретроспективу того, как проектировались и создавались интерфейсы.


Я решил начать с основного, на мой взгляд, интерфейса игры, с листа персонажа.
Много текста и картинок
Total votes 39: ↑39 and ↓0+39
Comments20

Классические алгоритмы генерации лабиринтов. Часть 1: вступление

Reading time8 min
Views61K


Предисловие


На написание статьи меня сподвигло практически полное отсутствие материалов на русском языке про алгоритмы генерации лабиринтов. На Хабре, из того, что вообще есть по теме, можно отметить две статьи: раз и два. Ценность и пользу из которых несет лишь вторая. В первой – просто перевод формального алгоритма и небольшое его пояснение. Что, конечно, неплохо, но очень скудно и не вызывает желания изучать тему дальше.

Если моя статья Вам понравится, я продолжу писать о различных алгоритмах. Мы рассмотрим два самых примитивных и простых случая – генерация двоичного дерева и Сайдвиндер, который, по своей сути, просто чуть измененная версия двоичного дерева с одним заметным плюсом. ОСТОРОЖНО ТРАФИК.
Читать дальше →
Total votes 68: ↑68 and ↓0+68
Comments35

Классические алгоритмы генерации лабиринтов. Часть 2: погружение в случайность

Reading time12 min
Views32K


Предисловие


Первая часть

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

В этой части мы поговорим о том, что же такое случайная и псевдослучайная генерации, какие алгоритмы могут дать нам равновероятно ничем не похожие друг на друга лабиринты и в чем их минусы. Героями нашего сегодняшнего приключения станут алгоритм Уилсона и алгоритм Олдоса-Бродера для создания случайного остовного дерева (Uniform Spanning Tree). ОСТОРОЖНО ТРАФИК.
Читать дальше →
Total votes 47: ↑47 and ↓0+47
Comments25

Javascript фреймворк разработки бизнес приложений

Reading time6 min
Views9.6K

Мысль о своем фреймворке зародилась когда я еще активно работал с 1С. Хотелось иметь простую и открытую платформу для создания несложных бизнес приложений (простые системы учета, CRM и прочие).Не раз искал open source решения, но ничего подходящего не находил.

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

Хоть с HabraERP дальше обсуждений дело не пошло, я понял, что создание нужной мне платформы-фреймворка - возможно.

Спустя неполных 10 лет я готов представить вам KateJS - открытый javascript фреймворк разработки бизнес приложений.

Читать далее
Total votes 20: ↑20 and ↓0+20
Comments27

11 инструментов для разработки микрофронтендов, о которых стоит знать

Reading time9 min
Views20K
В сфере серверного программирования разбиение традиционных монолитных бэкендов на микросервисы позволило добиться невиданной прежде эффективности работы и недоступных ранее возможностей по масштабированию проектов. Но, несмотря на это, большинство фронтенд-систем всё ещё представляют собой монолиты. Это усложняет оптимизацию работы над такими системами и препятствует улучшению их масштабирования.



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

Дэн Абрамов, в мае прошлого года, писал в своём Твиттере о том, что он не понимает микрофронтенды. Он полагает, что задачи, которые они должны решать, уже решены средствами хороших компонентных моделей. «Может, микрофронтенды — это решение организационных проблем, а не технических? Например, когда две команды разработчиков не могут ни о чём договориться, в том числе — об инфраструктуре проекта», — размышляет он.

Существует много подходов к разработке микрофронтендов: от интеллектуальной интеграции компонентов во время сборки проекта до организации совместной работы разных частей приложения во время выполнения кода путём использования особых подходов к маршрутизации. В этом материале я собрал самые заметные инструменты, направленные на разработку микрофронтендов.
Читать дальше →
Total votes 21: ↑19 and ↓2+26
Comments17

Ваш профессиональный спад придет (гораздо) раньше, чем вы думаете

Reading time24 min
Views62K
Вот как извлечь из него максимум.


Изображение: Люси Гутьеррес

«Неправда, что ты больше никому не нужен».

Эти слова исходили от пожилой женщины, сидящей позади меня на позднем вечернем рейсе из Лос-Анджелеса в Вашингтон. В самолете было темно и тихо. Мужчина, которого я счел за ее мужа, почти беззвучно пробормотал в ответ что-то вроде «Лучше бы я был мертв».

И снова женщина: «О, прекрати это говорить».

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

Когда в конце рейса включился свет, я наконец-то увидел опустошенного человека. Я был в шоке. Я узнал его – он был и остается знаменитым на весь мир. Тогда, в возрасте восьмидесяти лет, он был любим как герой за мужество, патриотизм и достижения многих десятков лет назад.
Читать дальше →
Total votes 49: ↑43 and ↓6+60
Comments107

Алгоритм быстрого и простого объёмного рендеринга

Reading time9 min
Views14K

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

У моего ShaderToy были три основные задачи:

  1. Выполнение в реальном времени
  2. Простота
  3. Физическая корректность (… или типа того)

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

  1. Трассировка лучей непрозрачных объектов. Все объекты являются примитивами с простыми пересечениями с лучами (1 плоскость и 3 сферы)
  2. Для вычисления освещения используется затенение по Фонгу, а в трёх сферических источниках света применется настраиваемый коэффициент затухания света. Лучи теней не требуются, потому что мы освещаем только плоскость.

Вот как это выглядит:

ShaderToy screenshot
Читать дальше →
Total votes 52: ↑52 and ↓0+52
Comments6

3D-аркада в браузере: как мы сделали игру на React + Redux

Reading time16 min
Views14K

Привет, Хабр! В не такие уж далёкие годы, на первом курсе «программистского» факультета, мне нравилось задавать товарищам по учёбе вопрос: «Зачем вы вообще пошли сюда учиться?» Точной статистики ответов я, конечно, не вёл, но доподлинно помню: больше половины хотели делать игры. Большинство тех, кто так отвечал, оказались не готовы к обилию разных видов «математик» и «физик», которыми нас завалили в первые два года учёбы. Выдерживали не все — уже к концу второго курса из пяти переполненных групп осталось три неполных.


Не так давно нашей фронтенд-команде предоставилась возможность попробовать себя в роли gamedev. Очень коротко, задача такая: сделать самую настоящую 3D-игру, да так, чтобы можно было поиграть, просто открыв браузер. Даже мобильный. Даже в WebView.



В этом посте я постараюсь рассказать о том, как мы спроектировали архитектуру игры, с какими проблемами столкнулись, используя один из самых популярных и актуальных технологических стеков — React + Redux, и какими «хорошими практиками», вероятнее всего, придётся пожертвовать, если вы для схожих задач выберете этот же стек.

Читать дальше →
Total votes 21: ↑21 and ↓0+21
Comments10

Поддержка Touch в JavaScript

Reading time6 min
Views8.2K

image


Какие проблемы могут быть у frontend-программиста, если тестировщик запустит его приложение на iPad с новой трекпад-клавиатурой, Windows-планшете, с неопределенным состоянием “режима планшета” или ноутбуке с подключенным к нему телевизором c поддержкой Multi-touch?


Это далеко не полный список допустимых конфигураций оборудования, которые мы поддерживаем при разработке системы СБИС. Сегодня СБИС — это не только знакомое многим решение для сдачи отчетности, ведения электронного документооборота и бухгалтерии, но и набор инструментов для автоматизации розницы, общепита, доставки и логистики. В этих сферах нужно уметь хорошо работать на самых разных планшетах и гаджетах с различными экранами и типами устройств ввода. И далеко не всегда проблемы могут быть связаны с экзотическим сочетанием настроек операционных систем и драйверов: если взять обычный iPad с браузером Safari, Android планшет или ноутбук-трансформер на Windows10 с последней версией Google Chrome — везде будет свой набор ошибок и особенностей обработки пользовательского ввода.


Эта статья о том, как, а главное, зачем вводить в обычных Web приложениях режим поддержки Touch.

Читать дальше →
Total votes 15: ↑15 and ↓0+15
Comments4

Изучаем переменные в CSS на практическом примере

Reading time15 min
Views6.5K


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

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

«Замечательность» его (то бишь кода) состоит в практическом использовании переменных в CSS, что сильно облегчает написание стилей (использование переменных также обуславливает необычную структуру CSS). И, конечно, тема импонирует весьма — планеты Солнечной системы.

Оригинальный проект написан на Pug и Sass, мы же разберем его на HTML/CSS.

Итак, поехали.
Читать дальше →
Total votes 7: ↑7 and ↓0+7
Comments4
1
23 ...

Information

Rating
Does not participate
Location
Berlin, Berlin, Германия
Date of birth
Registered
Activity