Toby's Log page 96

HTML5: The Progress Element

in


I decided to attempt to use another new HTML 5 element on a site, the <progress> element. This element is used to show the completed progress of a task, perfect for the tasks in a project management application we are making at Cogneato. I wanted it to have the same appearance for all modern browsers, a visual bar indicating percentage complete of a fixed width total bar. As always, this required some special handling for different browsers. Because of the complications, I needed to output different markup for different browsers, so I made a PHP function using server side browser sniffing to give me the proper output. The convoluted function looks like this:

<?php
$glbProgressWidthModifier=0.8;
function generateProgress($value){
    global $glbProgressWidthModifier, $ischrome, $issaf, $isie, $isie9;
    $value = $value * 100;
    ob_start();
?>
<?php if(!$ischrome){ ?><div class="progresswrap">progress  value="" max="100" class="elmprogress" style="width:px;"><span>%</span>></div><?php } ?>    
<?php
    $fncReturn = ob_get_contents();
    ob_end_clean();
    return $fncReturn;
}

with a global width modifier to set the width of the total bar, where 1 means 100px, and various is… variables set elsewhere based on the sniffed browser. It will return the HTML output given a numeric value between 0 and 1 representing percentage complete, like echo generateProgress(0.85).

Continue reading post "HTML5: The Progress Element"

WordPress: Determining Sections

in

There are many issues encountered when using WordPress as a CMS. One thing that is common on regular websites is the concept of sections. Different sections might have different highlighted or open menu items, sidebar content, layouts, or actions from the same widgets (search this section for instance). WordPress offers the ability to use different template files depending on the category of posts or what is selected for a page. This is somewhat limited though, as sites might have multiple pages and categories in a section. WordPress also has various functions that can be used in “if” statements to determine if the current page/post matches certain criteria. These can be logically connected in “if” statements to determine if “the_post” is in a section and placed anywhere in template files, but this requires repeating the same logic questions in every place you must determine the section, and would thus be a pain to maintain.

To keep these “if” questions in one place, I built myself a function to store them in, allowing me to ask if a page is in a section using only a name.

Continue reading post "WordPress: Determining Sections"

Javascript: Anchors in Dropdown Menus for Keyboard Access

in

My boss at work doesn’t like the top-level items that have submenus in our two-level menus to be links. In most of the sites we build, there is really no page for the top-level items to link to. Having a duplicated link to the first item or just a worthless value could be confusing, especially for both bots and screenreaders. But with no anchors, the submenus are inaccessible via the keyboard, as browsers generally only provide keyboard navigation to anchors, inputs, and buttons. As I prefer to keep my hands on the keyboard most of the time, I was disappointed with this characteristic of the menu system I built.

While building a vertical menu where the submenu drops down directly below the top-level items, I realized a solution to this issue. Anchors with no “href” attribute are fully valid, but they are interpreted much like spans and don’t receive keyboard focus or perform any actions on activation (barring event handlers of course). To a non-javascript agent, they are basically the same as the spans I would normally wrap around my top-level items. But for javascript users, I can simply add an href attribute to turn them into keyboard accessible items that can then activate the submenus. I use a worthless but descriptive value to tell users what the items do if they read their status bar. I prevent the default action anyway, but I still use a javascript qualifier to be sure and to describe the action, so the href looks like: “javascript://openMenu();”. This would do nothing if somehow the onclick event handler were not run. Like a good little javascripter, I attach event listeners programatically, of course. With jQuery, this would look something like:

elmsMenus.find("."+classTopitem).attr("href","javascript://openmenu();");

When I have time, I will have to update the horizontal menu that we use on many sites. In my vertical menu, I shall not that non-javascript users can still access the menus, because the default CSS displays them as opened. This is not the case for my horizontal menu script. I have yet to find a solution for this that will fit my bosses desires.

CSS3: Text Rotation Rendering Problems

in

As mentioned in another post on css rotation, I had some issues with rotating text. On the Amy’s Shoes site, now live [no longer our design], I use transform:rotate(); for CSS3 capable browsers and the matrix filter for IE to rotate various elements.

In IE, I had noticed that the text was somewhat blurry when rotated, especially for smaller font-sizes. I hadn’t noticed, though, that the rotated text also rendered poorly in Firefox for Windows and Safari for Windows. They render the text with messed up kerning and letter positioning, so that it can become illegible on smaller text and even have overlapping letters. Not in Opera in Chrome, just those browsers. I test Firefox and Safari on Mac only, since rendering of most things is exactly the same. Evidently not the case with rotated font rendering though, and I will have to keep this in mind and test the new CSS3 features more thoroughly.

Because of this issue, I made my first ever style sheet targeting an entire operating system (Windows), since the rotation was not working on so many Windows browsers. The stylesheet simply removes the rotation on the main body text and repositions things slightly so that the layout still works. We were considering doing image replacement for the menu and button text on Windows as well, but haven’t gone that far yet, as the larger text doesn’t look nearly as bad. The rendering is also slightly messed up on Firefox for Mac, but not too bad to use.

