Гвозди фронтенда

Волнения в виде негодований

Браузер будущего: дёготь в мёде

29 ноября 2014, 3:03

Я опробовал новый яндекс.браузер... «браузер будущего».
И у меня... бомбануло.

А вот скриншоты

Новые карты яндекса в новом браузере яндекса Новая вкладка в браузере будущего Поисковый запрос байкал в новом яндекс.браузере

Хорошо

Интерфейс

  • Лучший интерфейс — тот, которого нет.
  • Внимание посетителя следует слева-направо сверху-вниз. Раньше я обращал внимание на адресную строку, панель расширений и вкладки... теперь этого нет.

Вкладки

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

Плохо

Закладки

  • Где панель закладок? Я зря собирал, сортировал и раскладывал по папкам тысячи своих закладок на протяжении многих лет?
  • В конце адресной строки при наведении курсора должна быть звёдочка! Зачем её спрятали? Окей, кликаю в адресную строку, вижу эту кнопку, жму... а в какую папку они положили мою закладку? Зачем мне засирать переполнять корневую? Горячие клавиши действуют также.
  • Яндекс, я не могу юзать интернет без удобных закладок!

Диалоговые окна

  • В меню закладок я увидел «создание закладок для открываемых страниц...» Такой функционал меня пугает. Но я рискнул. И знаете что? Браузер заблокировался. А потом я понял, что диалоговое окно внизу, под вкладками. Ниже экрана. Супер. Так ведут себя все диалоговые окна. Картинку мне сохранить оказалось очень тяжело.

Табло

  • Адресная строка перестала быть строкой адреса. Клик в ней открывает настоящую строку адреса, которая вообще в другом месте. Это ужасно. Мне нравилось, где она находится. Никакие галочки в настройках про это не работают.
  • Восстановление закрытых вкладок удалили вовсе. Этой функцией я пользовался каждый день.
  • Загрузки больше не работают через табло. И быстрого управления ими больше нет. Яндекс, посмотри на оперу.
  • Быстрые подсказки в выдаче как на картинке у меня не работают. А галочка стоит.
  • Виджеты в табло сломаны. Ни один больше не работает.
  • Чтобы добавить в табло новые ссылки, нужно зачем-то каждый раз заново заходить в редактирование фона.

Синхронизация

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

Как мне восстановить табло? Это мучительно больно — вспоминать ссылки.

Яндекс.браузер не даёт сменить аккаунт для синхронизации

  • Поле логина disabled. Яндекс.Браузер не даёт сменить аккаунт для синхронизации. Настройки для этой почты я не хочу синхронизировать, а создавать нового пользователя браузера для этого — это пипец.

Вкладки

  • У меня 2 экрана, я перетаскивал вкладки между экранами в новое окно. Теперь так нельзя.
  • Поменять порядок вкладок перетаскиванием тоже нельзя.
  • Закрепление вкладки пропало.
  • Я использую скрывающийся док на маке и скрывающуюся панель задач на винде. И теперь, когда увожу курсор в самый низ — там док или панель задач, перекрывшие вкладки.
  • Нужна настройка, чтоб можно было отключить цвета для вкладок. Эти пестрящие вкладки отвлекают.
  • В кучу к остальным анимациям вкладок, анимации не хватает на кнопке добавления вкладки. Плюс должен плавно поворачиваться на 45 градусов и чуть уменьшаться в размерах, а не резко превращаться в крестик.
  • А теперь после удаления браузера с восстановкой старого в том же месте он пишет такую фигню

Спасибо, Яндекс.

  • Если будущее будет выглядеть так, мне в нём места нет.
  • Надеюсь, к официальному релизу Яндекс починит всё, что сломал.

Другие обзоры браузера будущего:
Цукенберг позвонит
Macradar
Лайфхакер

Профессия будущего: веб-детектив

2 ноября 2014, 17:00

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

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

Также скоро будет в вебе. Поисковые алгоритмы стараются дать желаемое, но часто человек сам не знает, как описать запрос. Скоро от детективов ответвится более узкая профессия: веб-детектив. Сейчас такая профессия кажется абсурдной, но она обязательно появится.

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

Прозрачные кнопки для бутстрапа

29 октября 2014, 12:42

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

Код less или scss

Новая эгея — редизайн блога

25 мая 2014, 3:44

У этого блога новый дизайн:

  1. Убрал интерфейсные вещи типа ссылки на RSS, боковые блоки и даже меню.
  2. Ширина контента фиксированная. Умещается до 75 глифов (так легче читать по диагонали). На мобильниках — равна ширине экрана, но контент не утыкается в бока.
  3. Везде огромные шрифты и не человеческий интерльяж!
    На самом деле как раз для людей, чтобы читать хорошо было.

