Jon Rohan

This Little Market

Jon Rohan — Sat, 24 Apr 2010 16:54:55 +0000

This Little Market let’s users find and share products in their world. This is a project I co-founded and do 100% of the engineering work, including Django, CSS, HTML, Design, Javascript, Sysadmin and Database.

Using CSS3′s :target pseudo-class to Make a Slideshow

Jon Rohan — Mon, 28 Sep 2009 18:00:09 +0000

CSS3 has a lot of cool pseudo-classes. For this experiment I used the :target pseudo-class which lets you target css element based on the element targeted at the end of a url, for example.

http://example.com/page#article1

The :target on this page would be the element with the id="article1". So if you wanted to place a red dotted border around article1, then you would use something like this.

:target { 
  border: 1px dotted #FF0000; 
}

So I decided to try an experiment and make a slideshow using nothing but HTML and CSS.

Demo

Sorry, but no IE’s allowed. You prob won’t see anything.

Start Slideshow

Taming CSS

by Jon Rohan

Slide 1 of 3
Next
Never Assume you’ve mastered it

Slide 2 of 3
Last Next
The End

Slide 3 of 3
Last

Code


  
    
      Taming CSS
      by Jon Rohan
    
    Slide 1 of 3
    Next
  
  
    
      Never Assume you've mastered it
    
    Slide 2 of 3
    Last
    Next
  
  
    
      The End
    
    Slide 3 of 3
    Last

The HTML is a basic unordered list. Each list item will be the slide. Inside each slide is the controls to navigate backward and forward. And a span to display the current slide number.

The main CSS that controls the slideshow, is to just display the current slide, like this.

.book-pages li:target {
  display:block;
}

And here’s the rest of the CSS.

.book-pages, .book-pages li {
  list-style-type:none;
  margin:0;
  padding:0;
}
ul.book-pages {
  margin:30px 0;
}
.book-pages li {
  background-color:#111111;
  display:none;
  height:350px;
  margin:0 auto;
  position:relative;
  text-align:center;
  width:510px;
  color: #ffffff;
}
.book-pages div {
  font-size:1.8em;
  padding:120px 25px 0;
  line-height:2em;
}
.book-pages li:target {
  display:block;
}
.book-pages .next {
  position:absolute;
  right:0;
  bottom:-20px;
}
.book-pages .last {
  position:absolute;
  left:0;
  bottom:-20px;
}
.book-pages .slide-info {
  position:absolute;
  bottom:-20px;
  left:44%;
  color:#333333;
}

JavaScript Classes and Inheritance

Jon Rohan — Wed, 16 Sep 2009 17:30:19 +0000

Object oriented JavaScript is everywhere today, and its the type of thing that takes a developer from someone tinkering with JavaScript on the path to becoming a JavaScript ninja. In this post I’m gonna discuss the basics of creating a JavaScript class, and a subclass which inherits methods from the superclass.

A JavaScript Class

Let’s start out with a basic class. The Person class has one method getName, when you create a new instance of the Person class you will pass in the Person’s name.

The Person class

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}

So in the above example I created a Person class with a name attribute and a function to retrieve the name. Now I’ll create a new person, “Jon Rohan”.

var p = new Person("Jon Rohan");
// output: Jon Rohan
console.log(p.getName());

The p is a new Person with the name “Jon Rohan”, when I log to the console the result of p.getName() it returns “Jon Rohan”.

Prototype Chain

Now we bring in the prototype chain. The chain is like an inheritance chain. Developer inherits → from Person. So we are defining a Developer as a Person, cause developers are people too. ;-) The developer takes the name attribute like Person, and an array of skills. The first line of the Developer class is to call the Person class. This calls the Person’s constructor. The Developer class also has a new method getSkills, because a Person is too general to have skills, but as a Developer, there are skills that they have.

We also need to set Developer.prototype to the Person’s prototype, by creating a new Person. Now we set the Developer’s constructor to the Developer. And we have successfully created a prototype chain from Developer to Person.

The Developer Class

function Developer(name, skills) {
  Person.call(this, name); // we call the Person constructor since it's the superclass
  this.skills = skills;
  this.getSkills = function() {
    return this.skills;
  };
}
Developer.prototype = new Person();
Developer.prototype.constructor = Developer;

Now we’ll create a new Developer, with the name “Jon Rohan” and skills ["Javascript", "HTML", "CSS"]. When we create the new developer, he’ll also have the getName method inherited from the Person class, and the getSkills method from the Developer class.

var d = new Developer("Jon Rohan",["Javascript", "HTML", "CSS"]);
// output: Jon Rohan
console.log(d.getName());
// output: Javascript, HTML, CSS
console.log(d.getSkills().join(", "));

