Thoughts, rants and commentary of a simple man

Pair programming with a child

Posted on July 8th, 2012 in Geek Stuff,Javascript,On Children,On Fatherhood,Personal Messages,PHP,Programming | No Comments »

While driving home today my daughter Alaynah asked me a little bit about what I do. After explaining to her that I am a software engineer and that I write programs, and telling her that my programs run on the internet, she asked me how Google makes that little box “that you type in to look stuff up”. I told her when we got home I’d show her since it was pretty easy to do.

When we got home we got to work. And a coupe of minutes later we had a very simple web “program” that took some text in a text box and wrote it out to the screen a certain number of times, each time making the text bigger. Not a lot of action going on there, but still something she could see that involved a text box and some programming logic. And as uneventful as this little application might have been, what it led to was amazing to say the least.

As we started to look at the words “Awesome Alaynah” explode onto my monitor in ever growing size, Alaynah began to look at the lines and count them to make sure there were as many lines of repeating text as she had selected. So we decided that it would be easier if there were numbers next to each line so we could see just how many lines were on the screen. Then, after she saw that, she asked me “is there a way to make it so if you click on a line, that all of the lines after it just disappear, including the line that you clicked on?”. I told her that I was sure there was, but that we needed a different kind of programming for that (since our original program was all PHP and click events, while potentially served by the server, are better handled on the client). So I went and got us jQuery, included it and wrote the code that made the lines disappear from the line you clicked on.

As she sat in amazement watching the lines disappear when clicked you could see that there was something troubling her. It was almost as if, when the lines were disappearing, that they were gone forever and ever. So I wrote a little bit of code that would bring the lines back if you wanted them back. She loved that. Except for the text to bring the lines back was “Bring them all back”, which works in all cases except if you disappeared the last line, because there aren’t any “all” lines, only “the” line. So she told me that we needed to change it so that if you removed the last line that to bring it back, the program should say “Bring it back” instead. So we fixed that, and after only a few minutes of conceptualizing, programming, testing, using and refactoring, Alaynah and I had put together a little program that we were both pretty proud of. You can view the source of this little program here.

Now aside from the obvious goodness that is my eight year old daughter (who happens to be turning nine tomorrow) taking an interest in the work I do, I have to say that having time to spend with my daughter – just her and me time – was a blessing. I don’t get a whole lot of one on one time with any of my kids. And even though this was only a few minutes, it was a cool few minutes that let me show my daughter what I do, let her do it with me and let us both enjoy some quality time together. I’m certain I would have loved it just as much if we had been talking about dolls, mud, cartoons or our favorite foods, but the fact is, we were talking about programming, my work, her ideas and our time together. There is a lesson in this for any parent. If your child shows any kind of interest in what you do, take the time to show him/her what it is you do. Don’t explain it with words and leave it at that. If you can take the time to allow your kids to connect with you while learning you, take that time. No excuses, no fussing, just do it.

She and I had an awesome time with this, even if it was only a few minutes. It was a great time and I am glad I didn’t pass it up because I was tired, wasn’t interested or was just unavailable.

View the source of our little program
Our original code was a little more rough around the edges than this one. After we got it working the way we wanted it I went through and cleaned things up a bit, added some comments, pulled out duplicated javascript code segments, etc. So the final product is a cleaned up rendition of our original stuff, which we hacked together very quickly in an effort to make it just work.

<?php
// Iterations max limit
$max = 30;
 
// Iterations min limit
$min = 5;
 
// User supplied iterations count
$limit = null;
 
// Handle posted values
if (!empty($_POST['limit'])) {
	$limit = intval($_POST['limit']);
	if ($limit > $max) {
		$limit = $max;
	}
 
	if ($limit < $min) {
		$limit = $min;
	}
}
 
