Monthly Archives: September 2015

Colophon

Ads, privacy, and javascript

Part 1: Ads (or lack thereof)

Ever since the features of Apple’s iOS 9 were announced, there has been much discussion surrounding the software’s ability to block ads. Now seems to be a good time to discuss several interconnected issues related to my website, starting with how I monetize the traffic flow and page views.

Simply put, I don’t. The business model for Knossos Games is that there is no business model. Knossos Games has always been presented free of advertisements. I intend to keep it that way. Ads on the web (and generally in life) have gotten way out of control, to the detriment of the entire experience. When you come to the Knossos Games website looking for quality puzzles, that’s what I want you to find. Nothing more, nothing less.

So how can I afford to do this? CTY and Imagine pay me for each submission to the magazine as a regular contributor, and they graciously let me retain the copyright for my work. Even so, the puzzles and the website are a hobby and not my main occupation, and as such I don’t rely on them for my main source of income. As an educator, I believe that knowledge wants to be free (in every sense of the word), and I want my work to be as accessible as possible. A long time ago I decided, in exchange for their payment, the magazine and its readers would get an exclusive window of opportunity to see my work before it is posted to the website. If you really enjoy Knossos Games and have a little money to spare, please consider buying a subscription to the magazine.

There are two things on the website, however, that some people might consider advertising. First, there are frequent links back to CTY and Imagine. I am grateful to them for giving me a nationally-published puzzle column in their magazine that I retain the rights to, so can you blame me? That being said, I get no direct income from those links and honestly have no idea if they have any impact whatsoever on web traffic to their site, interest in their programs, or increased readership of the magazine.

Second, when I mention on this blog a relevant puzzle book that I think you might like to read, I insert an Amazon Affiliate link. I do not intend to ever clutter up the main website with these links, or host the barrage of Amazon advertisements included in their program on the website or the blog. (Notice that I’m not even linking to Amazon within this post.) Each blog post link is clearly identified as such with a rollover. I can report that, in the first ten months of using Amazon Affiliate links, I’ve posted a grand total of two of them, and made zero dollars from them. Do yourself a favor and buy the books from your local bookstore after using Amazon to see the details.

Part 2: Traffic Analysis and Privacy

Your privacy is important. I want to be completely transparent as to what information I collect about those who read Knossos Games. I’m not a lawyer, but I wanted a privacy policy for the site, so here it is.

As I alluded to above, I have no information about subscribers to the magazine. I wouldn’t want it if it was offered to me. My editor has told me that Knossos Games has a small but loyal fan base, and this seems to be good enough to keep Knossos Games in print. If you are a long-time reader of the puzzle column, thank you!

I use three methods to collect anonymous information about visitors to the website. The first, which I’ve used for many years, is JavaScript code at the end of each puzzle website page (but not the blog) that sends information to StatCounter. The other two, which I started using in July 2015, are server-side tracking features for the puzzle website and the blog: Webalizer and AWStats. Both of these provide slightly different analytics from each other, and different from StatCounter. Together, these three services provide me with basic information about visitors to the website, such as: how you navigated to my website, what pages you visited, how long you browsed the website, and information about your location and device (screen size, operating system, and browser). If you are interested, all three services provide a complete listing of the data they collect at their respective websites.  I do not get any information that would identify you personally, nor would I ever want to seek out that information.

Why do I want this basic information? Part of my motivation is simply curiosity. After years of having this website, it’s still thrilling for me to see that someone visited from very far away. Another part is to ensure that your experience on the site is a good one. Is the site coded and formatted in such a way so that your device can load it properly? Page views specifically help me determine what puzzles are popular and how people navigate the site. For example, featuring puzzles on the homepage unsurprisingly results in far more visitors to those puzzles. Knowing how people navigated to the site helps me understand how people find out about Knossos Games. Most traffic used to come in via links from CTY and Imagine, along with a few third-party blog posts that were highly ranked in Google searches for triangular or isometric graph paper. Now, almost all traffic is from the organization Hoagies’ Gifted, which links to Knossos Games under brain teasers and puzzles. (Much of this shift in traffic is due to broken links to the old website, unfortunately.)

What do I do with this basic information? I use it to make the site better. I only check it occasionally, most often when I need to make design decisions about the site. I would never use this information to advertise (see part 1), nor would I ever sell this information to others for them to advertise to you. If you are concerned about your information being collected through these means, from my website and others, I would encourage you to use internet anonymization tools.

Part 3: Is JavaScript necessary?

