For those that don’t know what an SVN is, it’s a successor to a Concurrent Versions System (CVS), but what is that and how can it help me?

What an SVN does
When I would do just small changes to a site or a small piece of code, I would usually just make a copy of the original file, name it (filename)-good.ext, by adding -good to the name I always had at least the last version that worked, but the more and more you start working with code, you start to understand that you may need a file from 3 versions back, of if a bug is found, or a problem occurs, you need to go back to a certain date to see what was done and undo it. This is what CVS’s and SVN’s do.

How do you use an SVN?
Once an SVN is installed and setup, the server now has a complete list of the files you want to keep, watch and backup. You as the user will then checkout all these files to a directory on your own PC (or another directory, if the SVN server is on your own system). Now, lets say I work all day on a file for my website, I save the file and once saved I’ll see a small red mark next to that file in my directory, this tells me the file has been changed and needs to be rechecked in to the server. This is called committing, when you commit a file to the server, the file is given a revision number and saved to the server, along with the file you can also create a log for that file saying what you changed, why it was changed and usually by double clicking the file you can see your new file and the older file, with all differences being highlighted.
If you ever need an older file, the SVN has a list of the files and their revisions, you can look at each file, find the one you need by looking at code or date checked in and either check it out to a different directory, to work on or you can make that the new current file. This is where the log files help, you can see what you changed and most importantly, why.

How Do I setup an SVN?
There are two parts of an SVN, the server and Client. Most clients will work with any server, so why not find the easiest of each.
For the server, you can install the server on your own machine or you can find an old machine (even though it’s called a server it doesn’t take much computing power). I pulled an old machine from my closet that had WinXP installed and installed the server on it. Since it is a server, most SVN’s use Apache for the server part, you can install all the parts separate or take the easy route and use VisualSVN, which includes Subversion, Apache and a management console, all that you need for an SVN server.
For the client I chose, TortoiseSVN, again very easy to install on Windows. With a great FAQ’s and walkthroughs, I was able to have everything installed in about 2 hours, it took me a bit longer since I was setting up the server for multiple people and multiple programs that have their own repository.
I’m sure most programmers have their favorite CVS or SVN, these are just the server and client I chose, there are many more out there, some work better on different OS’s. My SVN has saved my butt a couple times, if you even think you may need this, install it and you’ll never go back to having multiple copies of each file laying around in different directories.

Oh did I mention, it’s FREE!

In 2 weeks I’ll be heading to Defcon, For those that don’t know Defcon is:

DEF CON (also written as DEFCON or Defcon) is the world’s largest annual hacker convention, held every year in Las Vegas, Nevada. The first DEFCON took place in June 1993. In 2007, at DEFCON 15, there were over 6,000 people in attendance.

This got me to wondering what others think a Hacker is? I’ve been asked this question by friends and even in newspaper interviews. The news and those that are uninformed think a hacker is the person that steals your bank account, your identity and spends time trying to do evil.

The truth is most of the problems you hear about in the new, the thousands of credit card numbers being stolen from stores, identities stolen and govt agencies being hacked into are mostly foreign govts (can you say China?) and large groups that are paid for what they do.

My definition of a hacker is anyone that takes something, changes it or uses it for some other use that it was never intended to do. I call myself a hacker, but mostly I hack code, consoles (like Xboxes) and people. Yes, People can be hacked, it’s call social engineering. (is that a good name for lying )

While I have experimented with hacking into secure wifi networks, my own servers and sniffing data over the networks/airwaves. This is usually done on my own systems and by doing so, I can protect my own networks at home, work and friends better than someone that has never tried it. You could say know your enemy, but I think it’s just knowing the tools that you use daily.

So what is your definition of a hacker? good? bad? while my work knows of my hacker friends and connections with hackerCons, would you ever tell your employer if you were?

One of the problems I’ve run into with WordPress was when I wanted to post code, what usually happens is Wordpress will try to run the code i’ve posted, both messing up the layout of the page and then noone can see the code I’ve posted.
Using info from two different places I’ve added, what is for me the perfect fix.
Over at MicoHono.com they show us that adding this below code to our theme style sheet:

.codebox {
font-family:"Lucida Console";
font-size:11px;
color:#455d71;
width:90%;
margin-left:10px;
border-left:4px solid #7ea0b6;
border-right:1px dashed #7ea0b6;
border-bottom:1px dashed #7ea0b6;
border-top:1px dashed #7ea0b6;
padding:5px;
padding-top:30px;
background:url(images/codebox.jpg) no-repeat #d3e5f1;
overflow: auto;
}

