MarsEdit 3.6.8 is available now from the MarsEdit home page and the Mac App Store.

This update includes a large number of bug fixes as well as one important change in the way that MarsEdit handles the uploading of images intended to be displayed at a “Retina” compatible resolution.

One of the problems with handling Retina graphics well is that there is a huge variety of solutions in use by different web sites, depending on the priorities for bandwidth, ease of editing, backwards compatibility, etc. My expectation that MarsEdit users would want the app to support this variety has kept me thus far from releasing any solution at all to the problem. In the interim, I have been adopting the workaround myself of uploading images at twice the resolution I wanted them to display at, and hand-editing the HTML to reference them at half-size. So, if I wanted a 400x400pt screenshot on my blog, I’d upload an 800×800 image and hand-edit the HTML to look like:

<img src="..." width="400" height="400" />

As of MarsEdit 3.6.8, a checkbox when uploading or inserting an image to Treat as Retina image will enable behavior like the above, completely automatically.

That is to say, if you want a 400×400 image on your blog to look nice on Retina displays, just supply an image at least 800×800 and check the “Treat as Retina image” checkbox. MarsEdit will produce the expected HTML and upload the image at twice the width and height.

This solution will not meet everybody’s expectations for how Retina images should be handled, but it’s a good step up from what MarsEdit has offered thus far. This solution has the benefits of being both simple and backward-compatible. The main downside is that readers with standard-resolution displays are forced to download a higher resolution image than necessary. As high resolution displays become more and more popular, and bandwidth use becomes a less typically critical issue, I think the adoption of a compromise like this one will be common.

Here is a list of all the specific changes that went into this release:

• Address issues with images being uploaded for display on Retina screens:
  • Images are now uploaded at 2x specified dimensions when Retina checkbox selected
  • Width and height fields now show size as “points” instead of “pixels”
  • Width and height fields now limited based on size of image and Retina setting
• Rich and HTML Editor bug fixes
  • Fix a bug where pressing return in a blockquote could cause a new blockquote to be created
  • Fix a bug where smart quotes, etc. were erroneously allowed in plain HTML
  • Fix a bug that prevented images from being pasted into post editor content
• Other media-related fixes
  • Fix a bug that caused Tumblr images to publish at constrained size even if the size is changed in Media Manager
  • Fix a bug where media style macro was not applied to re-inserted, previously uploaded images
  • Fix a bug where media style macro with prefix and suffix did not wrap the active selection
• Other bug fixes
  • Fix a bug that prevented post documents from showing unsaved changes after changing custom field contents
  • Fix a bug in “Show Text Statistics” sample script that caused inaccurate word count to be shown
  • Fix a bug in Media Manager that failed to show the entire folder name for folders with periods (.) in their names
  • Default newly added Blogspot blogs to “Apply Preview Filter” before publishing, to ensure paragraph tags are added if needed

Let me know if you have any questions or run into any problems!

Clarion 2.1 is available now from the Clarion home page. I also intend to submit this version to the Mac App Store, for what will be Clarion’s debut on the store.

Clarion is Red Sweater’s utility for practicing the recognition of musical intervals (the distances between two pitches). It’s the oldest of my shipping apps, and over the past several years I had lost sight of how far into disrepair it had fallen. Very cool features such as its ability to customize from a variety of built-in synthesizer sounds were no longer functioning. I’ve brought that back in Clarion 2.1:

Additionally, Clarion had not seen any updates since the advent of Apple’s high-resolution “Retina” displays. I’ve updated the graphics in Clarion’s main quiz window to look sharp on these screens:

The playful VU-meter-styled gauge in the middle of the screen reflects your overall accuracy for a given quiz session. Up until now, the “needle” just jumped to its new location whenever you made a guess, but starting with 2.1, the needle animates smoothly to the new location, making a further approximation of its real-world equivalent.

Complete list of changes in 2.1:

• Screen graphics optimized for Macs with “Retina” displays
• Slight update to UI incorporates always-on piano keyboard in main window
• Fix a bug that caused many instrument names to be listed as “Unknown Category”
• Now recovers gracefully from bad synth settings that could be set in previous versions
• Fix a bug that prevented changing Apple Synthesizer settings on recent OS X versions
• Now supports automatic checking for future software updates

If you want to develop your ear for musical intervals, give Clarion a try!

