Kris "Justise" Gray http://www.justise.com Programming - Development Mon, 28 Dec 2009 16:59:27 +0000 http://wordpress.org/?v=2.9 en hourly 1 Self executing recursive javascript functions http://feedproxy.google.com/~r/BlackBeltCoder/~3/EAbBGIxrr5o/ http://www.justise.com/2009/12/28/self-executing-recursive-javascript-functions/#comments Mon, 28 Dec 2009 16:59:27 +0000 Kris Gray http://www.justise.com/?p=426 The title is intimidating, but fear not. This will be short, sweet and probably really easy to understand. And you'll have something to impress me with in interviews if you ever have the pleasure.

Why?

A while back I was writing some code and it turned out it was executed by two different code paths. In one case, the control was all ready and the code needed to be executed right away. In the other case, the control wasn't ready but would be shortly after the window.load event has been fired. Yea I'm not explaining it very well, but really it doesn't matter, lets see code.

Code

PLAIN TEXT
JavaScript:
  1. var isLoaded = false;
  2.     (function() {
  3.         if(isLoaded) {
  4.             document.getElementById("out").innerHTML = "Loaded";
  5.             return;
  6.         }
  7.        
  8.         // Every 10th of a second call this method again.
  9.         document.getElementById("out").innerHTML += "Trying Again<br/>";
  10.         setTimeout(arguments.callee, 100);
  11.        
  12.         // If your inside an object, you probably want to keep the THIS pointer.
  13.         // For that, you would do the following.
  14.         // var self = this, fn = arguments.callee;
  15.         // setTimeout(function() { fn.call(self); }, 100);
  16.        
  17.         // The page will be loaded in 3 seconds
  18.         // We would probably want to wait for something like
  19.         // a DOM event, but its just sample code. So...
  20.         setTimeout(function() { isLoaded = true; }, 3000);
  21.     })();

We have both techniques of the example in use here, a self executing anonymous function, and a recursive function.

For the self executing anonymous function, we are wrapping our function in parenthesis and then calling it just like any other function.

PLAIN TEXT
JavaScript:
  1. // The anonymous part
  2. (function(){})();

For the self executing part, we get a reference to the function using arguments.callee, which just so happens to be itself. With it we can use a setTimeout to have the function try again later. We could have just kept calling it, but with javascripts single threaded nature, I would think nothing would happen while your calling your function over and over.

PLAIN TEXT
JavaScript:
  1. (function(){
  2. // BAD
  3. // At least in our case. You could have
  4. // a perfectly justifiable reason for doing this
  5. // though.
  6. arguments.callee();
  7. })();

You can see a live example of this code here

]]> http://www.justise.com/2009/12/28/self-executing-recursive-javascript-functions/feed/ 0 http://www.justise.com/2009/12/28/self-executing-recursive-javascript-functions/ IE 6, 7, 8 Only CSS http://feedproxy.google.com/~r/BlackBeltCoder/~3/d4jga6AVt6M/ http://www.justise.com/2009/12/22/ie-6-7-8-only-css/#comments Wed, 23 Dec 2009 01:24:41 +0000 Kris Gray http://www.justise.com/?p=418 Introduction

This topic doesn't really need an introduction, so lets move on!

Options

DOM wrappers using Conditional Comments

This is the technique used by the jQuery UI site. The basics are that if you wrap your entire page in a DIV with the browser version as the class name, you can just add extra rules to your one stylesheet that will get picked up. Then you can use conditional comments to show the appropriate DIV when necessary.

PLAIN TEXT
HTML:
  1. <body id="home">
  2. <!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
  3. <!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
  4. <!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
  5.  
  6.  
  7. <!--[if lte IE 7]></div><![endif]-->
  8. </body>

With this solution, you can include all your CSS in one file, so everything is tidy and theres no extra web requests necessary.

It comes at the cost of your HTML cleanliness, but its overall very minimal.

Conditional Stylesheets

Using the same trick as above, you can include stylesheets conditionally on IE with conditional comments. The abilities of the conditional comment syntax is quite powerful, it seems like its wasted doing just stylesheet inclusion.

PLAIN TEXT
HTML:
  1. <!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

This is probably what I would suggest to most of you out there. Its quick, un-invasive and you can pretty much throw it out there and only worry about it when you really have to do something for just IE.

Let the server do it

