Как стать автором
Обновить
5
0
tanz_sullamora @tanz_sullamora

Пользователь

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

Решение задачи про определение типа в Typescript с Yandex Cup 2023

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров12K

Всю прошлую неделю проходила квалификация на Yandex Cup 2023. Я решил тряхнуть стариной и вспомнить что такое спортивное программирование.

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

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

Завариваем чаек, я начинаю.

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

Движок для игры от первого лица в 265 строках Javascript

Уровень сложностиСложный
Время на прочтение6 мин
Количество просмотров26K
image

Сегодня окунёмся в мир, который можно потрогать. В этой статье мы исследуем, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица. Для этого мы воспользуемся приёмом под названием «бросание лучей» (raycasting). Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D, а из более свежего – в статьях из «ludum dare» от Нотча Перссона. Что ж, для Нотча это неплохо, но не для меня! Вот демка (управление стрелками и тачпадом) [источник].
Читать дальше →
Всего голосов 61: ↑60 и ↓1+76
Комментарии36

Руководство по симулятору простого ассемблера для 8-битного процессора на Javascript

Время на прочтение12 мин
Количество просмотров6.5K
Читать далее
Всего голосов 15: ↑14 и ↓1+16
Комментарии9

Создание процедурной анимации смерти при помощи автоматов падающего песка

Время на прочтение2 мин
Количество просмотров9.9K
В этом посте я покажу, как использовал автоматы падающего песка для генерации анимаций смерти монстров в моей игре Vagabond.



Автоматы падающего песка


Автомат падающего песка — это клеточный автомат, симулирующий перемещение песчинок и создание куч песка под действием гравитации.

Правила просты:

  • Если ячейка под песчинкой пуста, то песчинка движется в пустую ячейку (см. (a)).
  • Если ячейка под песчинкой заполнена, но свободна ячейка внизу слева или внизу справа, то песчинка движется туда (см. (b)). Если свободны обе, то одна из них выбирается случайным образом.
  • В остальных случаях песчинка не движется.
Читать дальше →
Всего голосов 65: ↑65 и ↓0+65
Комментарии10

Крошечный генератор мелодий на JS — как он устроен

Время на прочтение3 мин
Количество просмотров5.7K
Рассказываем об инструменте ZzFXM, который пригодится разработчикам инди-игр или веб-приложений, вынужденных оперировать сильно ограниченным объемом памяти.

Также поговорим об аналогах — rFXGen, wafxr.

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

Urban Bot или как писать чат-ботов для Telegram, Slack, Facebook… на React.js

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

image


В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.


Чат-бот — это чаще всего отдельный чат в мессенджере, в котором вы общаетесь не с человеком, а с программой. Он может присылать сообщения в виде текста, изображений, кнопок и многих других UI элементов и реагировать на сообщения от пользователей. Современные чат-боты — это полноценные UI приложения внутри мессенджеров.

В отличии от большинства чат-бот библиотек, которые чаще всего просто оборачивают http запросы в функции с готовыми аргументами и предоставляют подписки вида bot.on('message', callback), иногда позволяя передавать контекст между вызовами, Urban Bot предлагает совершенно иной подход к разработке чат-ботов — через декларативное программирование и компонентный подход. Живой пример, написанный на Urban Bot, вы можете попробовать в Telegram, cсылка на чат-бот, и посмотреть код на GitHub.


Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.

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

Видеозапись в облако своими руками

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

Идёте вы, уважаемый читатель, погожим летним вечером по улице, никого не трогаете, и тут… на вас наезжают (тьфу-тьфу-тьфу, как говорится). Хулиганы, просто прохожие, специальные товарищи (как пелось в одной старой песенке) — не столь важно. Вы достаете телефон и начинаете снимать происходящее на видео. Это не очень нравится наезжающим, и телефон у вас отбирают (или изымают на законных основаниях — нужное подчеркнуть). Свидетелей нет, видеозаписи на телефоне больше нет, доказательств для полиции и суда тоже, соответственно, никаких.


Выход из этой ситуации очевиден: видеозапись должна вестись не в локальный файл на ваш телефон, а непосредственно на удаленный сервер. Правда, готовых программных решений для реализации этой идеи не так много (например, вот): в большинстве случаев предлагаемые приложения для мобильного телефона или платные, или работают из рук вон плохо. Экзотические рекомендации типа «в случае нападения хулиганов начните трансляцию на YouTube» я не рассматриваю, так как в реальной ситуации у вас элементарно не будет времени, чтобы запустить трансляцию. Кроме того, видео будет писаться в чьё-то чужое облако, а очень часто это не есть хорошо.


Можно, конечно, подучить Java или Kotlin (а заодно и Swift) или, на худой конец, освоить PhoneGap и написать своё приложение. Однако всё гораздо проще: под катом несложное решение этой задачи посредством HTML5 video/audio API.

