<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>bookmarklet on S Anand</title>
    <link>https://www.s-anand.net/blog/tag/bookmarklet/</link>
    <description>Recent content in bookmarklet on S Anand</description>
    <generator>Hugo -- 0.164.0</generator>
    <language>en-us</language>
    <lastBuildDate>Sat, 16 May 2026 13:32:06 +0800</lastBuildDate>
    <atom:link href="https://www.s-anand.net/blog/tag/bookmarklet/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Google Meet captions as a local transcript recorder</title>
      <link>https://www.s-anand.net/blog/google-meet-captions-local-transcript-recorder/</link>
      <pubDate>Sat, 16 May 2026 13:32:06 +0800</pubDate>
      <guid>https://www.s-anand.net/blog/google-meet-captions-local-transcript-recorder/</guid>
      <description>&lt;p&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://files.s-anand.net/images/2026-05-15-google-meet-captions-tool.avif&#34;&gt;&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;m a man of simple needs. All I want is: when I&amp;rsquo;m on &lt;a href=&#34;https://meet.google.com/&#34;&gt;Google Meet&lt;/a&gt;, I turn on captions. I wanted to click a bookmarklet and save those captions into a local Markdown file. (So that an AI agent can guide me from it.)&lt;/p&gt;
&lt;p&gt;Hence, &lt;a href=&#34;https://tools.s-anand.net/gmeetcaptions/&#34;&gt;Google Meet Captions&lt;/a&gt;. The code is in &lt;a href=&#34;https://github.com/sanand0/tools/tree/main/gmeetcaptions&#34;&gt;&lt;code&gt;gmeetcaptions/&lt;/code&gt;&lt;/a&gt;. Drag the button to your bookmarks bar. Join a Meet. Turn on captions. Click it.&lt;/p&gt;
&lt;p&gt;You get a tiny panel with two buttons: &lt;strong&gt;Copy&lt;/strong&gt; and &lt;strong&gt;Start Recording&lt;/strong&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/gmeetcaptions.js&#34;&gt;The bookmarklet&lt;/a&gt; writes this kind of Markdown:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gh&#34;&gt;# Meeting title
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;-&lt;/span&gt; **Meeting code**: abc-defg-hij
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;-&lt;/span&gt; **Started**: 5/15/2026, 8:00:00 AM
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;-&lt;/span&gt; **Participants**: Alice, Bob, Carol
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;---
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## Alice [0:12]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Good morning everyone.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## Bob [0:18]
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Let&amp;#39;s get started with the agenda.
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;That&amp;rsquo;s it. No server. No extension. No login. No API. Just a &lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/index.html&#34;&gt;bookmarklet page&lt;/a&gt;, a &lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/script.js&#34;&gt;script&lt;/a&gt;, and local browser APIs.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;BUT&lt;/strong&gt;: Google Meet captions are live and unstable.&lt;/p&gt;
&lt;p&gt;A sentence may appear as:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;mic, so,
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Then a second later become:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;mic, So that&amp;#39;s a new person. Okay.
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Then become:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;mic, So that&amp;#39;s a new person. Okay. Hey. oh, but,
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;If I simply append every change, the transcript becomes garbage. So the bookmarklet keeps updating the active speaker turn until it becomes stable. The implementation uses a &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver&#34;&gt;&lt;code&gt;MutationObserver&lt;/code&gt;&lt;/a&gt; plus a one-second polling fallback. After four unchanged polls, it treats the turn as final.&lt;/p&gt;
&lt;p&gt;The tests are in &lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/gmeetcaptions.test.js&#34;&gt;&lt;code&gt;gmeetcaptions.test.js&lt;/code&gt;&lt;/a&gt;, using an anonymized fixture at &lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/__fixtures__/captions-anonymized.html&#34;&gt;&lt;code&gt;__fixtures__/captions-anonymized.html&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;BUT #2&lt;/strong&gt;: Google Meet&amp;rsquo;s DOM is not a public API. Class names like &lt;code&gt;.nMcdL&lt;/code&gt;, &lt;code&gt;.NWpY1d&lt;/code&gt;, and &lt;code&gt;.ygicle&lt;/code&gt; can vanish overnight.&lt;/p&gt;
&lt;p&gt;So the scraper first tries semantic and structural selectors:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;[role=&amp;quot;region&amp;quot;][aria-label=&amp;quot;Captions&amp;quot;]&lt;/code&gt; for the captions region&lt;/li&gt;
&lt;li&gt;&lt;code&gt;img[data-iml]&lt;/code&gt; and &lt;code&gt;googleusercontent.com&lt;/code&gt; avatars to identify caption items&lt;/li&gt;
&lt;li&gt;the first &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; as the speaker&lt;/li&gt;
&lt;li&gt;the last non-image &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; as the caption text&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Only then does it fall back to obfuscated class names. That selector strategy is documented in the &lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/README.md&#34;&gt;&lt;code&gt;README&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Boring, but also the difference between &amp;ldquo;worked once&amp;rdquo; and &amp;ldquo;might work tomorrow.&amp;rdquo;&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;The weirdest was Chrome writing to a &lt;code&gt;.md.crswap&lt;/code&gt; file while recording. The file appears unfinished until I click &lt;strong&gt;Stop Recording&lt;/strong&gt;. Then Chrome finalizes it.&lt;/p&gt;
&lt;p&gt;This is good, actually. It means the browser is safely streaming to a local file via the &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/API/File_System_API&#34;&gt;File System Access API&lt;/a&gt;. But it also means: &lt;strong&gt;stop the recorder before trusting the file&lt;/strong&gt;!&lt;/p&gt;
&lt;p&gt;I captured these bugs and prompts in &lt;a href=&#34;https://github.com/sanand0/tools/blob/main/gmeetcaptions/prompts.md&#34;&gt;&lt;code&gt;prompts.md&lt;/code&gt;&lt;/a&gt;, because future-me will forget. Future-agent, too.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;Why bother? Because transcripts are not the output. They are raw material.&lt;/p&gt;
&lt;p&gt;Once a meeting is Markdown, I can ask agents to extract decisions, questions, follow-ups, contradictions, reusable prompts, and blog ideas. I can diff it. Search it. Commit it. Feed it to another workflow.&lt;/p&gt;
&lt;p&gt;Meetings now become the &amp;ldquo;context&amp;rdquo; in context engineering!&lt;/p&gt;
</description>
    </item>
    <item>
      <title>Gemini Scraper</title>
      <link>https://www.s-anand.net/blog/gemini-scraper/</link>
      <pubDate>Tue, 20 Jan 2026 08:46:10 +0530</pubDate>
      <guid>https://www.s-anand.net/blog/gemini-scraper/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;https://gemini.google.com/&#34;&gt;Gemini&lt;/a&gt; lets you copy individual responses as Markdown, but not an entire conversation.&lt;/p&gt;
