h4x3d.com

- h4x3d.com

Archive
code

Want no border around input hidden field with css?

By: jez
15-08-2007
code
4 comments

Today I worked on a template for another client and run into some strange bug. Well not really a bug, but more of an annoyance that took ten minutes to fix. In the lower part of a site near the commenting box two rectangle border showed up. Obviously this was caused by the input field and its CSS.

Here is the old css (excerpt)


input { border: 1px solid rgb(204, 204, 204); padding: 3px 6px; background: rgb(255, 255, 255) none repeat; color: rgb(102, 102, 102); }

and here a quick screencap of what the problem looked like:
border-hidden.gif

I applied this quick CSS hack to my code to make the border disappear:


input[type="hidden"] { border: 0; padding: 0; margin: 0; background: white; }

(marked green in screencap)
border-hidden-css.gif

Voila, the rectangles are gone. No more annoying borders around hidden input fields with CSS.
border-hidden-result.gif

I hope this helped anyone. You can do a similar trick with the input property “submit” if you want to apply different CSS attributes to your input submit form only.

Read More

Quick adsense advice – remove duplicates from filter list

By: jez
12-08-2007
code
4 comments

Adsense Users, be aware of the fact that when using your filter list and adding domains to it, you need to remove all leading slashes, else you might receive duplicates that take up space from your filter list.

The Google adsense filter list can only hold up to 200 values.
I just went through my list and found 12 duplicates.

An example:



http://downloadrings.com/

http://downloadrings.com

Same domain, but added twice to the list. Google might consider adding an auto-filter to take care of those dupes, but then again… they care crap at all about Adsense (as far as publishers like you and me are concerned).

Yeah right… earn money, but how much?

Last month I had some 350,000 ad impressions and earned merely 194$. Of course this is still a lot of money, but for so many impressions one could expect a bit higher payment, right?

My mate over at christinazone.com makes 10x what I do with less impressions and clicks. Seems like my audience here is quite click-adverse and smart :)

Are my ads targeted? Some are, but others are not…

If you wish to help me out with some filtering, just drop the offense ad URLS in a comment or plain contact form (link below; bottom left). It is highly appreciated. I am always trying to filter out those stupid .info domains with their non-sense ads, but since those are ads geo-targeted I miss half of them I assume. Oh and in case you want to earn some extra bucks with your website, click the Google Adsense image above. Google will explain to you what is necessary in order to get your started.

Read More

My Lifestream secret lifted (WordPress Lifestream plugin code)

By: jez
24-07-2007
code, Wordpress
17 comments

Many people have asked me how I embedded the available Lifestream plugins (or code) so that it looks like mine at h4x3d.com/lifestream

Many seem to struggle with the (yet) simple set-up or use the wrong (and buggy) files.
Since the Lifestream I use is a mixture of different Lifestream plugins and it is all open-source, I would like to lift some secrets and share my knowledge with you.

My resources include Jeremy Keith‘s Lifestream plugin code (at the bottom), Elliot Back‘s Lifestream code (that did not work correctly), this article, a blog dedicated to Lifestreams and last but not least Gunnar Þór Hafdal – the Lifestream godfather. I was lucky to pick-up his code. I removed some items here and there, but in general he did 99,9% of the work, thank you!. I wonder why he took down his Lifestream and the code samples? They were great.

Below you will find the code, please note that the WordPress Plugin integration does not work, you will have to hand-code the variables such as FlickrRSS etc in the life.php itself.

NOTE: You need to run a quick CTRL+H (find and replace) for the < ?php… the code-markup on this page is that way so it does not break anything. You need to finalize the script yourself by changing all instances of < ?php back to the original (delete the blank space)

Life.php (goes in Theme folder)


 'http://feeds.feedburner.com/Twitter/h4x3d',
		'life_blog' => 'http://feeds.feedburner.com/jez',
		'life_flickr' => 'http://api.flickr.com/services/feeds/photos_public.gne?id=29642584@N00&format=rss_200',
		'life_delicious' => 'http://feeds.feedburner.com/Delicious/h4x3d?format=xml',
		'life_lastfm' => 'http://ws.audioscrobbler.com/1.0/user/h4x3d/recenttracks.rss',
		'life_digg' => 'http://digg.com/rss/jizz/index2.xml',
		'life_cocomment' => 'http://www.cocomment.com/myrss2/jez.rss'
		);
}

