Friday, February 27, 2015

What My Users Are Using

Since I got a request to show some of Amphibian.com's user agent stats after Monday's post, I decided to put some information together and share it today. There are a few surprises.

These numbers are based on the agent strings for the last week. I had a pretty good week for traffic, due no doubt to my guest-authorship of Tavern Wenches on Monday.

First, let's look at the coarse-grain browser usage.
  • Firefox: 24.61%
  • Chrome: 29.78%
  • Internet Explorer: 15.38%
  • Safari: 1.97%
  • Other: 28.25%
What is "Other"?  Mostly just spiders and bots. There sure are a lot of them though. But over half of the traffic is people using Firefox or Chrome, which is great to see.

Now to break it down some more. What versions of the browsers are being used? I'll start with Firefox.
  • version 35: 36.64%
  • version 3: 30.31%
  • version 6: 15.99%
  • version 31: 7.66%
  • version 28: 2.41%
  • version 26: 1.08%
All other versions were less than 1% each of all Firefox traffic. It's no surprise that 35 is the most common, since up until 3 days ago it was the current version. What's really shocking is that version 3 is the next most common! It dates back to June of 2008. But it was also before the automatic upgrade process, which is why so many people are stuck on it. Leaks memory like mad though. Version 6 was also popular and came out before the forced updates, back in August of 2011. It didn't make the cutoff since it was less than one percent, but there was one comic accessed with Firefox 2. Whoever you are, please upgrade. The good news: Firefox has always had pretty good SVG support, so almost all of these people are seeing the frog comics more-or-less correctly. Even CSS3 Transforms, which I use relatively often, were supported the whole way back to 3.5.

Chrome is next.
  • version 40: 78.65%
  • version 39: 7.30%
  • version 38: 7.16%
  • version 36: 1.90%
  • version 35: 1.12%
  • version 30: 1.90%
All other Chrome versions were used less than 1% each. Thanks to Chrome's excellent automated update process, the vast majority of users are on the current version, released on 21 January 2015. There were 2 comics accessed from Chrome 41, which is currently in the beta channel. You are awesome, whoever you are. The oldest version of Chrome used was 10, released in March of 2011. Even that person got to see the frog comics almost perfectly. Chrome is my browser of choice and has always supported SVG graphics and CSS3 transforms.

Now how about those IE users?
  • version 6: 11.74% (fail!)
  • version 7: 1.66% (fail!)
  • version 8: 69.48% (fail!)
  • version 9: 1.66%
  • version 10: 9.53%
  • version 11: 5.94%
Booooo! That's right, IE 8 is still the most common IE used to visit Amphibian.com. Those folks are leaving disappointed. As are all those people using 7 and 6. Come on, people! IE 6?!?! Really? That browser's older than dirt! That browser nearly killed the web! Ugh. Anyway, the 17% of IE users who come with 9, 10, or 11 will be fine. The site looks presentable in 9 and should be perfect in 10 and 11. Internet Explorer's SVG support started in 9, but not all of the things I do with CSS3 are supported until 10. It degrades rather well though.

Safari doesn't show up enough to be significant, but almost everyone using it is on version 8.

The one other thing I like to look at is operating system. Since I went to the trouble of optimizing Amphibian.com for mobile devices, I'd like to see more mobile browsing of it. So far, though, I'm not doing so well in that area.
  • Windows: 58.98%
  • Mac: 4.48%
  • iOS: 3.25%
  • Android: 6.21%
  • Linux: 3.41%
  • Other: 23.67%
Again, "Other" shows up in a large number. It's the spiders and bots. Which is fine, I guess. One of the other design concerns with my site is how the frog's words are just P tags and can therefore be indexed by the search engines. But back to the real people - there are relatively few viewing the comics on mobile devices. Windows is by far the most popular. I am pleasantly surprised to see over 3% on Linux though.

Enough of the statistics now, back to the comics!

Amphibian.com comic for 27 February 2015

Wednesday, February 25, 2015

Achievement Unlocked

