Month: May 2013

I first learned about Codecademy last year and I immediately jumped into it and completed a few of the JavaScript courses and promptly forgot about it.

Lately I have been writing more and more JavaScript and jQuery to make interactive prototypes for work. I rate my JavaScript skills somewhere around intermediate and I am challenging myself to work my way up to expert by the end of the year. As a part of that personal challenge I have been reading a lot of JavaScript, jQuery, and Git books and websites, this is how I ended up back on the Codecademy website.

Compared to last year, Codecademy has made many improvements. The JavaScript courses have been updated, they still have plenty of ambiguous wordings that makes completing the lesson harder than it should be and many of the lessons don’t teach much more than how to cut-and-paste. But with some help from the available Forums, I finished the JavaScript courses in 4 days without too much trouble.

I really enjoyed the courses on inheritance and constructors. I am going to put that to use immediately and refactor a lot of code and use courses to make my code much easier to maintain, modify and re-use.

All that said, I did have some issues while working through the lessons. A handful of times, I thought I understood the task but just couldn’t get it to accept my answer. The forums were helpful but it was not easy to find questions/answers related to the exact lesson/task I was having trouble with. I would appreciate it if the forums were broken down by individual lessons instead of by whole class.

The in-browser coding environment is very slick, but in many of the lessons there were warnings from JSHint. Those warning were very distracting when I was starting out, after awhile I learned to ignore most of them.

Overall I enjoyed the Codecademy experience and I plan on continuing participating on the courses offered there. In between reading books and writing code, probably while on the couch in front of the TV, I will work my way through the Web Fundamentals, jQuery, JavaScript (done), Projects, Python, Ruby, PHP, and APIs lessons.

From Codecademy:

Codecademy is an education company. But not one in the way you might think. We’re committed to building the best learning experience inside and out, making Codecademy the best place for our team to learn, teach, and create the online learning experience of the future.

Education is old. The current public school system in the US dates back to the 19th century and wasn’t designed to scale the way it has. Lots of companies are working to "disrupt" education by changing the way things work in the classroom and by bringing the classroom online.

We’re not one of those companies. We are rethinking education from the bottom up. The web has rethought nearly everything – commerce, social networking, healthcare, and more. We are building the education the world needs – the first truly net native education. We take more cues from Facebook and Zynga in creating an engaging educational experience than we do from the classroom.

We do not want to open up universities. We want to open up knowledge. Everyone knows something they can teach someone else and we want to help them do it. Our community has created tens of thousands of courses and taken millions of courses. At this point, more than a billion lines of code have been submitted to Codecademy.

Education is broken. Come help us build the education the world deserves.

I rate Codecademy a 9 out of 10 and it wouldn’t take many improvements to make it a 10.

As a part of my web site moving and redesign I wanted to include a slideshow at the top of the home page.

After researching and thinking about writing one of my own I found Fotorama which is a jQuery based slideshow framework that allows for many different types of slideshows with a ton of options. Take a look at the website and the examples, they are amazing.

So I broke the process down into a handful of steps and iterated up to the dynamic slideshow that it is now.

The first step was getting a version running on a test page with static content hard-coded into the page. There was a bit of tweaking here and there along with coming up with the idea to have a design that resembles a new window "Window" with Hide and Fullscreen buttons.

The next step was figuring out how to dynamically get the picture URLs and Captions directly from SmugMug so that anytime I update SmugMug the slidesow on my website would also be updated. For that I chose to use phpSmug which is a wrapper class for the SmugMug API written and maintained by Colin Seymour.

I ran into 2 issues with implementing phpSmug, the biggest of which was that it would randomly error out with a "CURL Error 7" which was causing my website to load very slowly and breaking the slideshow. I have addressed this issue by using the caching built into phpSmug combined with writing the parsed data necessary for the slideshow into a MySQL table. Anytime the SmugMug API is not available and the phpSmug cache has expired the data for the slideshow will be pulled from the database.

Here is the code:

<?php
$user="username";
$password="password";
$database="database_name";
$tablename="table_name";
mysql_connect(localhost,$user,$password);
@mysql_select_db($database) or die( "Unable to select database");

/* Last updated with phpSmug 3.0 */
require_once( "/path/to/phpSmug.php" );

