For a long time, I was proud of the fact that I was using Blogger as a blogging platform. I thought it was challenging and fun to invent ways to hack and get around many of the challenges associated with hosting my own Blogger blog and using the non-xml old style version. I associated it with driving a vintage car. There was something cool about not moving to the latest and greatest, but instead sticking with retro for retro's sake. Blogger is the ratty old Chevy that, with some love can be made into something that will turn heads and function pretty well, but not without a lot of work.
Additionally, I was able to convince myself that WordPress or another CMS was too robust for what I needed and had doubts about integrating the rest of my site into a CMS.
That's all changed. Shortly (how dare I commit to a specific date), I will be making the move to WordPress. There is too much support, too many features (for both you ans I) and too many good things going for it to not make the move. To boot, everyone else is using it. True, it's terrible to be a follower, but there is strength in numbers, and strength in knowledge. Nine of ten design firms I speak with prefer WordPress. While you need to know XHTML and CSS to do web work...its seeming like knowing WordPress doesn't hurt either.
Blogger, so long. WordPress, here I come.
*Sorry for using "I" ten times above. This blog isn't just for me. It's for others as well. "I" promise to not let that become a habit. :)
Labels: Blogging, Web Development
A bit ago, MailChimp came out with another revision to their site. Their revisions are always great and they're always taking steps forward. Past revisions offered better interfaces for creating emails; things like a fancy WYSIWYG editor, etc. Mostly pre-campaign features.
This revision seemed to focus more on the analytics end of things; the post-campaign features. They now feature a much enhanced analytics package with tons of my favorite thing; context!
Check out the screen shot above that calls out a few of the areas they present very well. Not only does MailChimp compare your current campaigns performance to your account average, it also compares it to your industry average based on other like accounts they manage. I think this is wonderful, as stand-alone numbers are fun, but without knowing how these numbers compare to some other relevant numbers, no measurement can be made, and no action can be taken. They even go as far as to put it in MailChip terms in the green box at the bottom of the screen shot.
Other features they provide which provide context are the ability to see a domain performance report compare opens by location with an interactive flash map.
Good job, MailChimp. Keep up the good work!
Labels: Analytics, Email
There is a lot of talk about creating cool funky calendar style dates for blog posts like the one one this site. Most of them are centered around WordPress, as it's built in PHP, and is easier to manipulate.
Fortunately, the original Blogger allows users to publish files in php as well as html. As such, creating the calendar date thing is pretty straight forward in Blogger, when publishing in php.
Initially, Blogger outputs the date as a string like this:
Mar 9, 2009
After a bit of planning, we decide we want the month at the top, the day in the center, then the year offset at the bottom. We should be able to do this with four divs (or any block level elements, for that matter); one container div and one for the day, month and year. The container div will house a background image and the inner divs will have margins placing the data exactly where we want them.
Going to Photoshop, we design something like this:
You can see that the divs are laid out for each of the bits of data. From this, we can measure exactly how much margin we need and where.
Now lets lay out what we want the HTML to look like:
<div class="date-block">
<div class="date-m">jan</div>
<div class="date-d">21</div>
<div class="date-y">09</div>
</div>
Next, let's create the css to style our HTML above:
.date-block {
background: transparent url('../images/calendar.gif')
no-repeat scroll top right;
display: block;
float: left;
font: normal 900 10px Verdana, Arial, Helvetica, sans-serif;
height: 59px;
margin: 25px 0 5px 0;
text-align: center;
width: 54px;
}
.date-block .date-m {
color: #FFF;
display: block;
line-height: 10px;
margin: 6px auto 2px auto;
padding: 0;
text-align: center;
text-transform: uppercase;
}
.date-block .date-d {
display: block;
font-size: 26px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 18px;
margin: 7px auto 0 auto;
padding: 0;
text-align: center;
}
.date-block .date-y {
color: #FFF;
display: block;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
line-height: 9px;
margin: 4px auto 0 32px;
padding: 0;
text-align: center;
}
Lastly, we need to create a function that we can call in the Blogger template to turn the standard date into our new fancy calendar date. The function will look like the following, which you can place in an included file, or directly in the Blogger template:
function prettyDate($date) {
list($month, $day, $year) = explode(" ", $date);
$day = str_replace(",", "", $day);
$year = substr($year, 2, 4);
echo "<div class=\"date-block\">";
echo "<div class=\"date-m\">" . $month . "</div>";
echo "<div class=\"date-d\">" . $day . "</div>";
echo "<div class=\"date-y\">'" . $year . "</div>";
echo "</div>";
}
Breaking it down, we are going to split up the original date by exploding them by the space character, which will give us:
$month = "Mar";
$day = "9,";
$year = "2009";
Notice that there is still a comma after the day, so we replace ',' with nothing. Additionally, we turn the four digit year into a two digit year by grabbing the substring of the year, starting at the second digit and grabbing the following two digits, which will return '09'. At this point, we simply print out the HTML containing the variables $month, $day and $year.
Lastly, in our Blogger template, call the function and pass the original date to it:
<?php prettyDate("Mar 9, 2009"); ?>
The function will run when the page loads. This example assumes a couple of things. You have included a functions file with the above function in it. You have placed the CSS in an included CSS file, or directly in the Blogger template. You are running on a server that has PHP installed. Enjoy!
Labels: (X)HTML, PHP, Web Development
With libraries out there like
jQuery and
MooTools, the need for a front end developer to
know Javascript is lessening. jQuery's selector and simple method based context makes it easy for those who have no coding experience to jump right in and hang with those who do. There are, however, some instances, in my opinion, that knowing Javascript can be very handy.
Adobe Extendedscript Toolkit
This IDE allows an Adobe user to write all sizes of scripts to automate tasks in all of its programs. Automate image resizing and directory creation. Employ conditional logic to an action. Target multiple Adobe applications with one script. Do all of this and more with the Adobe Extendedscript Toolkit. What language are these scripts written in? You guessed it. The primary language is Javascript. Optionally, use VBScript or AppleScript. Of what value is this to a front end web developer? A user could write a script to open a site mockup, chop into slices, save them all and close the document, all in the blink of an eye.
Photoshop 7.xx users can
download the extension. (This tool comes with any CS editions)
UltraEdit
UltraEdit is my favorite text editor. It's lightweight, easy to use and very customizable. The latest version incorporates scripts that can be written and called with hotkeys, or by referencing the menu. Much like the Extendedscript Toolkit above, these scripts are written in Javascript and can make automation or repetitive tasks very simple. Need to print an HTML snippet? Use a script. Need to tag all of the files in a directory with your 'copyright comment'? Use a script. Write a script to find all special characters in some text and replace them with their respective hex codes.
These were just a few instances where I use Javascript in applications other than web development.
Labels: Javascript, Programs, Web Development