I only mention this because I work in an enterprise environment that does just that. It includes an IE version of the stylesheet you referenced if the user is browsing in IE.

So if you have a stylesheet Calendar.css and you navigated to the page using IE, you would get tags for both Calendar.css and Calendar_ie.css. If of course Calendar_ie.css exists.

CSS Hacks, Syntax and Selector

So I'm regurgitating a bunch of information from this Web Dev Out CSS Hacks page which is that there are some CSS hacks based on selector engine parsing issues that are possible.

The primary options are those which are valid CSS, as invalid CSS is much more likely to cause you problems down the line.

Here's some of the selectors from that article.

IE 6 and below
* html {}

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}

Recent Opera versions 9 and below
html:first-child {}

Its perfectly understandable that these may be your only options at the moment, but the chance they come back to bite you is so much higher as to make conditional comments worth your effort.

So, what to use?

Well, I tend to use the conditional extra stylesheet method, but between that and the DOM inclusion which are both good options its really up to you. You'll still have the comfort of knowing that your doing things the right way, and that the next .0.0.1 version of FireFox, IE, or WebKit won't break your site and bring down the internet.

]]> http://www.justise.com/2009/12/22/ie-6-7-8-only-css/feed/ 2 http://www.justise.com/2009/12/22/ie-6-7-8-only-css/ JS Methods, static and instance http://feedproxy.google.com/~r/BlackBeltCoder/~3/sJhSzSjGur8/ http://www.justise.com/2009/12/21/js-methods-static-and-instance/#comments Mon, 21 Dec 2009 18:53:29 +0000 Kris Gray http://www.justise.com/?p=408 When you start having objects in your code, its only natural that methods would follow. With methods there are many different ways to define them, all have various side effects so it'll be important to know why one is preferable to the other.

Instance method in object

PLAIN TEXT
JavaScript:
  1. function FooObject() {
  2.    this.mBar = function(){};
  3.    this.mBlah = fnBlah;
  4. }
  5.  
  6. function fnBlah() {}

Here we have an object FooObject, and every time we instantiate it, it gets methods of mBar and mBlah on it.

The primary thing to consider here is that every time you instantiate an instance of FooObject, a new copy of the function assigned to mBar is created. So we have a memory penalty.

We also get two extra operations which assign functions to the two method properties of our FooObject for each new instance of FooObject.

Though because mBar's function is defined inside of the FooObject, it does have access to its scope via closure. Which is something.

Instance method on prototype

PLAIN TEXT
JavaScript:
  1. function FooObject() {};
  2. FooObject.prototype = {
  3.    mBar: function() {},
  4.    mBlah: fnBlah
  5. }
  6.  
  7. FooObject.prototype.mBoo = fnBoo;
  8.  
  9. function fnBlah(){};
  10. function fnBoo(){};

Assigning to the Prototype of your new class has some major advantages. The prototype object is consistent for each instance of the FooObject, so you don't have extra operations for each method you assign on each object instance.

You can specify a new blah method that will inject itself as first into the chain to be called, yet still maintain a copy of the old method.

PLAIN TEXT
JavaScript:
  1. // New FooObject with a blah method which alerts a string.
  2. function FooObject(){};
  3. FooObject.prototype = {blah: function(s){alert(s)}};
  4.  
  5. // New instance of Foo Object
  6. var x = new FooObject();
  7.  
  8. // Redefine the Blah method, now it should prompt instead of alert.
  9. x.blah = function(s) { prompt(s,s); };
  10.  
  11. // Call the original blah method which alerts.
  12. FooObject.prototype.blah.call(x, 'asdf');
  13.  
  14. // Call the blah method on our instance, it will prompt not alert.
  15. x.blah('xyz');

A note about assigning to the prototype though, if your doing inheritance, you've just blown up your inheritance chain. Here's some code to show you what I mean.

PLAIN TEXT
JavaScript:
  1. function Animal(){};
  2. function Cat(){};
  3.  
  4. // Cat is an animal
  5. Cat.prototype = new Animal();
  6.  
  7. // Uhhh yea, now its no longer an animal
  8. Cat.prototype = { 'meow': function(){} }

Its because of this most (all?) of the JS Libraries out there would end up Iterating over the Animal class and assigning all its properties to the Cat prototype. Its a bit of a brute force technique, but its what must be done.