try {
  $code = "SmugMug API";
  // My API Key and App Name from SmugMug Admin Panel
  $f = new phpSmug( "APIKey=api_key", "AppName=app_name_and_version" );
  // Enable disk based caching with expires in 1 hour
  $f->enableCache("type=fs", "cache_dir=/path/to/phpsmugcache", "cache_expire=3600" );
  // Set timeout
  $f->req->setConfig(array( 'timeout' => 2));
  // Login Anonymously
  $f->login();
  // Get images from Portfolio
  $images = $f->images_get( "AlbumID=album_id", "AlbumKey=album_key", "Heavy=1" );
  $images = ( $f->APIVer == "1.2.2" ) ? $images['Images'] : $images;
  $i = 0;
  foreach ( $images as $image ) {
    if ($i != 0) {
      $query .=  ",\n";
      $output .=  ",\n";
    }
    $i++;
    // Create SQL String
    $query .= "('','".$image['X2LargeURL']."','".$image['TinyURL']."','".htmlentities($image['Caption'],ENT_QUOTES)."')";
    $output .= "{img: \"".$image['X2LargeURL']."\", thumb: \"".$image['TinyURL']."\", caption: \"".htmlentities($image['Caption'])."\"}";
  }

  // Empty Out Table
  mysql_query('TRUNCATE TABLE '.$tablename) or die(mysql_error());

  // Populate Table
  mysql_query("INSERT INTO cache (`id`, `x2largeurl`, `tinyurl`, `caption`) VALUES ".$query);

} catch ( Exception $e ) {
  $code = "{$e->getMessage()} (Error Code: {$e->getCode()})";
  //Read from Database
  $query="SELECT * FROM ".$tablename;
  $result=mysql_query($query);
  $num=mysql_numrows($result);

  $i=0;
  while ($i < $num) {
    $X2LargeURL=mysql_result($result,$i,"x2largeurl");
    $TinyURL=mysql_result($result,$i,"tinyurl");
    $Caption=mysql_result($result,$i,"caption");

    if ($i != 0) {
      $output .=  ",\n";
    }
    $i++;

    // Create SQL String
    $output .= "{img: \"".$X2LargeURL."\", thumb: \"".$TinyURL."\", caption: \"".$Caption."\"}";
  }

}

mysql_close();

?>


jQuery(document).ready(function(){

  try { console.log('code: <?php echo $code ?>'); } catch(err) { }

  // Load Fotorama.js script
  jQuery.getScript("/scripts/fotorama.js", function(){

    var portfolioBuildFlag = false;
    jQuery('#main').prepend('<article class="fotoramaWrapper"><div class="portfolioHeader gradient">Dave Nelson's Portfolio <div><span id="portfolioHide">[ Hide ]</span> <span id="portfolioFullScreen">[ Fullscreen ]</span></div></div><div id="myPortfolio"></div></article>');

    jQuery('#portfolioHide').on('click',portfolioToggle);
    jQuery('#portfolioFullScreen').on('click',function() {
      if(jQuery("#myPortfolio").is(":hidden") || portfolioBuildFlag === false) {
        portfolioShow();
      }
      jQuery('#myPortfolio').trigger('fullscreenopen');
    });

    function portfolioBuild() {
      jQuery('#myPortfolio').fotorama({
        data: [
        <?php
          echo $output."\n";
        ?>
        ],
        width: '100%',
        height: 'auto',
        aspectRatio: 1.5,
        minHeight: 500,
        fitToWindowHeight: false,
        margin: 0,
        shadows: false,
        cropToFit: false,
        caption: 'overlay',
        autoplay: 3000,
        thumbBorderColor: '#FCB03E',
        fullscreenIcon: true
      });
      portfolioBuildFlag = true;
    }
    function portfolioCookie(state) {
      if (state === "hidden") {
        document.cookie = "portfolioHide=true";
      } else {
        document.cookie = "portfolioHide=false";
      }
    }
    function portfolioToggle() {
      if(jQuery("#myPortfolio").is(":hidden") || portfolioBuildFlag === false) {
        portfolioShow();
      } else {
        portfolioHide();
      }
    }
    function portfolioShow() {
      if (portfolioBuildFlag === false) {
        portfolioBuild();
      }
      jQuery('#myPortfolio').slideDown('fast');
      jQuery('#portfolioHide').text('[ Hide ]');
      jQuery('#myPortfolio').trigger('play')
      portfolioCookie('shown');
    }
    function portfolioHide() {
      jQuery('#myPortfolio').slideUp('fast');
      jQuery('#portfolioHide').text('[ Show ]');
      jQuery('#myPortfolio').trigger('pause')
      portfolioCookie('hidden');
    }
    function portfolioInit() {
      var portfolioHide = document.cookie.replace(/(?:(?:^|.*;\s*)portfolioHide\s*\=\s*((?:[^;](?!;))*[^;]?).*)|.*/, "$1");
      if (portfolioHide != "true") {
        portfolioBuild();
      } else {
        jQuery('#portfolioHide').text('[ Show ]');
      }
    }
    portfolioInit();

  }); // Load Fotorama.js script

}); // document ready