Author: davidball

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

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.