chris barr

Photo/Dev/Design

10 Things Your Professor Isn’t Telling You About Being A Professional Web Developer

Earlier this week a co-worker and myself were able to visit the University of West Florida campus and present to the Association of Information Technology Professionals group.  We had a great time, everyone was very friendly and everything went smoothly.  Below is our slides from the presentation.  Click through to the site to also see the notes.


10 Things Your Professor Isn’t Telling You About Being A Professional Web Developer from Chris Barr

WordPress Menu Navigation

With my recent site redesign, I also transitioned the backend to now use WordPress and so far it’s been pretty good to me. Although at first I really had to fight it to get the custom theme to do what I wanted, namely with the navigation. My goal seemed simple at first, but WordPress instead provided me with a challenge. I just wanted the following abilities:

  • Have top level navigation items
  • Only some of those pages would have sub-pages
  • When viewing a page with sub-pages, the related top-level navigation item would remain highlighted
  • The sub-pages would have an “All” page listed at the top – which would not be the same name as the actual page
  • All of this should be easily modified using the WordPress Menus feature on the admin control panel.
  • Have custom code output without using some of the predefined WordPress HTML output for menus

This took a lot of trial and error to behave the way I wanted, but in the end it worked.  I’m not saying this is the best way to achieve this, but it is a way to do it.  The code below is on Github, so please feel free to make any improvements where you see fit. I commented the code fairly well, so all my descriptions of what is going on will be in there.

wordpress-nav-menus So first off, here’s a screenshot of how my WordPress menus are set up in the admin control panel. Click to see it full-sized.

Next, the following code went in my header.php file to create the main navigation you see at the top of this page.

That would output the header navigation, like so:

<nav class="container_12">
  <div class="grid_2 prefix_1"><a href="http://chris-barr.com/" class="nav-current">Blog</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/photos/">Photos</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/videos/">Videos</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/projects/">Projects</a></div>
  <div class="grid_2"><a href="http://chris-barr.com/about/">About</a></div>
</nav>

Now, let’s move on to the sidebar.php file. This would generate the sidebar HTML you see on my photos page.

<aside id="sidebar">
  <nav>
<?php
  
  //Get all the menu nav items
  $menuItems = wp_get_nav_menu_items('Nav');

  //Some vars we will use later
  $currentParentObjId;
  $currentParentMenuId;

  //Loop through all the menu items
  foreach($menuItems as $menuItem) {

    //Look for the menu item that matches the page we are currently on
    if($menuItem->object_id == $post->ID && $menuItem->object == $post->post_type) {
      
      //When we find it, save same data about it's parent item in the menu
      $currentParentObjId = $menuItem->object_id;
      $currentParentMenuId = $menuItem->menu_item_parent;
      
      //Exit the loop since we've found what we are looking for
      break;
    }
  }

  //----------------------
  
  //Create an empty array to use for the sidebar menu
  $menu_arr = array();

  //Add the first item, "All", to the array
  //since this doesn't actually exist in the Wordpress menu
  array_push($menu_arr, array(
    'url' => get_permalink($post->post_parent),
    'title' => "All",
    'is_current' => ($post->post_parent == 0)
  ));

  //----------------------

  //Counter
  $i=0;

  //Loop though all the nav items again
  foreach ( $menuItems as $item ) {

    //Determine if this item is for the page we are currently on
    $is_current = $item->object == 'page' &&  is_page($item->object_id);

    //Create an array representation of this nav item
    //that includes some important properties we will need.
    $this_nav_item = array(
      'url' => ($item -> url),
      'title' => ($item -> title),
      'is_current' => $is_current
    );

    if($item -> post_parent == $currentParentObjId){
      //Only add the children for the current page to the main array
      $menu_arr[$item->ID] = $this_nav_item;
    }else if($item -> post_parent !== 0 && $item -> menu_item_parent == $currentParentMenuId){
      //If we are on a sub-page add the siblings to the main array
      $menu_arr[$item -> ID ] = $this_nav_item;
    }

    //Increment the counter
    $i++;
  }

  //----------------------

  //Var to stick some output HTML into
  $menu_html="";

  //Loop through the array we created above...
  foreach ($menu_arr as $key => $item) {

    //If the item is the current one, add a class to make it visibly selected
    $selected = $item['is_current'] ? ' nav-current' : '';

    //Build up the needed output
    $menu_html.= '<a href="' . $item['url'] . '" class="alt-link-color'.$selected.'">' . $item['title'] . '</a>';
  }
  
  //Output the final menu HTML
  echo $menu_html;

?>
  </nav>
</aside>

The sidebar code above generates HTML like this:

<aside id="sidebar">
  <nav>
    <a href="http://chris-barr.com/photos/" class="alt-link-color nav-current">All</a>
    <a href="http://chris-barr.com/photos/weddings/" class="alt-link-color">Weddings</a>
    <a href="http://chris-barr.com/photos/engagements/" class="alt-link-color">Engagements</a>
    <a href="http://chris-barr.com/photos/portraits/" class="alt-link-color">Portraits</a>
    <a href="http://chris-barr.com/photos/bridals/" class="alt-link-color">Bridals</a>
    <a href="http://chris-barr.com/photos/africa/" class="alt-link-color">Africa</a>
    <a href="http://chris-barr.com/photos/2010-photo-project/" class="alt-link-color">2010 Photo Project</a>
  </nav>
</aside>

And finally, my index.php file contains this code which will determine if the sidebar should be shown or not.

<?php
  $isPageWithSubpagesOrASubPage = 
    is_page()  && (
      get_pages('child_of='.$post->ID) || (
        end($post->ancestors) != 0 && 
        get_pages("child_of=".end($post->ancestors))
      )
    );

  //Show the sidebar if this is a page/sub-page
  $showSidebar = $isPageWithSubpagesOrASubPage;

  if ($showSidebar) :
?>
<div class="grid_3 push_9">
  <?php get_sidebar(); ?>
</div>
<?php endif; ?>

<div class="<?php echo $showSidebar ? 'grid_9 pull_3' : 'grid_12'; ?>">
  <div id="content">
    <!-- Content goes here -->
  </div>
</div>

If you’re curious about some of the grid_2 and container_12 CSS classes, those are from the 960 Grid Framework which this site uses.

And there you have it! That’s how I made my menu navigation.  Let me know in the comments here or on GitHub if you have any suggestions or improvements to add.

SASS and Visual Studio

SASS has become more and more vital to the sites I write code for both at home for personal projects, and at work for the business applications we write.  If you don’t know what SASS is yet, you should really do yourself a favor and read up on it, but basically it’s a language that allows you to write better and more organized CSS which then complies to standard CSS which can be served to the browser.

At home on my Mac I’ve been using the terrific CodeKit ($25), which just runs in the background, watches my project folders, and generates CSS files whenever I save my SASS (and LESS, CoffeeScript, etc.).  However, at work we run Windows and use Visual Studio as our IDE for which the “perfect” integrated solution doesn’t really exist yet.

Here are the current possibilities:

Chirpy

Chirpy is a pretty handy little Visual Studio extension that can handle basic SASS compilation.  We use it at work, but only for one of it’s other features: JavaScript compression for files named *.chirp.js .

It’s SASS features seem fairly limited since you can’t @import other SASS files, it has no syntax highlighting support (to my knowledge), and it does’t give any error message when it fails to compile.  Maybe I’m missing something basic, but without these features it just won’t work for how we need to use it.

I hate making the other developers I work with have “required” plugins, but right now this is the easiest way to compress our javascript files when we edit them until we can work it out to upgrade to .NET 4.5 and use the new bundles.  As for SASS integration, I’d recommend skipping Chirpy for now.

Mindscape Web Workbench

Mindscape is another neat little Visual Studio extension that has a bunch of features, but again we only make use of one of them.  It has terrific SASS support for all the features we need, and heck it even supports Compass too!  It’s great and all but when using the free version it becomes slightly annoying since it disables basic features like the ability to comment/uncomment lines of code with a key command.  It’s probably the most ridiculous feature could take away from you until you pay for it.  A coworker of mine bought a pro license ($39) for himself at home, but then found out that it’s only good for one year. It’s a good tool, but it practically requires a per-developer yearly subscription to be great.

It works for now, but if something better comes along I’d be happy to ditch Mindscape.  If you need to use SASS in Visual Studio, this is probably the best option right now.

Future Possibilities:

Web Essentials & Web Tools

The Visual Studio Web Essentials extension gives you lot of new experimental features.  Once these features mature, they are moved into the fully supported Web Tools extension. If you want to stay on the cutting edge you can install Web Essentials, otherwise just install Web Tools for a bunch of great new features.

The newest version of Web Tools added native support for the LESS CSS dynamic stylesheet language.  It has full syntax highlighting, compilation to CSS, and a pretty nifty editor window as well.  LESS is well thought out language that is somewhat popular, but after considering converting all my code from SASS to LESS it became apparent that SASS just has more features, is more extensible, and is generally more widely used.