and then when you want to add code to your site, before the code add:

<pre class="codebox">
</pre>

and after add:

also I’ve grabbed the image they used and added it to my images directory.

What I didn’t like was:

Also be sure to put all tags such as < should be in their html equivelant inside of codeboxes, the best way to do this is type the code in the ‘visual’ tab, and then later go into the code tab and add the codebox tags around it.

A disadvantage to wordpress is if you keep switching between visual and code tab it will add more and more space between your lines of code which gets quite annoying, So I suggest adding the tags around everything after you are completely done with your post.

So I found a plugin that can help me, Code Auto Escape (site is down as of writing this, but it maybe back now). This plugin Automatically escape code within the code tags, so I don’t need to worry now about doing anything special with my code except copy and paste it. With the plugin active, to post code I just add before my code

<pre class="codebox"><code>

and after my code I add:

</code></pre>

An example, the code starts with div:

<pre class="codebox"><code>
<div id=”foo”>
    < ?php
      function foo() {
        echo “Hello World!\\n”;
      }
      for (\$i = 0; \$i < 10 $i++) {
        foo();
      }
    ?>
    </div>

</code></pre>

First off, I need to say STOP creating web pages with MS Word!!! There are other programs out there that you can drag and drop to create a webpage, these tools create 100 times better code and code that is easy to look at and change if needed, giving you a better chance at actually learning some HTML. One of the free Web Authoring softwares is NVU.
Now if you have to use word, there is a way to make you file smaller, the code easier to read and hide that you’re a n00bie . Use Word HTML Cleaner, The service is free of charge for documents up to 20Kb in size. For larger files, subscriptions are available. I did a few test and while it is hard to have a page less than 20Kb, the subscription fees aren’t that bad.
While this does clean you your code, you may notice some small changes in your page, I’m guessing that this is because Word adds some of the “it only works correctly for IE” while when the code is cleaned up it’s set to web standards. So you may have to slightly edit your page a bit more, but this will give you that chance to learn something and like I said before, move from Word creation of webpages

If you’ve missed them read Part1 and
Part2.

So in part2 we changed the code to the Register Plus plugin to allow for instructions for our defined fields. Today we will change the code in the profiler plugin to take the users data from the defined fields, take that data and put in the middle of other code to look like we are asking flickr and the other services for that single users images (or other data).
With the profiler page, you can add the data most anywhere you want (I’ll show you a beginning point) in the section of code that creates the profile page, I’m not going to say exactly add it here or there, that will be up to you for the look and feel. What I will do is say make sure you add it somewhere in this section, you can then play with it for the look you want. Some of my code may have table, tr and td settings since I’m pasting what I have, but if you have any understanding of tables this shouldn’t faze you.

Profiler.php (located in the profiler plugin directory) again you should be using notepad++.

Around line 421 is the code:

$output = "<h3>Profile</h3>";

Search for that, this is where the profile page begins to be created, if you look at your profile page and at your code you should easily find each section and this way determine where you’d like to add each section. and always make sure you’re adding after a close bracket }, and make backups of the file!

So lets add Twitter first:

If the user hasn’t added a twitter username, we don’t want the title and then blanks to show, so we’re creating an IF statement to check for that, we will then use a script found on the web that grabs twitter for your own username, but instead of adding a user name, we’ll use a variable that is grabbing the users twitter data and putting their name in it’s place.

Twitter Code:
—————————————

$user_twitter = get_usermeta($id,'twitter');

if  ($user_twitter != '')

	{

	        $output .= '<div id="twitter_div">';
                $output .= '<h2 class="twitter-title">Trail Report</h2>';
                $output .= '<ul id="twitter_update_list"></ul></div>';
                $output .= '<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>';
                $output .= '<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/' . $user_twitter . '.json?callback=twitterCallback2&amp;count=10"></script>';

         }

—————————————
You can see where we’re taking the users data and adding it to the script with . $user_twitter .

Next is the YouTube video:

As I said in part2, all the embed code for youtube is the same except for the video code located on the URL after the V, so if the user wants the video http://www.youtube.com/watch?v=EAFv2CN6CAI and they’ve correctly just put the EAFv2CN6CAI in the youtube field, all we need to do, like above is add the code to a default embed code. I’m also checking to see if they have a video inputted, if not they are shown a default video, with a welcome message and some of the things they can do with their profile.

