Android apps on Chromebook

I recently got my hands on a Chromebook again after a much needed break.
I decided to go for the HP Chromebook 11 after spotting a good deal on eBay. I wanted this model because it’s got a micro usb charger, meaning it’s easy to find someone with a charger or to use my portable usb charger to keep it alive on the go.

Just this week, google announced that you can run a select few Android apps on Chromebooks using a new runtime they have made available.
For now, it’s only android apps that they make available so there are probably still a few bugs to work out but it looks positive for the future.

I already like Chromebooks due to the easy syncing of bookmarks and cookies from desktop and mobile but the ability to run android apps on them opens up their functionality even further.

I look forward to seeing what other apps will be available soon (even if secretly I’m an apple fanboy)


How to use a transparent picture on Twitter

Recently I was trying to get a new avatar image for my Twitter Profile to be transparent.

I tried uploading it through Twitters normal web interface but I got inconsistent results – seemed to be transparent (sometimes) on mobile but not on desktop.

A google search took me to many stackoverflow articles about the issue and they all said it couldn’t be done.

However, eventually I found a buried blog post which showed me how to do it. I’ll share the technique with you here:

1. Prepare an transparent png image.

2. go to http://twtkr.olleh.com/, sign in and authorize with your twitter account

3. open your profile page, by clicking your name on the left top of the page

4. After you get in to your profile page, follow this picture by clicking the red highlighted button


5. Click browse and select your image, and then click the upload button (highlighted below)

Now, on mobile at least you have a transparent twitter avatar!

DDD EA Summary

On Saturday, I was lucky enough to attend DDD East Anglia in Cambridge

From talking to people, there seemed to be a wide range of skill sets and knowledge with most of the attendees being developers – probably to be expected when the conference is called “developer developer developer”.

I found the talks to be pitched at the right level for me and they were varied enough not to get buried in technical detail, nor to be too high level.

Here is a summary of live blogs that I did during each talk, (so if you saw me, I wasn’t just texting):

Session 1 – GitHub Automation
Session 2 – Building Skynet
Session 3 – Disney driven development
Lightning talk 1 – Versioning
Lightning talk 2 – Universal Store Apps
Session 4 – Data Science for fun and profit
Session 5 – what UI do developers need to know?

I hadn’t heard of DDD EA before, probably because I am new to the .Net world but I really enjoyed it and I am sure I will attend again.


DDD EA – Session 5 – what Ui do developers need to know?

This talk is by @ben_hall and was live blogged

Great user interface design helps our users and creates an emotional connection

We can fall in love in the same way as we use applications. We may not realise this, it’s not a conscious decision.

If an application looks better, this conveys professionalism and carries weight.

In a startup, everyone should be a designer. This causes more emotional connection between your app and your user, hopefully meaning higher app adoption

Design also shares many things with development. Patterns, practices and iteration exist in both worlds.
A junior designer could take some parts and move them into a clean design. A senior designer will take the parts and make this into a easily recognisable design.
A junior designer will see the end goal and keep working towards that. But a senior developer will work differently by iterating and knowing there may be many ways to achieve that same goal.

The left side of the brain sees the details and puts the pieces together. The right side of the brain use the overall visual picture then zooms down into the pieces

As a designer, we can use white space to emphasise certain parts of the page. Eg CTA. It can also be used on text to make it more readable by increasing line height.

It’s important to emphasise the relevant parts of the document.

Also consider the golden ratio, given a rectangle has a side of 1 unit, the other should have a side length of 1.61. This ratio exists in nature, humans and even the Mona Lisa. Twitters timeline uses the golden ration to layout their page as well as the iCloud and apple logo.
These things are built in and not cognitive – applications just don’t feel right

Even square blocks cause more cognitive effort – use circles to feel more natural. We are educated that corners are bad and we have an internal knowledge that squares are bad. Squares draw our focus just outside the square where as rounded corners draw our attention in.

Using icons is very important if they are clear. You shouldn’t need to explain what an icon is – an easily recognisable icon makes it easier for a user to process.
Consistency is really important too.

