I Am a Genius: listen to my words

I Have the Conch


listen to my words

Archive for the ‘Work’ Category

The whole reason for writing Bloggo was to create a commuter-blog. That never panned out. May still want to add that, but for now, when I whine about work or getting there, it’ll go in this category.

Media Query Update

So I did some more tinkering. I figured, there has to be a way this makes sense.

Especially since I spent another day at work working with a page with these declarations that is working exactly as intended:

<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 480px)" href="styles/rplo-iphone5.css">
<link rel='stylesheet' media='screen and (min-width: 560px) and (max-width: 720px)' href='styles/rplo-iphone5.css' />

I did a version of my page from the last post that had this:

@media only screen and (min-width:300px) and (max-width:309px) { body { background-color: rgb(0,1,0) } }
@media only screen and (min-width:310px) and (max-width:319px) { body { background-color: rgb(0,2,0) } }
@media only screen and (min-width:320px) and (max-width:329px) { body { background-color: rgb(0,3,0) } }
...

on up to 1609px.

Every mobile device/browser matched the 980-989 range. Just like I expected from my last results.

Honestly, I have no idea how to begin to reconcile the behavior between those two segments of code. It makes zero sense to me.

So I finally tried using min-device-width and max-device-width.

@media only screen and (min-device-width:300px) and (max-device-width:309px) { body { background-color: rgb(0,1,0) } }
@media only screen and (min-device-width:310px) and (max-device-width:319px) { body { background-color: rgb(0,2,0) } }
@media only screen and (min-device-width:320px) and (max-device-width:329px) { body { background-color: rgb(0,3,0) } }
...

This one gave me usable results. For the first time. Ever.

But it’s still pretty frigging weird.

Chrome and Firefox, on my Samsung Galaxy SIII, agree that in portrait, the device-width is 360px, and that in Landscape the device-width is 640px.

The built-in default browser, however, insists that the device-width is 720px no matter what orientation the device is. I’ve no idea where it gets that number. It’s like the developers choose it from a hat full of slips of paper with pixel resolutions written on them.

I can understand reporting an identical device-width no matter the orientation, I guess. There’s an argument to be made that the device-width hasn’t changed just because you turned the device. It’s a completely impractical and useless argument, but at least it’s there. And there’s precedent. iOS reports (using Chrome or Safari) the same device-width no matter which orientation you hold the device (on this iPhone 5 that device-width is 320px, and on the iPad Air it is 760px). This is another reason for me to hate Apple, but at least it’s consistent.

Android’s default browser giving me 720px is like saying that 1+1=2, or 3 for especially large values of 1.

But, still, at least I can use it.

You can make media queries that fit those device-widths without much of a problem

/* iPhone 5, portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 359px) and (orientation: portrait) {}
/* iPhone 5, landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 359px) and (orientation: landscape) {}
/* Android Chrome, Firefox, or default, portrait */
@media only screen and (min-device-width: 360px) and (max-device-width: 639px),
only screen and (min-device-width:720px) and (max-device-width:1000px) and (orientation: portrait) {}
/* Android Chrome, Firefox, or default, landscape*/
@media only screen and (min-device-width: 640px) and (max-device-width: 719px),
only screen and (min-device-width:720px) and (max-device-width:1000px) and (orientation: landscape) {}

Note that the 1000px measure there is an arbitrary number.

I will probably do something like this to get a measure in em. And maybe do it with device-height as well. Just to see if I get something else useful.

Media Queries

“I seem to be having tremendous difficulty with my lifestyle…” er… media queries.

I’ve been working with a bunch trying to come up with a definitive set of queries to make CSS work across browsers so I can just copy those queries as needed from page to page.

Except, they don’t work consistently.

At work we have a page that uses this set of link declarations on one page:


<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='css/iphone4.css' />
<link rel='stylesheet' media='screen and (min-width: 560px) and (max-width: 720px)' href='css/iphone5.css' />
<link rel='stylesheet' media='screen and (min-width: 600px) and (max-width: 1024px)' href='css/tablet.css' />

It seems to work pretty good for iPhone and iPad, though less so for Android.

But I was experimenting to find what worked. What was the min-width for various devices.

I have a Samsung Galaxy SIII with Chrome, Firefox, and the default browser.
I have an iPhone (5, I think?) with Chrome and Safari
I have an iPad3 with Chrome and Safari.

I wrote a PHP script to generate a style sheet with media queries incrementing the min-width by 10. Like thus:


