Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Проекты

Наносхема московского метро для Эпл-часов

У меня ещё одна схема московского метро — Наносхема 2.0. Ну, что поделаешь.

Вторая версия наносхемы адаптирована для Эпл-часов:

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

Чтобы установить, надо сохранить картинку на Айфон и включить ей сердечко:

Наносхема метро для часов

Сильно нажать на часы, чтобы вылезла настройка циферблата, добавить циферблат «Фото», выбрав в нём эту картинку, потом снова зайти в настройку циферблата, переместить часы вниз и настроить компликейшены на свой вкус:

Наносхема метро для часов

Снизу ещё остаётся строчка для большого комликейшена типа следующей встречи или играющей песни.

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

24 марта   Вотч   метро   московское метро   проекты   релиз

Интерфейс Мимика 2.0

Веб-приложения состоят из фронтенда (того, что работает у пользователя в браузере) и бэкенда (того, что происходит на сервере). Эти части разрабатывают с разной скоростью. Если при создании браузерной части сервер недоступен, разработчик обычно сильно ограничен.

Я сделал интерфейс для второй версии Мимика — инструмента веб-разработчика для имитации ответов сервера. Можно работать, как будто сервер доступен. Настроить поддельный ответ («мок») очень легко. Например, вы хотите сделать вид, что сервер ответил строчкой джейсона:

Можно настроить навороченные моки, с хитрыми ХТТП-заголовками, задержкой и чем угодно ещё:

Кайф Мимика в том, что не нужно даже поднимать локальный сервер или менять урлы в своём приложении. Он работает прямо с тем, что есть, прямо в браузере. Но даже расширения браузера не нужно, он подключается просто как скрипт к приложению.

Подробнее об интерфейсе — на странице проекта.

9 января   Екатеринбург   проекты   релиз   транспорт

Новости сайта: январь 2017

За последний месяц на моём сайте случилось два важных обновления.

Новый дизайн

Во-первых, теперь у меня новое двухэтажное меню. В первом этаже всё как раньше: проекты, музыка, мир и блог. А во втором теперь может появиться что угодно, что полезно в данном контексте. В блоге я вынес туда любимые темы, в «Мире» — любимые города. А в «Проектах» там могут появляться проекты, связанные с текущим. Например, если зайти в типографскую раскладку, там появится переключалка «Для тех, кто пишет»:

Новости сайта — 2017

А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:

Новости сайта — 2017

Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:

Новости сайта — 2017

Туда же идут всякие подразделы с общим заголовком.

Всякие такие провязки делаются автоматически — см. как работает мой сайт.

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

Новости сайта — 2017

Картинки в рассказах о поездках, в блоге и в некоторых работах и раньше умели резиниться. Но меню всё время мешало: распирало и ломало страницу. Новое меню заставило меня прошерстить остальной сайт, поэтому теперь весь «Мир», почти весь блог и большинство проектов влезают на телефоне. Я сделал себе всяких инструментов для быстрого обеспечения влезаемости чего угодно. Некоторые страницы, конечно, выглядят не так, как выглядели бы, если бы их изначально верстали для телефона, но, по крайней мере, влезают.

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

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

Новости сайта — 2017

Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».

А ещё я прикрутил новые шрифты. Ну, вы видели.

Новый поиск по блогу

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

Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:

Новости сайта — 2017

Выдача поиска тоже переделалась: теперь вместо полных заметок там кусочки найденного текста и картинки пачкой, потому что по ним заметку легко узнать. Как видите по заметке «Трезор и Бергхайн», оно умеет вытаскивать и кадры видосов, и обозначать, что в заметке есть аудио.

Круче всего, когда в заметке много картинок. «Автобан германия»:

Новости сайта — 2017

Пока там всё равно много что работает не так, как надо. Но уже сильно лучше, чем было, поэтому новый поиск я выкатил.

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

5 января   веб-дизайн   дизайн   проекты   этот сайт

Сейви теперь с караоке

Вышла новая версия Сейви — 1.1, где добавлена функция «Караоке»:

Сейви с караоке

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

Мы распознаём до минуты речи, но аудиозапись теперь не ограничена по времени. Если нажать на звуковую волну, начинается воспроизведение. Экран, когда вы удалили все записи, выглядит лучше. И всякие мелкие улучшения.