This is the basic ideas behind Object Oriented Programming in JavaScript, I’ve only really scratched the surface in JavaScript OOP. Check my RSS or Twitter for new posts.

Creating Triangles in CSS

Jon Rohan — Tue, 15 Sep 2009 17:00:59 +0000

I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.

Demo

How it works

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.



.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

With a little creativity and tweaking there are lots of shapes that can be made.
border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

Now for application:

Buongiorno!

This is a classic chat bubble, no images used.



  Buongiorno!
  
  


.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}

.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.

  /* IE6 */
.chat-bubble-arrow {
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);
}

Redbeacon

Jon Rohan — Tue, 15 Sep 2009 02:24:40 +0000

Redbeacon matches consumers needing virtually any service to qualified local businesses and professionals who can do the job at the time and place you need. I was contracted by them to work on their front end in preparation for their TechCruch50 launch. I worked on the JavaScript, CSS, HTML.

Jon Rohan — Mon, 14 Sep 2009 17:00:58 +0000

I like to mix it up on my blog, sometimes posting experiments, and sometimes posting fundamental front end posts. This is a fundamental, but a crucial step in creating a website. Choosing the correct DOCTYPE for your site.

What is the Document Type Declaration?

A proper DOCTYPE is essential for the correct rendering and functioning of a website in compliant browsers. If you forget to declare a DOCTYPE, on use an incomplete one, then the browser will render in quirks mode, in which the browser will try and be backward compliant leaving you with a website that might as well have the hard hat under construction animated gif on it.

There are typically 3 types associated with each lang version. Strict, transitional, and frameset. Use Strict when you want a pure website that only uses the lang version’s current tags. Use transitional, when you have a site that you will be using some depreciated tags. Use frameset, when you include frames.

Pure Clean HTML

The HTML DTD are the most typical you’d find on websites. Use the HTML definition when writing plain old standard HTML. Great thing about this is by using standards there’s no surprises for any browsers when parsing your page.

HTML 4.01 Frameset

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 5

I love the new HTML 5 DOCTYPE. Why? Because this is all it is.

X is for Extreme

The X in XHTML actually is referring to the fact that XHTML documents are XML conforming. This means that XML tools can more easily validate and parse the HTML. Another advantage of XHTML is that it is as extensable as XML. Meaning you can create your own html tags and use them, here’s an example of what I mean.


  
    A Math Example
  
  
    The following is MathML markup:
     $3 x$

This can be extremely useful when you are using an unofficial webstandard like microformats, foaf, etc…

Here are the declarations for XHTML.

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

XHTML 1.1

So which do I choose?

Let me answer this question with a question. What will be the focus of your site? When you are building a site that will be viewed on non-standard browsers (eg. some mobile browsers, the kindle, the wii) then XHTML is your best choice. When you are building a site that’s gonna be viewed in standard browsers, (eg. firefox, safari, ie, opera) then HTML is what you should be using.

To decide how to pick between Strict, transitional, and frameset, this really depends on your coding style. I think you should use Strict and in special circumstances use transitional and frameset. My favorite at the moment is the HTML 5 DTD, it’s extremely simple to remember.

Javascript Geolocation API

Jon Rohan — Tue, 08 Sep 2009 00:06:42 +0000

More and more devices today are connected, to the web and to your location. Some of the most recent browsers and OS’s have location built in, (eg. mobile safari, snow leopard, FF 3.5, …).

The API doesn’t care what is updating the location, it just grabs the location from the navigator.geolocation object. Here’s a closer look at the interface.

Geolocation interface

interface Geolocation { 
    void getCurrentPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);

    long watchPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);

    void clearWatch(in int watchId);
  };

  [Callback=FunctionOnly, NoInterfaceObject]
  interface PositionCallback {
    void handleEvent(in Position position);
  };

  [Callback=FunctionOnly, NoInterfaceObject]
  interface PositionErrorCallback {
    void handleEvent(in PositionError error);
  };

getCurrentPosition() – takes three arguments. The first (required) is the successCallback function which you define to handle the asynchronous call. The second (optional) is the errorCallback function, for when you can’t be found. The last is PositionOptions object which you can specify Boolean enableHighAccuracy, long timeout and long maximumAge. The function will get the position and pass it to the successCallback function as a position object.

watchPosition() – takes the same three arguments as getCurrentPosition. And on the surface it does the same thing as it, with one big exception. watchPosition will call the successCallback every time the position changes. So if you wanted to create a mobile app that follows you walking down the street, this would be the function to use. When called the function returns a unique identifier, which you use to call the last function.