The only thing I dislike about this method is how clean looking it is. I'm not a fan of having your methods declared after your object all the way down the page, its just not very easy on the eyes. But with using a method like Mootools's Class.Implement you can still use this basic technique with it still looking good.

Static Methods

With static methods, we want to call the method from the definition of the object, not an instance of it. Since functions are essentially objects themselves, we can add whatever we like to them.

PLAIN TEXT
JavaScript:
  1. function Animal() {};
  2. function Cat(){}
  3. Animal.GetName = function(petObj){};
  4.  
  5. // This works
  6. Animal.GetName(new Cat());
  7.  
  8. // FAIL!
  9. new Animal().GetName(new Cat());

Since Static methods are declared on the declaration it doesn't get inherited. Thus, there is no Cat.GetName().

]]> http://www.justise.com/2009/12/21/js-methods-static-and-instance/feed/ 1 http://www.justise.com/2009/12/21/js-methods-static-and-instance/ Google Sites Data API Prototype http://feedproxy.google.com/~r/BlackBeltCoder/~3/7AHu_VwOKeI/ http://www.justise.com/2009/12/19/google-sites-data-api-prototype/#comments Sat, 19 Dec 2009 21:32:03 +0000 Kris Gray http://www.justise.com/?p=412 I've made note of my fondness of Google sites before.

This project originated from the need to consolidate our JSDocs into a single search able source with all our other data. As that data is all in Google Sites at the moment, integration with Google Sites seemed the sensible choice.

Last thing I want to mention is that I don't claim to be super knowledgable on this topic, I'm only going to talk about what I've experienced in developing this prototype.

High Level

Google provides REST API's for a lot of its services as well several different client libraries to interact with said REST API's without having to worry to much about xml, namespaces and such.

I used the gdata-javascript-client in this example as its more my specialty.

In the js client, for getting the content feed (which is the listing of your sites information) you'll want to login, instantiate a GoogleService, and make a getFeed call using the GoogleService instance. Lets get to the prototype to see how we do that.

Prototype

In my prototype, I have 3 buttons that allow you to login, get your content feed, and then update one of the pages with new HTML.

Here's a link to the Prototype. Be aware, you'll need to to change the URL's to a google site you control (probably), otherwise you won't be able interact with its API. (At least not the update, the get should work)

