Posts Tagged ‘internet’

Email rejections

June 2nd, 2010 at 10:30 am

The bulk email I mentioned in this earlier post didn’t work out as well as I’d hoped. The cut-and-pasted encoded PDF attachment—the main topic of the post—was fine, but several of the messages were rejected. The problem was Sendmail and spam.

I’d forgotten that when you send an email directly from your own computer using sendmail (which on the Mac is actually Postfix acting in Sendmail’s stead) the receiving mail server sees it as coming from you instead of a known server. Some servers are OK with this, but some automatically reject such messages, figuring that they’re likely to be spam.

I had come up against this issue several years ago when I used Linux as my desktop OS and sent mail out directly from it via Exim. I had a way around it back then, but can’t remember at the moment how I did it. So today I just resent the rejected messages “by hand” through Mail. If I find myself needing to do bulk emails like this again, I’ll do a little Googling for the workaround.

Update 6/5/10
The ever-helpful Tanja has pointed out in the comments that you can get Postfix to use your ISP’s mailserver (so other mail servers see your messages as coming from a “legitimate” source) by adding one line to your /etc/postfix/main.cf:

relayhost = smtp.myisp.com

Make sure the server name you give is your ISP’s SMTP (outgoing mail) server. There’s a section of commented-out relayhost examples about halfway through main.cf.

Using GMail as your mailserver is more complicated, because it uses nonstandard ports and a security layer. This article has what step-by-step set of instructions.

Tags: , , ,
Post #1264 | 2 Comments

Scientific American screws up Martin Gardner’s last article

May 30th, 2010 at 12:40 am

Scientific American has republished on its web site Martin Gardner’s last article for the magazine. It’s from 1998, well after Gardner stopped his long-running “Mathematical Games” column. Unfortunately, SA screwed up the article’s HTML, making part of it incomprehensible.

Here’s the section that’s messed up:

Let me propose to teachers the followingexperiment. Ask each group of students to think of any three-digit number—let’s call it ABC. Then ask the studens to enter the sequence of digitstwice into their calculators, forming the number ABCABC. For example, if the students thought of the number 237,they’d punch in the number 237,237. Tell the students that you have the psychic power to predict that if they divide ABCABC by 13 there will be no remainder. This will prove to be true. Now ask them to divide the result by 11. Again, there will be no remainder. Finally, ask them to divide by 7. Lo and behold, the original number ABC is now in the calculator’s readout. The secret to the trick is simple: ABCABC = ABC ≤ 1,001 = ABC ≤ 7 ≤ 11 ≤ 13. (Like every other integer, 1,001 can be factored into a unique set of prime numbers.) I know of no better introduction to number theory and the properties of primes than asking students to explain why this trick always works.

A cute little puzzle. Too bad the formula

ABCABC = ABC ≤ 1,001 = ABC ≤ 7 ≤ 11 ≤ 13

makes no sense at all. A little thinking reveals that what they really meant—and what was surely in Gardner’s original—was

ABCABC = ABC × 1,001 = ABC × 7 × 11 × 13

At first I thought the symbol mixup was an encoding problem. It’s not uncommon for web pages to be written in one encoding and viewed in another, especially if the author doesn’t specify the encoding in the <head>. That can lead to goofy symbols. But looking at the source HTML of the page, I saw that the problem was much simpler: whoever HTMLified the article just screwed up the entities. The source of the offending equation is

ABCABC = ABC &le; 1,001 = ABC &le; 7 &le; 11 &le; 13

instead of

ABCABC = ABC &times; 1,001 = ABC &times; 7 &times; 11 &times; 13

I’m not sure what kind of “web professional” thinks &le; is going to generate a multiplication sign, nor do I understand how an editor could let that slip through. Even worse, one of the commenters on the article pointed out the mistake (at least he tried—the SA comment system garbled the symbols in his explanation), and it’s still there.

Not much of a tribute to Gardner’s legacy.

Tags: , ,
Post #1261 | Comments Off

Webfonts for the 18th century

May 20th, 2010 at 9:28 pm

This morning, in a burst of pure genius, Dan Sandler (@dsandler) tweeted this:

Attention all 17th–18th century blogger-scholars: Your font needs have now been met. http://code.google.com/webfonts/list?family=IM+Fell

Sure enough, if you follow that link you’ll be taken to the preview page for IM Fell, an old-looking family of fonts, now available as webfonts through the auspices of the Google Font Directory.

I’m not a 17th or 18th century blogger, but I do follow an 18th century Twitterer, @DrSamuelJohnson, whose Tweets do ring with the Sound of RASSELAS.

