В тарелке — рецепты вкусных блюд

В тарелке

Помидоры с кинзой

Я наконец запустил собственный кулинарный проект: vtarelke.ru

Идея сайта зародилась в те далёкие времена, когда появился vkontakte и были модными домены на букву «v». Готовить я люблю и делаю это достаточно часто. Некоторые даже говорят, что достаточно неплохо. Хотелось записать и сохранить домашние рецепты для детей и внуков в одном месте. Чтобы не искать случайные записи в старом блокноте или не звонить маме, а достать телефон и быстро вспомнить сколько ложек муки класть в блинчики.

Втарелке

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

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

Втарелке Втарелке

Работа в портфолио:
http://sadesign.ru/portfolio/vtarelke/

Добавляйтесь в соцсетях, где вам удобно следить за новыми рецептами:
instagram.com/vtarelke/
vk.com/vtarelkeru
facebook.com/vtarelkeru
twitter.com/vtarelkeru

Мобильная версия ★ unicode-table.com на всех прилавках страны

Почему нужна мобильная версия

В последнее время Google всё настойчивей стал присылать уведомления: 

«Сайт не оптимизирован для мобильных устройств. У посетителей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.»

Проще говоря, сайт опустят глубоко вниз. Новый мобильный фактор, как говорит руководство Google, включён в алгоритм, чтобы пользователи получали более релевантные результаты, оптимизированные под мобильные устройства. Мы согласились. Тем более что стали терять пользователей, да и самим давно хотелось пользоваться UT с телефона.

Стали выбирать решение:

  1. Мобильное приложение;
  2. Отдельная мобильная версия на поддомене;
  3. Адаптивная вёрстка, подстраивающаяся под разрешение любого устройства.

Создавать мобильное приложение дорого и долго. А, главное, никак не решает проблему отсутствия мобильной версии сайта (а следовательно, низких показателей в поиске). Третий вариант рекомендуется Google как оптимальный.

Что делать с главной страницей

Пользоваться unicode-table.com на телефоне действительно было затруднительно. Мелко. Неудобно. Зависает. Мы решили отказаться от полной таблицы в мобильной версии. И сосредоточиться на удобном поиске. Функционал мобильной версии получался другим, поэтому адаптив бы нас не спас и мы сделали отдельный сайт на поддомене.

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

Главная страница unicode-table в телефонеМобильная версия unicode-table.com

Иконки символов на UT выводятся супер-шрифтом собственной сборки, который содержит весь Юникод. Он разбит на сотни маленьких файлов и сконвертирован для использования в вебе. Мы подгружаем его когда нужно, по блокам. На главной странице мы решили его отключить, чтобы пользователи смартфонов увидели привычные emoji, подставляемые операционной системой.

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

  1. Лого (для идентификации ресурса и возможности перейти на главную);
  2. Поле поиска. От кнопки «Найти» решено было отказаться;
  3. Основное меню в виде иконки гамбургера.

Технические моменты

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

Первая проблема с которой мы столкнулись на айфоне — никак получалось выделить ячейку с нужным символом. При удержании пальца на экране, выделение работало как угодно, только не так как нужно. Чаще всего выделялся целый блок (родительский <div>), а иногда произвольный набор символов. И лишь изредка выделялся тот самый, в который жмёшь. Помучившись несколько дней и попробовав разные варианты вёрстки вплоть до табличной, мы вспомнили, как работает выделение на сайтах с большими текстами: телефон стремится выделить абзац. Так родилось решение — заключить каждый символ в отдельный тег <p>. Телефон стал думать, что каждый символ — это самодостаточный абзац и выделять только его.

Выделение на телефонеВыделение на айфоне

Во-вторых, нужно было как-то объяснить Google, что m.unicode-table.com — это не новый сайт на поддомене, а всего лишь мобильная версия уже существующего сайта. Чтобы Google склеил новые мобильные страницы с уже существующими. Решение обнаружилось в справке Google.Developers

