Do you want to view only the webpage content that was delivered securely?

Does Internet Explorer annoy you with this security warning?

Do you want to view only the webpage content that was delivered securely?

This message appears when you’re using a secure connection (https://) and the website is trying to load non-secure (http://) elements, too. The culprit was easy enough to find (using HttpWatch or similar tools):

HttpWatch sniffer results

What made this case unusual is that it wasn’t a server-side problem. Instead, the DivX HiQ plugin + Web Player Beta installed on the client’s machine was causing the issue on every single secure page. The warnings disappeared after uninstalling DivX HiQ (disabling the plugin should work, too):

Uninstalling DivX Web Player Beta

So, if Internet Explorer is suddenly giving you these warnings, check if you’ve recently installed DivX.

Content-aware resizing of pictures (seam carving)

I’m not sure why golem.de published an article on Seam Carving GUI (open source) today (maybe they have a selection of emergency posts for slow news days 😉 ), but I’m glad they did because I had no idea something like this even existed.

If you have no idea of what I’m talking about, take a look this video:

Ever been in a situation where you had a picture with exactly the content (“message, meaning, …”) you wanted, but not with the right dimensions? Seam carving could have saved the day.

I used it for a stock photo today which just had to be 550×225 pixels to fit in a template (sorry, can’t post the picture because I’d have to pay for the rights again – I’ll post a link when it goes online). It worked extremely well because the important objects did not stretch along the entire length of the picture. The sky and mountains in the background were resized in a way which made it look as if the photographer had used a wide-angle lens.

Encouraged by my success, I decided to try something extremely challenging. Here’s a photo of me on the balcony of a hotel (it just looks as if I was trying to log into unprotected wireless networks – actually I was enjoying the sunshine and fresh air):

The picture above is 480 x 360 pixels. Let’s say I want to keep the width, but reduce the height to just 220px. Usually, this would mean cropping:

Notice that the top of the other buildings and the horizon is no longer visible.

With seam carving, you can keep all of this in the picture (also, it now looks as if I had a widescreen laptop):

As mentioned, this is an extremely challenging picture. Regular shapes are all over the place and if you look closely, you’ll find at least one odd area which would be noticeable even if you’d never seen the original picture (windows on the red building). Still, considering the difficulty, the software does an excellent job. You could fix the most noticeable problems in a minute in an image editor:

Pretty neat. I’m really looking forward to seeing what else will be possible with a few mouse clicks in the near future.

Here’s some additional info I scraped from the comments at golem.de:

  • If you’re using gimp, here’s a plugin for you.
  • Photoshop CS4 can do it, too (it’s called content-aware scaling)
  • For fancy online retargeting (how many names are they gonna give this?), check out rsizr. While I liked the animation, the result wasn’t that convincing (I guess it’s art):

If you still haven’t done so, go get Seam Carving GUI and have fun (did I mention it’s free and available for Windows, Mac OS and Linux?).

Expression web span lang tags

Does Expression Web (version 1 or 2) add <span lang=”something”> tags (“lang spans”) to everything you type in design view? It nearly drove me crazy with this behavior and the many language-related options in different menus, but after I figured out what was going on I actually came to appreciate this feature (when working on multilingual sites).

Why does xWeb do this?

Try this: Select some text and go to Tools > Set Language and choose – let’s say – Alsatian. You should see xWeb adding <span lang=”gsw-fr”> to your code. This will always happen unless your entire page is marked to be in Alsatian with lang=”gsw-fr” xml:lang=”gsw-fr” in the html element or using <meta http-equiv=”Content-Language” content=”gsw-fr” /> .

So, anytime the language of some text on the page does not match the language for the entire page, xWeb adds the lang spans.

BTW, you can set the meta tag by going to File > Properties > Language > Mark current document as though it seems the language information specified in the html tag takes precedence over the meta tag when xWeb decides on adding the lang spans (thanks to Cheryl D Wise for the link to the W3C FAQ and to MrMox for pointing out that the meta tag alone doesn’t always solve lang span issue).

This doesn’t explain why xWeb adds the spans when I just type text on my keyboard!

It appears that whenever you type something, xWeb checks the input language your system is using and sets the language of your text accordingly. This means you get the same result as if you were to select Set Language from the Tools menu, triggering the same effect as described above: If the input language doesn’t match the document’s language, xWeb adds lang spans.

How do I switch this off?

Unfortunately, there doesn’t seem to be a simple “never add lang spans” option. You can find some possible answers on the web (e.g. here and here), but they didn’t work on all of our systems.

So what do I do? Type only in code view?

I don’t recommend this as you might make mistakes with html entities (like typing & instead of &amp;). Instead, go to your Windows Control Panel > Regional and Language Options > Languages > Details and make sure that all input languages which are specified on your page are available (otherwise, add them).

Example: In my company, we’re working with Swiss-German keyboards on websites which are mostly in English (en-us or en-gb), German (de-de) or French (fr-fr):

Now when I edit a page which is in German, I just have to make sure that the correct input language is selected:

Voilà, no more lang spans! Furthermore, if I wanted to add some text in English, I could simply switch the input language and xWeb adds the lang span, which means I can easily check the spelling on a page with multiple languages (and voice browsers should pronounce the text correctly, too).

Is that all?

No, it gets even better! If you’re editing an existing page where the language has been set, you can go to Tools > Page Editor Options > General and select Automatically switch keyboard to match language of surrounding text. Expression Web should now select the right input language automatically for you (hey, this saves you two mouse clicks!).

Wait, it still isn’t working!!

All right, I got this working on three very different systems, using xWeb1 and 2 as well as Win XP and Vista x64. It’s no longer an issue casing trouble for us, we did, however notice behavior which can only be described as weird (or buggy) from time to time. For instance, it is perfectly possible to have a page were no language meta tag is present (and no language is assigned in the html tag), but a language is nevertheless set under File > Properties > Language.

You could also try experimenting with the language related options below which I haven’t mentioned so far (just don’t ask me what they’re supposed to do) or ask for help on the Expression Web forum:
Tools > Page Editor Options > General > Default Page Language
Site > Site Settings > Language

Delete line numbers from program code listings

Many of the books available on O’Reilly’s Safari Books Online come in HTML format, which I like because it makes it easy to copy code straight out of the book (no need to search for the “companion files”). However, program listings in books often use line numbers, which prevent the code from running if it’s just copied and pasted. That’s why I wrote this little tool to automatically remove the line numbers. It uses the first line to determine where the code starts and then applies the same format to the rest of the listing.

Please note: Internet Explorer likes to mangle up the results (it ignores the “text/plain” content-type HTTP header if it sees any tags), if this happens you’ll have to view the source to get your program listing.