ОЭД
Обзор
На протяжении всей моей учебы я обнаружил, что вся информация, которую я изучаю в школе, доступна в Интернете, однако она не связана друг с другом, и невозможно ориентироваться, не зная содержания. Цель OED состоит в том, чтобы связать существующий контент в повествовательные цепочки, которые логически переведут людей из того места, где они находятся (с точки зрения навыков и знаний) в точке A, туда, где они хотят быть в точке B.
Каждый узел в дереве предназначен для инкапсуляции концепции. Каждый из них содержит уроки, чтобы научить вас этой концепции, и тесты, чтобы подтвердить ваше понимание концепции. Затем эти узлы визуально связываются вместе, при этом предварительные знания для каждого узла отображаются как связующее звено между ними. Это может дать визуальный эффект индикатора выполнения или дерева навыков из компьютерной игры при изучении практических навыков.
Проект сейчас работает на oed.wiki, и если кому-то нужна дополнительная информация о том, как использовать сайт (как ученику, так и преподавателю), я буду рад помочь.
Функции
Принудительное дерево d3.js. В основе идеи лежит визуализация дерева узлов. Это достигается с помощью принудительного макета d3.js и библиотек масштабирования. Мое интуитивное представление о расположении сил заключается в том, что есть сила, притягивающая узлы к центру экрана, а затем вторая сила, поддерживающая оптимальную длину расстояний между каждым набором узлов, и затем она устанавливается там, где эти две силы уравновешивают друг друга. Расшифровка документации раскладки сил d3 сама по себе является сложной задачей, и я сопротивляюсь желанию написать для себя новую раскладку сил, которая будет более интуитивной для меня.
окно поиска — окно поиска разработано как повторно используемый модуль для моих проектов. Мне очень нравятся окна поиска для навигации, потому что они позволяют легко и быстро отсортировать множество вариантов. Можно выполнять поиск по всем различным узлам, а страницы конфигурации пользовательских настроек отображаются вместе с этими результатами, согласованными по цвету, чтобы было легко определить разницу между ними. Его также можно настроить таким образом, чтобы несколько поисковых фраз приводили к одной и той же странице (например, обе страницы «ярлыков» и «помощь» приводили к одной и той же странице со списком пользовательских поисковых фраз). Когда поле поиска пусто, но сфокусировано, может отображаться другой контент, например следующий предлагаемый узел.
рекомендуемые узлы. Дизайн сайта во многом ориентирован на цель. Когда узел установлен в качестве цели, все предпосылки для этого узла в дереве становятся красными. Однако пользователю не нужно думать о том, с чего начать путь к своей цели, потому что следующий шаг рассчитывается за него. Основываясь на текущей цели, скрипт будет рекурсивно проверять, есть ли у пользователя все зависимости, чтобы понять его, и если нет, то он задаст тот же вопрос о своих зависимостях, зависимостях зависимостей и так далее. Это продолжается до тех пор, пока не встретится узел, который либо не имеет зависимостей, либо пользователь не выполнил их все, а затем предлагает пользователю завершить это, чтобы помочь достичь своей цели. Мне нравится такая рекурсивная структура, потому что она позволяет разрабатывать сложные системы с очень небольшим количеством кода.
Генератор форм. Это незаметная функция, которую никто не заметит, если я не укажу на нее, но это многоразовый модуль, который я могу использовать во многих своих проектах. Я хотел, чтобы форма ввода могла расширяться и сжиматься, позволяя одновременно вводить массивы данных переменного размера. Это утомительный компонент для проектирования снова и снова для структур данных различной формы, поэтому я создал объект, который при инициализации с помощью объекта рекурсивно создает форму одной и той же структуры. Затем объект может рекурсивно извлекать все поля формы независимо от того, сколько записей пользователь выбрал для формы.
Бесконечная тестовая лента – эта страница основана на модели freerice.com и предназначена в качестве отправной точки для новых пользователей сайта. Контент сайта охватывает широкий спектр уровней образования от начальной школы до бакалавриата, и каждый пользователь обнаружит, что начинает с уникального следа знаний. Первый вопрос генерируется случайным образом из всего пула узлов, а затем пул возможных следующих узлов затем делится на две части: узлы, которые зависят от тестируемого в данный момент узла, и узлы, от которых зависит тестируемый в данный момент узел. Если они отвечают правильно, то предполагается, что они могут справиться с более сложными вопросами, которые зависят от этого узла, но если они отвечают неправильно, предполагается, что им нужны более простые вопросы, которые исходят от узлов, от которых он зависит. Это повторяется до тех пор, пока не останется более сложных/легких вопросов, а затем он снова начинает выбирать вопросы из всего пула. Этот расчет выполняется, когда пользователь отвечает на вопрос, чтобы его можно было быстро загрузить после завершения.
анимация празднования — дерево узлов было моим первым опытом использования графики svg, а анимация празднования была моим первым проектом с использованием растровой графики холста. Изучение машиностроения означало, что физику для достижения эстетики, к которой я стремился, было довольно просто настроить, сложной частью было заставить анимацию плавно отображаться как на мобильных устройствах, так и на настольных компьютерах.
вводный тур по прокрутке. Меня очень вдохновляют такие проекты, как Учебник Josh Comeau’s Waveform, которые динамически обновляют контент на странице в зависимости от того, насколько далеко пользователь прокрутил страницу. Чтобы провести вводный тур по сайту, я использовал Intersection Observer API вместе со свойством css scroll-snap-type, чтобы убедиться, что существует 10 различных представлений, между которыми пользователь не может остановиться, и анимация, когда переход между каждым. Самым сложным было заставить все работать и выглядеть уместно как на ПК, так и на мобильных устройствах.
имитируемая навигация. Существуют библиотеки JavaScript, такие как React, которые позволяют всему веб-сайту функционировать как одна страница, что означает почти мгновенный переход между страницами, однако у меня аллергическая реакция на такие фреймворки и предпочитают работать с простым JavaScript как можно чаще. window.history.pushState() и некоторый простой анализ строки URL использовались для имитации перехода между «страницами», что было на удивление эффективно и даже позволяло использовать кнопки браузера «назад» и «вперед».
оповещения по электронной почте — поскольку сайт находится на ранней стадии, я хотел следить за тем, как он используется, поэтому я настроил очень простую функцию Firebase, которая отправляет мне электронное письмо с помощью nodemailer всякий раз, когда новый пользователь сайт добавлен. Из этого я узнал, что часто люди просматривают тур, но не углубляются в основное содержание сайта за стеной аутентификации.
Google Auth — вход и аутентификация обрабатываются Firebase. В настоящее время есть только два варианта входа в систему: электронная почта/пароль и Google OAuth.
Куда Отсюда
Есть некоторые вещи, которые можно сделать, чтобы сделать сайт более эффективным (например, остановить анимацию дерева узлов после того, как он работал некоторое время), но поправки, на которых я больше сосредоточен, снижают входной барьер. Например, предоставление людям возможности просматривать основной контент сайта без входа в систему, создание обучающих видеороликов, объясняющих функциональные возможности, и упрощение добавления узлов и тестов.
Новая вкладка Pomodoro Расширение Chrome
Обзор
Подобно тому, как занятой исполнитель часто требует, чтобы менеджер координировал его график, я хотел программу, которая могла бы отслеживать мой график для меня, чтобы я мог сосредоточиться на своей задаче, а не думать о том, что это за задача. должно быть. Основные принципы моего графика взяты из этого видео, в котором Лекс Фридман рассказывает о том, как его рабочий распорядок состоит из глубоко сосредоточенной работы в течение 4 часов, а затем перерыва.
Мой день разбит на различные «состояния» (работа, сон, отдых и т. д.), и таймеры используются для отслеживания того, когда переключаться между ними. При переходе между состояниями Dexpot и AutoHotKey используются для автоматического изменения рабочего стола, который у меня открыт, и с помощью VLC запускается новый список воспроизведения. Эта почти мгновенная смена звука и настроек очень эффективна для быстрого изменения моего настроения и свободного пространства.
Проект работает в частном порядке на моем собственном компьютере, но если есть интерес, я могу создать ветку oED, которая может научить вас навыкам создания чего-то эквивалентного. Это на удивление легко сделать, проблемы в основном возникают из-за того, что вы не знаете, где искать информацию.
Функции
спрашивать перед изменением состояния — таймеры Pomodoro уже существуют, однако они очень жесткие. Я хотел чего-то, что подтолкнуло бы меня к тому, что я должен делать, но не заставило бы меня. Таким образом, если придет вдохновение, я смогу оседлать эту волну.
всплывающее окно — было настроено всплывающее окно browser_action, которое позволяло мне увеличивать или уменьшать таймер любого режима, в котором я находился. С первого взгляда это позволяло видеть оставшуюся и прошедшую продолжительность. Также есть форма ввода, так что если у меня есть отвлекающая мысль (как отвлекающая от отдыха, так и отвлекающая от работы), то я могу записать ее туда, и мне она будет напоминать при следующем переходе между состояниями.
Блокировка в Твиттере. Если я хочу отвлечься, это произойдет в Твиттере. Существуют расширения Chrome, которые полностью блокируют сайты, но поскольку они очень двоичные (либо заблокированы, либо разблокированы), я часто заканчиваю тем, что отключаю их, и создается впечатление, что их вообще нет. Этот блок Twitter позволит мне просмотреть его в течение 2 минут, прежде чем я получу всплывающее окно, которое выбьет меня из него и напомнит мне о моей задаче. Это небольшое окно использования полезно, потому что часто в «рабочем режиме» мне нужно кратко сослаться на что-то в твиттере, и мне просто нужно не потеряться в бесконечной прокрутке.
интеграция с календарем. Я сделал этот проект как расширение для Chrome, чтобы оно могло заменить мой экран «Новая вкладка», и я мог напоминать себе о вещах каждый раз, когда открываю вкладку. Одна из вещей, о которых я больше всего хотел напомнить себе, — это мое предстоящее расписание, особенно следующие 36 часов. Я уже давно пользуюсь календарями Google с цветовой кодировкой, поэтому с первого взгляда знаю, что представляет каждый из цветов, и в течение дня я могу видеть срочные события, перемещающиеся по календарю влево. Чтобы макет для этого работал на экранах разного размера и с переменным количеством отображаемого времени, потребовалось немного математики, и у меня уже есть некоторые идеи о том, как его можно обновить, чтобы через перетаскиваемый интерфейс я мог видеть разные 36 часовой период, отличный от непосредственно поступающего.
новые события календаря. Поскольку я уже использовал Google Calendar API, я добавил конечную точку HTTPS, которая позволяла мне добавлять новые напоминания в качестве событий в мой календарь, просто введя напоминание в адресную строку Chrome с помощью кнопки функция пользовательских поисковых систем. Это действительно полезно для быстрой записи мимолетных идей.
sunrise API. Sunrise-Sunset API — мой любимый API из-за простоты запросов. В этом случае я использую его, чтобы поместить в свой календарь темные прямоугольники, чтобы с первого взгляда было не только ясно, когда происходят предстоящие события, но и где проходит граница между днем и ночью.
рандомизированные фоновые изображения — мне очень нравятся изображения Windows 10 Spotlight, поэтому я сохраняю лучшие из них в папки в зависимости от количества солнечного света на изображении. Используя API восхода-заката, я случайным образом выбираю изображение в зависимости от времени суток. Ночное изображение ночью, изображение сумерек в сумерках и т. д. Мне нравится эта функция, потому что я нахожу довольно резким получение дневного изображения ночью или наоборот.
Погода BOM. Официальный API BOM упрощает получение информации о погоде в городе, но неясно, как получить более точную информацию. Немного покопавшись, я нашел местный код, используемый для моего района, и обнаружил конечную точку API, которая позволяла мне получать информацию о погоде. Это видно при наведении курсора на календарь, поэтому, например, я могу увидеть, что у меня есть событие в 13:00, а затем увидеть прогнозируемую температуру в 13:00 одновременно.
VLC — я хочу, чтобы музыка запускалась и останавливалась в зависимости от того, в каком состоянии я сейчас нахожусь. Сначала я пытался найти способ управлять YouTube Music с помощью Puppeteer, однако они, похоже, имеют ограничения аутентификации, которые не позволяют Puppeteer вход в мой аккаунт. Я ненадолго задумался о написании собственного музыкального проигрывателя (как мы делали в университете, используя Ruby и библиотеку Gosu), пока не узнал, что VLC можно запускать и останавливать с помощью инструкций командной строки. Чтобы расширение Chrome запускало музыку, я настроил HTTPS-сервер на своем компьютере и запросил его у расширения. На основе HTTPS-запроса он будет использовать функцию exec() для закрытия старого сеанса VLC и запуска нового в новом каталоге.
Dexpot — используется для имитации нескольких рабочих столов в Windows. Я сразу влюбился, когда обнаружил его в начале этого года. Первоначально я использовал его, чтобы иметь отдельное пространство для каждого из моих предметов универа, чтобы они не конфликтовали друг с другом, но теперь я в основном использую его, чтобы иметь отдельные пространства для рабочего и нерабочего режимов. Гораздо легче сосредоточиться на каждом, когда есть такое четкое разграничение. Одна проблема заключается в том, что на первый взгляд не существует программного способа перехода между рабочими столами.
AutoHotKey — это отличный инструмент для Windows, позволяющий использовать грубую силу для решения многих проблем совместимости. Я написал сценарий .ahk, который будет выполняться тем же сервером, который запустил VLC, а затем использовал функцию execFile() для запуска этого сценария, имитируя нажатия кнопок, необходимые для запуска смены рабочего стола Dexpot.
Куда Отсюда
В своем приложении Note я сделал простой интерфейс всплывающей подсказки, и я планирую внедрить его в этот проект, чтобы было легче просматривать информацию о температуре и событиях. В настоящее время я использую HTML-свойство title, которое прекрасно, но не так отзывчиво, как хотелось бы.
Примечание
Обзор
Уже существуют сотни приложений для создания заметок, однако все они очень ограничены с точки зрения функциональности, особенно на мобильных устройствах. Моя версия разработана с вложенными ячейками, каждая из которых может эффективно работать как отдельный веб-сайт, так что каждая из них способна делать все, на что способен веб-сайт. Существует также простой пользовательский интерфейс, который позволяет программировать код в каждой ячейке на ходу.
Разрешение на выполнение вводимого пользователем кода представляет собой потенциальную уязвимость в системе безопасности, поэтому я подозреваю, что эта (удивительно простая в реализации) гибкость недоступна в продуктах для массового рынка, но я единственный человек, который имеет доступ к моему сайту. базу данных, так что это не то, о чем я беспокоюсь. Если есть интерес, я могу научить вас, как сделать свой собственный эквивалент, который будет доступен для вас лично.
Функции
база данных — каждая «ячейка» может существовать независимо, однако некоторые из них также имеют «родительские» ячейки. В случае, если есть родительская ячейка, она также хранит идентификатор div внутри своего родителя, и при визуализации с его родителем он будет расположен внутри этого div. Каждая ячейка также может иметь свой собственный собственный код HTML и CSS. «Название» элемента div хранится отдельно от «содержимого» элемента div, а заголовок — это то, что запрашивается при поиске.
панель поиска — я переработал тот же модуль панели поиска из проекта oED, потому что я думаю, что это делает пользовательский интерфейс очень чистым. Это отличная функция, особенно на мобильных устройствах, потому что можно очень быстро перейти к любой ячейке.
масштабирование — это функция, которой мне не хватало во многих других существующих приложениях для создания заметок. Возможность масштабирования (особенно масштабирование на мобильных устройствах) означает, что можно легко просматривать как большое изображение, так и мелкие детали. Я использовал функции d3 zoom() в контейнере div, в который будут помещены все корневые ячейки.
перетаскивание — до создания этого сайта я хранил свои заметки в Google Draw и хотел сохранить такое же ощущение гибкости, поэтому я добавил возможность перетаскивания ячеек в пустой div. Что хорошего в этой функции перетаскивания по сравнению с инструментами рисования, которые я использовал, так это то, что инструменты рисования требуют некоторой возни, чтобы макет выглядел красиво, но поскольку этот макет разработан программно, когда ячейка перетаскивается, она просто защелкивается. на место и выглядит так же идеально в своем новом доме, как и раньше.
Редактируемое красивое печатное содержимое. Чтобы HTML и CSS можно было редактировать на ходу, каждая ячейка имеет три представления. Обычный вид с примененным стилем, представление HTML и представление CSS. Представления HTML и CSS красиво печатаются с использованием библиотеки beautify.js, а затем помещаются в теги pre для сохранения их стиля. Теги pre помечены как «редактируемые», чтобы их содержимое можно было редактировать.
подсказка. Я часто хочу добавить всплывающие подсказки с пользовательским стилем и обнаруживаю, что доступные параметры, которые я видел, очень ограничены, поэтому я разработал это, чтобы сделать его более гибким, модульным вариантом, который будет соответствовать моему рабочему процессу. Он предназначен для работы как на мобильных устройствах, так и на настольных компьютерах, следует за курсором (только на настольных компьютерах) и всегда будет виден, даже если курсор находится у края экрана. Основная проблема с ним в настоящее время заключается в том, что он каким-то образом конфликтует с библиотекой LaTeX, которую я использую, поэтому я не могу применить его к символам LaTeX.
LaTeX. Будучи инженером, у меня есть много заметок, требующих формул и уравнений, и LaTeX — отличный инструмент для их визуализации. К сожалению, я мало что знаю о синтаксисе LaTeX, поэтому я использую функцию nerdamer.toTeX() для преобразования строки уравнения в синтаксис LaTeX, а затем использую функцию katex.renderToString() для рендеринга в виде LaTeX. Этот рабочий процесс прост для многих вещей, однако nerdamer.toTeX(), похоже, не преобразует матрицы, поэтому мне пришлось на данный момент собрать что-то быстрое и с ограниченными возможностями (может визуализировать только одну матрицу за раз).
инструмент рисования. Поскольку я переношу свои заметки из Google Draw, мне нужна возможность добавлять рисунки в свои заметки. Короче говоря, в процессе разработки этого я понял, что мне действительно нужен инструмент рисования svg, а не инструмент рисования растра. Однако я сделал очень забавный блокнот, который можно использовать онлайн здесь. Размер инструмента рисования можно изменить с помощью клавиш x и c. Яркость инструмента рисования можно изменить с помощью w и s. Оттенок можно изменить с помощью a и d, а насыщенность можно изменить с помощью q и e. Этот модифицированный макет wsad позволяет очень легко оставаться в потоке рисования, когда вы рисуете с помощью мыши, используя правую руку, и обновляете цвет, используя левую руку на клавиатуре. Цвета обновляются с помощью библиотеки chroma.js.
Куда Отсюда
Что мне нравится в этом дизайне, так это возможность полностью настроить каждую ячейку, однако я обнаружил, что есть некоторые общие шаблоны макета, в которые я обычно попадаю, и мне утомительно вводить эти функции повторно. Было бы хорошо, если бы было несколько шаблонов, из которых я мог бы выбирать при создании новой ячейки, а затем я мог бы настраивать их дальше.
Инструмент векторного рисования не только будет использовать меньше памяти, чем растровый, но и будет более масштабируемым. Вопрос в том, есть ли уже библиотека, которая упрощает векторное рисование на мобильных устройствах.
Каждая ячейка имеет собственный HTML и CSS, но я еще не реализовал JavaScript. Было бы здорово, если бы ячейки могли содержать модульный исполняемый код, аналогичный блокнотам Jupyter, таким как Google Colab.
Признание еды
Обзор
Это был проект группы IoT uni, целью которого было использование машинного обучения, датчиков и облачных сервисов для подключения нескольких устройств. Это работает следующим образом: каждый пользователь может получить доступ к веб-сайту, веб-сайт запросит использование камеры. Затем пользователь может сфотографировать различные продукты питания, которые ему доступны. Эти фотографии будут пропущены через AWS Rekognition, чтобы определить, какая еда изображена на снимке. Список продуктов, имеющихся в наличии (в дополнение к некоторым основным продуктам питания, которые, как предполагается, есть в наличии) затем сравнивается с базой данных рецептов, чтобы предложить некоторые рецепты, которые можно приготовить с использованием продуктов, находящихся под рукой.
Функции
socket.io — это использовалось для связи между браузером и сервером, потому что в недавнем проекте я узнал, как легко общаться между браузером и сервером node.js, работающим на Raspberry Pi (как показано на видео ниже). Возможно, был более простой способ отправить изображение, но способ, которым я настроил его для этого проекта, заключался в том, чтобы скопировать пиксели из видео на холст, а затем преобразовать холст .toDataURL() и отправить этот URL-адрес данных.
зачистка данных — база данных рецептов, которые можно было выбрать, была извлечена с веб-сайта Bon Appetit с помощью Puppeteer. Самым сложным в этом процессе было закрытие всплывающих окон в макете и работа со списком рецептов, который, казалось, был виден только при нажатии «читать дальше», чтобы загрузить еще пять рецептов за раз на одной очень длинной странице. После работы в течение ночи программа собрала около 1000 рецептов, каждый из которых содержал странные ингредиенты, из-за чего было очень сложно найти совпадение с ингредиентами, которые AWS смог предсказать на основе фотографий.
HTTPS — для доступа к камере требуется подключение HTTPS и, следовательно, сертификат X.509. В итоге я купил один, однако они доступны бесплатно в Lets Encrypt при условии, что вы можете подтвердить право собственности на домен.
Змеиная игра
Обзор
Это был проект для универа. Нам дали компоненты схемы, их соответствующие спецификации и правила игры (змея становится больше и быстрее при изменении направления) и очень немногое другое. Игровая плата со светодиодами и кнопками обменивалась данными с помощью низкоуровневого протокола I2C, который мы написали сами. Состояние кнопок игрового поля опрашивалось периодически с помощью прерываний каждые 2 миллисекунды и при этом ряды светодиодов устанавливались одновременно с помощью мультиплексирования.
Музыкальный проигрыватель
Обзор
Это был проект для универа. Песня ужасная, но что меня в ней волнует, так это то, что зуммер — это просто стандартный зуммер, который, как я полагаю, способен воспроизводить только один тон, однако, включая и выключая напряжение на разных частотах, мы можем добиться разных результатов. Примечания. Частота переключения настолько высока, что это хорошее напоминание о том, на что способны компьютеры.
Звуковая последовательность запускается, когда датчик освещенности падает ниже порогового значения.
Графики базового дохода
Обзор
Я был сторонником базового дохода в течение нескольких лет, и за это время я слышал много оправданий для того, чтобы не внедрять базовый доход, но наиболее частым является идея о том, что денег не хватает.
Планируя эту статью, я понял, что некоторые концепции лучше понять графически, поэтому я нарисовал и анимировал для нее эту графику. Анимации довольно простые, и если бы мне пришлось делать это снова, я бы использовал векторные пути и более программную синхронизацию для анимации, чтобы можно было создавать более сложные дизайны. Одной из больших проблем было спроектировать все так, чтобы все работало относительно, чтобы можно было изменять размер графики, не портя анимацию.
Может быть, это потому, что правительство удвоило социальные выплаты в результате пандемии Covid в этом году, или, может быть, это из-за этой статьи, но я не слышал, чтобы кто-нибудь спрашивал, как платить за это, с тех пор как эта статья вышла.
Полностью статью можно найти здесь.
Шитье
Обзор
Я купил новое утяжеленное одеяло, и у чехла в углу есть хорошие завязки, которые соединяются с одеялом, так что они всегда совпадают. Новая обложка хороша, но ей не хватает живописного очарования моей старой, поэтому я пересадил их вместе.
Хотя это выглядит не так уж и много, я не пользовался швейной машиной со старшей школы, и большой громоздкий чехол было нелегко продеть через швейную машину. Это было особенно сложно, учитывая, что требовалось несколько десятков булавок, чтобы выровнять все стороны и не допустить случайного сшивания двух деталей, которые не должны были сшиваться. Это означало, что он был не только громоздким, но и острым.
Я собирался оставить шов внутри, но в пылу ссоры забыл об этом. К счастью, вживую его едва видно, и большую часть времени я рядом с ним сплю.
Ардуино RFID
Обзор
Полный проект здесь не виден, но в течение нескольких месяцев у меня был будильник на базе Raspberry Pi, который использовал API восхода-заката, чтобы будить меня на рассвете каждый день. Чтобы выключить сигнализацию, мне пришлось приложить RFID-брелок к считывателю. Это был непрактичный случай для RFID, и в итоге я заменил его простым кнопочным выключателем, но было интересно, насколько легко с ним работать.
