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.
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.
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:
Now, let’s move on to the
sidebar.php file. This would generate the sidebar HTML you see on my photos page.
The sidebar code above generates HTML like this:
And finally, my
index.php file contains this code which will determine if the sidebar should be shown or not.
If you’re curious about some of the
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 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:
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.
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.
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.
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!
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.
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.
At 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.
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.