My gtacm techtopics started last week. It’s all about javascript, jQuery, and AJAX. This week consisted of the introduction to the browser: DOM, DOM Inspectors, javascript: syntax, variables, jquery: syntax, selectors, basic animations.

You can download this week’s zip over at the techtopic page. It includes the html and javascript from our in class demonstration as well as another example, and the powerpoint i meant to show.

Here is some auxiliary stuff that I did not get to talk about in class but I wanted to cover.

$(document).ready(function(){})

All I said in class was that “this is necessary. Put everything inside here. jQuery won’t function without this. Don’t question”. I’m sorry, this was mean. What I really meant to explain was that this IS necessary, but it is NOT the only way to accomplish this task.

What this line is saying is that jQuery has some things that need to be run AFTER the browser has populated the DOM with all the HTML elements. It has to wait for this so that the elements EXIST when it tries to assign all the appropriate listeners to what you have told it to do. However, you can do this exact same thing with a much simpler call:

$(function(){})

That’s right, you can replace $(document).ready(fuction(){}) with $(function(){}).

Wow, that was easy.

Dropdown menu

I had originally planned on doing a full-blown example at the end of class. This example would be a dropdown menu that would work on hover over (similar to the one found at http://www.cc.gatech.edu). I have included it in the zip (found on the techtopic page) along with a spiffed up code that we did in class.

The dropdown menu included in the zip is a bare-bones implementation that you can put into any navigation. I used a function we didn’t cover in class .children(). Briefly, this function finds all the HTML elements that are contained in that element (div, span, etc), and you can refine it by putting a selector as a parameter to the function (like in my dropdown example).

Please study this and modify it (try using .fadeIn()/.fadeOut() instead of .slideDown()/.slideUp()) and try some experimentation with this. Also, this is a great reference to have in the future if you are building something that needs a dropdown menu: this will work great for you.

More Stuff

Two things I didn’t get to talk about this week are $(this) and .animate().

$(this) is a reference inside a callback function to whatever was selected. In the dropdown example, $(this) refers to the div with class=’hover-container’ that was hovered over. It only exists inside the callback function.

.animate() is the big kahuna when it comes to anything animated with jQuery. Actually, in the actual source code for jQuery most specifically named animation functions (slideDown, slideUp, etc) just call .animate() with the proper parameters for that specific function.

.animate() is ridiculously powerful and can do a lot of things. We will be covering it more in-depth in the final week.

Someone recently offered to pay me to write them a url shortening backend/script to use for themselves. Not only did I decide to not charge them for it, but I decided to write a chrome extension so you can use it with as little hassle as possible.

For the tl;dr; crowd: download the url shortening script and the chrome extension to use with your shiny new shortener. Instructions are included.

The following instructions are included in the README.txt of the tar file. But here they are for convenience, and for any questions: leave them in the comments. NOTE: these instructions are if you want a default installation setup. This assumes you want all the default table, user name, and password. It’s probably a good idea to change them, but that’s up to you.

Step 0: Things You Need

You’re going to need a url. Probably a short one? There are tons of crazy tld’s available. i chose ablu.us cause it’s moderately close, yours might work even better.

Apache with mod_rewrite. Or equivalent server/rewrite setup.

PHP.

Step 1: The Database

You’re going to need to create the database for your service. NOTE: the user@server$ and mysql> are the prompts you should  see (clearly user@server$ will be different for you).

user@server$ msyql -u root -p

mysql> CREATE DATABASE `uploads`;

mysql> GRANT ALL PRIVILEGES ON `uploads`.* TO 'uploads_user'@localhost IDENTIFIED BY 'uploads_pass';

mysql> FLUSH PRIVILEGES;

msyql> quit;

This will create the database we need to install things in the next step.

Step 2: Installation

If you table name, username, or password you need to edit config.php accordingly. There are also a number of other things you can customize in config.php like the alphabet used to chose characters from, the length of the shortened url.

One thing you MUST change the $site_url in config.php. Otherwise it will insert things into your database, but not give you the correct link back.

Visit /install of the folder from above from your browser (http://yourdoma.in/install). If you kept the defaults from the above step, you don’t need to change any of these fields.

Click “Install >>”. And barring any database errors, you should have a working url shortening service!

NOTE: You may want to consider removing the /install folder after this step. It’s not necessary as running it again won’t destroy any data, but you never know.

Chrome Extension

The chrome extension is pretty easy to use. The first time you try to use it, it will tell you to Set Shortener. You have two choices here: If you want to use your own service you just created, enter the following:

yourdomain/up.php?site=

If you want to use MY service, enter:

ablu.us/up.php?site=

I’m considering doing a Firefox addon as well, but creating one of those is a bit more involved.

This extension will work with any url shortening api that returns just the plain text of the short url. Examples include http://fizl.us, http://is.gd.

That’s It!

You have your own url shortening service!

I am running a modified version of this on my own site: http://ablu.us/. The main ablu.us is an image uploader. Feel free to use it if you so chose, but I just created it for my own personal use for some coding practice.

Leave any questions in the comments below, and i’ll try to get to them.

I recently created a file hosting and url shortening service for myself: ablu.us. Now as a pet project, i’m starting to get some feature creep action going on. Case in point: I just wrote a chrome extension to use this service.

NOTE: I am never going to release this to the gallery, as I don’t want THAT much attention to this thing, it’s just sweet for me to have for myself. In all actuality, I might do something else with this url eventually, so releasing this out into the world would probably be a bad idea.

That said, here is a link to download it if you actually want it:

INSTALL ablu.crx.

CHANGELOG :

version 0.2 now includes using fizl.us.

version 0.2.1 fixed an initial settings bug

version 0.3 don’t remember fixes. but there were some!

It’ll ask you if you really trust me, and to continue. And that’s it.

I won’t get into the nitty gritty details of HOW TO create your own chrome extension quite yet, but expect a blog post about it soon. Also, Google has a bunch of getting started tutorials that helped me so well it only took me about 2 hours to write this extension from scratch.

Some interesting things are as follows:

These babies are written in javascript

This was news to me. I knew Firefox plugins are written in XUL, which is similar to javascript. Chrome extensions are written in plain, vanilla javascript. Not only that, the part that gets displayed is literally an html page that you can do whatever you want with. If you want to include jQuery, you can (mine does not). Any other library? yup. It also means that you can use any of the HTML 5 capabilities Chrome offers: local storage, canvas, image rotation.

This strikes me as a bit excessive as you can load an unlimited number of scripts from anywhere. Seems to me that this could be abused.

Chrome allows copying to clipboard

That’s right. You can copy things to clipboard just like in IE with

document.execCommand('Copy')

This is exactly how similar URL Shortening extensions work. After seeing how awesome this is, I have to wonder… why doesn’t Firefox support this? I don’t see it being a security risk more than copying profanity into the clipboard. Whatever, it’s nifty that chrome has it.

Autoupdating is scary

Hoo dangle is it scary. What happens if the dev’s life suddenly tanks and decides he wants to have your browser randomly redirect to a porn site at random intervals? If you have a previously installed extension of his and he decides to update this new functionality, he can (there are some caveats to this, like what permissions the extension already has). This could be problematic as it would be difficult to track down exactly what’s causing this browser behavior. This has the potential to turn any previously useful and non-porn-redirecting extension into a very messy thing to be a part of.

If you are in the market for (another) url shortening extension, give it a try. Let me know what you think. It could probably use a much better logo, so if  you want to help drop me a line at hello () andrebluehs [] net.