YouTube Code

—————————————

$user_video = get_usermeta($id,'video');

	if  ($user_video != '')

	{

		$output .= '<h2 class="twitter-title"><center>Hiking Video</center></h2>';
                $output .= '<align ="right"><object width="300" height="246"><param name="movie" value="http://www.youtube.com/v/' . $user_video . '&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/' . $user_video . '&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="300" height="246"></embed></object>';

		}

	Else

	{

	    $output .= '<h2 class="twitter-title"><center>Welcome to Your Profile Page</center></h2>';
            $output .= '</align><align ="right"><object width="300" height="246"><param name="movie" value="http://www.youtube.com/v/EnKZ1IS7Asc&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/EnKZ1IS7Asc&hl=en&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6&border=1" type="application/x-shockwave-flash" allowfullscreen="true" width="300" height="246"></embed></object>';	

	}
</align>

—————————————

You can see that if the video field is not blank we user the users data with . $user_twitter . but if the video field is balnk we are point to one specific video to show.

Now the funky one Flickr:

For Flickr, I liked the photo gallery look of PictoBrowser, by going to the link you will see it allows you to build your own PictoBrowser, this is where I got the code. Again we will replace the userID and setID with one’s that the users has inputted. In the code you will also see the name of the set, but I’ve found that you don’t need to change that and with the builder you can shut it off so it’s never shown. Users may not know what their flickID is since it’s different than their user name, that’s why on the edit profile page we did in part 2 I added a like to a page to help get their ID and also a link to allow searches on their flickr page.

Flickr Code:

—————————————

$user_FlickrID = get_usermeta($id,'FlickrID');

	$user_FlickrSet = get_usermeta($id,'FlickrSet');

	if  ($user_FlickrID != '' AND $user_FlickrSet != '')

	{

		$output .= '<center><object width="500" height="500" align="middle"><param name="FlashVars" VALUE="ids=' . $user_FlickrSet . '&names=Pictured Rock National Park&userName=thebackpackertv&userId=' . $user_FlickrID . '&titles=on&source=sets&titles=on&displayNotes=on&thumbAutoHide=off&imageSize=medium&vAlign=mid&displayZoom=off&vertOffset=0&initialScale=on&bgAlpha=80"></param><param name="PictoBrowser" value="http://www.db798.com/pictobrowser.swf"></param><param name="scale" value="noscale"></param><param name="bgcolor" value="#DDDDDD"></param><embed src="http://www.db798.com/pictobrowser.swf" FlashVars="ids=' . $user_FlickrSet . '&names=Pictured Rock National Park&userName=thebackpackertv&userId=' . $user_FlickrID . '&titles=on&source=sets&titles=on&displayNotes=on&thumbAutoHide=off&imageSize=medium&vAlign=mid&displayZoom=off&vertOffset=0&initialScale=on&bgAlpha=80" loop="false" scale="noscale" bgcolor="#DDDDDD" width="500" height="500" name="PictoBrowser" align="middle"></embed></object></center>';

	}

—————————————

All of these sections need to be added somewhere before line 471 or the code:
echo $output;

One last thing I needed to do Is at the top of the edit your profile page, there was a link to your profile and a link to the list of others, the link to my profile page wasn’t working correctly for me so I changed it.
Under wp-admin directory, look for the file user-edit.php in this file search for:

<div class="wrap" id="profile-page"></div>

The line underneath that one I changed to :

<h2>< ?php $is_profile_page? _e('Your Profile and Personal Options') : _e('Edit User'); ?></h2><h3>Go to Your 

<a href="/hikers/?user=<?php echo $profileuser->user_login; ?>">Personal Page</a> Or <a href="/hikers/">   See other Registered Users</a></h3>

you’ll have to change the /hikers/ part but the rest should work.
that should be it, If you have any questions, please ask, I’m sure I ran into what ever problem you’re having while testing and coding this. Yes this code may not be pretty, but I’ve only been coding for about 6 months now, yes i’m a n00bie!

See Part1 Creating Wordpress User Pages

