веб on Bizibah

Stupid RSS Reader

Mon, 01 Jan 0001 00:00:00 +0000

Мне надоели RSS-клиенты, которые лучше меня знают, что мне читать. Этот не знает ничего: он показывает ленты в том порядке, в каком они пришли, и больше не вмешивается. Философия проекта в одну строку — приложение ничего не навязывает, а только выполняет распоряжения.

Curve of Forgetting

Mon, 01 Jan 0001 00:00:00 +0000

Я никак не мог запомнить английское слово kind: каждый раз приходилось учить его значение заново. Задачу я решил как программист — написал для запоминания программу.

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

Список покупок

Mon, 01 Jan 0001 00:00:00 +0000

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

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

WaterMarkIt

Mon, 01 Jan 0001 00:00:00 +0000

Перетаскиваете картинки, сверху — свой знак в PNG, и на выходе получаете архив с готовыми файлами. Размер знака настраивается от 5 до 30 процентов ширины, угол выбирается любой из четырёх.

Заодно всё приводится к JPG: прозрачные места заливаются белым, а форматы вроде WEBP и AVIF перестают быть проблемой для тех, кому картинки нужно отправить.

Work Time

Mon, 01 Jan 0001 00:00:00 +0000

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

Есть режим только для чтения и несколько видов расписания. Ставится из npm, живёт на Angular 7 и бутстрапе — с тех пор я его не трогал, поэтому здесь он как архив.

Кешируем ответы API для фронтенда с помощью Yakbak

Fri, 18 Nov 2022 00:00:00 +0100

Представьте себе типичную ситуацию: вы frontend разработчик в обычный компании. После сытного обеда вы лениво скроллите Хабр и смотрите Ютуб. Вдруг в чат прилетает сообщение от девопсов: “Ребята, мы планируем сегодня вечером разгрузить мастер и перенести admission контроллер на ноду и чтобы два раза не вставать всем подам выделим 50 CPU. Завтра всё будет работать как обычно, но быстрее!”

Типичное использование Observable в Angular 4

Sun, 24 Sep 2017 00:00:00 +0200

Представляю вашему вниманию типичные варианты использования Observable объектов в компонентах и сервисах Angular 4.

Подписка на параметр роутера и мапинг на другой Observable

Задача: При открытии страницы example.com/#/users/42, по userId получить данные пользователя.

Решение: При инициализации компоненты UserDetailsComponent мы подписываемся на параметры роутера. То есть если userId будет меняться — будер срабатывать наша подписка. Используя полученный userId, мы из сервиса userService получаем Observable с данными пользователя.

Чего хотят координаторы доменных зон?

Tue, 18 Aug 2015 00:00:00 +0200

Для того, чтобы зарегистрировать домен, нужны следующие данные:

Владелец домена;
Администратор;
Технический контакт;
Контакт для счетов;
Группа nameserver’ов.

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

Итак, тебе нужна форма

Sun, 22 Mar 2015 00:00:00 +0100

Попытка немного формализовать создание полей формы:

SVG вариант.

Описание логики конкретных элементов делать не стал, там свои нюансы, тоже самое касается валидации.

linch.me — аннотации к картинкам

Fri, 25 Oct 2013 00:00:00 +0200

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

На название меня вдохновил Бизнес-линч Лебедева.

Отлинчеванные изображения выгледят примерно так:

Аналоги

www.pixtick.com — флеш.

www.marqueed.com — регистрация.

Прототипирование главной страницы статей flamp.ru

Mon, 01 Apr 2013 00:00:00 +0200

Задание

Переделать страницу «Статьи» (http://novosibirsk.flamp.ru/articles). Результат — один макет в PNG. Задача: вызвать у пользователя желание оставаться на этой странице как можно дольше.

Небольшой линч

(картинка кликабельна)

Поиск идеи — думаю над задачей и выписываю все что приходит в голову

Сделать прокрутку фоток при наведении на пост с течением времени, плиточный интерфейс? иерархический? Выводить главное и горячее справа. Показывать последние посты и комменты и прокручивать их. Указывать в них ссылку к тому, на что коммент был, показывать количество отчетов в час, рейтинг у статей. Показывать релевантные для статьи — другие статьи. Показывать релевантные отзывы? Теги, категории у постов? Популярные темы вниз, под «самые обсуждаемые» и «самые популярные». Добавить тему дня. Ачивки? Показывать начало текста из статьи. Сделать внешний вид по типу газеты с полосами и главной темой. Темы в других городах внизу? Облако тегов? К посту показывать два похожих в виде строчки. Несколько больших блоков: Главное, потом Новое (менее активное)? Самые просматриваемые (сегодня, вчера, неделю). Этим делятся? Необычная новость для привлечения внимания. Маленькие шутливые человечки в дизайне с подсказками и своим мнением? Нужно сделать так, чтобы материал был разнородный по всей длине страницы — тогда пользователю будет интересно ее прокручивать и просматривать, чтобы найти то, что его действительно заинтересует. Лишний раз тыкать мышкой никто не будет. Специальный вид блоков для фоторепортажей. Последний пост лучшего самого активного писателя постов, топ писателей. Выбор редакции.

Pick your color: какой цвет тебе к лицу

Sat, 08 Dec 2012 00:00:00 +0100

Проблема

Жена очень тщательно относится к выбору одежды. Цвет нарядов должен сочетаться с цветотипом внешности, чтобы подчеркнуть природные достоинства и скрыть недостатки. Правильно подобранный цвет освежает лицо, делает его ярким и выразительным. Поэтому пришла идея сделать сайт, на котором можно без особых усилий определить — какой цвет тебе «к лицу».

Сложные методы авторизации

Fri, 24 Aug 2012 00:00:00 +0200

Вместо предисловия

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

Много полей ввода для ввода email адреса

На форме авторизации находится некоторое число полей ввода привязанных к сетке.

Идея: искать по сайту средствами браузера

Fri, 11 May 2012 00:00:00 +0200

Идея

Искать средствами браузера не только по открытой странице сайта, но и по всему сайту.

Как это должно работать?

Человек нажимает Ctrl+F и вводит слово для поиска;
Браузер передает слово сайту;
Сайт внутренними механизмами* ищет то, что нужно пользователю и передает браузеру сформированный по определенным правилам xml-файл;
Данные выводятся в привычном для Человека виде.

*вместо внутренних механизмов, могут быть использован поиск гугла, яндекса или другого поисковика.

lancelist.0fees.net — поиск фриланс-работы через Твиттер

Tue, 06 Mar 2012 00:00:00 +0100

Основная идея

Для поиска и размещения удалённой работы достаточно пользоваться Твиттером!

Как появилась идея

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

Интерактивная диаграмма на CSS и HTML

Tue, 30 Aug 2011 00:00:00 +0200

:hover

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

Ничего сверхсложного и сверхсекретного в реализации не было, но она мне понравилась своей простотой и отсутствием javascript’a.

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