The best reviews of my BotSumo game

My game BotSumo that I made for Android has been on the Android Play store since January, and has been downloaded now over 12,000 times. Most of those people downloading were from the US, which was to be expected, but weirdly it found secondary audiences in Russia and Brazil, despite not being translated into their native languages.

Graph of total installs by country over time Continue reading The best reviews of my BotSumo game

Devices in Browserstack are as factory defaults, without latest updates

I use Browserstack a lot for testing website in devices, and It’s especially useful as I don’t have a lot of popular devices that I need to test on. iPhone 5, iPhone 6, iPad, iPad air etc.

I noticed a problem a few times now, and it’s mostly the way these iOS devices handle vendor prefixes – or more specifically that they *require* vendor prefixes for things like transform: rotate();

Sometimes, a page might look totally different on Browserstack (which shows the design messing up disastrously) to on iPhones and iPads that I’ve tested on.

It seemed a bit odd to me that the most favoured devices in the world still required vendor prefixes, when Chrome mostly doesn’t need them. I assumed they must have been updated recently surely, and that Browserstack is only showing me the devices at their factory settings. So I asked them to find out.

Are your iOS devices as they are out of the box, or include latest updates? - ‏@browserstack @davidonionball Yes, we provide iOS devices with the OS and browser versions shipped along with it.

So there’s proof. Devices on Browserstack are at their factory settings, which means any updates to the browser (and there might have been loads by now, surely?) won’t show.

This is good and bad, I can see why you’d want to see what your website looks like on a brand new out-of-the-box iPhone, but also, with the amount of browser updates there’s been, that might display totally different to the majority of iPhones.

But, just something to bear in mind.

Update – Browserstack got back to me saying they do provide the latest version of Safari on iPhone 6S and 6S Plus, which is what I’d expect.

browserstack - You are correct. However, we do provide Safari v9 on iPhone 6S and iPhone 6S Plus.

Although still it looks like you can’t test on an older phone that’s upgraded to Safari 9 (assuming that does happen of course?!).

Transitioning the colour of an SVG image

So when trying to make the BTB website load as quickly as possible (which requires an unhealthy obsession with tweaking small things to get a better score on Google page speed insights) I removed Fontawesome, which was previously baked into our CSS file. I like Fontawesome, it makes adding icons easy, but has problems, and in this case the problem was unnecessary addition of loads of styles we didn’t need, and valuable kilobytes of data I wanted to shave off. Continue reading Transitioning the colour of an SVG image

Schema.org name vs headline

I’ve been tasked with adding schema.org markup to a website, which is something I’ve known about for quite a while, I even added some to OngoingWorlds, although still don’t really know what the benefit is apart from the obvious company name, address, opening hours, telephone number etc which I assume is what gets used when showing a company at the top of a SERP, or on Google maps. Useful for some things, like restaurants you’re googling, but not others.

Another example of data I assume comes from this sort of data is cinema times, and probably e-commerce website data showing on the Google “shopping” tab.

But that’s about all the examples I can think of, even though there’s looooads of different types of metadata you can add, including fictional characters in stories, accessibility hazards, audience, quests in games, and loads of others – problem is, if these aren’t presented in interesting or useful ways like the restaurant result example, then what’s the point?

There seems to be some duplication too. I was marking up the blog articles template (blog on schema.org) with things like author, publishedDate etc, (which are useful), but there’s also a headline and name.

Description of headline:

Headline of the article.

Description of name:

Text – The name of the item.

I wouldn’t be so bothered, but Google’s structured data testing tool is marking the lack of name as an error in red. Not sure how serious that is, but it’s RED!

Google structured data testing tool result showing errors

I’ve had a look at other examples, and The Guardian uses itemprop=”headline” on it’s main article title, ignoring name completely (hey they also use BEM, thats cool!). The Independent uses headline too, so I’m going to do what they do and ignore name.

Although, there’s a discussion on W3C to deprecate headline completely, in favour of name, which is more standard. So I don’t know what to believe!

My answers to a quiz about the EU referendum

I’ve been on the fence about the EU referendum. It’s a difficult choice, especially when you have to choose between supporting one of these:

david cameron and boris johnson

Which is like choosing whether to eat dog poo, or horse poo. Both will leave a nasty taste in your mouth.

Today took one of those quizzes that you often see linked on Facebook. I thought it might be interesting to share my opinions about each point, and you can see the decision at the end that the quiz thinks I should vote. Continue reading My answers to a quiz about the EU referendum

Who needs actual reality when you have VIRTUAL REALITY!!

I’ve noticed for quite  while that some Youtube videos have a little cardboard symbol:

google cardboard icon

I’ve seen some of the 360 videos before, and I think the first was this awesome Star Wars scene, that you can look around in 3D:

On a whim, I decided to get a Google cardboard to see if it’s a decent experience, and now I’m hooked! Continue reading Who needs actual reality when you have VIRTUAL REALITY!!

Combining media queries in Foundation

I really like the way Foundation makes media queries easy by putting them into variables, so that I can easily put breakpoint into a CSS class. Like this:

.my-class {
   font-size: 1rem;

   @media #{$large-up} {
      font-size: 2rem;
   }
}

I’ve written before about the way I write media queries (see here), and I think this is the best way to avoid hunting through documents to find a selector that might be in a separate breakpoint somewhere.

However I sometimes want to combine multiple breakpoints to save duplication. For a long time I thought this wasn’t possible, but you actually can by writing it like this:

@media #{$small-only}, #{$large-up} {

}

I find this useful with height breakpoints

Sometimes I need to use a media query that detects the height, to make sure we’re not using elements that are too large.

I’ve made my own height media queries as variables:

$short-only: "(max-height:600px)" !default;
$tall-up: "(min-height:601px)" !default;

I use “short” and “tall” for height like you’d use “medium” & “large” for width (maybe Foundation should change their variable names to “narrow” and “wide” instead?).

Game progress – Escape the sector maps

So I’ve been creating maps! This game will be a race against time to reach the end of the level. And I wanted it to be set in space. Because space is cool, and spaceships are cool.

But, space is full of nothing, so what is the map made of?

I wanted it to be made of asteroids. The best spaceship sequences in Star Wars, Star Trek etc are when there’s asteroids, otherwise space is just big, empty and boring.

Continue reading Game progress – Escape the sector maps

My current projects – May 2016

Unity – Escape the sector

cliff building escape vector

I’ve abandoned the Escape Velocity game where you control a spaceship on rails, in favour of one where you’ve got more control, and it’s a race against time to finish the track. It’s a simplistic idea, but I’m hoping to make it exciting with explosions. Yes. Explosions are cool.

I’ve written a bit more about this here.

Burnthebook

I’ve been building website frontends for work, which is going fine. My latest project has used Foundation 6 (previously I’ve used 5), and CraftCMS which is new to me. I’ve also been wireframing a few projects, using Protoshare (which I’ve written about here).

burnthebook website on mobile

I’ve just finished the company’s main website – www.burnthebook.co.uk