clearWatch() – takes one argument, the unique identifier from the watchPosition method. This method will clear the watch timer.

Demo

I wrote a small example that will get your lat, long and display it.

function getLocation() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
  } else {
    noLocation();
  }
}

function foundLocation(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  $("#current-location").replaceWith('' + lat + ', ' + long + '');
}

function noLocation() {
  $("#current-location").text('Could not find location');
}
$("#get-location").click(getLocation);

Disclaimer: I’ve tested this in Firefox 3.5 on my Mac, and my iPhone mobile Safari.

Coordinates: Check location by clicking the button.

Getting Started with HTML 5

Jon Rohan — Tue, 01 Sep 2009 16:18:32 +0000

HTML 5 is the next major iteration of HTML, and I know I’m excited about it. I recently added some new HTML 5 markup into dinnermint. It was a very quick and simple change, which I believe will help clear up some of the

soup.

The New Tags

There are some new tags in the HTML 5 specification, that I believe will lead to more semantic code. And what I mean by that is the code says what it does. You’re no longer left wondering what those

tags are for, when you see a tag like

you know what it is for.

The Layout

There are lost of tags I could have used, like aside, audio, video. I plan on playing around with those later, but for now I set up a basic layout consisting of a header, nav, article, footer like so.

These elements behave like typical block level elements. But are more semantic, if you aren’t sure of the benefits of this check out this post I wrote on CSS class names. If you are thinking about setting up your site, you can at least use header, footer, nav. If you do setup your site, there are a few things you should know.

DOCTYPE One of my favorite new features of HTML 5. Now you don’t have to remember a long DOCTYPE when starting a page, just use and that’s it!
HTML 4 Browsers Sigh, unfortunately not all browsers are on the same page, what you’ll need to do so these elements will be rendered like plain old block elements is below.

Add this to your stylesheet, this just reminds the browsers how to display these tags.

header, section, footer,
aside, nav, article, figure {
  display: block;
}

Add this to the Beginning of the tag. This is important for IE browsers, all it is doing is creating an element in the dom for each of the html 5 tags so it doesn’t ignore them. It’s important you place this script before any html 5 tags are used, at the top of the page.

Targeting IE6 for style

jQuery Auto-growing Textarea Plugin

Jon Rohan — Mon, 24 Aug 2009 16:56:59 +0000

This is a ui element I created which takes inspiration from facebook’s excellent growing textarea. Or at least I believe facebook was one of the first to create this.

How it works is when text is typed into the textarea and it becomes longer than the textarea height, then the textarea will grow. I’m keeping this plugin in a github repository, fork it, clone it My Javascript Git Repository.

Demo

The key to making something like this work, is you need to create div element that copies the text from the textarea to the div. The div naturally will grow when it has more text in it. When it does, you get the height of the div element and apply it to the textarea.

Here’s how you would init the growing text box.

$("textarea").growing();

I’ve also added some options you can pass in, growning({maxHeight:300,minHeight:40,buffer:20}) the max and min height are pretty self explainitory. The buffer is the space below the text in the textarea, if you want an extra line below the currently typing line.

The Code

Currently I’m adding a class to the div called faketextarea so I can style it the same as the textarea. This is important becuase if one element has more padding than the other, then the heights will be messed up. and this plugin won’t work exactly right.

.faketextarea, textarea {
  padding: 5px;
  border: 1px solid #efefef;
}

/* Copyright (c) 2009 Jon Rohan (http://dinnermint.org)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.0.0
 * Written with jQuery 1.3.2
 */
