I put together the site for JeffreyB Photography
I spent my free time from Monday March 26th to Friday March 30th putting together the website for one of the best photographers in Holyoke – Jeffrey Byrnes. It’s live now at http://jeffreybphotography.com.
Jeff had been struggling with his site for a while, because of how difficult it can be to get the code right. It’s especially important for his site because of how much it relies on the presentation – his work is the imagery, after all. So, I created the site with two major areas of focus:
- The site should be easy to use. He’s a photographer – he should be making & displaying photographs, not fiddling with lines of code to get webpages to display correctly.
- The site should highlight his photographs as strongly as possible. Jeff’s work is visually impacting, so I really felt that the site needed to get out of the way of his images as much as possible.
I used BuildInternet’s Supersized jQuery plugin as the basis for the overall site design as well as the slideshow functionality. I had originally chose to work with the Supersized jQuery plugin because of its full-screen slideshow. It sets the image to the full size of the browser, and includes a small set of controls at the bottom of the screen … nothing more. This was perfect for one of my focuses – the site getting out of the way of the images. After working with the plugin a bit more, I realized that it had the capability of hooking into Flickr. That’s when I realized it was also a perfect fit for my other focus – Jeff already used Flickr extensively, and in a very organized fashion.
I did have to make some modifications to the plugin, though. Originally, there were some UI elements that sat on top of the images – these provided forward/backward navigation through the image slideshows. I also didn’t want to complicate the controls by including a set of navigation for thumbnails (basically, a second area of navigation on top of the existing full-size image navigation – it just made things a little more apparent than I wanted them to be for this site). So, after modifying the control set at the bottom of the page, I was ready to figure out how to display the pages that required a bit more content…
The About, Contact, and Projects pages are all single-image pages with their own content. I didn’t want to give up the ascetic of the site for these three pages, so I needed to figure out a way to overlay the content onto the page. I was lucky, because I had already figured out a way to accomplish this a few months ago – I even had two ways to do this (one by using a set of layered divs, and one by using CSS3 rgba backgrounds). I plugged in my code & had some awesome opaque boxes for the content to sit in – perfect – you can read the content just fine, and the background image still comes through.
Maintaining the site can’t get much easier for Jeff, either – which was my other area of focus. Now he doesn’t have to fight with code, and his overall workflow isn’t changed either. All he has to do is maintain his Flickr Sets, which he does anyway. The site automatically connects into his Flickr account through the Flickr API to display the correct set of images for each page – it goes so far as to allow him to modify his Flickr Sets & have his changes be visible on his site immediately.
While working with that Flickr connection, I found a bug in how the plugin attempted to get the owner of Flickr photos. This was causing all of the photo links to go to error pages on Flickr, instead of the photo’s Flickr page. Supersized is open source software that’s hosted on GitHub, so I was able to submit the fix that I came up with.
This was an exciting project for me because of its pace, because of how easy it is to work with Jeff, and because of how much impact my work has (and will have) on everyone who comes to Jeff’s site to appreciate his work.
JeffreyB Photography is located in the heart of downtown Holyoke. If you need photos, you need Jeff – you can get his contact information right from his amazing website. 
Make a GitHub Project Page that’s an exact mirror of your Master branch
GitHub has a Project Pages feature that creates a webpage based on the content of the gh-pages branch of a repository. I asked, and subsequently answered, the question of how to get the Project Page to be an exact mirror of the Master branch over on Stack Overflow.
One way I found is to run the following command, which sets a configuration setting that causes every subsequent instance of git push to push the Master branch of the repository into the gh-pages branch:
git config –add remote.origin.push +refs/heads/master:refs/heads/gh-pages
The trouble with this solution is that I’m using the GitHub Mac App, which doesn’t use a strict git push. According to their Help page, it does a git pull –rebase. Additionally, even when I select Push from the Repository menu, my git config line isn’t adhered to. I’m not sure what’s up with that…
I ran through a bunch of my own tests, trying to figure out how this branch mirroring can be done in a GitHub-For-Mac-App-Friendly way. It doesn’t seem like you need to go through the exact process they’ve described to create the gh-pages branch. Over there, they provide the following process along with the disclaimer “Caution: make your working directory clean before you do this (either stash or commit), otherwise this will lose any changes you’ve made to your project since the last commit.”:
- cd /path/to/repo-name
- git symbolic-ref HEAD refs/heads/gh-pages
- rm .git/index
- git clean -fdx
- echo “My GitHub Page” > index.html
- git add .
- git commit -a -m “First pages commit”
- git push origin gh-pages
Instead, you can simply create a new branch named gh-pages from within the GitHub Mac App. They probably don’t instruct people to do this because what I’m accomplishing here isn’t a typical scenario.
You can take these steps to create the ‘gh-pages’ branch from within the GitHub Mac App:
- Go to the Branches view of your repository
- Click the + button on your Master branch to create a new branch – name this ‘gh-pages’
- Click the Publish button to push it to GitHub
- Use the bottom left menu to checkout the Master branch, if you’re not working in the Master branch
Each time you want to update your Project Page, just run these steps to sync your Master branch into your gh-pages branch within the GitHub Mac App:
- Switch to Branches view
- Click the Merge View button to display the Merge view
- Drag the Master branch to the left slot & the gh-pages branch to the right slot
- Click the Merge Branches button
- Use the bottom left menu to checkout the gh-pages branch
- Click the Branch in Sync button to force a synchronization
Pick as a replacement for Digital Color Meter in Mac OS X Lion
In previous versions of Mac OS X, I would use Digital Color Meter to hover over parts of my screen to get the HEX color code from certain images. In Mac OS X Lion, however, Digital Color Meter no longer provides hex color values by default. While it’s possible to get Digital Color Meter to display HEX values, it is quite a clunky process of diving into the View menu every time the app is opened. Also, the values it displays now are only the two digit codes:
I just grabbed Pick, and it does the job nicely … And for free!
Pick is invoked either through the Menu bar or the ⇧⌘L keyboard shortcut. It turns your cursor into a large magnifying-glass-type device that it calls the Loupe. This displays a small area of your screen at the 1 pixel level. The HEX value for each pixel you hover over is displayed within the Loupe.
You can left click to copy the HEX value (in the format you choose in the program’s Preferences) to your clipboard. You can also right click to choose a different format to copy your color code in:
View the changes between two branches of a git repository in SourceTree
I use git for all my projects, because of how easy it is to deploy new versions & because of how easy it is to maintain two (or more) different versions of one project. I’ll be talking a little bit about that second feature in this post.
I typically separate my projects into two branches:
- The Master branch is the production branch. This is the “Look… still has the old tag on, never even played it. Don’t touch it! Don’t point! It can’t be played. That’s it, you’ve seen enough of that one.” branch.
- I create a second branch just for development, which is where I do all my actual work.
I don’t make any actual commits to the Master branch. All of my work is done within the development branch, and I merge the development branch into the Master branch when I’m ready to deploy a release. Sometimes I’ll work so much on the development branch that I’ll forget all the changes that I’ve made since the last merge. If that happens, I turn to SourceTree so that I can view the differences between the last merge and the merge I’m about to complete. To do that, I open the repository in SourceTree (free in the Mac App Store) and click on a branch:
This displays all of the commits for all branches in the top middle window pane. You can kind of see the dev branch in the screen shot above, which is in blue. When I scroll down through the list of commits, I eventually come to the last time that I merged the development branch into the Master branch. This is the last “release version” of the project & I select this entry by clicking it:
Then I scroll all the way back up to the top of the list of commits. I ⌘-click (command-click … pretzel-click … however you refer to it) the very latest commit. This displays, in the bottom left window pane, a list of files that were changed between the last merge and the latest commit. I click through each file, which displays the line-by-line changes in the bottom right window pane, double checking all the changes in order to remind myself of everything I’ve done. This helps me remember whether I’ve made any drastic changes that will require further action surrounding deployment.
After I’m comfortable with the changes that will go through, I go back to the GitHub Mac App. I’m much more comfortable doing the actual git work with this app, because of how simple it is. I don’t have a very in-depth knowledge of git, and the GitHub App really keeps me from being able to do much harm.
Using a custom version of Git on Mac OS X Lion
If you’re using git-osx-installer to install Git on Mac OS X Lion, and ‘git –version’ in Terminal isn’t displaying the version you’ve just installed, then your system is using the version of Git that’s provided by Xcode Developer Tools.
To use the git-osx-installer version that you’ve just installed, you’ll need to edit the /etc/paths file and add “/usr/local/git/bin” to the top of that file.
To open the file for editing, type sudo nano /etc/paths in Terminal. Add the “/usr/local/git/bin” line to the top of the file. To write the file, and exit nano after making that change, type Control-O then Control-X. To allow the change to take place, you’ll need to quit Terminal, then open it back up again.
git –version should now report the newly installed git-osx-installer version of Git.
How Multi-File Search in BBEdit improved my workflow
It’s fairly common that I’ll have to look through dozens of files for particular lines of text.
Sometimes it’s a set of log files that I need to find every instance of a certain action in…
Sometimes it’s a CodeIgniter project that I need to find each instance of a function in…
In the past, I’ve used grep to do this. It allowed me to search an entire directory of files with one command, which was incredibly helpful. I still had to note the filenames that contained the search results, and open those files in an editor. After I was in the editor, I’d have to do another search to actually get to the text that I was looking for.
Now, with BBEdit, I do one Multi-File Search and click the search results that I want to inspect closer. This opens the file in the lower half of the window – just below the search results in the same window. The file is opened directly to the line I need, with the search result highlighted. It’s not just a display of the file, either, it’s a fully functioning editor.
Fast searching.
Instant access.
Complete context.
In-search editing.
Little Corner: My Open Source Project To Make You A Better Website
A while back, I ran across two really cool profile/hub/aggregate website providers: Flavors.me and About.me. I really liked the idea of the personal hub page, and the way that both sites accomplish the design. So, for my recent website redesign I decided to push my blog over to http://blog.jameschevalier.us and use the base domain name as my own attempt to recreate what I saw Flavors & About doing.
I’ve decided to call what came out of this idea Little Corner. The source code of this project is available at GitHub, so you can even implement this for your own website.
I see this form of website as a more functional “business card” type website. The main page is pretty simple, and static. There are a few links which look like they’ll bring the visitor off to other services, but what they’re really doing is bringing the services into the site. When a link is clicked, the right side of the page displays a translucent overlay on top of the full-screen background with the content of wherever that link would have gone to (Twitter, Foursquare, Last.FM, etc) on top of that.
This has been a great opportunity to jump into a few APIs, as well. Each of the external services that I’m pulling data from is pulling that data through the service’s API. This makes for a fairly typical experience with a site like Twitter, but allows for some really cool things to happen with the information from sites like Last.FM or Foursquare.
I’ve just barely started, so there’s much more potential in what this open source project could be. While I was creating the first version of this project, Foursquare released a new version of their API … I started getting into the Twilio API … And there’s still so much customization to offer within the website itself!
You can see Little Corner in use on my own website right here, and you can either download or contribute to the project right here.
A Look At Three Stop Motion / Time-lapse iPhone Apps
I recently tried out a few iPhone apps so that I could play around with stop motion video, and I figured I’d share my thoughts on each of them. The three apps that I tried out were iMotion, iTimeLapse Pro, and StopMotion Recorder.
While I was testing, I found that adding frames to existing videos can have a tendency to change the brightness levels, which throws off the color. So, it’s not usually a good idea to complete a whole project and then attempt to go back and add/edit individual frames; instead, try to get each frame right as you make the video. This should be taken into consideration for some of the pro/con items listed below.
Another thing that I noticed is that the ability to set the FPS (Frames Per Second) value for the video is extremely important. Sometimes the stop motion video being created is good to go with a low FPS, but sometimes the video needs to move quickly in order to keep that sense of fluid motion.
Below I’ve listed each app’s pros and cons. The list of apps is ordered from what I thought was the best to what I thought was the worst.
iMotion
The notes below are based on version 1.4
PROS
- Big FPS range of 1-30 frames per second
- Ability to duplicate frames – great for adding pauses
- Preview the video (on a loop) without render
- Ability to inject frames at any time
- Offers automatic timelapse mode with number of photos & interval
CONS
- A little slow on the photo-taking… it definitely seems slow next to the freakishly fast ‘StopMotion Recorder’, so this app’s speed is probably normal
- The preview loop is a little jolting, especially if you’re previewing early on in your creation or previewing a short clip
iTimeLapse Pro
The notes below are based on version 1.1
PROS
- Unlimited (9,999) frames
- Seems like unlimited frame rate, but the app started crashing before I could verify
- Will also do automatic time-lapse
CONS
- Cannot insert frames to existing videos
- Awkward “take photo” location
- The “take photo” spot (can’t quite call it a button, since it’s just text) is too small & is crowded by other UI elements
- It takes a long time to take photos
- It takes a long time to render videos
- No preview before rendering
- The app started crashing when I tried rendering videos, and exporting to camera roll failed with error
StopMotion Recorder
The notes below are based on version 1.2.1
PROS
- Takes photos incredibly fast
- Grid is a nice feature to help line things up a bit more
- The UI has good character, without taking away from the experience of using the app
- It’s fun
CONS
- Video quality is noticeably pixelated – I consider this a simple toy app until this is fixed
- Limit of 150 frames (using an iPhone 4, with high/large setting)
- Cannot add to existing videos
- Cannot preview the video before rendering
All of the links to iTunes in this post are affiliate links.
Never Miss New Snow With Blizzalert
I’ve set up a new service called Blizzalert, and I’m really excited about what it can do for fellow skiers & snowboarders.
Blizzalert monitors the weather at over 400 mountains across the United States, keeping track of snowfall. You select which mountains you want to watch, and Blizzalert sends text messages letting you know how much snow is coming, where, and when – all before it happens.
I’ve done this by hooking into a few APIs. An API is an application programming interface, and there are more and more of them coming out every day – Programmableweb has quite the growing list of them.
Here is a quick look at the APIs that I’m using…
I hook into the NOAA API, provided by Weather.gov, to get the projected snowfall amount at each of the mountains across the United States. This location is based on the Latitude/Longitude of each mountain – those were gathered in a grueling weekend where I was attached by the eyeballs to Google Maps.
I hook into the Twilio API, which allows me to send text messages (the blizzalerts!) to all of my customers. They provide a lot of other features, like voice calling/receiving and transcription, but for this project I only need to send text messages.
I also hook into the Recurly API in order to handle recurring billing. The service costs $2 per month, and there would be a huge headache involved in programming that billing system (never mind the huge amount of concentration that would be required on security). Instead of taking all that work on myself, I simply let Recurly handle that for me.
Here’s a little bit of information on the data I’m collecting…
Blizzalert is currently watching over 400 mountains across the United States. I’m aiming for 100% coverage, and I’m really close to that goal already. The majority of these mountains are public ski resorts, but I’m also in the process of adding backcountry spots – there are already a few in Colorado that have been added!
The weather that I’m gathering is strictly NOAA-reported projected snowfall via the Weather.gov rest API, so I’m not doing any calculations on my own (yet) and I’m not getting any “second opinions” yet either. They provide this snowfall amount in six hour chunks, and I’m combining these chunks of time for each day into a total projected snowfall for that day. I’m expecting huge improvements in my weather collection & assessment processes as I continue to work on Blizzalert.
Here’s a little bit about how I’m getting these alerts to my customers…
I’ve decided on text message alerts, because this removes all platform barriers. I’m not limited by who has an iPhone, or who has an Android phone – anyone with a mobile phone (or just a Google Voice number) can subscribe to this service.
Twilio, the service that allows me to accomplish this, provides an API to voice calling and SMS. This is a brilliantly simple service that was the quickest part of this project, but arguably the most important. I’ve programmed Blizzalert to send text messages through Twilio for each of my customers once per day and only if there is snowfall projected at at least one of their watched mountains. By using Twilio, and not attempting to create this SMS service myself, I’m saving a huge amount of development time and I’m also future-proofing Blizzalert. Twilio automatically scales on their end so that they can handle however many users that Blizzalert grows to.
Example Blizzalert
On to the future…
While Blizzalert is fully functional at nearly 100% of the ski resorts in the United States right now, I still have a huge path open to me for improvements. I expect to add more and more backcountry spots, have even better snowfall projections, and improve the blizzalerts themselves. I’m really excited about what Blizzalert has to offer today, and I’m thrilled by the possibilities that lie ahead.
- Here's a theory that our entire universe exists within a black hole http://t.co/8bQtfayX
- The default state of a startup is failure http://t.co/PJRed8kC
Popular Tags
Categories