We’re not sure why the rendering is so bad on those Windows browsers. For IE, it is likely the way it handles the matrix filter. For Safari and Firefox, it may have something to do with the way Windows deals with fonts compared to how Mac does. Maybe Chrome and Opera somehow bypass the rendering issue. I don’t know what’s up, but this and the other issues mentioned in the previous article suggest that, unfortunately, rotation of text is still not to the point where it can be indiscriminately used, and is best used in a way where the unrotated version still works fine, because that will need to be done for some browsers.

Developing with Desktop Paging and Multiple Monitors

in

At home I use desktop paging sometimes to separate tasks. Desktop paging is something from the Linux world that allows you to organize windows (and in Linux, desktop icons and other stuff) into separate “desktops”, showing only the stuff from the one desktop and allowing easy switching between them. Apple introduced this with their Spaces a point version or two of their OS ago, albeit in a less polished and functional way. When I began working at Cogneato, I began using desktop paging a lot.

For developing with desktop paging, I separated my desktops by task/application type. I develop mostly using four basic tasks: coding in a text editor; working with the image files that make up a design in Fireworks or Photoshop; viewing my sites in numerous web browsers; and looking up various information in a web browser. There’s also the frequent task of dealing with files in a file browser and occasional working in a CLI shell, as well as even rarer other tasks. My most used setup has a desktop for text editing, one for image editing, and two for browser testing and information gathering. The second browser testing desktop is not to split up browser use between testing and information gathering, but rather for testing Windows browsers in Parallels: I prefer to run it full screen rather than in native windowed mode. I develop first for one browser, Firefox, and then test in others, so I look up information related to a site in Firefox in a tab of the same window I have the site itself opened in, one window per project. This can get cluttered at times, with a lot of projects and many tabs for each, but at least keeps the information connected to the project. I assign each application to its designated space and usually keep them there. I also share the Finder, Terminal, and a secondary text editor (for notes mainly) between all spaces.

Continue reading post "Developing with Desktop Paging and Multiple Monitors"

Post-Suicide Q&A

in

It would be nice if you could field questions after killing yourself. Then maybe people could understand why and perhaps be better able to handle others in similar situations who might be considering offing themselves as well. You can write up all that you want before you off yourself, but you can never really know what people would actually ask or who would even be interested enough to ask. There are many nuances in conveying information, and you probably won’t be able to convey your messages in exactly the way that the people you are sending them to need them to be to truly understand what you are trying to say. There can be no follow up questions, which are usually very important for homing in on what the asker wants to know and the answerer wants to say. And of course there is no guarantee that the people who you are sending those messages to or who want to know some answers will actually read them. Reading can be quite tedious, especially the voluminous amounts that a suicidal has to convey and the great boringness it most likely has to most other people. It is, of course, also tedious to write, and you probably in the end just won’t right all you want to before you go through with it. Most people probably have some hope or feeling that it won’t actually happen, and the last bit where they are sure it will happen, they are in poor condition for writing profusely and well. There is, of course, no way to really implement this idea, just thinking.

Class Reunion: Ten Years

in

I had my high school ten year class reunion just on Saturday, for those of us who graduated from Woodridge in 2000. We had it at the Lion’s Lodge (or something like that, my first time there) in Cuyahoga Falls. It was organized by classmate Rebecca Gerstenberger (now Setty).

The turnout was very low. I think 10-15 classmates plus some spouses and kids showed up. That’s from a pool of around 91 classmates. I have to wonder how many normally come to these things. One made it from Texas, the rest were pretty local. There was even a girl from my brother’s class who’m I had worked with at the Lizard for a while and even went on GOBA with once, so in a way I knew her better than my classmates. She was married to someone from my class.

I did miss the “second part” of the shindig though, held at the Wing Warehouse or something like that. It was set up after the original event was and there were more likely other people there. I had to feed and walk my parents’ dogs though. They probably could have waited for me to at least appear for a bit at the second part: Oh well.

A few people I didn’t recognize at first (John Parker looks very different with short hair and beard and several more years), but most people looked pretty similar or just a bit older and more heavy set.

I got to talk for a bit with several of the people who showed up, but not in depth, and there were a number I didn’t talk to at all. With the ones I talked to, it was mostly a “hi there, what are you up to these days, I’m …” kind of thing, and then I fell back to my usual quiet sitting and listening. John Rummel happened to be a web developer like me, working with ASP.NET on a company’s intranet: I talked to him briefly about it, but not much more of a conversation than with others really. I guess developers don’t get together though for coding parties or anything like that. It seems like I won’t be seeing any of those folk for another ten years though. I might hear an occasional bit of news on The Facebook, but that seems to be it.

I was somewhat hopeful this event could change things. Seems like things are made to keep me on this path.

The Facebook With Friends

in

Only one day after my initial post about The Facebook, I got my first friend request. It was a Woodridge person, and one that I hadn’t talked to that much in the later years there (as if I really talked to anyone there much). Since that first “friend”, I’ve continued to receive a fairly steady stream. Most have been from Woodridge, but I’ve gotten one from my Tri-C days and one from my Winking Lizard days. Perhaps a that’s a sign of just how much less present I was after Woodridge.