Images have also introduced desirability. Air bnb has high quality images and it makes people want to use the site. As a web developer this is great as it gives us a great place to start from. Don’t use stock photography. We can use a colour palette from images too to make these match. If you have to use low quality images you can blur them and enlarge them to add a nice visual effect behind the content. You can also use image background to drive attention to CTA

You should also help power users too. Hide extra features away in the UI until users need to know. Reveal these things only as the users need them. You can also use responsive icons to show more detail on larger devices and more simple icons at smaller resolutions

Colour theory is difficult but there are patterns that you can use to find complimentary colours. Colours also have meaning too. Red means anger or passion so we can use these for attention in out design. Where we use green as this means safe and trust for ok messages.

Typography is also important. If you aren’t using icons you are using text so it should look good. Typography is actually art based around words. Get the font wrong and it can destroy your application but can also make it work.
Typography can make content more engaging and compelling but can easily spoil it too.
Serif fonts should be used for print, where each character has a small edges to make things more readable. This doesn’t work on the web though and disrupts your ability to flow during reading.
Type faces are constantly evolving and each font face also has different weights too. Thinner fonts are seen as more elegant.

We aren’t used to seeing all capitals so it takes more effort to try and read, which is why it comes across as shouting or aggressive.

You should experiment with fonts to try and find the one that fits the best but don’t use more than 3, it causes more cognitive load and the user has to concentrate a lot more.

Also make sure you respond to users touch events. It engages the user and without them, confuses the user. If a process is long running the you should let the user know. Showing milliseconds gives the user an indication that something is still happening and gives the user impression that the process is going quickly

Error messages should be informative and helpful to the user. Not just saying “an error occurred”.

Help the user to make the right decision. If a browser knows you are in the UK from your IP address then put UK at the top of the drop down list.

Also make it easy for users to undo actions this makes it less taxing for a user to do certain actions as they aren’t as worried about doing things so don’t have to think so hard.

You can use usability testing to see how your design works. But you shouldn’t just ask “do you like this”. This should be a conversation not just a response to questions. This is a great way to catch mistakes. It’s easier for someone else to spot one of your mistakes.


DDD EA – Session 4 – Data Science for fun and profit

This was live blogged during DDD ea so may be full of typos and issues.

It’s by Gary short @garyshort

Data science is maths and therefore dull. We will learn about data science in the context of horse racing

Naive probability is the type of probability that most people know. It’s the number of winning outcomes over the number of total outcomes.
Each head or tails flip for example would be 1/2 and this is independant as each coin flip does not impact the other.

But this doesn’t always work. The chance of there being life on the moon is not 50/50 just because there are 2 possible answers. This is called conditional probability.

A guess is picking which side of chance will occur.
A prediction is selecting and outcome based on known conditions

In horse racing, all things being equal how can we predict a winner?
With 8 equal runners, there’s only 12.5% chance of winning – not 50/50 (win/lose)

So if we need to do conditional probability, we need to build a model based on the known values – you cannot model the real world.
This is the same as building a scale model of any other idea so we can test how closely this reflects the real world

Because we have so much data these days, or lots of horse racing for example, we can check multiple models about horse racing from all time to test our model.

Average is the simplest model, for example if you want to predict the height of next years class, you can take the average from last year. In horse racing, we can average the position of the last 10 races. But this is wrong.

There are 2 types of data quantitative data and qualitative data.
Quantitative data are fixed numbers
Qualitative data is categorical and based on rules and not necessarily repeatable

Sometimes qualitative data pretends to be quantitative and was pretending to be numbers. Finishing 3rd doesn’t mean the horse was 3 times worse. This is actually a category not a number.

Standard deviation is an indication of how much the data varies. If you have a large standard deviation then there are outliers of data at either end and therefore is less accurate.

Categorical information needs to be assigned scores instead of using the arbitrary category names (even if they are numbers)
For example, give 3 points for 1st, 2 for 2nd and 1 for 3rd and nothing after.

Unifying the scores to 1 because we need to determine how close we are to something happening. 1 is definite and 0 is never. So unifying these numbers gives us a clearer representation of likelihood.

