Technical Voting

An Amazing Opportunity

Apple Touch IconEvery now and again people are given the opportunity to change the way others do something important. Recently one of these opportunities fell into my lap. As part of my job as Web Manager at the Philadelphia Bar Association I’m tasked with formatting a list of qualified candidates for judges as part of the Campaign for Qualified Judges PAC.

Why is This Important?

Apple Touch IconThe Campaign for Qualified Judges is important because in Philadelphia we elect our judges. That means YOU can actually choose who will decide your future if you end up in front of one of these men or women in court. We create resources for the public to educate them about who is best for these positions and post these to the Philadelphia Bar Association website for this reason.

One of the resources that we provide on the Voters’ Guide to Judicial Elections page is a list that voters can take with them to the polls. With our current election I decided to pitch the idea of reinventing the way the public can access and save this list.

The Change

iPad Add to Home ScreenPreviously this list was creating as a pdf document that the public could download, print and bring to the polls as a sheet of paper. With all of current resources available to web designers in HTML5 and CSS3 I thought I might try to improve this process. The new approach I proposed was to create a resource that people could not only print, but also save on their phones, which is more likely to come along with them to the poles. The solution I came up with for this is a responsively designed single page website.

Why Responsive Design?

View as Web AppRecently I’ve been really excited about the idea of “responsive web design” and the “mobile” web. This is basically the concept of creating websites that respond to browsers widths without assuming that everyone will view websites on a classic desktop computer. I think Chris Coyier put it best in a recent CSS-TRICKS screencast on responsive design, by stating that eventually there will be browsers on everything, including our toasters (I’m paraphrasing). This means we need to design websites that react to this change in user trends.

There are also projections that in the next three years more people will access the internet via mobile browsers than desktop computers. So, basically if your site doesn’t work on mobile in the next three years you will be way behind the curve.

Page Features

Print Style

  • Mobile First Approach: For the base of this project I used HTML5 Boilerplate Mobile. This creates the basic structure of your single page, so you don’t have to retype all of the default settings that most web designers would choose anyway. The files are also all really well commented, so if you don’t understand why something is structured the way it is, you can easily find out why.
  • Add to Home Screen: I used MATTEO SPINELLI’S ADD TO HOMESCREEN open source project to create the buttons that float down and up depending on iPad or iPhone visits, to prompt visitors to save this “web app” to their homescreens on these devices. This is super easy to set up, and I like it a little better than the default that you can enable on the HTML5 Boilerplate project.
  • Apple Touch Icons and Splash Screen: These are the icons and splash screens that are saved onto iPhones and iPads when users “Add to Homescreen.”
  • Print Style-Sheet: For those users who really want to print this list out and bring to the polls, this snippet CSS will strip out all of the web based styling and print the list simply. It also uses pseudo-elements to add the links to each anchor for later reference.
  • Minimum-Width Container: Since I used the mobile first approach on this page I was able to add a width to the container div that reined in content for browsers with widths over 800 pixels (your basic desktop).
  • Google Web Fonts: To preserve the look and feel of the previous printout, but also have fonts that would be responsive according the CSS applied to them and make sense semantically, I used google web fonts.

The Future

iPhone Add to Home ScreenI’m not sure this will be the way people save election information to bring to the polls forever, but it seems like an awesome solution for now. If you’d like to check it out and use this as a model for your own projects follow this link. And if you can vote in Philadelphia, or know anyone else who can, please forward this link to them so they use it at the polls on November 8, 2011.

Hurricane Training

Last month Hurricane Irene came swinging through the North East. The day Irene hit Eastern Pennsylvania also happened to be a marathon training day for me and my buddy Sean. Since it rained during my first marathon I thought it might actually be “best practices” to go out for a training run in these rainy conditions. Plus, I would get the chance to check out all of the local streams going “bananas” with way too much water.

The run was supposed to be only 12 miles, but we ended up running 14 by the end of the day! This was caused by us making the route up as we went along to find the best views of local streams. After getting about half way through the run I came to realize that I really enjoy the more challenging and difficult runs during my marathon build up. Not to say that the route we picked was the most difficult to run, but swerving around fallen and falling branches along the run was great. I really didn’t feel like I had run the 12 mile distance by the time I made my way home. Only after mapping the route did I find out we went over our mileage.

