Business, Code, and Problem Solving in 11 articles

I recently upgraded this website and turned it into a CMS.

You can find it on github

It has page management, an admin panel where you can change all site settings, and of course -- blog posting.

I wrote the code during the recent AngelHack Hackathon in Seattle.


I've also hosted a working demo you can try yourself.

If you have suggestions for features, tell me in the comments. You can track my progress in the project document I've posted online

7 Comments

Wufoo is a great tool for easily building forms, but in many cases it's more restrictive than managing your own websites and forms.

On Wufoo, you can't embed any of your own javascript.

Why is this important?

  • No google analytics
  • No visual web optimizer or optimizely
  • No anything that depends on javascript

You need to know which dollars are multiplying fastest; which ad campaigns are driving the most results.

If you use paid advertising, you know that conversion tracking is very important.

Why is this a problem on wufoo (and many sites like it)? Well most advertising systems give you a bunch of javascript to add to your site as a "conversion tracking pixel"

If you want the full simplicity of Wufoo, now you're faced with a challenge.

What's the solution? Noscript and img tags!

If you look closely at the tracking pixel code that Facebook provides, you'll notice a noscript tag at the very end. Inside of that noscript tag is an img tag.

They include it for browsers that block or forbid all javascript, so that your conversions can still be counted.

If you're thinking that you can simply copy and paste their code to your thank you page on wufoo, you're actually partially wrong and partially right.

How To make Facebook Conversion Tracking work on Wufoo.com

Remove all the other code in their snippet except for that one img tag.

Steps:

  • Copy ONLY that code into your Wufoo form's text description.
  • Navigate to your thank you page (to trigger the pixel)
  • Verify your pixel on facebook.com

Why does this work?

Wufoo forbids script tags, but they DO allow img tags. Facebook's "backup" to their normal javascript system is literally a pixel that tracks conversions. If you look at the src attribute, you can see that it includes all the normal information that's also represented in the javascript code.

0 Comments

If you're writing blog articles with, you might have noticed that images don't look quite-right sometimes.

The solution is to use the "img-responsive" class of twitter bootstrap (included in CMS on Sails by default).

responsive design is a way of designing websites that fit themselves to the screen they're viewed on

For example:

Use:

<img src="hello.jpg" class="img-responsive">

instead of

<img src="hello.jpg" width="100">

this will adjust the image automatically to fit the width of the blog's text.


*subscribe at the top to learn how to get the most out of CMS on Sails

0 Comments

If you pull the latest version of CMS on Sails you might notice two prominent new features:

  • Comment Threads
  • Hidden Pages

Both are essential to a great content management system.

Comment Threads

Now you can "reply" to other user's comments. Your new comments are indented below their original comment. Comment threads help authors to have a clearer conversation with their readership.

While linear comments and threaded comments both have merits. Stephanie Booth makes good points against them in her article: "Against Threaded Conversations in Blogs". Linear comments are harder to "off road" with flame wars and encourage conversations focused on the original post. On the other hand, threaded comments encourage more meaningful conversations between your community. Thus, they improve engagement amongst your community.

I personally prefer threaded comments. I'm considering turning this decision, between threaded and linear comments, into a website setting. This way, website owners can decide for themselves. (Let me know in the comments, which you prefer: threaded or linear).

Hidden Pages

In the previous version, every 'page' (not article) you made showed up in the side navigation. There are some cases where this is undesirable, for example: legal pages, squeeze pages, and so on. Ultimately every page is not relevant in every context of your website.

You can hide pages simply by editing and hiding them from the navigation.

Progress

Altogether, I'm happy with the progress of this project. It's gotten quite a ways from whence I started.


If you have any other ideas for future features, just let me know in the comments below.

1 Comments

I recently added page management capabilities to this site, making it a fledgeling CMS. I used the same editor that is used by the Ghost blogging platform. You can find the source code on github.

Part of my quest to write a Sails.js based CMS was to find a web based markdown or html editor that would best serve my purposes. I had a few simple criteria in making my decision:

  • Popularity / Community support

Using a popular library means you'll find many other developers in the same boat. If you run into bugs or issues, you're more likely to find help in their issue tracker or on IRC.

  • Simplicity

Easy to set up, easy to maintain, easy to use for the end user. Clean and simple === good.

  • Personal preferences

At the end of the day, I'm going on a gut call. I didn't prepare a fancy report or comparative analysis to decide what I'll use. You should rely on my suggestions either -- try out some editors and choose based on your own experience.

TinyMCE is a WYSYWIG (What you see is what you get) style HTML editor. It's very popular, and used by multiple well known corporations. I found it because it was the first result on Google. There are many plugins and extensions available for TinyMCE which you can easily find online. It's also easy to set up.

