Flying With Mozilla Jetpack

We’re going to be working with Mozilla’s Jetpack today to create a slick color palette add-on using the Colourlover’s API. For those of you who don’t know, Jetpack is one of Mozilla’s newer lab experiments that allows web developers to use their pre-existing knowledge about building websites to create Firefox add-ons. So if you’re comfortable with CSS and jQuery Jetpack will be a breeze to learn! To read more about Jetpack explore the Jetpack homepage.

The add-on we’ll be building today is going to be a color palette generator that will rest in a slide bar on the left side of our browser. The color palette generator will create as many new palettes as we want by requesting them at random from the Colourlovers api, and when we like a specific color we can simply click it and Jetpack will copy the hex value to our clipboard for use in a style sheet or in Photoshop.

To see the completed project view the video below, and when you’re ready we’ll be going through the following steps to create the same add-on:

  1. First is to wireframe and style the add-on with HTML and CSS
  2. Second we’ll script with jQuery to add the interaction and make requests to the Colourlovers API.

Before We Begin…

To create this add-on you’re going to need the latest version of Firefox, version 3.5 or above. Also you’ll need to download the actual Jetpack add-on, which can be found at the bottom of the Jetpack homepage.

Click the big black button to download Jetpack

Once you have everything setup type “about:jetpack” into your address bar to access your local Jetpack homepage. This page is where you can manage your add-ons, develop new add-ons and reference the Jetpack API. Before we begin make sure you do the Jetpack tutorial under the tutorial tab. The tutorial is simple, fun and will get you comfortable with Jetpack in no time!

1. Access your Jetpack page by typing ‘about:jetpack’ in your address bar 2. The develop tab is where you’ll create your add-ons 3. The tutorial tab provides a quick tutorial to get you comfortable with Jetpack 4. Go to the API reference to learn more about what Jetpack can do

Adding HTML & CSS

Let’s begin by fleshing out the add-on so when it comes time to script it, we’ll be able to see were things fit. So go into the Develop tab and write the following inside the text box:

jetpack.future.import("slideBar");

jetpack.slideBar.append({
   persist: true,
   width: 290,
   html: <></>
});

First we use jetpack.future.import() to import Jetpack’s features that are still being tested. In this case we want to use the slideBar feature which will allow our add-on to rest in a slide bar.

After that we add our slide bar by appending it with jetpack.slideBar.append(). The slideBar takes a number of arguments, in this case we set width, persist and html. Width will determine the width of the slide bar in pixels which we set to 290px. Persist, when set to true, allows for the slide bar to stay open even when the user moves away from it. Last we add an area for html. With the html section we first open and close with <> </> tags, this will allow us to write our HTML. Remember you have the Jetpack API close by your develop tab, so reference it whenever you want to learn more about a feature!

Go ahead and press try out this code to test your code out. An empty gray slide bar should be created for you. Next we’ll add some HTML and CSS to make this look more like an add-on.

The gray slide bar with no styling, it’s just waiting for the magic touch of some HTML & CSS

So let’s continue and add our HTML within the tags I mentioned, add the following in-between the html: <> and </>:

<style><![CDATA[
      body { background:#4A4A4B; font-family:Tahoma, Arial, "sans serif"; font-size:67.5%; }
      h1 { cursor:pointer; color:#FFF; padding:5px 0px; text-shadow:1px 1px 0px #343435; font-size:2em; text-align:center; }
      h1:hover { background:#393939; }
      .palette { position:relative; border-bottom:1px solid #363637; border-right:1px solid #363637; height:100px; width:250px; padding:10px; background:#FFF; }
      .color { background:#333; cursor:pointer; height:100px; width:50px; float:left; text-indent:-1000px; overflow:hidden; }
      .alert { background:#FCDD4D; border-bottom:1px solid #363637; border-right:1px solid #363637; color:#5e500d; font-size:1em; text-align:center; width:270px; margin-top:10px; padding:6px 0; }
]]></style>

<body>
  <h1>NEW PALETTE</h1>
  <div class="palette">
      <div class="color">Color</div>
      <div class="color">Color</div>
      <div class="color">Color</div>
      <div class="color">Color</div>
      <div class="color">Color</div>
   </div>
  <div class="alert">COPIED TO CLIPBOARD!</div>
</body>

The HTML looks like a standard HTML page with inline styling. If you notice though in between the <style> tags we have <![CDATA[ … ]> wrapping our style sheet. In JavaScript CDATA means character data, which basically allows us to write html as a string with multiple lines (so we don’t need to concatenate or use line-breaks).

As for the styles they’re mostly eye candy to make the add-on look similar to the Colourlovers site.

For our HTML we have a h1 tag that will serve as our button to request a new palette. We also have a .palette div which will contain the individual .color div’s. Each .color div will be a 50 by 100px block containing 1 of 5 colors from the chosen palette. Last we have our .alert box which will notify the user that the color has been copied to their clipboard.

Now click “try out this code” and you should see the makings for a pretty slick add-on.

With some CSS our add-on is beginning to take shape

Scripting The Add-On

To finish this add-on all we have to do is script it with some jQuery which is built into Jetpack. We’re going to be doing three things with jQuery: we’ll create a function to request a palette of colors from the colourlovers API, display those colors and then allow for copying the hex value to the users clipboard.

Read more

Creating A Virtual Note Wall

Today we’ll be creating a neat little app called Note Ninja, which allows for the user to tack up multicolored “sticky notes” on a virtual wall.

This app is useful to the kind of person that has dozens of little ideas or reminders they want to remember. Personally I sometimes store these reminders by writing them in a notepad file then saving them to a folder to read later (if I ever get to that). With this app I’m able to display all of my notes in a much more user-friendly way, were I can easily sort, delete and create new notes!

So before we begin let’s create a roadmap of how we’re going to go about building this app. The steps are listed below:

  1. First is to create the database to store the notes information, location and color
  2. Second we’ll wire frame the site with HTML and then style it with some CSS
  3. Third is to create the PHP backend to display all the notes already in the database and also allow for deletion, creation and updating of the notes
  4. The last step is to add some jQuery. jQuery will tie everything together with interaction and sending data to and from our PHP file.

Before We Begin…

For this tutorial I’m assuming you’re comfortable with HTML and CSS. I’m going to focus mostly on PHP and jQuery, so if you have intermediate knowledge in these two you’ll be fine. If you do get lost or confused please contact me or leave a comment and I’ll try to get you on the right track. With that let’s get started on the database!

Also I’d like to thank bittbox for the paper texture used and famfamfam for the delete icon.

Creating the Database

We’re going to create only one database called noteninja, which will contain a table named notes. The table notes will contain 5 rows, note_id, note_text, note_x, note_y and note_color.

Open up phpMyAdmin or your mySQL console and enter the following SQL:

CREATE DATABASE `noteninja`;

CREATE TABLE `notes` (
`note_id` INT(10) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`note_text` TEXT NOT NULL,
`note_x` INT(10) NOT NULL,
`note_y` INT(10) NOT NULL,
`note_color` TEXT NOT NULL
);

Here’s an explanation of what each of these rows will contain:

  • note_id will allow us to reference specific notes with a unique number id
  • note_text will contain what the note will say
  • note_x and note_y hold the x and y position of the note
  • note_color is going to have an rgb color value for our note (I’m not using hexidecimal since a jQuery function we’ll be using won’t work with it)

Before we finish up with the database let’s create two dummy notes, this will help us test our PHP later on.

INSERT INTO `notes` (`note_id` , `note_text` , `note_x` , `note_y` , `note_color`) VALUES
(NULL , 'This is my first note!', '50', '50', 'rgb(184, 195, 178)'),
(NULL , 'This is my second note!', '150', '100', 'rgb(184, 195, 178)');

So with the first dummy note it’ll be positioned 50px from the top, 50px from the left and have a light blue color.

That’s all were going to need for our database, let’s start fleshing out the app with some HTML and CSS.

HTML & CSS

This site is going to only really have two elements, the logo, which will always be on the top left of the screen, and the individual notes which will float freely inside a containing div.
To give you a good idea of the layout the image below shows the elements used and how it’ll look once we add the CSS. The images we’ll be using are packaged inside our project file which can be found at the top of this post.

The anatomy of a note

As you can see most of the action is going to be inside the note class. The note class has two elements nested within it, the text and options class.

The text class is going to display the textual information of the note and will be visible at all times. The options class on the other hand will only be visible on hover and contains a colorlist, which will allow the user to change the note’s color, and an x button to delete the note.

Let’s get started creating the HTML wire frame. Create a new file called index.php and write the following HTML within it:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Note Ninja - Most Honorable Sticky Notes</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body id="notewall">
		<img src="images/logo.png" alt="Note Ninja" />

		<div class="note" style="background:#E8BF56; top:100px; left:50px;">
			<div class="ninjastar">
				Ninja'd!
			</div>
			<span class="text">This is a test note</span>
			<textarea class="inputtext">This is a test note</textarea>

			<div class="options">
				<ul class="colorlist">
					<li class="blue">a</li>
					<li class="red">a</li>
					<li class="yellow">a</li>
				</ul>
				<div class="x">
					<img src="images/delete.png" alt="" />
				</div>
			</div>
		</div>

	</body>
</html>

First thing we do is link to the style sheet, style.css, which we’ll be creating shortly. Next we have our logo image which when we style the page will stick to the top left edge.

Inside the note div you’ll see the parts that I’ve mentioned. A span tag with the text class which will hold the note’s text, the options div that has an unordered list of colors and an image of a delete button.

What’s new though is the ninjastar and textarea class, which will make more sense once we add some jQuery. The ninjastar is going to be an image of a ninjastar that will animate when we delete a note, and the textarea is a duplication of our text but in an editable form so we can change the text easily. You can get a better idea of how these two will work by trying the demo linked at the top of this post.

You’re HTML page should look like this, a mess, until we add our style sheet

Let’s make this page look more like a proper app with some CSS. Create a new file called style.css and write the following CSS within it:

/*- General -------------------------------*/
* { padding:0px; margin:0px; }
body { background:url(images/wood.gif); }
#notewall { position:relative; }

/*- Note ----------------------------------*/
.note { width:150px; position:absolute; padding:4px; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; line-height:1.5em; }
	.note .inputtext { display:none; width:150px; border:none; font-family: Arial, Helvetica, sans-serif; color:#1a1a1a; font-size:12px; }

.options { position:relative; display:none; margin-top:10px; }
	.colorlist { float:left; }
		.colorlist li { list-style:none; width:10px; height:10px; border:1px solid #1a1a1a; cursor:pointer; text-indent:1000%; overflow:hidden; margin:1px; display:inline-block; }
		.red { background:#B8C3B2; }
		.blue { background:#C75233; }
		.yellow { background:#E8BF56; }
	.x { float:right; cursor:pointer; padding:0px 4px; }
	.ninjastar { position:absolute; background:url(images/ninjastar.png) no-repeat; width:68px; height:116px; overflow:hidden; text-indent:1000%; z-index:2; margin-top: -40px; margin-left:55px; display:none; }

The General section resets the default styles for our page, adds the background image and makes the container have a relative position. A relative position for the container allows the nested elements within it, like the notes, to float freely.

Our Note section adds some styles to our notes, like colors, fonts and sizes. We also have our .options, .ninjastar and .inputtext set to display:none, so we don’t see them until they’re needed.

With our stylesheet in place our site is now taking shape

That’s it for our HTML and CSS, now we can make this page more dynamic with PHP!

Adding Some PHP

Were going to use php in two areas, first we’ll add a block of code into our index.php file that will loop through and display the notes already in our database. Second we’ll have a remote file, newnote.php, which will process requests to update, delete and add notes.

Read more