WWW posts page 38

Cogneato: Three Months

in

I’ve now been at Cogneato for a little over three months. It is definitely long term now. I am still liking it, especially since I’ve been branching out into other areas even more. I’ve been doing more programming in PHP and Javascript to set sites up and add functionality, and have even gotten to work a little with SQL again.

For example, on one site, called Pink Rave, I had to add blog functionality, which isn’t quite built right in like with WordPress. For the standard “archive” box, I had to make a bit to spin through all posts and chunk them based on date, then output the represented dates in the box. For the search functionality, Cogneato’s CMS has nothing built in, so I had to do custom queries. They are using the BLOB data type, so I couldn’t use the FULLTEXT searching, instead having to build concatenated LIKE statements. Luckily, the CMS can easily put the results of custom queries into its result objects, so it is easy to then work with them like I otherwise would. In fact, for this blog, I handle all multiple item listings with the same output script that just fills the object array with different data depending on the type of page.

Continue reading post "Cogneato: Three Months"

Haley Litzinger: HTML 5 Semantic Elements

in

It looks like I will not be doing at least the design for Haley’s site. She just got Adobe Suite CS3 and wants to make use of it. I will probably be helping her out at least some with it though, and we may even use her design on the WordPress site I built for her. We still haven’t met to discuss the details of this yet though.

Before I found out about her plans to build or at least design the site, I built a simple but functioning test site. In doing so, I made my first venture into using the new HTML 5 semantic elements. I used the Dive Into HTML 5 site along with a few others to learn how to use the elements. The new elements I made use of are “section”, “header”, “footer”, “nav”, “hgroup”, and “time”. There’s also the “article”, “aside”, “mark”, “figure”, “meter”, etc. tags, but I did not use them on this site. The Dive Into HTML 5 site describes the basic ones fairly well in brief.

Continue reading post "Haley Litzinger: HTML 5 Semantic Elements"

Javascript: Closures, Objects, and Timeouts

in

I recently discussed two issues with closures in Javascript. I continued to improve my menu script by fixing some IE issues, then I moved everything into objects. By moving to objects, I ran into another issue that was basically a combination of the two issues discussed in the previous article. I did not immediately realize this however, for whatever reason, and spent some time figuring it out.

The issue was with setting a timeout that calls a method of the object the timeout is set within. The method is attached to “this”, but “this” changes scope in a “setTimeout” call (“this” becomes “window”). To pass the appropriate “this”, we create a variable pointing to this and then pass it to an anonymous function that returns another anonymous function which uses are pointer to “this” to call the desired method. Since my “setInterval” was attached to an event listener, it also had to be placed inside of the double anonymous function. It looked something like this:

class.prototype.functionName = function(argElement){
    var fncThis = this;
    var callback = function(fncThis){
        return function(){
            fncThis.timeout = setTimeout(function(fncThis){ return function(){fncThis.classMethod(); };}(fncThis) ,750);
        };
    }(fncThis);
    argElement.addListenerEvent("touch", callbackMouseout, false);
}

This was the only major issue I had putting my code into objects. The last time I had tried something similar, I had given up dealing with the timeouts, but this time I had more experience. Now I have nice, reusable OO classes for suckerfish menus, etc.

Javascript: Closures, Scope, and Arrays

in

Closures are used quite frequently in Javascript for tasks such as adding event listeners or setting timeouts on function calls. Closures are where a function is passed as a parameter to a function call from another function, and variables from the calling function must be used inside the parameter function. Dealing with scope in closures can be difficult, and I’ve spent a lot of time figuring issues with them out.

An early issue I ran into with scope, and a common one, is the loss of scope of the “this” keyword in the closed function. For example, you might want to do a setInterval that references the object that created it. To do so, you can simply create a variable pointing to “this” and then use that in the closed function, like:

class.prototype.thefunction = function(){
    var fncThis = this;
    setInterval(function(){ fncThis.doSomething(); }, 1000);
}

This is also a common problem with event listeners, where “this” might be hoped to point to the element the listener is related to, but doesn’t.

Recently, I ran into a closure problem while revamping the menu script we use at Cogneato for suckerfish menus from the old MM functions to something more capable.

