Tips and Tricks About Computers, Web Development, Linux, the Internet and the Like
Web Applications
jQuery and jQuery UI in your Grease Monkey scripts.
Jul 16th
Not all websites are made equal. Unfortunately, some of those websites are ones we’re required to use. Be it our job, our interests or the undiscovered, web-browsing can be the orgeon trail of the internet. Cultivating the atmosphere to work for us and bringing the right tools along for the journey are essential for survival, if you’re a pioneer.
I’m tired of websites that don’t provide, can’t provide or will never provide. I’ve called in my boys, Stylish and Grease Monkey on the front lines. However, beyond the crazy happenstance that another user might share a solution to your issue on userstyles.org or userscripts.org you could be left in the cold, without the right tools. I won’t go into detail on Stylish in this post but you might not even need it after you see the script.
Since I’m already connected with Google every which way in my life, why not pretend like the Internet is a big party and websites are your friends. Introduce jQuery from Google’s CDN to other friends (websites) that don’t already know jQuery and jQuery UI and make it personal.
That was the driving force behind this Grease Monkey Script, which was derived from mashing together strd6′s script and Joan Piedra’s script with an update to the latest versions of jQuery and jQuery UI.
// ==UserScript==
// @name jQuery and jQuery UI
// @author Tyler "-z-" Mulligan
// @version 0.5
// @namespace http://www.doknowevil.net
// @description jQuery 1.6.2 and jQuery UI 1.8.4 loaded from google's CDN with redmond theme.
// @include http://www.website.com/*
//
// @resource jQuery https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// @resource jQueryUI https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
//
// @resource jQueryUICSS http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/jquery-ui.css
//
// @resource ui-bg_inset-hard_100_fcfdfd_1x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_inset-hard_100_fcfdfd_1x100.png
// @resource ui-bg_gloss-wave_55_5c9ccc_500x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png
// @resource ui-bg_glass_85_dfeffc_1x400.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_85_dfeffc_1x400.png
// @resource ui-bg_glass_75_d0e5f5_1x400.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_75_d0e5f5_1x400.png
// @resource ui-bg_inset-hard_100_f5f8f9_1x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_inset-hard_100_f5f8f9_1x100.png
// @resource ui-bg_flat_55_fbec88_40x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_55_fbec88_40x100.png
// @resource ui-bg_glass_95_fef1ec_1x400.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_glass_95_fef1ec_1x400.png
// @resource ui-icons_469bdd_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_469bdd_256x240.png
// @resource ui-icons_469bdd_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_469bdd_256x240.png
// @resource ui-icons_d8e7f3_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_d8e7f3_256x240.png
// @resource ui-icons_6da8d5_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_6da8d5_256x240.png
// @resource ui-icons_217bc0_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_217bc0_256x240.png
// @resource ui-icons_f9bd01_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_f9bd01_256x240.png
// @resource ui-icons_2e83ff_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_2e83ff_256x240.png
// @resource ui-icons_cd0a0a_256x240.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-icons_cd0a0a_256x240.png
// @resource ui-bg_flat_0_aaaaaa_40x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_0_aaaaaa_40x100.png
// @resource ui-bg_flat_0_aaaaaa_40x100.png http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/redmond/images/ui-bg_flat_0_aaaaaa_40x100.png
// ==/UserScript==
var $;
// Inject jQuery into page... gross hack... for now...
(function() {
if (typeof unsafeWindow.jQuery == 'undefined') {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
var jQuery = GM_getResourceText('jQuery');
var jQueryUI = GM_getResourceText('jQueryUI');
script.innerHTML = jQuery + jQueryUI;
head.appendChild(script);
}
GM_wait();
})();
// Check if jQuery's loaded
function GM_wait() {
if (typeof unsafeWindow.jQuery == 'undefined') {
window.setTimeout(GM_wait, 100);
} else {
$ = unsafeWindow.jQuery.noConflict(true);
addUIStyles();
letsJQuery();
}
}
function addUIStyles() {
var head = document.getElementsByTagName('head')[0];
var resources = {
'ui-bg_inset-hard_100_fcfdfd_1x100.png': GM_getResourceURL('ui-bg_inset-hard_100_fcfdfd_1x100.png'),
'ui-bg_gloss-wave_55_5c9ccc_500x100.png': GM_getResourceURL('ui-bg_gloss-wave_55_5c9ccc_500x100.png'),
'ui-bg_glass_85_dfeffc_1x400.png': GM_getResourceURL('ui-bg_glass_85_dfeffc_1x400.png'),
'ui-bg_glass_75_d0e5f5_1x400.png': GM_getResourceURL('ui-bg_glass_75_d0e5f5_1x400.png'),
'ui-bg_inset-hard_100_f5f8f9_1x100.png': GM_getResourceURL('ui-bg_inset-hard_100_f5f8f9_1x100.png'),
'ui-bg_flat_55_fbec88_40x100.png': GM_getResourceURL('ui-bg_flat_55_fbec88_40x100.png'),
'ui-bg_glass_95_fef1ec_1x400.png': GM_getResourceURL('ui-bg_glass_95_fef1ec_1x400.png'),
'ui-icons_469bdd_256x240.png': GM_getResourceURL('ui-icons_469bdd_256x240.png'),
'ui-icons_469bdd_256x240.png': GM_getResourceURL('ui-icons_469bdd_256x240.png'),
'ui-icons_d8e7f3_256x240.png': GM_getResourceURL('ui-icons_d8e7f3_256x240.png'),
'ui-icons_6da8d5_256x240.png': GM_getResourceURL('ui-icons_6da8d5_256x240.png'),
'ui-icons_217bc0_256x240.png': GM_getResourceURL('ui-icons_217bc0_256x240.png'),
'ui-icons_f9bd01_256x240.png': GM_getResourceURL('ui-icons_f9bd01_256x240.png'),
'ui-icons_2e83ff_256x240.png': GM_getResourceURL('ui-icons_2e83ff_256x240.png'),
'ui-icons_cd0a0a_256x240.png': GM_getResourceURL('ui-icons_cd0a0a_256x240.png'),
'ui-bg_flat_0_aaaaaa_40x100.png': GM_getResourceURL('ui-bg_flat_0_aaaaaa_40x100.png'),
'ui-bg_flat_0_aaaaaa_40x100.png': GM_getResourceURL('ui-bg_flat_0_aaaaaa_40x100.png')
};
var style = document.createElement('style');
style.type = 'text/css';
var css = GM_getResourceText ('jQueryUICSS');
$.each(resources, function(resourceName, resourceUrl) {
console.log(resourceName + ': ' + resourceUrl);
css = css.replace( 'images/' + resourceName, resourceUrl);
});
style.innerHTML = css;
head.appendChild(style);
}
// All your GM code must be inside this function
function letsJQuery() {
//alert($); // check if the dollar (jquery) function works
//alert($().jquery); // check jQuery version
$("
<div id='example' class='flora' title='This is my title'>I'm in a dialog!</div>
").dialog({
buttons: {
"Ok": function() {
alert("Ok");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
I also wanted to use this script with Chromium browser, the open-source version of Google Chrome. I found the TamperMonkey Extension for Chrome. Stylish is also available for Chrome.
The Best Way to Tweet to Twitter, Post on Facebook from WordPress
Jul 26th
I’ve been focusing some time recently to the foundation levels of Internet marketing. I’m aiming to increase visibility as strongly as possible at the core of a website giving it the power to leverage evolving trends as simply as possible. This of course means utilizing APIs from other web applications, such as social networks. The title of this post is true but deceptive. I consider the following method the best way to tweet from WordPress but it’s actually a whole lot more than that. It’s a gateway to a large number of social media applications; one account to rule them all. ping.fm is a service that allows you to link multiple social network websites, such as facebook, twitter, linkedin and more.
So the idea then, is to leverage then is to utilize the ping.fm application from your website. If you’re using WordPress then you’re set, the simple no frills publish 2 ping.fm plugin will allow you to interact with ping.fm from your blog/website.
I’ve tested this out with the free open-source GPL First Person Shooter, Xonotic and a new site I just started dumbtubes.com. Both have twitter accounts that you can see publishing twitter.com/dumbtubes, twitter.com/xonotic. Xonotic also publishes to many other social accounts, see the Xonotic homepage to find other accounts.
Stay tuned for more wordpress tips.
WARNING, this plugin may cause other plugins options panels not to work. I’m not sure the cause yet but be aware that it can cause the sub settings of dedicated plugin setting groups to throw access errors.
Patching NextGEN Voting Plugin to Allow Showing of the Vote Form on Single Images
May 30th
Intro
NextGEN Voting is a plugin for the wordpress plugin NextGEN Gallery plugin. Keeping this in mind made the task of extending easier. NextGEN Gallery hooks into wordpress functions, NextGEN Voting hooks into NextGEN Gallery.
By default, NextGEN Voting hooks into the gallery view, giving access to a function that uses the image id for lookup. The only reason we see nothing if we try to paste the same template code into a page other than the recommended “nextgen-gallery/view/gallery.php” is because that function is not given access in any other view.
How-to Add Access to Use the Function in the Image Browser Template
Open “wp-content/plugins/nextgen-gallery-voting/ngg-voting.php”,
Look for:
add_filter("ngg_show_gallery_content", "nggv_show_gallery", 10, 2);Add After:
add_filter("ngg_show_imagebrowser_content", "nggv_show_imagebrowser", 10, 2);Look for:
function nggv_show_gallery($out, $gid) {
return $out.nggc_voteForm($gid, $buffer);
}
Add After:
function nggv_show_imagebrowser($out, $gid) {
return $out.nggc_voteForm($gid, $buffer);
}
Now we have given access to the function and can paste the following code into “wp-content/plugins/nextgen-gallery/imagebrowser.php”:
<?php echo nggv_imageVoteForm($image->pid); ?>
Conclusion
I’ve tried to explain this in method in a way you can repeat an extend to suit your needs. By following the same logic and tracing the hooks, you can apply this however you might need.
You’ll want to keep “wp-content/plugins/nextgen-gallery/nggfunctions.php” open as a reference for what hooks are available. You can find hooks by searching for “apply_filters(‘”, it will be the first parameter.
Reducing pageweight by compressing production css and js files
Sep 4th
I’ve been a little obsessed with improving the speed of web pages via minified javascript and css files. YUI’s team not only agrees with this, they recommend gzipping your minified js and css files. For a while I’ve been calling YUI Compressor inside my push to production scripts to do the deed. However, with this new mention of gzipping, I think might be exploring other options such as the method mentioned on the page which originally linked me to that awesome YUI writeup; minifying and gzipping javascript and css on the fly using php.
Redmine for software project management
May 25th
Back in 2008, I posted about the project management system, Project Pier, which was a fork of Active Collab. The system served my groups and I well for a while… but it was limited in different areas. Overall I thought it too slow and not so much tailored for software development as the new system I’m been using Redmine.
Redmine is a Ruby “clone” of the python based Trac system, which is also pretty good. I say clone because it’s really just influenced by I Trac, there goals were different than the Trac project. I decided on Redmine because it seemed to fit the bill for my group’s needs.
- It supported SVN and git browser integration.
- Per project wiki
- Per project user levels
- Issue tracking
- lightweight
- extendible (already some nice modules for download)
I haven’t had much hands on experience with Ruby but my buddy Dan Kinsley is a big advocate of RoR and after installing this, I can see why. The install was smooth and professional, largely done through the terminal. It went through without a hitch and immediately after logging into the newly setup system, I noticed how fast it was. This application makes good use of javascript and AJAX.
I was able to get SVN and git repos hooked in pretty quickly with specific projects and so far it’s been helping me manage tasks and layout projects better and faster than Project Pier.
Yahoo! hosting is total crap, seriously, don't use it.
Mar 20th
I’ve used many hosts in my time on the internet, using all sorts of backends handed off to me by clients or given to me by friends. Not all of them have been great, limited by their weak control panels and low settings… but none and I mean NONE have been as bad as Yahoo hosting. This is the third time I’ve had a problem with them and it’s not over simple mistakes, it’s about HORRIBLE coding and BAD decisions. My first issue with them was a O.o and a half. While clicking around their backend that looks like it was designed in the early 90′s, I seemingly BROKE the backend. I locked myself out, only to always get an error page when trying to get back in. I had to call support to verify that I had “found a bug” and it took them 3-4 days to resolve. You have to write some pretty bad code to make this happen.
After they fixed that bug and I was able to login again, I tried to start off on my original goal of setting up a MySQL database for use by a web application. Didn’t get to far there! I don’t remember this part too in depth, nor do I care to fact check the details in fear I may break this frail control panel but this innovative solution included using an iframe that passed your credentials to what seemed to be a stripped down version of phpMyAdmin that failed along the way… I tried it again and ended up in failtown twice. I can’t delete the databases because some information was lost along the way and now I’m stuck with two folders I can’t delete either.
Want SSL? HAHAHAHA, HAHAHAHA, Ha! If you want to use SSL, you can drop files in a folder they give you… HOW CONVENIENT!
Hmm, well I guess this actually brings me to my 4th issue with them. The popular method used for doing all sorts of nifty tricks with apache without having access to the httpd.conf, including URL rewrites/redirects (which I was using it for), the .htaccess file is not useable on Yahoo hosting. Yahoo’s faq says, o hai guys, here’s some info on htaccess but YOU CAN’T USE IT!. Now… one of the intents of my recent upgrades was to reduce the number of pages on the website (a legacy issue I was slowly working to resolve). The solution to streamline this process and avoid a bunch of 404s / bad links on search engines is to create rewrites/redirects to point users to the new pages based on the old URLs. With only 5 lines, I managed to cover all pages locally… but I can’t upload the .htaccess file to yahoo.
The solution? Recreate every old page and use a 0 second redirect…. soo…. that means I’d technically be increasing the number of files on the site by ~120% or build xml sitemaps and take the hit for a few weeks while the search engines re0index everything. Pardon my French but that’s some bullshit.
So just a warning, DON’T USE Yahoo hosting if you want to do anything more than host a few html files.
I much happier with Dreamhost, who is cheap, effective, scalable and uses a MUCH better (custom) control panel than any other host I’ve had. I can even use SSH without jumping through hoops our using a stupid autogenerated login name (sup 1and1?).
xepic.com is now xepic.net
Jul 7th
Due to a lack of funds and neglect I’ve lost xepic.com to squatters. It’s quite unfortunate because I’ve done a lot of marketing for it and now I’ve lost all meaningful back links. I don’t feel like wasting time dancing with these fools who repeatedly degrade the quality of the internet for their own benefit, so I opted to port the application to a new domain. I was able to pickup xepic.net, mirroring the old application exactly. This means all links work if you just replace .com with .net.
Porting the application was easy… I just had to change a few variables. What I’m more concerned about is all the back links coming from my sites, I have to go through and change all those before google docks me for linking to a ‘bad neighborhood’.
Live and learn I guess. It boggles my mind… around the same time I renewed 5 domains I didn’t really care about. Everything happens for a reason though I guess, right?
Free Project Management System – activeCollab Now Costs Money
Jan 25th
When I do group projects at school, I like to keep the team in check with a project management system to keep a centralized collection of work, including conversation and various files about said work. In the past I had been a big fan of the (once open-source) Base Camp clone, activeCollab. However, as many of you reading this may know, activeCollab is no longer free.
Fear not my friends! There exists a fork called Project Pier, which picks up where the the free version left off.

In my opinion, the default theme shies away from the clean cut web 2.0 freshness that was activeCollab but the folks at Project Pier were friendly enough to bundle some slick themes for those who are as nitpicky as I.