На обычной странице (http://www.example.com/page-1) нужно добавить следующий код:
<br />
&lt;link rel=&quot;alternate&quot; media=&quot;only screen and (max-width: 640px)&quot;<br />
      href=&quot;http://m.example.com/page-1&quot; &gt;<br />
а на странице для мобильных устройств (http://m.example.com/page-1) такие атрибуты:
<br />
&lt;link rel=&quot;canonical&quot; href=&quot;http://www.example.com/page-1&quot; &gt;<br />

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

При первом заходе на сайт с мобильного устройства, пользователь переадресуется на мобильную версию. Если после этого он возвращается по ссылке «Перейти к полной версии», это запоминается и автоматический переход больше не происходит. Определение устройства производится с помощью HTTP-заголовка User-Agent. Примеры определения устройства по этому заголовку для разных языков программирования можно увидеть на сайте: http://detectmobilebrowsers.com/

У нас получился отдельный домен для основной версии сайта, отдельный для мобильной версии и ещё один для статических файлов, таких как CSS и JS. Из-за политики безопасности браузеров это может нести некоторые проблемы, когда, например, не отображаются некоторые шрифты, подключаемые с соседнего поддомена. Это решается с помощью специального HTTP-заголовка, в котором перечисляются «доверяемые» домены:
Access-Control-Allow-Origin: http://one.example.com, http://two.example.comp

Почему unicode-table.com лучше, чем стандартные символьные клавиатуры на телефоне

1. Стандартные клавиатуры есть не у всех. На айфонах они появились только с iOS версии 8.3.
2. В стандартные клавиатуры входят только значки Emoji. А у нас в поиске все 70 000 символов.
3. UT — это отечественный продукт. Не содержит красителей, консервантов и ГМО.

m.unicode-table.com

 

Таблица символов Юникода

Прошёл ровно год с тех пор, как мы запустили unicode-table.com. За это время проект подрос, окреп, обрёл постоянную аудиторию и перевалил посещаемостью за 2500 человек в сутки.

Поиск стал работать гораздо лучше. Правда не настолько хорошо, как он будет работать в ближайшем будущем. Ежедневно нам поступает около 2 000 поисковых запросов. Десятка самых популярных на русском языке выглядит так:
1. Серп и молот
2. Стрелка
3. Телефон
4. Сердце
5. Звезда
6. Крест
7. Треугольник
8. Круг
9. А
10. Галочка

Серп и молот ☭ на первом месте, не потому, что наша аудитория — коммунисты, а потому, что он используется для примера в строке поиска. Англичане ищут практически тоже самое: «hammer and sickle», «arrow», «heart». А у немцев самый популярный запрос: «a». Немцы всегда были непонятными людьми.

Если же рассматривать запросы, которым пока не нашлось места в Юникоде, то самым популярным из них стал «хуй». На втором месте «рубль». Авторы стандарта предпочитают сотнями добавлять в него непонятные новые символы вроде love hotel: 🏩, но не символ рубля. Возможно это из-за того, что официально его пока никто не утверждал. Однако им пользуются тысячи людей ежедневно, не меньше, чем символами снеговика ⛄ или чашки кофе ☕, которые тоже никто не утверждал. 

Примерно с одинаковой настойчивостью люди также ищут и не находят «секс» и «палец». Стоит отдать должное воспитанности наших пользователей. Запрос «попа» по частоте превосходит «жопу».

Ещё у нас появились интересные наборы символов. Например, вот вам шахматные фигуры: ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟

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

Проект мы делаем в свободное от основной работы время, поэтому мы по-прежнему не реализовали большую часть наших задумок. Зато мы успели выложить интернационализацию на ГитХаб. Теперь любой желающий сможет принять участие в переводе проекта на свой язык. Присоединяйтесь ✌!

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

MyStupidDay или чем заняться на работе

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

Встречайте «Мой любимый день». Даст ответы на все ваши вопросы. Сайт создан с нуля за 2 дня.

MyStupidDay —  Следи за временем

От себя только добавлю, что сайт свёрстан на html5 практически без картинок: все тенюшки и градиенты сделаны на css. А если вы их не видите, то удалите ваш браузер и поставьте Файрфокс. В скором будущем: переводы на все мировые языки. Возможность отслеживать, сколько дней осталось до весны, до лета, до дня рождения, до отпуска, до зарплаты... Ждём ваших идей.

перевернутый текст — ɯɔʞǝɯ ņıqɯʎнdǝʚǝdǝu

˙˙˙ʎʚоvоʟ ɐн ʟон ɔ ǝɔʚ qɯиʚɐɯɔ ǝɯиƍoıv ǝжоɯ ıqʚ иvɔǝ

Недавно я задался вопросом, можно ли писать вверх ногами. Открой фотошоп, скажите вы мне, переверни текст на 180 градусов и вот тебе пожалуйста. Но хотелось, чтобы это была не картинка, а настоящий текст, который можно скопировать и отправить другу.
Так я открыл любопытный метод, уже реализованный до меня, правда только на английском. Принцип прост: в таблице символов юникода есть очень много символов для отображения самых разных языков. И некоторые эти символы очень похожи на наши буквы перевёрнутые вверх ногами. Оставалось лишь составить таблицу соответствия. Самые большие проблемы возникли с буквами «г», «з», «щ» и «ъ» . Но и их я кое-как решил. Для тех, кто хочет, можно попробовать перевернуть текст вверх ногами.