Recently a customer wrote asking whether I would consider adding a feature to MarsEdit, so that as you’re writing a blog post, you could also keep an eye on exactly what the resulting HTML will look like. This feature would be handy for folks writing in Markdown or in the Rich Text editor, but also for folks writing in plain HTML, depending on what “preview filter” settings they have configured.

I told the customer I could see the value of such a feature, and that I would consider it for a future update. But the idea stuck with me until I suddenly realized that in fact MarsEdit could support such a feature today, without any update to the app.

Currently MarsEdit’s editor supports writing in either plain-text markup such as HTML or Markdown, or in Rich text. In any of these cases, the final result can be previewed in MarsEdit’s preview window, where the results of e.g. running Markdown or converting from rich text to HTML are shown in the context of a “preview template,” essentially a custom HTML document that users can tweak e.g. to match the appearance of their blog.

Because users can edit the template and add arbitrary HTML to the preview window’s content, it occurred to me that JavaScript could be added to the template such that every change to window’s content would be matched by a live display of the HTML being shown in that very window.

MarsEdit’s default preview template contains a body section that looks like this:

<div style="padding:10px 20px;">
#body#
#extended#
</div>

The #body# and #extended# placeholders are replaced with the actual content of the post while you are writing it. For the purposes of this proof-of-concept, I decided to just focus on the body text, since many people don’t use “extended” entries. I added a bit of HTML in the template to hold the source view I plan to add:

<hr>
<pre style="white-space:pre-wrap">
<div id="sourceContent" style="padding:10px 20px;">
</div>
</pre>

Now the only trick remaining is to pay attention to changes and update the contents of the “sourceContent” div above with my content’s HTML. This required a little inside-knowledge that would have been admittedly challenging to discover on one’s own. The way MarEdit currently handles updates to the preview window content is to load the HTML template once, and then as you type, recompute and replace just the “body” of the HTML document. So I added a new script element outside the scope of the body tag, where it won’t get replaced constantly:

<script type="text/javascript">
	var ignoreUpdates = false;

	function escapeHTML(theHTML) {
		var escapedHTML = theHTML
		escapedHTML.replace("&", "&amp;");
		escapedHTML.replace("<", "&lt;");
		return escapedHTML;
	}

	function updateSource() {
		var bodyDiv = document.getElementById("bodyText");
		var sourceDiv = document.getElementById("sourceContent");
		if (bodyDiv && sourceDiv) {
			var bodyHTML = bodyDiv.innerHTML;
			sourceDiv.innerText = escapeHTML(bodyHTML);
		}
	}

	document.addEventListener("DOMNodeInserted", function(e) {
		if (ignoreUpdates == false) {
			ignoreUpdates = true;
			updateSource();
			ignoreUpdates = false;
		}
		
	}, false);
</script>

I’ll leave making sense of that JavaScript as an exercise for the (very) curious reader, but the gist of it is that it listens for changes to the structure of the HTML document, and when it notices that happening, it grabs all the HTML out of the “bodyText” div, converts it to escaped HTML source, and sets that on the new “sourceContent” div that I added to the template.

Here’s what the MarsEdit preview window looks like now, with the live source preview in effect:

While this isn’t as polished as a dedicated feature for previewing source, I found it interesting that I was able to come up with a creative solution using only the powerful and flexible preview infrastructure of the app. If you’re interested to try out the preview, you can download it here. Just copy and paste the text into MarsEdit’s preview template editor.

Let me know if you come are inspired to come up with any creative preview window solutions of your own!

MarsEdit 3.6.7 is available now from the MarsEdit home page, and has been submitted to the Mac App Store for review by Apple.

This release comes hot on the tails of 3.6.6, mainly because of a harmless but nonetheless obnoxious bug that was introduced in that release. While typing in either the HTML source or Rich Text editor, if you manually save a local draft of a post (as many people compulsively do), the insertion point cursor in the post would jump to the end or beginning of the post. Frustrating!

3.6.7 addresses this problem and also includes my workaround for the WebKit bug I described in depth a few days ago.

• Fix a problem from 3.6.6 where saving a local draft caused the insertion point in the post to jump
• Work around a bug cause a crash when closing documents with active JavaScript running
• Fix a bug where a long list of blogs could draw funny when scrolling off the bottom of the source list

Hopefully this update will get you back to saving as compulsively as you like, without any resulting hijinx in the editor!