I had a major achievement this week - I guest-authored for Sarah Frisk's web comic Tavern Wenches!

My Guest-Authored Tavern Wenches
I'm happy to help out another webcomic, and I am excited because it makes me feel more like a "real" webcomic author. I mean, it's one thing to call myself a webcomic author because I can put frog graphics on a web page, but I must be a real webcomic author if another webcomic author believes me to be a webcomic author.

Drawing someone else's comic for them is a little terrifying. I didn't think of that before I volunteered, but afterwards I developed some anxiety. I hadn't been reading Tavern Wenches that long (I discovered Sarah's work through my participation in CodeNewbie's Twitter chats) and I was nervous that I didn't have enough background to do it justice. So I read over most of the site's archive a few times. Tavern Wenches had guest authors twice before, so at least I wasn't the first. But I also considered that as an established comic, the regular readers will most likely have expectations that my comic style might not be able to meet. Would people be disappointed with some silly puns and a frog? Finally, with the exception of a crayon sketch of my daughter here and there, I hadn't really drawn a human character in a looooong time. While I did once draw with pencil and paper (a comic strip about a frog that ran in a local newspaper for many years) all my work lately has been in vector graphics. I wasn't quite sure where to start drawing a person again. Could I really do this?

The Last Person I Drew
I wasn't sure. But after a day I decided to do my best and stick with what works for me. That meant Inkscape, frogs, and puns. Being a guest author doesn't mean you have to do everything the way the regular author does it. It's more about bringing your own unique style and perspective to someone else's comic world (at least that's what I decided). So I made an SVG of Veronica and had her do a double act with a frog I styled to appear more medieval. After I had everything arranged in Inkscape, I exported it to a .PNG and sent it to Sarah.

Despite my trepidation, I think it turned out pretty good. It was beneficial for me to work outside my comfort zone and draw a person again. I'm not saying that Amphibian.com will start having human characters, but I won't rule it out simply because I'm not sure that I can draw one.

So in addition to today's regular frog comic, I would encourage everyone to go check out Tavern Wenches - not just my guest comic but be sure to read Sarah's comics as well. I really like her art style. She also does a monthly comic called Monster Markup Manual which features monsters from Tavern Wenches helping to instruct people on software development topics. My frogs should probably look into reading those, because, well, you know...the frogs don't really know what they're doing.

Amphibian.com comic for 25 February 2015

Monday, February 23, 2015

Talk to my Agent

Do you know which web browser you are using right now? I hope so.

Do you know which web browser the users of your site are using right now?  You should.

There are people who track global market share of different web browsers and provide that data to the public, so you can know that 58% of the world is using Internet Explorer, for example.

Maybe the most well known is Net Market Share.

But I'm talking about just your users. Are you tracking the browsers being used by the people who are visiting and using the application for which you are responsible? It is valuable data that can be used for both planning and debugging purposes.

For amphibian.com, I collect the User-Agent strings from the browsers that visit the site. The User-Agent is a bit of text that all browsers send to the servers with each request. It doesn't identify you personally, but it does tell the server the product name and version (like Chrome 40) and the layout engine name and version.

If you want to see what your browser says it is, just go to http://whatsmyuseragent.com/ and it will tell you.

What are some of these?
The problem is that these strings have gotten out of hand. They almost always start with "Mozilla." Both Chrome and Internet Explorer both do this, and they couldn't be more different. Firefox should theoretically be the only browser that could claim Mozilla heritage, but there are obviously no rules. Web developers have no right to complain though, since they caused it. When people started blocking access to web sites based on which browser was requesting the access (remember things like "This site only works in Netscape Navigator"), the browser manufacturers responded by putting "Mozilla" in every agent string.

Have a look at this site if you want to see a rather exhaustive list of possible agents: Zytrax.com Browser IDs.

Given the absurd amount of similarity and variety possible in User-Agent strings, it's best to find a tool to help you process them. Since Amphibian.com is a JavaScript-based Node application, I use UAParser.js, a very convenient parser module. It can be used both on the back-end, like I do, and in the browser if you need to parse the agent string client-side.

Usage is simple.

var parser = new UAParser();
var r = parser.setUA("some user-agent string").getResult();

console.log(r.browser.name);    // "Chrome", "Firefox", etc.
console.log(r.browser.version); // the complete version, like 40.0.2214.115
console.log(r.browser.major);   // just the version whole number, like 40
console.log(r.os.name);         // "Windows", "Linux", etc.
console.log(r.os.version);      // 95, ME, 7, 8, etc.
console.log(r.engine.name);     // "WebKit", "Gecko", etc.
console.log(r.engine.version);  // something like 537.36

After creating the UAParser object, get an object that represents the result of a parse by calling setUA and passing in a string. The result object contains a nicely organized breakdown of the agent. Easy!

Why don't you take your user agent over to my comic now and see what the frogs are up to today?

Amphibian.com comic for 23 February 2015

Friday, February 20, 2015

It Keeps Blinking, But I'm Not Turning

You know what I miss about the Internet from the 90's?

Blinking text!

You know you miss it too! You don't have to live in denial any longer. Just accept it. It's okay.

Blink.

Blink.

Blink.

Even though Netscape Navigator is a distant memory, it's easy to relive your glory days of website design by making text blink using jQuery. It's really easy.

Just take whatever elements you want to blink and add the blink class to them, like I did with this paragraph tag:

<body>

  <p class="blink">This text should blink.</p>

</body>

Then in a script tag, just do this (updated):

$(function() {

    var vis = "hidden";
    function bringBackBlink() {
        $(".blink").css("visibility", vis);
        vis = ( vis === "hidden" ? "visible" : "hidden" );
    }

    setInterval(bringBackBlink, 500);

});

Updated: After the bringBackBlink (say that 5 times fast) function is defined, setInterval makes sure it gets called every 500 milliseconds. All the function does is find all elements on the page that have the blink class and toggles their display visibility value. If they are visible, they become hidden. If hidden, they become visible. It will happen twice every second. If you want to make them blink faster or slower just change the millisecond value.

As pointed out in the comments, I originally used jQuery's .toggle() function to alternatively hide and show the element. This will only work correctly in situations where the element to be blinked is using fixed or absolute positioning (that's why it works for me in frog comics). In "normal" situations, like my paragraph tag example above, all the other elements on the page will shift around. This is because jQuery's toggle function sets the value of the display property to none, which causes the hidden element to no longer take up space on the page. Using the visibility property instead keeps things where they belong.

