WWW posts page 36

Synopsis 2011

in

Haven’t been posting much at all, but I’ve not been working on web stuff any less. I’ll give a bit of a synopsis of what I’ve been doing. This year I’ve been doing less new and interesting with HTML and CSS and more with JavaScript and PHP and database stuff, particularly the last several months. We’ve had one rather large project that requires mostly work in those areas. We are building a system that will use a JS heavy admin area based on Qooxdoo. The public side will use Symfony 2 with Doctrine for managing data. All three of those I’ve never worked with before and have had to learn as I go.

Qooxdoo is a full framework for JavaScript with a class system and a bunch of widgets that make working with it sort of like programming a desktop GUI application. It really extracts away from HTML/CSS and it can be frustrating knowing how to do something easily with those but not being able to use them. I don’t care for the abstraction, and it would be unfeasible to build a non-JS compatible app with this approach. I do like its class system quite a bit though. It has a lot of features and gives a lot of functionality for free, such as firing events on property change and easy access to parent methods. I’ve been working on my own class system and would like to incorporate some of its features.

Continue reading post "Synopsis 2011"

Givecamp 2011

in

Last weekend I went to GiveCamp in Cleveland. GiveCamp is a weekend of developers and designers building sites and applications for various charities. There were like 202 people there, working in the Lean Dog boat and in the hallway of Burke Lakefront Airport. There were 22 charities, each assigned a team appropriate to their needs. 21 of the projects were completed or nearly so in the one weekend allotted.

My project was Cleveland Carousel. My team also included a designer named Greg and another developer named Jon Knapp, who kind of managed the project most of the time. We had continuous help from at least one of the Cleveland Carousel people at all times. We also had a couple dedicated project managers come help us out for a little while as well.

The clients had a simple WordPress site in running with four pages, but they want something with a lot more content and pictures and a custom design. They came well prepared with a detailed plan of what they wanted, allowing us to move quickly with our small team. They worked with Greg to come up with a design, worked to put all of the content in place, and gave us continuous feedback as we built the site.

Continue reading post "Givecamp 2011"

Animation queue management for jQuery

in

jQuery makes it fairly easy to animate DOM elements. Animating a single-step animation on one or more elements is simple with the call of the animate method. Multi-step animations can be more complex because animations are run asynchronously, meaning that they will start running when called but the script will continue onto the next step before the animation is done. For these, jQuery has the ability to queue steps. jQuery automatically queues multiple steps on a single object and dequeues as each completes, so you don’t have to worry about managing things and setting up callbacks. But for more complex animations where multiple elements are animated at different times or other functionality must be performed after an animation step, there is no automatic queuing.

A common practice for simple queuing is to use the “complete” parameter of the animate method or of other similar asynchronous methods that is a callback to be run when the animation is finished. This works nicely when there are a few steps. It becomes more unwieldy though the more steps you add. That is where queue comes in, allowing for adding of as many steps as you want without having to nest in callback after callback.

Continue reading post "Animation queue management for jQuery"

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"