published on 12.07.2009 15:52.

Updated is-gd for Ubiquity

See this post for a description of Ubiquity.

I adapted the script for the API changes introduced with 0.5, and put the script on github.

Posted in , ,  | Tags  | no comments | no trackbacks

published on 11.07.2009 12:12.

Cross-browser video support with HTML 5

Embedding video is easy in HTML 5, use the native <video> tag. Firefox 3.1+, Safari 4+ and Google Chrome (Windows) already have experimental support for it.

The HTML 5 spec does not specify which video format and codec should be used, so naturally ;-) the browser vendors have picked different formats. Getting videos to play cross-browser still is no problem, since the <video> tag can contain more than one source. So give an ogg and a quicktime version of the video, and all browsers currently supporting the <video> tag will be happy.

Example

The code
<video controls width="320" height="240">

  <!-- Firefox 3.1+, Google Chrome -->
  <source src="/files/swiss.ogg" type="video/ogg">

  <!-- Safari 4+, Google Chrome -->
  <source src="/files/swiss.mov" type="video/quicktime">

  <!-- All others (including Internet Explorer and Opera) -->
  Sorry, your browser doesn't seem to support the <code>video</code> element.

</video>
How to create the video formats (OS X)

Easy. Use Quicktime Player’s export feature (File > Export). But first get the xiph Quicktime Components to add .ogg support to Quicktime.

Posted in ,  | Tags , , ,  | no comments | no trackbacks

published on 28.03.2009 19:46.

Ubiquity is the shit!

Ubiquity is a Mozilla Labs add-on for Firefox. It’s a new way of interacting with the browser and web content. Imagine Quicksilver, but for everything that can be reached from the browser. Common examples are controllign the browser, translating text on a web page in-place, looking up an Google maps address in-place, you imagine. It let’s you throw out half of the other add-ons. Oh, and on the Mac, it integrates with Growl.

And it’s super-easy to extend with JavaScript!

Example – using is.gd to shorten URLs

I hacked this together using the pretty good documentation. The code takes the text selection (an URL) and shortens it via is.gd.

CmdUtils.CreateCommand({

  name: "is-gd",

  description: "Replaces the selected URL with a short URL generated with is.gd.",

  author: { name: "Phillip Oertel" },

  takes: {"url to shorten": noun_arb_text},

  execute: function(urlToShorten) {
    var baseUrl = "http://is.gd/api.php";
    var params  = {longurl: urlToShorten.text};
    jQuery.get( baseUrl, params, function( shortUrl ) {
      CmdUtils.setSelection( shortUrl );
    });
  }

});

I embedded the above script into this page—if you installed the Ubiquity add-on, Firefox will notify you. Install the script, then select an URL anywhere on the page or in the location bar, press Alt-Space and type “is-gd”. The selected text will be replaced with a shortended URL. Neat!

They really have easy administration and extension in mind—go to chrome://ubiquity/content/cmdlist.html to get an in-browser interface to Ubiquity. You can directly write the scripts in there. Oh, and did I mention it already ships with jquery ?

Posted in , ,  | no comments | no trackbacks

published on 03.05.2008 15:55.

Running Firefox 3 beta, howto

happy bookmarking

I’ve used Firefox 3 beta for over a month now. And I am very happy! Not only is it stable and runs a bit faster, the best thing is the seriously improved bookmarking. Bookmarks can now be tagged, and the whole thing comes with an imho well thought-out user interface. visit dria.org for a nice overview. so bookmarks finally become useful as a knowledge archive, you now actually find what you once bookmarked.

running a nightly build

Firefox 3 beta 5 (for OS X) crashed fairly regularly on my box, so I tried running off the nightly builds. So far, they have been more stable, the crashing is gone. Additional benefit: I can get daily updates by going to “Help” > “Check for updates”. Excellent!

You’ll find the latest Firefox 3pre build here.

Enabling Extensions

Once you are so far, most extensions stop working—not good at all. Most extensions have not been updated for Firefox 3, so Firefox disables them on startup. But most of them will work in Firefox 3 nevertheless, all you need to do is create the boolean user preference “extensions.checkCompatibility” and set it to false (type about:config in the URL-bar to access the user preferences).

Chromatabs extension

On a side note, try the chromatabs extension! It colors tabs with a color unique to the page displayed, so if you memorize your favorite sites’ colors, you’ll easily spot them in the tab bar.

Posted in  | Tags  | no comments | no trackbacks

published on 23.04.2008 18:03.

Firefox 3 uses sqlite to store bookmarks (and most other things)

ever wanted to search your bookmarks with

SELECT * FROM moz_bookmarks WHERE title LIKE "%ruby%";

now you can:

in your firefox profile directory (~/Library/Application Support/Firefox/Profiles/xxxx.default on a Mac), type:

# open db file
$ sqlite3 places.sqlite

# show available tables
sqlite> .tables