Названия социокнопок

25 мая 2014, 0:55

Отправить в «твиттер» — твитнуть,
Отправить во «в контакте» — сохранить,
Отправить в «фейсбук» — поделиться,
Отправить в гугл+ — рассказать,
Отправить в пинбоард — прикрепить,
Отправить в ЖЖ — прожужжать.

Чтоб вы знали: так жить было бы легче.

Месторасположение?!

25 мая 2014, 0:51

Меня бесит, когда пишут слово «месторасположение». Его читать что ли надо?

Чем не устраивает слово «координаты»? А «местоположение»? Чем не нравится «расположение»? Почему не устраивает «положение»?

Упрощайте! Задумались? Не надо.

Не пишите подобное «гео-позиции», умоляю. Избавьте меня от страданий, пишите слово «адрес».

Наверх

29 января 2012, 16:59

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

Зачем?

Я перечислю четыре «бесит»: На многих сайтах, особенно в блогах, когда я дочитываю статью и мне действительно интересно её содержание (например, код, который я хочу скопировать себе), мне вручную приходится пролистывать её вверх. Это ужасно долго и неудобно, а потому бесит. Некоторые ради такого случая в подвале блога ставят ссылку на верх страницы. Иногда эта ссылка требуется до того, как пролистаешь в самый низ. Например, находясь на середине статьи. Снова оказываешься в непонятной ситуации. Хочется щёлкнуть куда-нибудь, чтобы попасть вверх, но щёлкнуть некуда. Это бесит. Некоторые ради удобства своих пользователей действительно добавляют эту кнопочку. Даже делают, чтоб она появлялась после того, как немного прокрутишь вниз. Но где она, эта кнопочка? Она на столько маленькая, что её просто не видно. Она в верхнем правом или в нижнем правом углу. При этом справа часто находится меню. Размер и расположение этой мелкой кнопочки меня бесит. Есть два варианта прокрутки к верху: мгновенно или плавно. Во-первых, я вообще люблю плавность, а во-вторых, когда вся статья проскакивает мгновенно, я не понимаю, что пролистал, не пролистываю её и взглядом. Некоторым не нравится, что прокручивается медленно, но скорость же можно отрегулировать. Тут, конечно, каждому самостоятельно судить, но на мой взгляд это плохо. Меня это бесит. Что же меня не бесит, спросите вы? Огромная кнопка, тыкая в которую невозможно промахнуться. В которую не нужно прицеливаться. Просто дёргаешь курсор в её второну и щёлкаешь без разбора. Но при этом она должна не мешать чтению и восприятию остальной информации. Единственный сайт, где я видел реализацию подобного — злостная социальная сеть в контакте. Вот оттуда я и слизал решение. Сделал немного иначе, попроще, но работает примерно одинаково.

Как?

Если вкратце: написал и установил маленький скрипт скролла, оформил ссылку и всё на этом. По этой ссылке сокращённая версия скрипта. ## Установка Как работает скрипт мы разобрали, осталось установить. Можете скачать себе и вызывать со своего адреса, а можете вызывать его каждый раз с моего сайта по ссылке, указанной выше. Если вы скачали его себе, поместите его в каталог user/js/ своего блога и установите, указав в файле user/extras/footer-post.tmpk.php следующее:
<? _JS('scroll.min'); ?>
Таким образом скрипт будет вызываться из  сайта. На мой взгляд лучше он будет загружаться после странички, так что я вызываю его обычным методом:
<script scr="user/js/scroll.min.js"></script>
Так как скрипт добавляет саму ссылку «наверх» в html, то дописывать там ничего не нужно. Далее оформим ссылку:
#move_up { 
	position: fixed; 
	top: 0; 
	display: none;
	width: 100px; 
	height: 90%;
	text-decoration: none; 
	color: #45688E; 
	background: transparent; 
	padding: 12px 35px;
	opacity:.3;
	font-family: tahoma, arial, verdana, sans-serif, Lucida Sans;
	font-weight: bold;
	font-size: 11px;
	text-shadow: 0 1px 0 white;
	-webkit-transition:color, background, opacity .2s;
	-moz-transition:color, background, opacity .2s;
	-o-transition:color, background, opacity .2s;
	-ms-transition:color, background, opacity .2s;
	transition:color, background, opacity .2s;
} 
#move_up:hover { 
	color: #45688E; 
	background: #e1e7ed;
	opacity:1;
}

