Tips and Tricks About Computers, Web Development, Linux, the Internet and the Like
Web Development
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.
Generating CSS Based on Images, also SEO-Friendly
Feb 20th
I’ve typed out a lot of CSS that’s focused on using a background image to replace text. I’ve been using a cross-browser CSS trick that’s SEO-friendly, I’m not sure if it’s documented anywhere. I came upon the solution myself when I was searching for a clever way to do this years ago and it’s become the standard method for me. However, I dislike the tedious task of typing out the CSS and referencing the image pixels and at work, I don’t want my developers wasting that time either.
I figured it’d be best to come up with a simple solution, so I started coding something out in bash and it worked:
#!/bin/bash
# css.sh - generate common css and html
# Tyler Mulligan (z@interwebninja.com)
# Last Update: 02/16/2011
# MIT License
create_block_image() {
feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
cbi_css $l
done
feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
cbi_html_a $l
done
feh -lr ${1:-.} | awk '{ print $3" "$4" "$8 }' | sed '1d' | while read l; do N=$((N+1));
cbi_html_div $l
done
}
cbi_css() {
f=${3##*/}
echo "#${f%.*} {
display: block;
background: url('$3') no-repeat 0 0;
width: 0;
height: $2px;
padding-left: $1px;
overflow: hidden;
}"
}
cbi_html_a() {
f=${3##*/}
echo "<a href=\"#\" id=\"${f%.*}\" alt=\"$f\" title=\"$f\">${f%.*}</a>"
}
cbi_html_div() {
f=${3##*/}
echo "
<div id=\"${f%.*}\"></div>
"
}
s=$1; shift; case $s in
--image-block|--cbi|-i) create_block_image $@;;
*) help help;;
esacWhich ouputs something like:
z@zygon:~/scripts/css$ ./css.sh -i img/
#dumbtubes-fav {
display: block;
background: url('img/dumbtubes-fav.png') no-repeat 0 0;
width: 0;
height: 14px;
padding-left: 16px;
overflow: hidden;
}
#submit_new {
display: block;
background: url('img/submit_new.png') no-repeat 0 0;
width: 0;
height: 106px;
padding-left: 244px;
overflow: hidden;
}
#dumbtubes-logo {
display: block;
background: url('img/dumbtubes-logo.png') no-repeat 0 0;
width: 0;
height: 70px;
padding-left: 274px;
overflow: hidden;
}
<a href="#" id="dumbtubes-fav" alt="dumbtubes-fav.png" title="dumbtubes-fav.png">dumbtubes-fav</a>
<a href="#" id="submit_new" alt="submit_new.png" title="submit_new.png">submit_new</a>
<a href="#" id="dumbtubes-logo" alt="dumbtubes-logo.png" title="dumbtubes-logo.png">dumbtubes-logo</a>
<div id="dumbtubes-fav"></div>
<div id="submit_new"></div>
<div id="dumbtubes-logo"></div>
To explain the way this CSS works, it uses the padding-left as the actual width, setting the width 0 and then pushes whatever content you have out of view using overflow:hidden to hit it from view. This makes it easy for search engines, keeping your HTML clean and CSS simple.
The bash script relies of “feh” a lightweight image viewer for linux that outputs a list of images and their dimensions. It also generates some sample HTML to quickly drop in and modify.
This is not an elegant solution and I’m not happy with the fact that it relies on feh. I’ve been slowly getting into python and I was amazed at how fast I was able to recreate this script in Python.
#!/usr/bin/python
# css.py - generate common css and html
# Tyler Mulligan (z@interwebninja.com)
# Last Update: 02/17/2011
# MIT License
from PIL import Image
import sys
import os.path
CSS_FORMAT = """#%s {\n\
display: block;\n\
background: url('%s') no-repeat 0 0;\n\
height: %spx;\n\
width: 0;\n\
padding: %spx;\n\
overflow: hidden;\n\
}\n"""
HTML_A_FORMAT = """<a href="#" id="%s" alt="%s" title="%s">%s</a>\n"""
HTML_DIV_FORMAT = """
<div id="%s">%s</div>
\n"""
css=""
html_a=""
html_div=""
for tf in os.listdir(sys.argv[1]):
f = os.path.join(sys.argv[1],tf)
if os.path.isfile(f) == True :
img = Image.open(f)
fid = os.path.splitext(tf)[0]
(width, height) = img.size[0:2]
css += CSS_FORMAT % (fid,f,height,width)
html_a += HTML_A_FORMAT % (fid,f,fid,fid)
html_div += HTML_DIV_FORMAT % (fid,fid)
print css
print html_a
print html_div This is just the basic idea, I didn’t spend more than 15 minutes on this rewrite, it does what I need it to do so far. It was suggested by friends if I make it any bigger, to look into a templating engine, such as mako. I hope this script can be useful to someone :). PS, HTML_DIV_FORMAT should be on one line, not sure why my syntax highlighter is trying to put it on 3.
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.
+ twitter
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.
Resources for Learning About jQuery Functions and a Note About Callbacks
Sep 7th
Though it’s still using 1.2.6 (with current jQuery at 1.3.2), visualjquery.com has always been a favorite of mine for it’s simple and elegant layout. Some of the functions leave some documentation to be desired but after working with jQuery for a while, you begin to develop a taste for what is needed. Unfortunately, next to this issue and despite it’s strong layout, there is one other thing this application that takes this application down from strongest candidate. It cannot look into the future and as such, some functions are outright missing.
The jquery API is a somewhat familiar interface, featuring the latest version, the freshest functions and some decent documentation. Another in-depth (but outdated) resource is the old api-browser. Of course, there exists the Main Wiki Documentation, which also provides Alternative Resources. I think I’ll find myself using http://api.jquery.com/ most often despite it lacking the multi-panel style selection. It integrates it’s documentation with jsbin.com for testing / playing with code which is a nice touch.
Now a note about callbacks while we’re on the subject of jQuery. I find myself using them quite often, with ajax specifically. Understanding how to nest functions in jQuery allows you to do more things in terms of user or application response. When using ajax, you’ll often want to fade out content, do some processing, report the data back and have it fade back in nicely rather than a quick blink that can cause discomfort for a user. If you aren’t familiar with a callback, it’s a function that’s executed when the current function finishes.
Below I will break down this common scenario.
You have your HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="my_ajax.js" type="text/javascript"></script>
<style>
#ajax_loader {
display:block;
height:90px;
width:90px;
background:url('http://imgur.com/KW8ZD.gif') no-repeat 0 0;
}
</style>
</head>
<body>
<div id="ajax_loader"></div>
<div id="ajax_content"></div>
<a href="#" id="my_link">click me</a>
</body>
</html>
your php (or whatever language returning the data file) (my_page.php)
<? echo "hi, I was loaded with ajax!"; ?>
and your javascript (my_ajax.js) that glues them together
// $(function() is shorthand for $(document).ready(function () {
$(function() {
$("#ajax_loader").hide();
$("#my_link").click(function() {
$("#ajax_loader").fadeIn();
$("#ajax_content").fadeOut();
$("#content").load("my_page.php",function() {
$("#ajax_loader").fadeOut();
$("#ajax_content").fadeIn();
});
});
});
Here we can clearly see how all functions are nested into one root, the document ready function. We go two more deep here, using the click event and then the load callback. Many functions allow for callbacks, search the documentation for the best way you think you should be nesting them. I hope this helps to clarify some of the basics in AJAX using jQuery, good luck.
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.
Optimizing CSS selectors for load time; #home is faster than #menu li a#home
Jun 27th
I was trying to figure out how to cut rendering time with smarter CSS. In my quest, I came across a plugin by google for Firebug called Page Speed which not only answered my question in the ‘Use efficient CSS selectors’ section (* #header #menu a:hover — Tag key with 2 descendant selectors and hover pseudo selector) but provided more details on the subject on the Page Speed Documentation.
“Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element. The less specific the key, the greater the number of nodes that need to be evaluated.”
So, #home is faster than #menu li a#home; at least in Mozilla’s case. More on this here
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.
