Pushing Buttons http://www.pushingbuttons.net A blog for web designers, developers and programmers. en Custom Engine Sun, 18 Jul 2010 07:41:55 -0400 New Blog, New Domain http://feedproxy.google.com/~r/pushingbuttonsblog/~3/gKfaymqdLws/ Pushing Buttons has moved to a new location, with a new name. It is now MindlessFollower.com Mindless Follower has moved to a new domain. And has changed names. A lot has changed. But for the better. The new site is called Mindless Follower, and is located at MindlessFollower.com.

This site will be regularly updated, covering all-things-web-development. If you are subscribing to this blog be sure to update your RSS feed. The link to the new feed is available on the new site.

]]> Sun, 18 Jul 2010 07:41:55 -0400 http://www.pushingbuttons.net/?New_Site http://www.pushingbuttons.net/?New_Site Applying CSS to Any Custom HTML Tag http://feedproxy.google.com/~r/pushingbuttonsblog/~3/hwYORz_oii8/ There is a really great screencast available at Nettuts+ which demonstrates how you can 'make all browsers render HTML5 mark-up correctly.' It is a really simple trick that allows you to apply CSS for HTML5 elements.To quickly cover what Jeffrey Way (the editor of Nettuts+) discussed, HTML5 has certain tags like <header> that are not standard in HTML4. Certain browsers like Chrome or Firefox are up-to-date and will consider this a valid element. Thus, it will then accept CSS statements for the <header> tag.IE will show text within <header> but will not reflect anything written in the CSS for <header>. This is because it does not consider <header> a valid element and, more or less, ignores it.In this post I discuss how Way goes about solving this problem, and how it can be extended further. There is a really great screencast available at Nettuts+ which demonstrates how you can 'make all browsers render HTML5 mark-up correctly.' It is a really simple trick that allows you to apply CSS for HTML5 elements.

To quickly cover what Jeffrey Way (the editor of Nettuts+) discussed, HTML5 has certain tags like <header> that are not standard in HTML4. Certain browsers like Chrome or Firefox are up-to-date and will consider this a valid element. Thus, it will then accept CSS statements for the <header> tag. So something like the following will be accepted:

header {
     display:block;
     padding:40px;
     background:#171717;
     color:#fff;
     font-weight:bold;
     text-align:center;
}
IE will show text within <header> but will not reflect anything written above. This is because it does not consider <header> a valid element and, more or less, ignores it.

To fix that Way shows that putting the following JavaScript in the header solves this problem:

document.createElement('header');
You don't even have to inject the element into the page. Simply creating a DOM node with the <header> tag name creates a valid reference to such a tag in the browser's rendering engine. So, now the CSS for header applies. As he points out the one downfall is that the user must have JavaScript enabled.

Now this is where it gets interesting. Say you want to throw in your own tag names. Let's say something like the following:

<cloud>
     <p> Sample Text </p>
</cloud>
And with the following CSS:

cloud {
     display:block;
     padding:40px;
     background:gold;
     color:#171717;
     font-weight:bold;
     text-align:center;
}
Now you have the same problem you had with HTML5 elements and CSS. This will work in Chrome and Firefox but not IE. And the same solution works:

document.createElement('cloud');
This, placed in the header, fixes the CSS in IE. So you can throw custom-named tags into the document and have they styled as you wish.

]]> Thu, 21 Jan 2010 13:27:35 -0500 http://www.pushingbuttons.net/?Applying_CSS_to_Any_Custom_HTML_Tag http://www.pushingbuttons.net/?Applying_CSS_to_Any_Custom_HTML_Tag Working with Elements in Deft http://feedproxy.google.com/~r/pushingbuttonsblog/~3/awVOiEGdEsk/ Lately I've been working on a personal project, Deft, which is a JavaScript framework. Like everyone else I've been using existing frameworks to develop with. But over time I have gained a better understanding of the language and an idea of what methods a framework should offer. Deft is my effort to bring that idea to reality.The following is an extremely quick glimpse of the functionality offered by Deft-0.5.js, an early build. In this post I will be focusing on working with elements. The framework is not complete so there will be more to come. But there is already a great deal of functionality.$&#40;'header'&#41;      .attr&#40;'style', &#123;           'color': 'red',           'font-weight': 'bold'      &#125;&#41;      .$&#40;'nav'&#41;           .attr&#40;'style', &#123;                'opacity': 0.5           &#125;&#41;      .back&#40;&#41;      .addClass&#40;'ready'&#41;;In this example the element with an ID of 'header' is selected and its color and font-weight styles are set. An element within 'header' with an ID of 'nav' is then selected and a 50% opacity is applied. The chain then uses back() which returns to $('header') to which we end with adding a class of 'ready.' Lately I've been working on a personal project, Deft, which is a JavaScript framework. Like everyone else I've been using existing frameworks to develop with. But over time I have gained a better understanding of the language and an idea of what methods a framework should offer. Deft is my effort to bring that idea to reality.

The following is an extremely quick glimpse of the functionality offered by Deft-0.5.js, an early build. In this post I will be focusing on working with elements. The framework is not complete so there will be more to come. But there is already a great deal of functionality.

