Avatar

Thoughts of a Software Maker

@kimenye / kimenye.tumblr.com

A journal of my thoughts on the journey of building software. Follow me @kimenye on Twitter.
Avatar

Creating a Multi-language Application

As an English speaking developer, I sometimes get presumptuous. Its easy to forget there’s more people who don’t speak English than do. Forget Mandarin, I reckon the fastest growing language is Emoji. 

When I was designing Ongair (A platform that helps businesses use Instant Messaging to provide faster and personal Customer Service), I made the same mistake. With most of our clients coming from South America and Asia, we were soon getting messages like:

Why doesn’t your system support characters like áéíñóúü?
I need to be able to reply with Emojis?

So I started looking into the problem. 

UTF-8 is a character encoding capable of encoding all possible characters, or code points, in Unicode. Unicode is a computing industry standard for the consistent encoding, representation, and handling of text expressed in most of the world's writing systems.

In short these two allow you to encode (store a representation of) most written characters. So, why isn’t this a default? The short story is about storage space, competition politics (Check out other encoding standards like ASCII)

TLDR: We’re going to make sure our App supports at least UTF-8.

We’re mostly on a Ruby on Rails stack with MySQL, but I’ll include some pointers for those using other languages.

Step 1: Deciding which fields need to be UTF-8

Obviously numeric characters don’t need different representation. So we’re going to be targeting VARCHAR and TEXT fields.

You can either modify the entire table or specific columns.

ALTER TABLE `[table]`  CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_bin, MODIFY [column] VARCHAR(250)    CHARACTER SET utf8mb4 COLLATE utf8mb4_bin

Step 2: Ensuring your connection supports UTF8

Ensure your database.yml (What is this?) file contains 

encoding: utf8mb4 collation: utf8mb4_unicode_ci

Step 2a: What if I’m on PHP?

Make sure your connection string specifies the encoding

DB=mysql://root:root@127.0.0.1:8889/my_database;charset=utf8

Ensure your PHP installation has multibyte string installed. You can check for this by looking at your info page.

Step 3: Use responsibly

There’s a few things we noticed using the above:

  1. Sometimes people use Emoji’s in their ‘Names’, ‘Status Messages’, ‘Group Subjects’ not just in normal text. These maybe WhatsApp specific but useful to note in this increasingly Emojified world.
  2. Don’t! Never use language specific words to represent state. If you have an object that could have a state e.g. New, Ready e.t.c. its better to use an integer, as opposed to Nuevo, e.t.c

I’ll add to this list if someone suggests something interesting in the comments.

UPDATE (CSS / Presentation):

So we’re now at the point where we need to show multi-language landing pages. One of the things we realized is that different languages may need different font sizes. Turns out CSS has support for locales.

.tagline { :lang(zn) {font-size:90%;} }

Make mandarin characters 10% smaller. Got this tip from a great resource on localization in Rails.

Avatar

Creating a custom action with Rails Admin

Application administration is an expected part of modern web applications. In Rails, there are two main contenders for the throne of Administration engines: ActiveAdmin and RailsAdmin. I've been using the former for sometime and even created a couple of gems I felt would be useful. Time to give RailsAdmin a chance.

My initial impressions were that it looked better than RailsAdmin. I'm not a fan of twitter bootstrap, but its easy to customise the look and feel. A lot more than ActiveAdmin. Anyway, this is not a review of both, so let's jump straight into creating a custom action.

I needed a custom action to allow importing of records. I didn't expect it to be reusable at first, so I put the code directly in the rails admin initialiser.

Avatar
active_admin_import_anything - Import any type of file with active admin

Active Admin is a great gem you can use for easily creating useful administrative interfaces. It also has lots of plugins that cover many scenarios e.g. to importing data from a csv file use active_admin_importable. This lets you import a csv file with a header that matches the fields of your model and it creates the file accordingly.

What if you wanted to import say an excel file where not each row maps to a record? Or you wanted to import an svg file? Wouldn't it be great if you could just have a collection_action with the file and have your own logic to create records? That's what active_admin_import_anything does. Check it out on github and give me some feedback.

Avatar
Readme Driven Development(and how to be a better writer) Mark Rickerby

Few developers ever RTFM (Read the Freaking Full Manual). That's why a simple ReadMe file covering the simple instructions on how to use a library are so useful.

Imagine you're on the other end, writing the software. Starting with a ReadMe is a perfect use case user-story for developer users. Think about how you'd like to use the application (usage, syntax, dependencies). Keep it short and focussed, then write the code that will make you're usage scenario work.

