27 Aug 2008
Today is the unveiling day of a new web application I’ve been working on the past few months. I am pleased to announce: Status. I worked on it with my friend Richard of Shiftedfrequency.
What is Status?
Status is a communication tool that is all about private groups. You can either start a group, or get invited to an already existing group. Within your groups, there is but one single function, and that is to “Check in”. When you check in, you are letting the others in your group know what you are doing and where you are.
The idea is that everyone in the group can, at a glance, get up to date with what everyone else is up to! And without the worry that you are broadcasting private information out for the whole world to see.
It is very easy to check in. If you are at a computer often, there is of course the web interface. If you are a Mac user, there is a Dashboard Widget you can use to update your status. If you are on the go, you can send in status updates right from your cell phone via a text message.
Why is this useful?
The idea for this site came from the company that Richard works for. Richard lives and works in Baton Rouge, but the main office for his company is in Dallas. Some of the employees also work from Houston and a few cities in Florida. Not only is this confusing already, but much of the job involves being “on site” at different client locations. So where is anybody at any given time? Who knows! To find out, you’d have to take a stroll around the office, pop in on people and ask around. “Hey! Who knows where Diane is?!”
Clearly, a waste of time and energy. They needed a simple solution for all these employees to stay on the same page with each other. This is what Status is built to solve. Now that all these employees are checking into Status, everybody can see at a glance what each other is up to and where they are.
As useful as Status can be for keeping track of your group, it can be just as useful for keeping track of yourself! All your updates are saved to your account, so if you need to take a glance back at your week to see what you were doing (say, to bill some time), all that information is there for you.
Is it free?
Yep, there is a free plan for groups up to 5 members. If you need this for a business or any larger group, we have plans to accommodate any group size starting at just $10/month.
Screencast: Introduction to Status
Wanna take a peak inside Status and learn a bit more on how it works? Watch the screencast demo below! (The quality should be good enough to go full-screen)
Wanna be in the CSS-Tricks group?
Should be a cool way for us all to keep in touch! The best way to handle this I think is for you to just use my Contact Form and just shoot me a note (make sure you get your email in there correctly) and I can add you to the group. See ya’ll there!
Visit Status
26 Aug 2008
Automatically back up your entire web server files and databases to Amazon S3
Christina Warren has a comprehensive and excellent tutorial on creating a Ruby script to back up your entire web server, including databases, and upload them directly to an Amazon S3 bucket. The tutorial is geared toward Media Temple, but I imagine could be adapted to other hosts. She also did a screencast demo demonstrating it all. This is high on my list of to-do’s, and handy for me being on Media Temple and all.
What is Your “Design Signature”?
Mike Davidson shares his design signature:
- I start with a CSS reset
- For column layouts, I float every column (usually left but sometimes both left and right)
- I use the clearfix class to clear all of my containers
- I use dotted underlines for body-copy links that change to solid underlines on hover, and no underlines for links that appear within navigational lists
- I use desaturated colors for visited links
- I employ fixed-width centered layouts using a container div, auto margins, and a center text-align on the body
It all sounds like pretty standard, basic stuff, but when you add it all up and do it over and over again on every website you make, it does start to feel like a signature. Do you have one?
Walk it off
Check out this music video. You can change “perspectives” while the video is playing with a clever slide technique. Damn clever way to present a story.
Interviewed
Volkan interviewed me for his site Web Deneyimleri a few weeks ago. The site is in Turkish, but the post with my interview has the original English version included at the bottom of the post.
Oh yeah! And today is my birthday =)
25 Aug 2008
One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.
As you can see, this “shield” shows the day, the month, and the number of comments. This article will show you exactly how to get that effect!
First of all, I’m using the calendar icons made by Marek Sotak. I’ve also built upon his idea to have specific images for each month, so you don’t have to put the month into the image with text, allowing for a nicer layout of the calendar icon.
We’ll begin by creating a calendar icon like this:
<p class="date month8">18</p>
With the following CSS:
p.date {
width: 42px;
height: 10px;
padding: 18px 0 14px 0;
text-align: center;
}
That makes the date box, now we’ll need a line for each of the 12 months:
.month1 { background: url(images/cal_01.gif) no-repeat 0 0; }
.month2 { background: url(images/cal_02.gif) no-repeat 0 0; }
.month3 { background: url(images/cal_03.gif) no-repeat 0 0; }
.month4 { background: url(images/cal_04.gif) no-repeat 0 0; }
.month5 { background: url(images/cal_05.gif) no-repeat 0 0; }
.month6 { background: url(images/cal_06.gif) no-repeat 0 0; }
.month7 { background: url(images/cal_07.gif) no-repeat 0 0; }
.month8 { background: url(images/cal_08.gif) no-repeat 0 0; }
.month9 { background: url(images/cal_09.gif) no-repeat 0 0; }
.month10 { background: url(images/cal_10.gif) no-repeat 0 0; }
.month11 { background: url(images/cal_11.gif) no-repeat 0 0; }
.month12 { background: url(images/cal_12.gif) no-repeat 0 0; }
Having done that, the image will render like this:
Now as you’ve noticed, the HTML code this far was quite simple, the way Marek put it together, but it’s not very accessible. Though it makes perfect sense if you have a CSS enabled browser, it doesn’t make that much sense if you don’t. So we’ll change it to this:
<p class="date month8"><span>Aug</span> 18<span>th</span></p>
And we’ll add this to the CSS:
p.date span { display: none; }
Adding in the comment bubble
Now we’ll get into the spicy part: adding a bubble with the number of comments in it. To properly do that, we’ll need a bounding box around the date, which we’ll call “shield”, and we’ll add a div called commentscloud. It’ll look like this:
<div class="shield">
<p class="date month8"><span>Aug</span> 18<span>th</span></p>
<div class="commentscloud">5</div>
</div>
All we’ll do with the shield div, is give it position: relative;, so we can use position: absolute; on the commentscloud. The full CSS looks like this:
.shield {
position: relative;
}
.commentscloud {
position: absolute;
text-align: center;
top: -4px;
left: 22px;
width: 30px;
height: 24px;
padding: 3px 0;
background: url(images/bubble.png) no-repeat 0 0;
}
Which renders into this:
Implementing this in WordPress
The CSS is easy: just add it to your theme’s style.css. For the HTML, you’ll have to open up the appropriate page of your theme, for instance index.php, and look for the_post(). You’ll have to add the following code where you need the badge to be displayed:
<div class="shield">
<p class="date month<?php the_time('n'); ?>">
<span><?php the_time('F'); ?></span>
<?php the_time('j'); ?>
<span><?php the_time('S'); ?></span>
</p>
<div class="commentscloud">
<?php comments_number('0', '1', '%'); ?>
</div>
</div>
This way it should work out fine. For an example of how this looks, check my site: Yoast - Tweaking Websites.
This post has been a guest post written by:
Joost (pronounced Yoast, hence his domain name) de Valk is a well known WordPress Plugins author and online marketeer. His blog covers all things WordPress, SEO, and online marketing in general, and next to that he runs a weekly WordPress Newsletter.