$('header')
     .attr('style', {
          'color': 'red',
          'font-weight': 'bold'
     })
     .$('nav')
          .attr('style', {
               'opacity': 0.5
          })
     .back()
     .addClass('ready');
In this example the element with an ID of 'header' is selected and its color and font-weight styles are set. An element within 'header' with an ID of 'nav' is then selected and a 50% opacity is applied. The chain then uses back() which returns to $('header') to which we end with adding a class of 'ready.'

$$('span.good').each(function(o) {
     o.identify();
});
In this example all spans with a class of 'good' are selected. We then loop through them and use identify() to assign a unique ID if one does not already exist.

$('nav').purge();
In this example the element with an ID of 'nav' is removed.

$('dataset').store('limit', 15);

$('dataset').store({
     page: 0,
     useFilter: false
});

alert($('dataset').fetch('limit'));
// alerts '15'

alert($('dataset').fetch('useFilter'));
// alerts 'false'
Above is a quick overview of how to store information in an element and fetch it later when needed.

 

If you are interested in taking a deeper look at the framework be sure to look at the official website. Right now the site is pretty basic. A blog and documentation section are in the works.

]]> Sun, 29 Nov 2009 16:16:48 -0500 http://www.pushingbuttons.net/?Working_with_Elements_in_Deft http://www.pushingbuttons.net/?Working_with_Elements_in_Deft Good SEO Practices http://feedproxy.google.com/~r/pushingbuttonsblog/~3/Vd2gEMxaFqQ/ Search Engine Optimization (SEO) is an interesting topic. There are a lot of ways people claim you can improve your search results. Some of them work. Some just don't. The problem is that there is one real search engine everyone always focuses on; Google. And Google is pretty secretive about how they rank websites. At first their algorithms were pretty straight-forward. If you linked to a bunch of other sites and inject hordes of keywords in your &lt;body&gt; then you would likely move upward in ranking. But then black-hat search engine optimizers figured out that Google was doing this. These optimizers began to use it to their advantage. You may recall, years ago, coming across a page that seemed to have an obscene amount of 'dead space' at the bottom of the page. These optimizers would place large amounts of keywords usually using the same color as the background to hide them. Long story short Google has continually caught on to optimizers taking advantage of their ranking algorithms and have tweaked them to avoid these types of situations, thus enforcing legitimate results. So, over time Google has become very cryptic as to how they rank sites. By leaving optimizers in the dark they are avoiding any misuse of their service. Yet, there are some well-known ways in which you can improve your pages to improve their ranking. This is what I will be covering for the remainder of this post. Search Engine Optimization (SEO) is an interesting topic. There are a lot of ways people claim you can improve your search results. Some of them work. Some just don't. The problem is that there is one real search engine everyone always focuses on; Google. And Google is pretty secretive about how they rank websites.

At first their algorithms were pretty straight-forward. If you linked to a bunch of other sites and inject hordes of keywords in your <body> then you would likely move upward in ranking. But then black-hat search engine optimizers figured out that Google was doing this. These optimizers began to use it to their advantage. You may recall, years ago, coming across a page that seemed to have an obscene amount of 'dead space' at the bottom of the page. These optimizers would place large amounts of keywords usually using the same color as the background to hide them.

Long story short Google has continually caught on to optimizers taking advantage of their ranking algorithms and have tweaked them to avoid these types of situations, thus enforcing legitimate results. So, over time Google has become very cryptic as to how they rank sites. By leaving optimizers in the dark they are avoiding any misuse of their service. Yet, there are some well-known ways in which you can improve your pages to improve their ranking. This is what I will be covering for the remainder of this post.

Content is King



Content is and always will be king. Remember that. There is no better way to improve your ranking. If your page does not have much to it then it will fall behind. If you are making a site for yourself, or your business, then be sure to put a good amount of content on it. If you are designing a page for a client you should educate them of this fact, since they will likely be responsible for filling in the blanks.

This does not mean that you should fill your page with garbage. You want there to be a good amount of content but it should be of high quality and related to the website. Also, a blog is always a good way to add content to a site. If you ever use a service like HubSpot's Website Grader you will see a check for a blog on your site. It is arguable if Google cares that you have a blog but it is true that a blog will help in respect to content.

Hiding Text via text-indent



Developers often put icons or logos on a site by using a <div> or <span> and then employing CSS to set its height, width and background to match that of the image. To the user this works well. But as Google's web spider crawls your page it doesn't take into account any CSS. So what the <div> does not benefit the page in terms of ranking.

Now, let's say that you have this <div> at the top of your page and it displays a company logo. You could put the company name within the <div> so that Google recognizes it. While doing this give the <div> a class that will be used to hide the text from users.

<div id='logo' class='notext'>Company Name Here</div>
Now for the CSS that does the hiding (the class of 'notext'):

#logo {
     width:200px;
     height:200px;
     background:transparent url(logo.gif) no-repeat left top;
}

.notext {
    text-indent:-9999px;
    color:transparent;
}
The text-indent of -9999px bumps the text way to the left, setting it off of the viewable page. This works on all browsers. The text color of transparent is not really needed, and doesn't work in some browsers like IE. I usually add it in as an extra precaution.