&lt;p&gt;That&amp;rsquo;s useful if you want to save the chat for later, pass it to another LLM, or publish it.&lt;/p&gt;
&lt;p&gt;So I built a &lt;a href=&#34;https://tools.s-anand.net/geminiscraper/&#34;&gt;bookmarklet&lt;/a&gt; that scrapes the entire conversation as Markdown and copies it to the clipboard.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;SETUP&lt;/strong&gt;: Drag the bookmarklet to your bookmarks bar.&lt;/p&gt;
&lt;p&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://files.s-anand.net/images/2026-01-20-gemini-scraper-add-bookmarklet.avif&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;USAGE&lt;/strong&gt;: On a Gemini chat page, click the bookmarklet. It copies the chat as Markdown.&lt;/p&gt;
&lt;p&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://files.s-anand.net/images/2026-01-20-gemini-scraper-use-bookmarklet.avif&#34;&gt;&lt;/p&gt;
&lt;p&gt;Here&amp;rsquo;s a sample output:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Trump&amp;#39;s Nobel Prize Snub&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;date&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;ld&#34;&gt;2026-01-20T10:10:38&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;+05&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;m&#34;&gt;30&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nt&#34;&gt;source&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;https://gemini.google.com/app/6dbb3b934006cd9f&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nn&#34;&gt;---&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## User
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Answer in 1 line: What was Trump&amp;#39;s most controversial announcement yesterday?
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## Gemini
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;**Thinking:** ...
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;He stated that his demand to purchase Greenland and the subsequent tariff threats against European allies were driven by his resentment over being snubbed for the Nobel Peace Prize.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;---
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## User
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Answer in 1 line: Who else historically have acted so strongly when snubbed?
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;gu&#34;&gt;## Gemini
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;&amp;gt; &lt;/span&gt;&lt;span class=&#34;ge&#34;&gt;**Thinking:** ...
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Genghis Khan diverted his armies to annihilate the entire Khwarazmian Empire after its Shah insulted him by beheading his diplomatic envoys.
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;---
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;NOTE&lt;/strong&gt;: When I vibe coded this at first, I got an error that made me think Gemini&amp;rsquo;s &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy&#34;&gt;Content-Security-Policy&lt;/a&gt; prevents executing &lt;code&gt;javascript:&lt;/code&gt; URLs. But on testing, the CSP actually looks like:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-text&#34; data-lang=&#34;text&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;Content-Security-Policy: ...; script-src * &amp;#39;unsafe-inline&amp;#39; &amp;#39;unsafe-eval&amp;#39; blob: data:; ...
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This specifically allows &lt;code&gt;unsafe-inline&lt;/code&gt; scripts, which is what bookmarklets are. So it works fine.&lt;/p&gt;
</description>
    </item>
    <item>
      <title>Random quotes generator</title>
      <link>https://www.s-anand.net/blog/random-quotes-generator/</link>
      <pubDate>Mon, 23 Mar 2009 15:22:17 +0000</pubDate>
      <guid>https://www.s-anand.net/blog/random-quotes-generator/</guid>
      <description>&lt;p&gt;The Random Quotes Generator is a simple tool that creates quotes by mixing up words on a web page. The results are often funny, but sometimes surprisingly insightful.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://www.s-anand.net/blog/assets/flickr-monkey-typing-shakespeare_3379486150_o-jpg.webp&#34; title=&#34;Monkey Typing Shakespeare by S Anand, on Flickr&#34;&gt;&lt;img alt=&#34;Monkey Typing Shakespeare&#34; loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/flickr-monkey-typing-shakespeare_3379486150_o-jpg.webp&#34;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Yes, this is the equivalent of a &lt;a href=&#34;http://en.wikipedia.org/wiki/Infinite_monkey_theorem&#34;&gt;million monkeys typing Shakespeare&lt;/a&gt;, except that they’re using the works of Shakespeare as a starting point. And  it doesn’t have to be Shakespeare. It could be you or your friends.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;To try it out, visit &lt;a href=&#34;https://www.s-anand.net/blog/random-quotes-generator.html&#34;&gt;this page&lt;/a&gt;, select the link and “Add to Favorites” or drag it into your browser’s bookmark toolbar.&lt;/strong&gt;. Then go to any web page &lt;strong&gt;that has a lot of text&lt;/strong&gt;, and click the link to generate random quotes.&lt;/p&gt;
&lt;p&gt;Here’s an example of random text from &lt;a href=&#34;http://www.techcrunch.com/&#34;&gt;TechCrunch&lt;/a&gt;.&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;The net will find monetization models of theater and sporting events before them. Indeed, there has to be some way to create websites that do other than Advertising. The expected drop in internet advertising will rapidly lose its value and its impact, for reasons that can easily be understood.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;For the technically minded, &lt;a href=&#34;http://www.cs.bell-labs.com/cm/cs/pearls/&#34;&gt;Programming Pearls&lt;/a&gt; has a section on &lt;a href=&#34;http://www.cs.bell-labs.com/cm/cs/pearls/sec153.html&#34;&gt;Generating Text&lt;/a&gt; that explains the concept. The bookmarklet uses an Order-2 word-level Markov chain. Translated into English, what that means is: I look at every pair of words in and find out what word is likely to follow that.&lt;/p&gt;
&lt;p&gt;For example, in the &lt;a href=&#34;http://www.cs.bell-labs.com/cm/cs/pearls/sec153.html&#34;&gt;Generating Text&lt;/a&gt; page, the pair of words “we can” are followed by the words “extend”, “also”, “get” and “write” with equal probability. We pick one randomly (say “also”) and write “we can also”. Then we look at the word pair “can also”, see what word follows that, pick one at random, and so on.&lt;/p&gt;
&lt;p&gt;This is Order-2 because we pick pairs of words. And it’s word-level rather than letter-level because we use words instead of letters as the basic building blocks.&lt;/p&gt;
&lt;p&gt;When you’re trying it out, make sure that the page is large enough. If not, you may find that the page’s content is reproduced verbatim.&lt;/p&gt;
&lt;p&gt;The bookmarklet is built on top of the excellent &lt;a href=&#34;http://lab.arc90.com/2009/03/readability.php&#34;&gt;Readability&lt;/a&gt; &lt;a href=&#34;http://lab.arc90.com/experiments/readability/&#34;&gt;bookmarklet&lt;/a&gt; by &lt;a href=&#34;http://www.arc90.com/&#34;&gt;Arc90&lt;/a&gt;, which helps identify the main content to be randomized.&lt;/p&gt;
</description>
    </item>
    <item>
      <title>Infyblogs dashboard</title>
      <link>https://www.s-anand.net/blog/infyblogs-dashboard/</link>
      <pubDate>Mon, 26 Jan 2009 12:00:00 +0000</pubDate>
      <guid>https://www.s-anand.net/blog/infyblogs-dashboard/</guid>
      <description>&lt;p&gt;I just finished &lt;a href=&#34;http://www.perceptualedge.com/&#34;&gt;Stephen Few&lt;/a&gt;&amp;rsquo;s book on &lt;a href=&#34;http://www.amazon.com/Information-Dashboard-Design-Effective-Communication/dp/0596100167&#34;&gt;Information Dashboard Design&lt;/a&gt;. It talks about what&amp;rsquo;s wrong with the dashboards most Business Intelligence vendors (&lt;a href=&#34;http://www.sap.com/solutions/sapbusinessobjects/index.epx&#34;&gt;Business Objects&lt;/a&gt;, &lt;a href=&#34;http://www.oracle.com/&#34;&gt;Oracle&lt;/a&gt;, &lt;a href=&#34;http://www.informatica.com/&#34;&gt;Informatica&lt;/a&gt;, &lt;a href=&#34;http://www.cognos.com/&#34;&gt;Cognos&lt;/a&gt;, &lt;a href=&#34;http://www.oracle.com/hyperion/index.html&#34;&gt;Hyperion&lt;/a&gt;, etc.), and brings &lt;a href=&#34;http://www.edwardtufte.com/&#34;&gt;Tuftian&lt;/a&gt; principles of chart design to dashboards.&lt;/p&gt;