function checkStreams() {
	if( get_option( 'life_installed' ) ) {
	} else {
		self::install();
	}
}

function install() {
	add_option( 'life_installed', '1', "" );
	add_option( 'life_version', '1.0', "");
	foreach ( self::defaultStreams() as $key => $value ) {
		add_option( $key, $value, "" );
	}
	/* echo 'Installed, ready to go.' */;
}

function upgrade() {
	foreach ( self::defaultStreams() as $key => $value ) {
		if( !get_option( $key ) ) {
		add_option( $key, $value, "" );
		echo 'Added ' . $key;
		}
	}
}

function loadStreams() {
	foreach( self::defaultStreams() as $key => $value ) {
	// find the values for each of our streams (RSS Feeds)
		if( get_option( $value ) ) {
			$value = get_option(  $value );
		} else {
			echo '

' . $key . ': ' . $value . ' not found in the database.

';
		}
	}
}
}

life::checkStreams();

?>

Another file

Stream.php (goes in Theme folder)



(legend of tags)

<a href="" rel="bookmark" title="Permanent Link to ">


< ?php the_content('

Continue reading this article'); ?>
 

 $feed ) {
	$rss = @fetch_rss( $feed );
			$items = $rss->items = array_slice( $rss->items, 0 );

			foreach ($items as $item ) {
				$date = strtotime( substr( $item['pubdate'], 0, 25 ) );

				// This fixes the time error that the "date_default_timezone_set" should fix
				// Set it as $date += 3600*1; to add 1 hour or $date -= 3600*1; to remove 1 hour
				// I think it's based around the UTC time
				$date += 3600*2;

				$list[ $date ][ "name" ] = $name;

				foreach ($details as $detail) {
					$list[$date]['title'] = $item['title'];
					$list[$date]['link'] = $item['link'];
		        }
			}
}

krsort( $list );
$day = '';
foreach ( $list as $timestamp => $item ) {
    $this_day = date("F jS",$timestamp );
    	if ( $day != $this_day ) {
?>


<tr class="vevent ">








		<img src="" alt="" />
	

    	<abbr title="">

    	
	

    	(special code goes here, see below)*
	





Sorry, no posts matched your criteria.

*Special code, it breaks the display, type it down yourself in order to make it work. Don’t be lazy :)

1 <a class=”url summary” href=”< ?php echo $item["link"]; ?>”>< ?php echo $item["title"]; ?></a>

Again Credits go to Gunnar, he’s the man

Read More

Compressing moo.tools (javascript) even further

By: jez
25-04-2007
code, Wordpress
0 comments

Moo.tools is neat, I love it and use it whenever I can, but one thing is still bugging me: its size.
Even though moo.tools can be downloaded compressed (using the great php5 version of dean edward’s packer), I personally find 18kb of javascript too much.

So I started researching a bit with Google and found out different way of compressing moo.tools (or actually whatever javascript you have) even further:

The first method, which I am using works like this:
+ You rename your javascript file (moo.tools) from the original filename.js to filename.js.php
+ Open the file with your favourite editor and add the following line just at the very TOP of the code:

+ Next, scroll down to the end of the file in your editor and add the following to the bottom:

+ Save your file and upload it.

Now add it to your website using the old HTML code, but keep in mind to add the .php-file extension.
It might look like this:

I was able to reduce the whooping 18kb moo.tools down to 9kb this way. Well, actually I did not do anything, but the server and its php and zlib.

Other methods:
At the top of Javascript:

.htaccess method
Save a compressed javascript file as *.jgz, and write .htaccess like this.


RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} ".*Safari.*" [OR]
RewriteCond %{HTTP:Accept-Encoding} !gzip
RewriteRule (.*)\.jgz$ $1\.js [L]

AddType "text/javascript;charset=UTF-8" .jgz
AddEncoding gzip .jgz

Filesmatch .htaccess method:



ForceType text/javascript
Header set Content-Encoding: gzip

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript

