Jan 04

Tweetdeck – Revert now… for your own good.

TweetDeckEDIT (6/4/2013):  The old version of TweetDeck described in this article is no longer supported by the parent company. You now have to suffer with the new updated (stripped down) version supported by Twitter. Sorry for that bad news.

 

Until today I was pretty happy with my TweetDeck experience. But what I discovered rocked my Tweetin’ world.

The Problem

Question: How can I make a column for “trending” topics?
Answer: You can’t

This question has bugged me for a while.  Why do I need to go to the Twitter website in my browser to find out what’s trending? However, in searching for the solution to my problem, I found some very interesting information. Apparently Twitter  recently took over the development of the Tweetdeck program. Their claim was “we’re going to make it better”. But, of course, in the process, they completely destroyed the user experience.

For me though, being a new Twitter user, and having no experience with other versions of Tweetdeck, I was blissfully ignorant. I thought it was over-all pretty good with some strange, unexplained limitations. But searching for the “Trending Topics” column has led me to a new world of Tweetdeck greatness.

The Solution

I found out that there are actually earlier versions of the Tweetdeck software (pre-“twitter ownership”) that you can download and install for free. So, long story short, I tried it and WOW – what a great experience. It’s so flexible and feature rich, I can’t believe all the things I’ve been missing by using the Twitter’s “new/improved” Tweetdeck. I downloaded version 0.38.02 and love it.

Oh, and good news. You can have it too.  Before you give up on Twitter, try this and see if it changes your mind.

 

 

DOWNLOAD TWEETDECK (V0.38.2) HERE

 

 

Let me know what you think in the comments below.

Jun 18

Tweetlight :: Add-ons for Firefox

I trying out new plugins for firefox.  I came across Tweetlight and thought is was worth mentioning.

It’s very easy to use… just highlight some tect, press CTRL+SHIFT+E and then press “TWEET”.  That’s it.  So easy.  I like it so far.

The only thing that I think would make it better is to have a dedicated button somewhere in firefox that I could just press.  (But maybe I’m just being lazy)

 

Tweetlight :: Add-ons for Firefox

Tweetlight add-on provides you with a faster way of tweeting web links! Rather than you yourself copying and pasting web links to Twitter, this addon gives you

May 01

Simple jQuery Page Dimmer with Pop-Up

One thing I’ve found very useful recently is the “dimmer box” or “faded pop-up”.  This web tool allows you to quickly focus the attention of the visitor onto your message, and demands a response from them.

If you’re looking for something stylish and effective, you’ve come to the right place. Every once in a while I have to take a break from what I’m doing to try something simple that I’ve never done before. This pop-up page dimmer was the perfect quick little project. I will show you how to build it.

This dimming effect is done VERY easily by using JQUERY.  If you’ve ever built an HTML page, it will take you less than 20 seconds to get this working for you. Plus, this pop-up box cannot be blocked with pop-up blockers and is easily customizable through CSS.

The page you are viewing right now is set to trigger a pop-up on a 10 second delay. Plus you can also trigger the effect by clicking the button below. Click on the red “close” button or anywhere outside the popup box to hide the pop-up.

All the code I used for this project is listed below. Please give it a try and let me know what you think.

Close

This is a sample POP-UP Page Dimmer.
Anything can go here!

This is the Javascript to use in the <head> section of your page.

<script src=”http://code.jquery.com/jquery-latest.js”></script>

<script type=”text/javascript”>

//This is the function that closes the pop-up
function endBlackout(){
$(“.blackout”).css(“display”, “none”);
$(“.msgbox”).css(“display”, “none”);
}

//This is the function that closes the pop-up
function strtBlackout(){
$(“.msgbox”).css(“display”, “block”);
$(“.blackout”).css(“display”, “block”);
}

//Sets the buttons to trigger the blackout on clicks
$(document).ready(function(){
$(“#btn1″).click(strtBlackout); // open if btn is pressed
$(“.blackout”).click(endBlackout); // close if click outside of popup
$(“.closeBox”).click(endBlackout); // close if close btn clicked

// Automatically trigger the pop-up after 10 seconds
setTimeout( strtBlackout, 10000);
});
/**
* @author Rob Goodwin / About Web Design
* http://www.aboutwd.com
*
* Version 1
* Copyright (c) 2012 About Web Design
**/
</script>

 

This is the CSS to make it work. (Also goes in the <head> section

<style type=”text/css”>

.blackout {
background-color:#000;
opacity:.7;
filter:alpha(opacity=70);
height:100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:100;
display:none;
cursor:pointer;
}
.msgbox {
background-color:#ccc;
border:1px solid #ccc;
color:#000;
width:70%;
height:60%;
position:fixed;
top:20%;
left:15%;
border-radius:20px;
padding:10px;
z-index:101;
display:none;
}
.closeBox {
background-color:#CC0000;
color:#FFFFFF;
padding:8px;
float:right;
border-radius:3px;
cursor:pointer;
text-transform:uppercase;

}
</style>

 

This is the Content for the dimmer: This goes in the <body> section

<div class=”blackout”></div>
<div class=”msgbox”><div class=”closeBox”>Close</div>
Your Message Goes Here! </div>
<input type=”button” id=”btn1″ value=”Click Here” />

Sep 16

Making it Rain a cool little Jquery trick

So, I’ve been refreshing myself on Jquery lately. This is one of the many programming languages you should know as a web designer. Although not required, it does put a bunch of advanced effects into reach for people who want to dig it out a little bit.

To sort of keep current on how JQuery works and the syntax, I sat down and developed this neat little Rain Box as a mini-project. JQuery can do a lot of very useful transforming of text and other page elements. This one though is more on the creative or “visual effects” side. It turned out pretty nice and only took about 30 minutes to create.

This uses NO Flash Animation.
No PHP, Coldfusion, .net, etc
It is just one DIV tag, one image (the drop), and a little bit of JQuery code.

Download the zip file here if you want to see how it works.

This is the rainbox. Completely done using JQuery (Javascript). Here’s another “Real world” example: (coming soon)