Читать дальше →
Всего голосов 11: ↑10 и ↓1+12
Комментарии24

Как заопенсорсить npm-пакет с нормальным деплоем, CI и демо (без потери радости к жизни)

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

Вот вы сделали что-то новое и крутое, приходит мысль — выложить в опенсорс и опубликовать в npm.


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


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


На самом деле всё это может занять у вас меньше часа. Без знаний DevOps и совершенно бесплатно.


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

Применение машинного обучения и Data Science в промышленности

Время на прочтение22 мин
Количество просмотров68K
Хабр, привет. Перевел пост, который идёт строго (!) в закладки и передаётся коллегам. Он со списком блокнотов и библиотек ML и Data Science для разных отраслей промышленности. Все коды на Python, и размещены на GitHub. Они будут полезны как для расширения кругозора, так и для запуска своего интересного стартапа.

image

Отмечу, что если среди читателей есть желающие помочь, и добавить в любую из подотраслей подходящий проект, пожалуйста, свяжитесь со мной. Я их добавлю в список. Итак, давайте начнём изучение списка.
Читать дальше →
Всего голосов 77: ↑71 и ↓6+65
Комментарии13

Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

Время на прочтение5 мин
Количество просмотров15K
Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

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

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.
Читать дальше →
Всего голосов 29: ↑28 и ↓1+27
Комментарии11

Коротко о Shadowsocks, или OpenVPN не нужен (в каждом доме)

Время на прочтение6 мин
Количество просмотров298K
В наши дни, когда всякие нехорошие элементы так и норовят влезть в ваш трафик и как-то там напакостить, стало модным шифрование трафика. Начинание это благое и полезное, вот только делают его зачастую избыточно. Если шифрование трафика до доверенного сервера, типа своего VPS, — ваша единственная цель, то OpenVPN для такой цели слишком наворочен. Его долго настраивать, легко обнаружить, а главное — есть подводные камни, не зная которых можно получить такую ситуацию, что VPN стоит, а трафик идёт в обход. Всё это потому, что OpenVPN задумывался больше как средство доступа к маленькой сети через Интернет, а не для доступа ко всему Интернету.
Читать дальше →
Всего голосов 56: ↑55 и ↓1+54
Комментарии77

«Cделать красиво». Визуализация обучения с Tensorboard от Google

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

Красота, как известно, требует жертв, но и мир обещает спасти. Достаточно свежий (2015г) визуализатор от Google призван помочь разобраться с процессами, происходящими в сетях глубокого обучения. Звучит заманчиво.

Красочный интерфейс и громкие обещания затянули на разбор этого дизайнерского шайтана, с неинтуитивно отлаживающимися глюками. API непривычно скудный и часто обновляющийся, примеры в сети однотипны (глаза уже не могут смотреть на заезженный MNIST).

Чтобы опыт не прошел зря, решила поделиться максимально простым описанием инсайтов с хабравчанами, ибо рускоязычных гайдов мало, а англоязычные все как на одно лицо. Может, такое введение поможет вам сократить время на знакомство с Tensorboard и количество ругательных слов на старте. Также буду рада узнать, какие результаты он дал в вашем проекте и помог ли в реальной задаче.
Читать дальше →
Всего голосов 7: ↑7 и ↓0+7
Комментарии9

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 3 — Routing & Fetching

Время на прочтение24 мин
Количество просмотров4.9K
В предыдущей части туториала мы научили наше изоморфное приложение проксировать запросы к backend api, с помощью сессии передавать начальный стейт между синхронными запросами и осуществлять Server-side rendering с возможностью переиспользования разметки на клиенте (hydrate). В этой части мы решим еще две ключевые проблемы изоморфных веб-приложений: изоморфный роутинг и навигация, и повторный фетчинг и начальное состояние данных. И сделаем это буквально 5-ю строками кода. Погнали!

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

Наш опыт создания редактора блок-схем для веб приложения

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

К любой компании, которая занимается инструментами для разработчиков, рано или поздно приходит делегация клиентов. Со словами «программистов нет, задачи простые, нужен визуальный редактор». Автоматикой телефонных и видеозвонков мы занимаемся уже много лет, кому и зачем звонит робот хорошо себе представляем, VueJS любим, голова не болит. Почему бы не сделать? Под катом — закулисье и техническая сторона того, что маркетинг красиво назвал «Smartcalls».
Читать дальше →
Всего голосов 51: ↑40 и ↓11+29
Комментарии40

DevDay на функционале. Запись докладов

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


Возможно, вы уже знаете, что раз в месяц 2ГИС проводит DevDay — открытые встречи для общительных разработчиков. Так, 15 декабря мы собрали 140 человек, чтобы потолковать про функциональное программирование.

