Fotiweb

Replace Arbitrary z-index Values with Ordered Values

Peter Foti — Fri, 06 Jun 2008 21:16:11 +0000

In a forum that I frequent, someone asked how they could replace their arbitrary z-index values to only the range needed to get the job done. For example, if they had only 3 z-index values being used (”0″, “30″, “500″) they wanted this to replace them to the smallest values possible (”0″, “1″, “2″). Is this useful? Probably not. But here is my 20 minute solution:

A
A.1
B
C
D

Thanks HostMySite

Peter Foti — Sun, 03 Feb 2008 22:57:52 +0000

This site is hosted at HostMySite.com. Yesterday, someone suggested I could change the Permalink structure of WordPress to give the URL’s a friendlier look. Sounded like a good idea… but when I made the change, the site broke and I had no way to fix it. Some Googling revealed that the problem was that mod_rewrite must not be enabled for my site. There should have been some kind of warning on the Permalinks page that your site might break, but there wasn’t. Shame on you WordPress.

Anyway, I contacted my HostMySite and Paul H. was able to quickly make the necessary changes to get me back up and running. A big thanks to HostMySite. My permalinks look great now, and as always the HostMySite support folks were a great help. Kudos.

Global Warming = Global Warning

Peter Foti — Tue, 15 Jan 2008 18:39:27 +0000

I finally got around to renting the DVD “An Inconvenient Truth.” It was really an eye opener, and quite interesting. A major ecological change might be closer at hand than you think. I am definitely going to try and do my part to reduce my Carbon Footprint. I’ve started by switching my light bulbs to energy efficient bulbs, and making changes around the house. There’s still a lot more that we can do.

For more information, visit: http://www.climatecrisis.net

Snowy Backgrounds

Peter Foti — Fri, 07 Dec 2007 18:00:25 +0000

This was sitting in my “waiting to be published” stuff for a LONG time. I meant to clean it up and include the images I used in my original example, but I never got around to it, so I’m just going ahead and publishing it “as is”.

I decided to create a new way to do snowy backgrounds. I say ‘new’, but surely I’m not the first person ever to do it this way. So, new to me anyway. Below is the process I took… a sort of tutorial for anyone interested. It’s important to note that you could apply this to any/every page on a site, simply by putting the script in an external file and linking it in, calling the init method with the id of a container element, and as long as the path to the images is accessible from each page. Feel free to use this in any way you like (including the images). There are a couple of style rules that were required for this to work (particularly with IE).

First, I decided that I wanted a “layered” snowy effect. The “closest” layer would have the largest flakes, the next layer would have smaller flakes, and the next layer would have even smaller flakes. Each layer is going to fall at a slightly different rate, which is more realistic to what falling snow looks like.

So first I created the closest image. It’s 800×600, has a transparent background, and the flakes are just white circles. I made this using GIMP in about 2 minutes. It’s nothing fancy, just random dots. I made it really tall and wide to try and hide the pattern when this repeats. This first image is snow0.gif.

Next, I needed smaller flakes for the next layer. I just scaled the first image down to 400×300 and saved it as snow1.gif.

For the last level, I again just scaled the image down to 200×150 and saved it as snow2.gif.

Next, I dynamically created the “layers” using JavaScript. Each layer is a div element. Each layer is absolutely positioned to fill the entire width and height. The images are applied as background images to the layers, and the layers are given different z-indexes, so the ‘closer’ layers are on top of the others. With the attached images, it probably doesn’t matter much.
But if your snow flakes had some sort of border or different coloring, you would be able to see the larger flakes falling in front of the smaller flakes.

Because I’m using absolute positioning, I needed to also adjust the content of my pages to also be absolutely positioned, so it could sit on top of my snow. I’m not nuts about that, and if I really wanted to, I might be able to come up with a solution that didn’t use absolute positioning and instead just copied the main body content into one of the snow layers (with each layer nested in another layer). But, hey, this was just for fun.

Finally, I setup an interval to adjust the background postition of each layer, which is what gives it a “falling snow” effect. I currently have it set at every 175ms, but you can adjust it as you like for a balance of performance and appearance (I wouldn’t go above 500 though as it will look too choppy). With each interval, it’s not doing anything too intensive. It’s basically just adjusting the background position and setting the style for each layer. But even so, it will rev up CPU cycles as you set a smaller
interval.

