Category Archives: Web Development

More Concentration

by

I recently recreated my Concentration game in Angular, to have a current example of what I can do (It’s worked). I’ve had some time to polish it, so I’ve just pushed up a new version.

I recently had to do a take-home coding challenge, and one of the things they mentioned was adherence to the Angular style guide. I figured it was best to re-read it before starting, and one of the things it mentioned was that computational code was better off in a service rather than a component. Well duh. I immediately realized that one of the things I’d done when I ported the jQuery version over to Angular was to carry over all the code to generate the puzzles and trilon data into the ConcentrationComponent. I’d even noticed that the component was bigger than I’d like it to be, and then shrugged and moved on. Of course, that code should be in a service.

Moving that code to a new PuzzleService meant that the ConcentrationComponent got a lot smaller. It also means that if I ever decide to move that code to the server, which it would need to be to have two players playing remotely, that the ConcentrationComponent is in much better shape to receive the data.

I was finishing up the service and the unit test changes needed, when I idly remembered that I’d intended to add the sound of the trilons spinning to the original game. I didn’t pursue it very far then, because I couldn’t find a clean sound sample. I decided to see if I could pull one off YouTube from the original show. There aren’t many episodes of the original show online, and the sound was not very clean, but I did find a copy of one of the syndicated shows with Jack Narz that I was able to get a clean clip from. A little online searching, and I figured out how to tie it into the game. Win!

Except, that you really can’t add sound to a web page without giving the user a way to turn it off, especially a sound like the sound of a trilon turning. This meant I had to add a user interface to control the sound. And then I got thinking…

I’ve always liked the basic design of the original game board, with light colored borders, and a central, darker rectangle with light colored numbers.

Original Concentration board

When the 1970’s syndicated version came out, the board got a garish new look:

Syndicated game board. Classic Concentration kept this color scheme, replacing the mechanical board with a computer generated one of 25 pieces

I just hated this look, and from the start, I decided my game would have a version of the original look.

And yet, since I was adding a preference for the sound, how hard would it be to add a preference to use this color scheme? Not very, it turns out, and with the power of Cascading Style Sheets (CSS), I could even have a cool transition between looks.

One thing I did pick up from the syndicated version was the colored puzzles. The original producer, Norm Blumenthal, refused to add color, as he felt it would make the puzzles too easy to guess, incurring displeasure from the network, which wanted to convert all its shows to color. He ended up compromising, making the puzzles pink on maroon. Personally, I think he was wrong — color can be used to misdirect as easily as it can give a puzzle away. When the show moved to Hollywood, the new producers had no compunctions about making the puzzles in color, and that’s how I’ve made my puzzles.

But then I got to thinking… CSS now has filters that can be used to alter the appearance of background images. If I combined a grayscale filter with an invert filter, maybe my color puzzles would look like the original Blumenthal style. I tried it, it’s not perfect, but it’s a decent approximation, so I added an option for that.

Adding options is good, but what’s the point of having options if you have to set them every time? (This is how “scope creep” happens, boys and girls). I added a LocalStorageService so that the user’s choices would be preserved, and a reset button to restore defaults.

There is also one more puzzle.

So what was intended to be an internal rewrite ended up being much bigger, adding the ability to play the sound of the trilons turning, and the ability to change how the puzzles and numbers look.

Take a look, and if you are so inclined, take a look at the source.

Tweaking the Theme

by

I’ve made a few small tweaks to the site theme.

When I first switched to this custom theme, responsive design was in its infancy, and neither the parent Twenty Twelve theme or my custom adaptation were designed for phones.

When I started using Jetpack on the site, it came with a mobile theme that I enabled. It looked very generic, but it also looked more presentable on mobile than the main theme… until a week or so ago.

Jetpack has given notice that they are retiring their mobile theme, so I decided to turn it off, to see how bad it was without it. Pretty bad. So I decided to turn Jetpack’s theme back on until I found time to deal with it… and found I couldn’t re-enable it. Oops. So, I’ve been chipping away at the issues for the past week or so, and now it’s pretty presentable on mobile.

