Toby's Log page 98

Cogneato: Long Term?

in

Well, it seems like my job at Cogneato is likely to end up long term. Cogneato seems to be doing rather well this year, so Ron the owner thinks he will be able to keep me on long term. He is setting me up as the front end developer, as he finds me to be fast at the task. I take designs he’s done in Fireworks, slice them up, and convert them into HTML and CSS. I’ve done quite a few now, plus a few other things such as some set up on the CMS that will drive a couple of the sites.

I get to do the sites in modern HTML and CSS. I’ve only used a few tables for layout purposes (stuff I couldn’t figure out how to do cross browser without them), get to use PNG’s for transparency, and have been using the HTML 5 doctype. So far, every site has been at least somewhat different than the others, and most of them have required me to figure out something new. Some of the designs are fairly fancy. I find myself using a lot of extra divs/spans for appearance purposes only. It has been quite enjoyable. I test sites in Safari and Firefox (the newest versions) plus IE 6, 7, and 8. IE always gives me troubles. For IE 6 I am able to give them a simpler styled site, I just have to make sure it works, so I usually hide PNG’s and some other hard to deal-with elements. IE 7 usually isn’t too bad, and IE 8 usually works or mostly works with no special effort.

One site gave me a lot of trouble: DG Bar Ranch. It had a lot of the difficult things going on at once: drop shadows, gradients, boxes with variable height and width, a changeable part of the background image, z-index issues, all sorts of things. I took longer on that site than probably most of the others combined. The drop down menu’s caused me a fair amount of difficulty. I also had issues making the body background, composed of three separate repeating images, repeat properly while staying where they were supposed to. I couldn’t get the “position: absolute” to expand to the width of the body in all instances, but rather the width of the viewport, so I used “position: fixed” for one of them. I then, for IE 7, had to create two special divs to allow a background gradient fixed to the bottom to slide over a background image. The site isn’t up yet, but I can link to it when it’s up.

Anyway, I like the job and am glad it seems I will be staying on long term. I will try to post on some of the techniques I’ve learned along the way.

My New Computer

in

I had never owned a Windows or X86 computer (though I did borrow one from school for a number of months), yet it is very important, as a web developer, to test in IE. IE is of course discontinued for Mac, and has been for 10 years or something like that. IE happens to be the hardest browser to develop for, especially the dreaded IE6, and it (IE in general) still has the market share, so it is very important to test for. I recently got a job and some actual income, so I decided to buy something.

I’ve been considering getting a netbook for a while now to fill my IE needs. It would be relatively cheap, and would be awesome to have a tiny computer to easily carry around. I carry my iBook around a lot, but it’s big and heavy and I have to think if I really want it. The netbook I’d not really have to worry about so much.

I did a lot of research and looking into netbooks. I wanted a touchscreen one with good handwriting recognition, but the current attempts aren’t fully to my satisfaction. There are some new models expected to come out at some point, who knows when. So I could buy a cheap one use it for a reasonable amount of time, when better touchscreen netbooks are out, sell my cheap netbook. I’ve never really been a fan of frequent computer purchases, but I could try it. I could also buy one of the current touchscreen ones and hope it’s good enough for my needs.

At my job, though, I use a mac with Windows installed virtually with Parallels. It provides a fairly good workflow for testing, since I can test many browsers and code all on the same computer. There are a few issues, but for the most part I’ve liked it. So I got to thinking that I could perhaps upgrade my main computer rather than get an extra one. I could get a Macbook and Parallels and Windows. That would be pricy, but I’d have a much more powerful computer, only one to deal with, and possibly better workflow.

Continue reading post "My New Computer"

Samba: Site is Live

in

I’ve “completed” my first freelance project, the Samba Soccer Club site (sambasoccerclub.org No longer live). It went live almost two weeks ago. I’ve got my first freelance pay, and though I didn’t ask for much, they liked the site enough to give me a little extra. They were very nice to work with, a definite good beginning into the freelance world. I’ve hear plenty of stories about troubles with clients, but I had none. They will have me continue working on the site from time to time, updating it with new content, so I will have a little extra long term income.

The site has already made it to number one on Google and Bing for “samba soccer club” (not surprising), though not Yahoo. For the Stearns project, it had been Bing that was slow to find the site. I’m no SEO master, but hopefully we’ll be able to get decent rankings on “cleveland soccer club” or the like, things that people who don’t know about Samba but might want to would search for.

I’ve also set up my first Google Analytics account for the site. I’ve always just used apache log analyzers, such as awstats. I’m leery of the tracking implications of having so many sites with such tracking scripts, but I think the information will be useful for my clients. Google Analytics provides a lot of information in a fairly nice format. Some of the information, such as the detailed maps, I don’t get with awstats. I will have to look into a way to get my clients these stats, since the account is currently in my name.

Hopefully the site will work out well for them and make a good portfolio piece for me. I definitely learned a lot from the project, and hope my future projects go as nicely.

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"

iBook Audio Issue

in

After running the utility Onyx on my computer to both clean it up a bit and change some settings, I suddenly found my computer having some troubles.  Dialog boxes would just beachball shortly after appearing, and the applications that created them would have to be force quit.  After trying to change my volume, I noticed that something was wrong with my audio, so I turned off the text-to-speech I had set up for dialog boxes.  After this, the beachball problem stopped.

But I had no audio at all.  On further investigation, I noticed the OS was not recognizing any audio devices, input or output.  I found a forum thread discussing this issue.  I couldn’t find the cause, but I did find a solution.  I simply had to download Quicktime from Apple and reinstall it over my current install.  Since then, I have full audio and no problems with it, and no unusual beachballing.

I’m not sure what happened that caused this problem, but it might have been related to the permissions check Onyx does on loading.  I hope to avoid it in the future.  I will be more careful using Onyx in the future anyway.

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.