Below is the sample page. Enjoy.



  
  
  Snow Example
  



  
  
    
      Let it snow!

Happy Thanksgiving

Peter Foti — Wed, 21 Nov 2007 19:41:36 +0000

This year, I’m thankful for…

A baby on the way
My lovable dog
Friends and family
A wonderful job

But most importantly, I’m thankful for my amazing wife, Laura. Love you babe!

Why I am Starting to Hate Comcast

Peter Foti — Wed, 14 Nov 2007 20:46:41 +0000

I’ve had pretty good service with Comcast for years, but over the past 12 months or so I’ve become increasingly unhappy with them. This week they’ve really pissed off a lot of users.

It seems that Comcast disabled the serial (aka “data”) port on their cable modems for users in the New England area (and possibly some other areas). For many customers, this means nothing. However, TiVo users who had their TiVo connected to their cable box serial port (for changing channels) were suddenly left with no way to change the channel. Is this Comcast’s way of trying to force TiVo users to switch to Comcast’s DVR? Was this an intentional change or was it an accident? Their tech support has not been helpful, acting somewhat clueless about the issue. Though, finally, they seem to be acknowledging that they’re receiving a lot of complaints and are “looking into it.”

In the mean time, TiVo users can switch to a different cable (the less reliable IR cable) if they can find them (I was fortunate and knew exactly where mine were). Those who don’t have them can buy them online (and I would guess at a local electronics store).

I hope Comcast fixes this problem. If they don’t, rather than buy Comcast’s DVR, I’d be more likely to move away from Comcast entirely (I’d love to get FiOS when it’s available in my area).

JavaScript Namespaces

Peter Foti — Wed, 31 Oct 2007 22:17:49 +0000

Note: The code in this posting has been strongly influenced by the Yahoo UI Library (an EXCELLENT library). I’ve made some modifications, but in many cases my code was functionally equivalent (if not identical) to the code in the library.

“Who” Should Do This

Everyone writing JavaScript.

“What” Is This

Creating a single global JavaScript object that will contain all of your JavaScript.

“Where” Should This Live

The primary namespace should be in its own script file.

“When” Should I Do This

Any time you write JavaScript.

“Why” Should I Do This

Avoid conflicts with other scripts.
Create code that is more manageable and portable.
Better memory management via scoped objects.

“How” Should I Do This

First, choose a name that represents your root/base namespace. It should be short in length, but unique enough that it won’t conflict with other global variables. Your name (or organization name), abbreviation of the name, or an acronym is a good place to start.

For example, if your organization was “ACME, Inc.”, you might use “ACME” as your namespace name. If you are an individual developer, you might choose your initials. For my examples, I’m going to use “FOTI” as the namespace name. Note, I’m using all UPPERCASE letters to define my namespace. This convention seems to be the norm, and I like it because I think there is less chance for global conflicts this way (it also makes more sense for those who use initials).

To create the namespace, lets start with the following in a file of its own (obviously, replace all instances of FOTI with your own namespace):
foti.js

if ((typeof FOTI == "undefined") || (null == FOTI)) {
    /**
     * The FOTI object is the global (namespace) object used by the FOTI
     * JavaScript Library.  All FOTI objects reside within this object scope.
     */
    var FOTI = {};
}

This checks to see if a global FOTI object already exists, and creates a new empty object if it does not. This is the base from which all of our work will reside. Note that I’ve chosen the method of checking if the variable FOTI is undefined (meaning declared but not assigned, or simply not declared) or null (meaning it has been declared and assigned, but now contains a null value). Essentially, I’m checking to make sure that I have a valid object that I can add methods and properties to.

Next we’ll want to add the ability to create additional inner namespaces. For example, I may want the following namespaces:
FOTI.util
FOTI.page
FOTI.widget
FOTI.widget.controls

In order to facilitate this, I’m going to add a method to our global object for creating nested namespaces. This is based off of the Yahoo UI Library’s YAHOO object, but I’ve taken a slightly different approach. My method will take a single argument, which is a string or an array of strings (allowing for multiple namespaces to be created at the same time). Here’s that method:

/**
 * Create the specified namespace(s)
 * @static
 * @param  {String | Array} s Namespaces to create
 * @return {Object}  A reference to the last
 * namespace object created or an empty global
 * object if the namespace couldn't be created
 */
FOTI.namespace = function(s) {
    var a, o, i, j, d;
    // Determine if s is string or array and
    // force it to an array
    if (typeof s === 'string') {
        a = [s];
    }
    else if (s.length !== undefined) {
        a = s;
    }
    else {
        // Neither a string or an array was passed in, so exit
        return {};
    }
    for (i = 0; i < a.length; i++) {
        d = a[i].split(".");
        o = FOTI;
        // FOTI is implied, so it is ignored if it is included
        for (j = (d[0] == "FOTI") ? 1 : 0; j < d.length; j++) {
            o[d[j]] = o[d[j]] || {};
            o = o[d[j]];
        }
    }
    return o;
};

Now we’ve got a nice way to setup multiple namespaces contained within our global FOTI namespace. So I’m going to add a self-invoking anonymous function that will create some default namespaces:

(function() {
    FOTI.namespace(["util", "page", "widget.control"]);
})();

Great! Now, how can we put this to use?
One use for this is to contain the scripts for our individual pages within our global object. This will help prevent conflicts with other scripts. So lets start by creating an empty HTML page. This is going to be our “home” page:




  
  Home

You’ll note that I’ve included the Yahoo UI Library’s yahoo-dom-event script. That’s because the exceptional DOM and Event handling Utilities give me a lot of bang for my buck. I’m going to use the Yahoo Event Utility extensively.

Next, lets create the stub for our home page’s main script. This is going to be a singleton (only 1 instance of this script will ever be needed) so you’ll note that I’m assigning the result of a self-invoking function to the FOTI.page.home property. I use the YUI Event Utility to call the init method when the page has loaded, and I’m giving FOTI.page.home the scope for ‘this’:

FOTI.page.home = function() {
    return {
        init : function() {
            alert(this.greeting);
        },
        greeting : "Welcome!"
    };
}();
YAHOO.util.Event.on(window, 'load', FOTI.page.home.init, FOTI.page.home, true);

There you have it. We’ve created our Global namespace object (FOTI), we added a sub-namespace object (page) which has a property (home) that contains an instance of an object for our current page’s scripts (this object has the properties init and greeting). We can add all of our page-specific scripts to this object and we’ve avoided conflicts with all other global objects by containing them in our nice and neat namespaces.

Well, that’s all for now. I could probably continue to elaborate, clean up, and expand this example. But this post is getting pretty long as it is. Enjoy.

Syntax Highlighting

Peter Foti — Wed, 31 Oct 2007 21:07:01 +0000

I’m about to roll out some design changes which include a nifty “Syntax Highlighter”. Code examples will now be much nicer looking.

Trash Management

Peter Foti — Wed, 24 Oct 2007 18:53:03 +0000

There’s been a lot of news in the past year about global warming, carbon footprints, and being environmentally friendly. I’ve never considered myself an environmentalist, but lately I’ve felt as though I’d like to do more for the environment. I should be able to train myself to use better habits, which I can then pass on to my children. If everyone did this, the world would be a cleaner place.

My town dump requires us to sort our trash. We recycle glass, cans, milk jugs, paper, scrap metal, etc. But the hard part is how to manage all of these different types of trash at home. How should one store all of these different types of trash? I’d like to see someone invent a super trash management system (probably comprised of several smaller waste baskets, each in their own cabinet), that could store different trash types:

Glass
Soda Cans (redeemable)
Cans/foil
Paper
Cardboard
Gallon Jugs
Plastics (redeemable)
Batteries
Bio-waste (food, etc.)
Other trash

Can you think of any other items that would be good to sort?

Parents Getting Domain Names For Newborns

Peter Foti — Thu, 23 Aug 2007 15:29:51 +0000

I read an article on CNN today about parents registering domain names and setting up GMail and Hotmail email accounts for newborns when they’re born. I think that’s a great idea… setting aside a little bit of cyberspace realty.