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.

I’m literally polishing a turd

I’ve been trying to finish my latest Unity game, the one I mentioned at the end of a recent article (see here), and which I’ve been posting updates on IndieDB (see here).

It’s just a silly game, I’ve been creating for the purpose of learning new stuff, making sure that every script I write can be reused in other projects, so eventually I can have a toolkit ready to go, to make progress much quicker.

It’s been almost done for ages now, but…

The last 10% takes 90% of the time.

Or at least that’s what it feels like.

I want to get this project finished so I can move on to a cooler, less stupid game. One maybe worthy of putting on Steam greenlight. But I don’t like making anything that isn’t at least finished. I’ll be putting this onto Newgrounds, for some people to play, although the Unity plugin doesn’t work in Chrome any more, so its audience is limited.

turd

Don’t get me wrong, this won’t be a super polished game, but things that end up taking a long time are those little bugs you notice, I had one problem where the player gets stuck on a particular bit of terrain, and I spent ages tweaking the drag/mass/velocity values of the ridigbody.

And sound.

Sound DEFINITELY takes a long time.

In fact it didn’t take me long to find the background music, there’s loads of great royalty free stuff on Newgrounds you can just use as long as you credit. Oh that’s another thing I have to do, create a panel on the menu for addign credits. Dammit, UI stuff in Unity takes a lot longer than in just HTML/CSS.

I wanted a bit in my game where the background music changes when the user enters a certain area. Just little tweaks like that is the sort of thing that takes a long time.

Another thing I added is a screen that flashes up to show the keyboard controls, as I realised it wasn’t obvious at all which keys were used. That’s something else that takes time. Hopefully though the script I created for that will be reusable in another project.

Controls

I admit I did get carried away adding stuff to this project that I didn’t intend to at the start. I’ve added turrets, something that actually didn’t take too long, but is an additional extra I didn’t plan for.

turrets

And making turrets target the player and fire took me at least 3 evenings because it involved maths (not my strong point) and because 3D is harder than 2D! The turret is above the player, so it has to angle down and shoot, which would look much better (I think) in 2D.

I do wonder if working in 3D has slowed me down. I’m sure all those crappy Flash games I made at Uni didn’t take this long!

There’s also things that I haven’t managed to do, even though I’ve spent a lot of time on. I really wanted an arrow pointing to a target off-screen, like this…

arrow to target

But it’s just too difficult for me right now. Maybe for another project.

So anyway, I’d better wrap this up and stick it on Newgrounds asap.

Why I think smartwatches will destroy cinemas

With smart phones getting bigger and turning into phablets it was inevitable that someone would invent a smaller device to use instead of the bigger one, to save you having to pull the TV-sized phone screen from your pocket. So that’s what we have now, smartwatches to save you the effort of looking at your smartphone.

I have 2 friends with smartwatches now, both different manufacturers but both have the same feature that the screen activates when you move your wrist in a certain way.

And that’s what I think is the problem. I was in the cinema at the weekend and my smartwatch weraring friend moved his arm slightly. He was probably only scratching his nose or something, but the watch activated the screen.

I noticed this because it caught my eye. I wasn’t annoyed or anything, but it did catch my eye and temporarily distract me from the film.

Right now smartwatches are rare, but imagine in only a short amount of time everyone has one, each watch face activating when someone scratches their nose. The amount of distractions could be unbearable! Especially irritating when you’ve already paid an extortionate amount to watch the film at the cinema, believing it to be a better experience than sitting at home, where ironically there isn’t a problem with a hundred smartwatches flashing around you.

This is why I think smartwatches will destroy the cinema.

…Unless we start to see signs saying “Turn off your phone AND your smartwatch”. Yeah, to be fair, that might save it.

Does image Alt text get used in Google’s rankings?

EDIT – March 21 2015 – This article is really old now, so please take what it says with a pinch of salt!  

Alt text in a browser

One of the questions I’ve often been asked about SEO is this:

“Does the wording we put in image Alt text get used in Google’s rankings?”

The answer to this question seems to have changed over the years, where first it seemed to be a really popular place for web developers to sneak in a few additional SEO keywords into their page. Continue reading Does image Alt text get used in Google’s rankings?

Stock images that have been done to death

Tree growing in handsGot a product or service to advertise that can’t be photographed? Are your workforce just not pretty enough? Then you should use stock photography!

Or should you? In my last article I highlighted the dangers of using stock photography when I saw a photo I’d uploaded to a client’s website on TV. I’ve had to search stock photography websites many times for clients, and I’ve seen the same faces popping up time and time again all over the place (and all over the world in some cases!): on websites, billboards, posters, leaflets and packaging designs. Continue reading Stock images that have been done to death

Trivia for geeks: where internet-related words come from

Spam spam spam lovely spam

Have you ever wondered where certain internet-related words come from and why we use them? Like why is spam called spam? And what’s with the term ‘radio’ button – where did that name come from? We’ve put together a list of 10 words and explained their origins, so you can be the ultimate web geek in your office. Continue reading Trivia for geeks: where internet-related words come from

Things you should know about website headings

Headings in a book

Edit – This article was written many moons ago, so isn’t going to be totally relevant. The importance of Headings in SEO for example has diminished a lot, although is still important

What are website headings?

Headings on websites are extremely important for breaking up your paragraphs of content, and formatting your text. In this article we’re going to explain what they are, why you should use them effectively in your web pages, and how important they are for SEO. Continue reading Things you should know about website headings