02.26

Ablu.us and Chrome Extensions

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.


02.15

Geany and Chrome (or How I Develop)

This post comes to you via this Skribit suggestion.

Currently I am employed by one company, work pro bono for another, and work with-the-intention-of-getting-paid-in-the-future for a third (along with being a full time student). These three ventures are all very similar in that they are all web development work. For developing in these languages, I have an awesome set of comfortable tools that I use.

Hardware

I am actually quite proud of my setup: AMD 9950 2.6GHz Quad-core, 4 Gigs RAM, a 22″ Acer, and 23″ Dell Monitors. I just recently added a second monitor, and I now can’t develop without it. Whether I’m coding on one and testing in another, or watching a movie on one and working on another, it’s just damn useful to have 3600×1080 resolution to play with. Also have an awesome keyboard that I cannot live without. I got spoiled on my old Macbook Pro with a backlit keyboard, and I do so much work at night (as evidenced by the fact that it is now 2:30am) that it’s kind of neccessary. I also got so used to typing on a low-profile keyboard, that I now struggle to type at all on a regular one.

Linux FTW

I am a little unconventional when it comes to web use in that I use Linux Mint for my main desktop machine. However, this is awesome because it comes with a LAMP stack already built in. Just plop whatever code I want to run into /var/www and i’m good to go! Currently (15 Feb 2010) I am running Apache 2.2.12, PHP 5.2.10-2ubuntu6.4, and MySQL 5.1.37.

Editing

Let me make something very clear. I dislike command-line text editors. That said, I know my way around vim, and nano enough to use them on my remote servers, but on my desktop, I prefer to use graphical editors for ease of use, as I have multiple files open at once (yes, i know about screen)

When I was on Mac, I used and loved TextMates. However, since that does not exist on linux I was forced to move on *tear*. I have briefly tried Bluefish but found it tailoring more to plain HTML writing than a general purpose text editor.

I have settled on Geany. It has projects, an incredibly powerful version of ctags, a very strong search/replace function, a nifty color chooser, and an svn plugin. I also have some custom key-maps set, like ctrl+s to save all open tabs instead of only the current tab in use. Also, for php (and some other languages) it has function recognition (similar to eclipse) and completion. I rely on this function all the time when I can’t remember exactly the name of a function.

Testing

On my local machine, I use Google Chrome Beta as my main browser. I used to used the Dev builds, but as of the 5.0.322.2-r38810 build, the DOM Inspector is non-functional. This affords me the awesome power of the Chrome DOM Inspector (though not as good as Firebug in Firefox) which allows me to debug javascript, as well as test layouts/styles immediately without changing the actual css file.

As a responsible web developer, it is necessary that I test in several different browsers to make sure that my stuff works. I have Sun’s VirtualBox with Windows 7 installed on it and a slue of browsers installed to test as thoroughly as I can.

Thoughts? Complaints? Suggestions? What is your favorite setup?


02.12

Image Uploader and URL Shortener and You

I recently purchased the url ablu.us with the intention of using it as a url shortener/image uploader. So i did.

It was actually quite trivial, and I had the code for it done about 6 months ago, but didn’t purchase the url till recently. I had created a photo uploader for another website I was working on (newnantheatre.org) so I just copied over the code (I wasn’t getting paid anyway, so I felt it was ok to reuse the code). There are some improvements tho that I’ll document here. However, I’m not actually going into the implementation of a url shortener or image uploader. You should take a weekend and figure this out for yourself. Or maybe I’ll do a post on it later.

Resize Me

The first thing I wanted was for people to not have to scroll horizontally to see huge pictures. But I didn’t want to resize them during the upload process, because I wanted people to see them the largest possible. So i wrote a quick jQuery script to detect the window size/proportions, and resize the image to that roughly. There are still some bugs in this, and currently there is no way to see the actual real size image without going to the hotlink.

mod_rewrite

This was a huge thing, as I had just started experimenting with it recently. I’m not a fan of big, scary regular expressions, but they’re damn useful (and necessary) when it comes to mod_rewrite. For those of you who don’t know what this is, it’s pretty urls. It takes the part after the .com, .net, .us, etc, and turns it into a meaningful request to the script that is actually being accessed. This was particularly useful for url shortening because it removes the need for a ‘?x=xxx’ at the end of a url.

api

In the case of the url shortening, i created a dead simple api to use. This can be used as a bookmarklet with any browser that supports them (Firefox, Chrome (only tested in dev builds), Safari, etc). Just paste this code into the url part of a bookmark to create a bookmarklet:

javascript:void(window.location='http://ablu.us/s/up.php?site='+location.href)

Or you can visit http://ablu.us/s and copy the url you want to shorten and click ‘Shorten’. Or you can use it in any other context of plugin, extension, etc for url shortening purposes by using the url http://ablu.us/s/up.php?site=.

EDIT: Chrome Extension

I have written a chrome extension for this as well.
I hearby release this unto the world. My friend Eric (@diagonalfish) runs a similar (and WAY more professional) service at http://fizl.us, and both of us doing this prompted me to write this post. If you have your own personal image uploader/url shortener, let us know in the comments.