WWW posts page 37

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"

PHP: Outputting Lists in Arbitrary Number of Columns

in

For lists of narrow pieces of content, it can make sense to put them in multiple columns to better use available space. For things like image galleries (a list of images), where it tends to be easier to read from right to left, or when order is irrelevant, it is easy to turn a regular list into columns (like a grid in the case of the images) by simply making each item a fixed width and height and then floating the items left. This works fine back to IE6 and remains fully semantic and accessible as one list.

Text lists tend to be easier to read top to bottom though, so when they are in alphabetical or some other important order, it is generally better to order them top to bottom in each column. I haven’t delved into the CSS3 multi-column layout abilities yet, as that is not widely supported (especially no IE). The float item method cannot be made to appear in the proper order while truly keeping the items in proper order in the list for accessibility and semantics, and putting the data in the proper improper order to make that work would be complicated anyway. The only real way I am aware of to currently make the columns be in proper order is to separate the list into a list for each column and then float each column left. This is not ideal semantically and for accessibility, but will still read in the proper order for all users.

Continue reading post "PHP: Outputting Lists in Arbitrary Number of Columns"

Javascript: Objects and Callbacks

in

I’ve been doing my JavaScript coding directly in objects. Before I had been doing them without objects, then modifying them if I had time, but now that I have experience with JS objects, it is much nicer to do the OO straight off. When making objects that are versatile, allowing multiple instances, it is often necessary to be able to perform different operations for different instances. As an example, you might create a single class to handle auto-suggest type functionality, and want it to do different things when you choose one of its suggestions or cancel for different instances of its use. In JS, you could either create forks in the parent class for each possible behavior and use a test to determine which behavior is appropriate, or you could create a callback on instance instantiation or in a function call. The callback method can be very versatile and clean, allowing you to leave alone the core class and modify the calling class or global call.

Continue reading post "Javascript: Objects and Callbacks"

Piwik and XHTML 5: Document.write and Noscript

in

I’ve been using Piwik recently for my site analytic purposes. I added it to my “professional” site, which is served as XHTML 5 for anything but IE. On that site, no visits were registering, though awstats showed that there were visitors. As it happens, this is because the javascript “document.write” is not allowed in XHTML. I believe older versions of XHTML still allowed it to be run, but it certainly wasn’t being run on my XHTML 5 site. Firefox showed an error in the console. This is mentioned on the WHATWG’s page about the differences between HTML5 and XHTML5.

The Piwik community doesn’t seem to have much mention of this, other than one mailing list thread. I modified the script to something similar to the one in that thread, like this:

Continue reading post "Piwik and XHTML 5: Document.write and Noscript"