Делимся с вами записью двух выступлений. Первое видео будет полезно для входа в тему ФП, второе — расскажет о подводных камнях Akka Streams.
Давайте посмотрим
Всего голосов 20: ↑19 и ↓1+18
Комментарии0

Создаём собственный физический 2D-движок: части 2-4

Время на прочтение32 мин
Количество просмотров39K
image


Оглавление


Часть 2: ядро движка

  • Интегрирование
  • Метки времени
  • Модульная архитектура
    • Тела
    • Формы
    • Силы
    • Материалы
  • Широкая фаза
    • Отсечение дубликатов контактных пар
    • Система слоёв
  • Проверка пересечения полупространств

Часть 3: трение, сцена и таблица переходов

  • Трение
  • Сцена
  • Таблица переходов коллизий

Часть 4: ориентированные твёрдые тела

  • Математика вращения
  • Ориентированные формы
  • Распознавание коллизий
  • Разрешение коллизий

Всего голосов 52: ↑51 и ↓1+50
Комментарии8

Взлом визуальной системы: 11 оптических иллюзий в графическом дизайне

Время на прочтение7 мин
Количество просмотров68K
Глубока ли кроличья нора?

image

Сколько минут вам потребуется, чтобы понять в чем фишка?

Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).

  • «Призраки рода» проистекают из самой человеческой природы, они не зависят ни от культуры, ни от индивидуальности человека. «Ум человека уподобляется неровному зеркалу, которое, примешивая к природе вещей свою природу, отражает вещи в искривлённом и обезображенном виде».
  • «Призраки пещеры» — это индивидуальные ошибки восприятия, как врождённые, так и приобретённые. «Ведь у каждого, помимо ошибок, свойственных роду человеческому, есть своя особая пещера, которая ослабляет и искажает свет природы».
  • «Призраки площади (рынка)» — следствие общественной природы человека, — общения и использования в общении языка. «Люди объединяются речью. Слова же устанавливаются сообразно разумению толпы. Поэтому плохое и нелепое установление слов удивительным образом осаждает разум».
  • «Призраки театра» — это усваиваемые человеком от других людей ложные представления об устройстве действительности. «При этом мы разумеем здесь не только общие философские учения, но и многочисленные начала и аксиомы наук, которые получили силу вследствие предания, веры и беззаботности». [Wikipedia]

Под катом — наглядная демонстрация уязвимости нашего мозга к атакам через визуальный ввод. Представляю вам перевод статьи продуктового дизайнера и фронтэнд-разработчика Balraj Chana, про то как можно использовать/нейтрализовать эффект оптических иллюзий.
Читать дальше →
Всего голосов 86: ↑78 и ↓8+70
Комментарии28

Дизайн и математика игр-кликеров

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

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

Что такое инкрементная игра?


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

В сущности, такова общая структура «инкрементной» игры. Она кажется простой, даже примитивной, но в игровом процессе есть неожиданная глубина и привлекательность. Стили игры могут быть разными — от коммерчески успешных и казуальных Clicker Heroes и AdVenture Capitalist до более экспериментальных или хардкорных примеров, таких как Candy Box, Cookie Clicker и Sandcastle Builder.


Cookie Clicker, самое начало.

Что же самое важное в инкрементной игре? Хотя в этом жанре есть множество вариаций и экспериментов, фундаментальными аспектами дизайна являются:

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

Именно цикл накопления, реинвестиций и ускорения определяет основы жанра и отличает его от игр, в которых присутствует просто увеличивающийся счёт. Например, в примечательной Cookie Clicker игрок стремится к росту количества «печенек», которое изначально увеличивается нажатием на огромное печенье, а потом тратит печенье на покупку апгрейдов, позволяющих создавать ещё больше печенья.
Читать дальше →
Всего голосов 53: ↑53 и ↓0+53
Комментарии36

Ад рендера v.2.0. Книга первая. Обзор

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

Отсебятина


Наткнулся год назад на ряд очень интересных статьей господина Simon. Саймон очень любит разбирать то, как создаются игры, а именно графические решения того или иного элемента в игре. Начиная от сколов на гранях плит, заканчивая тем, как реализовано отрезание кусков от объектов. Но особенно интересным представляется его ряд статей под общим названием «Ад рендера» (Render Hell), в котором он подробно разбирает, как на уровне железа (да и программно тоже) происходит рендер 3D-объектов.

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

Ну что, начнем?
Всего голосов 34: ↑33 и ↓1+32
Комментарии13

Запросы GraphQL без подключения к сети с помощью Redux Offline и Apollo

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

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


А это… не просто.


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

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

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Дата рождения
Зарегистрирован
Активность