«У меня была дислексия еще до того, как кто-то узнал, что такое дислексия. Меня называли «медленным». Это ужасное чувство — думать о себе как о «медленном» — это ужасно». — Роберт Бентон
Почему ?
Посмотрите на приведенную выше цитату и примите во внимание тот факт, что, по оценкам, каждый десятый человек страдает дислексией. У меня дислексия, и я много говорил о программировании и дислексии, но когда я пришел на Teamwork.com, многие коды были для меня новыми, поэтому я создал небольшое расширение для Chrome, чтобы снова начать работать с кодом. они используют здесь, наряду с помощью людям с дислексией.
15 января 2015 года я создал следующее приложение Google Chrome под названием Helperbird. Он делает следующее:
Helper Bird — это расширение, которое заменяет все шрифты на любой веб-странице отмеченным наградами шрифтом «OpenDyslexic и делает страницу более удобной для чтения. Вы можете включать и выключать его в любое время. Помощь людям с дислексией. Теперь вы можете изменить размер шрифта!»
Шрифт
Он использует шрифт OpenDyslexic с открытым исходным кодом, который был создан, чтобы помочь с некоторыми симптомами дислексии. Буквы имеют утяжеленные нижние части для указания направления. Вы можете быстро определить, какая часть буквы опущена, что помогает распознать правильную букву, а иногда помогает удержать мозг от вращения букв. Последовательно утяжеленные нижние части также могут помочь усилить строку текста. Уникальная форма каждой буквы может помочь избежать путаницы при перелистывании и замене. Как вы можете видеть ниже.
Проблема
Одна из проблем с существующими приложениями, подобными этому, в магазине Chrome заключается в том, что вы не можете отключить шрифт, полезная функция, если семья использует общий компьютер и не хочет использовать шрифт. Итак, я добавил код, чтобы исправить это и упростить использование, но с сохранением логической переменной в локальном хранилище, независимо от того, включена она или выключена.
Я запустил его в январе 2015 года, а затем забыл о нем до августа 2015 года, когда у него было более 2000 пользователей, и я был в шоке.
Постройте его, и они придут
Он построен с использованием следующих инструментов: Angular JS и Material Bootstrap, а также Gulp, который я изучил, работая в команде.
Он настроен так, что у меня есть файл package.json:
{
“name”: “helperbird”,
“version”: “1.1.1”,
“manifest_version”: 2,
“description”: “Format pages using the OpenDyslexic font”,
“browser_action”: {
“default_popup”: “index.html”
},
“permissions”: [“tabs”, “*://*/*”, “http://*/*", “https://*/*", “<all_urls>”, “storage”],
“content_scripts”: [{
“matches”: [“*://*/*”, “file:///*/*”],
“exclude_globs”: [“*://docs.google.com/*”],
“js”: [“assets/dist/js/system.min.js”],
“all_frames”: true
}],
“web_accessible_resources”: [“/assets/dist/fonts/OpenDyslexic-Bold.otf”, “/assets/dist/fonts/OpenDyslexic-BoldItalic.otf”, “/assets/dist/fonts/OpenDyslexic-Italic.otf”, “/assets/dist/fonts/OpenDyslexic-Regular.otf”, “/assets/dist/css/opendyslexic/accesibility.min.css”]
}
Строка с «assets/dist/js/system.min.js» позволяет мне вызывать функции внутри этого system.min.js для каждой вкладки, где я запрашиваю разрешения, связанные с каждой вкладкой, которая есть у пользователя, и локальное хранилище в Chrome для хранения настройки.
Это значит, что я могу изменить шрифт только на той вкладке, которую хочет пользователь, и отключить/включить ее на других.
Итак, изучив основные функции файлов system.min.js:
function turnOffOpenDyslexic() {
if (document.getElementById(“opendyslexic”) != null) {
elem = document.getElementById(“opendyslexic”);
elem.parentNode.removeChild(elem);
(document.head || document.documentElement).removeChild(elem);
reloadPage();
}
}
Это вводит следующий CSS (его фрагмент) в текущую веб-страницу, которую просматривает пользователь, переопределяет шрифт и перезагружает страницу.
@font-face { font-family: “opendyslexicmono”; src: url(‘chrome-extension://__MSG_@@extension_id__/assets/dist/fonts/OpenDyslexicMono-Regular.otf’); font-weight: normal; font-style: normal; } html { color: rgb(25, 26, 66); font-family: opendyslexic; } p:nth-child(even), li:nth-child(even) { opacity: background-color: rgba(0, 0, 0, 0.03); } p:hover, li:hover { background-color: rgba(0, 0, 0, 0.09) !important; } p, a, h1, h2, h3, h4, h5, input, ul, span, font, strong { font-family: opendyslexic; line-height: 150%; } * { font-family: opendyslexic; } pre, code { font-family: opendyslexicmono !important; line-height: 150%; } .ace_text-input, .prettyprint { font-family: opendyslexicmono !important; } .original-tweet { background-color: #fff !important; } input, textarea { font-family: opendyslexic !important; }
Я делаю то же самое для изменения размера шрифта; это позволяет пользователю вводить размер шрифта и изменять его при нажатии клавиши. Это делает то же самое, что и изменение стиля шрифта.
function turnOnChangeFont(fontSize) {
style = document.createElement(‘style’);
style.setAttribute(“id”, “helperColor”);
style.innerHTML = “p,span,li,a{font-size:” + fontSize + “px!important;}”;
(document.head || document.documentElement).appendChild(style);
}
В целом код простой, но эффективный. Эффект, который это произвело, и сообщения, которые я получил от пользователей, сделали это немного забавным для 24-часового испытания, но оказалось, что жизнь изменилась, в какой-то дрянной манере.
Реакция
Это стало немного странно после того, как меня попросили пригласить поработать над официальным приложением opendyslexic (о существовании которого я не знал) после того, как мою работу заметили. Я, конечно, так и сделал, так как в то время 17 000 человек использовали его с очень негативными отзывами, и люди кричали о том, что я сделал с птицей-помощником.
Поэтому я переделал приложение, используя gulp и Angular JS, так как его не трогали с 2013 года. Отзывы и реакция пользователей были важными, так как отзывы хвалили новые функции, дизайн приложения и исправления ошибок, которые я сделал, за 5 недель пользовательская база выросла. до 26 305. Это привлекло ко мне много внимания со стороны разных компаний и писем от людей, которые считали меня значительным улучшением приложения и добавлением кнопки включения/выключения ❤
Пример до и после можно посмотреть здесь.
До
После
Надеюсь, вам было интересно прочитать, как я разработал расширение для Chrome opendyslexic font и как разные шрифты помогают людям с дислексией.
Смело отправляйте пулл-реквест на птичку-помощника или скачайте из магазина Chrome. Расширение opendyslexic для Chrome и репозиторий находятся здесь.
Помните, что если вы хотите написать сообщение о машинном отделении для командной работы, загляните на нашу страницу вакансий. Вы можете проверить меня в twitter или на github.
Первоначально опубликовано на engineroom.teamwork.com.