If we have lots of different pieces of data and the possibility of each of those individual things, how do we combine these into a total probability?
We can just unify these values as we did earlier. We can now also weight the items we think are more valuable by adding some extra value.

This is more art that science though. One persons opinion on weighting might be different to another and you will need to test each of these in turn and this could take a lot of time
How can we work out which variables are actually valuable?
We can use the coefficient of correlation to determine this. Excel has this functionality built in. And we are looking for a number above 0.6 to show correlation. A negative value shows inverse correlation. This gives us a good starting point

Confounding variables are variables that cause effects that we measure. However, if we only look at the effects, then we are missing a key point. Eg ice cream sales and drowning are correlated but the confounding variable is temperature – it’s the variable that we haven’t thought of.

If things are correlated we can use libear regression. Excel has this functionality built in. This will create a formula to predict one variable based on another. However for more complicated problems, linear regression doesn’t work. As we cannot have values over 1 or below 0. We can however use logistical regression to give us these values in the correct range.

If the relationship isn’t linear, we can use Bayesian theory.


DDD EA – Lightning talk 2 – universal store apps

This is a talk on universal store apps by iris classon @irisclasson

Universal store applications came out at build 2014 but it wasn’t new – just made easier

Universal store applications means it works on windows 8.1 and on windows phone 8.1. We can share code, assets and resources meaning less code duplication. The only difference is the user experience

It also means that if a user purchases your app for windows, it also will work on their phone with synced data. Xamarind also allows you to make your app work on iphone and android devices too, if you use decoupled code.

Lots of different languages are possible to use with universal store apps.
You need windows 8.1, visual studio and developer license (which is free). You can run windows 8.1 in a virtual machine.

You can define shared controls in the “shared projects” which allows small pieces of functionality to be shared between projects. The code is clever enough to adapt to determine which control to load for mobile or desktop.

A resources dictionary is like a CSS file and contains all the styles necessary for the apps.

When you share code between platform with this technique you have many options – investigate PCL (portable class libraries), conditional compilation and bait and switch.

Intellisense in visual studio is also clever enough to determine which pieces of your code will run depending on which platform you are building for.

When creating a universal store app, you get 3 projects: windows, windows phone and shared
You need to add dll references of third party libraries to both projects.

Each project has it’s own manifest file which needs certain properties setting in each one before releasing the app
There are many options for side loading apps on windows.


DDD EA – Lightning talk 1 – versioning

Versioning by Toby Henderson @holytshirt

.net was supposed to stop DLL hell but nothings changed. It helps with some things but lot of people still don’t understand.

Versioning is to give a unique name or number to a piece of software but there’s lots of different ways to do it.
In .net is minor major build revision.
Suggested to use minor.major.patch with optional prerelease/alpha/beta keyword on the end. Also don’t use negative numbers.

Everyone knows assemblyversion. This is the version number you are compiling against. If the version changes, you need to recompile

Assemblyfileversion where build servers build same files but on different machine. This is also used in production to select which version of the file it’s updated. If this value is not present we fall back to assembly version

Also available is assemblyibformationalversion. This is used to determine product version of a collection of dll but this isn’t used.

A myth of versioning is that only major.minor are used. It did used to do this is .net 1 beta 1 but hasn’t since.

Versioning is important: if the release is backwards compatible don’t change the assembly version. Only change this if there are breaking changes.


DDD EA – Session 3 – Disney driven development

This was live blogged during DDD ea session 3 at melinda seckingtons talk

Melinda visited Disneyland and were lucky enough to go on the “keys to the kingdom” talk.

They saw behind the scenes of parts of Disney that most people don’t see.

In 1955 Disneyland opened on a different location to today. Walt Disney has an idea about building a theme park and it should be very different to the normal carnival theme Parks of the time.

When the park opened, 28000 people turned up and half didn’t have tickets and Disney weren’t expecting them. They ran out of water and had to choose whether to provide water to drink or to keep the toilets flushing. They were also lots of problems where cement hadnt dried and the bins were overflowing.
Beyond this, there were other problems Disney hadn’t considered. The Disney corporation bought up lots of land when having the idea to build a theme park and other people noticed this too and other companies bought up land too.

