Posts Tagged Javascript

Posted on Programming

The Family Wishlist is finally mobile friendly

Ten years ago today (plus or minus two to five years) I made The Family Wishlist. And it’s been good. People have found it helpful.

But The Family Wishlist had a problem, one that I hoped – as all problems do – would go away if I ignored it long enough. Much to my surprise, it got worse. Worse and worse.

Or, if not worse, than at least less forgiveable.

The Family Wishlist, you see, wasn’t mobile friendly. Like, at all. But come on guys, it was 2008. Did smart phones even exist then?
It’s impossible to say. But what I can tell you is they exist now; moreover, people use them. Constantly and for everything.

So, after putting it off for ten years – through the power of procrastination – I finally did it. Or, redid it, as it were. I’ve rewritten it entirely, using my API framework (lull7) for the back-end, and react for the front-.

Also, no more ads. Who wants to see those, right? Especially on a phone, where space is minimal.

So if you and your family need to coordinate gifts this season (or any season), give it a try! I don’t know, maybe you’re running a Secret Santa or some such. It does that too. Also, family isn’t mandatory – orphans are welcome. »

Thanks Greg, it truly did need an update.

Oh, also, I switched the email system over to SES so they should now arrive more reliably.

The Family Wishlist, 2018

The Family Wishlist
Posted on Programming

Adding text to google maps markers

If you’ve ever used the Google Maps Javascript API, you’re probably aware that marker labels can only be one letter long. But sometimes you want them to say something meaningful, and often that takes more than a single character.

In case you’re looking for a way to display arbitrary strings in a Google Maps marker, good news, here’s how you can do it!

You can pass a data URL when you’re supplying an image for an marker, which is great. We can send it some SVG which includes our label text.

  1. Import your marker icon into Illustrator, or some other vector graphics software.
  2. Type in some sample text, formatted however you like.
  3. Export it as SVG.
  4. Create a function that replaces the sample text with whatever you want to display, and returns the adjusted SVG
  5. Pass that to the Google Maps API as a data URL.

// Generate a pin!
function createPin(text) {
	var svg = '...'; // Imagine there's SVG here.
	return 'data:image/svg+xml,' + svg.replace('sample-text', text);
// Create the map. Position and style it however you like
var map = new google.maps.Map(document.getElementById('maps_marker_text_example'), {
	center: {lat: 49.264691, lng: -123.100},
// Create the marker
var marker = new google.maps.Marker({
	map: map,
	icon: createPin('delicious burritos'), // Generate the SVG for this marker
	position: {lat: 49.2630584, lng: -123.0945}

Bam! You’re done. You’ve got map markers showing custom text.

One thing to be aware of is the <svg /> tag must include width and height attributes, otherwise weird things will happen. When I exported from Illustrator, my file had a viewBox attribute, but no width and height. So if yours is missing those, add them in.


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

The past present and future, all at your command with HTML5

Dear Diary,

With the onset of HTML5 becoming increasingly supported among the many browsers out there, there are going to be a number of important changes coming to the way things work. Things such as… the MathML and SVG support, a large number of new elements and deprecation of some older obsolete ones, and most importantly (for the purposes of this article) an important change to the history API functionality!

Unfortunately, HTML5 isn’t supported in every browser… largely because older versions of browser either can’t support it or just aren’t being updated to support it. People should update their browser anyway… so many unnecessary headaches caused by having to go back and debug some random old version of IE or Firefox because someone is reluctant to update. I will say, props to Chrome for silently updating itself to the latest version and indicating that a core app restart is required with those little coloured arrows!

Posted on Programming

Rock, paper, scissors, bots!

This Google AI challenge thing seems so neat, and like it’d be fun! Because who doesn’t like bots??

A couple of nights ago I made a rock/paper/scissors bot arena. You can make bots using Javascript and have them compete.

It seemed like it’d be fun to make, and who knows, maybe it’ll trick some people into trying out some easy programming since it’s all web-based.

It’s a little weirder than normal Javascript, but that’s because the code gets wrapped into an object before use:

Posted on Uncategorised

128×128 and 256×256 icons and polls

On June 2, 2007, I received an e-mail requesting that I add 128×128 and 256×256 pixel icons to the .ICO resource Bradicon creates. I added them on Bradicon’s dev site, and replied that same day, but have yet to receive an email back. I didn’t end up publishing the changes to Bradicon.

That was a long time ago!

Luke brought it up again last night, and I started to think about it. The changes to the code would be super, super easy. I am a little worried that people may be upset if their icons are suddenly ~22 times as large in file size, which is a substantial increase. ~0.3 MB seems excessive for a favicon.

Posted on Programming

Firefox and Google Visualization

A project I’m working, for a company in far-away London, has to do with reporting. But who knows which web browsers they prefer there? I certainly don’t, which is why I’ve been testing in Firefox, Chrome, Safari, Opera, and IE. To be honest, it’s just something i normally do.

And what’s a report without a few graphs? Probably boring!

I decided to use Google Visualization to generate the graphs. Not such a big deal, since I used it as recently as two posts ago.

But things didn’t go quite as I’d expected.