brain bumping

Blog moved

Sun, 20 Feb 2011 12:00:10 -0500

Hey! This is old! This blog has moved to http://timmywillison.com

Flash + IE = &^

Sat, 18 Dec 2010 13:19:10 -0500

So my colleague @blahed said I should write a blog post about this problem I had. I said it would be short post and it would go something like this….”Don’t use Flash”. But I guess I’ll expound.

Let’s put it this way. Flash is like your fist. And IE is like the rusty nail that gives you tetanus and makes you die. Working with one is bad…working with both causes infections in your intestines. And it hurts.

Recently, I needed to embed a swf and all I wanted it to do was play when it became visible and stop when it wasn’t visible. But if you’ve ever had to write an actionscript interface for your swf (for instance play and pause functions you can call from javascript), you may have run into problems with ExternalInterface.addCallback. There is a wonderful post that explains all of the pitfalls when using this function here.

Basically it says you can’t put the swf inside a form (which wasn’t my problem), you should use something like swfobject to embed your swf (which I was through jquery.media), and, here’s the kicker, THE FLASH FILE MUST BE VISIBLE ON THE PAGE. That’s right. If you’re functions aren’t working…it may be because the swf isn’t visible. You might be asking, “Does this go for all browsers?” Of course not dummie, only IE. Instead, I made the swf autoplay whenever it is attached to the DOM and I had to just attach and detach it whenever it should play or stop.

Here’s that jQuery (stopOldMovie starts out as the callback from $.media, then I can call it without params once the movie is saved as loopMovie):

    var loopMovie;

    /** Append the movie */
    function playOldMovie () {
        loopMovie.appendTo('#webcam-loop');
    }
    
    /** Stops/detaches the movie */
    function stopOldMovie ( orig, newDiv ) {
        if ( loopMovie === undefined ) {
            loopMovie = $(newDiv).detach();
        } else {
            loopMovie.fadeOut(400, function() {
                $(this).detach().show(); // fadeOut applied display:none so .show afterwards to remove this rule
            });
        }
    }

VHF

Sun, 14 Nov 2010 23:37:42 -0500

VHF

Friday Fun: Rapping puppets that are awesome.

Fri, 30 Jul 2010 17:58:00 -0400

Friday Fun: Rapping puppets that are awesome.

password123 Version 1.1 with placeholders

Mon, 05 Jul 2010 15:58:00 -0400

I was trying to think of problems that people might come across in using this plugin and the first thing that came to mind was placeholders. They are getting more popular these days, especially since they’re so easy now with HTML5. So, it took some work, but password123 1.1 will support any placeholders you put in the html. Like so…

OR for the HTML5 enchanced…

An option allows you turn off the placeholder functionality and just have a regular default value. Another advantage is you can choose to have the placeholder masked or unmasked, and of course the virtues of gracefully unobtrusive javascript are still upheld. I admit I had mentioned the word “placeholders” before, but they were just default values without the focuses and blurs.

password123

Sun, 04 Jul 2010 22:58:00 -0400

As you know, I recently went a little berserk with iPhone-style password fields. I was thoroughly invigorated by the challenge of this seemingly simple idea. I wanted to write a plugin that would conquer and destroy the inadequate dPassword plugin from decaf (see link in previous posts)…mission accomplished my friends. *applause and bashing of heads*

Some fixes and differences from their version:

1. Adding/deleting characters in the middle works

2. Cursor position stays the same when you type or delete in the middle of a password.

3. Cursor position stays the same if you put the cursor somewhere besides the end before the timeout changes the last character.

4. When you do a select-all delete, it will not be buggy.

5. I’ve taken out the interval and debug options. If someone is knowledgeable enough to debug or change the interval, they can go into the code themselves so I don’t have to increase download size for everyone else.

6. You can have default values in the fields if you want. Just do it as you normally would, put it in the html… and password123 takes care of it. It was better to do it this way than have an option for all elements because you can keep element-specific placeholders.

demo: http://timmywillison.com/samples/password123/
github: http://github.com/timmywil/password123/

BUG FIXED (iPhone-style passwords)

Sun, 06 Jun 2010 23:00:00 -0400

That bug I knew I had with the password fields is now fixed! It was refreshing to veer away from the comfort of jQuery get my hands dirty in raw js.

I thought this was an interesting bug, which was you couldn’t delete a character from somewhere in the middle of your entry and have it be correctly duplicated in the hidden field that actually gets sent with the form. I needed to detect the position of the text cursor, which jQuery doesn’t do at all. The solution turned out to be simple; this is what I ended up with:

// Gets the current cursor position in a textfield // to determine where to delete a character getCursorPosition : function(field) { // IE if (document.selection) { field.focus (); var sel = document.selection.createRange(); sel.moveStart ('character', -field.value.length); return sel.text.length; } // OTHERS else if (field.selectionStart || field.selectionStart == '0') return field.selectionStart; // Something went wrong else return -1; }

All that’s left now is turn it into a plugin and give people options.

See the result at: http://www.timmywillison.com/samples/iphone_passwords/iphone_passwords.html.

Password Inputs, iPhone style with jQuery

Fri, 04 Jun 2010 01:35:31 -0400

DECAF came out with a jQuery plugin last year called ‘dPassword’ for replacing password fields with iPhone-style password fields. However, I find the plugin deficient and buggy. I certainly give them credit for taking a crack at it because this is not a trivial problem to solve. Nevertheless, I find it a little amusing that the live demo on their page is broken.

And that was the best I could find. So, I’m in the process of writing my own. It’s not plugin style yet, but everything is functional.

I handle sending the real password a little differently. I replace the password input field with a hidden input to keep track of the real value. This hidden input gets the same ID and name as the original so this is the one that will get sent with the form. And of course I add the text field that you type in. The text field has a custom ID for any styling that may need to be affixed and is given the same classes as the original password field; it will simply get ignored since it doesn’t have the right id or name. I won’t go through all the magic of changing the values.

There is one known bug: you can’t delete a letter in the middle of the password and have it be represented correctly in the hidden input. I can’t imagine anyone actually does that, but it should probably be able to do that. That will be the next benchmark.

DECAF plugin: http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/.

My demo: http://timmywillison.com/samples/iphone_passwords/iphone_passwords.html.

condiment of choice

Mon, 17 May 2010 22:08:00 -0400

I needed to post that I wrote a jQuery plugin providing an easy way to customize info windows and pins on a google map.

See http://github.com/timmywil/jquery-google-bubbles for more info.

Word is getting around: best HTML5 presentation

Tue, 20 Apr 2010 10:15:22 -0400

Word is getting around: best HTML5 presentation

Devchatt - Frank and Die Neue Javascript

Sun, 04 Apr 2010 15:16:54 -0400

Devchatt is quickly becoming old news, but I wanted to go ahead and post these two presentations because I need a reliable place for refreshers. Frank by Travis Dunn and Die Neue Javascript by Noah Burney were two of my favorite presentations.

Side note: My other favorites were about incremental development by James Long (jlongster.com) and an introduction to Haskell by James Sanders, but I won’t be posting about those for a few reasons. They were both excellent, but Long’s would be long post I don’t have time for and Sanders only got 1/3 or so of his presentation finished (hoping to hear the rest sometime).

Frank

As Travis eloquently put it, Frank is not a framework. It is simply a tool for rapid static builds, written in Ruby. It uses Tilt, so it comes with support for Haml & Sass, LESS, Builder, ERB, Liquid, Mustache, and CoffeeScript. It has a built-in local webserver and an excellent lorem ipsum interface. You can generate a certain number of words, paragraphs, images, emails, names, and more on the fly to get your static build out quickly.

I played with frank a little bit and used it for a big online form I’m building. Normally, even with Coda’s excellent autocomplete, this would take me at least 2.5-3 hours just to write the html for a form this size. Frank cut that time in half and made it really easy to get together and compile the form into valid HTML and CSS in no time. Another bonus: clear and concise error message made it easy to debug any problems on the way. Also, the ducks are fun.

Cons: I don’t like SASS, but it’s optional. Besides that, there seems to be a problem with the haml compiler generating completely valid transitional xhtml, but that was easy to fix and not Frank’s fault. All in all, Frank is no ugly duckling.

Get Frank: http://github.com/blahed/frank

Die Neue Javascript

Ah, Noah. Noah’s a 19-year-old genius who’s been doing javascript since he was 15 and teaches himself Korean while building letterforms in his spare time. I loved his presentation on ‘the new javascript’.

He started off with one of the most important javascript conventions: don’t infect the global namespace! He stressed the importance of the var keyword and explained that when you don’t use it, you’re make your variable part of the global window object.

He then listed some little tricks to clean up javascript. For instance:

Use commas to var a bunch of things at once. var one, two, three;
Objects are basically associative arrays in javascript and can be referred to as such. alert(‘Hello’); window.alert(‘Hello’); window[‘alert’](‘Hello’);
You can define functions with var = function(){};
Use javascript’s ternary operator to make conditionals shorter and when you just want to return a value.

- Next, you can add to and modify native objects. For instance,

Number.prototype.times = function( fn ){
  for( var n = 0; n < this; n++ )
    fn( n );
};

( 5 ).times( function( x ){
  say(
    x + 1 + ' Hello' + ( x > 0 ? 's' : '' )
  );
});

- Use call and apply for adding arguments to functions you call. The first being the context. Normally, this would just be null to have the window as the context. However, “you can use Native object methods on other objects by using call, and passing the object in as the context.”

var list = [ 1, 2, 3 ];
Array.prototype.push.call( list, 4, 5, 6 );

Function.apply is similar to call, but takes an array for the function arguments, which can be very handy.

- Inside of every function, lives the ‘arguments’ variable, meaning any arguments passed to the function that were not named in the function declaration.

function echo2(){
  say( arguments[0] + arguments[1] );
}
echo2( 'POW!', 'BOOM!' );

- Javascript Progress Bar. As we know, Javascript is single-thread, meaning it chugs through the code one line at a time. In order to implement a progress bar in Javascript, the magic line is in the setTimeout. Doing a setTimeout(f, 0) will ensure that f, any function, will get executed last as it just pops f to the bottom of the call stack. Check it out:

var counter = 0,
    total = 0;

loadup( plug, chug, plug, function(){ alert("WEEEEE!"); }, chug, plug );

function loadup(){
  var fns = Array.prototype.slice.call( arguments );
  if( typeof fns[0] === 'function' )
    total = fns.length;
  else
    fns.shift();

  fns.shift().call();
  fns.unshift( 'Not first' );

  if( fns.length > 1 )
    setTimeout( function(){
      loadup.apply( null, fns );
    }, 0 );

  say( ++counter + '/' + total );
}

function plug(){
  for( var n = 0; n < 3000; n++ )
    $('').appendTo('body').remove();
}

function chug(){
  for( var n = 0; n < 5000; n++ )
    for( var o = 0; o < 8000; o++ )
      n % o;
}

- To conclude, he ended with an example from John Resig’s Secrets of the Javascript Ninja where computationally expensive functions can be optimized by storing computed values instead of recalculating every time. Like so:

// Ripped from John Resig's Secrets of the JavaScript ninja
Function.prototype.memoized = function( key ){
  this._values = this._values || {};
  return this._values[key] !== undefined ?
    this._values[key] :
    this._values[key] = this.apply(this,arguments);
};

Function.prototype.memoize = function(){
  var fn = this;
  return function(){
    return fn.memoized.apply( fn, arguments );
  };
};

var isPrime = function( num ) {
  var prime = num != 1;
  for ( var i = 2; i < num; i++ ) {
    if ( num % i == 0 ) {
      prime = false;
      break;
    }
  }
  return prime;
};
var isPrimeM = isPrime.memoize();

Check out his presentation and play with his code: http://presentation.royowl.com/#slide-0.
See his homepage.

Easter Fun

Sun, 04 Apr 2010 12:56:31 -0400

In the terminal: type emacs, enter, esc, X, then type ‘snake’ or ‘tetris’, enter. Two games you never knew you had!

The Wonderful World of HTML5

Sun, 28 Mar 2010 00:07:24 -0400

I’ll make this short and sweet — here’s all the slides and such from my DevChatt presentation on HTML5. Hell, let’s go totally mental and post EVERY link in the slides to go with it.

All the source code is available under the MIT License. Slides are licensed CC-BY-ND.

The Important Stuff

All the “Reference” links

Canvas (Mozilla Developer Center)
Audio (Mozilla Developer Center)
Video (Mozilla Developer Center)
Geolocation API (Mozilla Developer Center)
Geo.js (Geo.js Documentation)
HTML Web Storage (Mozilla Developer Center)
HTML SQL Web Storage (WebKit Blog)
Web Workers (Mozilla Developer Center)

Select HTML5 Resources

DEVCHATT (and a post about current)

Sat, 27 Mar 2010 17:55:00 -0400

Asking all devchatt presenters to post about their presentations here! Or, send me a short summary of what you talked about so I can post it here if you don’t have a tumblr account. shearbox@gmail.com. I enjoyed all of the presentations I went to. I’ll be posting about all the ones I went to, so I apologize to the ones I missed.

