chris barr

Photo/Dev/Design

A New Life in Georgia & a Wedding Website

Life Update
In less than a month now I’ll be getting married – it almost seems surreal.  I’ve been looking forward to this for a long time, mostly since I proposed to Kirstin about a year ago, but it’s so close I can hardly believe it.  I’ve lived in pensacola, Florida for the past 5+ years and Kirstin has lived Rome, Georgia for a little over 4 years now.  We had a long distance relationship for the entirety of our 2 years of dating, but in the past few weeks I’ve actually taken the plunge and moved up to Georgia.  We figured it was probably a good idea to at least live in the same state if we were going to be getting married.

It all actually worked out quite well.  The company I work for, AppRiver, recently opened an office in Midtown Atlanta.  The office is about 1.5 hours from where Kirstin works in Rome, so we decided to live somewhere in the middle and then we each commute to our workplaces.  The drives are fairly long, but  we think it’s worth it because we finally get to see each other on a regular basis and we both get to keep the jobs we love.

A Wedding Website!

chrisandkirstin

Soon after we were engaged, the wedding planning began.  One task on the list was to get a wedding website.  I thought “I got this!” since I do something similar for a living, so I made one.  I might have gone a bit overboard with the site, but it covers 100% of our needs, we love it, and we’ve gotten nothing but compliments about it.  I’ve made it in a fairly modular way, so I hope that others might be able to make use of it as well.  I’ve decided to put all the code on GitHub because… well why not.

Check out the site: http://ChrisAndKirstin.com
Get the code: https://github.com/chrismbarr/Wedding-Website

 

Lyric Converter V2!

If you just want to go use it: LyricConverter.com

But first…

The Backstory…

A few years ago my church used some lyric presentation software called SongShowPlus, and it worked… but we didn’t love it.  It only ran on Windows, it had some UI issues that made it hard to use and add/change songs before services. We wanted to get a Mac and run ProPresenter instead.  Friends in the same industry were telling us how they had switched and how much they loved it.  ProPresenter had a lot going for it, especially in the ease-of-use department and scalability for things we wanted to do in the future.

We were hesitant to make the change because there was no way to move all of our song files over. Neither program had a decent way to import or export song files, and there was certainly no way to convert between formats. A good friend of mine at a different church told me they were in the same position; they wanted to move from SongShowPlus to ProPresenter but they were holding off due to the inability to convert their songs. Honestly  I’m still surprised that to this day neither program provides a standard import/export for other file types.

The day finally came when our Windows machine died. We either had to buy a new one, or just go ahead and get a Mac with ProPresenter. We chose the latter option and manually converted the few songs we needed each week, or just downloaded them from a service called SongSelect. In the end this process wasn’t the best, but we got through it.  However, everything would have been much easier and less intimidating if there was just a simple way to import and export songs.

Version 1

This is the point when I decided to take a crack at it. I put our entire SongShowPlus library on my thumb drive and opened up the files in a text editor to see if it would be possible to get the text out.  The SongShowPlus file format is crazy, it appears to be a binary file with lots and lots of invisible control characters, but there is plain readable lyrics in there as well. Overall it seemed possible. Ok, so what about ProPresenter? Luckily the ProPresenter file format is a nicely formatted XML data, very easy to read and write from.  No problem!

At the time I was pretty comfortable programming in PHP, and I knew it’s file read/write capabilities so I decided to start there. I wrote a few complicated regular expressions to get the raw lyrics into an array, and it pretty much worked for most song files (with some tweaking)! This process took quite a while to get right because understanding the SongSHowPlus file format was fairly difficult. After that it wasn’t too much work to get it to generate the proper XML needed for a ProPresenter file. All that needed to be made now was a web UI for people to upload and download the songs! I put something together and I was pretty happy with it, and a few people used it. Yay! I even found out that the support staff at Renewed Vision (the company that makes ProPresenter) was actually recommending my site to customers making the switch, and that was pretty exciting news!

Oh and the name, LyricConverter… it just seemed obvious. (Also the domain was available.)

Problems

