Archive for February, 2011
Making Text 3D
1As I do frequently, I check out a lot of posts from various tech blogs to see what I can learn. I came across this post when I was searching for knowledge, and I realized (as I do frequently), that I could use this in about 847 places. That usually works out to only ever getting used once or twice, but the inspiration is there. And the root of any useful bit of code is inspiration. So, I decided to make a quick little jquery plugin to be able to make any bit of arbitrary text three-dimensional.
Great Wisdom
0The koan below is liberally borrowed, but I most recently found it on an excellent article by Nick Morgan. If you are learning about closures in any language, both his article and the koan are excellent resources.
Dumb Tinkering, Revisited
15Saw this link come up online today from the formidable Chris Coyier, where he said he was doing some dumb tinkering to get the results he shows on his demo page. Well, that got me inspired. And when I get inspired, I write. Sometimes it’s stories. Sometimes it’s code. I suppose it depends on what’s inspiring me.
So, I got industrious and turned Chris’ work into a jQuery Plugin, which I have named letterScroll.
That’s using your head…er()
0This is just a quick tip that I know has been demonstrated in other places, but it’s one that I have used frequently to provide an excellent solution to a variety of problems.
If you are using any kind of language on the back-end of your web application (PHP, Python, Ruby, Perl, etc) then you will eventually find yourself in the position of having to send different types of content. It may be XML, it may be a PDF file, it may be streaming video. Whenever you are in this situation, you need to change the Content-type that is sent back to the client. In PHP, you would do this with the header() function. In Python, it’s send_header() with the BasicHTTPServer. Ruby has various methods depending on whether or not it’s Rails or CGI, etc. Ultimately, your back-end code needs to designate to the client that something other than text/html is coming down the pipe.
The reason I think this is worth mentioning is because you can also designate a type that is just for JavaScript. This means that you can assemble your JavaScript dynamically on the server side, and have it get read by your browser just as if it was a .js file!
Logical Looping
0As sad as it is, this is the fifth and final installment in my series 5 Things Everyone Could Learn from The jQuery Source. Please feel free to comment!
5) Logical Looping
How many times have you seen or written the following code:
for (x=0;x<y.length;x++) {
loopity(x);
}
We’ve all done it, it’s a sin we’ve all committed at one point or another. These loops are a hallmark of a sloppy code. Many people go on to that next level, and optimize this loop like this:
var l = y.length;
for ( x=0; x < l; x++) {
loopity(x);
}
Cash in on Caching (aka The This or That Debate)
0I hope you’ve been enjoying the first three installments of 5 Things Everyone Could Learn from the jQuery Source. Here is the fourth installment.
4) Cash in on Caching (aka The This or That Debate)
Caching variables is a perfect example of one of the most common (but yet poorly-implemented) practices that JavaScript/jQuery developers do. Caching is making a copy of a variable that you are going to be referring to multiple times later in your code. This is usually done to improve efficiency. Here is an example of code that could benefit from caching:
if (document.getElementById("mainbody")) {
doSomeStuffIfItIsMain(1);
}
doSomeStuffYouAlwaysDo();
if (document.getElementById("mainbody")) {
doSomeStuffIfItIsMain(2);
}
Testing Type
0This is the third post in the series 5 Things Everyone Could Learn from the jQuery Source:
3) Testing Type
As discussed above, making sure that the type of our objects is correct goes a long way towards building better code. Sometimes, we need to do a test to make sure that a variable is the correct type before we take an action on it. This could happen in cases where we don’t have full control over things like user input (and honestly, who DOES have full control over user input? Users don’t even have full control over what they input), or when a function may return different data types depending on the results of its internal processing. In a case like this, we need a reliable way to test what the type of our variables is. Although it happens in other places before this, I’m going to pick line 789 and the following code as my example:
if ( typeof key === "object" )
Explicit Equivalence
0Here is the second in the series on 5 Things Everyone Could Learn From the jQuery Source:
2) Explicit Equivalence
Sometimes, it’s not enough to verify that two things are ‘mostly’ the same. We want to make sure that they are completely and totally the same. JavaScript (as well as several other programming languages) give you the ability to determine if two things are explicitly equal by changing the operator we use to test. You will see the following example code (NOT in jQuery source) very frequently:
If we are reading this in plain English, we would say ‘If the value of x is equal to 2, do some cool stuff’ and that would be just fine. (more…)
Building Better Objects
0Here is the first in the series on 5 Things Everyone Could Learn From the jQuery Source
1) Building Better Objects
One of the things which is most remarkable about the jQuery source is the efficiency. This code has been stripped down pretty much as far as it can be, making it leaner and meaner than most other frameworks out there. The technique I am going to show you here is a perfect example of that, as well as being a very good coding practice that all developers should be using. On line 317 of the jQuery 1.5 source, we have the following code:
target = arguments[0] || {},
So, what this says is: You have a variable named ‘target’, and into it we want to store some stuff. Because that’s what variables are for. Like your Dad’s garage, they are for storing stuff that you will (hopefully) use later. Into target, we want to store the first member of the arguments array. How do we know arguments is an array? Well, we don’t really. And even if arguments was an array, we don’t have a guarantee that we will have something useful stored in arguments[0]. (more…)
5 Things Everyone Could Learn From the jQuery Source
0Okay, let me just start off by saying that in the world of web software development, jQuery is a tool that I use every single day. As such, it’s a tool that has taught me a great deal about how to accomplish what I want to do in wise, efficient ways. Getting involved with the jQuery community by blog-surfing and attending a number of online conferences regarding jQuery has taken my skills and brought them to another level. To be inspired the same way that I have, check out a copy of the jQuery source at http://code.jquery.com/jquery-1.5.js. This post is targeted at the developer who knows how to read and write JavaScript but isn’t a full-fledged ninja yet. Ideally, if you’re reading this, you’re a developer that wants to take your skills to the next level.
A good example of how the jQuery source can inspire is the ’10 things I learned from the jQuery source’ webcasts (there’s a sequel, too) by Paul Irish. Paul Irish (http://www.paulirish.com) is a member of the jQuery team who has done a couple of very informative webcasts going through some great things that are contained in the jQuery source code. If you haven’t seen them, I highly recommend going through them. Check out his site for those goodies and more development goodness that is there. He gives a lot to be learn, however I have also noticed that the better you are at JavaScript and jQuery, the more likely you are to get some solid value out of his webcasts. It’s like watching the Godfather. It’s a great story, good movie. But if you’re a film buff, or work in the industry, you quickly see the brilliance that is that movie.
In that spirit, I want to offer five things that everyone should learn from the jQuery source code. These are tips and techniques that will improve your skill as a coder, and ultimately make you a better developer. And that’s what we’re all after anyway, right? Plus, these are small improvements in how you write your code meaning they are more accessible to the novice to intermediate developer. So, without further adieu, let’s get started. The next five posts you’ll read will all be dedicated to this theme.