Domain Expiration



This one is a bit arguable, but I do believe it helps. Many people suggest that if your domain is set to expire within a year then search engines like Google will rank it lower since the chance of the site becoming unavailable is greater. Correcting this is pretty straight forward. Make sure your domain is renewed for a number of years.

Meta Tags



Meta tags are interesting. Some are important, others are not. To start, consider the title tag. Your title tag is important to your ranking. It should be short and sweet. One problem I see all too often is a website putting its name first on all page titles. If you go to the blog on Pushing Buttons the title should not be "Pushing Buttons - Blog." It should just be "Blog." Search engines, as well as the users doing the searching, can tell what site they are looking at. You don't have to throw it at them every time.

The description tag is also useful. Honestly I'm not sure to what degree Google cares about it. But it should still be taken seriously since users using Google will see it displayed under the page title. And SEO doesn't mean anything if it doesn't pull in users.

As for the keyword tag, Google has stated that they do not take this into account. For a very long time optimizers pushed use of the keyword tag. Now that Google has stated their position it has changed drastically. I continue to use the tag at times but knowing that Google doesn't use it and users never see it gives me little to no incentive.

Use Headers Properly



Use header tags (<h1> through <h6>) properly. You should never have more than one <h1> tag on a page. Having multiple brings the strength of it down severely. I usually set the website name or company name as an <h1>.

From <h2> to <h6> you can add multiple occurrences. Any major headers should be an <h2>, sub-headers should be an <h3> and so on.

Link Building



I usually find this the most useful when writing a blog. But you cannot force clients to do this on their own posts. When writing a post, or even on a normal page, you should wrap any text referencing a company or website with a link to it. Search engines will detect that the links are relevant to your content, thus improving your content's relevancy, thus improving your ranking.


Avoid Flash



Until recently search engines could not crawl through flash (or similar) content. Google has added support for crawling flash but it still does not compare to traditional content. Flash should be left to banners and other features that annoyingly alienate users.

Keep Content Fresh



Another aspect that Google takes into account is how often your site is updated. If you have a blog but never write any posts Google will gradually decrease the time between crawls. Since Google has a lot of sites it must crawl it chooses to crawl sites that change often more often.

So if you have a website and never update it then Google will take its sweet time to check back in. Let's say you then make a big update and you really want it to reach your audience. Since Google has put you late in the queue you will have to wait some time. If you had been making periodical additions to your site then you really wouldn't have to wait long for it to show up on results.

Another point to stress is that if you put up a "coming soon" or "under construction" landing page that is static for a long period of time Google will consider the site to be dead. Then when you launch the actual site it will take a bit of time for Google to regain its trust and check for updates regularly. Some optimizers argue that you should avoid using these landing pages altogether, and that no page is better than a "coming soon" page.

If your page has been static for a long period of time and you do make an update you can also re-submit your site to Google. This will likely bring you upward in the crawl queue, but it will not correct the issue altogether.]]> Fri, 13 Nov 2009 08:32:45 -0500 http://www.pushingbuttons.net/?Good_SEO_Practices http://www.pushingbuttons.net/?Good_SEO_Practices How to trim() in JavaScript http://feedproxy.google.com/~r/pushingbuttonsblog/~3/h-MsTMY0gn8/ String trimming has become a standard in APIs. In JavaScript there is no standard method to do this. So, most libraries like jQuery and MooTools add in their own trim functionality. Adding a simple trim method is easy. All you need is the following code:String.prototype.trim = function&#40;&#41; &#123;      return this.replace&#40;/^\s*|\s*$/g, ''&#41;; &#125;; Now you can do the following:&quot;     asdf    &quot;.trim&#40;&#41;; // &quot;asdf&quot; &quot;asdf&quot;.trim&#40;&#41;; // &quot;asdf&quot; This proves really useful. But it could be better. In PHP you can send an optional second parameter to their trim function that allows you to define characters to be trimmed. By default the function trims white space. String trimming has become a standard in APIs. In JavaScript there is no standard method to do this. So, most libraries like jQuery and MooTools add in their own trim functionality.

Adding a simple trim method is easy. All you need is the following code:

String.prototype.trim = function() {
     return this.replace(/^\s*|\s*$/g, '');
};
Now you can do the following:

"     asdf    ".trim();
// "asdf"

"asdf".trim();
// "asdf"
This proves really useful. But it could be better. In PHP you can send an optional second parameter to their trim function that allows you to define characters to be trimmed. By default the function trims white space.

You can implement a few String prototypes in JavaScript to achieve similar results. Though, instead of sending a string of characters to be trimmed as in PHP you can send a regular expression to the trimming methods to be applied.

String.prototype.ltrim = function(what) {
     if(arguments.length === 0)
          return this.replace(/^\s*/g, '');
     what = what.toString();
     what = what.substring(1, what.length - 1);
     what = new RegExp('^[' + what + ']*', 'g');
     return this.replace(what, '');
};

