Web Dev

Wednesday, April 21st, 2010

How to Find & Delete a Specified Value From an Array in JavaScript

You would think that this would be part of JavaScript's core functionality, but... no. It's delete function leaves a value of "undefined" in place of the original. Using splice is the solution, but first you have to know the index of the element. These two simple functions make easy work of the task.

Object-oriented folk may want to enclose these functions within an extended array object (or extend the Array object, if that's your style):

var getArrayIndex = function(array, item){
    for (var i = 0; i < array.length; i++) {
        if (array[i] === item) {
            return i;
        }
    }
    return -1;
};

var deleteArrayItem = function(array, item){
    var index = getArrayIndex(array, item);
    if (index > -1) {        
        return array.splice(index, 1);
    }
    return array;
READ MORE» 				
   View Comments
                

Monday, April 19th, 2010

Typeface.js :hover workaround

A while ago I wrote a sIFR vs Typeface.js article, and ever since then I've seen hits to my site from people searching for a :hover workaround for Typeface. Here's a limited solution. It's using jQuery, but you could easily adapt this method to use another library (or none at all). I'll admit this isn't the most eloquent solution in the world, but this proved to be functional, so I thought I'd share.

var typefacehover = function (){                            
  $(".typeface-js").each(function(){
    //Get all the classes for an element. 
    var elementStyles = $(this).attr('class');
    elementStyles = elementStyles.split(' ');
    //Run through them and check for a :hover color property.
    var hoverColor;                                
    for (var i ... READ MORE» 				
   View Comments
                

Friday, January 8th, 2010

sIFR vs Typeface.js: The Verdict

[Update: If you're looking for the typeface.js :hover workaround, it's here]

Months ago, in my mission to find a good solution for using fancy fonts on the web, I had a choice between sIFR and typeface.js. sIFR uses Flash to render text, and typeface uses the <canvas> element (or VML in IE). Other than the difference in implementation, however, their feature-set looked about the same, at least for my simple purposes: they were both javascript driven, both allowed text to be selected, and they both looked damn good.

But typeface.js had one crippling debilitation. It didn't have :hover support. Weak. So I went with sIFR.

First, I found sIFR's configuration to be a pain. Well, that's OK. I only have to learn the setup once, then I can copy+paste my code.

Then I found that it had z-index issues in IE, particularly when using them as links and tying the :hover directive together with an image change. Annoying, but it's flash based and IE is always a pain. Fine.

Then I noticed that my jQuery animations (slide effects) were slowed down when sIFR elements were included in the animated element. Hmmm.
READ MORE»

View Comments

Wednesday, January 6th, 2010

How to check if a file exists using JQuery

The best way to do this is with an AJAX HEAD request. HEAD requests only ask for and return the header from the destination file, so they're much faster than POST or GET requests. Perfect for a simple file check.

It's also worth noting that a HEAD request also returns the content length and last modified date, and that jQuery has an "ifModified" option for the .ajax function that returns a boolean value.

Quick code snippet:

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error:
        function(){
            //do something depressing
        },
    success:
        function(){
            //do something cheerful :)
        }
});

Couldn't be easier!

Tags: code snippet
View Comments

Monday, December 14th, 2009

Clean, Tidy and Flexible Function Variables

The thing about functions is... they grow. They start off small and cute and useful, but over time you start to notice their little shortcomings, so you make them bigger, better, and more flexible. Unfortunately, if you're using PHP's default method of passing functions, which is based on the sequence the functions are given (i.e. function example($variable1, $variable2, $etc)) , things can get a little messy. The more variables a function can handle, the harder it is to remember the sequence they have to follow. Not to mention PHP 5 doesn't facilitate a way to skip variables. For example, this doesn't work: example($variable1, , $variable3, $etc).

The solution is to pass your variables on in an array. Here's the template that I use whenever I code a new function:

function example($args="") {
    $variable1 = $args['variable1']? $args['variable1'] : 'default';
}

And this is how you pass variables on to your function:

$args = array(
    'variable1' => 'value',
    'variable2' => 2,
    'variable3' => $etc
READ MORE» 				
   View Comments
                

Wednesday, December 9th, 2009

Code your own permalinks

Ever wondered how a CMS like WordPress creates those pretty URLs that resemble directory structures on the fly?Ever wondered if you could do the same thing with your own website or web app? Well you can, and it's ridiculously simple.

Step 1: You need to edit your .htaccess file to incorporate some mod rewrite rules. This is the code that we're going to use (the same code that WordPress uses):

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /yourcode.php [L]

What this does is capture the "filenames" (really just a URI string that comes after your site root), and pass them on in an array to the file of your choice, "yourcode.php" in this case. It does all this without changing the URL on the user's end. So now all we have to do is pick up those variables in our PHP code. We'll do that with this code in yourcode.php :

$uri = $_SERVER['REQUEST_URI'];
$vars = explode('/', $uri);

So now we've captured the elements of the permalink in our array $vars, starting with the second array object, $vars[1]. The first array object, $vars[0] will ... READ MORE»

View Comments

Tuesday, May 26th, 2009

News Bulletin: The Internet Says Hello to Typography

Will it be love at first sight or a bitter, bitter marriage with no possibility of divorce?

Pandora’s little black box is about to be opened. Soon, very soon, most common browsers will support the @font-face CSS directive. Web designers will have at their disposal any TrueType or OpenType font that legally allows for web embedding. What does that mean to you? Well, brace yourself for a web full of unreadable, kooky typefaces, messy grunge fonts, and lots and lots of imitation handwriting.

And that's not all. Designers will want to use commercial fonts that are meticulously designed with readability and balance in mind. Unfortunately, because the directive requires that the font file be downloaded by the client machine (and therefore accessible to anyone on the web), the use of said fonts will constitute a legal violation. So the fonts we hate will be given free reign while the fonts we love will remain private treasures.

That having been said, there is a bright side. I have a few predictions: Reputed foundries will release free, ... READ MORE»

Tags: font-face, typography
View Comments