I recently wrapped up a project for York University in Toronto and the UI design called for some really slick looking buttons for an overall polished “desktop” app feel. I took a completely CSS3 approach and I feel that the outcome was worthy enough to share here. The project was for internal use only, but I have a sample environment running on my site here.

Without further adieu, the code.

First we set up the divs for the buttons, the wrapper is necessary for IE9 compatibility. Of course no tutorial would be complete without an IE workaround. IE9 has a lot of trouble rendering both gradients and border-radius at the same time, the end result has the gradient spilling out of the border. With a wrapper you can set overflow to hidden and be done with it, but I digress

<div class = "button-wrapper">
   <div class = "button">My Button</div>
</div>

Now for the css.

//I will be omitting vendor prefixes to keep the tutorial uncluttered, don't forget to add them later.

.button-wrapper {
   float: left;
   border-radius: 4px;
   border: 1px solid #cc3300;
   overflow: hidden; //important for IE9 compatibility
   box-shadow: 0 1px 2px #777;

.button {
   font-family: Helvetica, Arial, sans-serif;
   font-weight: 700;
   font-size: 2em;
   background: linear-gradient(top, #f06f1c 0%,#e24a17 100%);
   border-top: 1px solid #ffcc99;
   border-left: 1px solid #ff9900;
   border-right: 1px solid #ff9900;
   border-bottom: 1px solid #cc6600;
   border-radius: 4px; // this is for browsers that can handle it, it looks cleaner.
   color: #FFF;
   padding: 6px 7px 7px 7px;
   text-align: center;
   cursor: pointer;

//the hover state gives a flat background color and pushes down the text to give the depressed look.

.button:hover {
   background: #E24A17;
   padding: 7px 7px 6px 7px;
   border-top: 1px solid #ff9900;
   border-left: 1px solid #cc6600;
   border-right: 1px solid #cc6600;
   border-bottom: 1px solid #cc6600;

And there you have it, a pretty slick looking button and if orange isn’t your thing you can always swap the gradient and borders for something a little more your style. Hope this helps you out a little with our next UI design.

Taking a look at the Twitter API can be a little daunting the first time around, there is a lot of information packed into every response. I am going to show you a relatively quick and simple way to parse most of the necessary data from the standard JSON response.

This is not meant as a comprehensive solution, there are several out there already, on the twitter site even right here. This is meant to show you how to quickly get a couple tweets on your page, parsed and ready to go with proper links.

Let’s get started shall we? First lets get some tweets to work with! I am using file_get_contents, but you could just as easily use cURL and in some cases it may work out better, but there is a little more overhead work and seeing as this is supposed to be a simple tutorial we will stick with simplicity.

// put the contents into a variable, use @ to suppress error messages, we will handle it ourselves.
$tweets = @file_get_contents("https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=[some_screenname]&count=5");


// since I am not using oAuth for this tutorial, you may find that you sometimes go over the anonymous usage limit and this attempt will return false.
if(!$tweets)
{
   echo '<div class = "error">Could not return tweets at this time, please try again later</div>
}
else
{
// first thing we do with the JSON response is decode it into a workable array.
   $tweets = json_decode($tweets, true);
   foreach($tweets as $tweet)
   {
      //the response structure is very complex, on the one hand it has very detailed information about each tweet and on the other it is very cumbersome to traverse.
      //take for instance that fact that the raw link urls, hashtags, and mentions are all stored in a separate part of the structure and this location changes depending on if it is a retweet or not
      if(isset($tweet['retweeted_status']))
      {
         //like I mentioned before retweets have their own structure, this code catches a retweet and puts the info where we need it, as well as provides a header to acknowledge a retweet
         $header = 'Retweeted from <a href = "https://twitter.com/twitterapi/statuses/'.$tweet['retweeted_status']['id_str'].'">@'.$tweet['retweeted_status']['user']['screen_name'].'</a>: ';
         $tweet['text'] = $header.$tweet['retweeted_status']['text'];
         $tweet['entities'] = $tweet['retweeted_status']['entities'];
      }
      //now we go through each set of entities (urls, hashtags, mentions) and insert them into the body of the tweet.
      if(sizeof($tweet['entities']['urls']) > 0)
      {
         foreach($tweet['entities']['urls'] as $url)
         {
            //the urls need to be escaped so we can work with matching them
            $slashed = preg_replace('/\//', '\\/', $url['url']);
            if(preg_match('/'.$slashed.'/i',$tweet['text']) > 0)
            {
               //here we do the actual replacing.
               $tweet['text'] = preg_replace('/'.$slashed.'/i', '<a href = "'.$url['url'].'">'.$url['url'].'">'.$url['url'].'', $tweet['text']);
            }
         }
      }
      if(sizeof($tweet['entities']['hashtags']) > 0)
      {
         foreach($tweet['entities']['hashtags'] as $hash)
         {
            if(preg_match('/#'.$hash['text'].'/i',$tweet['text']) > 0)
            {
               $tweet['text'] = preg_replace('/#'.$hash['text'].'/i', '<a href = "https://twitter.com/#!/search?q=%23'.$hash['text'].'">#'.$hash['text'].'</a>', $tweet['text']);
            }
         }
      }
      if(sizeof($tweet['entities']['user_mentions']) > 0)
      {
         foreach($tweet['entities']['user_mentions'] as $user)
         {
            if(preg_match('/@'.$user['screen_name'].'/i',$tweet['text']) > 0)
            {
               $tweet['text'] = preg_replace('/@'.$user['screen_name'].'/i', '<a href = "https://twitter.com/'.$user['screen_name'].'">@'.$user['screen_name'].'</a>', $tweet['text']);
            }
         }
      }
       // finally if the tweet is a reply, then we need to fill in the link to the user
      if($tweet['in_reply_to_status_id'] != null)
      {
         if(preg_match('/@'.$tweet['in_reply_to_screen_name'].'/i', $tweet['text']) > 0)          {
            $tweet['text'] = preg_replace('/@'.$tweet['in_reply_to_screen_name'].'/i', '<a href = "https://twitter.com/twitterapi/statuses/'.$tweet['in_reply_to_status_id_str'].'" >@'.$tweet['in_reply_to_screen_name'].'</a>', $tweet['text']);
         }
      }
      /*that takes care of the most pertinent information regarding tweets. There is a whole whack of other useful information inside a response,
      so by all means take this code and build on it. Keep in mind though that this is a very basic way to display tweets, there are many more ways that are
      way more comprehensive.*/

      // Alright! So all we have left to do now is display the tweet, you can use your own method, but here is a basic one just displaying the tweet body itself.
      echo '<div class = "tweet">'.$tweet['text'].'</div>';
   }
}


Yep, it’s about time to unleash my redesign of Deciduous Design & Development, I’ve gone for a more clean, bright and minimalistic approach and worked within a one page layout, which was actually quite challenging! Check out the new digs right here http://www.deciduousdesign.ca.

One page designs are rapidly gaining in popularity, they allow for a more clean, simple and intuitive user-experience… That is… if they are done properly. One page layouts are the right choice for sites with minimal content, however, even the simplest of sites traditionally have at least 3 sections including: about, portfolio and contact. What I am trying to get at here is that even though you only have one page, users of your site will still benefit from having some sort of navigation system to make their browsing experience easier. The most popular method is to have a nav-bar that appears after they have scrolled past the initial landing page. This is actually fairly easy to accomplish using jQuery.

Somewhere in your body you need to add a div to house your nav-bar

<div id="yourDiv">
    //your nav-bar
</div>

Now for the magic

//remember to load jQuery, either local or remote.
$(document).ready(function () {
   $(window).scroll(function ()
   {
      if(parseInt($(window).scrollTop()) > parseInt($(window).height()))
      {
          $('#yourDiv').show();
      }
      else
      {
          $('#yourDiv').hide();
      }
   });
});

To explain quickly, when the window is scrolled if the location of the top of the view port on the page is greater than the height of the entire view port then we show the nav, otherwise we hide it.

So there you have it! A very simple approach to a powerful UI-tool on your one page layout

So I’ve decided make a little change to my humble blogging home here at Tumblr. Up until now I have not fully realized what I have to offer to the blogging community, I am a full-time Computer Science student in Toronto, Ontario and I am also nurturing a small web design and development start-up. Needless to say free time is something I have only about a spoonful of every so often and this shows in my lackluster blogging approach. This is the part where I tell you about the epiphany! The point where I figured that maybe my struggle to hold school in one hand and a start-up in the other might come with some wisdom that may just be of some use to people. So to sum up this long winded rant, I will be changing the focus of my blog to a commentary of my journey through work, school and the little bit of life that I can manage to jam in between the two.

So I am going to deviate from my usual tech banter and focus on something that has been rattling around my head since the SOPA/PIPA blowout happened. It seems as though in the aftermath of the whole ordeal one thing is painfully clear about the relationship between the media industry and the Internet… they need some counselling. I am going to focus on the music business in particular here, because they seem to be the ones who were hit first and the ones that will pushed off the ledge first.

There is no doubt that the web is changing everything, as musician these days it is becoming easier and easier to produce, release and promote your own material. Gone are the days of creating a demo tape and trying desperately to get it into the hands of any record exec who would give just one of their gold plated seconds to listen. Now you can record and mix descent sounding album yourself, you can create your own hype through social media and release it on any of the high traffic music sharing sites available (www.grooveshark.com, www.spotify.com, www.last.fm to name a few). This fact brings me to my main point, as the record companies continuously try to assure us that the real victims are the artists, I always beg the question “victim’s of what?”. Victims of the piracy or victims of a record industry that is essentially trying to hold on to it’s version of slavery. Let’s face it, it’s the record companies that are making the big bucks off the backs of their “employees” and things are starting to change.

Record companies are going to have to start embracing the Internet or they will die trying to fight it. There are a few companies that seem to get it, one in particular that really caught my attention www.digsin.com, which is offering their entire music catalog for free, for life. Their concept is as unusual as it is clever, they are more concerned it seems with gathering data on their users than making some immediate cash. This data is as valuable as gold these days and can be used in many profitable ways if Facebook and Twitter are any hints to this. They will still be offering music through the normal channels like I-Tunes and I believe they know that people who really like something they’ve tried for free will have no problem paying a little for it. This is making the artists and the record labels more accountable for the products they are selling. It used to be that you had to buy an entire album full of crap just to get the one song you wanted to hear, now you can just download that one song and toss the rest to the curb. The power is starting to shift to where it belongs, in the hands of the fans and the artists.