And that's ReadMe driven development.

Avatar

Satisfy your Customer Early

I had a great conversation with my students at the Nairobi Dev School about how much to charge for Software Projects. It was very encouraging seeing young developers curious to know about revenue models and making a career out of Software Development. This brought me to my favorite topic of fixed cost pricing vs a more agile approach - and a talk I gave at the inaugural Agile Africa conference (check out the talk on YouTube).

According to the great Roger Sterling - "The day you sign a client is the day is the day you start losing them". I've found this to be true for most of my career, but even a bigger problem when you've given an upfront cost for a project and taken a sizable down payment. When you add the pareto principle which states that:

80% of the functionality will take you 20% of the time. While the remaining 20% will take you 80% of the time.

Problem is, the greatest value to the client is in the remaining 20%. And developers usually get to this part, after already spending the huge downpayment given by the client. At this point, they are not sufficiently motivated to complete the project. In order to survive, the developer takes on another project (read: sizable downpayment) to plug their cash flow and the cycle continues...

So how can an agile delivery help reduce the instance of such problems?

  1. Focus on Value - work on what gives most value to your customer immediately.
  2. Continuos Integration - work on small bits that you add to your product incrementally. The client sees incremental value.
  3. Avoid fixed Costing - Fixed costing requires assumptions and that adage of assumptions applies here: "Assume makes an ass out of you and me." If you have to fix costs, factor in risk and break it down to as many milestones as possible. 
  4. Respond to Change - The main reason why you lose customers as soon as they sign, is that like a marriage people change. Respond to changes in their business environment, requirements and you will remain relevant. 

Hopefully you will get to the Nirvana where you can quote to your clients an hourly / daily rate where they recognize the value you bring to their organizations, as soon as they sign on the dotted line.

Avatar

My 2-day-a-week break from running my company

I've recently decided to take a break from running my company Sprout. Well, sort of...

Only this time I won't be off to an isolated island, with a crate of my favorite beer and nothing but seagulls for company.

For the next 8 weeks, I'll take 2 working days off and contribute to the tech community in Nairobi. Looking at the past year, some of the challenges I've faced as a CEO of a young tech agency have been in managing talent and not getting fast enough to the market. These are two things I'm hoping to fix on this hiatus.

Building and attracting talent

A startup lives and dies by the team, and I've had an excellent team this year. Many a times we've not known exactly what to do or build, but we've been happy to grope in the dark together. I'm not the most fun person to work for or with. I'm extremely inpatient and really thrive amongst driven people who require minimal supervision. This, I admit may not be the most conducive environment for people still learning the craft. So I've decided to throw myself amongst the wolves and teach young people how to program.

Image

The Nairobi Dev School started by @njerichelimo aims to teach young kenyans how to program. I've already taken two sessions with the students, teaching them Ruby on Rails and its been very promising. Their curiosity has been challenging and I can already feel that my patience levels are growing.

Me, with 'principal' Martha at a Treehouse sponsored meetup

I'm hoping they get their website up and get some of the students blogging about their experience. Ultimately, I'm (selfishly) hoping to be able to inspire some of them to take up this journey I've been on the last decade. I wouldn't mind an employee or two. 

Avatar

Thoughts of Judge Dread on UpStart Kisumu Auditions

Judges @kibee, @ShideBenz and @kimenye

Upstart, a televised start up accelerator, was about to hit Tom Mboya Labour college in Kisumu. And they were ready for it. The show that is Big Brother, The Aprentice and Shark Tank rolled into one has budding entrepreneurs competing for a $50,000 investment.

After months of talking and planning it was finally going ahead with a very palpable excitement in the air. I reluctantly got some make-up applied before getting ready for our first contestant of the day. We’d come to town seeking the best from a region well known for flamboyance, and flamboyance is exactly what we got.

The entrepreneurial spirit of Kenyan youth was on show as contestant after contestant regaled us with stories of their ‘hustling’. Most surprising to me was the fact that poultry farming emerged as the side-hustle of choice, given that most people would associate the scenic lakeside town of Kisumu with fish rather than chicken.

We were regaled with inspiring stories of salesmen putting themselves through school by buying and selling items to their classmates. Is there a Richard Branson in the making here?

Only time will tell.

What is certain is, if the first auditions are anything to go by, anyone thinking that a business driven show could be boring is wrong. From impromptu pickup-lines, dancing, singing, rapping to even aerobics, the contestants did everything to ensure we - the judges - were thoroughly engaged.

