Toby's Log page 95

My Javascript Practices

in

It has been quite some time since I’ve posted anything, but I certainly haven’t stopped building websites. One thing I like to find out from other developers is how they do things so I can compare them with what I do and take anything that I like of theirs better, so I’m going to share some of my current practices. I’ll start with javascript, since I just built a javascript heavy site and want to share some more specific javascript stuff in later posts.

Base Library

To begin with, I use a namespace to store all of my javascript variables/objects in. This doesn’t pollute the “global” window object with many variables and drastically reduces the possibility of collisions with other libraries. Since javascript has no actual namespaces, but it does allow for generic objects and the ability to add arbitrary attributes and functions to them, I just create an object and add everything to it. I use __ because it is small and quick to type, can’t really be given any meaning based on the name, and probably won’t be used by someone else.

The only other thing I put in the global namespace is the base object type I instantiate that variable with. I did this as an object so I could conceivably create multiple instances and so that I could declare it later in the file and have all of the site specific code at the top. I call it tmlib since it is my library. So a bare instantiation might look like this:

if(typeof __ === 'undefined') var __ = new tmlib;
__.cfg.whatever = "whatever";
__.scrOnload = function(){
    doSiteSpecificSomething();
}
/*----------
©tmlib
---------*/
function tmlib(){
        this.classes = {};
        this.lib = {};
        this.cfg = {};
    }
    tmlib.prototype.addListeners = function(argElements, argEvent, argFunction, argBubble){
        var fncBubble = (argBubble)?argBubble : false;
        if(!__.lib.isArray(argElements)) argElements = new Array(argElements);
        for(var i = 0; i < argElements.length; ++i){
            var forElement = argElements[i];
            if(forElement.attachEvent)
                forElement.attachEvent("on"+argEvent, argFunction);
            else
                forElement.addEventListener(argEvent, argFunction, fncBubble);
        }
    }
/*--init */
__.addListeners(window, "load", __.scrOnload, false);
Continue reading post "My Javascript Practices"

Taxes: Income Tax Simplification of Forms

in

Usonian income taxes are crazy complicated and a pain to deal with. They shouldn’t be, especially for normal people: Only people performing complex income related activities should have any need for a tax accountant. There are so many modifiers to promote certain behavior and demote other, but it is very inconsistent and confusing and irrelevant stuff often has to be read through by people for whom it doesn’t apply. Promoting behaviors is good, but it needs to be simplified drastically.

Continue reading post "Taxes: Income Tax Simplification of Forms"

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.