# set output to sql insert statements
sqlite> .mode insert

# send output to file "firefox_bookmarks" 
sqlite> .output firefox_bookmarks

sqlite> SELECT * FROM moz_bookmarks WHERE title LIKE "%ruby%";

# list other available commands & options
sqlite> .help

Or, if you want JSON output you can export all bookmarks via the GUI. Use Bookmarks > Organize Bookmarks, click the rightmost icon in the top navigation and choose Export.

Posted in ,  | Tags , , ,  | no comments | no trackbacks

published on 24.11.2007 20:39.

Firefox LiveHTTPHeaders bugfix for Alt-L / @

the firefox LiveHTTPHeaders extension is a great tool for monitoring the http requests going on between your browser and a server—ideal for debugging requests or optimizing caching.

however, the extension has a small but very annoying bug, especially on Mac OS X. it’s sidebar shortcut is Alt-L, which is already occupied by the @ sign. so with this extension installed, you can’t type @s anymore. aaarrgh!

the bug is already (somewhat) fixed in CVS, but it doesn’t look like there’ll be an official release anytime soon. so i dove into the code, did the bare minimum to fix the problem, and made a new xpi. install the patched extension here: livehttpheaders-cvs-patched-071124.xpi.

i moved the sidebar shortcut to Shift-Cmd-J. ”!!?$ Shift-Cmd-J ???!!”, you ask?
“why from Alt-L to Shift-Cmd-J?” well, first, the CVS version already moved the command to Shift-Cmd-L. good. unfortunately Shift-Cmd-L (and Shift-Cmd-K) are already used by the firebug extension, so i moved the key leftwards to the first unoccupied one.

as mentioned above, i did the bare minimum to get the extension to work. no perfection here … but i hope it works for you, too!

Posted in , ,  | Tags , , , ,  | 1 comment

published on 30.01.2006 15:53.

why we love internet explorer so much

what’s wrong with this javascript?

function showDetailInNewWindow()
{
   // set new window properties
   top    = 200;
   left   = 250;
   width  = 680;
   height = 300;
   // ... proceed to open new window
}

the error message ie gave me: “not implemented, line 26, character 7”. in _which _of the included js files, you ask? well if it gave that information out, the error would be too easy to find, wouldn’t it?! and when you finally debugged which file it was, the line number was a couple of lines off.

this error message is as useful as asking your grandma’s parrot what was wrong with the code. except the parrot’s reply would be more intelligent.

2 hours lost. talk about efficient development. i’ll consider writing my front-ends in xul.

the error was (i figure): you shouldn’t use “top” inside a function. JS has all global vars in function scope as well, and ie allows you to omit “window” in some expressions. i.e. ie thought i was trying to say “window.top = 200”. which it

  • should have just done
  • complained that it’s a read-only property
  • complained that the object window doesn’t have that (public) property

or maybe top is a completely reserved keyword, why didn’t it tell me???

of course i only had to resort to opening the details in a new browser window since IE first needed loads of hacks and javascript expressions to get the data table i am displaying to look it as i wanted, and then, second completely messed up the while document when dynamically embedding the detail information into the current page (“ajax”).

ie 6 is definitely web 1.0.

Posted in , ,

published on 10.02.2004 00:00.

mozilla firefox

being a long-time user of the firebird (=firefox) web browser already, i had to incidently return to mozilla to appreciate just how much better this firefox thing is already. not even to mention microsoft internet explorer (what, you are still using that???). firebird is now available in version 0.8, renamed to firefox.

give it a try, you will not regret it (see also below "weapon of choice: Mozilla" for some starting tips).

Get Firefox

also available from the same people: an email program that doesn't have any virus-autoinstallation, but instead many useful features, like very accurate spam filtering, safe message encryption and spell checking. creating great products is not necessarily about money …

Posted in

published on 24.05.2003 00:00.

weapon of choice: Mozilla