One of the contestants before facing "Judge Dread"

My emergence as the tough judge (‘Judge Dread’) came to me as a surprise. There’s a fine line between ensuring that we have a high caliber of contestants who can withstand the pressure of business and entertainment, and ensuring everyone is given a fair chance to put their best foot forward. Ultimately I felt my stance was vindicated by the fact that I could have some lighthearted moments with most of the contestants during the breaks. Nobody took it personally, I hope *cringe*.

A successful applicant @elishawaudo

Perhaps, in some way, the only disappointment was the lack of a successful female contestant. We had quite a few promising female aspirants in both technical and creative roles.

We also saw lots of very localized ideas that I doubt would be applicable elsewhere. Some contestants also lacked ambition in their thinking. That said, I’m looking forward to the next auditions, and especially getting a large turnout from the ‘Creatives’ and more women. Mombasa, Nairobi – bring it.

-Mombasa auditions on the 12th October. Nairobi on 19th & 20th October

Avatar

Sencha Touch 'cls' parameter

So I've spent a couple of hours trying to figure out what's wrong with my code. I'd created a Sencha Touch panel and assigned it a specific class through the 'cls' property. Turns out if you set put this property within the class 'config' property, when you app is built, the 'cls' property is not applied.

Avatar

Styling Zurb Foundation Tabs

I'm a big fan of CSS and Javascript frameworks. There's no point in reinventing the wheel for every project. However, the disadvantage with this approach is a lot of websites tend to look the same.

Take for example styling these TABs from their stock look...

into this...

It looks like a simple enough challenge, so lets get into it. First, let's get rid of the grey background's and borders... I'm using SASS. Check it out if you haven't. It lets me nest the specific CSS under a class called 'product'.

.product { .section-container.tabs section.active .title, .section-container.tabs .section.active .title { background-color: #65c8c6; color: #ffffff; } .section-container.tabs section .title, .section-container.tabs .section .title { background-color: #46166b; color: #ffffff; } }

So that also takes care of the selected and unselected states, giving the tabs that 'aqua green' color when selected and 'purple' when unselected. Now to get the rounded corders and remove the borders...

.product { .section-container.tabs section .title, .section-container.tabs .section .title { border: none; border-radius: 5px 5px 0px 0px; } .section-container.tabs section .content, .section-container.tabs .section .content { border-left: 1px solid #65c8c6; border-bottom: 1px solid #65c8c6; border-right: 1px solid #65c8c6; border-top: 5px solid #65c8c6; border-radius: 0px 5px 5px 5px; } .section-container section .title a, .section-container .section .title a, .section-container.auto section .title a, .section-container.auto .section .title a { color: #ffffff; } }

We've now added a border radius of 5 pixels on the top left and right corners and a thick border at the bottom of the selected tab.

Now to add the space between the tabs. Here the Foundation Team in their bid to simplify the markup for tabs (sections) in Foundation 4 provide some gotchas. The positioning of the Tab titles is relative and is calculated in Javascript at runtime. So doing a simple margin-right doesn't work. We need to add a margin-left since the tabs are positioned using the left attribute. Why the Zurb guys did it this way is a bit beyond me. Anyway, you need to use some awesome CSS pseudo selectors.

... .section-container.tabs section:nth-child(2) .title { margin-left: 20px; } .section-container.tabs section:nth-child(3) .title { margin-left: 35px; }

The above CSS selectors select a 'section' element that is the 2nd and 3rd child of its parent respectively. That's why the first title isn't affected. if you need to brush up on CSS selectors, here's a great article

I'm thinking of making this a series. So if I find myself customizing foundation css in an interesting way, I will post it.

Avatar
A visual captcha system for Rails based on the visual captcha from emotionLoop (http://visualcaptcha.net)

Its been a while since I took part in some hard core programming. Too much business development, pitching and other stuff that would just make baby Jesus want to cry...

So when one of my code-for-food projects needed a fancy captcha, and the only one I could find that I really liked was implemented in PHP, I decided its time to port it and add some sugar.

it's been a while since I last wrote a gem. Peeps aint using 'hoe' anymore. Anyway, I quite enjoyed the experience. And its working on my client project. While coding it, I got a really awesome idea for extending this project. More on that soon.

Time for sleep. If you need a cool captcha for rails, check it out.

Avatar

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.

Avatar

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.

Avatar

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.

Avatar

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.

You are using an unsupported browser and things might not work as intended. Please make sure you're using the latest version of Chrome, Firefox, Safari, or Edge.