Blog: JavaScript

  • Google Closure Compiler Bundle for Laravel Released

    Feb 28, 2012

    We use the Google Closure Compiler to compress our JavaScript files in order to reduce page load times. When writing HeyBigName.com using Laravel 2.x it was implemented as a library. After having converted the code-base to Laravel 3.x we're repackaging much of our functionality into bundles.

    Laravel's bundle system allows for developers to package libraries, models, migrations, routes, collections of MVC components, or entire sites into modular components that can be installed from a call on the command-line.

    I highly encourage you to check out Laravel as 3.x is stable and production-ready. The documentation is good and the community is growing very quickly. In all honesty I see Laravel as the new baseline in which all other PHP frameworks should be judged. (not including full-stack frameworks such as Zend or Symfony)

    Check out our bundle on the Bundle Page or on GitHub.

  • AJAX with jQuery: A Simple Login Example

    Apr 15, 2009

    In this screencast we explore the jQuery $.post() command in order to create a simple AJAX login script that also gracefully degrades and works for users who do not have JavaScript enabled.

    You may want to check out my post "What Exactly is JSON?" if you're not familiar with the JavaScript Object Notation before watching.

  • What exactly is JSON?

    Apr 15, 2009

    JSON is short for JavaScript Object Notation.  It's a notation used to create JavaScript objects.

    JSON looks like this:

        {
        name: "Shawn McCool",
        language: "English"
        }
    

    When evaluated by JavaScript or decoded with another language you'd end up with an object like the one below.

    person.name is equal to "Shawn McCool" person.language is equal to "English".

    Since using JSON allows you to easily serialize arrays and objects, it's often used during AJAX calls and web services. Below are some examples of the JavaScript Object Notation.

        var myArray = ['cat', 'dog'];
        var myObject = {animal: 'cow'};
        alert(myArray[0]);  // outputs 'cat'
        alert(myObject.animal); // outputs 'cow';
    

    A standard set of interactions for an AJAX login script might be:

    1. JavaScript client (browser) posts username and password to PHP.

      $.post('/ajax.php', {
      username: $('input[name=username]').val(), 
      password: $('input[name=password]').val()
      }, function(data) {}, 'json');
      
    2. PHP authenticates the information against the database then generates a response which is json_encoded and sent to the browser.

      $user = $this->auth_model->Login($_POST['username'], $_POST['password']);
      
      if($user)
          $data['success'] = true;
      else
          $data['success'] = false;
      
      echo json_encode($data);
      
    3. JavaScript client ‘eval’uates the JSON which creates an object. JavaScript client then determines behavior based on the data in the object.

      $.post('/ajax.php', {username: $('input[name=username]').val(), password: $('input[name=password]').val()}, function(data) {
          if(data.success)
          {
              // login succeeded
          } else {
              // login failed
          }
      }, 'json');
      

  • AJAX with jQuery: The Beginning

    Mar 26, 2009

    This is the first in a series of screencasts that I'm creating to highlight the AJAX functionality present in the open source Javascript framework jQuery. In this screencast I give a brief overview of AJAX as well as delve into our first jQuery command.

    AJAX stands for Asynchronous JavaScript and XML.