WWW posts page 36

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"

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"

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"

Cogneato: Lost a Developer

in

At my place of work, Cogneato, we recently lost one of our developers. It’s kinda sad because I talked to him the most out of the people there. I was also feeling somewhat comfortable with the number of people there. Sometimes I had to look for things to do, but now there will probably be more than enough for me. I will be taking over parts of what he did, so I will be doing more back-end type development. My job at RPM was much more in the back-end area, so it shouldn’t be much trouble. I will get to work on and learn about our CMS, which will give me much more knowledge about building them. I’ve been trying to build my own for a long while now, and this will give me a lot more capability to do so. They have been upgrading the CMS to use Qooxdoo, a framework for web applications, so I will be learning that as well. I’ll probably post some of what I learn with that here. Hopefully it won’t be too hard for me to jump into this upgrade in the middle of it. With this change, I will also be getting more of various tasks such as development type fixes and solutions for sites, upgrading the CMS for older sites, and dealing with server issues. And possibly I’ll move away from doing SEO and some other more front-end tasks. I’ll probably continue doing layouts, most likely handing them off to others earlier though, dealing less with the content and specifics.

Hopefully this change will work out for the better. And hopefully our lost developer will do alright wherever he ends up.

CSS3: Rotation

in

Continuing my adoption of new CSS3 capabilities, I’ve built my first site using rotation. CSS3 allows rotation of elements with the transform: rotate(); declaration. It is as simple as giving a value between the rotate parenthesis with a number and the unit deg. Positive values go clockwise, negative values counter-clockwise. I don’t think any browsers yet support the CSS3 spec transform property, so you must use the vendor-specific hack prefixed properties -moz-transform, -webkit-transform, and -o-transform. There is in fact a CSS3 proposed rotation property, but I believe that has no current support at all.

Then, there is IE. For IE, the matrix filter must be used. It, unfortunately, does not allow for nice degree values to be used and instead uses four numbers derived by some confusing math. I could not get Microsoft’s example script working, but I found this matrix rotation calculator to calculate the values and create the declarations. It shows that a similar matrix transformation is available in the transform property, but the value is more confusing, so I just used the rotate transformation for transform capable browsers. So for IE I must go to the calculator for every degree value of rotation I want to have. Somewhat of a pain, but at least it works.

The site I built is for Amy’s Shoes. The new version has not yet gone live, but I’ll link to it once it has [We no longer run this site]. The design utilized a lot of rotation, with many different elements rotated in different orientations. It also needed to be able to handle some dynamic and AJAXed content. I ran into a number of issues while building the site that are worth mentioning.

Continue reading post "CSS3: Rotation"