Фокин твиттер

7.XI.2015 23:00

Задолбался я изыскивать возможность подогнать встраиваемые твиты под себя. Под дизайн. А нужно-то всего ничего. Задать размер, подходящий фон, наследование цветов и поведения ссылок (хотя бы цветов), чтобы твиттеровое добро на фоне остального блогового (или любого иного) контента выделялось умеренно.

Схема встраивания твита закрыта от прямого вмешательства: когда пользователь получает код, он содержит всего лишь несколько ссылок на твит и дату да текст самого твита, заключенные в простые теги цитирования =blockquote=. А в хвосте лепится строчка со скриптом. В котором и зарыта собака. Он-то и формирует стили, подгружает ссылки, картинки, видео, сигдечки... и прочее необходимое современному читателю-почитателю.

Несть числа способам, которыми я пытался сегодня это дело хакнуть. БЕСПЕРСПЕКТИВНЯК.

Сильнее всего меня бесит ограниченный размер по ширине — 520px. Ну и фон, ярко белый или ярко черный. Даже двух-трех полутонов нет. Это же свинство.

По вертикали зато размахивается без зазрения. Раньше мне казалось, что существовало некоторое схлопывание, высокая картинка прикрывалась до клика или как-то так.

Зато твиттерлайны кастомизируются более тщательно. Точнее в широких пределах.

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

Боде Миллер уходит в отрыв

6.XI.2015 15:00

Пока горнолыжный мир с напряжением ожидает новых стартов, потягивая железки и допинг коньяк фокин рэд бул, Бодник развлекается. Шутка конечно, великий Боде отрабатывает контракт с новой инвентарной компанией. Насколько агрессивной будет политика продвижения марки BOMBER на рынок — посмотрим. А пока очень неудачный пример для подрастающего поколения: Боде Миллер человек и пароход образец и кумир довольно рискованно спускается БЕЗ ШЛЕМА! Горные лыжи — это вам не семки на лавке. И с лавки можно навернуться, а уж про склон и говорить нечего, печальных примеров масса... А еще впечатлительный народ может косо посмотреть на непримерного семьянина. Шампаньське й эскэйп на геликоптэри с какой-то левой чучундрой при восхитительной супруге, как там биш ее... Морган. Видимо, такое маркетинговое позиционирование, без альпинизированной субурбии, целомудренных закольцованных обжиманий, детишек и золотистых ретриверов в снежных блестках. Дівки — білі та чорні. Закос под Джеймса нашего Бонда. Бодн.

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

Менюху в бок я приделал. (Тык в полосочки в нижнем углу). Гы, файл со стилями CSS разросся до 120 кб. Это кстати терпимо, потому что я туда воткнул почти всю оформительскую графику (фончики в том числе), удобно в чем: оно подгружается сразу одним запросом, и не нужно ждать, пока вся мелкая сволочь зальется из сервака в браузер.

Меню пока чисто экспериментальное, я даже его толком ничем не заполнил. Просто сама идея мне нравится, на экране только контент, а дополнительно-информационные панели являются по запросу. Оформление тоже пока не устаканилось, поначалу я сделал прозрачный фон, с теневыми контурами, но потом решил согласовать внешность с верхней панелью. К слову, кое-какие вещи браузеры отображают по разному, и вид этой страницы мне больше нравится в хромоподобных. В них все выглядит именно так, как я задумывал. А мозиллы неаккуратно себя ведут, например, с той же тенью. Хотя все терпимо.

Выезд меню, опять же, на свойстве transition; при создании всего обжэкта использовался минимум джава-скрипта. Сейчас ведь обязательно нужно, чтобы на сайте что-то шевелилось, драматически меняло форму и окрас, растворялось и расплывалось, и смывалось, и бегало, и прыгало, и глёгг варило ... Это все реализуется большим или меньшим количеством знаков, букв, цифр и алкоголя. Нравится ли это мне, вопрос сложный. А что делать? ТРЕНД.

Этап в Леви отменен

5.XI.2015 19:11

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

Чем заниматься в отсутствие соревнований, как не натфилировать десигн? Как-то я втянулся, и страничка из простой заглушки разрослась в довольно уютный бло. Довел я ширину полезной части почти до стандарта своего — 770px по горизонтали. Это серьезно. Если придумаю способ, точнее место, куда прикрутить сайдбар, явно буду пилить данную шкуру в сторону вордпресса. Как-то оно само получилось. Мне нравится.

Понятное дело, что без движка уже никуда. Хотя обойтись можно. Чему данная страница примером служит.

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

Список сделанного: кнопка прокрутки не только вверх, но и вниз. Вариант промежуточный, потому что хочется более мудреную, например, скролл по якорям, которые есть у каждой заметки в виде id= например "05-11-15_03-37". Заморочка еще та. Но и готовые решение искать, а потом допиливать, уф... Можно и обойтись. Существующие кнопки прокручивают страницы до упора. Удобно, ибо старые записи традиционно лежат внизу.

Гармошки и спойлеры: см. предыдущую запись. Милая и полезная вешь. Я очень доволен. Дальше — немного поменял цветовое оформление, добавил фоны, чтобы глаз не скользил. Ну, вроде, тоже полезно. Для общего впечатления. Ну а баловство — логотип в правом углу, который ведет на блог, но силится спрятаться от вашего курсора и накалиться до цвета горячих звезд. Эффект от transition вроде работает и в мозиллах, и вебкитах. Что же касается IE, если вы вверху увидите полосочку с предупреждением (спасибо за держание скрипта phpbbex.com), меняйте браузер... Ничего хорошенького... Гхм. Современный контент и старые браузеры — это мезальянс. Ну, ладно, мои записи можно целиком прочитать и в IE6, оформление все улетит, но то такое дело... Но ведь есть ресурсы... Эээ... Впрочем, каждому свое.