I’ll go chronologically and being with the first presentation I went to (current built with node.js by Rob Righter).

(wow that was three ‘I went to’s)

I’m sure I will butcher his presentation, but let’s do it anyway.

Basically, node.js is an evented server built with javascript (which makes sense for keeping track of events), meaning instead of the usual back-and-forth communication between client and server, you send a request, if the server doesn’t have anything yet, it will tell the client to wait, keep the connection open, and send back the requested data when it is updated. The server can handle many concurrent connections and the client is the one who keeps track of its own progress. If it has no progress, it gets everything, if there are updates, it gets those after passing the server a data address of sorts in its request.

Current is a great example of this. All it does is pull the favicons from sites that people at Medium headquarters visit and you’ll see a flow of tiny images running across the screen as pages are visited in real-time. Pretty sweet, and I’m sure you can see how this could be useful in web applications. Apps that look the same for everyone, but are updated in real time and something every user can interact with. This makes me think of google wave, but they’ve got their own crap.

Please comment to add something or feel free to correct me.

See current in action.

See it on Rob’s github (as well as the comet AJAX long polling project that makes current possible).

See his slides (easy read). (These will be gone someday)

((more parentheses))

Comments coming

Wed, 24 Mar 2010 11:30:53 -0400

This blog is meant to be a community blog. I really should have comments on here, but didn’t realize when I chose tumblr that they don’t support that natively (which I think is dumb). I’ll be hacking in some disqus so we can all here from the masses (and those loving trolls).

devchatt cometh, pre-devchatt goith, i write something..ith

Sat, 20 Mar 2010 02:44:00 -0400

I can think of no better way to start off the this blog than to talk about devchatt presentations. First, if you don’t already know, DevChatt is a free developers conference in Chattanooga, TN. pre-devchatt was today and was a taste of things to come. We had Chris Mills from Opera come and talk to us about HTML5 and CSS3. His project list and titles are vast, but he is involved in web education, opera evangelism, and other stuff. Plus he plays in a metal band, has a cool English accent and the best goatie short of this guy…

To the point, his presentation was fairly basic. He touched on many of the generally supported features of the two specs. Much of it you may already know, but I’ll show you some of the cool stuff.

1. Less code and easy accessibility for common structures. Notice the lack of divs:

2. Machine readable timestamps -

27 June 2010
Chris's 32nd birthday
8PM on my birthday
8PM on my birthday—in Tokyo

3. New Input Types( range, date, url, email ) plus validation

required>

4. I group these together because I suspect everybody has heard about these. Yes, they rock. I get down on my knees and thank the Lord Almighty we don’t have to use flash anymore. That is, if they can ever work out which codec to use.

The fun fighting part where people get bloody noses and then nothing happens: Basically, there are two main video codecs being argued over for video playback in HTML5. Mozilla and Opera want Ogg Theora (an open source codec), Microsoft and Apple want H.264 (patented) having both had a hand in creating it. Google has come into the ring (as they always do), with a solution proving yet again that they might take over Venus after this world. They acquired one called On2.

Now if they open it up for free use to everyone, they might just get their codec in the HTML5 spec. If not, we’ll keep fighting until Microsoft and Apple give in to open source, every company except Microsoft and Apple pays $60 million to use H.264 in their browsers, or, like I said, Google expands their enterprise to Venus, enslaves the aliens on that planet, finds a way to jump over this argument, and then provides all of us with a universal element built by white apparitions from another planet who hypnotise Microsoft into dropping IE6 for good. YAYYAYAHAHAAYAY!

I got carried away….

5. Related to that last part, IE doesn’t support crap. IE9 is showing some improvement but Paul Irish ran his test on the most recent beta release and got 50% as a grade for support. That’s about 3 or 4 times better than IE8, but still….it fails by academic standards. Segway: we can use excanvas for simulating a canvas element in IE and raphael js with svg for vector graphics, but hopefully these workarounds won’t be needed much longer (at least not before Google gets back from Venus! We bitches are goin down!)

6. Let’s move on to CSS3.
   a. text-shadow: #444 2px 2px 2px;
   -multiple shadows assignable
   b. box-shadow
   c. opacity: 0-1 (use filter: alpha(opacity=1-100) in IE)
   d. rgba (a for alpha (opacity)) - color: rgba(255, 255, 255, 0.5);
   e. haven’t used, but i hear designers like this: hsl colors. Rather than using rgb, you can use hsl format to specify how much light you want in your color.
   f. border-radius (this is the one im most excited about being in IE9, that one did make it)
   g. multiple background images (yup, not just one)