Now look at this example of HTML. It has lots of other non-blinking elements on the page that won't shift around when things blink.

<body>

  <p>This text should not blink.</p>

  <p class="blink">This text should blink.</p>

  <p>This text should not move.</p>

  <p class="pink">
    <span class="blink">
      This text should blink and be pink.
    </span>
  </p>

  <p>This text should not move.</p>

</body>

<style>

.pink {
    background-color: #000000;
    color: #FF3399;
    padding: 5px;
}

</style>

Here is an animated GIF showing the results:


Just like neon windbreakers and cargo pants, blinking text on the web is coming back in style! (Disclaimer: I don't actually know if neon windbreakers and cargo pants are coming back in style)

And speaking of blinking...if you still have your Christmas lights up like the frogs do, it might be time to take them down.

Amphibian.com comic for 20 February 2015

Wednesday, February 18, 2015

New Zero-Core Apple

Pair Programming is different from Pear Programming. Apples are different from oranges. Frogs are different from toads. Cores are different from food?

While writing today's comic, I was informed by my wife that apples don't really have cores. "Preposterous!" I exclaimed. Everyone knows apples have cores. No one eats the middle part of the apple. Well, I actually don't eat any part of the apple because I am allergic to apples. But normal people don't eat the middle part of the apple.

It turns out that the Internet agrees with my wife. While most people don't like eating seeds or stems, you can actually eat the entire apple. You won't even really notice anything "core-ish" about that middle part if you eat the apple sideways - start at the bottom at eat your way to the top.

But does pair programming really result in fewer core dumps? I don't know, but pear programming most certainly does.

Sorry, I don't have any deep thoughts on pair programming to share. Or any thoughts about core dumps or multi-core CPU architecture. Or really much of anything besides my shock at learning about the apple core thing. It's been a rough week. Read a comic.

Amphibian.com comic for 18 February 2015

Monday, February 16, 2015

Being Awesome

In today's comic, the frogs of today and of ancient times are using pictures instead of words to convey meaning. The problem is that sometimes the meaning is lost. My children know that the picture of a floppy disk means Save, but they have no idea what a floppy disk is.

Despite this problem, I do like to use small pictures on web pages to represent certain actions. If you'd like to do this as well, be sure to check out Font Awesome (if you haven't already). I used to create small images myself to use on web pages in <img /> tags for this purpose, but doing this with fonts and CSS makes even more sense. When the image is a scalable, vector-based character from a font, you can make it any size/color/rotation you need.

