Posts Tagged CSS

Posted on Programming

Don’t starve together

I’ve been playing Don’t Starve Together lately, and it’s awesome. There’s a constant sense of pressure imposed by the passage of time, days turn to night, a mild Autumn to bleak Winter. It makes any wasted time seem at worst dire, or at best mildly frustrating.

There are so many items you can cobble together, with twigs, bunny-flesh, and the like. At least 144, by my count. But unless you memorize their positions and ingredients, you’re going to waste a lot of time searching through categories for some item you’re sure you’d seen but just can’t seem to find.

I, myself, often kept a wikia tab open on my secondary monitor. But as I’m sure you’re aware, Wikia is slow and prone to annoying ads blaring sound this way and that. And even so, didn’t provide an ideal interface for that sort of thing.

I wanted to type in “charcoal” and immediately see what I could make. Or “crock pot” and see what I needed. Or even “science” to see everything that’s in that category.

And now I can!

The What can I make page is where I spend most of my time. The What do I need page is for those situations where I’m starting a new game, and know I want to create, say, 2 crock pots and 1 bird cage. It’ll tell me everything I need to collect to fulfill my crafting dreams.

If you find anything that doesn’t work, let me know, I haven’t tested it all that much.


I made it just using jquery. Then I remade it using backbone. Then I remade it using webpack, sass and react. Because why not?

This is the backbone version, because the react interface felt strangely clunky.

 

Posted on Programming

Climbing down trees

Just in case anyone isn’t clear on this, I’m going to explain, in detail, how to descend the object tree with your CSS selectors. Let me know if I’ve skipped or glossed over any important details. Return any hand-waving in kind.

If you’re thinking WTF is an object tree?, you should know that I often just make up names. Hopefully in this case it proves descriptive.
I think of HTML as a tree: At the tree’s top is the <html> tag; Its descendants are all the tags nested within it.
(more…)

Posted on Programming

Magically managing menus

Hey, so, I’m going to detail my method for making menus. I’ll try as well to explain the reasons behind the choices I make. If you have any questions, let me know and I’ll try to fabricate a plausible answer.

Two popular menu types are drop down menus, and your basic expanding lists. But good news, the HTML we use for both is the same! Why? Because they’re both menus! They may look different, but in essence they’re nothing but a nested list of links. And in my opinion, we should do our best to use HTML to describe the data we’re presenting.

One big bonus is that if we take out the CSS, the website still usable. We can also easily provide alternate stylesheets for things like mobile phones, and pages are easy to navigate from text-based browsers. Most importantly, the HTML is short, clear, and easily readable.

Which is why I’m going to use nested lists. The styling will be done with CSS, and some event handling with Javascript (I’ll use JQuery because it’s nice, but don’t feel tied to it).

I’ve prepared a page complete with code quotes and comments:

I was too lazy to style it. Also, the magic was a trick. There was no magic. I’m sorry.

Your friend,
Brad