Cool Stuff

Some of the cooler stuff that happened while were running were.

  • Getting fully turned around by a whole field being flooded.
  • Figuring out extremely large puddle crossings. The finally solution after 15 minutes of “problem solving” was to simply walk through them and run in soaked shoes.
  • Seeing Kerr Park totally under water. This validated the concerns made by the Borough over placing a skatepark there.

I also wanted to get some photos while we were running, so I put my iPhone into a sandwich bag and brought it along for the run. So you can thank my Macgyver ingenuity for the photos that accompany this post.

Shameless Plug

This year’s Philadelphia marathon is actually my third time running 26.2 miles, so I thought I would also try and raise a couple dollars for my skatepark project (Downingtown Skatepark Organization) with this effort. Since my time might not be totally embarrassing this year I won’t feel as awkward sending out a follow-up email with my race recap and time to all who donate. If you would also like to donate to this effort please click on the image below.
* Remember that all donations are tax deductible and come with a receipt;)
26.2 for the Skatepark

A New View for “My TextMate”

Last week I was watching a screencast from the popular website CSS-TRICKS and I noticed a detail that I often overlook. Chris Coyier, the owner of this screencast, had customized colors and fonts in Textmate. Why had I never thought of doing this myself?

I spend about half of my day in TextMate for one project or another and every week I seem to find another reason why I prefer using this program to any other editor. I’m constantly finding shortcuts for commenting code, opening window, closing tags, etc… and it never seems to end (The built in “Tip of the Day” helps too). That is why it is so surprising that I’ve overlooked one of the simplest ways to make my experience with this program so much better. After finishing up this screencast I decided that I would also take a couple minutes to customized my colors and fonts so they would be easier and more interesting for me to read. I created highly contrasting colors for the syntax highlighting I care about the most.

Simple as that. Something that takes a couple minutes to customize actually makes me want to open up this editor that much more often. I think I’ll make this part of my regular monthly routine going forward. If you also use this program I encourage you to do the same. Spend 5 minutes to keep your daily routine fresh!

Mac Mail Signature Hack

Creating HTML signatures on your Mac’s Mail (Snow Leopard) is an easy hack that can be accomplished in a few easy steps. You can even specify different signatures for different accounts. All you really need to accomplish this is a plain text editor(TextMate) and the ability to write some simple HTML with inline CSS. I’m assuming doing this in other versions of OSX will be similar, but we’ll have to see after I upgrade to Lion.

Creating the HTML File

To create an HTML signature you first need to create a simple html file with a table layout and inline CSS. This is required because all of the awesome stuff we can now do with HTML can’t always be read in email programs. That is why we will code this like it’s 1999. Here is a great article by Mailchimp titled “How To Code HTML Email.”

You can download the HTML file I created here. There is no need for header information, a document declaration, or anything besides code that would normally be found within your body tags. The code will be dropped into the body of your message and your mail program will deal with the setting that stuff up. You also need to make sure your images are loaded to a web server so they can be downloaded into people’s mail programs. In this case I used the “apple-touch-icon” that was already loaded into my website’s root directory. If you don’t know anything about these check out this reference in the Safari Developer Library. They’re pretty cool.
Mac Mail Signature HTML Hack

Webarchive

After you write all of your code you can preview it in Safari and make your tweaks as needed. If you feel like you are happy with the result you can then save this file as a webarchive (from Safari). This file needs to be saved into your Mail’s support directory found at: Users/User/Library/Mail/Signatures.

Mac Mail Signature Hack

Wiring it Up in Mail

Mac Mail Signature Hack
So, far we’ve done nothing that can hurt your Mail program, since we’ve only added a superfluous file into a directory. Now that you have this webarchive file loaded into the Signatures directory all you have to do is add this reference to the SignaturesByAccount.plist file. Before making changes to this file you will want to save a backup, just incase you need to revert to this because something got messed up and your Mail program is working properly. There are many ways to edit this file, but I prefer the plain text editor, since XML is pretty simple to edit.