In 1965 Disney bought land via dummy corporations near Orlando, this meant competitors didn’t notice, they could buy land cheaply and could buy lots of it. The dummy corporations in 1966 created a community. This meant Disney could bypass a lot of red tape and could just apply for permits effectively from themselves.

Later that year, Walt Disney died of lung cancer and his brother came out of retirement to finish the vision in the next 6 years.

In the tour, the guide explained disneys four keys:

1) safety
safety can be the safety of the rides for Disney. But Disney also apply this in subtle ways too. Every flag is Disney are lightning rods as well as statues around the park because Orlando is known for thunderstorms and hurricanes.

The change of the pavement height also is indicated by a change in the floor colour.

Doors in Disney are always open. There is never a closed door to where visitors should go.

The pavement is slanted upwards on the way into the park. This is because kids want to run towards their favourite ride and the slant causes them to slow down.

Walt Disney said there should be a bin within 30 steps as this was the distance where people get bored of holding their rubbish.

2) courtesy

The slant mentioned earlier also makes it easier for people to get home at the end of the day.

Disney also react to badges. For example, melinda had a “just engaged” badge on when visiting the park. Disney employees reacted to this and were friendly in asking about this. It didn’t seem “fake friendly” but felt genuine.

Walt Disney said “it take people to make dreams a reality”

3) efficiency

Some of the flags in Disney are not real American flags, they will add or remove details of the flags, so they can get around the US flag code which sets rules on having to hoist and lower flags at certain times

All the shops on Main Street in Disney are connected to each other. So you can walk from one shop to another without exiting and causing bottleneck at the door.

You never see people empty the bins at Disney. They are all connected underneath the park. An entire floor was built under the part of Disney that you see to help with this. This “ground floor” allows employees to get around the park so that the correct character only appears at the right place in the park.

4) show

The pavement is themed to the area. In discovery land, binary code is embedded into the pavement

The slant on the pavement also creates a forces viewpoint. Staging the castle at the end of the street and creating a more majestic impression.

In Disney you don’t see the buildings that the rides are included in. Where they cannot be hidden, the buildings are painted in a particular green that Disney discovered that your brain skips over so you are given the illusion that you are just in one place and the outside world is external.

Disney also puts popcorn machines at the edge of the park to give users the smell which creates expectation and creates and experience for the customers. In the haunted mansion they also generate an old musty smell to add to the experience. This is subtle and you wouldn’t normally notice

Each park also has it’s own soundtrack without overlap. This gives a different and separate experience to each part of the park.

A lot of disneys rides use magicians tricks to create illusions of dancing ghosts. Other rides also use different magic techniques. They invited magicians when the park opened and even they couldn’t work out how the tricks were done.

All people at Disney are called cast members and all employees go through stage auditions. This isn’t only true for in costume characters but also for people just working in the shops.

“Disney land is the star. Everyone else is a supporting role” – Walt Disney

How does this apply to software development:

Make things simple and clear
Don’t give users cryptic error messages
Hide away the bits that the user don’t need to see
Add delight to experience

“Do what you do so well that people will want to see it again and bring their friends” – Walt Disney.


DDD EA – Session 2 – Building Skynet

This was live blogged during the talk at DDD ea. The talk is by Anthony Brown

People think that machine learning is scary, or to do with science fiction but machine learning is all around us

Advertising, which products you get suggested to buy online or even online game match making are all examples of machine learning

Even CPUs since ~1995 use machine learning to optimise.

Target in the US used machine learning to predict what a 16 year old would want to buy. However, the company predicted that she was pregnant! Her father saw the flyer that she received and went mental, complaining to the shop. However, it turned out she really was pregnant – the supermarket knew this before her own father!

When guessing peoples names, we have an idea that a person “looks like a “. When we are growing up, we learn that something is an apple by the shape, size, colour etc.
This is no different to how computers machine learn. They build up a picture of a particular subject and gain experience.

Data + assumptions = results.

But often these could be the wrong results.

Bayes introduced a new way of thinking.
Spam filters work by working out which emails are valid and which are spammy. But we need to give it some data for it to learn – this is like us learning as children, building our experience.