@media screen and (min-width: 320px){body{background-color: rgb(0,0,1)}}
@media screen and (min-width: 330px){body{background-color: rgb(0,0,2)}}
@media screen and (min-width: 340px){body{background-color: rgb(0,0,3)}}
@media screen and (min-width: 350px){body{background-color: rgb(0,0,4)}}
...

…and so on, up to 1260px. Note that the color gradation was very subtle, so I included a JavaScript statement to tell me the color value actually being used. From that I could see which media query matched.

It wasn’t helpful because all three devices, in all their browsers, told me that the color was rgb(0,0,67). Which corresponded to 980pxs. It did this in portrait AND landscape orientations. The only exception was Firefox on the Galaxy. It matched something like 530px, but only in portrait. In landscape it was 980px.

However, I’ve also had people observe that linking stylesheets works differently (read, “better”) than inline media queries. So I did the same thing, only using stylesheets.


<link rel="stylesheet" media="screen and (min-width:320px) href="style320.css">
<link rel="stylesheet" media="screen and (min-width:330px) href="style330.css">
<link rel="stylesheet" media="screen and (min-width:340px) href="style340.css">
<link rel="stylesheet" media="screen and (min-width:350px) href="style350.css">

I got identical results.

I have a coworker who testifies to the True Nature of the media queries we use on the functional page mentioned above.

So I made this page:


<html>
<head>
<title>css test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body { background-color: #000; color: #fff; }
</style>
<link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='style320.css' />
<link rel='stylesheet' media='screen and (min-width: 600px) and (max-width: 1024px)' href='style600.css' />
<link rel='stylesheet' media='screen and (min-width: 560px) and (max-width: 720px)' href='style560.css' />
</head>
<body>
<script>
$(document).ready(function(){
switch ($('body').css('background-color')) {
case 'rgb(0, 0, 3)':
$('body').prepend('Document matches this media query: screen and (min-width: 320px) and (max-width: 480px)');
break;
case 'rgb(0, 0, 27':
$('body').prepend('Document matches this media query: screen and (min-width: 560px) and (max-width: 720px)');
break;
case 'rgb(0, 0, 31)':
$('body').prepend('Document matches this media query: screen and (min-width: 600px) and (max-width: 1024px)');
break;
default:
$('body').prepend('Document does match any media query you defined').
break;
}
})
</script>
</body>
</html>

The page (with lots of commented code from other experiments) can be found at http://herbertlives.com/misc/mq

All it does is use media queries to decide which stylesheet to use.
The stylesheets each have one declaration, the color of the body background.
The JavaScript/jQuery detects the background color, and depending on what it gets, prints out what query matched.

Android Chrome

Android Chrome

Android Firefox

Android Firefox

Everything iPhone and iPad matched Android Chrome. Which, it should be noted, is the range that 980px fits in. Firefox was the confusing one, because… 530px doesn’t fit between 320 and 480.

I’ve seen a lot of “lessons” and “tutorials” and “sample code” that give example queries. They all seem to go with the iPhone declared screen size of 320px and browser reported size of 640px. And none of them work like I expect them too.

I’m left believing that web pages must be styled according to target device, not screen sizes.

If I’m doing something wrong, feel free to tell me what it is. I’d like the world of web development to make some sort of fracking sense once in a while, and human error in this project would explain a lot.

Daily Snapshot for April 2, 2012

cleansing the palate, so to speak. Have another daily snapshot.

The Washington Monument

click to embarrass-size

“Daily” Snapshot for March 28, 2012

I’m taking pictures most evenings when I reach the slug line. Since I don’t actually slug every single day (rarely, I stay late, or get a ride earlier), there won’t be a picture for every single working day. Plus I’m not going to miss or delay a ride because I need to take a photo.

But anyway, the slug line is between the National Mall (just south of the Smithsonian Museum of American History and a small grassy area before the Washington Monument. They’re building the Museum of African American History and Culture right there too. I may take pictures of other directions, but so far, they’ve all been of the Washington Monument, despite the blinding glare from the sun behind it.

I’m going to upload the older pictures and back date them. So if you really want to see, you can search on the “Washington Monument” tag or look through the Photog category.

March 28, 2012

Click to monument size

Daily Snapshot for March 22, 2012

Here, a picture of the father of our country’s memorial

The Washington Monument

Click to super size.

Daily Snapshot for March 21, 2012

Look! It’s landscape this time!

The Washington Monument

click to enormi-cize

Daily Snapshot for March 15, 2012

The Washington Monument

Click to en-huge-n

Daily Snapshot for March 9, 2012

One of the shots from today had a helicopter in it. Which is cool, but overall this shot looked better.

The Washington Monument

Click to Airborn size.

Daily Snapshot for March 7, 2012

Not much to say. Here’s a picture.

The Washington Monument

click to make it larger.

Socially Awkward Penguin Sharted on my Web Site

Let's Talk...

One of the things my team does at work is maintain and develop a set of five distinct but related web sites. They have different content and styles, but they have related material and the same layout and code structure.

One of the design elements that is the same across all the sites is that they have a row of buttons that link to each of the other sites. These buttons are graphics that consist of the name of the target site.

The particular implementation of this design element looks as graphically attractive as fornicating porcupines. I mean, they go well as a set, but no one needs to see that.

Specifically, they look (literally) like someone wrote the name down in marker, and before it was dry wiped it with his thumb. It’s horrendous — and they were created by the individual I have referred to in the past as my nemesis. She’s been gone nearly a year and I’m still trying to fix all the damage she did.

At any rate, until recently only four of the five sites were inter-related this way. The fifth one, which we were already responsible for, was a little more independent. But now it’s integrating with the other five. This means that before we had 3 buttons on each of four sites (no site links to itself, dur). But now we need to implement a fourth button on each site, and put four buttons on the newly integrating site.

That means creating a new graphic.

The new site has a very similar name to one of the previous four, so the name we were using is being tossed, and we’re using an abbreviation for both these sites.

So that means making another new graphic. Two in total, which is 20% of all the graphics we used.

My nemesis, naturally, did not bother to save a source file which could be easily edited to make changes or add a new button. This usually is something that would justify my low estimation of her competence, but this time around I was grateful. With no record of what font was used and a pretty small set of letters to work it out with, coupled with my inability to recreate the horrible appearance of the old ones, altogether meant that I had to redo all five graphics. Or, more to the point, that I not only had no choice, but that I could make graphics I could live with.

Another objective in remaking the graphics came in at this point. The lengths of the names being used varied from 3 to 10 letters. With the previous name set, the variation was from 6 to 10. So the previous buttons were all different widths, but not too big a difference. Doing that again was going to make some huge appearance differences.

So I made all five. Very simple, all based off a very easily editable Illustrator file. Took me ten minutes. They all match, they were all the same width, they all look good, and they all blended with their background better.

When I first put them out on a test site, it didn’t look good. It was like one of the porcupines was still there, but now he was shtoinking a jellyfish. There didn’t seem to be a reason for the apparent spacing variations. I could just crop them to the name length, that made it look like the jellyfish was really kinky, had convinced the porcupine to become a swinger, and invited an ostrich to the festivities.

So I put a simple one pixel border around each button. Voila. Now they look like five different objects all the same width, evenly space. It was beautiful (in relative terms, of course). I was complimented on how good it looked.

Documentation for the sites is handled by a different group, and around this time they asked for a copy of one of the graphics so that they could put it in the documentation. No problem. I sent it over.

1980s Troll Doll

REMEMBER ME?!

A few hours later, the troll wrote back.

I call him a troll because, honestly, it’s he reminds me of one of those dolls from the 80s.

He’s short, round, and I’m quite certain that if I stuck him on a pencil and spun him his hair would make a weird mess. Normally this just amuses me. This time, it was irritating. Not the hair, just the trollness.

And trollness he projected at me.

He started complaining about how the changes hadn’t been approved, and we’d have to send it through the stake holders. And how he’s “uncomfortable” changing the “look and feel” of the sites and that we’d have to fill out a change request form which at this time “we don’t have time to do.”

All of this seemed intended to bug me. Socially Awkward Penguin Evacuates

I thought, maybe this guys just being lazy.

But over the course of 10 paragraphs in 3 emails I was certain he wasn’t being lazy. He was putting far too much work into getting out of this.

I came to a conclusion: he was scared to do this. It was change. And he feared change. Because he wasn’t given explicit written instructions to do something, he couldn’t do it.

I guess he kind of had a point to a certain amount. I mean yeah, we don’t make changes just because we feel like it. Even if they’re necessary. But on the other hand, I was already making changes that were not just asked for by the stakeholders, but were REQUIRED. I certainly couldn’t leave things as they were. They had to change.

As for filling out the a Change Request form…. Really? You’re one of those people? One of the people who thinks it’s a good idea to create more paperwork? What the heck is wrong with you? That’s so foreign to my way of thinking that I can barely comprehend it.

Business Cat Tells You What He Really Thinks

Plus, I know what happens to paperwork around here. We literally changed the name of a document once to submit it as the necessary paperwork for a different project than the doc was created for. No one ever said anything. Paperwork around here is a gatekeeper. It’s not to accomplish anything usefully administrative. It’s to keep the faint of heart from ever asking for anything to be done at all.

And after all, adding the borders (or taking them away) was all of 3 minutes of work. If my computer was experiencing some sort of lag.

So we argued with the troll for a while. It was finally conceded that the borders had to go, and the troll finally gave a parting shot that “he had to explain this to the stakeholders.” At which point one wonders (or at least, I wonder) why the border couldn’t simply be part of that, since it was good for the design and all.

So in the end, we no longer have porcupines fornicating on these web sides. But it sure does look like some waterfowl defecated on it.

Philosoraptor Questions Your Ethics

The answer, philosoraptor, is NO.

Daily Snapshot for March 6, 2012

The first in a pretty regular series.

The Washington Monument

Click to Capital-size

jQuery’s Slice (and you didn’t even know it golfed, did you?)

Yes, it’s irritating enough that I’m going to blog about it.

Most programming languages have some version of slice() implemented in their design. The principle for the slice method/function/whatever is self explanatory: It makes a slice of a larger set of data.

HOW it’s implemented varies. It could change the original variable or set of data that you are working on. It could create NEW variable or set of data that copies that subset of the data. Conceivably, it could do both, like a cake: literally take the data out of the original set, leaving it smaller, and making a new object/variable/whatever with the subset you defined.

Every implementation I’ve seen defines the slice it makes using 1 or 2 numbers. The first number is an indication of where to start the slice, and if the second number is there, it indicates where the slice ends, (otherwise, the slice ends when the data slice ends.

Now, before we go on, I have to explain how programming languages and computers number things. If you understand 0-indexing used by most languages, skip a bit to get to my gripe. Otherwise, keep going.

In most computer/programming/scripting languages, counting starts at 0. So let’s say you have an array (an array is a group of things, more specificity in that definition varies from language to language). This array is a list of fruits. In this list we have:
Banana
Apple
Orange
Mango
Grape
Strawberry
Huckleberry
Lemon

That list is longer than we actually need, but it works. If the array has each of those stored in that order, “Banana” has an index of 0. “Apple” is 1, and so forth until we get to “Lemon” which has an index of 7. The LENGTH of the list is 8 objects. And programming languages will tell you it’s 8 objects long. But they’re going to index it 0-7. Banana is the first object, with an index of 0. Lemon is the eighth object, with an index of 7.

It’s not necessarily obvious, but there are good reasons for it which I won’t go into here.

Now, back to slice(). The first number telling you when to start is typically either a) the index number of the object (a range of 0-7 in our example) or the number of the sequence in which it appears (a range of 1-8). You have to know which one to use or you’ll get unexpected results, but once you know you just memorize it.

The second number, if it appears, can also be either the index number or the sequence number. But there’s also a third option! That “end number” might actually be a measure of how long the slice is.

So if you want to get Orange, Mango, and Grape, there are four common sense ways of expressing it.

  • Index method: fruits.slice(2,4) (because Orange is index 2, and Grape is index 4)
  • Sequence method: fruits.slice(3,5) (because Orange is third in the list and Grape is fifth)
  • Index + length method: fruits .slice(2,3) (because Orange is index 2, and you want 3 items from the list)
  • Sequence + length method: fruits.slice(3,3) (because Orange is the third item in the list, and you want 3 items from the list.

Personally, I would prefer it if they’d all just use the Index method, but I don’t get to decide these things.

But what REALLY IRRITATES me is what jQuery does with slice. It uses the index for the start item and the sequence number for the end item. So if we wanted Orange, Mango, and Grape, our expression would be fruits.slice(2,5). It uses to completely distinct numbering systems instead of just one, which makes it look like there are either 4 or 5 items in the slice, when there are only 3.

It’s not consistent, and that’s stupid. Thanks jQuery. I hate you now.

(No I don’t. Come back. Why you gotta make me hurt you, baby?)

Meeting Notes week of 20100913

Honestly this is less doodling and more ranting and insane screaming of ideas.

If you disagree with my littel mini-essay on punk. I don’t care.

rant and rave

Team Meeting week of 20100906

This week marked the worst, yet most hilarious, double entendre that my boss ever said. I have little else to say about that, because I certainly don’t want to talk about why I would play Tic-Tac-Toe against myself.

LIEBE MEINE MEETING NOTES

Team Meeting, week of 20100802

Some weeks my distraction from the banality that is my life in general and a work meeting in specific becomes thematic. Instead of doodling, this week I did movie quotes. I’m certain that a number of them are off, but since I don’t have any reference… well, you get what you pay for. And it’s free. So without further ado:

more ... not doodly goodness