Here's the full text of that prototype.

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  5. <title>Sample using the Google data JavaScript client library</title>
  6. <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css">
  8.     blockquote { margin: 2px 6px; padding: 0; border: 1px solid silver; }
  9.     span { display: block; font: 11px Arial; color: #999; }
  10.     input { border: 1px solid #333; margin: 3px 0 12px 0; width: 600px; }
  11.     textarea { width: 600px; height: 300px; }
  12.     h3 { display: block; margin: 0; padding: 0; height: 25px;}
  13.     #out { margin: 10px 0 0 0; border: 2px solid #F00; }
  14. </style>
  15. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  16. <script type="text/javascript">
  17.  
  18. /* Loads the Google data JavaScript client library */
  19. google.load("gdata", "2.x");
  20.  
  21. function init() {}
  22.  
  23. function logMeIn() {
  24.     var nameOfMyGoogleServiceThatIsTotallyMadeUp = "test-app";
  25.     var scope = "http://sites.google.com/feeds/";
  26.     var token = google.accounts.user.login(scope);
  27.    
  28.     service = new google.gdata.client.GoogleService("jotspot", nameOfMyGoogleServiceThatIsTotallyMadeUp);
  29. }
  30.  
  31. function get() {
  32.     var feed = document.getElementById("siteUrl").value;
  33.     logMeIn();
  34.     // Call the content feed, pass the result to the output function
  35.     service.getFeed(feed, output);
  36. }
  37.  
  38. function update() { 
  39.     var pageId = document.getElementById("pageId").value;
  40.     logMeIn();
  41.     // Get an entry object for the page
  42.     service.getEntry(pageId, function(entryRoot) {
  43.    
  44.         // $t indicates the text of the content node.
  45.         // We are setting it to whats in the textarea.
  46.         entryRoot.entry.content.$t = txt();
  47.         service.updateEntry(pageId, entryRoot.entry, output, output);
  48.     });
  49. }
  50.  
  51. function output(obj) {
  52.     if(!obj) { out('Watch was passed nothing');}
  53.     out((function(o) {
  54.         var s = [];
  55.         for(var i in o) {
  56.             s.push([i, '=', o[i]].join(''));
  57.             if(!o[i]) {
  58.                 continue;
  59.             } else if(o[i].constructor == Object) {
  60.                 s.push('<blockquote>' + arguments.callee(o[i]) + '</blockquote>');
  61.             } else if(o[i].constructor == Array) {
  62.                 for(var c=0;c<o[i].length;c++) {
  63.                     s.push('<blockquote>' + arguments.callee(o[i][c]) + '</blockquote>');
  64.                 }
  65.             }
  66.         }
  67.         return s.join('<br/>');
  68.     })(obj));
  69. }
  70.  
  71. function out(str){ document.getElementById("out").innerHTML = str; }
  72. function txt() { return document.getElementById("updateText").value; }
  73.  
  74. google.setOnLoadCallback(init);
  75.  
  76. </script>
  77. </head>
  78. <body>
  79.     <button onclick="logMeIn()">Login</button>
  80.     <button onclick="get()">Get Content of Site</button>
  81.     <button onclick="update()">Update</button>
  82.     <br/>
  83.     <h3>Site Id</h3>
  84.     <input type="text" id="siteUrl" value="http://sites.google.com/feeds/content/site/justisetest"/>
  85.     <br/>
  86.     <h3>Page Id</h3>
  87.     <span>Obviously you should get this programmatically, but its a prototype so yea...</span>
  88.     <input type="text" id="pageId" value="http://sites.google.com/feeds/content/site/justisetest/8416968326017325843"/>
  89.     <br/>
  90.     <textarea id="updateText"><h1>updated!</h1></textarea>
  91.     <div id="out">
  92.    
  93.     </div>
  94.     <img src="bullet.jpg" border="0"/>
  95.    
  96. </body>
  97. </html>

Login and instantiate a service

PLAIN TEXT
JavaScript:
  1. var scope = "http://sites.google.com/feeds/";
  2.     var token = google.accounts.user.login(scope);
  3.    
  4.     service = new google.gdata.client.GoogleService("jotspot", nameOfMyGoogleServiceThatIsTotallyMadeUp);

Here we are logging into the google service using oAuth, then we create a new GoogleService object, passing the type of service we want to interact with. (Which is jotspot) Then we supply just some name for our application.

Getting the content

PLAIN TEXT
JavaScript:
  1. var feed = document.getElementById("siteUrl").value;
  2.     logMeIn();
  3.     // Call the content feed, pass the result to the output function
  4.     service.getFeed(feed, output);

The feed URL for my little public site is http://sites.google.com/feeds/content/site/justisetest

So thats what I plug into our service's get feed. (It gets declared as a global variable in the logMeIn() call)

Its an async call, so it doesn't return anything, it passes the result to an onSuccess function.

My onSuccess function is just a method that takes something and outputs it to a div, so its basically a kind of a little watch window.

Updating content

PLAIN TEXT
JavaScript:
  1. var pageId = document.getElementById("pageId").value;
  2.     logMeIn();
  3.     // Get an entry object for the page
  4.     service.getEntry(pageId, function(entryRoot) {
  5.    
  6.         // $t indicates the text of the content node.
  7.         // We are setting it to whats in the textarea.
  8.         entryRoot.entry.content.$t = txt();
  9.         service.updateEntry(pageId, entryRoot.entry, output, output);
  10.     });

The Page id I just stole from the content field, which I'm basically hard-coding.

Ensure I'm logged in, and then I make a call to the service to request the entry object.

Once my onSuccess function is called, I update the entry's page text, and then use the service to update the entry again.

Those two output calls are the onSuccess and onError functions, which right now just output the result.

Thats it

Obviously a lot left to figure out, but I think once you've got to this point, you can actually start exploring the features of the API without having to figure out how to the most basic of operations.

]]> http://www.justise.com/2009/12/19/google-sites-data-api-prototype/feed/ 0 http://www.justise.com/2009/12/19/google-sites-data-api-prototype/ I moved desks, Upgrade? Strangely yes. http://feedproxy.google.com/~r/BlackBeltCoder/~3/Ms0PfTfBq3U/ http://www.justise.com/2009/09/23/i-moved-desks-upgrade-strangely-yes/#comments Wed, 23 Sep 2009 17:28:22 +0000 Kris Gray http://www.justise.com/?p=388 At Salesforce, we have a 3 building setup here at One Market, there's two gray ugly towers, and one nicer brick building. The towers are named Spear and Steuart for the streets they are on, and then the nice brick building we call Landmark, I'm not exactly sure why. The Development teams were spread out over two of the buildings Spear and Landmark and someone decided it would be good to get the teams as close together as possible. It was decided that all us devs would consolidate to the Landmark building, which meant I had to move from my Spear tower desk. Here's a picture of spear here (Its the taller one on the right).

