Aaron T Grogg

Hi and welcome. My name is Aaron T. Grogg. I define myself as a son, brother, uncle, husband, thinker, dreamer, reader, writer, bicyclist, hiker, environmentalist, humanitarian, lover of the arts and music, web developer, and of course, all-around computer geek.

Born just outside Pittsburgh, Pennsylvania, I moved to Hawaii after the seventh grade, to San Francisco, California when I turned 21, then to Washington, DC for a few years and now live in New York City.

My web development career began in 1998. Believing strongly in a standards-compliant, progressively-enhanced, accessible web, I specialize in hand-coding XHTML, CSS, JavaScript, jQuery, Ajax, JSON, XML, Microformats, PHP, MySQL, WordPress, ASP, VBScript, SQL Server. I have also studied and implemented web optimization and search engine optimization techniques on both small, personal websites and large, commercial websites.

Additionally, I am fluent in the entire Microsoft Office suite, including Word, Excel, Access, PowerPoint, and Outlook, especially the integration of these components.

I love finding, and experimenting with, new ways of making the web a better place.

Check-out my resume site at LinkedIn.

I would love to hear from you, whether you would like to offer me a job, have a question about how I did something, or have a better way of doing something I did:
Email: aarontgrogg@yahoo.com

In an attempt to hurry and get something live on the web, I quickly grabbed what I think is an okay-looking WordPress template, but it reflects neither my work nor my work-ethic (read: I have no idea what the code of this template nor its plug-ins looks like).

If you would like to see my work, please check-out my Portfolio page (which, itself, is rather limited right now… :-))

I am in the process of adding posts from earlier dates, they will appear below in the order in which they were written.

Anyhow, thanks for visiting, of course, and please let me know if you have any questions on anything.

Ciao,
Atg

Resume

So, you been around the block several times with your client, you’ve confirmed all designs and layouts, you’ve double-checked all the functionality of your newest creation, and now you finally have the okay from the client to launch the site, to finally say to the world “here it is, all my blood and sweat, come and behold!”

But what if no one hears you?

Well, Google Webmaster Central is just the place to help avoid that happening: http://www.google.com/webmasters/

To me, it is one of those rare sites where literally clicking each and every link really makes sense. Everything from adding your site to Googlebot’s “to-do” list, to uploading a sitemap to help Googlebot find all your pages, to verifying that all the links on your pages actually go to something, to more advanced stuff like adding Google Analytics (to prove people are seeing your creation) and AdWords (why not make a buck or two from your site’s visitors?). And perhaps the greatest gem of them all, the Google Webmaster Central Blog, where the brains-of-the-brains chat and trade thoughts, ideas, and suggestions with the likes of people like me! Go figure!

And while I am not into building a site based on someone’s libraries and tools (I like to know what my stuff is doing and how it is doing it), Google also offers a plethora of Gadgets and APIs to help developers get somewhere more quickly (and probably more efficiently).

So, if you haven’t been yet, go spend a few clicks at Webmaster Central. I guarantee you’ll pick up something new, or your money back! *

Have fun,
Atg

* Since visiting Google Webmaster Central costs no real money, all refunds will be for the same value.

Development, Google, Tip

Have you ever looked at the Properties of a Bookmark in Firefox? You see the “Name”, “Location” and “Description”, which are all pretty self-explanatory. Ever wondered what the “Keyword” thing was all about? I know I never did. I just figured it something that Firefox thought might be useful someday, perhaps if I uploaded my list of Bookmarks to some website somewhere.