#move_up:before {
	content:"";
	float:left;
	position:absolute;
	top:15px;
	left:15px;
	width:0;
	height:0;
	border-color:transparent transparent #45688E transparent;
	border-style:solid;
	border-width: 0 7px 8px 7px;
	box-shadow: 0 1px #fff;	
}
Здесь в css не обойдётся без «модного». В частности css3-свойство transition, добавляющее анимацию при наведении, и псевдокласс :before, который добавляет стрелочку вверх. Можно, конечно, обойтись и без стрелочки и без анимации, а можно реализовать стрелочку картинкой, а анимацию с помощью jQuery, но я выбрал такой способ. Для установки подобной кнопки блог обязательно должен быть не на всю ширину странички. Нужно, чтоб кнопка «наверх» не перекрывала часть текста. Она должна быть в стороне. Я установил для всего блога внешние отступы (margin) в 100 пикселей.

Где стоит это делать?

Не забывайте, что это применимо вообще к любому сайту, не только к блогу на эгее! Но прежде всё равно стоит думать. Если на сайте вообще не планируется прокрутки, то и скрипта этого не надо. Ну, такие вещи и дураку понятны, так что на этом сей вопрос закроем. На этом установка заканчивается, начинается применение, тестирование, попытки изменить под себя, комментарии, критика, мнения и советы ;-)

Вторая версия катов

25 января 2012, 3:53

Каты?

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

Приемущества новой версии

Не прошло и двух дней, а уже готова новая версия скрипта. Он переписан полностью. Самое ключевое: больше не нужно самостоятельно прописывать идентификаторы #cat1, #cat2... и помнить их между статьями. Скрипт самостоятельно находит на странице все объекты с классом .link_cat и c классом .cat и добавляет им соответствующие идентификаторы. Теперь текст ссылки «далее/скрыть» напрямую зависит от состояния раскрываемого блока, что логично, а не от текста «далее» или «скрыть» в ссылке, как было раньше (если был текст «далее», то после щелчка ставился текст «скрыть»). Если статья открыта (видно комментарии), скрипт раскрывает кат автоматически. Раньше, чтобы применить кат ко всем статьям на странице, я перебирал все 100 возможных вариантов номера ката с помощью js-функции for. Это было глупо, ведь в jQuery есть аналогичная функция each, в которой не нужно вводить максимальное число, объекты она считает сама. Для блоггера плюс в том, что это быстрее выполняется и меньше загружает страницу посетителя. Если вам хочется изменить текст «далее/скрыть», он находится в первых строках скрипта и его легко заменить. Хотел я ещё сделать ссылку на скрытие ката слева от всей статьи каким-то блоком. Чтобы можно было скрыть открытую статью, не прокручивая скролл до её окончания (как это реализовано на страницах в контакте), но решил отложить до следующей версии. Кстати, она скорее всего будет не 0.3, а 1.0, ибо будет полноценным плагином. Возможно, также прибавится в версонном обозначении третье число. То есть будет не 1.0, а 1.0.0. Первое число будет означать кардинальные изменения, второе мелкие, пусть важные — функциональные и третье число будет увеличиваться с исправлением багов и мелких вещей, которые не влияют внешне на работу скрипта.

Скачать

По этой ссылке всегда доступна последняя версия: http://gurylev.com/js/cat/cat.js Она же, минимизированная: http://gurylev.com/js/cat/cat.min.js По этой ссылке версия 0.2: http://gurylev.com/js/cat/cat-0.2.js Она же, минимизированная: http://gurylev.com/js/cat/cat-0.2.min.js

Установка

Не забываем включить форматтер Нисден. В тексте выделяем сам кат. Обособляем дивом то, что нужно скрыть и ставим ссылку на открытие сего.
<div class=«cat»>тут текст, который под катом</div>
<p class=«link_cat»>далее</p>
Теперь подключим сам скрипт. Я сделал это с помощью дополнительного блока. В папке /user/extras создал файл footer-post.tmpl.php, а в нём прописал вызов скрипта следующим образом:
<script type=«text/javascript» src=«user/js/cat.min.js»></script>
Дальше в css темы или прямо после скрипта в файле footer-post.tmpl.php задаём стили для ката и ссылки ката:
<style>
div.cat {display: none}
p.link_cat {тут все свойства, которые указаны для обычных ссылок}
</style>
На этом установка закончена =)

Планы на развитие

Как написано выше, планируется, чтобы ссылка на скрытие ката была слева от всей статьи каким-то блоком. Чтобы можно было скрыть открытую статью, не прокручивая скролл до её окончания. При отключенном javascript в браузере пользователя статья будет по умолчанию раскрыта (сейчас это можно считать багом). Планирую сделать из этого скрипта «сниппета» полноценный jQuery плагин. Может быть не в ближайшей версии, но точно планирую. Опционально можно будет указать текст «далее», «скрыть», идентификаторы и классы для блоков и ссылок. Планируется страничка сего плагина у меня на сайте. Оформленная, со ссылками разными. В смысле, на все версии. С рекомендациями по установке и настройке. Пожалуйста, обсуждайте скрипт в комментариях, пишите пожелания, критикуйте. Буду рад.

