Blog

Fun with Konami Code

2013-01-21T17:48:15+00:00

So, there's a secret, not-so-secret now code on my site. As a fan of video games I had to add in a special Konami code as a tribute to my childhood…

So, there’s a secret, not-so-secret now code on my site. As a fan of video games I had to add in a special Konami code as a tribute to my childhood and to all the game developers throughout the years. This is very easy to implement and you could easily create any special codes you’d like based on specific key strokes. I included Modernizr to check for and play some audio to go along with my secret functionality. Below is the basic way I used the code and you can adapt it to add some secret life to your site, app or what have you.

  
    //Load Sound Effects
    var audio = new Audio();
    audio.preload = 'auto';

    //Set paths to audio formats
    audio.src = Modernizr.audio.ogg ? '/youraudio.ogg' : Modernizr.audio.mp3 ?  '/youraudio.mp3' : '/youraudio.m4a';

    //Konami Code (Try it out…)
    //Konami Key: (u = up, d = down, l = left, r = right)
    //Konami Code: (uu dd lr lr ba)

    if (window.addEventListener) {
      var keys = [],
      konami = "38,38,40,40,37,39,37,39,66,65";

      window.addEventListener('keydown', function(e) {
        keys.push(e.keyCode);
        if (keys.toString().indexOf(konami) >= 0) {

          //Check for audio support and play sound effect
          if (Modernizr.audio) {
            audio.play();
          }

          //Call or set functionality for successful keystroke submission
          yourAwesomeFunction();

          //Reset the keys array
          keys = [];
        };
      }, true);
    };

The Lincoln Movie Site - Under the Hood

2013-01-16T05:40:07+00:00

I recently saw the movie Lincoln, which I enjoyed, but I was ultimately impressed with the Lincoln movie site. It's clean, fun and uses JavaScript!

I recently saw the movie Lincoln, which I enjoyed, but I was ultimately impressed with the Lincoln movie site. It’s clean, fun and uses JavaScript!

Scrolling

The developers are using a scrolling technique sliding in panels over top of each other using z-indexing. They’re animating in and out the opacity on images that act as background images, but are not. Very smooth!

Default HTML

HTML after JavaScript


  
    
    
      VIII
      
        Multiple quote divs are injected from hidden #quotes div

You can see what’s happening behind the scenes by inspecting the dom with your browser’s web inspector upon scrolling. They have also added a function called scaleToFit() on line 235 in the file main.js to responsively scale in the dummy background images to make them responsive. It appears that the developers are incorporating the jscrollpane plugin to add custom scrollbars to the slide out panels as well.

SoundManager2

The main plugin setting the mood for this site is SoundManager2. I recently used this plugin to build a custom SoundCloud Player and it really does make it easy to get creative with sound. The plugin can be found here SoundManager2. I’ve seen some music sites implementing this plugin to load in music. Overall, I feel that the SoundManager2 plugin is pretty straightforward and easy to extend and customize.

With the setup initialize wrapper, that you can learn more about on the plugin site, you can easily create and play news sounds by creating sound objects containing the necessary properties associated with that sound.


  var myAwesomeSound = soundManager.createSound({
    id: 'myAwesomeSound',
    url: '/path/to/myawesomesound.mp3'
  });
  
  myAwesomeSound.play();

This is by no means a high-level dig into how exactly the Lincoln Movie site is implementing these great features, but merely one of my mini-breakdowns. Dig into the web inspector, learn and deconstruct! Then think of ways to build out your own and/or new solutions.

“Always bear in mind that your own resolution to succeed, is more important than any other one thing.” - Abraham Lincoln

Website Redesign

2012-06-09T09:11:14+00:00

After many years of maintaining and managing my WordPress site, I felt it was time to make a change. I always find it harder to design / develop my own site, so either for that reason…

After many years of maintaining and managing my WordPress site, I felt it was time to make a change. I always find it harder to design / develop my own site, so either for that reason, or that I get so wrapped up in client work, it’s taken what seems like an awfully long time to get to this point. I decided to build my new site with Expression Engine, which I’ve been fortunate enough to work in most recently. I enjoy the CMS and think that I will be happier with my choice to switch. I’ve decided to showcase only my work that is solely related to Web Design and Development, whereas this blog will take on the form of a host for my many hobbies, interests, and ramblings. I hope you enjoy!

“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.” - Albert Einstein