WWW posts page 39

Cogneato: A New Job

in

Yay! I finally found a job. After six months of no income, I needed it. I’m doing front-end development for Cogneato, a small web development firm in Akron. They’ve done quite a few sites over the past decade, and have their own CMS/CRM they’ve built over that period. It’s pretty neat, allowing for some complicated things to be done with data and interesting features for managing customer information. It has many fancy AJAX features in the administrator interface. There have been seven people working there, and another one is coming soon. I only get to work on the front-end though.

Cogneato is only a 20 or so minute drive from my house. The atmosphere is very casual (hoodies instead of ties) and relaxed, very comfortable to work at. The owner and all the employees have been very nice.

Continue reading post "Cogneato: A New Job"

WordPress: Shortcodes

in

I’ve been playing with shortcodes in WordPress. They provide a nice way to allow the client to insert certain content without them needing to even deal with HTML, such as predefined pieces or wrappers with specific classes or structure. They are the only way to effectively run PHP functions from within a page without actually allowing PHP code to be run. This can allow pulling things from data, such as custom fields or from Pods CMS. The built in shortcode, for instance, pulls image data from the database about images connected to a post.

It’s very easy to add a shortcode. You create a function that does what you want and returns a string to output in place of the shortcode then use the add_shortcode() function of WordPress to attach it as a shortcode. The function is done like:

function repFunctionName($repArguments, $repContent=null){
    return "some string";
}

$repArgument is an array of arguments passed to the shortcode like:

[repShortcode repArgument1="value1" repArgument2="value2"]
Continue reading post "WordPress: Shortcodes"

TMCom: Image Hotlinking

in

I’ve had a site pulling one particular image from my site. It gives no referrer and the user agent “Mozilla/4.0 (compatible; MSIE 6.0)”. It has the IP 76.73.76.130. I wasn’t sure what it was at first, and figured it might just go away. But it hasn’t and is asking for the image a few times a day, 93718 bytes each request. Not a huge bandwidth pull, but annoying.

The image is a picture of an album cover for a site that I had built for the band I was once in, The Yars. The site is being “syndicated” on my site for portfolio purposes.

I finally tracked down the site that is pulling the image: mpcodex.com (multiple sites are hosted from that IP). I’m not totally sure what the site is about, but it really had nothing related to the yars, other than that an empty image box (can’t see it, but it still seems to pull from my server) and the phrase “Yars CD Release” will show up with a search for “Yars”. Clicking on the image goes to mp3logy.net, which pulls the image from my site as well, but sends the IP and other info from the visitor, not the host.

This doesn’t seem that important to me, so I decided to prevent mpcodex from pulling the image. I know that I could do something more advanced to prevent hotlinking in general, but that hasn’t been a problem yet and I don’t want to worry about missing image search engines. I’m just blocking that IP from that particular image using my .htaccess file with mod_rewrite:

# block mp3codex.com
RewriteCond %{REMOTE_ADDR} 76.73.76.130
RewriteRule ^portfolio/siteRepository/yars/images/general/2.jpg$ - [F]

This took me much longer to set up than it should have, partly because my test server (my iBook) and my production server seemed to be handling things differently. I could have just used a “Deny” rule to block the IP altogether, and probably would be fine since it’s undoubtedly just a web host that would not have human visitors anyway, but I’d rather be safe for now.

I’ll watch this to make sure it actually works and that I don’t have any more problems. If I do, I’ll figure out what to do then.

TMCom: Now Real XHTML 5

in

As mentioned in a previous post, my site has gone to the HTML 5 doctype. I had come from XHTML 1.0 and wanted to continue with the XML syntax of HTML 5, but my site wouldn’t validate with the XML declaration. I recently remembered that I had been serving my site with the mime-type “text/html”, which is allowed in XHTML 1.0 transitional. HTML 5 got stricter, and if you want to use the XML syntax, it must be served as “application/xhtml+xml” or “application/xml”.