The first thing I did was to override the fixed width on the content container. Here, I simply added a max-width to it, so that it wouldn’t get wider than the viewport. Next, I changed the way the background images are delivered — by default, the page only has background colors, and the “words” background image is only loaded for larger sizes. Next, I adjusted the positioning and sizing of the search field on mobile. Now, it’s small by default, then expands to cover the whole masthead. Finally, I adjusted the padding of the nav items so they all fit on a small screen.

I’ve also replaced a couple of the gradient images with linear gradients. I was using repeating background images for a couple of the gradients, to work around IE issues, and I really don’t care about IE anymore. I’ve also stripped out some vendor prefixes on some styles.

Update 2/29/2020

I’ve replaced the repeating “words” background image on the body element, so that I could also have a retina version for retina users. The words are mostly the same, in the interest of providing a text alternative, here they are:

<html> <head> <body> <nav> <img> <heading> <section> <div> <div> <span>


reading motorcycling New England diving photography kayaking Boston Charles River gardening bicycling Star Trek


document window Angular Observable function Array Event prototype Class string


aperture shutter lens ISO depth of field motion blur histogram exposure focal length strobe SLR f/stop


padding margin box-sizing flex color text-decoration background border top left

I’m not sure this theme is “worth” this effort. It’s just over 8 years old, which is ancient in web terms, but frankly, I still like the way it looks. And now, it looks like itself on mobile, too.

Navigating Files

by

I’ve been having a really hard time lately at work trying to keep track of the items I need to work with. I’ve been working in the front end with WebStorm for nearly two years, and lately I’ve been starting to do some Java work in Eclipse, and stored procedure work in MySQLWorkbench. Typically, in any of these environments, I may be working on between five and twenty open items at a time. None of these environments make it easy to keep track of the files one has open, or to find the item you’re looking for.

One thing they have in common is that they all use a collapsible tree view as the default means of opening items. When you open a folder, the folder shows its contents, but the other open folders are still visible, as are the contents of any containing items.

This leads to a very broad but shallow decision tree. There can literally be dozens of open items that your eye has to scan through to find find the desired item. It’s even harder with the list of stored procedures, since they are named by convention in ALL_CAPITAL_LETTERS, meaning there are fewer differences in letter forms, and they cannot be organized by folder, or even initial letter… just a long list of capitalized words that look much alike.

By way of contrast, the Mac (and Windows) default standard file picker allows you to drill down into a file hierarchy. You can use disclosure triangles if you want, but you can also double click a file, and only the files in that folder are visible. It’s easier to acquire a target from a list of fifteen files than it is in a list of sixty.

Webstorm disabled the option to use the native file picker because of Java issues, but when I asked about it, their customer service person told me about a hidden registry key to re-enable it. It’s made me much more productive.

All three environments use tabbed windows with the tabs on the top, at least, by default. In Eclipse, is the file names get truncated, and the set of files I’m working with at any one time are all named similarly, so it’s hard to see which tab to jump to. Also, since space is limited, it’s often the case that the file I want is hidden.

I’ve configured Webstorm to show the tabs on the side. This means more of them are visible, and it doesn’t truncate the file names so they’re easier to differentiate. Unfortunately, it sometimes closes files without warning if there are too many open, or if one clicks on the tab in the wrong way.

It would not surprise me to find that Eclipse could be configured the way I want, but I haven’t found it yet. Its preferences are a maze of twisty passages all alike, and I haven’t made myself at home yet.

I find MySQLWorkbench has its own way to be annoying. It’s good about showing the full name of the open file or procedure, but it also doesn’t necessarily scroll the tab set so that the open tab is among the open tabs, making it hard sometimes, to bounce between two pieces of work.

These IDEs do a lot to make things easier for developers. I just wish their UIs were more polished.

Hyphenation

by

I’ve been re-reading Waiter Rant the last couple of days, and noticed something cool in one of his posts — some of the words at ends of lines were hyphenated. Justified text can cause large amounts of space between words; one way of reducing this is to break long words that fall at a line boundary between syllables so they fit better. So I fired up the Web Inspector, and sure enough, there was a -webkit-hyphens property on <p> tags that I hadn’t known about.