While what I wrote worked, it was a bit of a pain to use. If someone tried to upload too many songs at once the website would choke due to PHP’s upload file-size limit. Sure I could increase that, but someone could always upload more.  To solve this I had to impose restrictions of no more than 30 files at a time. This solved the problem, but if you had several hundred files to convert you were going to be here all day.

Another big problem was downloading the converted files. Each file was converted individually and stored on my server, but that meant after conversion you had to click on each file to download it.  So again, if you had several hundred files you were going to be here all day. That combined with the upload limit of 30 made this quite a pain to use. My eventual goal was to be able to have it produce a single .zip file with all the converted files in it, but that seemed a daunting task for PHP at the time.

One more problem I had, that was compounded by the above problems, was the amount of disk space and bandwidth used up on my server each month! I wrote a cron job that should have run once a day and deleted any files left on the server that were more than 12 hours old, but I found out that this did not run reliably on schedule and I often had to trigger it manually after I would get a “disk space exceeded” email form my hosting company. I also kept having to increase my monthly bandwidth because I was getting “bandwidth limit exceeded” emails. It was not uncommon for the site to blow through 1 or 2 Gigs of bandwidth in a month… and that’s for text files! (Although, it was a few hundred of them all transferred up once and then again back down)

Version 2

In my day job I’m a front-end web developer/designer, so I try to keep up with what the current browser technology supports and I’m quite honestly stunned at how many amazing things can be done all in the browser now.  Once I learned that there was a way to generate files in-browser with JavaScript to save to your desktop, I began to think about how re-writing LyricConverter could be a 100% in-browser process would solve all of the current problems I had.

Reading files dragged onto the browser was no problem, I was already doing that in the previous version.  Now I just had to take some of the regular expressions I had written in PHP and re-use or find a better way to achieve the same outcome in JavaScript. After some trial and error, I finally got this working how I wanted.  It will read SongShowPlus files and ProPresenter files, the output from either of those can be made to display in-browser as slides, convert to plain text files, or convert to ProPresenter files. Yes, you can convert ProPresenter files to ProPresenter files. Why? Well, why not. I doubt this is needed, but this does prove how flexible it is.

Since this is all in-browser there are no more “upload” limits, and there are no bandwidth restrictions. The only bandwidth used is just initially serving the page up to the browser. In fact since it’s all JavaScript now, it’s just being hosted on GitHub for free and none of my server resources are even needed any more.

Since files could be auto-downloaded (thanks to a library called FileSaver.js), that was great and it solved a huge problem of having to click individual links. A user could drag 1000 files into the browser, and then immediately click a button to download 1000 converted files… that is if you want 1000 files on your desktop… hmmm, that’s not appealing.  After some quick searching around I was amazed to find that someone has written a JavaScript library called jsZip that can actually generate .zip files with JavaScript! This was my ultimate goal, and it was to each to achieve with this library. Now when you convert songs you have the option to download all N number of files individually, or just download a .zip file containing them all.

I’m also extremely happy with how the code is structured now. Previously it was a huge mess and half of that was due to my unfamiliarity with PHP. Now it’s all written in JavaScript and it’s very modular. It should be easy to add on new file types that it could read from or output to.  It’s also all on GitHub, so anyone can feel free to improve the existing code or add new functionality like new input/output formats!

Use It & Improve It!

Like I said, all the code is on GitHub and I would just absolutely love it if people would contribute to this project to make it better.  Right now it works, but it certainly could be made better.  Occasionally I do get some strange conversion errors or random incorrect characters that slip through into the converted files.  I’d love to squash these bugs, but they aren’t deal-breakers at the moment.

So, please use it, let me know how it could be made better, and please contribute if you can.

CSS Pixels

Several weeks ago I made this presentation for work after doing a bit of research and becoming interested in how pixels on our screens are actually calculated.  It’s not at all what I expected at first, but find out for yourself and check out the presentation below.

View on SlideShare or Google Docs.

(Apologies for the audio not syncing up with the sides.  I’ve set it to do so, but SlideShare seems to refuse to work with me here)

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.

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!