We can build classifiers based on certain rules and then work out whether an email is real or spam. This is similar to how gmails spam classifier works.

The nearest neighbour algorithm works by determining which of the data classes are closest to the target we are looking to classify.
For example: when trying to work out which character a hand drawn letter is, we simply work out which character from our known character list is the closest to the letter we want to classify by comparing the letter with the most pixels in the same place.

But how is this useful in production?

Microsoft azure has a product called MAML (Microsoft azure machine learning) which generates R code.
We can build a recommendation engine in about 30 minutes. For example, if a user previous watched a Tarantino film, they are probably interested in other ones and similar films.
This is a graphic, flow chart style tool which helps us to simply do this. The tool contains various machine learning algorithms to help you.
The tool allows you manipulate and split data too, for training purposes.

Given some test data from what a user does and doesn’t like in films, we can recommend new films based on titles from IMDB. We can also join this data to other things, for example, we can say that if a user liked a film we may be able to imply other data about them by joining to other data sets (although this might be non correlated data and give strange results)

When we look at the results, we will have to tweak the training to get more accurate results.

The MAML tool allows you to create a web service based on this data which can take inputs (for example from your web application) and create outputs from your model to read back into your web application. This will also scale to your companies need.

If you have some data in your application right now, you can use machine learning to predict future outcomes – even if you are only adding this to a small application, don’t forget that user experience is key.

For example if a user always goes to their invoice page to print it after the day it’s generated, consider automatically redirecting them there when they log in on that day

Giving users this experience makes your product better than your competition.


DDD EA – Session 1 – GitHub Automation

Please excuse all typos/grammar mistakes – this was done live during the talk.

This talk was by Forbes Lindesay.

If you want todo something simple with GitHub then some browser plugins are available but if you want to do more, use the REST API

*sometimes returns 404 when should return 403 – this is done on purpose for security

To automate:

1) generate a new oauth token – use developer for tools for other people – personal for yourself

2) choose the access rights

3) add oauth token to your chosen code/library, (you can use GitHub-basic if using JavaScript) choosing API version and sync options as per your needs

The GitHub API, gives you low level access to functionality, but this means that you have to do more to do simple tasks. Eg: you have to mess about with shas and trees rather than just saying commit(files)

Forbes then gave an example of getting a list of contributors to a particular repo by calling the API followed by an example of doing a commit via JavaScript.

When maintaining the JADE library on GitHub, there was an old piece of functionality that used some strange code to generate HTML doctype which was subsequently changed. but some people liked the old way – how can we solve this issue for people that want it the old way with keeping the code the same?

We can do this with automation on public repos. Create code to check peoples public repos and do the replacement afterwards, instead of part of the library and we can fix peoples deprecated code.

1) iterate through their repos.
2) find any relevant repos that contain deprecated code
3) branch with changes
4) create pull request on each repo with description about fixing the deprecated features

This GitHub automation bot has been run live on GitHub and many pull requests have been created. Some have been accepted and many have been closed. When doing something like this before, 20% of pull requests had been accepted.

However, there are potential problems with this.

Forbes describes a way to parse messages from the ES discuss mailing list into a better readable format.
He tried various approaches to this, eventually settling on using GitHub as the back end as this provided unlimited storage and built in support for moderation and editing.
He created a bot to pull data from the discussion list and inserted the data into GitHub.
This worked well for 6 months, but they realised that GitHub was too slow to do what they wanted so they replaced that with a normal database instead.

Ideas for GitHub automation;

1) open source report card
Takes a GitHub user and generates data on that user like languages and when they commit as well as similarities. Also draws graphs.

2) gitspective
Takes GitHub commits and issues and makes them into a Facebook like timeline

3) Huboard
Commercial project to pull in issues from GitHub for use on kanban board

Forbes other ideas:

1) personal task list
Read oldest first issues from GitHub to know what to do

2) automatically public new versions
When a change is made, automatically push to a CDN

3) automating patching of security vulnerabilities
Search all public repos for known security flaws, automatically patch and create pull request.

In summary: Build more bots!