Using Font Awesome can seem like magic. You just put an empty tag in your HTML with a couple classes applied to it and it renders as a picture of something. The following example is the bomb!

<i class="fa fa-bomb"></i>

There is no actual magic involved, however. The CSS that accompanies the Font Awesome font makes use of the ::before pseudoelement to add a character of text to your markup. The character added depends on the class and maps to one of the images in the font.

Pseudoelements let you do all kinds of crazy things via CSS. Like ::before, there is also an ::after. They allow you to add text or images (or nothing) to the page, but the additions don't actually become part of the DOM. That last part makes them a little difficult to work with sometimes, but they are still useful. Here's a weird example:

a::after {
    content: " (don't click on this!)";
}

That will add a dire warning to every link on the page. I didn't say it was a useful example. I said weird.

If you'd like some useful examples, check out CSS-Tricks. But don't forget about Font Awesome if you just want to put some icons on your pages now. And also don't forget to read today's comic.

Amphibian.com comic for 16 February 2015

Friday, February 13, 2015

My Lucky Day

Today (the date of this blog entry's publication) is Friday, the 13th day of February 2015. Don't be alarmed, Friday the 13th is nothing of which to be afraid.

I've told people for years that Friday the 13th is my lucky day, which is the exact opposite of how most people in the United States see it. The reason I say that is because my wife and I got our marriage license and bought our first home on Friday the 13th. That was September 2002. Just a few years ago, in 2013, we had another Friday the 13th in September. There'll be another one in 2019.

I'm not at all superstitious and I don't often encounter someone who is. Most people I know associate Friday the 13th more with a series of horror movies than with actual bad luck. Apparently, the belief that Friday the 13th is unlucky arose in the 19th century when superstitions concerning Fridays and the number 13 were combined. Sort of like when chocolate and peanut butter were first combined, but less delicious.

I'm not sure why people didn't like Fridays. As the last day of the work week, we tend to favor them now. But the number 13 has been long-despised because it is one more than 12 - the number of completeness (or so they say). But seriously, the number 12 is everywhere. Months of the year. Hours in a day (unless you use a 24-hour clock). There were 12 tribes of Israel. Jesus had 12 disciples. Twelve is a popular number. Seven was also a popular number, but then seven ate nine and is now regarded more as a number to be feared.

So, back to 13. It is a prime number, and prime numbers are useful for public key cryptography and pseudorandom number generators. And pseudorandom number generators are used in computer games, where luck can be a factor.

However, don't confuse luck with randomness. Lots of things are random, but luck is subjective. If you believe today will be your lucky day, it will be. It's all in your perspective.

Keep in mind that the 13th day of the month actually occurs on Fridays more often than any other day of the week. Seriously, There's math to prove that. Also, there will be three Fridays the 13th this year. This is just the first one. There'll be another one next month and then again in November.

Well, enough about Friday the 13th. Don't forget that the 14th is Valentine's Day! Read today's comic to see if the frogs can help some algorithms find love.

Amphibian.com comic for 13 February 2015