The Spear Tower

I had a nice spot too, a pretty good view, quick access to the beer fridge, and close to the team. Here's my desk.

Desk in Spear Tower

Yes its one small side desk with two gigantic 24" monitors on it, and I'm in a small corner with a large palm. But it has a nice view!

Spear Tower View

I was a mixed bag of emotions. I did have some nice perks; good view, was sitting right next to the important members of my team, and then there was that I wasn't sure where we were headed. But since I had about 10" of desk space after all my computer equipment, I figured the trade off might be worth it.

We ended up on the 3rd floor of the Landmark building at One Market Plaza in San Francisco, which you can't deny is a sexier building.

Landmark at One Market

Here's my new desk.

IMG_0378

And my new view! Yay! (Sarcasm!)

Landmark View

As you can expect, being here only a half dozen months the re-org was able to give the better window seats to the more senior developers, though I would expect nothing less especially if I was one of those senior developers myself.

The move turned out much better then I imagined. I'm amazed that any company gets anything like this right when presented with an opportunity, but Salesforce did a really good job. The manual labor was provided for us, all we had to do was box and label our personal items, computer equipment and chairs and it showed up at our designated cubes the next morning with our computer equipment already setup.

The Landmark building was as big a character upgrade inside as it was outside. Its colored better, its got exposed brick walls, and its just a better feel.

Our desks are great, they went from an ugly gray (or white in my case) to a nice speckled wood color, the cubicle walls are a bit lower so you can see peoples top of their heads but looking around doesn't weird anyone out and make them stop working. Also with the open desk layout vs enclosed cubicles, we have a tendency to converse from our chairs and break out in random friendly conversations a bit more. We still get just as much work done so its not at the expense of work, but I think its more efficient conversation time.

So even though I lost out on my nice view, a larger desk, an office with some character, a much better color scheme and better cube layout won out.

]]> http://www.justise.com/2009/09/23/i-moved-desks-upgrade-strangely-yes/feed/ 0 http://www.justise.com/2009/09/23/i-moved-desks-upgrade-strangely-yes/ Adding your logo to the page in an SEO optimized way. http://feedproxy.google.com/~r/BlackBeltCoder/~3/SAVGWJ8k0Ok/ http://www.justise.com/2009/09/19/adding-your-logo-to-the-page-in-an-seo-optimized-way/#comments Sat, 19 Sep 2009 21:41:10 +0000 Kris Gray http://www.justise.com/?p=374 Everyone has one, either your name, your logo or some cute picture you use to discern that the user has landed on your little piece of the web. Here's mine just for reference.

But there is a specific optimal way to include it on your page.

The things to concern here.

  • Any images you add to page that are not content related but are theme related pollutes your markup with un-necessary elements and makes it harder to re-skin in the future.
  • Search engines can't read text from an image, so your primary identification doesn't get indexed.
  • If images aren't loaded (hey it happens, really!) they the visitor doesn't know where they are. There is the alt text of the image that doesn't load, but its size in comparison to the rest of the page is very poor.
  • What if you want to change your logo based on the page your on, or user activity, you'll need to change the img src, meaning script, or markup changes per page.

There's probably a few more, but you get the idea, beyond the Happy Path, using an image for your logo starts to cause problems.

The solution is actually beautiful in its simplicity, here's the markup you'll want to generate.

PLAIN TEXT
HTML:
  1. <a id="logo" href="[Your Site Address Here]" title="[Your Site Name Here]">
  2.         <h1>
  3.             [Your Site Name Here]
  4.         </h1>
  5.     </a>

and then you can pair this with some simple CSS to add our logo image.

PLAIN TEXT
CSS:
  1. a#logo { display:block; width: '[logo width]'; height: '[logo height]'; background: url('[logourl]') no-repeat; }
  2. a#logo h1,
  3. a#logo h2 { display: none; }

And then your pretty much done, here's what I would end up with for my site.