String.prototype.rtrim = function(what) {
     if(arguments.length === 0)
          return this.replace(/\s*$/g, '');
     what = what.toString();
     what = what.substring(1, what.length - 1);
     what = new RegExp('[' + what + ']*$', 'g');
     return this.replace(what, '');
};

String.prototype.trim = function(what) {
     return this
          .ltrim(what)
          .rtrim(what);
};
This allows you to do the following:

"    Pushing Buttons    ".trim();
// "Pushing Buttons"

"    Pushing Buttons    ".ltrim();
// "Pushing Buttons    "

"    Pushing Buttons    ".rtrim();
// "    Pushing Buttons"

"    november    ".trim(/\s/);
// "november"

"    november    ".trim(/\s|n|o|r/);
// "vembe"

"designed".trim(/d|e/);
// "sign"

"designed".rtrim(/d|e/);
// "design"

"Late2009".rtrim(/\d/);
// "Late"

]]> Tue, 10 Nov 2009 12:30:00 -0500 http://www.pushingbuttons.net/?How_to_trim_in_JavaScript http://www.pushingbuttons.net/?How_to_trim_in_JavaScript Array Has Function in ASP http://feedproxy.google.com/~r/pushingbuttonsblog/~3/fg8rHAZMw9Y/ I'm often stuck working with ASP and wishing I were working with PHP. PHP has a great deal of methods available that make life a lot easier. And in ASP you find yourself writing custom functions to do something that would be trivial in a better language.Checking to see if a value exists within an array is one example. ASP does not offer any quick or easy solution. In fact, ASP is pretty much a nightmare when it comes to working with arrays. It's usually easier to use scripting dictionaries. I'm often stuck working with ASP and wishing I were working with PHP. PHP has a great deal of methods available that make life a lot easier. And in ASP you find yourself writing custom functions to do something that would be trivial in a better language.

Checking to see if a value exists within an array is one example. ASP does not offer any quick or easy solution. In fact, ASP is pretty much a nightmare when it comes to working with arrays. It's usually easier to use scripting dictionaries.

In order to check an array for a given value you can implement the following function.

Function has(arr, val)
     has = False
     dim v : For Each v In arr
          If val = v Then
               has = True
          End If
     Next
End Function
Now you can do the following.

If has(Array(2, 4, 6, 8), 4) = True Then
     Response.Write "Hello"
End If
' Will write "Hello"

If has(Array(1, 3, 5, 7, 9), 4) = True Then
     Response.Write "World!"
End If
' Will not write
This makes If statements a lot cleaner and easier to work with.

]]> Mon, 19 Oct 2009 08:04:09 -0400 http://www.pushingbuttons.net/?Array_Has_Function_in_ASP http://www.pushingbuttons.net/?Array_Has_Function_in_ASP Eight Great Photoshop Tutorials http://feedproxy.google.com/~r/pushingbuttonsblog/~3/dchekb4241M/ A quick list of eight extremely useful and fun Photoshop tutorials. Including how to correct banding, creating inset typography, applying the tilt-shift technique and how to create a clean modern website design.Check them out! Here is a list of eight really useful and fun Photoshop tutorials.

Create Inset Typography




Correct Banding in Your Gradients




Create a Clean Modern Website Design




Awesome Digital Bokeh Effect




Make Digital Photos Look Like Lomo Photography




The Tilt-Shift Technique




Ifrared Photo Effect




3D Pixel Stretch Effect


]]> Fri, 16 Oct 2009 07:45:32 -0400 http://www.pushingbuttons.net/?Eight_Great_Photoshop_Tutorials http://www.pushingbuttons.net/?Eight_Great_Photoshop_Tutorials Array.insensitiveSort in MooTools http://feedproxy.google.com/~r/pushingbuttonsblog/~3/oWK77yDOx_g/ In JavaScript there is a sort function for arrays. Though, the result will take into account the case of each character. Therefore you can have something like the following happen.var a = &#91;&quot;john&quot;, &quot;April&quot;, &quot;tim&quot;, &quot;Zoe&quot;&#93;; a = a.sort&#40;&#41;; // a is now [&quot;April&quot;, &quot;Zoe&quot;, &quot;john&quot;, &quot;tim&quot;]Using MooTools you add a method to the Array object which will allow you to sort while being insensitive to case. In JavaScript there is a sort function for arrays. Though, the result will take into account the case of each character. Therefore you can have something like the following happen.

var a = ["john", "April", "tim", "Zoe"];

a = a.sort();

// a is now ["April", "Zoe", "john", "tim"]
Using MooTools you add a method to the Array object which will allow you to sort while being insensitive to case.

Array.implement({
     insensitiveSort: function() {
          var result = [], tmp = [], tmpH = $H();
          this.each(function(val) {
               tmp.push(val.toString().toLowerCase());
               tmpH.include(val, val.toString().toLowerCase());
          });
          tmp = tmp.sort();
          tmp.each(function(val) {
               result.push(tmpH.keyOf(val));
          });
          return result;
      }
});
Now you can do the following.

var a = ["john", "April", "tim", "Zoe"];

a = a.insensitiveSort();