I thought it would be fun (and easy—if it weren’t easy I wouldn’t have bothered) to rejigger Dr. Twoot to display Dr. Johnson’s tweets in IM Fell English.

First, I linked to IM Fell English in the <head>:1

<link href='http://fonts.googleapis.com/css?family=IM+Fell+English' rel='stylesheet' type='text/css'>

Then I used the Twitter API to detect tweets by the user DrSamuelJohnson and wrapped those in <span class="c18th">...</span> tags. With this addition to the CSS style file,

span.c18th {
  font-family: 'IM Fell English', 'Lucida Grande';
  font-size: 18px;
}

I was done. The font size had to be kicked up a bit because IM Fell English is on the small side.

Here’s how it looks.

Ten minutes of work that makes me smile whenever Sam Johnson’s tweets appear. If you’re so inclined, you can dig into the details at Dr. Twoot’s GitHub repository.

  1. Dr. Twoot is a serverless, jQuery-based webapp that that I turned into a site-specific browser (SSB) via Fluid. At its root, it’s just a web page. ↩

Tags: , , , ,
Post #1252 | 1 Comment

Head links

May 18th, 2010 at 11:42 pm

Links, of course, make the web go round. They put the Hyper in HTML. But today the links I found were made in my head, the old-fashioned way.

The day started with me riding in to work listening to The Science Show podcast from ABC Radio National. That’s ABC, as in Australian Broadcasting Corporation, not the folks who bring you Dancing With The Stars. I’m not sure why the Commonwealth countries can’t come up with more original network names, but there you go.

One of the stories in the current Science Show episode is about climate change’s affect on mountain-dwelling reptiles and amphibians in Madagascar. Chris Raxworthy of the American Museum of Natural History has been studying how certain populations have been gradually shifting their habitats to higher elevations as temperatures have increased. The concern is that eventually they’ll move to the tops of the mountains and have nowhere else to go. Wait a minute, I thought, didn’t I just read about this? Yes, it’s the same problem discussed by Chris Clarke in his most recent Coyote Crossing post, although the mountains he talks about are in the American Southwest. My first link of the day.

Another current Science Show story is about a highly portable chemical analysis instruments developed by Emily Hilder of the University of Tasmania. Much of the story is about the use of these devices by bomb squads, but there’s a later mention of using them for early detection of Tasmanian devil facial tumor disease (DFTD). As an American, when I hear about Tasmanian devils, I can’t help but smile and think of Warner Brothers, but this disease, a facial cancer that looks horrible, has killed 80-90% of the devil population in some areas. Where’s the link here? Patience.

(This Science Show episode also has an audio essay by David Attenborough about salamanders. I can’t think of any connection to salamanders, so it doesn’t fit in with the theme of this post, but the essay is informative and entertaining in that way Attenborough always seems to be, so I felt I had to mention it. Best line: “Salamanders I’m afraid are not really very quick on the uptake.”)

By the time The Science Show had ended, I was at work, where I spent eight or nine hours doing things of no interest to anyone. Then it was time to ride home, and I fired up the most recent episode of Radiolab, the sciencey radio show/podcast with Robert Krulwich and Jad Abumrad. The current episode is entitled “Famous Tumors,” and one of the stories is about, yes, Tasmanian devil facial tumor disease.1 The description of the disease is both fascinating and creepy. Apparently, tumors taken from different devils are genetically identical—the cancer is, in effect, a single organism that grows by spreading from one host to another.

So, two podcasts created on opposite sides of the world. I listen to both of them on the same day and they both talk about tumors on Tasmanian devils. Weird.

The final Radiolab story is about Henrietta Lacks, the woman whose cells—which came to be known as the HeLa line—taken during a biopsy, were the first human cells to be successfully grown and maintained in a laboratory. It’s based on The Immortal Life of Henrietta Lacks, a recent book by Rebecca Skloot, who does some of the narration. The Radiolab story and the book cover not only the importance of the HeLa line to medical advances in the 20th century (it was heavily used, for example, in the development of the polio vaccine), but how the knowledge that Henrietta’s cells lived on after her death affected her family.

I haven’t actually read The Immortal Life of Henrietta Lacks, but it’s on my list of books to read because it’s been praised often by Tom Levenson on his Inverse Square Blog, one of my favorite RSS subscriptions. He’s also the author of Newton and the Counterfeiter, an excellent book I have read,2 because most of my professional life—that eight or nine hours we skipped over—involves adapting and applying Newton’s Laws, and I have a longstanding interest in Newtoniana.

