Navigating Files

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

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

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

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.

Video Test

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

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

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.

 

SOPA

I’m leaving in an hour for Bonaire, and am a jumpy as a cat in a room full of rocking chairs. But before I leave, I wanted to  write to my two senators about the pending Stop Online Piracy Act/ Protect IP Act. These bills would require sites that allegedly host pirated material to be shut down– not to remove the material, but to remove the entire site. My hosting company has weighed in and so have the creators of WordPress. This is what I sent to Senators Kerry and Brown:

Dear Senator,

I have never written to an elected official before, but I feel strongly enough about the Stop Online Privacy Act (SOPA) and the Protect IP Act (PIPA) that I feel I must write to ask you to PLEASE not vote for them.

I have been a web developer for over 10 years, and recently started my own blog (tedohara.net). These acts propose tinkering with the DNS system in the name of blocking theft of intellectual property. We already have tools to deal with IP theft, such as the DMCA. Currently, if an IP owner feels they have a grievance, they can file a request to have the offending resource removed from a site. SOPA would shutter the entire site, without allowing the site owner any recourse or hearing.

Furthermore, to my mind, there’s a LOT of potential for mischief here, especially for sites that allow for user provided content. (Mine does not). Say for example, there was a political site that had message boards, and allowed users to upload content. Someone in opposition to that site could upload some protected content (possibly using a proxy), then have the site shut down for being in violation. In addition, big companies have deeper pockets and can afford to drag on legal proceedings. Small companies and individuals cannot.

As Apple has shown, the way to deal with online piracy is to compete with it. They’ve shown that if you can make it easy to download content legally and at a fair price, most people would rather do that. While I do agree that creators do have the right to protect their rights to their creations, these bills are heavy handed and go far beyond what is necessary.

America is not like this. America is about freedom of expression, not censorship. America is about due process of law, not about taking heavy handed action to shut entities without recourse.

I’m asking you to please stand for freedom.

Thank you,