Ghost could scare off WordPress as the top blogging platform

‘);//–“;
var adDivString = “”;
placementDiff = applyInsert($(this), adDivString);
if (debug) {
console.log(“Just placed an ad and the placementDiff is: ” + placementDiff);
}
placementTarget = cumulativeHeight + placementDiff + interModuleHeight + adHeightBuffer;
}
else {
var moduleDivString = “”;
var elementId = “drr-mod-“+moduleCounter;
moduleDivString = “”;
modules.push(elementId);

placementDiff = applyInsert($(this), moduleDivString);
if (debug) {
console.log(“Just placed a module and the placementDiff is: ” + placementDiff);
}
placementTarget = cumulativeHeight + placementDiff + interModuleHeight + moduleHeightBuffer;
moduleCounter++;
}
loopCounter++;
}
// Avoid placing elements too soon due to non-large figures inflating the cumulative height
if ($(this).is(“figure”) !$(this).is(“figure.large”)) {
cumulativeHeight += grafHeight;
}
else {
cumulativeHeight += $(this).height() + grafHeight;
}
}
});

// clone Related Stories module m-15 to come in after 2nd para in article body for mobile breakpoint display
var $relatedStories = $(‘.related-promo-wrapper’);
if ($relatedStories.length) {
var $relatedStoriesClone = $relatedStories.clone();
$relatedStoriesClone.insertAfter( “#drr-container p:eq(1)”);
}

var $insiderPromo = $(‘.insider-promo-wrapper’);
if ($insiderPromo.length) {
var $insiderPromoClone = $insiderPromo.clone();
$insiderPromoClone.insertAfter( “#drr-container p:eq(1)”);
}

//place left side element
cumulativeHeight = 0;
var leftPlacementTarget = tagHeight = leftPlacementTarget) {
if (debug) {
console.log(“congratulations… we’ve passed the initial start point”);
}
if (leftPlacementIndex == null) {
//it’s not good enough to not be a left avoid – it also shouldn’t be a

with an immediately preceding small or medium image left avoid.
if (!isLeftAvoid($(this)) noPrevFigures($(this)) ) {
leftPlacementIndex = $(this).index();
$leftPlacementElement = $(this);
leftPlacementLookaheadStart = cumulativeHeight;
if (debug) {
console.log(“is not a left avoid and no prev figures. ########## set placementIndex (“+leftPlacementIndex+”) and lookaheadStart (“+leftPlacementLookaheadStart+”) ##########”);
}
} else {
if (debug) {
console.log(“is a left avoid or has previous figures. continue”);
}
}
} else {
if (debug) {
console.log(“#### leftPlacementIndex already set to “+leftPlacementIndex+”. looking ahead…”);
}
//not null; has been set
if ((cumulativeHeight – leftPlacementLookaheadStart) leftIntervalHeight) {
if (debug) {
console.log(“###### THRESHOLD REACHED. LOOKAHEAD COMPLETE. END ###### (cumulativeHeight – leftPlacementLookaheadStart) (“+(cumulativeHeight-leftPlacementLookaheadStart)+”) leftIntervalHeight (“+leftIntervalHeight+”).”);
}
return false;
} else {
if (debug) {
console.log(“threshold not reached: (cumulativeHeight – leftPlacementLookaheadStart) (“+(cumulativeHeight-leftPlacementLookaheadStart)+”) tags
if (!(isLeftAvoid($(this)) ($(this).hasClass(‘small’) || $(this).hasClass(‘inline-small’) || $(this).hasClass(‘medium’) || $(this).hasClass(‘inline-medium’) || $(this).hasClass(‘apart’) ))) {
cumulativeHeight += $(this).height() + grafHeight;
}
if (debug) {
console.log(“——————– set cumulativeHeight(“+cumulativeHeight+”) —————“);
console.log(“”);
}
}
});
}

if (leftPlacementIndex != null elementNotNearEnd($leftPlacementElement, leftPixelWindow)) {
if (debug) {
console.log(” insert into index “+leftPlacementIndex);
}
$(“#drr-container”).children().eq(leftPlacementIndex).before(“

“);
}

IDG.GPT.trackOmniture();

// Add Right rail module content
for (var i=0; i= 0) {
var a = document.createElement(‘a’);
a.href = document.referrer;
var uriParts = a.pathname.split(‘/’);
a = ”;
if (typeof uriParts[3] == ‘undefined’) {
epoParams += “typeId=” + defaultTypeId + “referrer=home”; // default is ‘home’ behavior
}
else {
var refCatSlug = uriParts[3];
epoParams += “catSlug=” + refCatSlug + “referrer=article”;
}
}
// From SEARCH: Show article with catId same as current article
else if (document.referrer.indexOf(“google”) = 0 || document.referrer.indexOf(“yahoo”) = 0 || document.referrer.indexOf(“bing”) = 0) {
var categories = [3029];
if (categories instanceof Array categories.length 0) {
var primaryCatId = categories[0];
epoParams += “catId=” + primaryCatId + “referrer=search”;
}
else {
epoParams += “typeId=” + defaultTypeId + “referrer=home”; // default is ‘home’ behavior
}
}
// Default is to show like coming from homepage
else {

epoParams += “typeId=” + defaultTypeId + “referrer=home”;
// default is ‘home’ behavior
}
return epoParams;
}

/**
* @param jqo Original jquery object target
* @param divString The div to be inserted.
* @return Difference in height between original placement target and final target.
* Checks first 6 elements for an allowable placement (600 pixel window).
* If none, check nearby for elements that are not right avoids.
* If none, place element before current target.
*/
function applyInsert(jqo, divString) {
if (debug) {
console.log(“applyInsert at top and jqo index is: ” + jqo.index());
}

for (var i=0; i 0) {
children = $(“#drr-container”).children().slice(jqo.index(), allowElement.index() );
}
else {
children = $(“#drr-container”).children().slice(allowElement.index(), jqo.index());

}
if (children != null) {
children.each(function(i) {
if (debug) {
console.log(“About to add this element’s height to heigh diff offset”);
console.log($(this));
}
height += $(this).height() + grafHeight;
});
}
if (offset 300) {
if (debug) {
console.log(“isRightAvoid: found pre. return true”);
}
return true;
}
if (jqo.is(“figure”) jqo.hasClass(‘large’)) {
if (debug) {
console.log(“isRightAvoid: found figure.large return true”);
}
return true;
}
if (jqo.is(“figure”) jqo.hasClass(‘medium’) jqo.hasClass(‘inline’)) {
if (debug) {
console.log(“isRightAvoid: found figure has class medium and inline.”);
}
return true;
}

if (jqo.is(‘div’) jqo.hasClass(‘table-wrapper’)) {
if (debug) {
console.log(“isRightAvoid: found div with class table-wrapper”);
}
return true;
}
if (jqo.is(‘aside’)) {
if (jqo.hasClass(‘sidebar’) !jqo.hasClass(‘medium’)) {
if (debug) {
console.log(“isRightAvoid: found aside with class sidebar, without class medium”);
}
return true;
}
if (jqo.hasClass(‘statsTable’)) {
if (debug) {
console.log(“isRightAvoid: found aside with class statsTable”);
}
return true;
}
}
if (jqo.hasClass(‘download-asset’)) {
if (debug) {
console.log(“isRightAvoid: found class download-asset return true”);
}
return true;
}
if (jqo.hasClass(‘tableLarge’)) {
if (debug) {
console.log(“isRightAvoid: found class tableLarge return true”);
}
return true;
}
if (jqo.hasClass(‘reject’)) {
if (debug) {
console.log(“isRightAvoid: found class reject. return true”);
}
return true;
}
if (jqo.is(‘table’) jqo.hasClass(‘scorecard’)) {
if (debug) {
console.log(“isRightAvoid: found div with class scorecard”);
}
return true;
}
}
return false;
}

// Return true if element has class ‘reject’: will not place drr modules/ads next to these elements
function isRightReject(jqo) {
console.log(“in isRightReject”);
if (jqo != null) {
if (jqo.hasClass(“reject”)) {
if (debug) {
console.log(“isRightReject: found ‘reject’ class”);
}
return true;
}
return false;
}
return false;
}

// Returns true if height of all elements after this one is more than 500; false otherwise
function elementNotNearEnd(element, pixelWindow) {
if (pixelWindow == null) {
pixelWindow = 500;
}
if (element == null) {
return false;
}
var remainingHeight = 0;
var children = $(“#drr-container”).children().slice(element.index());
if (children == null) {
return false;
}
children.each(function(i){
remainingHeight += $(this).height();
});
if ( remainingHeight pixelWindow) {
return true;
}
else {
if (debug) {
console.log(“Element too close to end. Remaining height is: ” + remainingHeight + ” and window is ” + pixelWindow);
}
return false;
}
}

/**
* Return true if need to avoid this element when placing left module.
*/
function isLeftAvoid(jqo) {
if (jqo.is(“figure”)) {
if (debug) {
console.log(“isLeftAvoid: found figure. return true”);
}
return true;
}
if (jqo.is(“aside.pullquote”)) {
if (debug) {
console.log(“isLeftAvoid: found pullquote. return true”);
}
return true;
}
if (jqo.is(“pre”)) {
if (debug) {
console.log(“isLeftAvoid: found pre. return true”);
}
return true;
}
if (jqo.is(“div.gist”)) {
if (debug) {
console.log(“isLeftAvoid: found github code block. return true”);
}
return true;
}

if (jqo.is(“aside”) jqo.hasClass(“sidebar”) jqo.hasClass(“medium”)) {
if (debug) {
console.log(“isLeftAvoid: found medium sidebar. return true”);
}
return true;
}

if (jqo.hasClass(“statsTable”)) {
if (debug) {
console.log(“isLeftAvoid: found class statsTable. return true”);
}
return true;
}
return false;
}

/**
* return true if there are no figures before the target placement that might bleed down into placement element
*/
function noPrevFigures($originalTarget) {
var targetIndex = $originalTarget.index();
var numElementsLookBack = 5;
var figureIndex = null;
var figureHeight = null;
var startIndex = targetIndex – numElementsLookBack

You might think that by now, every useful take on how a blogging platform should work had been explored but just over one year ago, in October, 2013, a new, free, open source blogging platform was launched following a successful Kickstarter campaign (which I backed) which raised £196,362 from 5,236 backers on a £25,000 goal. The platform is called Ghost and it is quite brilliant.

Now, I love WordPress, the granddaddy of blogging platforms, and I’ve used it for all sorts of projects over the years but WordPress is not for everyone. The reason? WordPress has been around for 11 years and, as most system under continuous development do, over that time it’s gathered some “cruft”. 

For example, plugins don’t integrate with the menu system in a consistent way, some themes aren’t compatible with the latest release of WordPress for some time after its release while some plugins take even longer or never get updated, and the editor takes a weirdly nannyish approach to raw HTML and inserts its own markup usually where you don’t want it. That said, the sheer richness of the environment allows you to create very ambitious blogs and even full-fledged e-commerce sites. In fact many people use WordPress not as a blog but as a content management system (CMS)! 

But if you don’t want to deal with that level of complexity — if you just want to blog — then WordPress may be more platform than you really want to deal with and that’s where Ghost comes in. 

Designed from start to be minimalistic, fast, and, for want of a better word, “sleek”, Ghost has achieved just that. For example, Ghost has a two-panel editor so, unlike WordPress’s editor, when you enter text in one panel you can immediately see what it will look like in the other. In contrast in WordPress the “Visual” view in the editor is a simple interpretation of the HTML so you have to save and preview content to see how it’s really rendered by the currently selected theme.

Ghost.org

WordPress was written in PHP with MySQL as a backend and has since been augmented with JavaScript. In contrast Ghost was built on Node.js, JavaScript, and a server-side execution engine based on Google’s V8. 

A nice feature of Ghost is that its themes and dashboard (which are based on the Handlebars templating language) are, by default, fully responsive (they adapt their layout automatically to whatever device they are run on).

The number of custom themes for Ghost from third parties including companies such as WooThemes, Themeforest, MarketPress Envato (all major players in the WordPress market) has been growing steadily and platform development has continued with the current stable release, version 0.5.2, being released on September 25, 2014.

Want to try Ghost? You have lots of choices: Ghostify.io offers hosting of Ghost blogs for as little as $5 per month or you can run up a Bitnami auto installer for Windows, OS X, or Linux or a virtual machine image or in their managed cloud service. Want more choices? You could use the Digital Ocean Droplet from Digital Ocean or install it on your target platform yourself (you’ll need to first install Node.js).

If you’re interested in blogging and have yet to experience Ghost you’re missing out. This has to be one of the most powerful and best engineered blogging platforms ever.

Have you tried Ghost? Tell me what you think below …

[mg]

Previous Post