Бонус-трек — смешная картинка Саши Карпинского (интересно, многие ли поймут шутку):

Сейви: теперь питание компьютера можно отключить

Большая жёлтая кнопка:

Скачать в Апсторе бесплатно

Бесплатно будет не всегда.

Сейви: скажи и сохрани

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

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

Поэтому мы с разработчиком Михаилом Рубановым сделали «Сейви» — нормальный сохранятор сказанного. Работает так: сразу при запуске начинает записывать аудио и распознавать одновременно. Когда запись закончена, подчёркивает слова, в которых сомневается.

Сейви: скажи и сохрани

В слова можно тыкать и менять на альтернативные. Если совсем не то, запись можно переслушать. Чтобы не смущать окружающих, поднесите телефон к уху — тогда будет играть в ухо.

Сейви: скажи и сохрани

Если вы говорили не на том языке, на котором оно распознавало, язык можно переключить и после — оно перераспознает уже сделанную аудиозапись. Потом всё можно экспортнуть в Ноутс или что вам больше нравится.

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

А вот и кнопка, ради которой вы все здесь собрались:

Скачать в Апсторе бесплатно

Пока бесплатно, а там видно будет.

2016   продукты   проекты   релиз   Сейви

Техническое обновление сайта Зерулс

Летом я звал помочь мне с сайтом Зерулс. От разработчиков отозвался Виктор Корейша.

Исправили кучу багов и сделали нормальные урлы у результатов поиска. Раньше я использовал диезы для них, а теперь Виктор прикрутил нормальное Хистори АПИ:

Было интересно разобраться, наконец, с Хистори АПИ. Раньше как-то не концентрировал на нём своё внимание. Оказывается, нельзя просто так посмотреть историю пользователя, даже по нашему сайту, из соображений безопасности. Хотя переходить можно и на «предыдущее» состояние и на «5 состояний назад», даже на «третье состояние с конца».

Зато можно самостоятельно записывать сколько угодно этих состояний. При этом само состояние не стандартизовано, а просто джаваскрипт-объект, в который что хочешь, то и записывай. Ну и использовать можно по-разному.

Всё про двойное н:

Что-то там про деепричастные обороты:

Как и раньше, можно перейти напрямую в любой параграф вот так:

При этом сработает редирект вот сюда:

И тут-то диез как раз по делу стоит, потому что это якорь внутри страницы.

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

А ещё теперь когда из поля поиска стираешь запрос, страница возвращается в исходное состояние.

До внешнего вида пока не добрались.

Регулярно проверяйтесь на сайте Зерулс.ру.

2016   Зерулс   продукты   проекты   релиз

Пятая версия схемы московского метро

В заметке о выпуске четвёртой версии схемы метро я рассказал об истории моей работы над схемами московского метро. Если ещё не читали, прочитайте сначала.

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

Оказалось, что да. Пятая версия схемы метро:

При одинаковом размере плаката текст получается почти на 35% крупнее, чем на официальной схеме:

Пятая версия схемы московского метро

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

Посмотрите страницу схемы у меня в портфолио.

Процесс перехода от третьей к четвёртой версии схемы метро

Собрал видео, показывающее, как третья версия схемы метро превращалась в четвёртую:



Когда видео уже загрузилось (16 МБ), можно двигать туда-сюда.

0:00 Поиски внутри кольца и слева
0:02 Кегль
0:05 Кегль
0:08 Арбатские-Смоленские
0:10 Кольцо меньше
0:14 Жёлтая линия слева
0:15 Уплотнение сетки
0:16 Рассинхронизация верхней и нижней сеток
0:22 Эксперименты со скруглениями
0:24 Взрывы слева
0:27 Подготовка севера к добавлению монорельса
0:33 Бутовская, монорельс
0:34 Равномерность внутри кольца
0:36 Очень сложно поставить Третьяковскую-Новокузнецкую нормально
0:42 Пересадки крупнее
0:44 Кегль
0:47 Кегль
0:48 Синхронизация верхней и нижней сеток
0:54 ПТ Санс Метро
0:57 Пересадки красивее
0:59 Настройка отступов
1:05 Вёрстка...
2016   видео   московское метро   проекты
Ctrl + ↓ Ранее