The first things we needed were the plugins, we needed something to help with the profile page but also the new users we would be getting. Scott was able to find Register Plus to enhance the registration page, not only can you add your logo and disclaimer but this allowed for extra defined fields which became very important later in the process. For the actual profile page we used Profiler, this gave us a list of users, each their own profile page and something to work off of to add the extras for each user.
Lets get into some code, but first, save yourself some headaches and download notepad++, you may think it’s easier to edit pages through wordpress itself but it’s not, with code highlighting, search and other extras notepad++ is a life saver and it’s free!
Install both profiler and Register Plus, configure and now we’re ready for changes. As I had said we want Twitter, Youtube and Flickr all on our user pages so we need a way to know how to get to each users data, So lets ask them when they are setting up their profile. In Register Plus, toward the bottom you’ll see User Defined Fields, these will create spots in the database to hold the users accounts, since all these services allow outside sites to see and use their product we don’t need a password, just their account name or what they want to point to.
Add 4 User Defined Fields all with a check in “Add Profile Field”, I called mine twitter, video, flickrID and flickrset. Save the changes. Now when you go into the edit your profile page you’ll see these 4 fields added, problem is there are no instructions, (what does video what in the blank field). Before adding the instructions, lets go into how we are pulling the services for the profile:
Twitter:
There is a javascript on twitter that will allow you to pull the last (how ever many you want) twitters from the site and place them on your site, all you need is the username. (code will be shown later)

Youtube
When looking at a youtube page, they have code to embed the video on your site, if you look at the embed code it’s always the same except for the video code, this code is shown in the address bar right after http://www.youtube.com/v/###########, the ##’s is the video code we need from each user.

Flickr
Flickr is a bit tougher, all users are given a user name but flickr really runs off of userid’s, so we need a userid and a setid from each person to find the exact set of images they’d like to show. We will also be using a 3rd party flash app to show a small gallery.

Adding the instructions for each, the code loops through your defined fields, so to add the correct instruction to each we need to watch for each field.
In register-plus.php (in the register plus plugin directory) around line 1366 or do a search for

$value = get_usermeta( $user_ID, $id );

The code you’ll see right after it is: (yes I know some of this runs off the side of the page)
————————————————–

?>		
<tr>
<th><label for="<?php echo $id;?>">< ?php echo $v['label'];?>:</label></th>
<td><input type="text" name="<?php echo $id;?/>" id="< ?php echo $id;?>" value="< ?php echo $value;?>"  /></td>
</tr>      
< ?php 
					
}

————————————————–

We want to change this so under each field it will show instructions, so change the above code to: (remember always make a backup)
————————————————–

?>		
<tr>
<th><label for="<?php echo $id;?>">< ?php echo $v['label'];?>:</label></th>
<td><input type="text" name="<?php echo $id;?/>" id="< ?php echo $id;?>" value="< ?php echo $value;?>"  />

< ?php

switch ($id) {

case "video":
echo "<br /><b>For Video -Only add what comes after v=, so  for http://www.youtube.com/watch?v=TYLeFroei9c,  input TYLeFroei9c</b></td></tr>";
break;

case "twitter":
echo "<br /><b>Your Twitter becomes a Trail Report, send from your cell phone</b>";
break;

case "flickrid":
echo '<br /><b>Visit <a href="http://idgettr.com/" target="_blank">idGettr</a> to find your FlickrID</b>';
echo '<br /><b>Also visit <a href="http://www.flickr.com/account/prefs/optout/?from=privacy" target="_blank">Your Flikr Account</a> and uncheck "Hide me from searches?"</b>';
break;

case "flickrset":
echo "<br /><b>Choose one of your sets and copy the numbers after /sets/ in the address bar</b>";
echo "<br /><b>Example: http://www.flickr.com/photos/richandsteph/sets/72157594346344597/, input 72157594346344597</b>";
break;

}
}

————————————————–

Your Edit Profile Page will now show the following

Click image to enlarge
In part 3 we’ll get into changing the code on the profiler page to show our images and such.

Also Read Part2 and Part3, Finished Product is at Thebackpacker.tv Profile Pages

