Pull to refresh

Букмарклет в помощь.

Lumber room
Итак, господа, перед вами часто встает вопрос сохранения данных с всяких ютубов, Вконтакте, файлообменников и прочая.
Коллега mekal раскопал категорически полезный сервис SaveFrom.net, который как раз и помогает нам выкачивать из большого Интернета файлики на наши грешные харды. Принцип действия прост — перед урлом нужного ресурса надо добавить приставочку «savefrom.net/» или «sfrom.net/» и ресурс покажет страничку с прямыми ссылками. Полный список поддерживаемых ресурсов представлен на главной странице сайта.
НО! Это ведь требует определенных лишних движений по копипастингу этой самой приставки, не так ли? Вот что я предлагаю сделать для упрощения жизни.
Читать дальше →
Total votes 36: ↑33 and ↓3 +30
Views 571
Comments 33

Добавляем favicons для bookmarklets

Firefox
Так как плагин Favicon Picker 2 не поддерживает FireFox 3, а смотреть на пустые иконки букмарклетов стало грустно, я предпринял попытку исправить эту ситуацию.

Для работы нам понадобится расширение Stylish.
Читать дальше →
Total votes 4: ↑2 and ↓2 0
Views 811
Comments 6

6 отличных способов сохранить ссылки на потом

Lumber room
Translation
К сожалению, в сутках недостаточно часов. Особенно если у вас много дел. Блоггинг, исследования, переписка и реальная жизнь не всегда оставляют нам время для прочтения всех новостей. Иногда мы хотим сохранить что-то до лучших времен, не захламляя закладки.
Вот 6 инструментов, чтобы сделать это.
Total votes 11: ↑8 and ↓3 +5
Views 2.6K
Comments 21

Букмарклет для отображения макетной сетки

Lumber room
Не так давно на хабре уже обсуждалась тема наложения макетной сетки поверх страницы. В голову пришла идея наложения сетки при помощи букмарклетов.

Собственно, вот они.
Читать дальше →
Total votes 13: ↑13 and ↓0 +13
Views 295
Comments 6

Букмарклеты

JavaScript *
Всем привет, сегодня речь пойдет про использование букмарклета, или закладки для браузера.

Кто не знает, это такая штука, которую можно добавить в закладки (да, я сегодня дебютирую в роли Капитана Очевидность :) и, при нажатии на нее, произвести какой-нибудь эффект.

Примером может служить герой сегодняшней заметки, который расположен по адресу http://ulizko. com/demo/allthat/. Инструкция по применению:
  1. Перетащите ссылку «link» на панель закладок или щелкните по ней правой кнопкой мыши и выберите пункт меню «добавить в избранное».
  2. Зайдите на какой-нибудь сайт, вроде http://twitter. com, и нажмите на эту закладку (ну или на избранное).


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

Но. Мы сегодня не об этом, а о том, как делать такие штуки в принципе.

Интересно?
Total votes 41: ↑38 and ↓3 +35
Views 12K
Comments 35

Используем Goo.gl без Google Toolbar

IT-companies
image

О сервисе сокращения ссылок от Google — Goo.gl писали уже не раз.
Несмотря на то, что подобных сервисов расплодилось огромное количество, гугловский заинтересовал людей (в том числе и меня) именно тем, что он гугловский — стабильность, надёжность, да и просто любовь к корпорации зладобра =)
Ложкой дёгтя оказалась возможность использования сервиса только в Google Toolbar и Feedburner. Чуть позже появился плагин для Chrome. А вот пользователи остальных браузеров остались в пролёте.
«Да не может быть!» — подумал я, и обратился к большому брату с вопросом, как же его новую фичу без его же фирменного софта использовать. И ответ отыскался довольно быстро.
Читать дальше →
Total votes 55: ↑48 and ↓7 +41
Views 57K
Comments 54

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

IT-companies

Введение


Бывают случаи, когда в браузере приходится читать большой текст в несколько приёмов. Это может быть роман, статья или техническое руководство. Хорошо, когда документ разделён на главы и снабжён удобной навигацией. Тогда, прерывая чтение, можно создать временную закладку на страницу раздела или на якорную точку в документе. А если текст сплошной? Или ссылки на внутренние разделы не предусмотрены? Или сами разделы слишком велики и трудно потом искать нужный абзац внутри раздела?

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

Но такое умножение сущностей не для всех удобно. Попробуем найти способ попроще.
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 2.2K
Comments 25

Stickr.com – поздравляем с Новым Годом!

Self Promo
image

Уважаемые хабраюзеры,

Команда Stickr.com от всей души поздравляет вас с замечательным праздником — Новым Годом! Весь 2010 год мы усердно работали для того, чтобы сделать наш сайт интереснее и лучше. Мы очень рады, что с каждым днем количество наших пользователей увеличивается: сегодня нас уже 26 тысяч, а нашими стикерами обклеены более 76 тысяч веб-страниц!
Читать дальше →
Total votes 29: ↑12 and ↓17 -5
Views 546
Comments 5