The Henrietta Lacks story ended as I arrived home, where I expected to be greeted by James Burke.

  1. I told you we’d get to a link. ↩

  2. I also listened to Tom give a talk on the book at Fermilab a couple of months ago. He’s an excellent speaker—able hold an audience’s interest without props or slides. ↩

Tags: , , , ,
Post #1251 | Comments Off

Sound on a web page

May 14th, 2010 at 4:22 pm

In last night’s post, I included some code to embed a little audio player in the page. There are many ways to do this, and I spent entirely too much time exploring them to ever want to do it again. So here’s (almost) everything I know on the subject.

Standard link

You don’t really have to put a player on the page. You can instead just use a regular old link, like this one to a short MP3 file. The HTML code is

<a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">a short MP3 file</a>

This is so simple that you can even do it in Markdown

[a short MP3 file](http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3)

or Textile or any of the other simplified markup systems. When the user clicks on the link, she’s taken to a new page with a player.

Because I’m on a Mac, the player that appears is QuickTime.1 The player that appears for you will depend on your operating system, your browser, and how your browser is configured (via plugins) to handle MP3 files. The URL of the MP3 file will be in your browser’s toolbar.

This method has the great advantage of always working, no matter what the browser and operating system, as long as the browser understands the file format and has a plugin for it. MP3 files should work on any browser, anywhere. The disadvantage, of course, is that the player isn’t embedded in your page. You can make things a little nicer by adding target="_blank" to the link:

<a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" target="_blank">a short MP3 file</a>

This link will look the same, a short MP3 file, but will put the player in a new window (or perhaps a new tab) when the user clicks it. Since the new window will obscure the page, there isn’t much advantage to it; but it does suggest the next possibility.

Simple JavaScript

With JavaScript you can create a new window and control its size so it doesn’t cover much of your page. The code is

<a href="javascript:newWindow=window.open('http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3','Sound', 'height=50,width=400')">a short MP3 file</a>

The link will still look the same, a short MP3 file, but the player that pops up when you click it will be less obtrusive.

Still, it’s not as nice as having the player in the page.

Flash

There are dozens of Flash-based audio players that let you put a player in your page. In the past, I’ve used one from Google that looks like this

and uses this code

<embed type="application/x-shockwave-flash" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#fff" wmode="window" flashvars="playerMode=embedded" />

The URL of the MP3 is the audioURL parameter; you can fiddle with the width and height and color as you see fit.

It’s a nice enough looking player, but it has two problems:

  1. It uses Flash, which won’t work on iPhoneOS devices.
  2. It uses the <embed> tag, which, although accepted by lots of browsers, isn’t standard (X)HTML.

Objects

A standards-compliant way of embedding an audio player in your page is with the <object> tag. This is what I used in last night’s post, and it looked like this:

RSS and some browsers won’t show the player that’s supposed to be here. Click this instead.

The code for this player is

<object type="audio/mpeg" data="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" width="400" height="40">
    <param name="src" value="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" />
    <param name="autoplay" value="false" />
    <param name="autoStart" value="0" />
    RSS and some browsers won't show the player that's supposed to be here. <a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">Click this instead.</a>
</object>

This will work with iPhoneOS but is not without problems:

  1. It won’t work in older browsers, like IE6. That doesn’t bother me on this blog, but might be a killer on a commercial site. This is somewhat mitigated by its degradation to whatever non-<param> HTML is placed between the opening and closing <object> tags. As you can see, I put a simple HTML link to the MP3 in that spot so people with older browsers can still get to the audio.

  2. It won’t necessarily come through in an RSS feed. Google Reader shows the degraded text inline, but is nice enough to put up a player at the end of the item.

    I don’t know what other RSS readers will do.

  3. Different browser plugins use different parameters, and you have to account for that. The autoplay parameter is for QuickTime, the autoStart for Windows Media Player and Real Audio.

HTML5

This, finally, is the Holy Grail of embedded audio. One tag, <audio>, that lets you embed a player in your page. It definitely won’t work on older browsers, and by “older” I mean “even the current version of Internet Explorer.” But it is seductively simple. This code

<audio src="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" controls style="width:400px">
  If you see this text <a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">click here</a> to listen to the audio.
</audio>

will give you this player:

What’s that? You’re using Firefox? The latest version? And there’s no player? Just something that looks like this?

Well, that’s because Firefox won’t play MP3s natively. Patents, don’t you know. You’ve read Gruber’s posts about Firefox and H.264 v. Ogg Theora on the video side? Same issue on the audio side, but with MP3 v. Ogg Vorbis. The galling thing is that it puts up that gray box instead of degrading to the old-fashioned link.

If you want to serve up <audio> on Firefox, you’ll have to make an .ogg file and dirty up that nice clean tag:

<audio controls style="width:400px">
  <source  src="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.ogg" />
  <source  src="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3" />
  Older browsers will have to <a href="http://www.leancrew.com/all-this/sounds/lennon-just-all-this.mp3">click here</a>
</audio>

Which should work in Safari and Firefox.

This page says you have to list the .ogg before the .mp3 or Firefox won’t work, but that bug has been fixed. I can order them either way with Firefox 3.6.

As I write this, I have no idea how an RSS reader will treat the <audio> tags. But I’ll find out as soon as it’s published.

Update 5/14/10
Both Google Reader on my Mac and Reeder on my iPhone show the <audio> player inline. So that’s better than the RSS behavior of <object>.

Summary

There’s no single, generally accepted way to embed an audio player.

  1. In fact, Safari—which is where the screenshot comes from—puts an HTML5 wrapper around the file URL, which you can see if you have Safari’s Developer Tools enabled and choose Show Web Inspector from the Develop menu. ↩

  2. Unless there’s a Firefox plugin or Greasemonkey add-on that can handle MP3s. ↩

Tags: , , , , , , , , ,
Post #1248 | 1 Comment

Scrolling simply

April 23rd, 2010 at 7:33 pm

I’m not an HTML/CSS tips kind of blogger, but I was testing some new design ideas for my company’s web site today, and I ran across simplyScroll by Logicbox. It’s very nice as is, and you can easily improve it.

SimplyScroll is a jQuery plugin that takes a series of images—all of which must be the same width, a minor restriction—and turns them into a continuously scrolling band of images. I wanted to see if I could make a header like that overlaid with my company’s logo on a semi-transparent background. After a few miscues, and a review of the CSS rules for absolute and relative positioning, I got it working in a simple single HTML page. Here’s the same basic thing embedded in a post.

The trick to getting the static images to overlay the scrolling part lies in wrapping all those parts in a <div> that uses relative positioning with no offsets. Then you use absolute positioning to put the semi-transparent white block and the logo with the transparent background on top of the scroller. Here’s the HTML document with embedded CSS that does the trick.

 1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 2:    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 3:  <html>
 4:  <head>
 5:   <title>Scrolling example</title>
 6:   <script type="text/javascript" 
 7:   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
 8:   </script>
 9:   <script type="text/javascript" src="jquery.simplyscroll.js"></script>
10:   <link rel="stylesheet" href="jquery.simplyscroll.css" media="all" 
11:   type="text/css">
12:  
13:   <script type="text/javascript">
14:   (function($) {
15:     $(function() { //on DOM ready
16:         $("#scroller").simplyScroll({
17:             autoMode: 'loop'
18:         });
19:     });
20:   })(jQuery);
21:   </script>
22:  
23:   <style type="text/css">
24:   div#title {
25:     position: relative;
26:     width: 40em;
27:   }
28:   img#logo {
29:     position: absolute;
30:     top: 10px;
31:     left: 10px;
32:     z-index: 10;
33:   }
34:   img#logo-bg {
35:     position: absolute;
36:     top: 0px;
37:     left: 0px;
38:     z-index: 9;
39:     opacity: 0.75;
40:   }
41:  
42:   </style>
43:  </head>
44:  <body>
45:    <p>Above</p>
46:    <div id="title">
47:      <ul id="scroller">
48:         <li><img src="scroll1.jpg" width="160" height="120"></li>
49:         <li><img src="scroll2.jpg" width="160" height="120"></li>
50:         <li><img src="scroll3.jpg" width="160" height="120"></li>
51:         <li><img src="scroll4.jpg" width="160" height="120"></li>
52:         <li><img src="scroll5.jpg" width="160" height="120"></li>
53:         <li><img src="scroll6.jpg" width="160" height="120"></li>
54:         <li><img src="scroll7.jpg" width="160" height="120"></li>
55:       </ul>
56:       <img id="logo-bg" src="white.png" width="200" height="120">
57:       <img id="logo" src="colorlogo.png">
58:     </div>
59:     <p>Below</p>
60:  </body>
61:  </html>

Normally I don’t embed CSS, but it’s often easier to do it that way when you’re experimenting with something new.

The z-index values I chose for the white background and the logo were large enough to ensure that the images were placed above the scroller rather than under it. I don’t know what the minimum values are.

If you’d like to play around with this on your own machine, download this zip file, and expand it in a convenient place on your hard drive. Everything you need is in the archive (you don’t need a local jQuery library because it uses one hosted at Google). Just open the scroll.html file and start hacking.

Tags: , , , , ,
Post #1235 | 1 Comment

« Older Entries