PLAIN TEXT
HTML:
  1. <a id="logo" href="http://www.justise.com" title="Kris Gray">
  2.         <h1>
  3.             Kris "Justise" Gray
  4.         </h1>
  5.     </a>

PLAIN TEXT
CSS:
  1. body { background: maroon; }
  2. a#logo { display:block; width: 185px; height: 63px; background: url(http://www.justise.com/wp-content/themes/justise/images/headerLogo.png) no-repeat; }
  3. a#logo h1,
  4. a#logo h2 { display: none; }

Why is this markup preferable?

If we render without images, and CSS, we still get a very big peice of text that lets the user know where they are.

What the Logo Looks like without CSS

What the Logo Looks like without CSS

We also use an H1 or an H2 (more on that later) to mark our logo text so that search engines realize that the text is important and they should give a large amount of weight to that text.

It was a question of mine at some point writing this if Search Engines really do index text that is hidden with display none? So I went and looked it up, and according to this SEO optimization post on "Do search engines index that" the answer is Yes, so lets move on.

We attach the image of our logo to the background image of the logo link, so we still have the flexibility of changing our logo at any time by just updating the CSS, while also being able to change the logo link based on its context in the document, such as a different parent class.

We will obviously want our logo linked back to the main page, its just a common standard, and so you'd need pretty much the same amount of markup if you were going to just insert an image.

Lastly, this w3c article on using the H1 tells us that we want to mark the most important text on the page with the H1 element. Since on the main page, that is most likely our logo this is fine, but on sub pages, we'll probably want the title of each blog post as the H1, so we'll want to make our logo now an H2. With the technique we are using here, it requires no change to the CSS, just a simple markup change.

]]> http://www.justise.com/2009/09/19/adding-your-logo-to-the-page-in-an-seo-optimized-way/feed/ 0 http://www.justise.com/2009/09/19/adding-your-logo-to-the-page-in-an-seo-optimized-way/ There’s a Javascript Magazine, and its really good! http://feedproxy.google.com/~r/BlackBeltCoder/~3/W-zR9eNRD2E/ http://www.justise.com/2009/09/15/theres-a-javascript-magazine-and-its-really-good/#comments Tue, 15 Sep 2009 21:59:35 +0000 Kris Gray http://www.justise.com/?p=359
The magazine for Javascript Developers.

I stumbled upon the JSMag website and decided to sign up and try out the trial PDF.

The magazine is put together by Michael Kimsal, who also does GroovyMag and he compiles articles from writers in the JavaScript community to publish in this online only magazine (is it an e-zine then?).

In the trial PDF your topics are

  • JazzRecord: JavaScript Databases Made Painless
  • The Red Pill: Functional Programming in JavaScript
  • Using Object Literals to Organize your Features
  • Community News

I've long been interested in Functional JavaScript programming, and so the article is pure candy. Its written well, I don't feel like I'm being talked down to, but I'm also able to keep up on a subject that is a shift from traditional programming concepts. The article was written by Robert Fischer, and I've gained a healthy respect for him from it.

The only real negative is the price, typically, I'll sign up for magazines and they will cost about 20 for a subscription, but JSMag actually costs $59.88 for a years worth of soft copies. Granted, you get a magazine devoid of advertisements, making it pure content, but its still a heavy price to pay for a magazine.

]]> http://www.justise.com/2009/09/15/theres-a-javascript-magazine-and-its-really-good/feed/ 4 http://www.justise.com/2009/09/15/theres-a-javascript-magazine-and-its-really-good/ Using Sizzle http://feedproxy.google.com/~r/BlackBeltCoder/~3/oulmGTrN87I/ http://www.justise.com/2009/08/31/using-sizzle/#comments Mon, 31 Aug 2009 21:42:41 +0000 Kris Gray http://www.justise.com/?p=355 Sizzle is a basic DOM selection engine utilizing CSS queries, available in most libraries available out there such as jQuery, Mootools, Ext, pretty much everything. Because of its overlap with the other libraries that your almost certainly have included in your project already the need for Sizzle is primarily for Custom Frameworks.

In enterprise, you'll typically have one of these frameworks being worked on that isn't based on an existing framework and has a really big need for great selector support, so Sizzle can probably find a really great niche there.

Using Sizzle is really easy, much to easy for a whole blog post really, but who cares. So here it is.

