grComputerWorks

Identifying Link Targets with CSS

2012-01-27T20:40:00.001Z

Sources: Noupe "Useful CSS Snippets", 1stWebDesigner "25 Incredibly Useful Snippets for Developers"
See also Data uri's http://davidwalsh.name/data-uri-php

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

2012-01-26T00:18:00.000Z

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

2012-01-13T13:31:00.000Z

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.

Writing Table Headers with PHPTAL Repeat Key

2012-01-12T23:01:00.004Z

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

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

2012-01-12T13:45:00.001Z

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

2012-01-03T14:47:00.001Z

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

2011-12-24T00:42:00.002Z

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

Essential Gnome Shell Extension - Status Icon

2011-12-22T19:48:00.003Z

Evil Status Icon Forever!
https://extensions.gnome.org/extension/99/evial-status-icon-forerver/

Gnome Shell Extension - Panel Docklet for Gnome 3

2011-12-22T18:32:00.000Z

Like a mini "Docky".
Panel-Docklet by Jodli Represents all opened windows as small icons in top panel.

Click to switch focus or hide.

Much easier than using the meta key or alt-tab.

https://extensions.gnome.org/extension/105/panel-docklet/

Still waiting for a good email/im notification extension.

PHP: Payroll Dates

2011-11-29T21:33:00.001Z


/***
* PayRoll Dates
* return array;
*/
  public function workDays($date='2011-12-17') 
  {
    if(!$date) {$date=strtotime("Last Saturday");
    } else { $date = strtotime($date); } 
  # find payroll dates ending last Saturday
    $workdays = array();
  # calculate 
    $workdays["sat"] = Date('Y-m-d', $date);
    $workdays["fri"] = Date('Y-m-d', strtotime('-1 day',$date));
    $workdays["thu"] = Date('Y-m-d', strtotime('-2 day',$date));
    $workdays["wed"] = Date('Y-m-d', strtotime('-3 day',$date));
    $workdays["tue"] = Date('Y-m-d', strtotime('-4 day',$date));
    $workdays["mon"] = Date('Y-m-d', strtotime('-5 day',$date));
    $workdays["sun"] = Date('Y-m-d', strtotime('-6 day',$date));

    $workdays["end"] = Date('Y-m-d', $date);
    $workdays["beg"] = Date('Y-m-d', strtotime('-6 day',$date));
    
#print_r($workdays);

    return $workdays;
  }

Dark Art of Video Codecs Part 2

2011-11-26T18:43:00.001Z

Stolen Outright from:
http://johndyer.name/ffmpeg-settings-for-html5-codecs-h264mp4-theoraogg-vp8webm/

This is just a quick tip for people encoding video for HTML5 (and using sweet HTML5 players like MediaElement.js). Go download a copy of ffmpeg, and if you’re on Windows, use this guide to set it up. Then use the following commands to create H.264, WebM, and Ogg videos, along with an image you can use as a poster.