Sources / Ideas:
1. paulstamatiou.com
2. randomnetworks.com

Read More

Building a WordPress sideblog (plugin) that works

By: jez
20-04-2007
code, Wordpress
25 comments

I am now using the WordPress Loop to output my asides, details below

Okay, so first of all to clarify things, I am not going to actually code or build a (new) sideblog plugin for wordpress here, I am going to comment on existing sideblog plugins and compare them. In regard to the promising title, I will than come up with a sideblog alternative, which will (definatly) work on everyone’s blog.

You probably wonder how people display those small articles about their daily ramblings, quick notes or links they have found on the internet on their blogs. You might also have read something about ‘asides’ in WordPress on other blogs.

In order to display those miniblog articles (or sidenotes/asides) on your WordPress blog, you could either

  1. Use a special sideblog plugin (examples listed below)
  2. Hard code a piece of content into your theme template
  3. Include a php file which is updated externally
  4. Do a mixture of all those three things (which I do)

1. Existing Sideblog or Miniblog plugins for WordPress

At first I have tried out KatesGasis’ sideblog (v.3), but for me it did not work out like the author described his plugin. The sideblog showed, but the pages however disappeared and my blog was creating random 404 errors. Some months later, other bloggers were also facing this problem. Finally, the 404 issue would be addressed by the plugin author himself. Future versions of the Sideblog plugin were released, but without any effect. It is currently in built 3.6 or so, but still does not work for me. It is rather nice and simple, but without a fix to the 404 issue, worthless for on-site use.

The next plugin I have tried out was Miniblog. The original author of this plugin was Ryan Poe, but he gave up the coding on this project and turned it over to Joe. After some juggling through the right site, finding the right version and getting it installed correctly (the docs were missing in the first zip file, which made the plugin display dodgy) I tried it out and was quite satiesfied. The tagging system (simpletagging) still worked, no 404s, pages were loading fine and the sideblog showed. After having posted another entry to my miniblog, it also showed up. How gross, because I set it to display only one record. Fiddling with the source code solved this problem, but another problem was added: In combination with the in-series plugin (by REM state), entries that are part of a series are shown above the miniblog entries.

2. Quite confusing, and annoying. Since I did not want to drop the in-series plugin, I decided to hard-code my asides into my theme templates. Soon I was annoyed as well, also I did not have an archiving function of my posts as I was adding them in direct html code to the template.

3. I used the following code to ease the update process by only having to edit one external file, rather than navigating all the way up to my theme folder:

This of course was also no solution to the missing asides/sideblog problem, as the archiving option was missing.

4. Recently I came across a plugin called Front Page Excluded Categories, Instructions and FAQ can be found on the official wordpress.org website. It does what its name suggests: Exclude on specific category from showing on your blog frontpage. I figured out (nothing new to some I guess), that I could use this to hide my asides category from the frontpage. Then use the categories feed and re-insert this RSS-Feed into the main site template (theme) using another RSS-Feed plugin or some magpie-feed code. Voila, problem blown away! It works out of the box. You can use a RSS Importing Plugin such as Friends RSS Aggregator or FirstRSS or (what I am currently using) jRSS. If your feed is getting “douged” up, run it through Feedburner and import the (cleaned) feedburner RSS.

This guy (geeked.org) had a similar idea, but did not get it to run.





have_posts()) : $my_query->the_post(); ?>
 

< a href="" rel="bookmark" title="Permanent Link to ">

Is what I use now to display my asides!

(you need to fix the php tags though! e.g. move the brackets. I need a better code highlighter, seriously!)

Read More

How to delete wordpress themes folders from Dreamhost

By: jez
22-02-2007
code, Wordpress
0 comments

Update:
In case you upgraded to WordPress 2.1.2 on Dreamhost, and you got many domain.tld.old folders on your account, wasting space and wasting your account overview on ftp,
log on to your shell and do a quick dir to check on the domains, then do a rm -r domain.tld.old
and your specified backup will be deleted. See below what it looked like for me*

It occured to me that I wasn’t able to delete all folders from my site’s wordpress theme directory,
for some reasons individual theme folders would remain there and the ftp client would output:
“No such directory”, or “Directory not empty”, even though I ordered the ftp to delete the folders.