With so much obtrusive advertising and traffic analysis on the web, JavaScript ad blockers and people turning off JavaScript altogether are becoming more prevalent. This has been possible from the desktop and Android for some time, but Apple’s iOS 9 has raised the collective consciousness surrounding ad blocking. Regardless of whether this is good or bad, or the effects it will ultimately have, I’m trying to move away from relying on JavaScript wherever I can. I want to provide a baseline, excellent experience on my website using HTML5 and CSS3, only adding JavaScript to further enhance that experience.

This is why I chose a few months ago to add Webalizer and AWStats analytics in addition to the free StatCounter service I had been using for years. These two new services get their data directly from the server and do not rely on JavaScript whatsoever. Another example: in recently tinkering with the splash page, I embedded a link to the homepage within the graphic, in case the automatic JavaScript forwarding fails. Yet another example: I found a clever CSS technique to create step-by-step slideshows for the Space Pods solutions that completely avoids JavaScript.

It is unclear to me how this situation with JavaScript and ad blocking will shake out in the months and years ahead. But I will continue to look for ways to create a complete experience solely through HTML5 and CSS3, only then adding JavaScript for additional features.

Authoring Knossos Games

Origin Stories: Wind Farm

The first Wind Farm puzzle was created for the Spring 2008 green issue of Imagine. Similar to the Gerrymandering puzzles originally created for the election issue in 2004, I wanted to create a puzzle that would be interesting on its own, but also draw attention to an important subject. I considered several possible environmental topics at the time: carbon emissions, melting glaciers and rising sea levels, endangered species, climate change. But an indelible memory was fresh in my mind, and it turned my thinking toward my own experiences in sustainable energy.

During the summer of 2007, I was moving from Madison, WI, where I had just completed my graduate studies, to Dayton, OH, where I would be starting my first college professor job. To this day, I still remember driving down I-65 through northwest Indiana and seeing for the first time, with my own eyes, a wind farm. Rows and rows and rows of wind turbines stretching for as far as you could see. Even going 70 mph, it still takes a solid 10 minutes to drive through the Meadow Lake Wind Farm, which has an operational capacity of 500 Megawatts.

“Meadow Lake Wind farm (2) 2-3 2010” by Chris Light at en.wikipedia. Licensed under CC BY-SA 3.0 via Commons

Once it had occurred to me to use a wind farm as the basis of an environmental puzzle, I needed to figure out how such a puzzle would really work. The details of the puzzle, like the T-shaped footprint and “windier areas”, are loosely based on how wind farms are actually built. In reality, the windiness across wind farm areas is generally quite consistent at any one time, with altitude and access to the power grid more critical to wind turbine placement.

The solution strategy for these puzzles is based on an incomplete tiling of the T-shaped turbine footprints. You can tesselate these shapes to maximize the number of turbines; however, that regular tessellation (or complete tiling) is disrupted by the irregular footprint meeting the straight boundary of the land. Plus the windier areas give some incentive to shift the pattern around, or break it up entirely, so long as you do not lose too many turbines in the process. Many of the earlier puzzles I wrote maximized the use of the windier areas, so that every turbine could be placed (in only one way) on those areas. Later puzzles shifted away from this line of thinking and towards using the interlocking tessellation itself as a constraint to create a maximum number of turbines that could be placed in windier areas.

Site Updates

Update: Wind Farm

After submitting two new wind farm puzzles for the May/June 2015 Energy Issue of Imagine, it was obvious to me what the next large update to the website should be in the fall. Even though the wind farm puzzles debuted in 2008 (when the website was undergoing its last major upgrade), there was still a lot of work to be done.

Whenever I come up with a new idea for a puzzle, I try to create several of that type of puzzle at the same time, and the wind farm puzzles were no exception. But due to poor planning on my part, I was running out of suitable puzzles for the magazine from the group of puzzles I had originally created. So the first task was to reorganize the available puzzles and fill holes in the lineup by creating some new wind farm puzzles. Thus, for example, the puzzle originally labeled as #4 is now #6. This also meant that some puzzles that were “website exclusives” were taken down, since they are now included in my plans for what will be published in the future. Even though a couple of puzzles were removed from the website, there are now more wind farm puzzles available than ever before. Plus I now have a batch of wind farm puzzles for future publication in suitable issues of the magazine.

Until today, the correct solution to each wind farm puzzle was based on the nonspecific instruction of arranging the turbines to produce the most energy. I always felt that the solver should have a good reason to understand why their solution must produce the most units of energy, but that level of understanding can be difficult to achieve. Concerned that some solvers would never be confident that they had found the solution, all puzzles now include a “good, better, best” energy unit rating scale. This gives the solver some idea of what they should be shooting for when arranging the turbines. This was inspired by mobile games I’ve seen that include a three star rating system for each level. The scale (different for each puzzle) is taken from various possible turbine arrangements, with “best” representing the absolute maximum amount of energy producible.

