BotSumo game almost finished!

I think I’ve only written about this BotSumo game on IndieDB, (where I’ve been calling it “RoboSumo” – but have decided to rename it because “RoboSumo” is already taken).

Recently I changed it from the light & quite garish colour theme of this:

Screenshot_2015-12-07-00-04-30

…to this:

Bot Sumo

Which I quite like. The colours from this fan poster of “Ready Player 1” inspired me. Also I went full isometric, because isometric is cool (I’ve been collecting this board on Pinterest with images for inspiration).

So the idea of the game is simple, to push the other player off the platform. I’ve introduced pickups too, which make the player slightly larger, and double its mass (the game uses physics objects), making it easier to push the other player.

BotSumo - larger player

The controls are dead simple, you have one button to drive the character forward. It spins by default, so it’s about timing. There’s an on-screen button for 2 players, the idea is you grab a friend and play using the same screen, just like the Microbattles Android games.

So I’m about to start uploading it to the Google Play store (which always takes longer than I expect). But after that I’ll need testers. So if you’re interested in testing this game and have an Android phone, submit your email on this form, and I’ll send you an email.

Neat ways to write BEM without being verbose

BEM + SASS

I love naming classes using BEM, which is a good way to indicate what classes represent (and where to find them in your project), without forcing it into a hierarchy that will cause problems later if you have to change the markup.

Problem is, it can get a bit verbose though.  Especially if you’re being super specific with your names. Writing CSS selectors for long class names is repetitive and annoying. So here’s 2 tips for making it easier using SCSS: Continue reading Neat ways to write BEM without being verbose

The difference between <a> and <button> elements

I’ve seen some markup recently where the <a> tag is being hijacked to do things it shouldn’t be used for, and where a <button> should be used instead. I was going to write a long article about the difference between a HTML <button> element (used normally to DO something), and the HTML <a> element (used normally to take you somewhere else) but I saw this great answer to a question on Quora by Jakob Persson who sums it up perfectly:

This has to do with the semantics of HTML.

An A tag is an anchor element and in the context of hypertext, helps link documents together. HTTP stands for “Hypertext Transfer Protocol” why hypertext is one of the foundational ideas of the web. The word “web” is a metaphor for this network of pages which all tie together, like a spider’s web.

A BUTTON is exactly that, a button. It doesn’t denote there being a relationship between the current document and other. It just says that it is a UI element which you can click.

CSS allows us to style things to look identical. But it doesn’t change the semantics, i.e. the meaning of different HTML elements.

In summary:

  • If your element links the user to another page, then it should be an A.
  • If it’s a UI element that triggers JavaScript, make it a BUTTON.
  • If you want your site to “fail gracefully” when JS is absent, use an A tag that links to a page that relies on a server-side script and attach an event handler to it for the JS functionality.

– Jakob Persson

How long before we get cool curved desktop screens like this one from Black Mirror?

In the Black Mirror episode “Be right back” we see the protagonist painting on a large digital screen which was curved towards the bottom. At the time, this was science fiction, but I wonder how long it’ll be before this is real.

I don’t mean the technology, I know we have touchscreens now, and even curved touchscreens, like the Samsung Edge phone. But everyone right now seems to be obsessed by mobile devices, and tablets. Meanwhile, larger desktop computers for work, for the people actually doing stuff (not consuming content, like the iPad is 90% useful for) aren’t in fashion right now.

black mirror touch screen

If you see someone doing work on a computer on TV, it’s normally on a laptop. A portable, sized laptop.

But what about the artists, who want nice big displays?

This one from Black Mirror seemed perfect. She also got to use proper art tools like pencils and brushes.

Anyway, I’m mostly posting this so that in the near future I can link back to it and go “SEE!!!”.

black mirror touchscreen from "be right back"

It’s also nice to see a computer interface in a TV show that actually looks useful. Not stupid holographic displays or transparent screens which would be a pain to focus on!

Keeping CSS classes together by usage

I’ve written before about keeping your CSS grouped by component, so that styles for a specific part are not distributed wildly around the project and difficult to find.

This is normally done because of media queries. A common thing people might do is to split the stylesheet into 3 chunks. Styles for mobile, styles for tablet, and styles for desktop (or more, depending on how many breakpoints you decide to have). But I prefer to put all styles for a specific component in one place, to save you chasing these around. Even if it does mean having loads of media query declarations. But that doesn’t matter! (I use variables for these anyway). Continue reading Keeping CSS classes together by usage

Don’t scrimp on classes if it means making convoluted CSS

I’ve been reading Harry Robert’s chapter in the “New perspectives on Web Design” book today (he even signed it for me, which was hilarious because apparently nobody had ever asked him that before!), and there’s a great bit talking about reducing the amount of DIVs to create clean markup, and how it’s just cutting off your nose to spite your face.

The pursuit of clean markup and semantic classes and all that came with it was well-intentioned but helped no one. It led to verbose, difficult to maintain, tangled style sheets. The price of omitting a few classes was having to write giant, convoluted selectors to target these orphaned, unnamed DOM elements. As the saying goes, we robbed Peter to pay Paul. We were writing clean markup at the cost of writing verbose, messy and convoluted CSS. We just moved the mess somewhere else.

  • Harry Roberts, New perspectives on Web Design

Avoiding location-based inheritance in CSS

I had a thought today on a personal HTML/CSS project about how to style a light button in a dark container, and how to style a dark button in a light container.