Если продолжить тему браузеров, то я тут на днях опробовал потенциально весьма отличный. Называется Vivaldi. Дело не в названии тире фамилии одного из любимейших моих композиторов. Дело в мимикрировании под один из любимейших моих браузеров — классическую «Оперу». Я очень долгое время пользовался тем еще норвежским продуктом, снискавшим популярность на наших пространствах — и не на пустом месте. Опера действительно была классная. И были времена, когда ее приходилось крякать... Теперь же существует Opera, являющаяся очередным клоном ГуглоХрома, имя которым легион. И яндексы, и китаяндексы... Я лично доверяю в этом зверинце только бр. Iron. Но рекомендации хороших людей делают дело. Я посмотрел Вивальди и проникся. Дело у разрабов еще не дошло до беты, но уже контуры былого величия проглядывают. Если не бросят и допилят, я не то, чтобы пересяду, но буду активно пользоваться. Ибо удобно. Уже. Главное, чтобы хватило терпения, а также разума не скатываться и гнуть свою линию. Старая Опера — рулезз.

Аккордеон

5.XI.2015 03:37

Тяжело в деревне без... баяна. Давным-давно хотел внедрить на блоги вот такую шутку, да все руки не доходили. Есть такой музыкальный инструмент — гармошка, который в заморских краях называется аккордеон. Accordion. И ныне сие название более известно в сфере веб-дизайна, чем общекультурном. Хотя возможно я и ошибаюсь.

Кому-то надо объяснять принцип? Ну ладно, раз слово взял.

Бывают статьи длинные. И чтобы простыня не достигала дна Марианской впадины, применяют визуальное скрытие текста. Иногда подобный эффект называется спойлером, но тут немного другое. Это гармошка, несколько пунктов или абзацев, раскрываемых и закрываемых попеременно, один за другим. Один остается открытым всегда (можно и все сделать закрытыми и не закрывающимися).

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

В чем цимес данного конкретного аккордеона? Он сделан без применения джава-скрипта, чистый CSS.

Да потому что я плотно сейчас работаю с главным блогом, в плане его модернизации, он установлен у меня на локальном сервере и чистится, пилится, полируется, а в сети лежит по сути старая версия, которую я трогать не хочу, чтобы не плодить сущности (потом разом заброшу на реальный хостинг базу и шкуру). А этот блог «зимний» работает, чист от влияния движка и кастомизабелен в любое время.

Чтобы от основной темы не отдаляться да проверить стили, вставлю картинку. К примеру...

ski, sport, image

Янне Ахонен, которого я поначалу не признал. Сидит какой-то татуированный мужик кислой наружности. А присмотрелся... Вот так истирается облик великих в памяти народной.

Тут я тестирую то, что хочу внедрить на основном блоге. Задумок масса, что-то из них точно реализуется.

Вот такая вот красота, малята.

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

Нет никаких преград для неодобренного самоцензурой и настоящих спойлеров. Главное со счета не сбиться. С оформлением можно еще поколдовать.

Внешние ссылки в лайтбоксе и прочее

2.XI.2015 22:45

Самая мощная свистелка, какую я внедрял на своих блогах. По-моему так. Решил поинтересоваться, каково это — открывать мультимедиа в «модальном окне», не заставляя посетителя переходить на сторонний сервер или просто другую страницу, уходя от материала. Это не ново. Но эффектно. Как оказалось.

Да, все построено на javascript, причем с задействованием альтернативы широкоизвестной библиотетке jQuery. Zepto. Весит мало. Интересно же было. Меньше размер, проще в изучении, легче в подгрузке. Чего?

Начнем с примеров. Кроп фотки Терезы Йохауг, лежащей, гм, на сервере норвежском. Смело тыкайте левой кнопкой (ежели у вас джаваскрипт не отключен):

ski, sport, image

Таким образом можно ссылаться не только на фотки. Особо мне понравилось встраивать видео с ютуба.

==|Терезе Йохауг занимается акробатикой. Известная серия от Sports-HD Production|==

Полезно, чтобы не забивать заметку множеством встроенных роликов. Кто захочет, тот посмотрит.

Можно встроить гуглокарту. Далшбыда, Норвегия — о которой я говорил чуть раньше (там же и другое видео с Терезой, открываемое в).

Vimeo. C Вимео у меня лично возникли трудности. Воспроизводиться видео не хочет, опять эти повсеместные перемены кодеков и отмены флеша. Нафига? Счастливцы могут увидеть короткий клип с Терезой, которая является еще и дизайнером своей линии одежды... Гешефтное видео. Ну и ладно.

Tumblr. Несколько неаккуратно, но терпимо. Хотя проще дать ссылку на саму картинку.

Наверняка можно втыкать твиттер и прочие сервисы, выдающие по своим ссылкам iframe. Но с меня хватит видео и картинок. Неплохо в поле вгружаются и страницы. См. дальше.

Большая благодарность автору за отличную идею. И отдельная благодарность несравненной Терезе Йохауг.