$words = empty($_POST['words']) ? null : $_POST['words'];
?>
<html>
<head>
	<title>Alaynah's program</title>
	<style type="text/css">
		#putitback {
			color: #008;
			cursor: pointer;
			text-decoration: underline;
			margin-top: 20px;
		}
 
		.index {
			display: inline-block; 
			width: 50px;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
			// Set the row prefix
			var rowprefix = 'row-';
 
			// The id of the clicked row to make hide from
			var rowid;
 
			// Row toggler, makes rows appear and disappear
			function toggleRows() {
				for (var i = rowid; i <= <?php echo $limit; ?>; i++) {
					$("#" + rowprefix + i).toggle();
				}
			}
 
			$('.row').click(function() {
				// Get the row id that was just clicked
				rowid = $(this).attr('id').replace(rowprefix, '');
 
				// Handle visibility toggling
				toggleRows();
 
				// Set our message for restoring rows
				var message = 'Put them all back.'
				if (rowid == <?php echo $limit; ?>) {
					// Alaynah was smart enough to see that if you only plucked
					// the last row the message should be singular
					message = 'Put it back';
				}
 
				$('#putitback').text(message);
			});
 
			// Handle restoring "removed" rows
			$('#putitback').click(function() {
				// Handle visibility toggling
				toggleRows();
 
				// Clear out the restore link since everything is back to normal
				$(this).text('');
			});
		});
	</script>
</head>
 
<body>
<h1>Alaynah&apos;s program</h1>
<form action="" method="post">
	<p>What do you want to write? <input type="text" name="words" value="<?php echo $words ?>" /></p>
	<p>How many times do you want to see it? 
		<select name="limit">
			<?php for ($i = $min; $i <= $max; $i++): ?>
			<option value="<?php echo $i ?>"<?php if ($i == $limit) echo ' selected="selected"'; ?>><?php echo $i; ?></option>
			<?php endfor; ?>
		</select>
	</p>
	<p><input type="submit" value="Hit it!" /></p>
</form>
<?php if ($limit && $words): ?>
<hr />
<?php /* Loop $limit times and make the displayed text grow each iteration */ ?>
<?php for ($i = 0; $i < $limit; $i++): $c = $i + 1; ?>
	<div class="row" id="row-<?php echo $c ?>" style="font-size: <?php echo (14 + $i); ?>px;">
		<span class="index"><?php echo $c; ?></span>
		<span><?php echo $words; ?></span>
	</div>
<?php endfor; ?>
<div id="putitback"></div>
<?php endif; ?>
</body>
</html>
Back to top

Javascript, WebKit and ‘closed’

Posted on February 26th, 2012 in Javascript,Programming,Web Development | 2 Comments »

The other day I was playing around with a simple letter scrambler script that I had written to assist my daughter with a birthday party game. The concept is simple enough… enter a phrase, hit a button and the phrase gets “cryptoquoted”, a process where each letter in the phrase is substituted with another letter. One of the things I designed this program to do was hide the input box so that, if you were viewing it on the web, the solution would not be visible to anyone looking at the puzzle. But I also programmed it so that if you click a link, the input box would be revealed. This toggling of the visibility of the input box is simple enough to do. Just add a little jQuery and BAM!, you have a simple revealer.

And this is exactly how this performed until the last time I tried it a couple of days ago. My toggler suddenly stopped working right, but only in Chrome and Safari. All of the javascript was firing in the proper order, and the function I had written was being called but my slider was not sliding. After digging into this a little bit, and doing a bit of debugging, I found out that a variable name I was using the monitor the state of the visibility of the input box was being clobbered in Chrome and Safari. Firefox worked just fine as it always has. The variable name I was using was closed.

// Set the closed flag
var closed = true;
 
/**
 * Toggles visibility of the input box
 */
function toggleSolution() {
	if (closed) {
		closed = false;
		$('#puzzle-key').slideDown();
		$(this).text('Hide solution');
	} else {
		closed = true;
		$('#puzzle-key').slideUp();
		$(this).text('Show solution');
	}
}

When inspecting this code in Chrome Developer Tools, regardless of any actions, events or any other browser interaction, the closed variable always was valued as false. I still don’t know why this is happening, but I do know this is a WebKit issue. And I also know that changing the variable name from closed to _closed solved the issue I was having. Also, as a simple test, without declaring the variable anywhere in my code, I opened up the console on a page without any javascipt at all and, sure enough, the variable was set to the value false.

So if you writing javascript and run across an issue where you are using a variable named closed in your code that always seems to be valued at false, be aware this might be an issue with your browser and simply changing the name of your variable in your code might make things all better for you.

Back to top