After opening the file you will want to copy a “dict” block of XML in the “AllSignaturesKey” array and paste it below the other ones in the array.

<dict>
	<key>SignatureIsRich</key>
	<true/>
	<key>SignatureName</key>
	<string>Mail Hack</string>
	<key>SignatureUniqueId</key>
	<string>mailhack</string>
</dict>

Then just swap out the references so your “SignatureUniqueId” is the same as the beginning of your webarchive file. In this example mailhack.webarchive matches mailhack.

Now that you have the reference to this file in the correct array, associating that with the email account you would like to have this signature show up in is the next step. If you only have one account this will be even easier. You simply need to find the XML with the “AccountURL” string that links up to the correct account and add this string to the “signature” array.Mac Mail Signature Hack

<key>Signatures</key>
	<array>
		<string>mailhack</string>
	</array>

If there were no previous signatures then you will need to replace this tag with that code

<array/>

Otherwise just the additional string in the array will get the job done.

Making it Work

After completing these steps and saving the associated files you can restart your Mail program and you should have the addition of one more signature to use when composing mail. Enjoy!

Mac Mail Signature Hack

Codecademy

CodecademySmashing magazine recently had a twitter update about a website called Codecademy that helps you learn how to code. Currently there is only the “Getting Started with Programming” course available. This course goes over the basics of Javascript, with lessons on creating variables and loops. I’ve done some javascript courses before, but I thought I would run through it to see if there were any basic gaps in my skills.

I was pleasantly surprised with how fun this course was. I’ve always like problem solving and working through each simple logic-based problem was really fun. The only issues I was having was when I would create my own variables and end up having an error. They would the variables like:

var wesVariable= "something kinda string";

and I would try and get the substring of that and it wouldn’t work:

> var wesVariable= "something kinda string"; wesVariable .substring (0,3);
==> som
ERROR: three is not defined

So, everything was working correctly, but I did’t call my variable “three” like the lesson expected because that was never spelled out in the directions.

CodecademyOutside of that little hiccup the site was really fun and sharpened up my skills a little. I encourage anyone like me who spends a bunch of time using javascript libraries and plugins to run through this course. I’m excited to see what courses they come up with next! PHP please.

Plus, they use the same google font for their site’s title as mine, so you know they’re classy;)

Philly to Cape May

Sometimes it is hard to realize the difference between goals and objectives when you are committed to the specific tasks associated with them. This week I was lucky enough to take a step back, reevaluate my situation and change directions, all because of a negative weather forecast.

As part of a healthy lifestyle I have been trying to maintain participation in one century bike ride and marathon per year. Last year my century ride was the Gran Fondo Philadelphia. This was a super gnarly 102 mile ride, with an insane amount of hill climbing for the distance. My plan for this year was to sign up for this ride again. This decision was really based on me not wanting to search for another race that would fit in with my marathon training schedule. It is embarrassing how lazy that approach to an endurance sport is.

I had also been procrastinating my registration for this ride, since I knew there would be open slots based on how brutal it was last year. This was most likely my subconscious holding me back in some way. So, last week right before my last-minute registration I decided I would also check the weather for race day. It turned out there would be an 80% chance of rain that Sunday. I had been training for this ride over the last 3 months, so this was really disappointing news. I also suddenly had visions of other less prepared riders slamming into me during climbs and descents in the last 20 miles of the race. This all made me really reconsider what I was trying to accomplish with this ride. Last year I participated because it was something new. This year it was just the default.

Then the lightbulb went off. I have been talking about taking a ride from Philadelphia to Cape May, NJ for the last year and it is something that had never materialized. Saturday was also going to be beautiful and I’ve always wanted to ride through South Jersey with no cue sheet or group to push me in one direction or another. The idea of working my way to an end point with no real plan has always been appealing to me. I guess it is kind of similar to my want to ride cross country. You can’t really over-plan a larger trip. You have to just enjoy every moment and take it one mile at a time.