In print, hyphenation is not uncommon. On the web, it’s quite rare, because you never know exactly how a user agent will render text, or whether the user has resized the window, and up until recently, there was no way to automatically insert the hyphens where they belong.

So, I thought, “This looks cool, let me try it on my site,” looked up the syntax, added it to my stylesheet, took a look at one of my posts, and immediately decided it was a distraction.

It did even up the right margins somewhat, but I also found my eye sticking at the hyphenated words, and pausing there, in a way I don’t remember doing in print. Either the browser was applying hyphenation a lot more than a typesetter would (there were three or four hyphens added to my Thoughts on the Bombing post) or it’s a lot more intrusive on screen than it is on the page. Either way, it was taking me out of the post, and I immediately backed the change out.

For the curious, here are the styles I briefly added:

hyphens:auto; /* CSS3 standard */
-webkit-hyphens:auto; /* Target Webkit */
-webkit-hyphenate-character:"\2010";
-webkit-hyphenate-limit-after:1; /* rules to try to minimize widows and orphans */
-webkit-hyphenate-limit-before:3;
-moz-hyphens:auto; /* target Mozilla */

It was a lesson — cool new toys should always be tried, but they also should always be evaluated for suitability.

Five Weeks In

by

I’m now about five weeks into my new job, working as a front end developer at a startup in Newton called appScatter. So far, I’m liking it a lot.

I really like working with the guys I’m working with. Rami is warm and friendly, knowledgeable, and laughs easily. Mike is smart and enthusiastic and very positive; his style is to encourage rather than enforce. Mark is even newer than I am, and I’m still getting to know him, but he dove right; he’s enthusiastic and inquisitive.

Unlike my old job, this position is strictly front end; I’m building a single page app using AngularJS, and it’s been quite an adjustment. I knew nothing of Angular before; I spent part of the week before I started boning up, and felt I understood it at a conceptual level, but of course, practice was another matter. Once I actually started digging into it, I was fighting syntax the whole way. Every stupid little thing — and it was always the little things; the big things were relatively easy — seemed to take forever. I wasn’t used to the Angular style of passing functions around in the arguments of functions; it didn’t help that I was moving from a fairly plain text editor (Homesite) to Sublime, which autocompletes quotes and parentheses and brackets, and doesn’t select text quite the way I was used to. So I was ending up with extra or missing quotes and brackets and parentheses, and was in JavaScript Hell for a few weeks. It didn’t help that I’d given wildly optimistic estimates for my tasks, based on how I would have done them the old way.  I feel like I’m gaining on it now, and the last few pieces I’ve added have come along a lot more easily. I’m spending more of my time on the fun little details of smoothing out the user experience, and less on the basics. I’ll have a lot more to say about Angular, I’m sure.

The other adjustment I’ve had to make is not having access to the server or the database to help myself on the client side. In ColdFusion, the basic generation of the page is done on the server, usually by cfoutputting a query, often one I wrote myself. Now, I’m making web service calls, getting the data, placing the data in Angular’s model layer, and letting it handle the display.

The commute is shorter than the commute to Rhode Island, by about 20 – 40 minutes each way. About the only thing I miss are the people and my sunset rides along the East Bay Bike path.

Concentration

by

I’ve always loved game shows. One of the cool things about a vacation day or snow day in the winter was that I got to see my favorites. The ones that stick out in my memory were the original Match Game late in the afternoon (I remember being disappointed with the changes made for Match Game ’73, though in hindsight, the changes were for the best), Jeopardy, with Art Fleming around noon time, and my all time favorite, Concentration, in the mid morning.

I think a big part of my attraction to Concentration was the marvelous game board. Thirty numbers, all on rotating trilons, with one face for the number, one face for the prize, and one face for the puzzle piece. Each puzzle was a rebus, spelling out a phrase with pictures.

(Yes, it’s cheesy by today’s standards.)

