Thoughts of a Software Maker

Standard Vs Nation - Annoying Things Newspaper websites do

I often read online news on my phone and these are a few bug bears I’ve noticed. I’ll be reviewing the two major dailies in Kenya - the Nation (http://nation.co.ke) and the Standard (http://standardmedia.co.ke/m/)

Comments

The moment where the comments in an article are more interesting that the article itself is far to common. Therefore its a big minus that Standard doesn’t have comments. Nation on the other hand has disqus, so at this stage its Nation 1 - Standard 0

Titles

Didn’t think I’d be talking about this in 2013, but hey. What’s the difference between these two sites?

I usually open several tabs and its a nightmare to find out which article I’m reading when on the Standard site. The annoying reason is they put their name before the title of the article, as opposed to Nation which does the opposite. If the webmaster is reading this — that little icon on the left known as a favicon. That’s what it’s for. To let users know they are on your site. Nation 2 - Standard 0

Inflated Page Views

This is quite annoying. You click on the next page, and there’s no content on the second page. I suppose they do that to add an extra page view. But with these ad heavy sites, you end up downloading a lot of content that you don’t need. Both sites are guilty of this, but have found most instances where Nation puts the byline on the second page.

In conclusion, Nation 2.5 - Standard 0. The .5 was for pretending to look genuine.

Open Source Company Website

My last post was about the (false) promise of Content Management Systems. The premise of my article was that reaching your audience isn’t about the fancy tools used to abstract the complexity, but by creating relevant content where your audience can see it. Well, today’s article is about creating a website - for the tech savvy - in the most insanely complicated way. Why? Just ‘cause.

So my company’s website (http://www.sprout.co.ke) has been under construction for over a year. We’re finally getting around to building something and I needed someplace quick to test out my ideas. There are two and half developers working at Sprout, and we absolutely love git & github. We also use a lot of open source stuff so i decided to test out some of the website concepts with github.

Its a basic HTML5, CSS3 & JS site, with no backend as such. All the code is in a github repository. All the developers can now test the site, make changes and these changes will be visible instantly at http://kimenye.github.com/sprout/. This is powered by Github Pages, one of the really nice hooks on the site.

WYSIWYG Editors & CMS will be dead soon

“Professional Web Site Publishing Without Programming”

That was the promise, almost a decade and a half ago. If I had 100$ for every time a client has asked me, “but does this website come with an easy to use CMS?” I’d be playing golf right now instead of writing this thinly veiled self promotional article disguised as tech commentary.

So, what’s driving the obsession with content heavy sites. Most of the sites I visit daily a content rich. Some examples include thenextweb.com or mashable.com. These are sites designed specifically for blogging. Last I checked, even techcrunch.com is running on wordpress.

This same approach cannot be used for the “brochure” sites which most businesses clamor for. There’s nothing wrong with using designing a site using Joomla, Wordpress or any of those CMS/blogging engines. Its just that most customers won’t end up using that functionality.

Most people agree that Content is King. Many brands actually have more engagement on their Facebook pages than their websites because of this. I was surprised the other day looking at the content management capabilities for managing a Facebook page. You get two options: what’s on your mind, and share a video / image. No fancy WYSIWYG editor, with crazy formatting options in site.

If you need lots of content, get a blog. Leave your crap brochure site as it is. Its bad enough already.

Programming Realtime Multiplayer Games - Part 1 of Many

I’m now into developing my second realtime multiplayer game - recreating a paper based game from my youth. I’m amazed at how difficult it is to faithfully recreate the offline version of a game into an online context, but that’s probably a whole post on game design by itself. What I want to do in this series is to focus on a few hacks that I’ve found useful along the way.

User Agent Switching

The initial launch of the game is on mobile web (Android and iOS). The native versions will be hybrids based on Sencha. So I needed a really quick way of emulating the mobile browsers. It’s no replacement for using an actual simulator but its faster to use your desktop browser especially if you’re dealing with webkit based browsers. Chrome has an awesome one. Remember to ALWAYS test on the real device as soon, as frequent, as rigorously… as possible.

User Onboarding

That’s a fancy term for how your convert your guests into users. The first rule of onboarding is make it a painless as possible. Do you really need your users to remember another username and password? For most social apps and sites, I use Facebook login - which comes with lots of social benefits out of the box.

Test Users

Another feature I love about developing for Facebook is test users. You can basically seed a whole population of “users”, make them friends with each other so your rest users have someone to play with.

Multiplayer Sessions

Finally some meaty stuff. Say, you’re testing some functionality that requires two players to be playing and you’re using Facebook login. You need a separate session for each player. This is where Chrome’s incognito functionality comes into play, by isolating the two sessions. Below is a screen shot of this setup in action.

How to Railisfy Your Sencha AJAX Requests - Part II

My last post was on how to ensure parameters are sent through to your RESTful Rails backend correctly. After creating a few requests successfully, I discovered that my session was getting cleared after each POST request. There was also the tell-tale warning in the logs:

WARNING: Can’t verify CSRF token authenticity

This token is required to make sure other servers cannot hijack your session and it’s very easy to include the token in your request. As shown below:

var token = document.getElementsByName("csrf-token")[0].getAttribute("content");
Ext.Ajax.request({
                url: "/some-path?authenticity_token=" + token,
                method: "POST",
                headers: {
                    "Accept" : "application/json"
                },
...

How to Railsify your Sencha Touch AJAX Request →

So you want to create restful resources from your Sencha touch client but you don’t want to change your controllers or write some cumbersome code. We’ll, with the addition of undescore js, the GIST in this link is your answer. It’s also one of the best documented GISTs I’ve seen in a while.

Restful JSON Stores with Sencha Touch in Rails

Like most modern UI frameworks (read Backbone, Ember), Sencha Touch provides a data store functionality, that handles loading, paging, the full salad. This post covers how to setup a Sencha Store with your restful resources on the server.

Define your resource in your routes.rb file

resources :players

Ensure your controller handles the json format

The Sencha Store is going to target your index action on your controller, to retrieve the resources. Note that it includes some pagination properties which is nice.

  # GET /players
  # GET /players.json
  def index
    @players = Player.all
    
    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @players }
    end
  end

Define your Sencha Store with an appropriate proxy

Ext.define('MyApp.store.Players', {
    extend  : 'Ext.data.Store',

    config: {
        model: 'MyApp.model.Player',

        proxy: {
            type: 'ajax',
            url: '/players',
            headers: {
                'Accept' : 'application/json'
            }
        }
    }
});

In order for rails to automatically handle your formats correctly, it needs to detect the request as json. The correct header for json requests is ‘Accept’. ‘Content-type’ is used in the response and they are not interchangeable.

Using Sencha with the Rails Asset Pipeline

A big part of the learning curve with Sencha is getting used to the odd development cycle. As a rails developer, I’m used to putting all my Javascript in the assets folder and that gets precompiled to a combined file. Sencha has a custom loader which fails to pick up the correct paths.

You’ll experience errors like:

404 - “http://localhost:3000/app/model/…”

My directory paths are as follows:

My Sencha related Javascript classes are under the folder “app”, in their proposed structure of “controller”, “model”, “view” e.t.c. I have also added a file “classes.js” which contains a “//= require_tree .” in order to include all the files in the respective subdirectories. This means that I don’t need to follow the strict folder convention, but its good practice for readability (If you have a good IDE).

All that’s needed then is to disable the AJAX Loader:

Ext.Loader.setConfig({ enabled: false });

And Bob’s your uncle.

Every Freaking Thing you can override in a Refinery CMS project →

A list of Every Freaking Thing you can override in a Refinery CMS project, by Ryan Deussing.

Very helpful on my first Refinery CMS project.