I currently have 26 “friends” there. A number of them I haven’t even communicated with, just “friended”. Many of them, like my first “friend”, I hadn’t talked to much in the later years. I’ve had three people from another class and one teacher “friend” me even. I’ve made two friend requests now. One was after my recent high school reunion, where I saw my first real love, who I hadn’t seen in about six years. She said to contact her on The Facebook, so I did. The other happens to be another girl I was/slightly-am-still in love with from the Winking Lizard. I’m pretty sure she never wants to contact me again, but she was “suggested” by that Lizard person who did “friend” me. She hasn’t responded yet, and I guess I don’t get a message if she doesn’t want to be my friend: Oh well.

So far it seems like, for me anyway, The Facebook is a place where you contact old friends with brief messages of “how are you, haven’t seen you in a while” when you first “friend” them, then you probably won’t message them for a year or two. As I said, some I haven’t even contacted yet. I’m making it a point to contact everybody though, just at a comfortable pace. They shouldn’t be my “friend” if I don’t contact them at least once I’d think (probably more would seem most right).

I don’t know if this Facebook will really amount to anything for me. The discussions have been brief and mostly provided me with little hope of even increasing the number of people I regularly communicate with, let alone real world friends. One a number of recent events or things in my life I had hope for but have proven to just be the same old thing. I think the problem is me

The Facebook

in

I managed to make it for several years in the face of The Facebook without joining it while people all around did. With my lack of real life friends and of interest in an online social network, I saw no need. There’s also the privacy and security concerns. But in recent months I had some of my cousins and a few others suggest I join. Last week, a chance encounter with a former classmate from high school pushed me over the edge to finally join. She said she’d friend me if I joined, and our conversation was brief enough that I figured at that point joining might allow me to at least briefly reacquaint myself with her and perhaps other people from the past, who for all intents and purposes no longer exist. I didn’t join immediately due to apprehension about the whole thing and because I was fairly busy trying to spend time with my brother on his short visit.

I finally gave in and joined a few days ago. I gave my name and email address, then chose to delve deeper by providing my location, schooling and job history, and attempted to provide my favorite music, movies, books, and activities.

The Facebook now has a nice beginning understanding of Toby Mackenzie. However, none of The Facebook members do, at least not through The Facebook. I have no The Facebook friends. 0. This is, again, not too different from real life, but I was hoping to at least “friend” some of the folk who suggested I join. Unfortunately, I couldn’t find them. In searching for the former Woodridge friend who pushed me over that hump of joining, I found four people with that name, and based on photos, three definitely weren’t her and one as discernible as a shadow on the side of a tent, which is what the photo looked like. I could not find my cousins either, with similar results.

I did find some people I knew. The most recent was one of my teachers at Tri-C, but I don’t really talk to her anymore and knew her more in a school and web design capacity, maybe not the best first move into the “social” world that I envision “The Facebook” to be. I also found some other Woodridge people, but I haven’t talked to almost any of them in a long long time. I can still be shy on The Internet. There aren’t too many other people I could really look for. I found a handful of Winking Lizard people, but we didn’t get far in conversation even in real life (I guess that’s true of most everybody though anyway).

I did find my one most friend-like non-family friend, my former guitarist and multi-time roommate. I do still talk to him on the phone from time to time. I’ll let him “friend” me if he’d find that of benefit. I’ll let these people who know how to work The Facebook to handle the “friending”. Otherwise, I’ll see how long I can maintain 0 friends.

Besides for the friend bit, there really isn’t much of interest on The Facebook. There seems to be applications and games, but I have those outside of The Facebook. So far it’s not seeming worthwhile to have joined.

HTML5 href Anywhere Attempt

in

XHTML 2 was going to allow use of the href attribute on any element, allowing for block level anchors and eliminating repetition of the same anchor in some cases or unnecessary additional tags in others. This really made sense, since the <a> tag is just a span, but the only span with an added ability of linking to somewhere else. There is really no special semantic meaning to the <a>, and all links on a page could be found in parsing by finding tags with the href. In the early days of the development of HTML 5, the “href anywhere” approach was discussed, and I was excited thinking it was going to be part of HTML 5. At the time, that was the most interesting thing about HTML 5 to me. But “href anywhere” would mean all previous browsers would not be able to see links at all (besides for the ones put in <a> tags for some reason), so the idea was scrapped. Instead, the HTML 5 creators took advantage of an against-spec ability that current browsers already had: block level anchors. Browsers at least back to IE 6 will happily make “flow content” placed in an <a> tag into a link.

I was somewhat unhappy that we had to kowtow to current browsers by preventing such a wonderful ability as href’s on any tag, but the backwards compatibility thing is huge in real world development (though I would have just done some server side browser sniffing to output the <a>‘s in appropriate places for incompatible browsers) and the solution handles most use cases, though with a bit of extra markup. Over time, I began thinking that perhaps I could just use <a>‘s in place of any tags that have no semantic meaning (ie <div> and <span>), only using href when required and thus have href available most anywhere.

Continue reading post "HTML5 href Anywhere Attempt"
#Page top