// a is now ["April", "john", "tim", "Zoe"]

]]> Fri, 09 Oct 2009 08:13:51 -0400 http://www.pushingbuttons.net/?ArrayinsensitiveSort_in_MooTools http://www.pushingbuttons.net/?ArrayinsensitiveSort_in_MooTools Transparent GIFs in IE6 http://feedproxy.google.com/~r/pushingbuttonsblog/~3/5omcGbq4Flg/ IE6 is a constant burden for web developers. It really is impressive to see how many ways it continues to aggravate. To put it lightly, it is the devil.One common issue is the lack of support for transparency in images. Most web developers would prefer to use PNG images while dealing with transparency. Just about every browser, including later versions of IE, support transparency in this image format. With the exception of IE6. IE6 will display the PNG with gray where the transparency should be.There are a number of ways to get around this. Such as the popular belated PNG script which applies a filter to the image to resolve the issue. One problem with this script is that visitors will still see gray until the script runs and re-renders the images, causing a flicker effect. There is also the PNG Alpha Fix script which takes a similar approach, but uses an htc file.Sometimes it's easier to use GIF images to get things looking right in IE6. Yet, IE6 has its issues with this format as well. When rendering the image it will decide if pixels are completely opaque or completely transparent. If you want certain pixels to have 50% transparency you will run into this problem. It causes the images to look blocky, as if traced. IE6 is a constant burden for web developers. It really is impressive to see how many ways it continues to aggravate. To put it lightly, it is the devil.

One common issue is the lack of support for transparency in images. Most web developers would prefer to use PNG images while dealing with transparency. Just about every browser, including later versions of IE, support transparency in this image format. With the exception of IE6. IE6 will display the PNG with gray where the transparency should be.

There are a number of ways to get around this. Such as the popular belated PNG script which applies a filter to the image to resolve the issue. One problem with this script is that visitors will still see gray until the script runs and re-renders the images, causing a flicker effect. There is also the PNG Alpha Fix script which takes a similar approach, but uses an htc file.

Sometimes it's easier to use GIF images to get things looking right in IE6. Yet, IE6 has its issues with this format as well. When rendering the image it will decide if pixels are completely opaque or completely transparent. If you want certain pixels to have 50% transparency you will run into this problem. It causes the images to look blocky, as if traced.

So, what I normally do is take the PNG and convert it to a GIF while attempting to preserve the partly transparent portions as much as possible. Let's assume you are going to be placing the GIF in an area with a consistent color scheme. For simplicity we will assume this background is white.

 

Let's say we have the following PNG.

 


First open your PNG in Photoshop.

 

 

Now make a new layer, beneath the original, filled with the expected background color (in this case white).

 


After merging the two layers zoom into the image so that you can work on a pixel by pixel basis.


Add a vector mask to the layer. We will use this to get rid of as much background as possible. I like to create a new layer, filled with something vibrant like red, and place it beneath the main layer. This way it is easier to see what pixels have been erased. Now select vector mask and use the pencil (1px block, 100% opaque) to hide as much as the background as possible. In this case we will hide any white or nearly white pixels.


Once finished with the vector mask hide the red layer (if you had added it) and save the image as a GIF. When you add it onto of an area with the expected color you should not see the blocky effect.


This will also work well on top of a gradient, as long as the gradient is not too severe.

]]> Wed, 07 Oct 2009 14:00:45 -0400 http://www.pushingbuttons.net/?Transparent_GIFs_in_IE6 http://www.pushingbuttons.net/?Transparent_GIFs_in_IE6 Easy Rounded Edges in Photoshop http://feedproxy.google.com/~r/pushingbuttonsblog/~3/NBA6KXFO8gA/ There are several methods you can use to create rounded edges in Photoshop. This is a step-by-step guide on how to quickly and easily create rounded edges in Photoshop.First start off by creating a new document. I created a 400 by 400 pixel document, and set the initial layer to white. There are several methods you can use to create rounded edges in Photoshop. This is a step-by-step guide on how to quickly and easily create rounded edges in Photoshop.


First start off by creating a new document. I created a 400 by 400 pixel document, and set the initial layer to white.


Now create the shape you will want rounded. Add this as its own layer. In this example I've created a 200 by 200 pixel square. The layer should be all black, which you can change later using layer masks.