REM mp4  (H.264 / ACC)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libx264 -vpre slow -vpre baseline                                           -g 30 -s 640x360 %1.mp4
REM webm (VP8 / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libvpx                              -acodec libvorbis -ab 160000 -f webm    -g 30 -s 640x360 %1.webm
REM ogv  (Theora / Vorbis)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libtheora                           -acodec libvorbis -ab 160000            -g 30 -s 640x360 %1.ogv
REM jpeg (screenshot at 10 seconds)
"c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -ss 00:10 -vframes 1 -r 1 -s 640x360 -f image2 %1.jpg

The Dark Art of Video Codecs

2011-11-22T13:34:00.001Z

Encode as mpeg2 audio mpeg1 video-

ffmpeg


INPUT        :-i s.avi 
AUDIO CODEC  :-acodec mp2 
VIDEO CODEC  :-vcodec mpeg1video 
VIDEO BITRATE:-vb 1000k 
OUTPUT       :s.mpg

ffmpeg -i s.avi -acodec mp2 -vcodec mpeg1video -vb 1000k s.mpg

Ben Rousch Video Editing References:

http://clusterbleep.net/blog/2010/06/25/video-editing-on-linux-part-1/ http://brousch.orthicomp.com/files/video-editing-on-linux-part1.pdf


Anything -> MPEG2
    ffmpeg -i  -vcodec mpeg2video -sameq -r  -acodec mp2 outfile.mpg

Anything -> MPEG4
    ffmpeg -i  -vcodec mpeg4 -sameq -r  -acodec libfaac outfile.mp4

Anything -> H264
    ffmpeg -i  -vcodec libx264 -sameq -r  -acodec libfaac outfile.mp4

Related:

Transmageddon Video Converter Linux Video Format Convertor

Handbrake - DVD Rip to MKV, M4v

Openshot - Video Editor with export

OpenSUSE 12.1 Released

2011-11-17T18:29:00.001Z

Install from OpenSUSE 12.1 Gnome Live 686
to
Acer 5570 Intel Dual Core 1.60

12::55 Insert
12:57 Live Distro Up
12:58 Install Froze after License Screen
12:59 Reboot/select Installation
13:03 Parti Started
13:16 Reboot
13:18 Login
13:20 Connected to Wireless Netword
13:21 Update Failures

Wireless:
Download (curl) error for 'http://download.opensuse.org/distribution/12.1/repo/non-oss/content':
Error code: Connection failed
Error message: Failed to connect to 2001:67c:2178:8::13: Network is unreachable

Wired:
Timeout exceeded when accessing 'http://download.opensuse.org/distribution/12.1/repo/non-oss/media.1/media'.

What I Learned Today: Using PHP Reference Var

2011-11-17T15:59:00.001Z

I never worked with arrays as much as I do now, so I guess I never learned this. Use PHP reference variables to clean up my code.

if ($_splash["sales_trends"]["previous_six"] > 0) {
 $_t = $_splash["sales_trends"]["current_six"] / $_splash["sales_trends"]["previous_six"];
 $_t = round(($_t * 100), 2);
 $_splash["sales_trends"]["trend"] = ($_t - 100)."%";
} else $_splash["sales_trends"]["trend"] = '0.00%';
$$_splash["sales_trends"]["trend_arrow"] = ($_splash["sales_trends"]["trend"] > 0 ? "↑" : "↓");



$st = &$_splash["sales_trends"]; #reference */
if ($_st["previous_six"] > 0) {
 $_t = $st["current_six"] / $st["previous_six"];
 $_t = round(($_t * 100), 2);
 $st["trend"] = ($_t - 100)."%";
} else $st["trend"] = '0.00%';
$st["trend_arrow"] = ($st["trend"] > 0 ? "↑" : "↓");

Slashed Zeros For Tables on the Programming / Web

2011-11-17T14:12:00.001Z

Got frustrated with all the account numbers I'm looking at, and not knowing whether I was looking at a zero or an O. Consolas is a MS font that is distributed with Windows from Vista on. For XP, it is also available with the installation of PowerPointViewer or Office 2007 Compatibility Pack. It's not a pretty font, so I only apply it when the distinction is important:\ .numeric {font-family:Consolas, 'Deja Vu Sans Mono'}

Simple Solution For Mobile-Friendly Websites

2011-10-15T12:40:00.002Z

You probably don't need a statistic to tell you that mobile browsing is increasing

You probably don't need someone to tell you that you don't that it's harder to read a website on a smaller screen.

You probably don't need someone to tell you that you should make your website mobile friendly.

And you can probably do a Bing search to find out how to do it, perhaps in a better way than I did.

But getting something done right now would probably be better, right?

Here's what worked for me: CSS Media Queries

1. First, I made a copy of the full style sheet for IE less than version 9, because those browsers don't understand media queries. I was then able to pull the IE specific code out of the regular style sheet.

<!--[if lt IE 9]>
<link rel="stylesheet" media="all" type="text/css"   href="/css/morrison-ie.css"/>
<![endif]-->

2. Then I pulled only the most basic styling code out of the stylesheet to start the mobile css.
I changed some images to display based on percent, and some sections not to display:

.logoimg {width:20%;margin:1%;}
.bannerimg {width:74%;margin:1%;}
.titleimg {width:100%}
.contactbox {display:none}

3. I separated mobile from full with style links - iPad resolution is 768x1024.

<pre style="white-space: pre-wrap; word-wrap: break-word;">
<link href="/css/mi-mobile.css" media="only screen and (max-width : 768px)" rel="stylesheet" />
<link href="/css/morrison.css" media="only screen and (min-width : 769px)" rel="stylesheet" />
<link href="/css/print.css" media="print" rel="stylesheet" />

4. I added some viewport tags based on testing the stylesheet in various browsers, to make sure the pages were viewed in the correct size.

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=device-width"/>

5. Added the "apple-touch" icon, which Android uses too, for shortcuts.

<link href="/images/mlogo57.png" rel="apple-touch-icon"/>

All in all those changes were much easier than composing this post in Blogger's interface.

Any Questions?

Falling Back to @Gnome 3.0 fallback

2011-10-07T13:26:00.001Z

I've "fallen back" to @Gnome3 fallback mode, because the notification priorities are the exact opposite of what I need.

For instance - I get instant message help questions. If I'm not at my desk when the first notification appears, I no longer see it in my tray unless I look for it. How do I know to look for it, since it's hidden?

IE7 Z-Index ignored

2011-08-26T16:58:00.000Z

Using this nice little menu:
http://www.threestyles.com/tutorials/css-drop-down-navigation-tutorial

Part of the stack got slid behind a slide. Setting a z-index worked *except* IE7 ignored it.

Fix:
http://stackoverflow.com/questions/3385513/ie7-puts-absolutely-positioned-div-underneath-ignores-z-index

IE's stacking order algorithm is messed up. You have to position the parent of the element you want on top, give it a position like relative if it doesn't already have one, and a positive z-index.
That will usually resolve it. If not, keep trying the parent of that until you get it.

Type Unicode Characters in Gnome 3

2011-08-17T16:33:00.001Z

Press Ctrl and Shift and U then type 2270 to get ✃

Change Ubuntu Desktop From Unity Back to Gnome

2011-07-01T23:45:00.000Z

Annoyed by the Ubuntu Unity Desktop? Logout, and change to Ubuntu Classic
http://ubuntuguide.net/ubuntu-11-04-natty-login-to-classic-gnome-2-desktop

Network Manager Disappeared After Intalling Gnome 3 / No wireless

2011-06-23T09:39:00.000Z

I installed openSUSE 11.4 from the Gnome Live CD (can someone vote to just call it SUSE? I mean, you got SLED, SLES - why the pay the extra syllable just 'cause it's free and open?).

After that, I went to openSUSE and ran the 1-Click install for Gnome 3. Actually, I 1-clicked it about 5 times, because there is no indication that you clicked it, and it takes about 5-10 minutes to respond....

After installing and rebooting, I got the lovely Gnome 3 desktop. Much prefer the blue to the green, even if it looks fedora-ish. But the network manager was gone, and I couldn't connect wirelessly.

Going to the network settings gave me a "not compatible with this version of network services".

The solution turned out to be:
1. In YAST, Network Settings, Global Options: The Gnome live switched me from Network Manager to ifup. Works fine on a desktop, not for a laptop.

2. Re-enable the Packman (community) repository. Apparently the 1-click removed that, or I didn't need it before Gnome 3 for wireless and I did afterwards. Not sure.

3. There were also a bunch of Gnome updates recently, including the network manager. None of which are helpful without step 1.

Gnome 3 Cheat Sheet

2011-06-22T13:14:00.000Z

The Gnome 3 "cheat sheet" list of shortcuts, and how to use the new interface, is not easy to find, but probably the best starter for using Gnome 3. Maybe more links to the page will help.

The page itself is a very nice, instructional page, with diagrams, making it more than a cheat sheet.

At the end, they list this, which is the "cheat sheet", I am re-listing for my sake.

System (Windows) key: Switch between overview and desktop
Alt+F1: Switch between overview and desktop
Alt+F2: Pop up command dialog
Alt+Tab: Pop up application switcher
Alt+Shift+Tab: Cycle in reverse direction in the application switcher
Alt+[key above Tab]: Switch between windows of the same application in Alt+Tab
Ctrl+Alt+Tab: Pop up accessibility switcher
Ctrl+Shift+Alt+R: Start and end screencast recording
Ctrl+Alt+Up/Down arrow: Switch between workspaces
Ctrl+Alt+Shift+Up/Down arrow: Move the current window to a different workspace

Most keybindings can be viewed under the User Menu -> System Settings -> Keyboard -> Shortcuts

Add Launcher to Gnome 3

2011-06-13T18:38:00.000Z

All the instructions I found were manual entries.

To add a launcher to Gnome 3:

Go to Applications/Other/Main Menu

Go to New Item, and you get the traditional Gnome 3 launch application

HP ProBook Wireless Broadcom on OpenSUSE 11.4

2011-05-16T01:46:00.000Z

HP ProBook won't Recognize wireless card on Install?

http://opensuse-guide.org/wlan.php

16.2.1 Install broadcom-wl with 1-Click

Chromium Won't Proceed Past Self Signed Certificate

2011-05-09T13:04:00.000Z

Had trouble with Chromium 13 not "proceeding" past self-signed certificates.
When I tried to add the certificates I had trouble.

Turns out, I needed to import under "Authorities", not under "Certificates".

I don't pretend to understand, just explaining in case it helps someone else.