PLAIN TEXT
JavaScript:
  1. // arrayOfResult is just a flat array.
  2. var arrayOfResults = Sizzle("CSS.selector");
  3. // Simple enough right?
  4.  
  5. var allDivs = Sizzle("DIV");
  6. var divsWithBatmanClass = Sizzle("DIV.batman");

Its simplicity is really a large part of its beauty. Users who aren't used to using a selector engine should start to grasp it pretty quickly, we don't have a weird scalar($) value confusing those same people and it returns an array which has no special sauce attached to it for users to try to have to learn.

]]> http://www.justise.com/2009/08/31/using-sizzle/feed/ 0 http://www.justise.com/2009/08/31/using-sizzle/ Gunnar Optiks http://feedproxy.google.com/~r/BlackBeltCoder/~3/dLTaHqnjMPE/ http://www.justise.com/2009/08/28/gunnar-optiks/#comments Fri, 28 Aug 2009 05:35:58 +0000 Kris Gray http://www.justise.com/?p=342 Gunnar Optiks

Gunnars Optiks are indoor computer oriented glasses geared towards saving your eye's from the constant strain of staring at a flashlight all day. Most of the frames have a yellowish tint which is supposed to filter out harmful light, and then they also have a .25 focus which is supposed to allow words to stick out a bit more.

Yellowish Tint Effect

After hearing about these glasses I was intrigued, but didn't really consider getting them until I read that they are covered by VSP which is the most common vision plan out there. VSP will cover usually about 100 dollars of a pair of any eye glasses you want to get, so since the glasses are listed at around 75-100 dollars on their website I figured it would be free to try out.

I went down to Optiks (a random boutique) in the mall and tried out all of their different frames before settling on this pair in the Sheadog style. Unfortunetly they weren't a VSP provider, and it turns out if your in San Francisco its really hard to find a provider who carries Gunnars at this time so I ended up just buying them on Amazon. Since they were listed for about 100 on Amazon, and Optiks was selling them for 150, so yay!

After getting them, I'm not going to say I LOVE them, that wouldn't be exactly true, but...

Pros

  • They do help with eye strain, my eye's can stare at a monitor all day without feeling like they will de-focus and never see anything again. A big problem I had is at night after staring at a monitor all day, words would be very blurry but I haven't had that problem since getting the Gunnars.
  • I love the .25 focus they have, which makes words stick out.
  • I love the feel of the frames and the glasses on my face feel good. They don't feel cheap, though they are light and professional.
  • In my opinion the glasses look good, you don't look like your wearing sunglasses inside.

Cons

  • I'll still start programming for a while and forget I'm not wearing them, so the difference isn't that crucial.
  • My Headphones, which grip my head like a vice, squish the glasses a bit and make them hard to adjust. Not a problem for most, but tight headphones and Gunnars aren't a match made in harmony.
  • Items at a distance, say out a window are very blurry. Since it has a small focus adjustment to it, not a correction for most people, it screws up looking at distances. You'll end up taking them off every time you step away from your monitor.
  • I've got 3-5 VSP providers within 2 blocks of my office, and nobody carries these glasses! Frustrating...

Overall

I think I'm actually starting a trend at work, as several people are starting to consider getting the glasses themselves as eye strain is a big deal for us who sit in front of a monitor all day. It is totally worth it if you can get VSP to pay for them, even 2/3's of the price would absolutely be worth it.

My Boss wearing the Gunnars

My Boss wearing the Gunnars

]]> http://www.justise.com/2009/08/28/gunnar-optiks/feed/ 0 http://www.justise.com/2009/08/28/gunnar-optiks/ A shout out to Alvin Ashcraft’s Morning Dew http://feedproxy.google.com/~r/BlackBeltCoder/~3/3GnXgcsNgOk/ http://www.justise.com/2009/08/16/a-shout-out-to-alvin-ashcraft%e2%80%99s-morning-dew/#comments Sun, 16 Aug 2009 00:50:12 +0000 Kris Gray http://www.justise.com/?p=320 Alvin Ashcraft’s Morning Dew is an aggregating site of interesting blog posts out there, just like Jason Haley and Sam Gentile.

Recently Alvin featured one of my articles and I just wanted to give a shout out to Alvin and tell you to check out his blog.

]]> http://www.justise.com/2009/08/16/a-shout-out-to-alvin-ashcraft%e2%80%99s-morning-dew/feed/ 0 http://www.justise.com/2009/08/16/a-shout-out-to-alvin-ashcraft%e2%80%99s-morning-dew/