Add guides around your object (this part is easy if it's a rectangle). Now, assuming that I want a five pixel radius for my edge I have added guides accordingly.


The next step is to erase the content between the guides. If you are rounding a shape that is not as easy to do this with then you can do the following instead: Right click on the layer and select "Select Pixels." Then go to Select › Modify › Contract. Enter the amount of pixels, in this case five. Now invert your selection by pressing Shift + Ctrl + I (windows) or Shift + Cmd + I (OS X). Delete the selection.


Now right click on the layer and select "Blending Options."


Add a five pixel (or your own size) stroke to the layer using black.


Create a new blank layer and merge it with the layer containing your rounded shape.


This will result in a layer containing your rounded shape without any blending options / effects applied.


The best part is that your rounded edges are anti-aliased.

]]> Tue, 29 Sep 2009 11:20:26 -0400 http://www.pushingbuttons.net/?Easy_Rounded_Edges_in_Photoshop http://www.pushingbuttons.net/?Easy_Rounded_Edges_in_Photoshop An Introduction to JavaScript Functions http://feedproxy.google.com/~r/pushingbuttonsblog/~3/eS8yo6lObWY/ I often notice web developers misunderstanding the syntax of JavaScript functions. Even after a few years of experience. It can be a bit difficult to understand the different ways in which you can implement functions. Take a look at the following code.function addOne&#40;val&#41; &#123;      return val + 1; &#125; var addTwo = function&#40;val&#41; &#123;      return val + 2; &#125;; window.addThree = function&#40;val&#41; &#123;      return val + 3; &#125;; window&#91;&quot;addFour&quot;&#93; = function&#40;val&#41; &#123;      return val + 4; &#125;;All of these will work. The first declaration, for addOne, is usually the most familiar. It is pretty straight-forward. The declaration of addTwo achieves the same end result. You start by defining a variable, addTwo. Then you set addTwo equal to a function. In both cases you end up with a variable which are set equal to a function.With addThree we are setting window.addThree equal to a function. In reality, window.addOne and window.addTwo are already set as well. You can think of window as the root object in which all else stem from.The declaration of addFour is virtually the same as addThree except that you are using a slightly different syntax to define the child node of the window object. I often notice web developers misunderstanding the syntax of JavaScript functions. Even after a few years of experience. It can be a bit difficult to understand the different ways in which you can implement functions. Take a look at the following code.

function addOne(val) {
     return val + 1;
}

var addTwo = function(val) {
     return val + 2;
};

window.addThree = function(val) {
     return val + 3;
};

window["addFour"] = function(val) {
     return val + 4;
};
All of these will work. The first declaration, for addOne, is usually the most familiar. It is pretty straight-forward. The declaration of addTwo achieves the same end result. You start by defining a variable, addTwo. Then you set addTwo equal to a function. In both cases you end up with a variable which are set equal to a function.

With addThree we are setting window.addThree equal to a function. In reality, window.addOne and window.addTwo are already set as well. You can think of window as the root object in which all else stem from.

The declaration of addFour is virtually the same as addThree except that you are using a slightly different syntax to define the child node of the window object.

It is important to know that these functions are considered named function since they are assigned to variables and can be called later in your code. If you do not assign a variable name to a function then the function is considered anonymous. As in the following example.

var x = 0;

x = addOne(x);
// x = 1

x = addTwo(x);
// x = 3

x = addThree(x);
// x = 6

x = addFour(x);
// x = 10
You can also add functions as members of an object.

var bird = {
     chirp: function() {
          alert("chirp!");
     }
};
Now you can call on bird.chirp.

Another way to use functions is with self-executing functions. These are extremely useful and widely misunderstood. Check out the following example.

(function() {
    var x = "Hello!";
    alert(x);
})();
In this example the function will execute automatically and "Hello!" will be alerted to the user. Since this function is encapsulated the variable x will not be accessible from outside. If you take a look at the source code for jQuery you will notice that the developers use this often. In doing so only the functions they assign to the window object are accessible outside of their code. Which keeps the document tidy.

]]> Tue, 29 Sep 2009 08:05:59 -0400 http://www.pushingbuttons.net/?An_Introduction_to_JavaScript_Functions http://www.pushingbuttons.net/?An_Introduction_to_JavaScript_Functions Get Browser Function in ASP http://feedproxy.google.com/~r/pushingbuttonsblog/~3/_lfP8mJ6Oow/ In an earlier post I explained how to create a custom function in PHP to retrieve visitor browser information. The same can be done in ASP. In an earlier post I explained how to create a custom function in PHP to retrieve visitor browser information. The same can be done in ASP.

