Archive for February, 2010

Apple Mail: How to avoid being tracked yet still see images

Thursday, February 25th, 2010

Apple Mail is the email client I use as it looks good and has a great search function. But it doesn't matter if you use Apple Mail or something else, if you don’t want your every move tracked, you have to prevent your email client from loading external images. On OS X, I use Apple Mail and the way I block external images is with Little Snitch.

The way to do it is to block all connections except the ones you allow.

deny all connections Apple Mail Little Snitch
deny all connections Apple Mail Little Snitch

But for some services you do want to see the external images.

In my case one service for which I do want images though is Basecamp. 37signals finally upgraded their email notifications to html and they look a whole lot better and are arguably functionally better as well – as the presentation of information is clearer.

Basecamp html email notifications
Basecamp html email notifications

So how do I get the thumbnails in Basecamp?

If you’re on OS X with Little Snitch and Basecamp, unblock:

  • asset3.37img.com
  • asset2.basecamphq.com

If these two don’t work, what you need to do is open the source of the email (in Mail command-option-U). Unfortunately 37signals chose to use Base 64 encoding for the html part (absolutely no need to do so).

You want to copy the part of the document that comes after this:

--mimepart_4b8295ce1ce1d_4f231be02701438a6 Content-Type: text/html; charset=utf-8 Content-Transfer-Encoding: Base64 Content-Disposition: inline

and before this:

--mimepart_4b8295ce1ce1d_4f231be02701438a6--

and then take it to ToastedSpam’s Base64 Decoder and plug it in.

You’ll now have plain html and you just have to search for asset or img in the html. Add those domains to Little Snitch to allow connections in Mail.

Allow Mail connections asset Basecamp HQ
Allow Mail connections asset Basecamp HQ

If there are any other html emails for which you would like the images, you can use a similar technique to allow their images. Keep in mind most newsletters have a link to allow you to open the email in a browser which is a quicker and easier solution.

IT | 5 comments

New Foliopress WYSIWYG version released

Monday, February 15th, 2010
 
New version of one of our most popular plugins Foliopress WYSIWYG (FV Wordpress Flowplayer is doing pretty good and so does FV All in One SEO Pack) contains several usability improvements:
  • WYSIWYG style configuration now resides in plugin options.
    Easier configuration - no need to edit your CSS file to make your editor true WYSIWYG. Don't worry, your old configuration will still work.
  • Image management tool now appears with the right year/month/ directory opened.
    Your blog contributors won't upload images into your root image directory anymore.
  • All uploaded images above certain height and width (check out plugin options) are sized down to fit into it.
    Well, this won't handle those insane 5000 x 3000 px images some people try to put into their posts (as it's just too big for the PHP memory), but at least it takes care of the oversized 2000 px wide images which won't fit on your screen when opened. The default setting is 960 px of either width or height.
  • Works on sites with secured wp-config.
  • Insert FV Wordpress Flowplayer button added.
    Let's you use our popular video plugin with ease.
  • Pasting dialog receives focus when it appears.
  • Dreamhost JSON glitch fixed.

Head on to our Foliopress WYSIWYG plugin page or Wordpress.org.

WordPress | 2 comments

Using Soft Hyphens to Disable Embedded Shortcode in Wordpress or other CMS Web Tutorials

Saturday, February 6th, 2010

A lot of our plugins use embedded shortcodes inside square brackets.

Our embedded shortcodes look something like this:

[command parameter=something value=number]

The reason we use square brackets is that square brackets parse just fine in WYSIWYG editors including our own Foliopress WYSIWYG.

We've had a lot of simple questions about how to use our FV Wordpress Flowplayer. I couldn't understand why. The instructions are pretty straightforward.

It turns out that the shortcodes were being parsed and showing the result instead of the code people should be using. How anybody managed to get the plugin working without the short codes is a bit of mystery to me. But they did. Wow can people be ingenious sometimes.

So once I'd found the error, we weren't much better off. I couldn't get the square brackets to stop parsing. With angled brackets it's not so difficult. One just escapes them like this:

< >

But there is no such escape for square brackets (or rather the escape still gets parsed by our plugins).

It turns out that the shortcode won't trigger even if there is a non-breaking space:  .

But that is no real solution as it means that we are telling our users to insert a space or weird character where there is none. No, we needed a real invisible character to disable execution of the shortcode but leave no visible trace in the html.

After much poking around, I finally found one: ­ That's the soft hyphen character.

So I can boldly post commands like this:

[­flowplayer src=example.flv, width=400, height=300]

Which would otherwise result in this:

Clearly showing an empty movie box isn't going to teach a visitor much about how to place an flv in his or her own post.

The long term solution is to code our plugins not to parse what is inside code tags. But in the meantime, soft hyphens can save you in a pinch from having embedded shortcodes execute when they shouldn't.

Alternate techniques (all in use on this site)

  • use javascript to write the opening square bracket): not bad but I'd rather put in an invisible character than face fragile javascript in half a dozen tutorials
  • use sniplets to hold the documentation (as sniplets don't get parsed a second time but just inserted).
    Downsides: unwieldy as you have to go over to sniplets to edit or change tutorials each time. Not easily moved between CMS's or even sites. Plugin dependent.

More readable source code without a javascript code parser

While I was at it, I decided to turn all code into a nice dark green to be more readable and made it a few pixels larger too. Previously code on Foliovision was an elegant but slightly difficult to read medium gray.

WordPress | No comments