7. Transitions(duration-set animation abilities) and transforms (rotating, scaling, moving things around, skewing)- there’s a lot here. We’ve got 2D animations. Webkit is experimenting with 3D. We’ve got a guy building video games on a canvas with CSS animations. super mario, super mario kart, wolfenstein.

Play super mario in 14kb javascript

8. Typography - This is very much needed in the world of web development. siFr is slow and buggy and there’s really no good way on the web to do custom web fonts, especially if they’re dynamic. This is the solution: @font-face.

Fonts usually come in ttf, otf, or eot format. This all works right now in IE. You just need the right syntax for your download declarations, then whenever you want to use a custom font in your css, it’s the same as before: font-family: ‘My Font’. Check out Paul Irish’s post on bulletproof, cross-browser syntax for @font-face.

The only disadvantage to @font-face is licensing. Some fonts are free, others require a license to use. When you use @font-face, you make your font available to the public for download from wherever you download it. That doesn’t make the font creators very happy sometimes, so just make sure you have the proper permission before using @font-face.

9. Attribute Selectors - Hey! You got a little regex in my css. yum.

a[href^="mailto:"] - select all mailto anchors
a[href$=".co.uk"] - select all anchors ending with .co.uk (british links)
a[title*="chris"] - select all anchors that have chris in the title
a[title*="chris"]:before { content: url('images/heart.jpg'); }- before and content tags. Stick some content before all the anchors that have chris in the title.
tr:nth-child(even) - select all even tr’s

10. Lastly, isn’t there a way to check if a browser supports a specific HTML5 or CSS3 feature? YES! Faruk Artes and Paul Irish created Modernizr. Check it out at www.modernizr.com.

Thanks to Chris Mills, Medium, and all of the sponsors of DevChatt. Expect many posts next weekend when all the mischief and craziness happens. DevChatt is March 26-27. See devchatt.org for more info.

Chris Mills’ blog on Opera: http://my.opera.com/chrismills/blog/
His slides for his presentation can be downloaded in a pdf here: http://my.opera.com/ODIN/blog/university-talk-resources-march-2010-html5-css3-slides
All the cool stuff Opera is doing for us developers can be found at dev.opera.com.

On a side note, thank you to wyattdanger (Stephen Bush) for the first outside contribution to this blog. Check out the videos on python. Much appreciated.

This is part of a great series of Python screencasts. This...

Sat, 20 Mar 2010 00:24:12 -0400

This is part of a great series of Python screencasts. This particular video discusses some basic python list functions (filter, map, and reduce).

Audio

Fri, 19 Mar 2010 22:52:00 -0400

about

Fri, 19 Mar 2010 22:49:00 -0400

Let me explain what this is. I intend this blog to be a community blog about technology. Anyone with a tumblr account can post here (see ‘submit it’ below). I realize ‘technology’ is rather general, but I think through the vicious process of natural selection, the theme will eventually become more specific.

I’ll be posting coding tutorials, quotes from Noah ‘the sex’ Burney, and philosophical tidbits basking in the glory of front ends and back ends (you heard right). If you ever have a question, feel free to ask it (see below).

In addition, I am concerned about the pretentious, self-admiring nature of blogs (hence the community aspect) so I will aspire to allow this concern to influence what I write and what I approve to be posted. For instance, I will not be posting about my dog’s strangely sideways and aerodynamic genitals….again…..maybe.

So let’s do some brain bumping and maybe we’ll learn something.

"get ready for some brain bumping…"

Thu, 18 Mar 2010 22:17:37 -0400

“get ready for some brain bumping…”

brain bumping

Blog moved

Flash + IE = *&^*

VHF

Friday Fun: Rapping puppets that are awesome.

password123 Version 1.1 with placeholders

password123

BUG FIXED (iPhone-style passwords)

Password Inputs, iPhone style with jQuery

condiment of choice

Word is getting around: best HTML5 presentation

Devchatt - Frank and Die Neue Javascript

Easter Fun

The Wonderful World of HTML5

DEVCHATT (and a post about current)

Comments coming

devchatt cometh, pre-devchatt goith, i write something..ith

This is part of a great series of Python screencasts. This...

Audio

about

"get ready for some brain bumping…"

Flash + IE = &^