Continue reading post "Javascript: Closures, Scope, and Arrays"

Haley Litzinger: New Site for an Old Friend

in

It just so happens that Christian Bryant, a previously former friend of mine from my Winking Lizard days, lives almost right across the street from my new place of employment at Cogneato. And it also just so happens that his girlfriend is another previously former friend of mine named Haley Litzinger. She went to school with me in my Woodridge days, was in my class, and we were two of the three percussionists from our class in the school band. We also had seen each other a bit in college at Kent and then on very rare occasions after that. I saw Haley drive by after work one day, found her email address on her website, and emailed her.

Haley is trying to make a career as an artist, a notoriously difficult task. She does these very interesting paintings that are composed of multiple layers by painting on and combining layers of a transparent substance resembling glass. They are very interesting to look at, and she has sold quite a few over the years, but not enough to make a living or a name for herself. She built a website (the one I found) to more easily show her work to clients or galleries. She’s no web guru, so the site currently looks sub-par, unpolished, and is missing a lot of content. It also has a splash page and second home page that takes forever to load and site navigation only on the home page.

So I offered to help her fix up the site. After talking about the project, I will be creating a new site for her from scratch. It will be a very simple site, so it will probably not take long at all. Even though it will only have four basic pages/sections, the gallery section will have a lot of individual images, each with their own page. I decided to use WordPress because of the images, giving me a fairly powerful image management admin section without much effort. To make it more interesting for myself, I decided to delve a bit deeper into HTML 5 for the site. I will likely post about this soon.

I hope that I can provide her a better and more successful site. She wants it to be very simple design-wise, but I hope I can give it enough substance to give it a more clean and professional look.

Formatting Dates in Classic ASP

in

During my internship at RPM, we used classic ASP for server side scripting rather than the PHP I’m more used to. Classic ASP is missing functions for formatting dates, like PHP and *NIX shell have, for instance. SQL Server has the CONVERT function, but only has a limited number of output formats, at least for the older SQL Server version we had: Otherwise, it would be more efficient to format the data as it is coming from the database . I built two functions for date formatting based on the PHP and *NIX “date” formats for use on the HSGA site, where I had to format dates a certain way for a project. I don’t remember if I used it on other projects, but I think so.

Both functions take two parameters. The first is a date, as would come from a SQL Server “datetime” field. The second is a string that defines the output format. The first function uses a format string like the php date function. The long function is as follows (tabs are double spaces due to the width and length of the content):

Continue reading post "Formatting Dates in Classic ASP"

Cogneato: SEO

in

In addition to my front-end development at Cogneato, I’ve begun doing site SEO.  I’ve always done the very basic SEO that comes from clean HTML structure with descriptive content and basic accessibility considerations as well as simple but descriptive URL structures.  However, for Cogneato, we are going much deeper than that.  It’s a good opportunity to learn more of this SEO stuff, but so far I haven’t liked it that much.  I’d much rather be cutting up layouts or programming or working with data.  The SEO can be very boring.  For instance, setting up and monitoring rankings for a big list of keywords can be boring and tedious:  Perhaps it will be more interesting when I’ve gotten to look at trends and use that information to modify things.  There’s also stuff I don’t like about it in principle.  Throwing keywords into title tags, headings, and alt text can potentially go against usability and accessibility (the blind love keywords repeated over and over).  We aren’t nearly doing the blackhat type stuffing with bunches of keywords stuffed everywhere, mostly just one per area, but I still don’t like it or having to figure out creative ways to make it work and make sense.  Also figuring out ways to put in different phrasings of the same basic keywords isn’t fun, and can potentially make a site look less professional in my opinion.  I’d much prefer all this happening in the copy, as there as a lot more room to work it in without it being so glaringly noticeable.  And I don’t like moving away from semantic structure for search engines.  I did a FAQ with li’s, h2’s, and div’s rather than dt’s and dd’s.  I’m not sure what the “best practice” is for that, but the dl seemed more appropriate to me than the ul.

Still, I think I’ve learned a good starting bit about optimizing for search engines and will continue to learn more, which will be very useful for my own sites, even if I don’t go all out with them.  I’ve been doing some research and watching some Lynda courses on the subject, which has helped a lot with learning some best practices.

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.