The Internet

Reducing pageweight by compressing production css and js files

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

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

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.

g0esklea7oxc2vvin563

A (darker) brown theme for ubuntuforums.org

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.

g0esklea7oxc2vvin563

8hp9pibmfh3adx4pfo3a

screenshot5

Cool XUL tricks with Firefox using Stylish

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.

screenshot5

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….

screenshot-mozilla-firefox-dom-inspector

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.

right_click_file_menu

drag_bookmarks

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.

awesome_bar

/*
 _________________________________________________________________________
|                  |                                                      |
|          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/