I worked my way through several versions of the home game, but they were always unsatisfactory in one way — no rotating numbers. The puzzle was on a scroll of paper, with clear slots for removable number and prize cards. The game play was the same, but the game board was different.

Introducing Concentration

I’ve long wanted to build my own Concentration game. About twenty years ago, I tried building my own trilon-based game board, but after building all the trilons, I couldn’t figure out how to make it work.

About four years ago, I started building a version in HTML and JavaScript. I got as far as a game board and score board that worked—prizes were distributed randomly, it detected matches correctly, it handled “take” and “forfeit” properly, but the gameplay was clunky, it didn’t handle end of game well, there was no option to replay,  and it looked crummy. I was intent on duplicating the original look of the original game, but it was unfinished.

Last weekend, needing something I could demonstrate, I picked the project up again and polished it up. Now, with the power of CSS transforms and transitions, I finally have my rotating trilons. I’m now using jQuery in the script, which has simplified transitions between stages of the game. With downloadable fonts, specifically Open Sans, I’ve made the game look a lot nicer. And the game play between turns is a lot smoother.

Play Concentration here.

About the Game

My game uses the same game rules as the original game that ran on NBC from 1958 to 1973, not the later Classic Concentration version which some younger folks might be familiar with. There are thirty numbers, not twenty five, with some “Take One Gift” and “Forfeit One Gift” squares factored in. To guard against the “Forfeit” prizes, there are a couple of gag prizes as well.

There are currently five different puzzles; I plan to add more as I have time and can think of them—the structure of the script makes it very easy for me to add more puzzles. A while back I found “Rebus Font” which is a font made up from many of the symbols used on the original program.

Unlike the original, my puzzles are in color. The original producer, Norm Blumenthal, fought the switch to color, feeling that colored puzzles would give the solution away too fast. When NBC insisted on switching the show to color, he compromised by going to pink drawings on a maroon background.

At the moment, the game does not use responsive design; it works best on a desktop browser or iPad. This is the thing I intend to work on next. It also requires a recent browser that supports CSS transforms. I’ve discovered it doesn’t work properly in IE 11, but at the moment, I don’t have access to a machine to test it on. (UPDATE, February 2015: I’ve discovered the reason it doesn’t work in IE is because IE doesn’t currently support the “preserve-3D” transformation property. There are work-arounds, but I haven’t tried them yet.)

It currently doesn’t handle the “double wild” case, where one happens to pick a pair of matching Wild Cards; it should allow the selection of another set of prizes, but doesn’t.

I may add sound to the game; I have a recording of a trilon turning, but it needs cleanup.

One of the things that kind of surprises me (about myself) after the fact is that I’ve grown a little more willing to deviate from the look of the original. I guess that’s a sign of growth, or a willingness to make changes in service of a better result. In my original version, the scoreboard looked more like the original scoreboard, complete with serif based font, and the look of the Wild Cards. One of the things that had irritated me about the home games was that the Wild Card tiles didn’t look like the ones on television; in the original version, I created one that looked like the original. And yet… once I switched the prizes to Open Sans, the old style Wild Card stuck out like a sore thumb, so I changed them. Finally, I added a single player mode, so the user wouldn’t have to enter a pair of player names.

I hope you enjoy playing my version of Concentration.

Update September 24, 2021

I’ve replaced this version of the game with an entirely new one, using the Angular framework. The new version is written in Typescript, using newer ES6 features, and addresses several shortcomings of the version:

  • Responsive design
  • Handles the double-wild case
  • Handles duplicate prizes.
  • Animation when prizes are added to the scoreboard

Read about it here. I’m updating the links on this page to the new version, but if you’d like to compare versions, here they are:

Video Test

by

This post is just a test post playing with embedding video with the HTML 5 video element. First, I’m going to try just dragging in a video, and see what WordPress gives me, then I’ll probably end up hand coding it.

This video was shot during my 2012 hot air balloon ride, with my iPhone. One problem I’ve had using iPhone video is that it often comes out upside down. It looks OK in Aperture, and in the QuickTime player, but when I go to transcode it into other formats, it comes out upside down. I discovered tonight the trick is to open it in QuickTime player, and export it.

