Identifying Link Targets with CSS

Sources: Noupe "Useful CSS Snippets", 1stWebDesigner "25 Incredibly Useful Snippets for Developers"


/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

/* identify links that open in new window */

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}


  /* external links */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } /* identify links that open in new window */ a[target="_blank"]:before, a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C"; }

The Power of CSS1K

http://css1k.com is an interesting project about seeing how much you can accomplish, and still keep your css small.


I found some styles to be visually interesting:


http://css1k.com/#desktop
http://css1k.com/#turnaround
http://css1k.com/#swiss
http://css1k.com/#bookshelf
http://css1k.com/#toolbar
http://css1k.com/#stretchy
http://css1k.com/#photobox
http://css1k.com/#ev





But what really came out of it for me was how badly you can mess up a site's usability, using only  CSS. As I switched from theme to theme, it became tough to remember where I left off, and which themes I had seen. In this case, having the visited links styled differently would have been very useful on this site. (bing usability and visited links).

Some webguy's uncle said, with great power, comes great responsibility.

Displaying Code in Blogger

Blogger drives a web developer like me nuts. I paste my code into the html the way I want it, and it screws it up. Even the PRE tags. So, I display my code in textarea tags. <textarea style="height:100px;width:90%" > <php? echo hello ?> </textarea >

Writing Table Headers with PHPTAL Repeat Key

Writing Table Headers with PHPTAL Repeat Key

Not immediately obvious to me, the PHPTAL manual says:

"Within a loop, you can access the current loop information (and that of its parent for nested loops) using specific repeat/* paths."

This means that instead of writing table header values in the template, you can use the key in your table data.

$sql = " SELECT SUM(hours_regular) AS RT, SUM(hours_overtime) AS OT...

<table> <thead> <th tal:repeat="r results/hours">${repeat/r/key}</th> </tr> </thead+y> <tbody> <tr> <tr> <td class="atc" tal:repeat="r results/hours">${r}</td> </tr> </tbody></table>

PHPTAL manual says:

Within a loop, you can access the current loop information (and that of its parent for nested loops) using specific repeat/* paths.

repeat/item/key : returns the item's key if some/result is an associative resource (index otherwise)

repeat/item/index : returns the item index (0 to count-1)

repeat/item/number : returns the item number (1 to count)

repeat/item/even : returns true if item index is even

repeat/item/odd : returns true if item index is odd

repeat/item/start : returns true if item is the first one

repeat/item/end : returns true if item is the last one

repeat/item/length : returns the number of elements in some/result

"item" depends on the receiver variable defined in tal:repeat expression.

http://phptal.org/manual/en/#tal-repeat

Gnome 3 AutoStart Programs on Login

Gnome 3 AutoStart Programs on Login

Method 1: GUI:
Use "Desktop Search" to find "Startup Application Preferences" (it doesn't show up with the Meta key search)

Click Add
Give it a name, and a command

Most programs can be started simply with their common name, eg "chromium", "evolution", "firefox", as long as it's in the path.

Google Chrome is "google-chrome"

This process creates adds desktop files in home/[user]/.config/autostart

Method 2: Directory

You can create your own "desktop" files directly in home/[user]/.config/autostart by either copying an existing one, and editing the properties (right-click)

Give it a name, and a command

Click on the image to find a new image (usually in /usr/share/icons/hicolor/scalable/apps)


--Or--

Create your own

.desktop config:

#!/usr/bin/env xdg-open

[Desktop Entry]
Version=1.0
Encoding=UTF-8
Name=Docky
X-SuSE-translate=true
Type=Application
Exec=nautilus
Terminal=false
Icon=/usr/share/icons/hicolor/scalable/apps/nautilus.svg
Comment=chromium web browser.
NoDisplay=false
Categories=Utility;X-SuSE-DesktopUtility;
Hidden=false
Name[en_US]=Nautilus.desktop
Comment[en_US.utf8]=nautilus

Default Parameters for Javascript Functions

In PHP, you simple add "argument=false".

function getData(br, year=false) {}

In Javascript:

function getData(br,year) {
  year = (typeof year == 'undefined') ? false : year;
$('Data').load('/Data/getData/' + br + '/' + year);
} 

Post openSUSE Gnome 3 Installation Process

Install from Live CD

Add Repositories (from Community Repositories):
Packman
LibDVD

Add Ons:
fetchmsttfonts - MS Compatible fonts
free-ttf-fonts - Collection of nice artsy fonts
gstreamer ugly plugins - codecs

Add Programs:
Pidgin - IM that works with "Evil Status Icon" Plugin
Chromium - Now has support for Gnome Keyring
VLC - Best.Videoplayer.Ever.

Add Gnome Shell Extensions:
Evil Status Icon Forever Extension - "fixes" notification
Panel DockletTiny Docky-style bar

Firefox Extensions:
Speed Dial
Web Developer
ColorZilla
Add to Amazon Wishlist