Should I use CSS inheritance to make the button the appropriate colour in each area? That makes sense right? It means I can write HTML not really caring about the styles, and let the CSS do the rest.

But then I worried about what happens if I use the button elsewhere, out of the container. If the coloured container provides the styles, I’ll need at least some base styles on the button. And which one should be the default? Light on dark, or dark on light?

Let’s say light container is the default, so the button by default is dark.

What about then when we want the button on a different coloured background, maybe a red container inside the dark container. We’d have to override the button’s default styles to make it dark on light, then override these again to show as [I dunno, yellow?] on the red background.

I know the “C” in CSS stands for cascade, but this can get out of hand!

There’s a good article about this I found today, which has this great line that I need to repeat over and over.

…your styles will be more flexible and less prone to breaking if you avoid relying on location inheritance.

Read the rest of the article here. It takes you through a good use case of how inheritance can cause problems. It also talks about how “multiple inheritance” can also get out of hand, and solves it with SASS extends, although I prefer more of a BEM approach, but the idea of being very specific about your styles is the same.

Leaving Silktide

So Monday was my last day working for Silktide. I’ve been there 10 years, so the move to a new company will no doubt be a shock to me!

Especially as I’m going back to agency work. Something I’ve not done in about 4 years since Silktide decided to give up on web design.

In 10 years I’ve seen the company change from web agency, into a software company working only on our own products. I miss working with clients, working on short projects you can hand over to a happy client. My problem with working on software is that you’re detached from the customer (unless obviously you’re in a role that deals with them). So it’ll be nice to speak to smart people and help them achieve whatever it is they need a web agency for.

The best time since the move to software was when we turned Nibbler (the free website testing tool) into a social experience, where users could claim websites and add to an online portfolio. Some users really loved it, especially the leaderboard showing the top 10. It was nice to get involved in that community and get to know users. That’s the sort of thing that really gets me excited, seeing people enjoy using a product I’ve worked on, and getting useful feedback. Unfortunately though, the decision was made to strip Nibbler back to be much more simple where there’s zero interaction.

Working on a string of projects that will never see the light of day, and one which the threat of it being discontinued hanging over it like the sword of Damocles saps quite a lot of my morale, so I’ve not been enjoying my work for quite a while, which is why I’m glad to be moving back to a type of work which I think will make me happier.

I’ll miss all the guys there a lot though, they’re a great, very talented bunch. And the office banter is fantastic. Hopefully I’ll still see them often, as I’m only moving a couple of doors down.

So, two life changing things in the space of a month, getting married, and switching jobs! Both took a lot of preparation and stress, which is now mostly almost over.

Desk dinos & robots

desk donos

I had a fairly substantial collection of robots and dinosaurs on my desk. I’ve brought them home. Not sure now what to do with them!

Leaving presents

lego dimensions

I love the Lego games, and was so happy to get this as a leaving present from the Silktide gang. I was going to do something more productive in the time before I start my new job, but I’ve now constructed this. It’d be rude not to play at least just a little bit…

Squattypotty

This is my other leaving present. Jess bought me a “SquattyPotty”. I had no idea what it was until I watched the hilarious video (here).

The science is sound, and Jess is clearly looking out for the health of my colon, but I had absolutely no idea how to react when given this as a present.

Nobody has ever given me a pooing aid before.

Out of software

Biggest irritation right now, I don’t have an Adobe Creative Cloud licence at home, so can’t use Photoshop or Flash, and I wanted to use this time for working on a fun side project. It costs more than I’m willing to pay for only working on hobby stuff, dammit!

What I will be doing though is learning Zurb’s Foundation. I’ve always been a fan of Bootstrap, and this looks similar, so shouldn’t take long to learn.

So I got married

I’m quite lazy at updating this blog, so this isn’t exactly news straight off the press, but I thought it worth noting here.

Yes we got married 2 weeks ago, on the 31st of October! Here’s some photos:

“Previous” is the past, “Next” is what happened after

The Santander website seems to be confused what time is.

So, what is “time”? Oxford dictionary defines it as:

The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.

But we know that already. We also know that things that happened previous to now happened in the past, right? And things that happened next were things that happened closer to now.

Someone tell that to Santander!

If you don’t know, Santander is a bank where I have an online account. And it seems every time I log in I find new horrible usability problems that just frustrate me. It’s quite easy to pick on bank websites for poor usability of course because every site I’ve used are rife with terrible usability problems. But today I’ll just pick on one small problem!

I was navigating the previous transactions where I saw this at the bottom of the page:

previous next buttons on Santander website

Standard pagination controls, we’ve seen them on a million websites, right? But in this case, they don’t make any sense.

The first screen of transactions are the most current, and to navigate to the previous transactions you have to press “Next”.

Wait a minute, that’s not right!

So I’m seeing older transactions, transactions that happened previous to the ones I’m looking at, and the word I have to click is one that actually means the opposite?!

So now I’m looking at transactions that happened a while ago, they’re actually from last month, and to go back to see the ones that happened after those, the ones that happened next, I have to press “Previous”!

As if this wasn’t weird enough, if I press “Next” a few times, I get an option to press “First” which doesn’t show me the first transactions I ever made, it shows me the most recent. Technically the LAST transactions I ever made!

I’ve seen this done of a few websites, and it doesn’t make sense to confuse your users with poor wording.

Sort it out Santander!