Continue reading →

Subtle CSS Error

by

An exercise in debugging Cascading Style Sheets

We launched a new version of the work website this week. We’re still tweaking things, but overall, I like the look of it, especially the subpages. The report pages haven’t looked this good in ages. I think I’ve kind of fallen in love with Open Sans, the font used in the new design, and I like that it comes in both bold and semi bold versions.

Just before we launched, though, we ran into one of those wonderful head scratchers that seem to be the hallmark of web development. We were clicking through the various views, and Garry clicked into the screen to edit an address. In IE, (of course) there was nothing there except the Save button at the top of the page. Since the section is loaded via Ajax, my first thought was that it was some sort of problem with loader script, especially since I was seeing Javascript errors in the error console. I found that error, fixed it, but it still didn’t fix the page.

Brute Force Debugging

Obviously, since we were dealing with a new theme and a new style sheet, those could be the culprit. So was it the new HTML or the new CSS? Turning off CSS showed the form, but was that issue?  Nothing obvious leapt out at me, and I had no idea where to even start looking. Finally, I bit the bullet, saved a backup copy of the stylesheet, then deleted the last third of it. No luck. I reinstated the section I deleted, then deleted another section. Still no luck. Finally, removing lines 400 to 700 revealed the form. From there, it was a simple matter of removing smaller and smaller parts of the stylesheet, until we zeroed in on the offending line.

Here it is:

main .controlbar .minibutton, main .controlbar .minibuttonactive {width:auto; display:inline;  text-align:center;  margin: .07em 0 .34e7em}

Do you see it?

The problem arose out of the fact that, for accessibility’s sake, we’re using ems instead of pixels (px) as units of measurement, because they make it much easier for a user to resize their screen. Pixels tend to be simple integers; ems are often decimals, and in a longish decimal, a typo can hide. In this case, the margin should be

margin: .07em 0 .347em

Once I narrowed into the right line, it was immediately obvious. Nearly an hour to find, 10 seconds to fix.

Comments on WordPress Image Pages, Revisited

by

Back in January, I posted a solution to a the problem of comment forms on image attachment pages remaining available even after comments on the parent post had closed, based on a solution by Anthony Hortin, of Maddison Designs. I was getting spam from the images on my first gallery page.

The solution I posted back then was to make the include of comments_template() conditional on the parent post’s comments being open. This worked, I stopped getting comments on old images. The code looked like this:

The original fix:

Change this:
<?php comments_template(); ?>
To this:
<?php if (comments_open($post->post_parent)) {
// Only show the Comments Form if the parent post has comments open
comments_template();
} ?>

Unfortunately, the fix has a side effect: comments posted to an image during the “comments open” period also go away when the comments close. At the beginning of the month I posted a picture of some stuff I saw on the Charles that I couldn’t identify; a nice lady answered me, but her answer vanished when the comments closed.

It turns out the comments_template() function also outputs existing comments, so what you really want to do is still include comments_template(), but somehow, tell it comments are closed.

Fortunately, the function that returns the flag that indicates whether comments are open respects a filter, ‘comments_open’, so it became simply a matter of figuring out how to add that filter.

My first attempts to do so crashed. My function that tried to set the flag was trying to call comment_open() with the parent post, and crashed. Then I tried only applying the filter if the parent post’s comments were closed, using a function that simply returns false. It feels kludgy, but it does work.

The Revised Fix:

Change this:
<?php comments_template(); ?>
To this:
<?php
function close_image_post_comments() {return false;}

if (!comments_open($post->post_parent)) {
/* Only show the Comments Form if the parent post has comments open
by adding a filter to pass false to comments_open() */
add_filter( 'comments_open', 'close_image_post_comments', 10, 2 );
}
comments_template(); //bring in the comment output
?>

This feels a little kludgy to me– I’d rather have the decision making in the function rather than the calling code, but it does work, and at this point, I’m not handy enough with PHP to figure out what I was doing wrong in the earlier version of my function.