&lt;p&gt;So I took a shot at designing a dashboard based on those principles, and made this dashboard for &lt;a href=&#34;http://blogs.ad.infosys.com/&#34;&gt;InfyBLOGS&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/infyblogs-dashboard.webp&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/infy-blog-comment-network.webp&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;img loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/infy-blog-social-recommendations.webp&#34;&gt;&lt;/p&gt;
&lt;p&gt;You can try for yourself. Go to &lt;a href=&#34;http://www.s-anand.net/reco/&#34;&gt;http://www.s-anand.net/reco/&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;&lt;strong&gt;Note: This only works within the Infosys intranet.&lt;/strong&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Right click on the &amp;ldquo;Infyblog Dashboard&amp;rdquo; link and click &amp;ldquo;Add to Favourites&amp;hellip;&amp;rdquo; (Non-IE users &amp;ndash; drag and drop it to your links bar)&lt;/li&gt;
&lt;li&gt;If you get a security alert, say &amp;ldquo;Yes&amp;rdquo; to continue&lt;/li&gt;
&lt;li&gt;Return to InfyBLOGS, &lt;strong&gt;make sure you&amp;rsquo;re logged in&lt;/strong&gt; (that&amp;rsquo;s important) and click on the &amp;ldquo;Infyblog Dashboard&amp;rdquo; bookmark&lt;/li&gt;
&lt;li&gt;You&amp;rsquo;ll see a dashboard for &lt;strong&gt;your account&lt;/strong&gt;, with comments and statistics&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The rest of this article discusses design principles and the technology behind the implementation. (It&amp;rsquo;s long. Skim by reading just the &lt;strong&gt;bold headlines&lt;/strong&gt;.)&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Dashboards are minimalist&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ll use the design of the dashboard to highlight some of the concepts in the book.&lt;/p&gt;
&lt;p&gt;I designed the dashboard first on Powerpoint, keeping these principles in mind.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Fits in one screen&lt;/strong&gt;. No scrolling. Otherwise, it isn&amp;rsquo;t a dashboard.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Shows only what I need to see&lt;/strong&gt;. Ideally, from this dashboard, I should receive all the information I need to act on, and no more.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Minimises the&lt;/strong&gt; &lt;a href=&#34;http://www.infovis-wiki.net/index.php/Data-Ink_Ratio&#34;&gt;&lt;strong&gt;data-ink ratio&lt;/strong&gt;&lt;/a&gt;. Don&amp;rsquo;t draw a single pixel that&amp;rsquo;s not required.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;The first was easy. I just constrained myself to one page of PowerPoint, though if you had a lot of toolbars, the viewing area of your browser may be less than mine.&lt;/p&gt;
&lt;p&gt;The second is a matter of picking what you want to see. For me, these are the things I look for when I log into InfyBLOGS:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Any new comments?&lt;/li&gt;
&lt;li&gt;Any new posts from my friends?&lt;/li&gt;
&lt;li&gt;What&amp;rsquo;s new? What&amp;rsquo;s hot?&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Then I dig deeper, occasionally, into popular entries, popular referrers, how fast the blogs are growing, etc. So I&amp;rsquo;ve put in what I think are the useful things.&lt;/p&gt;
&lt;p&gt;The third is reflected in the way some of this information is shown. Let me explain.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Keep the charts bare&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Consider the graphs on the right. They look like this.&lt;/p&gt;
&lt;p&gt;Notice the wiggly line to the right. It&amp;rsquo;s a graph called &lt;a href=&#34;http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&amp;amp;topic_id=1&#34;&gt;sparkline&lt;/a&gt;, and was introduced by Edward Tufte. Sparklines are great to show trends in a compact way. Forget the axes. Forget the axes labels. Forget the gridlines. The text on the left (&amp;ldquo;visitors per day&amp;rdquo;) tells you what it is. The number (10475) is the current value. And the line is the trend. Clearly the number of visitors has exploded recently, from a relatively slow and flat start. The labels and axes aren&amp;rsquo;t going to tell you much more.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Boldly highlight what&amp;rsquo;s important&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The most important thing here, the title, is on top. It&amp;rsquo;s pure black, in large font, positioned right on top, and has a line segregating it from the rest of the page.&lt;/p&gt;
&lt;p&gt;The sections are highlighted by a bigger font, different colour, and a line, but the effect is a bit more muted.&lt;/p&gt;
&lt;p&gt;The numbers on the right are prominent only by virtue of size and position. If anything, the colour de-emphasizes them. This is to make sure that they don&amp;rsquo;t overwhelm your attention. (They would if they were in red, for instance.)&lt;/p&gt;
&lt;p&gt;The number 10475 is carefully set to occupy exactly two line spaces. That alignment is very important. The small lines are at a font size of 11px, and line spacing is 1.5. So at a font size of 2 x 11px x 1.5 = 33px, the size of the large number covers exactly two rows.&lt;/p&gt;
&lt;p&gt;The labels, such as &amp;ldquo;visitors&amp;rdquo; or &amp;ldquo;sites&amp;rdquo; are in blue, bold. Nothing too out of the way, but visible enough that they stand out.&lt;/p&gt;
&lt;p&gt;The &amp;ldquo;View more&amp;hellip;&amp;rdquo; links just use colour to stand out. They&amp;rsquo;re pretty unimportant.&lt;/p&gt;
&lt;p&gt;The bulk of the text is actually made of links, unlike traditional links, they&amp;rsquo;re not underlined and they&amp;rsquo;re not blue. It would just add to the noise if everything where underlined. But on mouseover, they turn blue and are underlined, clearly indicating that they&amp;rsquo;re links.&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve used four mechanisms to highlight relative importance: position, size, colour and lines. There are many more: font, &lt;strong&gt;styling&lt;/strong&gt;, boxes, underlining, indentation, etc.&lt;/p&gt;
&lt;p&gt;The purpose of good design is to draw attention to what&amp;rsquo;s important, to direct the flow of the eye in a way that builds a good narrative. Don&amp;rsquo;t be shy of using every tool at your disposal in doing that. While on the topic, the &lt;a href=&#34;http://www.amazon.com/Non-Designers-Design-Book-3rd-Designers/dp/0321534042/&#34;&gt;Non-Designer&amp;rsquo;s Design Book&lt;/a&gt; is a fantastic and readable book on design for engineers.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Always use grids to display&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;I can&amp;rsquo;t say this any better than &lt;a href=&#34;http://markboulton.co.uk/&#34;&gt;Mark Boulton&lt;/a&gt; of &lt;a href=&#34;http://subtraction.com&#34;&gt;subtraction.com&lt;/a&gt;, in his presentation &lt;a href=&#34;http://www.slideshare.net/huer1278ft/grids-are-good-right&#34;&gt;Grids are Good&lt;/a&gt;. Grids are pervasive in &lt;strong&gt;every form of good design&lt;/strong&gt;. It&amp;rsquo;s a fantastic starting point as well. Just read the slideshow and follow it blindly. You can&amp;rsquo;t go wrong.&lt;/p&gt;
&lt;p&gt;This dashboard uses 12-grid. The page is divided into two vertically. The left half has mostly text and the right half has statistics and help. There are 3 blocks within each, &lt;strong&gt;and they&amp;rsquo;re all the same size&lt;/strong&gt; (alignment is critical in good design)&lt;strong&gt;.&lt;/strong&gt; Two of the blocks on the left are subdivided into halves, while the bottom right &amp;ldquo;Links and help&amp;rdquo; section is subdivided into three. Well, it&amp;rsquo;s easier to show it than explain it:&lt;/p&gt;
&lt;p&gt;&lt;img alt=&#34;Picture of grid&#34; loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/infyblogs-dashboard-grid.webp&#34;&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Copy shamelessly&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The design for this dashboard was copied in part from &lt;a href=&#34;http://iammattthomas.com/27/1.png&#34;&gt;Wordpress 2.7&amp;rsquo;s new dashboard&lt;/a&gt;, part from the dashboards on Stephen Few&amp;rsquo;s book, and part from the winners of the &lt;a href=&#34;http://www.bonavistasystems.com/NewsMicroChartsCompetition.html&#34;&gt;2008 Excel dashboard competition&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Most of these designs are minimalist. There&amp;rsquo;s no extra graphics, jazzy logos, etc. that detract from the &lt;strong&gt;informational&lt;/strong&gt; content. This is an informational dashboard, not a painting.&lt;/p&gt;
&lt;p&gt;Good design is everywhere. View this presentation on &lt;a href=&#34;http://www.slideshare.net/hicksdesign/how-to-be-a-creative-sponge&#34;&gt;How to be a Creative Sponge&lt;/a&gt; to get a sense of the many sources where you can draw inspiration from. You&amp;rsquo;re much much better of copying good design than inventing bad ones.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;You can hack the dashboard yourself&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve uploaded the source for the dashboard at &lt;a href=&#34;http://infyblog-dashboard.googlecode.com/&#34; title=&#34;http://infyblog-dashboard.googlecode.com/&#34;&gt;http://infyblog-dashboard.googlecode.com/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Please feel free to browse through it, but &lt;strong&gt;don&amp;rsquo;t stop there!&lt;/strong&gt; Go ahead and tweak it to suit what &lt;strong&gt;you&lt;/strong&gt; think should be on an ideal dashboard. I&amp;rsquo;ll give access to the project to anyone who asks (leave a comment, mail me or call me at +44 7957 440 260).&lt;/p&gt;
&lt;p&gt;Please hack at it. Besides, it&amp;rsquo;s great fun learning jQuery and working on a distributed open source project.&lt;/p&gt;
&lt;p&gt;Now for some notes on how this thing works.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Bookmarklets bring Greasemonkey to any browser&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;This is implemented as a &lt;a href=&#34;http://en.wikipedia.org/wiki/Bookmarklet&#34;&gt;bookmarklet&lt;/a&gt; (a bookmark written in Javascript). It just loads the file &lt;a href=&#34;http://www.s-anand.net/infyblog-dashboard.js&#34;&gt;http://www.s-anand.net/infyblog-dashboard.js&lt;/a&gt; which does all the grunt work. This is the code for the bookmarklet.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;// Create a new a script element
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;createElement&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;script&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;// Set the source of the script element to my bookmarklet script
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;setAttribute&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;src&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;http://www.s-anand.net/infyblog-dashboard.js&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;// Add the script element to the head
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;// This does the the equivalent of:
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;// &amp;lt;head&amp;gt;&amp;lt;script src=&amp;#34;...&amp;#34;&amp;gt;&amp;lt;/script&amp;gt;&amp;lt;/head&amp;gt;
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getElementsByTagName&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;head&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)[&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;]&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;appendChild&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;c1&#34;&gt;// Return void. Not sure why, but this is required
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;void&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This form of the bookmarklet is perhaps it&amp;rsquo;s most powerful use. It lets you inject any script into any site. If you want to change it&amp;rsquo;s appearance, content, anything, just write it as a bookmarklet. (Think of it as the IE and Safari equivalent of Firefox&amp;rsquo;s &lt;a href=&#34;https://addons.mozilla.org/en-US/firefox/addon/748&#34;&gt;Greasemonkey&lt;/a&gt;.)&lt;/p&gt;
&lt;p&gt;So if you wanted to load &lt;a href=&#34;http://jquery.com/&#34;&gt;jQuery&lt;/a&gt; into any page:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Change the URL in line 5 above to the &lt;a href=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&#34;&gt;jQuery URL&lt;/a&gt; and add it as a bookmark. (Or use &lt;a href=&#34;http://www.learningjquery.com/2006/12/jquerify-bookmarklet&#34;&gt;Karl&amp;rsquo;s jQuery bookmarklet&lt;/a&gt;. It&amp;rsquo;s better)&lt;/li&gt;
&lt;li&gt;Go to any page, say the &lt;a href=&#34;http://www.imdb.com/chart/top&#34;&gt;IMDB Top 250&lt;/a&gt; for instance&lt;/li&gt;
&lt;li&gt;Click on the bookmarklet. Now your page is jQueryified. (If you used Karl&amp;rsquo;s bookmarklet, it&amp;rsquo;ll tell you so.)&lt;/li&gt;
&lt;li&gt;On the address bar, type &amp;ldquo;javascript:alert($(&amp;rsquo;table:eq(10) tr&amp;rsquo;).length)&amp;rdquo; and press enter.&lt;/li&gt;
&lt;li&gt;You should see 252, the number of rows on main table of the &lt;a href=&#34;http://www.imdb.com/chart/top&#34;&gt;IMDB Top 250&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Notes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;There are other &lt;a href=&#34;http://www.robertnyman.com/2009/01/19/extending-web-browser-functionality-greasemonkey-for-all-web-browsers/&#34;&gt;ways of adding Greasemonkey functionality to your browser&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;There are &lt;a href=&#34;http://www.bookmarklets.com/&#34;&gt;many&lt;/a&gt; &lt;a href=&#34;https://www.squarefree.com/bookmarklets/&#34;&gt;bookmarklet&lt;/a&gt; &lt;a href=&#34;http://subsimple.com/bookmarklets/default.asp&#34;&gt;directories&lt;/a&gt; &lt;a href=&#34;http://www.yourhtmlsource.com/accessibility/bookmarklets.html&#34;&gt;where&lt;/a&gt; &lt;a href=&#34;http://www.philburns.com/bookmarklets.html&#34;&gt;you&lt;/a&gt; &lt;a href=&#34;http://pimpmysafari.com/bookmarklets/&#34;&gt;can&lt;/a&gt; &lt;a href=&#34;http://www.sitepoint.com/article/bookmarklets/&#34;&gt;find&lt;/a&gt; &lt;a href=&#34;http://www.lifeclever.com/17-powerful-bookmarklets-for-your-iphone/&#34;&gt;bookmarklets&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;The dashboard is better written as a server-side app, but I don&amp;rsquo;t own any servers in our Intranet&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;jQuery is a powerful Javascript library&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Firstly, you don&amp;rsquo;t want to program Javascript without a library. You just don&amp;rsquo;t. The state of browser incompatibilities and DOM usability is just to pathetic to contemplate. Stop learning DOM methods. Pick any library instead.&lt;/p&gt;
&lt;p&gt;Going by popularity, you would do well to pick &lt;a href=&#34;http://jquery.com/&#34;&gt;jQuery&lt;/a&gt;. Here&amp;rsquo;s a graph of searches on Google for the popular Javascript libraries, and jQuery leads the pack.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://trends.google.com/trends/explore?date=all&amp;amp;q=jquery,prototype,dojo,ext,yui&#34;&gt;https://trends.google.com/trends/explore?date=all&amp;amp;q=jquery,prototype,dojo,ext,yui&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;I picked it in early 2007, and my reasons were that it:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Is small&lt;/strong&gt;. At that time, it was 19KB and was the smallest of the libraries. (Today it&amp;rsquo;s 18KB and has more features.)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Makes your code compact&lt;/strong&gt;. It lets you &lt;a href=&#34;http://www.s-anand.net/Chaining_functions_in_Javascript.html&#34;&gt;chain functions&lt;/a&gt;, and overloads the $() function to work with DOM elements, HTML strings, arrays, objects, anything.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Doesn&amp;rsquo;t pollute the namespace&lt;/strong&gt;. Just 2 global variables: jQuery and $. And you can make it not use $ if you like.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Is very intuitive&lt;/strong&gt;. You can learn it in an hour, and the &lt;a href=&#34;http://docs.jquery.com/&#34;&gt;documention&lt;/a&gt; is extremely helpful.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Is fully functional&lt;/strong&gt;. Apart from DOM manipulation, it covers CSS, animations and AJAX, which is all I want from a library.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;These days, I have some additional reasons:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;It&amp;rsquo;s extensible&lt;/strong&gt;. The &lt;a href=&#34;http://plugins.jquery.com/&#34;&gt;plugin ecosystem&lt;/a&gt; is rich.&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://code.google.com/apis/ajax/&#34;&gt;&lt;strong&gt;It&amp;rsquo;s hosted at Google&lt;/strong&gt;&lt;/a&gt;, and is really fast to load. Most often, it&amp;rsquo;s already cached in your users&amp;rsquo; browser.&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://ejohn.org/&#34;&gt;&lt;strong&gt;John Resig&lt;/strong&gt;&lt;/a&gt; is a genius. After &lt;a href=&#34;http://ejohn.org/projects/bringing-the-browser-to-the-server/&#34;&gt;env.js&lt;/a&gt; and &lt;a href=&#34;http://ejohn.org/blog/processingjs/&#34;&gt;processing.js&lt;/a&gt;, I trust him to advance jQuery better than other libraries.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;So anyway, the first thing I do in &lt;a href=&#34;http://www.s-anand.net/infyblog-dashboard.js&#34;&gt;the dashboard script&lt;/a&gt; is to load jQuery, using the same code outlined in the bookmarklet section above. The only addition is:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;script&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;onload&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;script&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;onreadystatechange&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;!&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;this&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;readyState&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;||&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;this&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;readyState&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;==&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;loaded&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;||&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;this&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;readyState&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;==&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;complete&amp;#34;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;nx&#34;&gt;callback&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;};&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This tells the browser to run the script &amp;ldquo;callback&amp;rdquo; once the script is loaded. My main dashboard function runs once jQuery is loaded.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;InfyBLOGS has most statistics the dashboard needs&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Thanks to posts from &lt;a href=&#34;http://blogs.ad.infosys.com/users/utkarshraj_atmaram/&#34;&gt;Utkarsh&lt;/a&gt; and &lt;a href=&#34;http://blogs.ad.infosys.com/users/simon_jose/&#34;&gt;Simon&lt;/a&gt;, I knew where to find most of the information for the dashboard:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;http://blogs.ad.infosys.com/tools/recent_comments.bml&#34;&gt;Comments page&lt;/a&gt; for your latest comments&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://blogs.ad.infosys.com/userinfo.bml?mode=full&#34;&gt;Profile page&lt;/a&gt; for your statistics: number of entries, interests, friends, etc.&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://blogs.ad.infosys.com/directory.bml?ut_days=7&#34;&gt;Directory page&lt;/a&gt; for recently updated blogs&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://blogs.ad.infosys.com/directory.bml?com_do=1&#34;&gt;Communities page&lt;/a&gt; for recently updated communities&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://blogs.ad.infosys.com/usage/&#34;&gt;Usage page&lt;/a&gt; for Infyblog statistics and popular referrers&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;http://blogs.ad.infosys.com/meme.bml&#34;&gt;Meme page&lt;/a&gt; for recently popular links&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The only things I couldn&amp;rsquo;t find were:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Friends posts&lt;/strong&gt;. I&amp;rsquo;d have liked to show the titles of recent posts by friends. Yeah, I know: blogs/user_name/friends has it, but thanks to user styles, it&amp;rsquo;s nearly impossible to parse in a standard way across users. I&amp;rsquo;d really like an RSS feed for friends.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Interests posts&lt;/strong&gt;. Would be cool to show recent posts by users who shared your your interest.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Communities posts&lt;/strong&gt;. Again, I&amp;rsquo;d have liked to show the recent posts in communities, rather than just the names of communities.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Using IFRAMEs, we can load these statistics onto any page&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Let&amp;rsquo;s say we want the latest 10 comments. These are available on the &lt;a href=&#34;http://blogs.ad.infosys.com/tools/recent_comments.bml&#34;&gt;comments page&lt;/a&gt;. To load data from another page, we&amp;rsquo;d normally use XMLHTTPRequest, get the data, and parse it — perhaps using &lt;a href=&#34;http://en.wikipedia.org/wiki/Regular_expressions&#34;&gt;regular expressions&lt;/a&gt;.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;$&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;get&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;/tools/recent_comments.bml&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;data&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;c1&#34;&gt;// Do some regular expression parsing with data
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;But from a readability and maintainability perspective, regular expressions suck. A cleaner way is to use jQuery itself to parse the HTML.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;$&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;get&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;/tools/recent_comments.bml&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;data&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;doc&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;$&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;data&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;c1&#34;&gt;// Now process the document
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This works very well for simple pages, but sadly, for our statistics, this throws a stack overflow error (at least on Firefox; I didn&amp;rsquo;t have the guts to try it on IE.)&lt;/p&gt;
&lt;p&gt;So on to a third approach. Why bother using Javascript to parse HTML, when we&amp;rsquo;re running the whole application in a browser, the most perfect HTML parser? Using IFRAMEs, we can load the whole page within the same page, let the browser do the HTML parsing.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;$&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;&amp;lt;iframe src=\&amp;#34;/tools/recent_comments.bml\&amp;#34;&amp;gt;&amp;lt;/iframe&amp;gt;&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;appendTo&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;body&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;load&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;doc&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;$&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;this&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;contents&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;();&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;c1&#34;&gt;// Now process the document
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;p&#34;&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;This way, you can read any page from Javascript &lt;strong&gt;within&lt;/strong&gt; the same domain. Since both the bookmarklet and statistics are on the &lt;a href=&#34;http://blogs.ad.infosys.com/&#34;&gt;InfyBLOGS&lt;/a&gt; domain, we&amp;rsquo;re fine.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;jQuery parses these statistics rather well&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Now the &lt;code&gt;doc&lt;/code&gt; variable contains the entire comments page, and we can start process it. For example, the comments are on the rows of the &lt;strong&gt;second&lt;/strong&gt; table in the page. (The first table is the navigation on the left.). So&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;doc&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;find&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;table:eq(1) tr&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;gets the rows in the second table (&lt;code&gt;table:eq(0)&lt;/code&gt; is the first table). Now, we can go through each row, extract the user, when the comment was made, links to the entry and to the comment.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;doc&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;find&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;table:eq(1) tr&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;slice&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;0&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;&lt;span class=&#34;mi&#34;&gt;8&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;map&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;e&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;$&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;k&#34;&gt;this&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;nx&#34;&gt;user&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;e&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;find&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;td:eq(0) b&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;text&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;nx&#34;&gt;when&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;e&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;find&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;td:eq(0)&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;text&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;replace&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;user&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;s1&#34;&gt;&amp;#39;&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;nx&#34;&gt;post&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;e&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;find&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;td:eq(1) a:contains(Entry Link)&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;attr&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;href&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;nx&#34;&gt;cmnt&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;e&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;find&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;td:eq(1) a:contains(Comment Link)&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;attr&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;href&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;        &lt;span class=&#34;c1&#34;&gt;// return HTML constructed using the above information
&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;p&#34;&gt;});&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Google Charts API displays dynamic charts&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Another cool thing is that we can use &lt;a href=&#34;http://code.google.com/apis/chart/&#34;&gt;Google Charts&lt;/a&gt; to display charts without having to create an image beforehand. For instance, the URL:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;http://quickchart.io/chart?cht=lc&amp;amp;chs=300x200&amp;amp;chd=t:5,10,20,40,80&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;shows an image with a line chart through the values (5,10,20,40,80).&lt;/p&gt;
&lt;p&gt;&lt;img alt=&#34;Google chart example&#34; loading=&#34;lazy&#34; src=&#34;http://quickchart.io/chart?cht=lc&amp;chs=300x200&amp;chd=t:5,10,20,40,80&#34;&gt;&lt;/p&gt;
&lt;p&gt;The dashboard uses &lt;a href=&#34;http://en.wikipedia.org/wiki/Sparklines&#34;&gt;sparklines&lt;/a&gt; to plot the trends in InfyBLOG statistics. These are supported by Google Charts. We can extract the data form the &lt;a href=&#34;http://blogs.ad.infosys.com/usage/&#34;&gt;usage page&lt;/a&gt; and create a new image using Google Charts that contains the sparkline.&lt;/p&gt;
&lt;p&gt;If you want to play around with Google Charts without mucking around with the URL structure, I have a relatively easy to use &lt;a href=&#34;http://www.s-anand.net/chart&#34;&gt;chart constructor&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Always use CSS frameworks&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Libraries aren&amp;rsquo;t restricted to Javascript. &lt;a href=&#34;http://en.wikipedia.org/wiki/CSS_framework&#34;&gt;CSS frameworks&lt;/a&gt; exist, and as with Javascript libraries, these are a no-brainer. It&amp;rsquo;s not worth hand-coding CSS from scratch. Just build on top of one of these.&lt;/p&gt;
&lt;p&gt;The state of CSS frameworks isn&amp;rsquo;t as advanced as in Javascript. Yahoo has it&amp;rsquo;s &lt;a href=&#34;http://developer.yahoo.com/yui/grids/&#34;&gt;UI grids&lt;/a&gt;, &lt;a href=&#34;http://www.blueprintcss.org/&#34;&gt;Blueprint&lt;/a&gt;&amp;rsquo;s pretty popular and I found &lt;a href=&#34;http://monc.se/tripoli/&#34;&gt;Tripoli&lt;/a&gt; to be nice, but the one I&amp;rsquo;m using here is &lt;a href=&#34;http://960.gs/&#34;&gt;960.gs&lt;/a&gt;. It lets you create a 12-grid and 16-grid on a 960-pixel wide frame, which is good enough for my purposes.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;At nearly 2,500 words, this is the longest post I&amp;rsquo;ve ever written. It took a day to design and code the dashboard, but longer to write this post. Like Paul Buchheit says, it&amp;rsquo;s easier to &lt;a href=&#34;http://paulbuchheit.blogspot.com/2009/01/communicating-with-code.html&#34;&gt;communicate with code&lt;/a&gt;. I&amp;rsquo;ve also violated my principle of &lt;a href=&#34;http://www.s-anand.net/Less_is_more.html&#34;&gt;Less is More&lt;/a&gt;. My apologies. But to re-iterate:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Please hack it&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://files.s-anand.net/blog/a/reco.tar.gz&#34;&gt;Download the code and data&lt;/a&gt;.&lt;/p&gt;
&lt;hr&gt;
&lt;h2 id=&#34;comments&#34;&gt;Comments&lt;/h2&gt;
&lt;!-- wp-comments-start --&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;sujays&lt;/strong&gt; &lt;em&gt;26 Jan 2009 7:14 am&lt;/em&gt;:
am an x-infy guy and my id(sujaychandiran_s) still works in ur &amp;ldquo;suggest friends&amp;rdquo; feature.. does this connect 2 infy DB?.. if yes, doesnt this pose a security threat ? am jus curious !&lt;br&gt;
&lt;br&gt;
me cant hack, so cant confirm :)&lt;br&gt;
&lt;br&gt;
Sujay&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;S Anand&lt;/strong&gt; &lt;em&gt;26 Jan 2009 9:23 am&lt;/em&gt;:
@Sujay: nah, it&amp;rsquo;s not a security risk. It&amp;rsquo;s just a static dump of data, and&lt;br&gt;
is a bit out-dated in any case. If anything, it may be a privacy risk:&lt;br&gt;
recruiters might try to mine for interests and pick people that way. But in&lt;br&gt;
this economy, I guess no one&amp;rsquo;s worried about that.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;gwatts&lt;/strong&gt; &lt;em&gt;26 Jan 2009 6:52 pm&lt;/em&gt;:
If you like jQuery, and you like sparklines then you can combine the two and avoid the browser roundtrips to fetch externally rendered images:&lt;br&gt;
&lt;a href=&#34;http://omnipotent.net/jquery.sparkline/&#34;&gt;http://omnipotent.net/jquery.sparkline/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Thejesh GN&lt;/strong&gt; &lt;em&gt;26 Jan 2009 10:33 pm&lt;/em&gt;:
Very cool.&lt;br&gt;
I guess we can add buttons for add/edit posts.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;S Anand&lt;/strong&gt; &lt;em&gt;31 Jan 2009 5:59 am&lt;/em&gt;:
That&amp;rsquo;s a great plugin, Gareth! Look forward to using it. Thanks.&lt;/li&gt;
&lt;/ul&gt;
&lt;!-- wp-comments-end --&gt;
</description>
    </item>
    <item>
      <title>Keyword searches as a Web command line</title>
      <link>https://www.s-anand.net/blog/keyword-searches-as-a-web-command-line/</link>
      <pubDate>Fri, 05 Sep 2008 12:00:00 +0000</pubDate>
      <guid>https://www.s-anand.net/blog/keyword-searches-as-a-web-command-line/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;http://tools-for-thought.com/2008/09/03/15-ubiquity-commands-to-enhance-your-web-experience/&#34;&gt;Andre&amp;rsquo;s mentions&lt;/a&gt; dumping &lt;a href=&#34;http://www.google.com/chrome&#34;&gt;Google Chrome&lt;/a&gt; because of lack of extension support, especially &lt;a href=&#34;https://wiki.mozilla.org/Labs/Ubiquity&#34;&gt;Ubiquity&lt;/a&gt;, and lists 15 useful Ubiquity commands.&lt;/p&gt;
