Sep
28
2008
0

What’s JSON?

Have you ever heard about JSON? I’m almost sure you have.

JSON (JavaScript Object Notation) is an easy to handle and understand data format used everywhere.

As its name says, it’s based on the way that JavaScript can handle objects, like this:

var myCar = {
	color: 'red',
	doors: 5,
	wheels: 4
};

It’s easy to understand, isn’t it? I have a red car, that have five doors and four wheels.

Now imagine some data got from a database in this format. It would look like this:

var users = [
{ name: 'E. Myller', genre: 'male' },
{ name: 'Voziv', genre: 'male' },
{ name: 'K. Hellen', genre: 'female' },
{ name: 'Elomar', genre: 'male' }
];

It’s also easy to understand, right? We have four users: E. Myller, Voziv, K. Hellen and Elomar.

“Ok, uncle eMyller. It’s pretty beautiful and clean. Any other reason that would make me use it from now on?”

Yes. The usage. Now you can, for example, handle that data got from a database as a simple JS object. Take this example, using the previous code:

while (user = users.shift()) {
	alert(user.name);
}

Easy to understand: it loops through the users and shows the name of each of them.

Many languages today have native support for it. At web, it’s even more useful because we can join some JSON data with Ajax requests and get awesome results easily.

Use your creativity and do things quickly and easily with JSON!

Written by E. Myller in: Good practices | Tags: ,
Sep
28
2008
0

How to load external scripts

Sometimes we, for some reason, need to load external scripts to be executed in our page. This post might help with some ideas about it.

There are, basically, two ways for loading scripts.

  1. Using a normal HTTP request
  2. Or using Ajax (XMLHttpRequest)

You can use both, depending on your needing. But what are the differences between them?

  1. Using a normal HTTP request, you append scripts from anywhere (cross-domain) which content is loaded only asynchronously.
  2. Using some Ajax, you can load text asynchronously or not, but you can’t get scripts from outside the domain/port you are (not normally, maybe the browser allow it, but not all browsers).

What’s the better? There’s no better. Just like always, it depends on what you are planning to do. So, are you trying to just execute a script? Or are you trying to get it and execute it so other code will be able to run? - It’s all about time. Loading the script sync/asynchronously makes the difference here.

So, if you need the script exaclty now, i mean, if the code must wait for the script, the solution is use sync Ajax. Otherwise, if the code can wait some milisseconds/secods (or it really doesn’t need to wait anything), you can use a normal HTTP request. Okay, but how?

Doing it using pure JavaScirpt is not that fun. It requires some code, and it can be annoying. So, let’s take a library (I’ll use utm here) to do the stuff). Take a look:

// loading the script asynchronously, normal HTTP request
u.append('script[type="text/javascript"][src="myscripts/some.js"]');
// we can add from another domain/port too:
u.append('script[type="text/javascript"][src="http://site.com/js/some.js"]');

The code above will basically simulate a simple script tag on the BODY of your document (yes, the BODY element is the best place to put scripts in. Why?)
In the other hand:

// I'll need a function called "show", that is in another script in my own domain.
var script = u.append('script[type="text/javascript"]');
// the 'true' here says it to do the request synchronously
script.text( u.get('myscripts/some.js', true) );

// now we can proceed. =)
show(...);

Choose which is better for what you need to do. ;)

Written by E. Myller in: Good practices, HowTos, utm Library | Tags: , ,
Sep
28
2008
3

SCRIPT tag on HEAD can be evil

“Huh? But uncle eMyller, I always put my scripts on the HEAD tag. Why is it evil?”

The most reason for it is that the DOM is not fully loaded when the script runs from the HEAD element. Ok, lemme explain.

If you have this:

<html>
  <head>
    <script type="text/javascript">

    alert(document.getElementById('field').value);

    </script>
  </head>
  <body>
    <input type="text" id="field" name="field" value="something"/>
  </body>
</html>

What do you expect? Maybe a cute window showing the word “something”? Yea? Oh, sorry. You won’t get this. You’ll get an error that your script will throw. Okay, but the input has the ‘field’ id, doesn’t it? Yup, it has. But why it didn’t work?
Take a look at the script. See where it is looking for your input element. Exactly, the input is being called before it exists (the script is at the HEAD element, and the INPUT is on the BODY).