After getting my wife on board and spending 5 minutes of google maps research I was ready to go.

The ride was fantastic. My day started with a train ride from Downingtown to Philadelphia. Then I road from Philly to Camden, NJ. Camden was similar to riding through post-apocolyptic American landscape you see in movies like 12 Monkeys. The rest of my trip was filled great suburban communities, semi-rural farms and the Jersey Shore. It made for a nice contrast when starting my actual ride in an episode of “The Wire.”

I was lucky enough to accidentally pass through Collingswood, Vineland and Millville on the way down. Riding through each of these downtowns on a Saturday was really great. Millville was having a classic car show that I would never have stopped by if I wasn’t on my bike. I most likely wouldn’t have even noticed it.

There were also beautiful scenes and unique buildings all over this state that normally seem mundane driving by at 45mph. Riding my bike let me stop and take in these views without offending anyone else’s schedule. I was also able to view little treasures hidden behind the brush-line. Slowing down to a coasting speed of 10mph while cruising by a few of these hoarders’ “estates” was priceless.

After almost 7 hours of riding and right before it started to rain, I finally arrived in Cape May. My wife and son were waiting upon my arrival. Watching my son eat an ice cream cone for the first time at the Jersey Shore was much better crossing any finish line. I’m happy I was able to take a step back and put my efforts toward completing my real goal; riding 100+ miles and having a unique experience. It turns out that the Gran Fondo was just an objective on the way towards that goal.

Daddy Day

When I think about the list of obligations that I try and maintain in my life it is easy to forget to add the largest one to the list; being a Father. I guess the main reason for this item always gets dropped from my list of obligations is that I don’t think of this as something I “have” to do. Fatherhood never makes its way into my todo lists or any of my other productivity applications, because any tasks associated with my son always take priority. It is something I always look forward to and I don’t have to force myself to do.

This past Saturday my wife was helping a friend, so I was given the opportunity to spend the entire day with just my son. These days can’t really be called anything but “Daddy Days.” They are the rare days when I call the shots on everything and have no set schedule.

The Park

The cornerstone of any Daddy Day is a visit to the playground. We went to the Downingtown All-Abilities Playground this morning, and as usual it was more fun than I expect. It seems that no matter how routine something like going to the same park for the 10th time seems, Julian continually finds a way to make it new. On this visit Julian decided that he wanted to keep getting pushed increasingly higher on the swings with the addition of a twist. It was about an hour and a half laughing and running around on all the playground features before it was time to start our walk back home.

Farmer’s Market, Lunch and Rita’s

Another cool thing about these days are the additional stops I can make on a whim. On our walk home I realized that Julian would probably enjoy stopping at the Farmer’s Market. He is always excited about all of the different fruit and vegetables that are on display there, even though he identifies almost all of them as “Apples.” On the rest of our trip he also had all of these treasures to play with in his Radio Flyer.

Now that the Radio Flyer was loaded with produce, a stop for pizza and Rita’s water ice seemed like a natural next two stops on the way home. In hindsight it is pretty obvious that these are really places I wanted to go, but Julian also really seemed to enjoy these stops. There aren’t too many things better than a stop for water ice when you don’t have anything else on your schedule but an afternoon nap.

Errands

After Julian woke from his nap I did find the need to finally get a couple errands done. I’ve come to realize that if I bring him along and continually engage with him during these errands he actually seems to enjoy them. One this day I was dropping off flyers for our next Downingtown Skatepark Organization event at all of our local skate shops. This meant I would also need to bring along little toys and think of things for Julian to help me do while we were out. Much of the time this ended up being handing me flyers or picking something up. As long as all of these tasks are reinforced with an enthusiastic Hi-Five we are good to go.

End Game

We also made a stop at a family friend’s house on the way home. Watching Julian show off his new words and dance moves, I’m always amazed at how proud I am of these accomplishments. There suddenly is no shame associated with me turning my friend’s kitchen into dance party central. Now I’m starting to understand all of those people who seemed way too into being a parent. It’s Super fun!

Wrapping up my Daddy Day with dinner and story time made me feel incredibly complete. Apparently my 22 month old son can be my best friend.