So I modified the doctype switcher I had made (mentioned in that previous post) to change the mime-type to “application/xhtml+xml” when the configuration doctype was set to “xhtml5”. But IE evidently cannot handle that mime-type, so I set up my switcher to output as “html5” for IE, but “xhtml5” for other browsers. I reset the doctype variable (now an attribute of a page object):

if($this->doctype == 'xhtml5' && strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE'))
    $this->doctype = 'html5';
Continue reading post "TMCom: Now Real XHTML 5"

Samba: Mockups in HTML

in

In building a website for a client, one usually builds clients, one usually builds a few mockups with different themes to give the client an idea of what the site will look like with one of a few options. They can tell the designer what changes they want, which can be made relatively easily to the mockup before the theme is actually built for the site.

The mockups are supposed to be quick and easy to build and modify, allowing designers to avoid dealing with all of the nuances of CSS and HTML at this early stage. Designers shouldn’t be held to any limits at this point: They design what they think the site should look like, and figure out how to build it later.

Traditionally, this might have been done in Photoshop. The layout would later be cut up and positioned on the site with CSS. I did three mockups for the Stearns Homestead project in Photoshop. They were a pain, with maybe a hundred layers to handle two pages of the site for each mockup. Managing multiple elements of the same type is not easy there. Photoshop doesn’t allow any easy management of multiple blocks of typography at once, so changes are difficult. Now that I’m not using school computers, I don’t have access to a newer version of Photoshop, and none of my image editors have layer folders or some other useful features, which had helped me out a lot.

Continue reading post "Samba: Mockups in HTML"

Lynda: Web Accessibility Principles

in

I’ve completed another Lynda course, Web Accessibility Principles by Zoe Gillenwater. This course was well put together, had a lot of good information, and should be very usable, though it perhaps had a lot of repetition (to give a feeling of what screen-readers must go through?) and pacing issues. It also, perhaps due to its age (from late 2007), missed some techniques, such as pure CSS drop-down menus.

As I watched it, in addition to taking copious notes, I stopped from time to time to implement some of the practices on my own site(s). For instance, I added a class for content that will benefit screen-readers but not be that useful to or possibly bother regular sighted visitors:

.screenreaderOnly{ position: absolute; margin-left: -9000px; }

I had been using “display:none;”, but evidently screen-readers hide that content as well. I added some screenreaderOnly headers in my navigation and footer since screen-readers provide easy navigation by header. I also created a skipToNav link (my nav is below my content) using the hiding technique above, but also used “:focus” and “:active” (for IE6) to allow keyboard users to access it:

<div id="skipToNav"><a href="#navigation">Jump to navigation</a></div>

and:

#skipToNav{ z-index: 3; position: absolute; top: -20px; left: 60px; }
#skipToNav a{ position: absolute; left: -9000px; }
#skipToNav a:focus, #skipToNav a:active{ position: relative; left: 0; }

I also added a few Firefox Extensions for accessibility purposes. Fangs writes out pages as text similarly to how they’d be read be a screen-reader. I had been using Lynx to see my pages rendered text-only, but hadn’t realized how much other stuff gets read out. Colour Contrast Analyzer and WCAG Contrast Checker both allow checking of page color contrast of individual page elements to make sure visually impaired folk can read text. They do things slightly differently, and both seem to show background-foreground pairings that don’t exist on the page.

I’ve done some other stuff to improve my sites accessibility, but plan to do more when I have free time. I will go through those accessibility checkers and attempt to move as close as I can to being compliant with them. As I start to implement this stuff on my own site, I will be able to more easily implement it on other sites I build as well. This will hopefully be helpful in getting a job as well.

TMCom Goes HTML 5 (Doctype anyway)

in

I’ve finally joined the bandwagon and moved my site to the HTML 5 doctype. It is much simpler than previous doctypes:

<!DOCTYPE html>

breaking away from the SGML standard of including a reference to the DTD for that doctype. I’m not sure how this will play out as HTML moves beyond 5, but I’m sure it won’t be a problem for a while anyway. And hopefully with all this time they are taking to finalize the specifications, we won’t have problems with backward compatibility, future expansion, validation of old documents, etc.

Anyway, I had considered using the doctype a while back but abandoned it for reasons I don’t remember. The “role” attribute, which I first noticed in WordPress themes, is what got me to consider HTML 5 again. It offers potential accessibility benefits to user agents that know about it by specifying what an elements “role” is in relation to its document: navigation, banner, main, contentinfo, etc. HTML 5 offers elements with similar meanings, but they are not supported well. The attribute is not valid in XHTML 1 (it was proposed for XHTML 2, which never came about), and my attempts at an alternative doctype failed.

Continue reading post "TMCom Goes HTML 5 (Doctype anyway)"

WordPress: Comment Approval Email Address

in

[Update 6/11/2009] See comments for resolution of this issue.[/update]

Had a weird problem that might point to a weird semi-bug of WordPress.

I just recently received an email asking me to approve a comment on the Stearns site. I haven’t touched the admin part of the site in two months. We had set them up to need to approve every comment, and to have WordPress email the administrator whenever a comment was submitted. When I left I had made sure the address in the >Settings>General pane was set to one of the Stearns people, and it still is. This is the address I thought would receive the comment approval mailings.

I went looking for information on where the address for comment approval mailings is pulled from. According to this thread, the mailings are sent to the address of the “admin” account. I had deleted the “admin” account for security purposes (getting rid of a known user name) and may have transferred that account’s posts to mine. Or maybe it’s because my ID is the next closest to zero. So my account may be considered the “admin” account now.

The other possibility that I thought of is that the mailings get sent to the post author. I’m set as the author of the post the test comment was set to and a number of others. I would have to change them all over to one of the Stearns people if this were the case.

Choosing the easier solution first, I changed the email address of my account to that of one of the Stearns people (modified with the “+” syntax to avoid duplication). I did a test comment on the same post as the previous one was sent to and did not receive an email, so the suspicion of that thread may be correct (have to verify with the Stearns people).

I think that is a silly place to pull the address from if true. It would certainly make sense to have this settable and not tied to one particular account. The comment moderator might not necessarily be the “admin” user, as with Stearns. It doesn’t seem to be unreasonable to have the comment approval mailings sent to the same person who receives mailings about user registrations (the one on the “General” tab). Or, to be a bit more fancy, either have a separate address or user set for comment moderation on the >Settings>Discussions pane.

I’ll update this post if I find out more.

[Update: 6/10/2010] At this point I am thinking that the author of the post receives the comment approval emails, as it would certainly make the most sense. For the Samba Soccer Club site I did a while back, I received a comment approval message for a post I wrote as myself rather than admin. I do have the lowest current ID, so that can’t be ruled out, but it really doesn’t make any sense for that to be how it works. I’ve realized that my changes on Stearns shouldn’t tell anything, because the lowest user id and post author are both the same for the relevant posts.[/update]

The Case for DOM Element Insertion With CSS

in

CSS provides the “content” property for inserting content into documents, usually before or after elements. This can be bad if the content inserted is not strictly for presentational purposes, but when it is, it can be a very useful tool for changing a sites appearance with only CSS.

The property can be used to insert strings, images, even counters. Unfortunately, DOM elements cannot be inserted. Why would you want to insert DOM elements? Doesn’t that go against the separation of content and presentation even further than the “content” property already allowed?

Ideally, in marking up a document, one should not need to consider presentation at all, only the proper elements to stick a given block of content into. The CSS would be created separately and form those elements into any appearance desired. There are a lot of reasons this can’t currently be done, including sort order and hierarchy. Another is the limit of what is available to be styled in the HTML document.

Continue reading post "The Case for DOM Element Insertion With CSS"

Officially Done With School

in

Finally, after two months, I’ve got real word from Tri-C about my graduation. They sent me a congratulation letter and transcript. The letter verifies that I have completed my degree. It also explains that, indeed, they have just one ceremony in May. I will not receive my actual diploma until June, but I’ve got this letter until then. The transcript finally tells me my GPA, which is 3.93. I had been listing it as 3.8, the last verified number I had.

What can I do with my two degrees? Hopefully something that involves monetary compensation. Hopefully at least as much as I made as a line cook.