(function($){
  $.fn.growing = function(options){
    var settings = $.extend({
       maxHeight: 400,
       minHeight: 40,
       buffer: 0
    }, options);
    return this.each(function(){
      var textarea = $(this); //cache the textarea
      var minh = textarea.height()>settings.minHeight?textarea.height():settings.minHeight;
      var w = parseInt(textarea.width()||textarea.css("width")); //get the width of the textarea
      var div = $("");
      textarea.after(div);
      var resizeBox = function(){
        var html = textarea.val().replace(/(<|>)/g, '').replace(/n/g,"
|");
        if(html!=div.html()) {
          div.html(html);
          var h = div.height();
          prevh = textarea.height();
          var newh = h<=minh?minh:(h>settings.maxHeight?settings.maxHeight:h);
          newh += settings.buffer;
          if(newh>=settings.maxHeight) {
            textarea.css("overflow","auto");
          } else {
            textarea.css("overflow","hidden");
          }
          textarea.css({"height":newh+"px"});
        }
      };
      textarea.keydown(resizeBox);
      textarea.keyup(resizeBox);
      resizeBox();
    });
  };
})(jQuery);

Again if you want to keep up with an updated version of this plugin check it out in My Javascript Git Repository.

jQuery Ghost Textbox plugin

Dead Simple Git Workflow

Jon Rohan — Tue, 18 Aug 2009 20:00:55 +0000

Recently I have had the privilege to work with a few excellent small agile teams. With each team, they have their own process, which works best for them. And there’s nothing wrong with that, a team should work in it’s most effective way. But I came across a team recently that had a workflow that really impressed me. To put it simply it’s described as an extremely cool Git workflow.

I can’t take credit for coming up with this workflow, but I’m gonna do my best to re-describe it here so it can be shared. The basis for this post comes from reinh.com’s posts A git workflow for Agile Teams and Hack && Ship. Also this workflow pulls alot from Josh Susser’s post on the story branch pattern.

Let’s start by summarizing Josh’s post. In his post he describes a 7 step process that begins with Pivotal Tracker. The idea being you locate a story on pivotal tracker, like a bug, or feature, or chore. Then you update your working master by pulling from the origin, and create a whole branch just for that bug. Once you’ve fixed the bug, commited it to your branch, you then merge your branch with the master and push it all back up to the origin. Then just remove the old branch and you’re done.

That’s the basic workflow, but there is alot of automation that can be done. The first is the creation of the branch. This isn’t terribly long command ‘git checkout -b’ but I went ahead and created a shell alias ‘gcb’.

alias gcb='git checkout -b'

So now when creating my branch for working on my bug I just type

gcb fix_ie_bug_Story123456

After creating my branch I would work on it normally doing ‘git commits’ when needed. Then when I’m ready comes the cool part. Hack & Ship. Hack is what it’s called when you pull the lastest code from the origin and merge it with your branch. It’s a good idea to do this often, just to keep everything up to date. To not have to type and remember the few commands for accomplishing this, I use a shell script.

hack.sh

#!/bin/sh -x
# hack: Merge the latest changes from the master branch into your current branch
ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0
CURRENT="${ref#refs/heads/}"
git checkout master
git pull origin master
git checkout ${CURRENT}
git rebase master

So during my coding, I can at anytime just type the command hack. And my branch is updated!

Once I’ve finished my bug and I’m ready to send it back to the origin I do one more ‘hack’, make sure it’s all updated. And then I ship. This will checkout the master merge my branch with it, and then push it to the origin. Once again I use a shell script for this.

ship.sh

#!/bin/sh -x
# Git workflow ship script from: http://reinh.com/blog/2008/08/27/hack-and-and-ship.html
# git name-rev is fail
ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0
CURRENT="${ref#refs/heads/}"
git checkout master
git merge ${CURRENT}
git push origin master
git checkout ${CURRENT}

Now I’m done with my bug, and there’s a script for that ‘dwf’. This will move me back to the master, and delete my old branch.

dwf.sh

#!/bin/sh -x
# dwf, aka "Done With Feature" script: deletes current branch and puts you back on master
ref=$(git symbolic-ref HEAD 2> /dev/null) || exit 0
CURRENT="${ref#refs/heads/}"
git checkout master
git branch -d ${CURRENT}

And we’re ready to repeat the whole process on a new bug/feature/chore.

To summarize:

gcb awesome_new_feature_Story12345

develop...
commit....
hack....
[repeat]

hack
ship
dwf

You can even take this a bit farther, and create an alias for the last three commands ‘hsd’ (hack ship done)

alias hsd="hack && ship && dwf"

Which cuts our workflow to

gcb awesome_new_feature_Story12345

develop...
commit....
hack....
[repeat]

hsd

Pretty awesome! I’m sure there are hundreds of awesome workflows out there. What do you guys use on your projects?

Jon Rohan

This Little Market

Using CSS3′s :target pseudo-class to Make a Slideshow

Demo

Taming CSS

Never Assume you’ve mastered it

The End

Code

Taming CSS

Never Assume you've mastered it

The End

JavaScript Classes and Inheritance

A JavaScript Class

The Person class

Prototype Chain

The Developer Class

Creating Triangles in CSS

Demo

How it works

Redbeacon

What is the Document Type Declaration?

Pure Clean HTML

HTML 4.01 Frameset

HTML 4.01 Transitional

HTML 4.01 Strict

HTML 5

X is for Extreme

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

XHTML 1.1

So which do I choose?

Javascript Geolocation API

Geolocation interface

Demo

Getting Started with HTML 5

The New Tags

jQuery Auto-growing Textarea Plugin

Demo

The Code

Dead Simple Git Workflow