End Internet Explorer

Would you let the majority of your neighbors drive around in cars that were half broken down and total hazards on the road? If your like me you would probably try and gently (or maybe not so gently) suggest to these neighbors that they get a car that won’t harm themselves and everyone else around them. Why don’t we do this with Internet Explorer users? I get that it is the browser that comes on your PC by default, but is investing two minutes of effort too much to keep all of our data safe and experience the full web?

More Car Analogies

A large portion of visitors reading this are probably doing so on this broken browser. In my opinion that is like going on a road trip with muddy windows, no AC, a leaky sunroof and a steering wheel that only turns right. The reason for this is Microsoft’s aversion to playing with anyone else. For those of you who don’t already know, there are rules to the road (the world wide web) published by the World Wide Web Consortum. IE is basically telling the world that they need to make a road full of jug-handles because they can only make right turns and, they are probably not going to do anything to change that any time soon. All you have to do is ask developers what they create their conditional statements for and they will tell you it is almost always Internet Explorer.
Here’s an example of what is used in HTML 5 Boilerplate:

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

The javascript library referenced below is used to make transparent png images render correctly in older version of IE. This is really funny because currently the IE website has transparent png files that will not render correctly without a similar workaround.

<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->

Check out Initializer (Another Boilerplate for HTML 5 Projects) and you’ll see options like:

  • IE Conditional Comments
  • Old IE Conditional Comment
  • HTML5 Shiv
  • Modernizr

These are all created for minor tweaks to older browsers with the major adjustments for Internet Explorer.

The Future of IE?

Well it is easy to guess what is going to happen with Internet Explorer in the near future. They will do more of the same. As long as people keep running Windows instead of products like Ubuntu or Chromebook on their PCs, Windows will continue to have the captive audience they need to continue “business as usual.” Gouging you on updating to a new version of Microsoft Office is their bread and butter, so why should they care if the internet is unsafe and looks totally crazy to you. Plus, who doesn’t love to wait for anti-virus software to do nothing to save your computer?

Here are some stats on current browser support of HTML5  and a test you can take for your current browser’s support at THE HTML5 TEST. You will notice that even the development/beta versions of IE are not “on par” with the next lowest performing current browsers. So, for all you die hard Microsoft fans out there, be prepared for another car made out of Bondo!

For anyone who might want to see what a polished and more secure world wide web looks and feels like, you can download stable releases of up-to-date and secure browsers at:

If you are already using these browsers you may want to consider sharing these links with others. IE has held the the world back long enough. If they are going to refuse to adopt the best practices used by everyone else why should anyone support them? Also, these other browsers are free and have great add-ons/extensions. You can even download Angry Birds directly into Chrome and play it for free on your desktop.

Adding Some Depth

The pressed/embossed look is something that has taken off lately. My technique for achieving this is super simple and can add some extra depth to any design that is feeling a little flat.

Start in Photoshop

This all starts in Photoshop with color. I start by picking 4 colors that are slight variations of each other. Similar to the monochromatic studies of my youth. I do this by adding my base color to the art board and then overlaying 3 gray layers with a low opacity, like so:

Then I individually pick each of these colors with the eyedropper tool and add them to my swatches panel.
Now I can erase my color study and get to work.

For print

In print I usually use this effect in Photoshop layouts so I’ll just explain that.
My first step is always add the second-to-lightest tone as a background layer.

Then I add my object(a box in this example) with the 2nd darkest color as a fill on a new layer.

Then I will go into the layer style and add bevel and emboss. This is an “inner bevel” that has a direction of “down,” with “size” and “soften” set to 0. Then I set the highlight color as the lightest of the 4 colors and my shadow as the darkest of the 4.

Now you can copy that layer style and add it to other elements. Like text with the same fill color as your box.

For Web

Now I grab all of these colors and apply the same technique to CSS when creating content for the web. In this example I will add this to a simple div. First I’ll set up an html document and add the div with an id with a div id.


div id="pressed"