Wind Farm GBB

In addition to the solution, my goal is to always give some sort of solution explanation or problem space, depending on the type of puzzle. When the wind farm puzzles debuted on the website, they did not include detailed solutions. It took a lot of thinking and effort to figure out the simplest way to communicate how we can be sure that the best solution is, in fact, the best. I’m pleased to say that all wind farm puzzles now include detailed solution explanations of how to achieve the best energy output. Some of these (I’m looking at you Puzzle 10) took many attempts to figure out how to clearly and concisely explain the solution. I hope that these and other detailed solutions provide you with a helpful way of thinking about the puzzles.

Site Updates

Site Updates: August 2015

An ongoing catalogue of Knossos Games website issues and minor updates.

Updated WordPress through v4.3.

Added footnotes plugin Easy Footnotes. This enables unobtrusive updates to older blog posts, such as this one (where I wanted to convey that the puzzle mentioned has now been posted).

Minor updates were necessary to the Logic Problems, Part 1 update. First, the Logic problem #1 coin box graphic had the same issues encountered by the Space Pods graphics. The same workaround was successfully applied, although I continue to be perplexed as to what the underlying problem is. I also increased the font size for the graphics in the solution for Logic problem #4 so as to be more readable, especially on lower resolution displays. Finally, the PDFs for each puzzle were updated to the version 7 website design, which I neglected to do in the original update.

Fixed: Links between Knossos Games puzzles and blog entries

Problem: Blog entries about specific puzzles link back to those puzzles. However, visitors who surf directly to the puzzles may not know about the blog entries about those puzzles. Up to now, links from puzzles back to blog entires have been haphazardly posted. Need an organized way to add links from puzzle web pages back to blog posts. This is necessitated by the origin story blog entires for each logic puzzle, whereas past origin story blog entries were for entire groups of puzzles (which were easier to track and link).

Solution: This is a bit of a chicken-and-egg problem. Each puzzle web page needs to be posted first, then the accompanying blog entry can be created which links back to the puzzle. Once the blog entry is generated (and the link is fixed), the web page for the puzzle can be linked back to the blog entry. It took me a little while to recognize that this is the necessary order of things, but now that I have, I’ve added this process to my workflow for each puzzle or website update.

Updated: Splash page to main site

Problem: The splash page is meant to showcase the variety of puzzles available on Knossos Games. This was originally accomplished by presenting an edge-to-edge compilation of puzzle swaths (css stylesheet code):

html { 
  background: url(../splash/splash.svg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

This code takes a background image, centers it in both directions, and (using code specific to each browser) resizes it so that the image covers at least the size of the browser window top-to-bottom or left-to-right.

While this achieved my original objective for the splash page, it also presented certain problems. In order to cover the largest possible screens, the graphic had to be huge. But for small screens, such as mobile devices (with fixed data plans), a big graphic makes little sense. (The splash page redirected to the homepage after a few seconds, so if your data connection was lousy, it would simply skip the load.) In addition, the size of the swaths was not consistent between screen sizes/devices, or between the splash page and the rest of the website, because of the resizing.

Solution: Instead of the edge-to-edge graphic for the splash page, there is now a five swath by five swath graphic that is centered in both directions based on the specific size of the graphic (css stylesheet code):

#splash-center {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 900px;
   height: 810px;
   margin-top: -405px;
   margin-left: -450px;}

This new graphic maintains the size of swaths across the entire site regardless of screen size, and it is smaller by a full megabyte. If the screen isn’t wide or tall enough to display the full image, it’s simply cut off. If the screen is wider or taller than the image, there is empty white space. The splash page still automatically redirects to the homepage, but a link is now embedded in the graphic if the page loads quickly and you feel tired of waiting (or if javascript has been turned off).

I contemplated many different solutions to this problem. One possible solution, which I may still try at some point, is to include different sizes of graphics for the splash page, and serving the best size for each particular device. This can be accomplished using javascript.

Continuing aggravation: Drop shadows in svg files do not properly display in Safari

Problem: In recreating the splash page graphic, specifically the drop shadow for the “featured in Imagine magazine” text overlay, I ran into  a known issue in Safari: drop shadows in svg files do not properly display. Somehow, someway, I figured out how to trick Safari into displaying the drop shadow in the original, large splash graphic. But I could not figure out how I did this when recreating the image. Absolutely nothing worked.

Solution: After beating my head against the wall, I made a drop shadow by simply offsetting the text as black and translucent. (Nothing was done to blur the boundary, since that too has trouble rendering in Safari.) I’ll continue to revisit this issue as I change the new splash graphic to reflect current updates and featured puzzles.