I’ve spent the last couple evenings helping Scott Janz over at TheBackPacker.TV to create user pages for hikers. This is one of the most wanted things in Wordpress, everyone wants to have users and a place for those users to call home.
Scott had done most the leg work, finding plugins that we could alter and work how we saw fitting. His wish list consisted of a profile page others could visit, on that page a trail journal or report for each user, their own video and a place for them to put their favorite images.
I know from another site I use to run that when you start letting users upload images and video the amount of web space needed gets huge (I had over 700 users). So we decided to use what’s already out there, namely Flickr and youtube for the images and videos. But the trail reports would be tough, how could we allow the user to actually do a report on the site straight from the trail, using their cell phone? I’m a beginner when it comes to code and didn’t want to write something that dealt with cell phones, phone numbers and alot of SQL. What we went with was Twitter, this is a free service that allows you to post one time messages of what you’re up to or plan on doing, the good part is twitter allows for posting using your cell phone.
So how would we incorporate, twitter, flickr and youtube all on one page while also having all 3 of these services point to the users own data?
Over then next few days I’ll go into exactly what you need and code changes to create your own user pages on wordpress.

Over at MakeUseOf.com They’ve published a list of tips to optimize and streamline your Google searches.

Everyone know about using quotes, + and - but some of the best and less known are:

*
This is the so called wildcard. The asterisk represents a missing word, use it to let Google fill in any potential word.
Example: “the * lights up the moon”

~
To search for all synonyms of a word, put a tilde directly infront of it.
Example: ~sun
This search will bring back results containing the terms sun, solaris, solar, and a couple less obvious ones.

..
The double dot put directly between two numbers denotes a range to narrow the results down.
Example: “solar eclipse 1990..2005?
Note that there are no spaces between the numbers or the dots.

link:
This one will find pages that link to a given URL.
Example: link:makeuseof.com

define:
The smart way to search for definitions across the web.
Example: define:Googol

+ _ - _ * _ /
For simple equations use the symbols for plus, minus, multiply, and divert respectively. Use (brackets) to define which calculations shall be done first, else the simple rule multiplication and division before addition and subtraction applies.
Example: (10 + 4) /2 *7 = 49 OR 10 + 4 /2 *7 = 24

% of
Example: 51% of 900 = 459

^ OR **
These operators will raise a number to the power of another.
Example: 5^3 will raise 5 to the 3rd power.

currencies
Example: 100 Euro in USD

weight, length, volume, etc.
Example: 100kg in lb

time
Example: time sydney

weather
Example: weather berlin

While at one of the many “security” (hacker) conventions I visit, there was a vendor selling external wireless cards, but not just any wireless devices but one of the most powerful ones currently made. The Alfa 500mW is not only powerful but you can add any antenna to it you may want.
I know you’re asking why would you want an external wireless card when your laptop has a perfectly good one inside it. The truth is, I didn’t need it but there are a couple reasons I wanted it: First, many of the wireless cards that come with your laptop don’t have drivers for linux, which I’ve been slowly playing with over the last couple months and Second, the default cards don’t have some of the extra functionality I was needing.
This card comes with a small antenna with power measuring 2dBi, I wanted something that would reach for a couple blocks, not just my neighbors, so the search was on for a high powered antenna. Searching all over the web I found many laptop omni antennas but all were around 9dBi, I wanted more power. Finally after weeks of searching I found an antenna that was 15 dBi, one of the most powerful i’ve seen with out being directional (you have to point it to the direction of the access point). I placed the order and waited…. The shipping day had come and I couldn’t wait to get home and hook up my new antenna and see what kind of trouble I could get into, I get home from work, check the front porch and I see a huge tube sitting there. Opening the tube I find that my perfect antenna is actually a 5 foot external antenna (no wonder it’s so powerful).
I’ve since ordered a smaller 10dBi laptop antenna for travel and since it’s a bit hard to sneak around with a 5 foot antenna. I also decided to keep the large antenna to play with and if I get tired of it I can always donate it to a school or church that needs to push wireless across a yard (or block).
So just how powerful is this antenna? Well with the internal antenna in my laptop, from my back porch I can see 3 wireless networks, including mine. With the huge antenna, I can see 20 different wireless networks.
Soon I’ll post just how easy it is to hack access to your wireless network, but till then, check your wireless router at home and make sure the security is set at WPA, if it’s WEP it can be hacked in a matter of minutes.

It’s been about a year since I’ve worked on Tek-works. As always life is stranger than fiction, While working on Tek-Works last year, teaching everyone how to hack their Wordpress site and Plugins, but having no training or actually worked with code in a professional setting, I coded for the fun of it. Soon after letting Tek-Works slowly die the death of many blogs, I was offered a job as a .net programmer.
Fast forward 8 months, hours and hours of self training and now I feel it’s time to bring this blog back to life and not only will I be showing Wordpress hacks but there will be some other surprises.