“Ok, uncle eMyller. But jQuery, for example, can make it work.”

No, it can’t, jQuery is good, but is not magic. All it can do is execute that script only when the DOM - the page’s elements tree - is fully loaded, using the $.ready thing. Advantages? No.

I’m almost sure you already got a problem like this and spent some minutes (or hours) to find what was going on. Okay, now you now why. So, what’s the solution?

Why not just get all your scripts and place them before the BODY’s ending? Try it:

<html>
  <head></head>
  <body>
    <input type="text" id="field" name="field" value="something"/>

    <script type="text/javascript">

    alert(document.getElementById('field').value);

    </script>
  </body>
</html>

Did it work? Yes? Great. Advantage? Yes. Now you don’t need any trick to verify if the DOM is loaded. The script will just run and all the document stuff will be available.

And it is valid - you won’t get any XHTML validation error. Put scripts on the html’s head is just a code convention, but it can take you to some needless headaches. So, the best place to put all our scripts is at the html’s body, right at its ending (before ).

Written by E. Myller in: Good practices | Tags:
Sep
05
2008
3

Debugging on IEs

I was - again - in a quest to find a good version of Microsoft’s Internet Explorer 6 for MS Windows Vista. Don’t know how, but I found in a brazilian blog a really nice solution: IETester, from the DebugBar team.

It provides us IE5.5, IE6, IE7 and IE8b1 and the already installed IE version. It means, If you have IE8b2 installed on your Windows PC, you can have all the IEs for testing your web project on!

And this is one really cool feature of IETester: We don’t need keep restarting the browser to switch the IE version. We just need to open a new tab, selecting the version we want. Nice, uh?

We just have some little issues about the application:

  • The content disappear when we resize the application window
  • The Previous/Next buttons are not working properly
  • Focus is not working properly
  • Java applets are not working
  • Flash is not working on IE6 instance.

But I think that if we need IETester to run JavaScript/CSS/Images test, we don’t need to worry about these ‘problems’.

It’s a great tool! I highly recommend it for anyone who need to test web projects on various IE versions. And the DebugBar team also offers some really awesome tools for debugging in IE (JS console, DOM inspector, etc). Check it out!

Written by E. Myller in: Debug | Tags: ,
Aug
30
2008
4

The utm Project

Some years ago, I was developing some web sites, and I started to learn JavaScript. For me, it was just a language that do make things blink on the page. No, it wasn’t. To tell the truth, JavaScript is my preferred programming language. It’s incredibly growing, being implemented in more platforms for more technologies (like hardware accelerated 3D games). Then, some time later, I started out to write some JS stuff, just for learning and, also, for personal use. Now I know, it’s funny, nice to work with. I just love it and the fact that I work with what I like: JavaScript.

After some huge steps (hundreds of failures and success), I came up with my own JS tool, the utm (Some time ago called ImpactAjax and Spark). But why another one JS framework? Not just “another one”. I’m planning to build the most useful library seen so far. How? Getting all the best ideas i saw so far plus all my own ideas, join them up, simplify the usage and prepare a great platform for development, all open-source, totally. Something complete, with many options, but that everyone (even beginners or advanced programmers) can easily do what they want.

I want the simplest. I want the most powerful. I want the fastest. In just some kb of compressed stuff. I want to break paradigms, bringing something really new and cool.
But it’s still not done for the real world…

Sounds interesting?
If yes, I’d ask for your help. I’m alone in this project now and I have not enough time to work on it as I’d like to do. So, if you’re interested on the idea and would want to contribute with anything, please feel free to join our little group at ##utmjs on irc.freenode.net or just post a comment here.

What we need for now:

  • Testing
  • Documentation
  • Suggestions / opinions
  • Ideas
  • Or anything you’d like to contribute with

I’d be soooo glad if you join the project! Let’s make utm grow and be usable!

If you wanna see the code, get it from my utm’s git repo or download it from the site.

Thanks in advance!

Written by E. Myller in: utm Library | Tags: , ,

Powered by WordPress | Aeros Theme | TheBuckmaker.com WordPress Themes