The Web Essentials site has a page where you can vote for the desired features in the next version, and one of the most popular items is to add support for SASS/SCSS.  Since this ticket was opened in September of 2012, they’ve added syntax highlighting support which is nice… but it’s rather useless since it doesn’t actually do the essential step of compiling to actual CSS code.  A site admin has since said that the prototyping phase for real SASS support has been started, so I feel there is a decent amount of hope that native SASS support will be coming to Visual Studio in the near future!

I’m venturing a guess that they decided to go for supporting LESS first since it has fewer features and a compiler written in .NET – low hanging fruit.  The compiler for SASS is written in Ruby, so that’s a bit more complicated to add onto Visual Studio since it’s a completely different language.  Hopefully (if possible) a real .NET compiler can be used (they do exist) and Visual Studio will then have true support for the two major dynamic CSS languages.

My only annoyance right now is that when both Mindscape and Web Essentials are installed, they both fight for syntax highlighting and you can occasionally get some strange looking code.  The only solution for the time being is to pick one and disable/uninstall it.  Hopefully this can be fixed by one of these vendors in a forthcoming release.

Remastered Weekend Photo Shoot

Several weeks ago my church hosted a weekend-long event for the Middle & High School students called “Remastered Weekend.” The students were challenged to surrender the things in their lives that hold them back from a relationship with God.

My good friend Robbie is the media director at the church, and he recruited me to help out with a photo shoot.  We got some of the students together and had them write various things they wanted to give up in their lives on their hands and arms.  I took photos and Robbie shot video.  The end product was for the intro video for the weekend, and Robbie did a killer job putting that together!

remastered-2
remastered-1
remastered-3
remastered-4
remastered-5
remastered-6
remastered-7
remastered-8
remastered-9
remastered-10
remastered-11
remastered-12
remastered-13
remastered-14
remastered-15
remastered-16
remastered-17
remastered-18
remastered-19
remastered-20

Oh, and here’s the technical info for the camera geeks out there:
The photos were shot on my Canon 7D with my Canon 50mm f/1.8D lens. The majority of the photos were shot 1/60 f/1.8 ISO 200. We had one fluorescent fill light behind a diffuser off to the left, and we used a projector pointed at the wall to get the words behind them.

What Do JavaScript And The Mission Field Have In Common?

On one side we have the web programming language JavaScript, and on the other we have Christian missionaries sharing the message of Christ with people all over the world. Where do these two unrelated things meet?

This week my church in Pensacola, FL is having a mission conference where we invite some of the missionaries we sponsor from all around the globe and put an emphasis on the important work they do. Several weeks ago I was asked if it would be difficult to make a counter that would show that on average 75 people die every minute without ever hearing the Gospel of Christ.  This didn’t seem like a terribly hard task, and it really helps drive home an important point.  If you’re curious, the number 75 was determined to be somewhat of an average rate per minute.  This Site says 103/minute, while this one says a little under 50/minute;  75 seemed like a good compromise.

Marcus Point Baptist Church - Missions Conference StageAt my church we have three 720p displays normally all driven by the same computer, but we also have the ability to change the input source of the center screen.  The counter I needed to make was to be the source of the center screen run from a laptop, but it needed to look seamless.  I was provided the appropriate background image, so now it’s just all about displaying a number on top of the background.

The core of how this works is extremely simple, but I wanted to make sure that it was flexible enough for anything we might need. I’ve worked behind the scenes in churches for years now and I know that really anything could pop up. The number “75” might need to be different at the last minute, the computer might crash or someone might close the browser and we need to re-start the count at a higher number, we might need a delay before the counter starts so we have enough time to switch the screen to it without anyone seeing the page refresh.

There are a lot of possibilities, but in reality we didn’t need any of these edge-case scenarios that I coded for, but I’m glad they were there “just in case.”

 

Here’s the ultra-basic code. It’s really nothing too special, but it gets the job done by incrementing a number at an interval determined by the rate.

(function(){
  //Numbers
  var num = 0;
  var perMinute = 75;
  var perSecond = perMinute / 60;
  
  //Element selection
  var count = document.getElementById("count");
  
  function update(){
  
    //Add the per-second value to the total
    num += Math.round(perSecond);
  
    //Display the count rounded without a decimal
    count.innerHTML = num;
  }
  
  //Run the update function once every second
  setInterval(update, 1000/perSecond);
})();

The full version has a bit more complexity to it because I built in a UI that allowed us to change the rate, change the beginning number, and add a delay before beginning the count. It also will attempt to use the Full Screen API that newer versions on Webkit and Mozilla browsers have implemented.

Be sure to read all the “gotchas” on the readme.md file on GitHub linked below if you view the demo, but basically your mouse cursor will be hidden until it goes over the controls which are hidden at the bottom of the page.

Check out the full code on GitHub or view a live demo!