{ Monthly Archives }

March 2010

Mediawiki Acronyms

I was working on a project that used a lot acronyms and terminology that I didn’t know yet. It was making me crazy, so eventually I created a Terminology extension for media wiki.

You can see a demo of it on CyanogenMod’s Wiki. And see the Terminology source page. (and contribute to it!)

Anyway, hope it helps someone else.

2010 03 31

html
technology

Comments (3)

Permalink

Twisty 3: Simple and lightweight Disclosure Triangles for the web

Twisties, otherwise known as “Disclosure Triangles” are little triangles (►) that twist (▼) when clicked to hide or show content on the page. I’m working on a web page that has a lot of content, but didn’t want it all displayed all the time. I searched around for a little while trying to find a nice example written by someone else, but came up empty. Probably other people thought this was too simple, or my searching skills failed me. Either way, I ended up writing this myself. These were my requirements:

  • Cross-platform:  It should work on my cell phone, on IE6, and real web browsers
  • Robust: If things go wrong, it shouldn’t break. If the user doesn’t have JavaScript enabled, it should work. No CSS? It should still work. A user script which hides or shows nodes out from under us? It should still work
  • Understandable: It should be easy for web developers to understand and add to their existing pages
  • Small: If this adds lots of code to a web site, it won’t be used and will slow downloads down
  • Attractive: It should “feel” nice. Lots of feedback to the user, and maybe some animation if appropriate. It shouldn’t seem different from twisties the user has seen before
  • Accessible: Should work with the keyboard and with the mouse; printed pages should do the right thing

First, a demo:

Click this title to hide and show a portion of the page

Don’t open me!

Hey! I told you not to open this section!

Name My numbers My letters
Beth 65, 5, 1, 6 y
Andy 21, 12 k,f,s
Fred 9 k
Mary 100,000 r, w, e

To get started, you can simply download the code:

Set Up

If you want the smooth animation, seen above, put the following into your <head>:

<script type="text/javascript" src="twisty3/twisty.js"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>

If you want a smaller footprint, or don’t like the exposure animation, put the following into your <head> tag instead:

<script type="text/javascript" src="twisty3/twisty.js"></script>
<link rel="stylesheet" href="twisty.css" type="text/css" media="screen"></link>
<link rel="stylesheet" href="twisty-print.css" type="text/css" media="print"></link>

Defining a section to be hidden

Each section needs a unique id, a title, and the content of the section to be hidden. Then, format that section like this:

<div class="collapsible">
  <a href="javascript:toggleTwisty('uniqueid');">
    The Section Title
    <img class="twisty" src="twisty-down.gif">
  </a>
  <div id="uniqueid">
    <div>
      Section Content
    </div>
  </div>
</div>

Hiding sections by default

If you want a section to be hidden by default, add after the section’s <div>:

<script type="text/javascript">
  hideTwisty('uniqueid');
<script>

2010 03 31

html

Comments (4)

Permalink

Managing Certificate Authorities in Adobe Flash on Fedora/RHEL

or: making your file uploads work over HTTPS when you are using a self-signed certificate or an authority Flash decides it doesn’t like.

Flash is a popular way to upload files to web sites. This is because you can have multiple files upload at once, give pretty progress bars, and can control the file upload UI. There are some alternatives that don’t appear to be cross-platform, but that seems self-defeating.

But there is a problem; if you are using a certificate that Flash doesn’t like, it doesn’t work at all.  And you don’t get an error message.  In Windows this is solved pretty well.  If Internet Explorer trusts a certificate, so does Flash.  But on Linux, flash only checks the system certificate store.  And on Fedora, it doesn’t even do that.

To fix it until Adobe fixes the bug, run as root:

mkdir /etc/ssl && ln -sf /etc/pki/tls/certs /etc/ssl/certs

Come to think of it, is there a way to tell where the system certs should be found?

2010 03 10

Uncategorized

Comments (7)

Permalink