Now that I have that div on my page I can style it the same way I styled my photoshop layer. I will grab all of the same hex values for these colors I used in my photoshop layout. To add the height, width and background color I will do this:

 
#pressed { 
    width:300px; 
    height:100px; 
    background-color:#002c2e; 
} 

After that I will add the darkest color to the top and left borders of the div to create the shadow.

 
#pressed { 
    width:300px; 
    height:100px; 
    background-color:#002c2e; 
    border-top:solid 1px #001818; 
    border-left:solid 1px #001818; 
} 

Then I’ll add the lightest color to the bottom and right side to create the highlight of the div and center it within its parent element with “margin”.

 
#pressed { 
    width:300px; 
    height:100px; 
    background-color:#002c2e; 
    border-top:solid 1px #001818; 
    border-left:solid 1px #001818; 
    border-bottom:solid 1px #01a2a6; 
    border-right:solid 1px #01a2a6; 
    margin:10px auto; 
} 

Finally I add the background color to the parent element. In this case it is the body, since this is the only element on the page.

 
body { 
    background-color:#015759; 
} 

After all of this I end up with an element that looks like this:

On Your Own

I’ve attached the html file and photoshop file for you to play with and modify. Feel free to do what you want with these. Enjoy!

Download Files

Google’s Web Fonts

Google Fonts
For years I was told that elegant web fonts “are not really a viable option.” I had been forced to use whatever system fonts were available on a user’s machine when creating content that was semantic. This was really annoying. Below I’ll explain how I went from using system fonts only in my font-family properties to adding this newer option provided by Google.

Just System Fonts

So, I would usually just add system fonts to the style sheet like this:

 
h1 { 
    font-family: Garamond,Georgia,Times,Serif; 
} 

The problem with this is that if Garamond, Georgia and Times all are not on the user’s system we are stuck with any Serif font they may have. This can obviously create some drastic changes in the way multiple users view your heading 1 font.

Loading Self-Hosted Fonts

You could also add your own fonts to a folder for loading with a reference like:

 
@font-face { 
     font-family: Somefont; 
     src: url(websitefonts/somefont.eot); 
}

But your basically distributing system fonts that ONLY YOU have a license for to anyone who visits your site. You can see the obvious legal issue here.

The New Vendor-Based Direction

I started noticing designers using great fonts on the web again about two years ago. This was my introduction to Typekit. This service seemed like the coolest idea ever. You could reference their fonts in your site’s font-family and these hosted fonts would download directly into a website. This let Typekit deal with all of the licensing issues that made earlier options undesirable. Then I realized I had a problem with this. Since Typkit and other similar services are subscription based solutions, what would happen to my clients if they didn’t totally understand how their Typekit plan worked, or the need to maintain it(pageview limits, pricing, fonts per site). I would be sticking them with this company’s subscription based service that my clients probably would not fully understand. If Typekit went under, or decided to change it’s business model this could create an undesirable senario.

Google’s Take on It

Then came Google Fonts. My interest in web fonts was suddenly rekindled. These OPEN-SOURCE fonts are hosted on a reliable content delivery network and can be used on most websites easily. All you need to do is add the code that referencing the font api.

 
@import url(http://fonts.googleapis.com/css?family=Yellowtail); 

Then it add this new font as the first reference in your font-family:

 
#header h1 { 
         font-family: 'Yellowtail', cursive; 
} 

I’ve been using Google’s content delivery network for years to reference javascript libraries like JQuery and Scriptaculous. It is not likely that users will have your font already cached like these commonly used libraries, but maybe if it gains some momentum this will be case more often.

What’s Next?

I guess this is really all leading us into a more semantic web that can be accessed by multiple user agents/browsers. These new agents/browsers can easily strip out all of your hard work in their reader modes(Safari’s Reader is a great example). This sure does beat using .png, .jpg, etc… files for any elegant type, but makes me wonder how much control we will be left with. Every time we take a step towards a better and more semantic web it seems that new agents/browsers/hardware try and pull user’s away from the browsers we are all just getting comfortable with. Hopefully their will always be a place for great web design in this mix. That seems to be what Google is supporting.

Check out the Google Fonts page for more info.