How I’d make English better

scrabble

I saw today that there’s some proposed French spelling changes, and it made me think we should do the same for the English language too, which is riddled with inconsistencies and unnecessary letters that create bizarre exceptions that need to be learned.

Here’s what I’d change:

  • Remove that pointless first “d” from “wednesday”, and the first “r” in february.
  • C at the start of any word should be replace with a k (unless it’s followed like a h, like “church”). Making “kool”, “krafty”, “krust” the same as the “k” in “kangaroo”.
  • Remove all silent ks, as in “knight” because it’s pointless. If people wanted to differentiate “knight” from “night” written down, they shouldn’t have used the same word to begin with!
  • Remove pointless silent gs from “gnaw” and “gnat”, they’re not needed.
  • Any w before an “r” at the start of a word is unnecessary too. “Wrap”, “wrinkle” and “wrist” would still make sense without it.
  • Replace any “x” at the start of a word with “z” as in zebra. Because z is cool and doesn’t get used enough.
  • Actually we can make use of z more, for example the word “lose” doesn’t seem to follow normal rules (it’s nothing like the similarly spelled ‘dose’ for example). So maybe we should spell it ‘looze’.
  • We pronounce a z in “organise” and “normalise”, so we might as well spell it that way.
  • Remove the unnecessary “ue” from the end of “dialogue”, “monologue” and “analogue”. I actually agree with Americans on this. Also on simplifying “doughnut” to “donut”.

Just think of all those letters we’re omitting. If everyone adhered to this in every email and Facebook statuses, just think how many bytes we’d save on the internet! It’s like adding our own level of compression 😀

Overriding a pesky parent selector with ninja specificity

ninjaI try and keep my CSS/SCSS in a fairly flat structure, and recently on a project I’ve been bugged by a parent selector which has been adding quite specific styles that have been getting in the way of my own.

The class is called .copy and has colour styles for <p>, <h2> and for <a>. So if I try to do something specific like give a result title a different colour, it gets overridden by the .copy h2 style.

I could of course make all my styles more specific, but this means adding in another class wrap all my SASS in body or an arbitary class further up the structure, but that’d annoy me because it’d be inserted into the css loads of times unnecessarily.

So I’ve taken to adding in extra selectors to provide more specificity, like this:

.result {
      &__title a,
      .copy & &__title a {

 }

Using the ampersand at the end of the line which in SASS will insert the parent (my new favourite thing) means that I’m covered for if the .copy class overrides my style, but without putting this style somewhere weird that I can’t find later.

It means I’ve added a bit of extra specificity which leaps in like a ninja when I need it, and I don’t have to do it to the entire section.

New 3D city asset project

So I’ve started creating 3D assets of buildings sat on asteroids.

Why?

Dunno really. Seems like they might be useful at some point. But for some reason these shapes have been in my head for a while, and I need to get them out. I’ve been creating them in MagicaVoxel, a great simple voxel 3D editor, and then collecting them together in 3Ds Max.

I’ve been keeping a blog of progress on IndieDb which you can see here.

I’ve also been adding some of these to Sketchfab as I’ve been going along, so you can see them in 3D. See below:

Isometric low-poly shop building
by daviddickball
on Sketchfab

I’ve discovered the ampersand selector in SASS & now I’m using it everywhere!

Once I discovered you could use an ampersand selector in SASS to reference the parent, I haven’t gone back. I’m using it everywhere because it’s so useful. Here’s an example copied from an article – the article explains it better than I ever could.

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

And here’s how the output CSS looks.

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

This is very useful! Especially when you want to keep css together by usage (I wrote about that here) so that you aren’t looking in multiple SASS files for information about every modification of a style.

Here’s how I used it today – I’ve got a class called “.copy” which is used for the content section of a page. There’s useful things in there like how the links and list items should look, because they’re a bit different to in the chrome (header & footer). But I wanted to create an aside section with different coloured text. Problem was, .aside p is the same specificity as .copy p, and I don’t want to start adding !important which could cause problems later on.

So I wanted to increase the specificity, but I didn’t want to add these styles for the aside inside the copy.scss – because that’s detached from the rest of the styles (which are in aside.scss). So I did this in my aside.scss:

.aside {
   .copy & p {
      color: #484848;
   }
}

Notice it’s between the .copy and the p. It outputs like this:

.copy .vacancy-aside p {
   color: #484848;
}

What I did in 2015

2015 is over and dead. But from the ashes rises 2016. Which it is today. January the 1st in fact.

Here’s what I did last year:

Helen and David in Carcassonne

  • Helped create an interactive display for the museum.

Joseph Wright exhibition at the Museum

  • Spent ages on a game about a giant space turd, which nobody liked, and even I hated by the end. I uploaded it to Newgrounds – see here (requires Firefox & the Unity player).
  • Grew a beard, then shaved it off.

David with a beard

  • Created some graphics for my brother’s card game – which he still hasn’t finished:
  • Created this blog! I’ve listed the most viewed articles from 2015 here.

My BotSumo game is now on the Android store

The simple & quite mediocre Android game (I’ve written about it before, here) is now on the Google play store. To download the game, go here:

https://play.google.com/store/apps/details?id=com.DavidDickBall.RoboSumo

It would be so great if you could please rate it, and leave a comment. If you find a bug or have a suggestion, leave that in the comments too – or tweet me @davidonionball.

Here’s a gameplay video!

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.

It’s only available on Android?

Yes, I’m going to only make games for Android whilst I’m doing it as a hobby, as it costs money for a licence to publish to the Apple App store. And if I’m not making any money out of this hobby, there’s not much point!

Want to get an email whenever I publish something new?

Good idea! Subscribe to this blog, which is about various things I’m interested in, or join this newsletter which is ONLY about games I make.

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