Function getBrowser()
     Dim regex, hits : Set regex = New regexp : regex.Global = True : regex.IgnoreCase = True
     Dim versmatch : versmatch = "(\);)?(\w*[\/|\s|-]\d+[\.\w]*(\s\[\w+\])?(\sMobile)?)?"
     Dim check, checks, agent : agent = Request.ServerVariables("HTTP_USER_AGENT")
     Set checks = server.createobject("Scripting.Dictionary")
     With checks
          .add "AOL", "(AOL)"
          .add "Avant Browser", "(Avant Browser)"
          .add "MSIE", "(IE)"
          .add "Chrome", "(Chrome)"
          .add "Navigator", "(Netscape|Navigator)"
          .add "Iceweasel", "(Iceweasel)"
          .add "SeaMonkey", "(SeaMonkey)"
          .add "Firefox", "(Firefox)"
          .add "Safari", "(Version|Safari)"
          .add "Nintendo Wii", "(Opera)"
          .add "Opera", "(Opera)"
          .add "Firebird", "(Firebird)"
          .add "Kazehakase", "(Kazehakase)"
          .add "Iceape", "(Iceape)"
          .add "Phoenix", "(Phoenix)"
          .add "Playstation 3", "(Playstation 3)"
          .add "PSP", "(Playstation Portable)"
          .add "Googlebot", "(Googlebot)"
          .add "msnbot", "(msnbot-Products|msnbot)"
          .add "Yahoo! Slurp China", "(Yahoo! Slurp China)"
          .add "Yahoo! Slurp", "(Yahoo! Slurp)"
          .add "Ask Jeeves", "(Ask Jeeves)"
          .add "Cuil", "(Twiceler)"
          .add "Mozilla", "(Mozilla)"
          .add "BlackBerry", "(BlackBerry)"
     End With

     getBrowser = "unknown"
     For Each check IN checks
          regex.Pattern = check
          Set hits = regex.Execute(agent)
          if hits.count > 0 then
               regex.Pattern = checks.item(check) & versmatch
               Set hits = regex.Execute(agent)
               getBrowser = replace(replace(replace(hits.item(0), "/", " "), ");", ""), "-", " ")
               Select Case check
                    Case "Safari"
                         getBrowser = replace(getBrowser, "Version", "Safari")
                    Case "Navigator"
                         getBrowser = replace(getBrowser, "Navigator", "Netscape")
                    Case "msnbot"
                         getBrowser = replace(getBrowser, "Products", "")
                         getBrowser = replace(getBrowser, "msnbot", "Windows Live")
                    Case "Cuil"
                         getBrowser = replace(getBrowser, "Twiceler", "Cuil")
                    Case "Nintendo Wii"
                         getBrowser = replace(getBrowser, "Opera", "Nintendo Wii (Opera)")
                    Case "BlackBerry"
                         getBrowser = replace(getBrowser, "BlackBerry", "BlackBerry ")
               End Select
               Exit For
          End If
     Next
End Function

]]> Wed, 23 Sep 2009 11:44:04 -0400 http://www.pushingbuttons.net/?Get_Browser_Function_in_ASP http://www.pushingbuttons.net/?Get_Browser_Function_in_ASP Custom Get Browser Function in PHP http://feedproxy.google.com/~r/pushingbuttonsblog/~3/mohkzLDeFfs/ A while back I was trying to use PHP's get_browser function, which should return an array of information. It takes the visitor's user agent value and parses it to do this. It turns out that in order to use get_browser you must have browscap configured correctly in your php.ini file. In my case this wasn't really an option since the server I was working on does not allow access to the ini file.So, if you find yourself in a similar case then the best option will be to parse the user agent yourself. A while back I was trying to use PHP's get_browser function, which should return an array of information. It takes the visitor's user agent value and parses it to do this. It turns out that in order to use get_browser you must have browscap configured correctly in your php.ini file. In my case this wasn't really an option since the server I was working on does not allow access to the ini file.

So, if you find yourself in a similar case then the best option will be to parse the user agent yourself. The following function is something I threw together to do just this. It will return a string revealing the visitor's browser and version.

function getBrowser() {
     $versmatch = '(\);)?(\w*[\/|\s|-]\d+[\.\w]*(\s\[\w+\])?(\sMobile)?)?';
     $agent = $_SERVER['HTTP_USER_AGENT'];
     $result = 'unknown';
     $checks = Array(
          'AOL' => 'AOL',
          'Avant Browser' => 'Avant Browser',
          'MSIE' => 'IE',
          'Chrome' => 'Chrome',
          'Navigator' => 'Netscape Navigator',
          'Iceweasel' => 'Iceweasel',
          'SeaMonkey' => 'SeaMonkey',
          'Firefox' => 'Firefox',
          'Safari' => 'Version Safari',
          'Nintendo Wii' => 'Opera',
          'Opera' => 'Opera',
          'Firebird' => 'Firebird',
          'Kazehakase' => 'Kazehakase',
          'Iceape' => 'Iceape',
          'Phoenix' => 'Phoenix',
          'Playstation 3' => 'Playstation 3',
          'PSP' => 'Playstation Portable',
          'Googlebot' => 'Googlebot',
          'msnbot' => 'msnbot-Products msnbot',
          'Yahoo! Slurp China' => 'Yahoo! Slurp China',
          'Yahoo! Slurp' => 'Yahoo! Slurp',
          'Ask Jeeves' => 'Ask Jeeves',
          'Cuil' => 'Twiceler',
          'Mozilla' => 'Mozilla',
          'BlackBerry' => 'BlackBerry'
     );

     foreach($checks as $key => $check) {
          if(preg_match('/(' . $check . ')/', $agent) > 0) {
               preg_match('/' . $key . $versmatch . '/', $agent, $matches);
               $result = str_replace('-', ' ', str_replace(');', '', str_replace('/', ' ', $matches[0])));
               switch($check) {
                    case 'Safari':
                         return str_replace($result, 'Version', 'Safari');
                         break;
                    case 'Navigator':
                         return str_replace($result, 'Navigator', 'Netscape');
                         break;
                    case 'msnbot':
                         return str_replace(str_replace($result, 'Products', ''), 'msnbot', 'Windows Live');
                         break;
                    case 'Cuil':
                         return str_replace($result, 'Twiceler', 'Cuil');
                         break;
                    case 'Nintendo Wii':
                         return str_replace($result, 'Opera', 'Nintendo Wii (Opera)');
                         break;
                    case 'BlackBerry':
                         return str_replace($result, 'BlackBerry', 'BlackBerry ');
                         break;
               }
          return $result;
          }
     }
}
Some examples of its return value are 'MSIE 7.0,' 'Firefox 3.0.10,' 'Chrome 2.0.172.33' and 'Safari 525.20.' It may not be the most efficient way to do this, but it gets the job done.

]]> Wed, 23 Sep 2009 06:04:44 -0400 http://www.pushingbuttons.net/?Custom_Get_Browser_Function_in_PHP http://www.pushingbuttons.net/?Custom_Get_Browser_Function_in_PHP Prototype's Element.identify() in MooTools http://feedproxy.google.com/~r/pushingbuttonsblog/~3/nGkQqASJr1U/ Prototype.js has a method, Element.identify(), that can be very useful. It is used to retrieve the ID of a given element. If one does not exist it first generates and assigns one and then returns that.&nbsp;To implement this in MooTools you can add the following code.&nbsp;Element.implement&#40;&#123;      identify: function&#40;&#41; &#123;           if&#40;!$type&#40;this.get&#40;'id'&#41;&#41;&#41;                this.set&#40;'id', genID&#40;0&#41;&#41;;           return this.get&#40;'id'&#41;;           function genID&#40;num&#41; &#123;                num++;                if&#40;!$type&#40;$&#40;num.toString&#40;&#41;&#41;&#41;&#41;                     return num;                return genID&#40;num&#41;;           &#125;      &#125; &#125;&#41;; Prototype.js has a method, Element.identify(), that can be very useful. It is used to retrieve the ID of a given element. If one does not exist it first generates and assigns one and then returns that.

 