Tips & tricks в разработке букмарклетов

JavaScript *
Sandbox
Так получилось, что в течение нескольких месяцев я занимался разработкой букмарклетов, сделав их около десятка. Использовал как jQuery, так и native JavaScript. О том, с какими подводными камнями я столкнулся, что нового узнал и нашел — об этом пойдет речь под катом.
Читать дальше →
Total votes 65: ↑57 and ↓8 +49
Views 2.5K
Comments 17

«Сделайте мне красиво!» Выпуск №23

Lumber room
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:




*** Осторожно: фоновая музыка на странице

Наши ссылки: RSS и лента на rpod.ru
Total votes 12: ↑6 and ↓6 0
Views 310
Comments 0

Bookmarklet для Free-lance.ru

Freelance
Хочу поделиться полезным букмарклетом для сайта Free-lance.ru

Он вам пригодится, если вы часто просматриваете портфолио пользователей (в частности дизайнеров), у которых нет pro-аккаунта на сайте free-lance.ru. Для таких пользователей портфолио (список их проектов) отображается в виде списка ссылок на странички проектов, где находится картинка с результатами работы.

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

image

Добавить букмарклет можно отсюда.

Там же можно найти ссылку на исходники и переделать что-то под себя или написать запрос в issues, если будет нужна помощь.
Total votes 13: ↑6 and ↓7 -1
Views 715
Comments 2

Сайты под ЛСД

Website development *
Не знаю, в какие хабы это лучше запостить. Поправьте, если не туда.



Думаю, многие знают, что 19го апреля был День Велосипеда. В честь него, был сделан этот букмарклет, «окунающий сайты в ЛСД-трип». Посмотрите на свои (или чужие) сайты под ним — выглядит порой очень психоделически).
Total votes 122: ↑75 and ↓47 +28
Views 8.2K
Comments 43

Простой bookmarklet как средство очистки содержимого веб-страницы от нежелательных элементов

Website development *JavaScript *
JavaScript использую достаточно давно, букмарклеты рассматривал когда-то в познавательных целях, но чтобы использовать,- необходимости не было.

Мысль о написании букмарклета пришла спонтанно: проверяя почту на одном из онлайн серверов ощутил явный дискомфорт, вызванный навязчивым (пёстрым и большим) флэш-банером, и это меня несколько озадачило, так как реклама встречается сплошь и рядом, временами некачественно сделанная реклама досаждает, но не так что бы очень (скорее воспринимается как окружающий фон). Первая мысль была найти дополнение для браузера (типа Flashblock), и уже было собрался устанавливать, но по разным причинам (использую разные браузеры на нескольких компьютерах, нежелание настраивать и сопровождать и т.п., да и далеко не все флэш-объекты провоцируют на то, чтобы их удалили) особого энтузиазма по поводу установки подобных дополнений не испытывал, но тут вспомнил про букмарклеты и написал простой код, позволяюший по мере необходимости легко справляться с очисткой страницы:
Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Views 1.4K
Comments 2

Зачёркивание и подчёркивание символьными средствами ( ̶т̶а̶к̶ ̶, т̱а̱к̱ или т̲а̲к̲)

JavaScript *

I. В чём проблема



Если социальная сеть, платформа для блогов или форум предоставляют возможность размечать текст при помощи HTML или BBCode, перечёркивать или подчёркивать текст не составляет труда: можно пользоваться тегами s и u обеих разметок или назначать стили в HTML. Но что делать, если у нас есть только голый текст? Или, например, нам нужно зачеркнуть/подчеркнуть слово в заголовке страницы, отображаемом в заголовке вкладки или всего браузера, или оформить слово в заголовке форумного поста — короче говоря, всюду, где не работает разметка?

Можно рискнуть и воспользоваться средствами Юникода.

Читать дальше →
Total votes 54: ↑42 and ↓12 +30
Views 111K
Comments 55

Пометить как прочитанное: Twitter, VK, LiveJournal, Facebook…

JavaScript *

I. В чём проблема.


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

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

Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Views 9K
Comments 10

Букмарклет: разбор существенных моментов, часть первая

TheOnlyPage corporate blog Website development *JavaScript *
Recovery mode
Tutorial
Как известно, букмарклет это небольшой javascript-код который, будучи сохраненным в закладках браузера, используется для выполнения каких либо действий над содержимым текущей веб-страницы.

Но почему в названии поста: часть первая? Потому, что современный букмарклет «с блэк джеком и шлюхами»* обычно состоит из нескольких взаимодействующих частей:
  1. первая часть букмарклета, которая является собственно букмарклетом это компактный javscript-код — не более 2000 символов, главная, но не единственная задача которого загрузить вторую часть;
  2. вторая часть букмарклета: это javscript-код произвольного размера, который выполняет всю оставшуюся работу;
  3. резервная часть букмараклета – которая запускается в действие, если вторая часть букмарклета не загрузилась.