Here is how to get things done the brutal way using your shell account:

Login to your shell account, use bash:
cd to your domain in question and your wordpress theme folder using
cd wp-content
try “rm -r themes”,
in case it doesnt work,
go to the themes folder by typing “cd themes”,
do a quick “dir” to see which themes are still there.

you can delete individual files using “rm filename.ext”,
you should be able to delete things either one by one, or once at a time using the commands mentioned above.

*

Linux clamato 2.4.32-grsec+f6b+gr217+nfs+a32+fuse23+tg+++opt+c8+gr2b-v6.194 #1 S
MP Tue Jun 6 15:52:09 PDT 2006 i686 GNU/Linux
           '||                               .
     ....   ||   ....   .. .. ..    ....   .||.    ...
   .|   ''  ||  '' .||   || || ||  '' .||   ||   .|  '|.
   ||       ||  .|' ||   || || ||  .|' ||   ||   ||   ||
    '|...' .||. '|..'|' .|| || ||. '|..'|'  '|.'  '|..|'

Welcome to clamato.dreamhost.com

Any malicious and/or unauthorized activity is strictly forbidden.
All activity may be logged by DreamHost Web Hosting.

[clamato]$ dir
CameronDiazZone.com          favoloso.info       pizza.qpoz.com
CameronDiazZone.com.old      favoloso.info.old   qpoz.com
Maildir                      fontys.qpoz.com     qpoz.com.old
VICTORIABECKHAMZONE.COM      get.h4x3d.com       static01.h4x3d.com
VICTORIABECKHAMZONE.COM.old  h4x3d.com           static01.heidiklumzone.com
blackscreenday.com           h4x3d.com.old       static01.j-e-z.de
blackscreenday.com.old       heidiklumzone.com   static02.h4x3d.com
d.qpoz.com                   idefics.klewes.com  static02.heidiklumzone.com
d.qpoz.com.old               j-e-z.de            static03.h4x3d.com
dar-lin.de                   j-e-z.de.old        static04.h4x3d.com
dar-lin.de.old               klewes.com          trancin.com
derdritteort.de              logs                trancin.com.old
derdritteort.de.old          mp3.trancin.com     webalizer

[clamato]$ rm -r dar-lin.de.old
[clamato]$ rm -r derdritteort.de.old
[clamato]$ rm -r qpoz.com.old
[clamato]$ rm -r trancin.com.old
[clamato]$ rm -r h4x3d.com.old
[clamato]$ rm -r d.qpoz.com.old
[clamato]$ rm -r favoloso.info.old
[clamato]$ rm -r j-e-z.de.old
[clamato]$ rm -r CameronDiazZone.com.old
[clamato]$ rm -r VICTORIABECKHAMZONE.COM.old
[clamato]$ rm -r blackscreenday.com.old


                Read More
            

        


    
        

            

                
htaccess big letters -> small letters

                

                    
By: jez

                    
22-02-2007

                    
code

		 
2 comments

            	
                

            

            

                
In case you were wondering how www.site.url/UPPERCASE becomes www.site.url/lowercase,

then you simply have to add




RewriteEngine on

RewriteMap upper2lower int:tolower

RewriteRule ^/(.*)$ /${upper2lower:$1}


Use above code snippet to convert uppercase url’s to lower case url’s using mod.rewrite!

                Read More
            

        


    
        

            

                
How to preserve bandwidth and speed up your site

                

                    
By: jez

                    
30-01-2007

                    
code, Design

		 
1 comment

            	
                

            

            

                
There are several ways of preserving bandwidth when you are running near your bandwidth quota:

For those of you who have not bandwidth limit per month, read this article as well, because I am going to tell you how to speed up your pages big style


Different approaches can be used to increase the time your website is displayed on your users computers.

You can measure the time it takes for your page to load with Firebug, an extension for Firefox. Once downloaded, installed, Firefox restarted (use the brain hack to keep open Tabs), you will find a small icon in the lower right area of your browser. Click enable, if it asks, then you can start viewing your page using the “Net” -tab (all) of Firebug. It will tell you how long the page took for loading. You will be surprised by the wide spectrum of details you will get to know about your website. E.g. using fat script libraries such as (full) scriptaculous or prototype take quite some time to load. Often whole libraries are included for effects that only need a handful of functions (lightbox!). More under a.4 later on.