&lt;p&gt;If you haven&amp;rsquo;t seen Ubiquity, you should. It&amp;rsquo;s a great extension that transforms your browser into an Internet command prompt. It is modelled on the &lt;a href=&#34;http://www.humanized.com/enso/launcher/&#34;&gt;Enso Launcher&lt;/a&gt;, which is a great piece of work by itself.&lt;/p&gt;
&lt;p&gt;I wasn&amp;rsquo;t quite prepared to let go of Chrome that easily. On Task Manager, seeing 10 Chrome processes, the largest of which takes up 60MB, is a lot more comforting, psychologically, than 1 Firefox process taking up 300MB. (I rarely hit my 1GB RAM limit, so it shouldn&amp;rsquo;t matter either way. Yet, the spendthrift in me keeps watching.)&lt;/p&gt;
&lt;p&gt;So the question is, can I do all the items on his list &lt;strong&gt;without using Ubiquity&lt;/strong&gt;?&lt;/p&gt;
&lt;p&gt;Let&amp;rsquo;s pick the easiest. Google search. If you typed &amp;ldquo;g some words&amp;rdquo; on Ubiquity, you get the Google search results for &amp;ldquo;some words&amp;rdquo;. But you already have that. If you have Firefox, typing any words on the address bar automatically does a Google search for you. On Internet Explorer, it search live.com, but you can easily change that by installing the &lt;a href=&#34;http://toolbar.google.com/&#34;&gt;Google Toolbar&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;But the great thing is that this can be customised. On Firefox, click on the down arrow icon next to the search box and select &amp;ldquo;Manage Search Engines&amp;hellip;&amp;rdquo; to see a list of your search engines. Select the one you want to use, click on &amp;ldquo;Edit Keyword&amp;hellip;&amp;rdquo; and select the keyword you want. For instance, I&amp;rsquo;ve typed &amp;ldquo;google&amp;rdquo;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://www.s-anand.net/blog/assets/flickr-manage-search-engines_2830355060_o-png.webp&#34; title=&#34;Manage Search Engines by S Anand, on flickr&#34;&gt;&lt;img alt=&#34;Manage Search Engines&#34; loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/flickr-manage-search-engines_2830355060_o-png.webp&#34;&gt;&lt;/a&gt; &lt;a href=&#34;https://www.s-anand.net/blog/assets/flickr-add-keywords_2830355062_o-png.webp&#34; title=&#34;Add Keywords by S Anand, on Flickr&#34;&gt;&lt;img alt=&#34;Add Keywords&#34; loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/flickr-add-keywords_2830355062_o-png.webp&#34;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;So when I type &amp;ldquo;google some words&amp;rdquo; on the address bar (not the search bar, the address bar) I get search results for &amp;ldquo;some words&amp;rdquo;. These are called &lt;a href=&#34;http://www.mozilla.org/docs/end-user/keywords.html&#34;&gt;keyword searches&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;On Firefox, you add your own search engines, but you do that using bookmarks. Press Ctrl-Shift-B (Organize Bookmarks) and create a New Bookmark. You can type in any URL in the location field. If you type &amp;ldquo;%s&amp;rdquo; as part of the URL, that will be replaced by the search string. So for instance, using a location &lt;code&gt;http://en.wikipedia.org/wiki/Special:Search?search=%s&lt;/code&gt; and the keyword &amp;ldquo;wiki&amp;rdquo; will do a Wikipedia search for &amp;ldquo;Harry Potter&amp;rdquo; if you type &amp;ldquo;wiki Harry Potter&amp;rdquo; on the address bar.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;It works on Internet Explorer&lt;/strong&gt; as well, even with version 6. The easiest way is to download &lt;a href=&#34;http://www.microsoft.com/windowsxp/Downloads/powertoys/Xppowertoys.mspx&#34;&gt;TweakUI&lt;/a&gt;. Go to Internet Explorer - Search. Click on the Create button. Type in a keyword (called Prefix) and a URL. If you type &amp;ldquo;%s&amp;rdquo; as part of the URL, that will be replaced by the search string.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://www.s-anand.net/blog/assets/flickr-tweakui_2830355066_o-png.webp&#34; title=&#34;TweakUI by S Anand, on Flickr&#34;&gt;&lt;img alt=&#34;TweakUI&#34; loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/flickr-tweakui_2830355066_o-png.webp&#34;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;On Google Chrome, get to the Options (what, no shortcut key?) and in the Basics tab, click the Manage button. Here, you can click on &amp;ldquo;Add&amp;rdquo; to add a search engine.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;https://www.s-anand.net/blog/assets/flickr-chrome_2830355070_o-png.webp&#34; title=&#34;Chrome by S Anand, on Flickr&#34;&gt;&lt;img alt=&#34;Chrome&#34; loading=&#34;lazy&#34; src=&#34;https://www.s-anand.net/blog/assets/flickr-chrome_2830355070_o-png.webp&#34;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;So that takes care of all the basic searches: Google, Amazon, IMDB, Wikipedia, etc.&lt;/p&gt;
&lt;p&gt;\&lt;/p&gt;
&lt;p&gt;Can we go further? Item 8 on &lt;a href=&#34;http://tools-for-thought.com/2008/09/03/15-ubiquity-commands-to-enhance-your-web-experience/&#34;&gt;the list&lt;/a&gt; caught my attention:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Twit.&lt;/strong&gt; As much as I love full-featured Twitter clients like TweetDeck, nothing beats the simplicity of hitting &lt;strong&gt;Ctrl-Space&lt;/strong&gt; and typing &lt;strong&gt;twit [message] to so_and_so&lt;/strong&gt;, or sending a selection of text using &lt;strong&gt;twit this to so_and_so&lt;/strong&gt;. At the moment, there&amp;rsquo;s no way to receive tweets or ping Twitter for new messages.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;I don&amp;rsquo;t use &lt;a href=&#34;http://twitter.com/&#34;&gt;Twitter&lt;/a&gt;, but I do use &lt;a href=&#34;http://identi.ca/sanand0&#34;&gt;Identi.ca&lt;/a&gt;, and I would like something like this. Right now, I&amp;rsquo;m using Google Talk to update identi.ca. Two problems. I don&amp;rsquo;t like chatting, and logging on exposes me to a lot of distraction. Secondly, I&amp;rsquo;d rather not have to open an application just for this. Something in the browser would be perfect. But is it possible?&lt;/p&gt;
&lt;p&gt;&lt;a href=&#34;http://identi.ca/&#34;&gt;Identi.ca&lt;/a&gt; (and Twitter, and most micro-blogging services) let you update via e-mail. So if I could write a program that would mail identi.ca, I should be done. So I did that with a Perl script.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-perl&#34; data-lang=&#34;perl&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;my&lt;/span&gt; &lt;span class=&#34;nv&#34;&gt;$q&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;new&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;CGI&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;open&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;OUT&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;s&#34;&gt;&amp;#34;|/usr/sbin/sendmail -t&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;print&lt;/span&gt; &lt;span class=&#34;n&#34;&gt;OUT&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;join&lt;/span&gt; &lt;span class=&#34;s&#34;&gt;&amp;#34;\n&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;s&#34;&gt;&amp;#34;From: my.authenticated.id@gmail.com&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;s&#34;&gt;&amp;#34;To: 1234567890abcdef@identica.com&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;s&#34;&gt;&amp;#34;Subject: \n\n&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;nv&#34;&gt;$q&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;-&amp;gt;&lt;/span&gt;&lt;span class=&#34;n&#34;&gt;param&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#39;q&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;So if I placed this at &lt;a href=&#34;https://www.s-anand.net/identica&#34;&gt;www.s-anand.net/identica&lt;/a&gt; (no, I haven&amp;rsquo;t placed it there), I just need to create a keyword search with a prefix Tidentica&amp;quot; that points to &lt;code&gt;www.s-anand.net/identica?q=%s&lt;/code&gt;. Then I can type &amp;ldquo;identica Here is a message that I want to post&amp;rdquo; on the address bar, and it gets posted.&lt;/p&gt;
&lt;p&gt;Actually, if you can write your own programs, the possibilities are endless. If you&amp;rsquo;re looking for someone to host this sort of thing for free, &lt;a href=&#34;http://appengine.google.com/&#34;&gt;Google&amp;rsquo;s AppEngine&lt;/a&gt; may be a reasonable point to start.&lt;/p&gt;
&lt;p&gt;\&lt;/p&gt;
&lt;p&gt;But the real power of this comes with Javascript. Those URLs that you saw for keyword searches? &lt;strong&gt;Those can be Javascript URLs&lt;/strong&gt;. So item 9 on &lt;a href=&#34;http://tools-for-thought.com/2008/09/03/15-ubiquity-commands-to-enhance-your-web-experience/&#34;&gt;the list&lt;/a&gt;&amp;hellip;&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Word count.&lt;/strong&gt; As a student of copywriting, I’m frequently curious about an article’s word length. Highlighting the desired text and entering &lt;strong&gt;word count&lt;/strong&gt; into Ubiquity will give you just that.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;&amp;hellip; might just be possible.&lt;/p&gt;
&lt;p&gt;It&amp;rsquo;s easy to get the selection. The following snippet gives you the current selection. (Tested in IE 5.5 - 8, Firefox 3 and Google Chrome. Should work for Opera, Safari.)&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;createRange&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;text&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;toString&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;To get the word count, just split by white space, and count the results:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;createRange&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;text&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;toString&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;alert&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;split&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;sr&#34;&gt;/\s+/&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;length&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34; words&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Now, this whole thing can be made into a keyword search. Let&amp;rsquo;s call it count. If I go to the address bar and type &amp;ldquo;count it&amp;rdquo;, I want to use count the words in the selection. If I typed &amp;ldquo;count some set of words here&amp;rdquo;, I want to count the words in &amp;ldquo;some set of words here&amp;rdquo;. Here&amp;rsquo;s how to do that.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;javascript&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;%s&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;==&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;it&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;createRange&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;text&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;toString&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;alert&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;split&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;sr&#34;&gt;/\s+/&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;length&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34; words&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Now, put all of this in one line and add it as your keyword search. Try it!&lt;/p&gt;
&lt;p&gt;(Note: You need to replace { curly braces } with %7B and %7D in Google Chrome. It interprets curly braces as a special command. Also, Chrome replaces spaces with a +, so the word count will always return 1 if you search for &amp;ldquo;count some set of words here&amp;rdquo;.)&lt;/p&gt;
&lt;p&gt;\&lt;/p&gt;
&lt;p&gt;You could use selections to search as well. If you wanted to Google your selection, just use:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;javascript&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;%s&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;==&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;it&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;  &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;document&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;selection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;createRange&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;text&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;?&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;window&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;getSelection&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;().&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;toString&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;    &lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;s2&#34;&gt;&amp;#34;&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nx&#34;&gt;location&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;replace&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;http://www.google.com/search?q=&amp;#34;&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;s&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Typing &amp;ldquo;google it&amp;rdquo; will search for your selected words on Google. &amp;ldquo;google some words&amp;rdquo; will search for &amp;ldquo;some words&amp;rdquo; on Google.&lt;/p&gt;
&lt;p&gt;\&lt;/p&gt;
&lt;p&gt;I&amp;rsquo;ve configured these keyword searches on my browser to:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Share sites&lt;/strong&gt;. Typing &amp;ldquo;share google&amp;rdquo; adds the page to Google Reader, &amp;ldquo;share delicious&amp;rdquo; posts it to del.icio.us, &amp;ldquo;share digg&amp;rdquo; diggs the page, etc.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Send mail from the address bar&lt;/strong&gt;. Typing &amp;ldquo;mail &lt;a href=&#34;mailto:someone@gmail.com&#34;&gt;someone@gmail.com&lt;/a&gt; sub:This is the subject. Rest of the message&amp;rdquo; in the address bar will send the mail out. (Of course, you need to have created a mail gateway. I&amp;rsquo;ll try and share this shortly.)&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Add entries to my calendar&lt;/strong&gt;. Typing &amp;ldquo;remind Prepare dinner at 8pm&amp;rdquo; adds a reminder to my calendar to prepare dinner at 8pm.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Highlight parts of a page&lt;/strong&gt;. Typing &amp;ldquo;highlight it&amp;rdquo; highlights what I&amp;rsquo;ve selected on the page. Even after I remove the selection, the highlighting stays. Typing &amp;ldquo;highlight some phrase&amp;rdquo; highlights all occurrences of &amp;ldquo;some phrase&amp;rdquo; in the entire document. The colours change every time you use it on a page, so you can search for multiple words and see where how they&amp;rsquo;re distributed.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Replaces tables with charts&lt;/strong&gt;. Typing &amp;ldquo;chart it&amp;rdquo; with a table selected replaces the table with a chart. Typing &amp;ldquo;chart it as pie&amp;rdquo; or &amp;ldquo;chart it as scatter&amp;rdquo; changes the chart type.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;You could actually take any bookmarklet and convert it into a keyword search. Which means that practically anything you can do on Javascript can be convert into a command-line-like syntax on the address bar.&lt;/p&gt;
&lt;p&gt;So there it is! You can pretty much have a web command line. I wonder if we could add UNIX-pipes-like functionality.&lt;/p&gt;
</description>
    </item>
  </channel>
</rss>