Каты в эгее

22 января 2012, 5:44

Нужны каты?


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

Сказал — сделал


Я как-то заикнулся, что решение задачи очень простое. Немного js, немного форматирования и проблема решена. Итак, решение под катом (давно хотели увидеть на эгее эту фразу?)

Скачать

Ссылки на версии будут построены по тому же принципу, по которому они у jQuery. По этой ссылке всегда будет доступна последняя версия: http://gurylev.com/js/cat/cat.js Она же, минимизированная: http://gurylev.com/js/cat/cat.min.js По этой ссылке первая, нынешняя, версия: http://gurylev.com/js/cat/cat-0.1.js Она же, минимизированная: http://gurylev.com/js/cat/cat-0.1.min.js

Установка

Итак, начнём с html. Для начала включите форматтер «Нисден». Он проще, удобнее и т. д. и т. п. После мы выделим сам кат. В тексте обособляем скрытый текст дивом вот таким образом:
<div id="cat" class="cat">тут текст, который под катом</div>
<p id="link_cat" class="link_cat">далее</p>
В первой статье можно указать link_cat и cat, но в последующих нужно приписывать число. Например link_cat1 и cat1. В каждой новой статье нужно увеличивать число на единицу. Иначе ссылка будет открывать не то. Далее установим сам скрипт. Скрипт выполняется по загрузке DOM-дерева страницы, так что можно поставить его в конец, перед закрывающим тегом <body>. Я сделал это с помощью дополнительного блока. В папке /user/extras создал файл footer-post.tmpl.php, а в нём прописал вызов скрипта следующим образом:
<script type="text/javascript" src="user/js/cat.js"></script>
Дальше в css темы или прямо после скрипта в файле footer-post.tmpl.php задаём стили для ката и ссылки ката:
<style>
div.cat {display: none}
p.link_cat {тут все свойства, которые указаны для обычных ссылок}
</style>
На этом установка закончена =)

Тонкости

Почему «показать дальше» я сделал тегом <p>, а не тегом <a>? По спецификации ссылка должна вести на другую страницу, а при исполнении этого скрипта другой страницы не открывается. Потому что href — обязательный атрибут тега ссылки, а в нём указать нечего. Решётку (#) я считаю ужасом. И подобные методы типа исполнения ява скрипта в ссылке тоже. Иначе говоря, я заменил ссылку любым строчным тегом, а вы делайте уж как хотите. Ещё в эгее есть какой-то более правильный способ вызова js из этой папки (макросы), но, если быть честным, я его не понял. Буду благодарен, если в комментариях или в своей статье кто-нибудь объяснит.

Настройка

Теперь разберём сам скрипт. Как я писал выше, выполняется он после загрузки DOM-дерева. Далее идёт сама функция. В ней главное — переключатель toggle. В первом состоянии: щёлкаешь по ссылке, текст ссылки заменяется на «скрыть» и раскрывается скрытая часть текста. Во втором состоянии: щёлкаешь по ссылке, заменяется текст ссылки на «далее» и прячется открытая часть текста. Вот эти состояния и переключаются. На странице может быть до ста записей, поэтому дальше идёт повторение этой операции до 100 раз или тех пор, пока он сможет находить на странице catN и link_catN. Если у вас в настройках эгеи указано меньше статей на страницу, настоятельно рекомендую уменьшить число 101 на ваше число плюс 1 (N+1). Это уменьшит нагрузку на браузер посетителя.

Планы на развитие

Лениво каждый раз вычислять, какой по счёту номер ката, поэтому в следующей версии скрипта я планирую сделать автоматическое вычисление ката. Но в этой версии только так. Планируется, чтобы ссылка на скрытие была слева от всей статьи каким-то блоком. Чтобы можно было скрыть открытую статью, не прокручивая скролл до её окончания При открытии комментариев статьи, она будет развёрнута с возможностью свернуть. На этом, вроде бы, всё. Обсуждайте, пожалуйста, в комментариях этот скрипт, пишите пожелания, критикуйте. Буду рад.

Социокнопки

4 сентября 2011, 6:20

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

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

http://twitter.com/intent/tweet?url=адрес_материала

В фейсбуке

http://facebook.com/sharer.php?u=адрес_материала

В контакте

http://vk.com/share.php?url=адрес_материала

и так далее. У них есть дополнительные параметры вроде image и title, которые они в состоянии брать из хедера.

Остаётся только стилизовать их и состояния (ховер и т.п).
Код и кол-во обращений к серверам уменьшены, никаких лишних тяжёлых картинок, никаких ошибок в скриптах и всё валидно.