a. reduce the over-all size of files/data that will be transfered when accessing your site



   a.1 images (jpg/png/gif)
   a.2 markup (php/html/css)
   a.3 stylecheets (css)
   a.4 javascript (js)
   a.4.1 overview of different lightweight javascript libraries/frameworks
   a.5 general (plugins, temporarily removing 'fat files')




a.1 Save bandwidth and optimize speed reducing images (jpg/png/gif)


Many websites use a high amounts of images, and there is nothing bad about it,

as long as a suitable compression is used. There is a difference between images compressed with jpg (jpeg), png and gif.

While jpg is great for images that feature loads of different colours, gradients and generally speaking pictures (photos), png and gif make more sense if an image does only consist of few different colours (max. 256 for good results). Gif images have to be used if you are going for transparent or semi transparent images. PNG can be transparent as well, but there are issues with the Internet Explorer, so I’d not recommend using png for transparent images. A jpg compression of 60 is often far enough, no need to go by even higher, because most of your users will most likely not see any difference. The difference file size concerned is massive.

You can easily safe some kilobytes there. REMEMBER: less kb to download = faster display of site. Safing photos in gif or png file format makes them ugly and big, so stick to jpg.


a.2 Save bandwidth and optimize speed using valid markup (php/html/css)


While this seems to be hard for many designers and programmers, one should try to produce valid markup.

Valid markup displays faster on many computers. Don’t over comment your source on websites.

It might be a good idea to keep local commented copies of your files, but in the web that’s only resource and thus speed hogging.


I’d recommend this online HTML tidy program for checking your markup, as well as the official w3c markup validation service [For CSS]

A great online tool to strip comments from your code (html/js) is memtronic’s packer

as well as dean edward’s packer.


a.3 Save bandwidth and optimize speed using compressed CSS


Compressed CSS is loaded like ordinary CSS, but simply faster.  REMEMBER: less filesize = less load time of page

If your pages’ CSS is loaded faster, the site is earlier displayed on your visitors’ PC. He/she is then more likely to not leave your page in the first 10 seconds if he/she sees the content. It is essential to aim for the below 10 seconds (check the time your users remain on your website with Google analytics). There are some CSS compressors that work and others that proclaim they work, but don’t. Here are three, that definately work more or less depending on the complexity of coding.


CSS compressors

Flump cake css optimiser

icey’s css compressor

css formatter and optimser


a.4 Save bandwidth and optimize speed using compressed js


Many WordPress scripts want you to include big and fat javascript on your blog. Usually those can be compressed, downsized and optimized. I mentioned two compressors before: memtronic’s packer

and dean edward’s packer.

A by far even better compressor is dojo shrinksafe.

You can use these compressors to remove descriptive lines, comments and examples from the source. Usually compressed files will still work. If they don’t, use another option or different compressor. Be sure to compress valid js markup only.


a.4.1 Overview of javascript libraries and compress JS


So basically we all know scriptaculous and prototype. Some also know mootools (and moo.fx), but my personal #1 is byte.fx with an overall size of 3kb.

Prototype and scriptaculous can be compressed to some extent, Steve Kallestad did that and offers these compressed files on his site:


The downloads are available at:



Be sure to check them locally before you take these versions for an online test-walk!


a.5 Save bandwidth and optimize speed deactivating or tweaking plugins


Many wordpress plugins are filled with explanations, comments and examples.

These can be removed to save additional space and thus increase the download speed of your website.

Use the mentioned above compressors to compress plugins like Lightbox or Flash-embedding plugins.

If you ever run low on bandwidth, deactivate unneeded plugins (and later on re-activate them!) for the needed time.

You will be surprised by the amount of traffic the lightbox.js does generate.

Also check your site for deadlinks, sometimes a deadlink generates a 404-error page. If you got custom error-pages that render a nice “not found”-page, this is a massive traffic and bandwidth generator. Locating these files and fixing their deadlinks is essential to maintaining a slick site.