Epic Editor

On the downside, it might be too much for your needs. Users on stack overflow complain that it's slow and heavy. It offers many extra features you might not need.

I personally avoided it because it doesn't offer live preview -- meaning you can't see the rendered markup as you type. You have to click a button to see the output every time.

Easiest - EpicEditor

EpicEditor is a markdown based editor. The interface clean and concise, with only two buttons that appear on hover -- a preview button and a full screen mode. The setup process was also easy. You download a JavaScript file and a stylesheet. Note: be attentive as to where you place the dependencies. You may need to configure the editor to point it to their exact locations.

EpicEditor is also customizable. There are several themes written by the community, and the JavaScript comes with a wide variety of different config choices. For myself, I really appreciate good defaults. EpicEditor has good defaults, so its easy on the eyes and works well -- right out of the box.

EpicEditor in Action

At time of writing, I'm still using EpicEditor for the blog post side of the CMS. For simplicity and easier dependency management, I'm going to switch everything to the ghost editor soon.

Personal Favorite - Ghost Editor

Ghost Markdown Editor is a stand-alone version of the editor used by the Ghost Project. Luckily, Ghost is open source, and the code base is released under a very permissive license.

They have a beautiful website and blogging platform. If all I needed was a blog, I'd just run the self hosted version of their system (free). To anybody wanting to run their own blog, I recommend the hosted version of Ghost (5$/month) over anything else. it's very sleek and easy to use.

Ghost Editor

Ghost Editor is my favorite because of the live preview feature. You can see your markup rendered live, right next to where you type. The repository comes with a good example implementation, so getting set up is quite easy. Visually, the editor is definitely above average compared to most WYSIWIG editors).

Conclusion

Nowadays there's a free, JavaScript base editor for every need. TinyMCE, EpicEditor, and Ghost Markdown Editor are three of my favorites.

If there's an editor you prefer over the ones I discussed, let me know in the comments, or contact me about it.

0 Comments

When I began learning Ruby on Rails two years ago, I actively avoided tests, and the topic of testing altogether.

I was eager to see my code "do stuff", and skipped tests, contrary to the suggestions proposed in the holy grail of rails books -- Michael Hartl's Rails Tutorial. Writing extra code that didn't seem to do anything was a very unattractive proposal.

Only after running several production systems, did I truly understand the value of testing. Let me explain that in practical terms:

  • If you find yourself repeatedly running the same commands in rails console, to check if something works ... write a test.

  • If your users discover bugs in systems that used to work fine in the past ... write a test.

  • If your code base is relatively stable, and your features are well defined ... write a test.

Most Rails developers will probably throw a bunch of acronyms and jargon at you to convince you to write tests, but those three reasons I mentioned are all real circumstances that convinced me to write tests.

As far as testings frameworks go, it doesn't matter. You don't need rspec or cucumber, or whatever's fancy right now. Ruby itself ships with tests of the box, and they work fine. (Test::Unit for your reference)

short version: Write tests when it's obvious you need them.

0 Comments

I've just published my first sails.js production app -- this blog!

It has the very basics:

There are still a few things I need to implement in order to make it a real CMS content management system:

  • RSS Feeds / automatic aggregation
  • social buttons
  • page management and creation
  • custom layouts
  • admin pages

Keep a lookout for more posts, daily!

0 Comments

I recently ran in circles trying to figure out why my .sort call wasn't behaving correctly.

Remember, "Sails.js is still in beta", so it's expected to have problems

The specific issue that bit me has to do with how the local disk database adaptor maintains timestamps. "createdAt and updatedAt are not instances of Date"

You'll have a problem when you try to sort a collection by createdAt. You would expect it to sort articles new to old or vice versa. In reality, because the dates are stored as strings, they're sorted as strings -- not dates.

Eventually these kinds of issues will get sorted out, but for now tread carefully when you use new frameworks like Sails.js

0 Comments

I've been tweaking the buttons, shapes and styles of these static pages.

However at that point you're following the trail down a rabbit hole.

Set small, concrete, specific goals for your UI changes.

0 Comments

After a few videos and a couple of tries, I've gotten user authentication working with this blog.

For a brand new framework, it was much easier than I would have thought.

Compared to Rails, the process was only slightly more difficult.

The nice thing about sails.js is that the framework leverages the entire NPM repository of libraries and packages.

0 Comments

I started trying out a fledgeling node.js based MVC framework -- sails.js

It's going well so far, and I've got some basics working, as you can tell.

Once i've finished a decent MVP, i'll post it on github and write a step by step tutorial.

0 Comments