Tips and Tricks About Computers, Web Development, Linux, the Internet and the Like
css
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.
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
A (darker) brown theme for ubuntuforums.org
May 22nd
Because I use a dark theme for GTK, I’ve been working on a darker theme for the ubuntu forums using Stylish. It’s not complete but certainly usable. If you’d like to try it out, you can install the theme (after you install stylish) by going to the userstyle page.
Cool XUL tricks with Firefox using Stylish
Apr 13th
Firefox is an excellent browser that runs on an open, extendable platform by Mozilla which many users have improved through the creation of extensions, themes and add-ons. As a web developer / design and code hobbyist, I’m always looking for ways to give myself more power out of my browser and communicate ideas visually in the most efficient way. Using Stylish (a program that runs css on top of userStyles.css), I’ve found I can not only edit the looks of webpages with CSS but XUL, the building language of Firefox. This allows for some nice little enhancements.
Align Bookmarks to the Top Right
Here’s one I brewed up myself spawning from an discussion on IRC where someone pointed out the clutter I had going on in my bookmarks toolbar, I set out to condense my collection.
The plan was to align a few folders to the top right of my browser at the same level as my file menu and remove the bookmarks toolbar. Sounds easy enough right? Well.. perhaps it’s my ignorance in the XUL / CSS relationship that doesn’t allow me to float boxes but I actually ended up doing a strange little trick to make this successful.
To figure out how to get it to align to the right, I had to first figure out some class and id names. That I started trying different atrributes with….
Until I came up with the code below.
/* Align Bookmarks to the top right of Firefox
Tyler Mulligans www.doknowevil.net
-- Right click the your file menu and click customize to drag around your bookmarks.
*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#toolbar-menubar { direction:rtl !important; }
#toolbar-menubar #menubar-items, #toolbar-menubar .bookmarks-toolbar-items { direction:ltr !important; }Using that code in stylish, I right clicked my file menu, click customize and dragged my file menu, bookmarks and loader to their appropriate places.
Fixing webpages that don’t explicitly define the background and foreground as white and black
I changed my default background color so that I’m not blinded by white when I open a new blank tab. Unfortunately many web developers assume that users have a white background with black text and don’t bother to explicitly define them. I use the script below to fix 95% of these pages… some just use inheritently bad design techniques like defining their background color in the html tag (something w3c recommended you DON’T do in HTML. While technically okay in XHTML, I think it’s better to use the first VISUAL tag on the page. After the HTML tag you have a head… and title.. etc, which technically inherit the HTML tag settings.
@-moz-document url-prefix(http://), url-prefix(https://) { body { background-color:#fff; color:#000; } }Theme specific enhancements
I use an unusual brown theme and I’ve do what I can to match and extend my applications. I borrowed and enhanced the scripts below
Tabs / Tab Bar
A darker background and more prominent selected tab (pictured above)
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
[class="close-button tabs-closebutton"], .tabbrowser-tabs tab[selected="true"] {
-moz-appearance: none !important;
background-color: #654C30 !important;
}
.tabbrowser-tab[selected="true"] .tab-text {
color: white !important;
-moz-opacity: .85 !important;
}
.tabbrowser-tab[selected="true"]:hover {
-moz-opacity: 1 !important;
background-color: #755533 !important;
}
.tabbrowser-tabs {
border-top:1px solid #5F4A2A;
border-bottom:2px solid #503C1E;
background-color:#120F0B !important;
padding:5px 1px 0 1px;
}Awesome Bar
Added colors to match my theme.
/*
_________________________________________________________________________
| | |
| Title: | Awesome Bar Background Color Based on Type (WOW) |
| Description: | Different Colors based on Bookmark, tag, or regular |
| Author: | -=Ben=- |
| Date Created: | July 3, 2008 |
| Last Updated: | October 7, 2008 |
| Version: | 1.0.0.3 |
|__________________|______________________________________________________|
*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.autocomplete-richlistitem[type="bookmark"] /*Blue*/
{
background-color: #45586A; /*#E3FCFE;*/
color: #fff;
}
.autocomplete-richlistitem[type="favicon"] /*Green*/
{
background-color: #556A45; /*#E3FEE5;*/
color: #fff;
}
.autocomplete-richlistitem[type="tag"] /*Yellow*/
{
background-color: #6A5745;
color: #fff;
}
.autocomplete-richlistitem:focus
{
background-color: #0A246A;
color: #FFFFFF;
}If you enjoy my theme, you can download a beta I’ve been working on here: http://z.nexuizninjaz.com/linux/themes/
Free Resume Templates – Attribution-Noncommercial-Share Alike 3.0 Unported
Dec 24th
With more and more people using the Internet as a way to market themselves or find employees, it’s only a matter of time before it becomes the norm. As an employee, I find it an easy way to convey information about myself to employers. As an employer, it gives me an idea of a person’s professionalism and understanding of the age that I can easily reference or ask a friend for an opinion on.
I present to you my first two pieces of work released under the creative commons, 100% XHTML/CSS valid resume templates.
Resume Template – Modern v1 by Tyler Mulligan
Released under the Attribution-Noncommercial-Share Alike 3.0 Unported License you may freely use and modify this resume template as long as you leave in the credit to me in footer, don’t sell it and release it under the same or similar license (see the link for details).
To use it Download the zip from the Resume link in the footer, extract the files, edit them for your liking and information, upload them to your server and then upload the zip so others may easily download the template from your footer.
Resume Template – Neo v1 by Tyler Mulligan
Released under the Attribution-Noncommercial-Share Alike 3.0 Unported License you may freely use and modify this resume template as long as you leave in the credit to me in footer, don’t sell it and release it under the same or similar license (see the link for details).
To use it Download the zip from the Resume link in the footer, extract the files, edit them for your liking and information, upload them to your server and then upload the zip so others may easily download the template from your footer.
If you make any changes to these, I’d be glad if you told me. The XHTML is pretty solid but I was pretty conservative when it came to the CSS to keep the classic look and feel of a document.