ein paar tips für meinen day-to-day webbrowser mozilla. Das meiste funktioniert auch mit kompatiblen wie Netscape 6 und 7 oder Chimera.

  1. Text schneller finden

    um den text "Sonnenblume" innerhalb einer HTML-Seite oder email zu suchen, das zeichen / (slash) eingeben und direkt danach anfangen "Sonnenblume" zu tippen. Also nacheinander folgendes: /Sonn. der cursor springt schon nach eingabe des ersten buchstaben zur fundstelle des texts und markiert ihn grün.
    Um zur nächsten Fundstelle weiterzuspringen, F3 drücken.
    Um die sucherei zu beenden, Escape drücken.
    Wenn das ganze nicht funktioniert, einmal mit der maus in den text klicken und nochmal versuchen.
  2. lernfähiger spamfilter

    ab Version 1.3 (Dein Browser: kein Mozilla ...) hält Mozilla die Lösung für alles Spamgeplagten bereit. Spam wird automatisch erkannt und aussortiert. Unerwünschte Emails die noch nicht als Spam erkannt werden, markiert man von hand, und nach einiger lernzeit hat man kaum noch Spam im eingangsordner. im Mailprogramm zu finden und konfigurieren unter "Tools > Junk Mail Controls".
  3. tastaturkürzel

    • Neuen Tab öffnen: Strg-T
    • Tab schließen: Strg-W
    • Link in neuem Tab öffnen: Strg-Click
    • zum nächsten Tab wechseln: Strg-PageUp
    • zum vorhergehenden Tab wechseln: Strg-PageDown
    • HTML-Quelltext anzeigen: Strg-U
    • Emailprogramm öffnen: Strg-2
    • neue Email schreiben: Strg-M
    • Email absenden: Strg-Enter
    • Schriftgröße größer: Strg-+
    • Schriftgröße kleiner: Strg-+
    • zum nächsten Feld springen (in einem Formular): Tab
    • Sidebar ein-/ausblenden. (die genialen Sidebars hätten hier eigentlich einen eigenen Oberpunkt verdient): F9
    • Vollbild-Modus ein-/ausschalten :F11
    • Bookmark speichern. Und zwar mit der Möglichkeit das Bookmark in einen Ordner zu sortieren und die Infos zu bearbeiten (nur so finde ich sie später wieder): Strg+Shift+D
  4. preferences toolbar

    "the browser tool you can't live without"
    • Meine Lieblingsseiten haben blinkenden hellgrünen text auf rosa hintergrund. schriftgröße 200, und viele animierte bilder.
    • manche seiten öffnen nach jedem klick drei neue popups.
    • manche seiten sind sehr langsam, und man will keine bilder laden.
    • manche seiten haben unerträgliche java-animationen.
    • manchmal will man ohne Cookies surfen.
    • manchmal will man einen anderen Webbrowser vortäuschen.
    • manchmal will man keinen Referer: header senden.
    Mit dem PrefBar ist das alles kein problem. er wird als neue menüleiste des browsers hinzugefügt. so läßt sich per klick alles unerwünschte ab-/umschalten. seite hat furchtbare farben? "Colors" deaktivieren, dann werden mozillas standardfarben verwendet. Unleserliche schriftgröße? "Fonts" deaktivieren. etc. etc.
    Neu ist, das eigene Buttons erstellt werden können. Browserfenster-Größe auf 800x600 ändern? Mit einem Klick!
    Herunterzuladen bei xulplanet.com.
  5. pinball theme

    das design von mozilla läßt sich anpassen, und wir sind uns einig, das beste theme ist: pinball.
  6. JavaScript Debug-Konsole

    für die JavaScripter unter uns gibt es die JS konsole, die beim debuggen wegen ihrer klaren fehlermeldungen eine große hilfe ist. Zu finden im Menü "Tools > Web Development".
  7. komfortabler Konfigurations-Editor

    Mozilla läßt sich endlos anpassen. Das ging bisher nur über die bearbeitung von JavaScript-Dateien in einem Texteditor.
    Seit einiger Zeit gibt es einen bequemen editor für sämtliche einstellungen die bei mozilla verändert werden können. im browser die folgende url eigeben: about:config. aber vorsicht, da kann man auch schaden anrichten. ein paar vorschläge auf der mozilla-homepage.
  8. Internet-Suche per URL-Feld

    In das Feld in das man normalerweise internet-adressen eingibt die gewünschten suchbegriffe eintippen. dann mit der PageDown - Taste das Eingabefeld aufklappen und "Search suchmaschinenname for" auswählen. In den Voreinstellungen läßt sich unter "Navigator > Internet Search" einstellen, welche suchmaschine verwendet werden soll.
  9. mozilla custom keywords

    noch ein supertrick mit bookmarks und dem url-feld: mozilla custom keywords.
  10. Werbebanner ausblenden

    Auf ein als Werbebanner erkanntes bild mit der rechten Maustaste klicken und "Bilder von diesem Server blockieren" auswählen. Achtung: das funktioniert nur, wenn die Werbeeinblendungen von einem anderen Server als die Webseite kommen!
  11. personal toolbar folder

    in dem kann man unterordner anlegen und sich so aufklappbare menüs anlegen. ausserdem kann man eine aktuell angezeigte webseite dem toolbar hinzufügen, in dem man das bookmarksymbol vor der url per drag and drop auf den toolbar zieht.
    in verbindung mit dem toolbar sind favelets genial.
  12. bookmark-watcher

    mozilla sagt bescheid, wenn eine gebookmarkte seite aktualisiert wurde: bookmark-manager öffnen. gewünschten bookmark mit rechts anklicken und Eigenschaften anzeigen. unter 'Schedule' und 'Notify' kann man einstellen, wann und wie auf aktualisierungen überprüft wird.
  13. was vergessen?

    sagt mir bitte bescheid, wenn ihr noch was nützliches kennt. daaanke.
  14. mehr …

Posted in