web

Getting Netflix to Run on Mint 15 (Olivia)

This turned out to be a bit tricky and required some digging. Here’s what worked for me:

Install Pipelight

Follow the instructions here to install Pipelight (which uses Wine to run the Silverlight plugin that Netflix needs):

Pipelight Installation Instructions

For me, this meant running the following commands:

sudo add-apt-repository ppa:pipelight/stable
sudo apt-get update
sudo apt-get install --install-recommends pipelight-multi
sudo pipelight-plugin --update

User Agent Switching

Before you can test anything, you need to install a user agent switcher in your browser. I normally run Firefox, but switched to Chromium for Netflix because I kept getting DRM errors (Turns out that Firefox was not the issue, but a clean install of Chromium eliminated some variables anyhow).

While testing in Firefox, I ran across these instructions to delete the contents of “/~/.wine-pipelight/drive_c/users/Public/Application\ Data/Microsoft/PlayReady/” to eliminate the DRM error. This didn’t seem to help for me, so I switched to Chromium, just in case. In fact, the real issue was that I needed to set my root filesystem to mount with extended attributes (see below). Both Chromium and Firefox worked in the end.

In Chromium, I installed this extension:

User-Agent Switcher for Chrome

In Firefox, this one:

User-Agent Overrider

I set the user-agent to “Firefox/Windows Firefox 15” in Chromium and “Windows/Firefox 29″ in Firefox (both worked – tips on which user-agent to choose are here).

Mount Filesystem with Extended Attributes

This turned out to be the key step. You need to mount the root filesystem with user_xattr enabled (as described here.

For me this meant editing /etc/fstab as root and adding “user_xattr,” (note the comma) before “errors=remount=ro” for my root filesystem (more info here). I recommend that you be very careful about doing this, because a typo could prevent you from mounting the operating system on reboot.

After rebooting my machine, everything worked like a charm in both Chromium and Firefox.

Checking CSS for Errors

I just spent an hour or so struggling with some changes to the CSS of this site. I just couldn’t get my changes to show up in a browser. Finally, I ran my CSS through CSSCheck and discovered that my last definition ended with a ) (right parentheses) rather than a } (right brace).  Apparently, CSS doesn’t care if you close your last statement incorrectly, but, of course, when you add a new definition at the end, CSS ignores it completely.

WordPress Image Quirk

While posting my last entry, I discovered a problem with WordPress’s new editor and the way it inserts images into a post. The new version of the post editor is quite slick and includes handy dialogs for inserting media (tiny buttons above the editor window). Here’s the problem:

A Duck

A Duck

If I insert a paragraph break after the image and before the text, the text doesn’t wrap around the image. This seems reasonable enough (though hard to follow because there are no <p> or <br> tags to see where breaks are going. The visual editor displays the image inline, but the actual post does not.

A Duck

A Duck

If I use the html editor and type text right after the image tags, as if they were all part of the same paragraph, I get the image inline as expected.

You would think that it is simple enough to make each image part of a paragraph of text, but, if the paragraph is too short, you end up with a gap before the start of the new (non-flowing) paragraph (as with this paragraph).

A Duck

A Duck

The solution seems to be to add explicit <br></br><br></br> tags (two sets) and running the two paragraphs together, instead of pressing enter in the editor.



Then the next paragraph displays correctly flowing around the image (like this one).



Something here is broken, and I think it is the editor module in WordPress. Because it doesn’t show the <br> or <p> tags, even in the html view, the user can’t predict the results very well. I noticed a similar problem when I tried to add a break inside a <li> tag in another post.




A DuckAs you can see above (in Firefox, but not in IE), the caption function causes the flowing paragraph to take on the attributes of the caption, so it seems best to avoid using the caption function (as here) in order to keep your text consistent within the post.



I’ve experimented with different tags and settings in style.css and tried inserting image tags without using the editor’s “Add an image” function, so I’m reasonably confident that problem lies in the editor. I’ve also noticed that if you do put in your own <br> or <p> tags, and then switch to editing with the visual editor, they are stripped out of the saved version and you end up back where you started.

Annoying!

Agave – A Handy Web Design Tool

Exploring Ubuntu Studio, I discovered a utility I’ve never seen before.

Agave is, among other things, a handy program for finding harmonious new colour schemes you can use on web pages.

I used it to choose the colours for the parent page of this site — Kevin Kennedy’s Web Portal — and I love the results (YMMV).