И, как вы уже наверняка догадались, в данной публикации речь пойдет о первой части букмарклета,

Часть первая обычно выполняет следующие нехитрые действия:
Читать дальше →
Total votes 23: ↑19 and ↓4 +15
Views 8.8K
Comments 7

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

TheOnlyPage corporate blog Website development *JavaScript *
Tutorial
Напомним, что букмарклет это небольшой javascript-код, сохраняемый в закладках браузера, и предназначенный для выполнения каких либо задач на текущей веб-странице.

Как было отмечено в предыдущем посте букмарклет можно разделить на 3 взаимодействующие части:
  1. Первая часть, небольшой, до 2000 символов javascript-код, который сохраняется в закладках браузера и, в простейшем случае может выполнять всю работу, но обычно служит для инициации работы букмарклета.
  2. Вторая, подгружаемая часть букмарклета: javascript-код подгружаемый в текущий документ в процессе инициации букмарклета и обеспечивающий основную функциональность.
  3. Третья, резервная часть букмарклета которая срабатывает если подгрузить javascript в текущий документ не удалось.

Первая часть букмарклета была досконально разобрана в предыдущем посте на живом примере букмарклета веб-сервиса TheOnlyPage (сервис хранения закладок, заметок и html-фрагментов)

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

Разнообразие возможных действий подгружаемой части букмарклета необъятно, поэтом рассмотрим только наиболее существенные моменты.
Читать дальше →
Total votes 6: ↑5 and ↓1 +4
Views 2.4K
Comments 0

Букмарклет: разбор существенных моментов, часть третья, резервная

TheOnlyPage corporate blog Website development *JavaScript *
Tutorial
В продолжение двух предыдущих публикаций про первую инициирующую и вторую подгружаемую части букмарклета, для полноты картины, рассмотрим и третью резервную часть букмарклета.

Напомним, вкратце логику работы «навороченного» букмарклета:
  1. Кликом по сохраненной в закладках браузера ссылке, вызывается на выполнение небольшой (до 2000 символов) javscript-код, основная задача которого организовать загрузку javascript-кода выполняющего основную работу букмарклета
  2. Основная часть букмарклета после загрузки выполнят всю работу.
  3. Если основную часть букмарклета невозможно подгрузить – основную часть работы, выполняет резервная часть букмарклета, как правило, в урезанном виде.

Читать дальше →
Total votes 22: ↑17 and ↓5 +12
Views 2.7K
Comments 0

Надёжный localStorage для букмарклетов

Firefox JavaScript *Internet Explorer Google Chrome Browsers
В отличие от расширений, букмарклеты хороши простотой и кроссбраузерностью. Конечно, они ограничены контекстом окна (содержимого страницы), но часто этого достаточно. А с возникновением механизма localStorage у них появился простой способ сохранять и запрашивать данные на стороне клиента.
Читать дальше →
Total votes 25: ↑21 and ↓4 +17
Views 11K
Comments 2

Букмарклеты: если XPath недоступен, а селекторов и методов навигации по DOM не хватает

Firefox JavaScript *Internet Explorer Google Chrome Browsers
Недавно я пытался написать несколько условно кроссбраузерных букмарклетов с выборками и навигацией средней сложности. Решил ограничиться последними версиями Google Chrome, Firefox и Internet Explorer. Приступив к проверке в последнем браузере, с грустью обнаружил, что даже в IE 11 всё ещё нет поддержки XPath.

Вроде бы полная поддержка обещана в Edge: «Microsoft Edge supports the XML Path Language Version 1.0 with no variations or extensions». И уже даже, кажется, реализация добавлена в Internet Explorer Developer Channel (никто не проверял?). Но это пока недостаточное утешение.

(P.S. Проверка через виртуальную машину подтверждает реализацию XPath в MS Edge версии 11.00.10240.16397 от 7.22.2015 (по версии файла), она же 20.10240.16384.0 (по информации в настройках)).

Следующим шагом стало обнаружение библиотеки от Google. Я даже для очистки совести проверил способ с вживлением библиотеки на странички в IE 11 (по описанному здесь методу) — всё замечательно работает даже на параноидальных сайтах вроде Твиттера (к слову, если вы вдруг не знали, в Firefox всё ещё нельзя запустить букмарклет в Твиттере или, например, в Гитхабе, из-за до сих пор не исправленного бага). Но метод этот очень громоздкий. Он хорошо подходит для разработки сайтов, но маленькие пользовательские букмарклеты он отягощает лишней асинхронностью, усложнением логики и дополнительным временем на загрузку файла.

Пришлось искать более простые замены для некоторых не хватавших мне инструментов XPath.
Читать дальше →
Total votes 7: ↑7 and ↓0 +7
Views 6K
Comments 6
1