To implement this in MooTools you can add the following code.

 

Element.implement({
     identify: function() {
          if(!$type(this.get('id')))
               this.set('id', genID(0));
          return this.get('id');

          function genID(num) {
               num++;
               if(!$type($(num.toString())))
                    return num;
               return genID(num);
          }
     }
});
So, if you have the following elements

<span class='xyz'>Lorem</span>
<span class='xyz'>Ipsum</span>

<div id='2'>Dolor</div>
and you execute the following in MooTools which applies identify() on each span

window.addEvent('domready', function() {
     $$('span.xyz').each(function(span) {
          span.identify();
     });
});
then you will end up with the following HTML.

<span class='xyz' id='1'>Lorem</span>
<span class='xyz' id='3'>Ipsum</span>

<div id='2'>Dolor</div>
As simple as this is, it becomes very useful when dealing with dynamic content. You can now use the $ function to select distinct elements. But, beware that in CSS trying something like

#1 {
     color:red;
}
won't work in most browsers. When applying style to an element the element's ID should start with a letter. But you can still use JavaScript to apply any attributes.
]]> Tue, 22 Sep 2009 11:29:38 -0400 http://www.pushingbuttons.net/?Prototypes_Elementidentify_in_MooTools http://www.pushingbuttons.net/?Prototypes_Elementidentify_in_MooTools Utilizing PHP's Trim http://feedproxy.google.com/~r/pushingbuttonsblog/~3/YLipEYZOA04/ PHP's trim() is often underused. Usually web developers throw it in simply to prevent leading and trailing white spaces, but that's about it. What a lot of people seem to overlook is the fact that there is an optional second parameter which can make things a whole lot more useful.A simple use of trim() would be something like this$s = &quot;   There are some white spaces around me    &quot;; echo trim&#40;$s&#41;;You can expect that this will result in "There are some white spaces around me." Pretty simple. Now, let's assume that you are looping through an array of strings and have produced a single comma separated string. PHP's trim() is often underused. Usually web developers throw it in simply to prevent leading and trailing white spaces, but that's about it. What a lot of people seem to overlook is the fact that there is an optional second parameter which can make things a whole lot more useful.

A simple use of trim() would be something like this

$s = "   There are some white spaces around me    ";

echo trim($s);
You can expect that this will result in "There are some white spaces around me." Pretty simple. Now, let's assume that you are looping through an array of strings and have produced a single comma separated string.

$arr = Array('green', 'purple', 'gold', 'orange');
$s = '';

foreach($arr as $a) {
     $s .= ', ' . $a;
}

echo $s;
This will output ", green, purple, gold, orange." But we don't want that leading comma and space. If you applied trim() like we did above it wouldn't change the string at all. But by passing a second parameter which defines what characters you will be trimming you can get the results you are looking for.

$arr = Array('green', 'purple', 'gold', 'orange');
$s = '';

foreach($arr as $a) {
     $s .= ', ' . $a;
}

echo trim($s, ', ');
This will output exactly what we want, "green, purple, gold, orange." It is important to understand that the second parameter ', ' is stating that any occurrence of either character at the beginning or end of the string will be trimmed, as you can see in the following.

$s = "Hello World!";

echo trim($s, "dH!");
Since this trims any occurrence of either 'd,' 'H,' or '!' we end up with "ello Worl."

]]> Wed, 16 Sep 2009 13:13:52 -0400 http://www.pushingbuttons.net/?Utilizing_PHPs_Trim http://www.pushingbuttons.net/?Utilizing_PHPs_Trim