However, it turns out that this little field is fantastically powerful! Try creating a new Bookmark in Firefox (perhaps http://www.google.com/), then opening the Properties and adding a Keyword for that Bookmark (perhaps “goog” (without the quotes)).

Now, still in Firefox, open a new Tab (Ctrl+T will get you there quickly).

Notice how your cursor is automatically in the Location bar? Try just typing “goog” (again, without the quotes) and hit Enter.

Find yourself staring at the oh-so-familiar website called Google? That’s your Keyword at work!

So, while the process of adding Keywords might seem a little laborious, you can easily see how powerful it can be!

1. Ctrl+T
2. Keyword
3. Enter

That’s all it takes to get you to any of your favorite website!

Thanks to Josh Hoeltzel for pointing-out this powerful tool to me!

Atg

Firefox, Tip

So, this seemingly-harmless line in the Google blog (http://googlewebmastercentral.blogspot.com/) sent me merrily tangenting this morning…

In the post titled “Design patterns for accessible, crawlable and indexable content” (http://googlewebmastercentral.blogspot.com/2008/05/design-patterns-for-accessible.html), under the section header titled “CSS sprites and navigation links”, I read this little phrase, which, for some reason got me thinking…

It’s still possible to include that all-important descriptive text when applying CSS sprites; for a possible solution, see how the Google logo and the various nav-links at the bottom of the Google Results page are coded. In brief, we placed the descriptive text right under the CSS-sprited image.

So, they’re talking about making sure you add the TITLE attribute to links and the ALT attribute to IMGs, and this is something I was talking about the other day with a couple cohorts at work.

As opposed to doing the old “background-image:url(blah.gif);text-indent:-9999px;” (which doesn’t seem to work very well when things are float:left;, I was suggesting placing the text you want replaced inside a SPAN or something and doing “background-image:url(blah.gif);” to the SPAN’s parent container and “position:relative;z-index:-1;”, which moves the text behind everything but leaves parent’s background image shining through (I don’t propose that this is any better for SEO or anything, it is really just a different way to do the same thing, but it DOES happen to work for float:left; situations).

So here’s where Google’s post comes into play…

Here’s the HTML for the search results page they reference in the blog post:
<a id=logo href="http://www.google.com/webhp?hl=en" title="Go to Google Home">Google<span></span></a>

You see that empty SPAN after the word Google?

Now here’s the CSS that is applicable to the logo:
#logo span{background:url(/images/nav_logo3.png) no-repeat;height:26px;overflow:hidden}
#logo{display:block;height:52px;margin:13px 0 7px;overflow:hidden;position:relative;width:150px}
#logo span{background-position:0 -26px;height:100%;left:0;position:absolute;top:0;width:100%}

So, with just a tad extra HTML, they make the A display:block;, height:52px;, position:relative; and width:150px; so that it is a nice solid RELATIVE rectangular container the exact size of the Google logo, then give the SPAN the background image of their logo and position:absolute; top:0; so it slides right into place OVER the text “Google”…

Go ahead, search for something and turn off the images. The word Google is still sitting right there waiting for you.

Try THAT with text-indent:-9999px;… (or z-index:-1; for that matter… )

Have a shiny happy morning, everyone,
Atg

Accessibility, CSS, Google, Tip, Web Standards

http://www.sitepoint.com/books/javascript1/

As an ardent reader of SitePoint posts (and someone having a good bit of difficulty wrapping my head around Object-Oriented JavaScript (OOP), and usually finding SitePoint to be a great, easy-to-understand site for “getting” new concepts), I was extremely excited while awaiting delivery of this book.

While the book certainly does explain concepts well and does cover the basics of JavaScript (JS) well, I was a little disappointed to see the entire catalog of examples depend on SitePoint’s JS library, “Core”… For example, every function that they write includes a method “init” and is initialized using “Core:start(functionname)”. I would much rather have seen a beginner book actually explain to people how to do things, rather than how to avoid doing things…

To me this is akin to learning to ride a bike (but your father never taking the training wheels off!). In the shop where I work, thus far at least, we have chosen to not use any JS libraries; what happens when a reader of this book walks into such a shop and wants to download core.js to the web server? They are likely going to be asked what the heck they are doing…

I believe an old adage applies here: “you have to learn the rules before you can break the rules”… Ok, so using a library is NOT breaking the rules, but a developer really should learn how to initialize functions on their own before they start using a library to do the work for them.

Another chapter that I was really looking forward to was the section on debugging, including the brilliant Firefox (FF) add-on, Firebug (http://www.getfirebug.com/). Now, for the longest time I simply could not find the use of Firebug (go ahead, finish gasping for air, I’ll wait…)…

Better? Good.

My problem was that the add-on is so robust, that I had trouble figuring out exactly what to do with it. I already had the equally-brilliant Web Developer toolbar (http://chrispederick.com/work/web-developer/), which did a really fantastic job of dealing with my CSS issues (among numerous other incredibly powerful features), so I just didn’t see the need for Firebug (plus, I wasn’t exactly writing scripts that were all that difficult to debug the “old-fashioned way”…).

By the time I ordered and received this book, I was much more accepting of Firebug, using it daily for Stepping Into and Over all kinds of things in JS, but I was still certainly no expert on the add-on, so, I was really looking forward to an entire chapter on Firebug! I was a little disappointed to fins them really only cover the viewing abilities of the Console and how to set and walk through Breakpoints… I realize this is a beginners JS book, but I would argue that they are the ones that will need this tool (and need to understand it) the most.

At any rate, I did enjoy the book. I have always loved the way both Kevin and Cameron write, and what they wrote was certainly easy to understand and follow (though I am still looking for the perfect-for-me OOP description/walk-through). I am just not completely convinced that this is a great beginner-level JS book, and do not feel it is quite right for the intermediate-level either; it seems somewhere in between to me…

That’s what I think, anyhow…

Atg

Book, Development, JavaScript, Review

High Performance. What does that really mean in the web world?

Well, if you’re a developer, you might be thinking about how efficient your scripts and functions run, whether then do or don’t bleed any resources, whether they properly dump resources when they’re done with them, could the code be written any more efficiently so it runs more quickly.

If you’re a designer, you might be thinking about optimizing images or SWFs so they are smaller in file size, but not so small as to diminish quality. Cut a few colors out of a GIF, decrease the quality of a JPG, remove unnecessary objects in Flash, etc.

If you’re on the business side of the web world, you might be thinking about how to reduce the bandwidth and storage space required to host and serve your websites to end-users. Smaller files require less storage space and less bandwidth. Fewer trips to the server cause less stress on your infrastructure.

Or if you’re an end-user, all you probably care about is “how fast does the page load”.

Well, it turns out that all of these views are correct: they are all high performance in the web world. And, more than likely, they’re all related.

But how do you know how high performance your websites are, other than typing a URL and click “Go”? Here are a few tools that can help you monitor the performance of your websites.

YSlow: http://developer.yahoo.com/yslow/
This add-on for the Firefox web browsers gives the developer a fairly detailed inspection and evaluation of the assets required to render your webpage, including whether or not you are using a CDN, GZip and Expire Headers, or whether you are using “too many” images, etc. YSlow provides a really great starting point, while its creator, Steve Souders’ (http://stevesouders.com/) book High Performance Web Sites (http://www.amazon.com/dp/0596529309) provides even greater insight.

IBM Page Detailer: http://www.alphaworks.ibm.com/tech/pagedetailer
This free download from IBM gives the developer an “under the hood” look at the downloading process of their websites. While this somewhat overlaps with the Net feature of YSlow, it definitely gives you a more detailed report on the time required for each element of your webpage, including the amount of time it takes for all the steps between making the initial server request and viewing the completely rendered webpage.

AOL PageTest: http://www.download.com/AOL-Pagetest/3000-12775_4-10807039.html
I had witnessed this tool some time ago, but had not fallen in love with it. Much like my first experience with the Firefox add-on Firebug, I think I was simply overwhelmed, because not long ago I had the opportunity to meet Dave Artz’s (http://www.artzstudio.com/), from AOL, and when he started dancing through what PageTest can do, I was much more impressed (kind of like the difference between watching a two year with a drum and two sticks, then getting to watch someone like Thomas Lang (http://www.youtube.com/results?search_query=Thomas+Lang) with the same…). PageTest gives an amazing overview (and underview, for that matter!) of your page’s performance: what assets are being called by the page and how long each is taking to download, breaking each line into the respective “pieces” of the download, including initial request, DNS lookup, server request, reply, etc., everything that happens until the asset is delivered to the client.

And if you’re not interested in downloading and installing AOL Page Test, you can also use the web-based version: http://performance.webpagetest.org:8080/ Just type/paste a URL, wait a few seconds for the page tester to, well, test your page, and you’ll get several great images and extremely detailed (if not intuitive) reports on your webpage’s performance.

Brain fried yet?

Atg

Development, Performance, Tip

How many times have you had to take a webpage you are viewing, make a flat file and tinker with it in your favorite HTML Editor (I use Dreamweaver, so I’ll use it in this post)?

To do this, you View Source, File Save As, navigate to some location on your hard-drive, save that file, then open that file in Dreamweaver, right?

Did you know you can view the source from FF and have that source open directly into Dreamweaver?

Here’s how (this requires Firefox and the Web Developer (https://addons.mozilla.org/en-US/firefox/addon/60) toolbar add-on):

1. On the Web Developer toolbar (NOT the Firefox menu) click: Options > Options… > View Source
2. Under View Source With, click Add…
3. Give this short-cut a name, something clever like… Dreamweaver
4. Navigate to Dreamweaver (something like Program Files > Macromedia > Dreamweaver > dreamweaver.exe)
5. Click OK, click OK
6. Restart Firefox
7. Then, to view the source of a page directly in Dreamweaver, on the Web Developer toolbar (NOT the Firefox menu) click: View Source > Dreamweaver

Pretty cool, eh?

Atg

Development, Dreamweaver, Firefox, Tip

Do you click that handy “Remember” button every time you enter a username and password into a site in Firefox so it will miraculously be waiting for you next time?

Did you know that Firefox does NOT automatically protect that list of usernames and passwords?

You can protect it, however, here’s how:

1. Open Firefox
2. Click Tools > Options > Security
3. In the Passwords section, check “Use a master password”
4. Enter and re-enter your master password into the resulting pop-up, then click OK
5. Click OK to exit the Options panel

Now, each time you open Firefox, you will be asked to enter that master password (so make sure you remember it!). This keeps any one else from getting into your password-protected websites.

Atg

Firefox, Security, Tip

http://stevesouders.com/hpws/

BUY THIS BOOK NOW!

That about does it.

Steve Souders (http://stevesouders.com/), the man, the myth, the legend, the creator of the Firebug extension YSlow, covers some rather basic, and some practically impossible, methods to fine-tune your website’s performance.

In just 137 pages, Steve illustrates his 14 Rules for Faster-Loading Web Sites and not a single line is fluff. Covering everything from “keep your CSS at the top of the page” and “keep your JS at the bottom of the page” to server configurations like CDN, cache-control, and expire headers, this book provides great insight into how the web works, and how to make your site work better for your users.

Since Steve moved on to Googe, Yahoo! has expanded on the original 14 Rules, but his original 14 remain the core rules for improving the performance of your website.

Good luck!

Atg

Book, Design, Development, Performance, Review

Extending on A Couple Firefox Tips…

Have you ever noticed that when you are typing a previously visited URL in IE, the address bar automatically fills-in the “next step” of the URL?

Meaning, if you previously visited this NY Times article:
http://www.nytimes.com/2007/08/27/washington/27cnd-gonzales.html
and started typing the URL, IE would initially fill-in:
http://www.nytimes.com
and if you continued typing this URL, IE would incrementally fill-in the rest of the URL as you typed, like:
http://www.nytimes.com/2007
http://www.nytimes.com/2007/08
etc.

But FF doesn’t do this. Well, not out of the box, anyway.

You can, however, make it do it:

1. With FF open, in the address bar type: about:config
2. In the first pop-up type: browser.urlbar.autoFill
3. Click OK
4. And, in the second pop-up select True

You will need to re-start FF to see the results.

Atg

Firefox, Tip