b. enable server-side options to tweak the way stuff gets transfered


  b.1 gzip compression
  b.2 *Sql tweaks / WordPress 2.1



b.1 Save bandwidth and optimize speed using server-side options


If you can get your hoster or admin to enable mod_deflate (former mod_gzip), you are most likely to save tons of bandwidth, because of serving compressed content. Note: not all browsers support this. Read all full tutorial on that here.


b.2 Save bandwidth and optimize speed using sql-tweaks (WP 2.1)


In January this year, WordPress 2.1 was released:

They state:

[...] Much more efficient database code, faster than previous versions. Domas Mituzas from MySQL went over all our queries with a fine-toothed comb [...]

But if you want some real fast WordPress a-like CMS, go for Flatpress, a SQL-less CMS (currently under development). Static files, such as html, load faster than any dynamic ones. just as a golden rule.


c. move the server to a location where most of your visitors come from


  c.1 mirrors and foreign hosting


c.1 Relocating your website


Sometimes it makes more sense relocating your website to the country of #1 traffic origin or offering a mirror server then merely tweaking your site. If you’d for example have a Fansite dealing with an American (US) actress or model, but run your website from Europe, then most of your targeted audience (Americans) will have a slower site experience than if you’d place a server on the American mainland. Even ‘mainland’ is not equal mainland, due to the huge geographic distance of the east and westcoast. Thus offering mirror might be a wise idea. So based on the origin of site request either www1 or www2 is accessed.


I will be moving to DREAMHOST (LAX, USA), but not merely because of the later stated issue of traffic origin. In the next few days this site will be moved (early February), so if you experience any trouble, please be patient, feel free to comment or drop me a mail at jez at this domain (h4x3d.com). I hope you enjoyed this article and also checkout my five tips for your daily work life.

                Read More
            

        


    
        

            

                
How to add ascii characters to css /:before:after

                

                    
By: jez

                    
26-01-2007

                    
code

		 
7 comments

            	
                

            

            

                
How to add characters in front of a link/before a link in css?

Or how to add characters after every link in css?


Let’s say you want to add an ascii character after in front of every link,

because you want to add some detail, yet you dislike the use of images…


Actually it’s easier than you think, here is how:


a:before
{
content: "\3E \ ";
}


This will render likes like this:


> home


Why is the “>” \3E\? You will have to use the HEX code instead of the ascii one in combination with content:


To see a full ascii / hex chart with examples, a good overview, go here


In case you want to append/add content, e.g. a full sentence or a word, after your link you will have to use


a:after
{
content: " days till shazam";
}



This can be used in combination with database queries that output plain numbers such as “30″, you’d then just add a div around it (change a:after to #id:after) and shazam you will get “30 days till shazam“.


I hope this helps anyone.


*note: you will have to use the hex format, because Unicode entities such as (‖) are not supported in combination with content:

                Read More
            

        


    
        

            

                
display a div on top off flash

                

                    
By: jez

                    
04-08-2006

                    
code

		 
0 comments

            	
                

            

            

                
The solution to display a div on top off flash for the newer browser is the wmode option opaque or transparent.


[...] general embed object code here

parameter name stuff like movie source and quality here

[param name="wmode" value="opaque" /]

 wmode=”opaque”>[end embed code]


the opaque part is the important thing to remember.

 the other attributes remain the same

The following browsers currently support windowless mode:

Most of the old browsers dont support it, but as >90% use IE 6 + Firefox, that`s okay.


* Macromedia Flash Player version 6,0,65,0 (Windows) or 6,0,67,0 (Macintosh) or higher required for this feature.

Source: google.com

                Read More
            

        


    
    





        
        

            
From the newsstand

            

                
After a recent breach in first layer security I wiped the domain to be safe and restored to a clean working copy. It will take some weeks to seed out the nasty bits and pieces that lead to this situation. Please bare with this not too bad 'default' theme in the meantime (I am on holiday till Mid July). Best, jz.

            

        


        

            
Recent entries

            

                
            

        

        
        

            
Categories

            

                
            

        


        

            
Recent comments

            

                
            

        


    


            

        

        

            
© 2011 h4x3d.com.

            
2,251 comments on this temporary theme for two weeks | thanks.