Add to this self-imposed regiment of learning, the process of absorbing something new – still in Beta, and the craziness factor goes up a few levels… While my chops are getting proofed, the developer is not even  finished – the plugin isn’t solidified and ready for release!

jQuery templates (tmpl()) is one of these type of endeavors.  The functionality is there, but nothing is set in stone yet. However, these are the basic concepts that are not published anywhere at the moment.

The basic premise is you get a piece of data, a json string.  In jQuery, a data string look like this: (notice the “[" & "]” on each end of the string)

[{"id":"1","title":"Home","content":"Home Page...\r\nLorem ipsum dolor sit amet, ","region":"main","display":"1"}]

Don’t let this get confusing off the bat. It is EXACTLY just like a row from a database table. Look closer at the first few pieces:

[{

"id":"1",

"title":"Home",

"content":"Home Page...

No surprises... it's just the column name, and the data that it has assigned to it.

When javascript (jQuery) passes a json string, it is wrapped in the braces ("[ ... ]"). The jQuery tmpl() method strips these off (for our convenience, or for functionality of jQuery - no one was able to give a definitive answer on that question), but when we work with this json string, it will be a pure piece of data thanks to the braces being stripped off.

This may seem like a tedious approach, but if you want to do more than just sling a string at your front end, then you'll want to know what it is you're controlling (the data).

For now our data looks like this:

data = var people = [
{
firstName: "John",
lastName: "Doe",
}
];

,  we're doing 'onesies' before going nuts and adding more data!

An easy way to think of this is, we have our data. We have a var named, "people", and it has one object (one key and one value).  If you output people.firstName, it will equal "John".  If we output people.lastName, it will equal "Doe".

When working on something 'new', it's good to use the latest CDN (content delivery network) version of the scripts. As it turns out, this is wise, considering tmpl is still BETA - it's nice to know if something "I KNOW" worked, stops working due to a change in the code plugin.

The next step is to make a function to extract the data we want to extract from the string.

function getFirstName() {
return this.data.firstName;
}

When 'getFirstName()' is executed, it will get look at the data we've predefined. You've probably guessed that we could get lastName with such a function too? (you're right!).  Regardless of how much data was defined in the structure, we could extract it this way.

$(function(){
$( "#tmplPeople" )
.tmpl( people )
.appendTo( ".peopleTable" );
});

Before tip the box over and let you look in, it may be best to explain what 'will be happening' when it all fires.

This function will look for a defined template called, "#tmplPeople". it will look at your predefined data (people - of which we have one entry for now). It will take the data, place it into the template (named tmplPeople) and then snap it into the peopleTable. S0,  our one data entry, will be formatted, then put into the html table.

<script id="tmplPeople" type="text/x-jquery-tmpl">
<tr>
<td colspan="2">${getFirstName()} </td>
</tr>
</script>

<table><tbody></tbody></table>

here is our <table>, that will house the templates after the data is parsed by the function we looked at above. Right above the <table> is our template we labled "tmplPeople". As you can see, each time that template is called (tmplPeople), it is going to call our 'getFirstName' function, and it is going to take the first name from our data, and populate it into the template, then it will add it to the table.

Here is the whole code snippet, if this generates any feedback, we'll continue onto the many other ways to parse data from json!

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script type="text/javascript">// <![CDATA[

function getFirstName() {
return this.data.firstName;
}

function getLastName() {
return this.data.lastName;
}

$(function(){
$( "#tmplPeople" )
.tmpl( people )
.appendTo( ".peopleTable" );
});

// ]]></script>

<script id="tmplPeople" type="text/x-jquery-tmpl">// <![CDATA[

<tr>
<td colspan="2">${getFirstName()}  ${getFirstName()}</td>
</tr>

// ]]></script>
<table>
<tbody></tbody>
</table>

Related Posts:

• No Related Posts

These are the “mostly used” statements:

FROM (Table to retrieve data from)

WHERE (Row-level filtering) 

GROUP BY (Group specification)

HAVING (Group-level filtering)

ORDER BY (Output sort order)

If anyone is interested, i’ll post the rest of my notes here on SQL(?). The order varies some depending upon use. Another useful item of interest is that the SQL (“mostly-regardless” of the flavor [mysql, mongo, oracle/etc...]), is that they all speak ‘SQL’. That may sound redundant, but it is actually interesting to start discovering the approaches that are implemented that all basically ‘do the same thing’ or ‘place higher priorities on certain operations’.

Once you learn what each flavor of SQL is doing, what their design goal was, it’s interesting to learn you may be using something totally overkill for a simple purpose. In most cases for a small production website, SQL Lite may be perfectly acceptable for lower traffic/connection sites (which are the vast majority of all sites on the web). Some ‘family-type- websites have even been known to use flat-text files.

The downside to using a larger-scale SQL solution is that most people do not use it correctly in the first place. That’s fine to use it, but it’s kind of like driving a NASCAR to the supermarket.  Just because you “have and use” more power, doesn’t make it faster for the end client/customer. A basic website (3-10 pages), using Apache, NGINX, Lighttpd (webservers), along with basic HTML(preferably HTML5 + CSS3), and maybe jQuery (if you need some pzazz), is more than enough for the basic website.  It’s fast, secure, presentable, and allows the author to maintain their focus (do what they were trying to do in the first place [get their message onto the web]).

If your goal is to see how much horse power you can use – see how flashy and widgetized you can get, then you’re missing the point of web development on the internet.  It’s cool to use the latest thing, but it’s cooler to get your message understood. Even if your message is to sell something, save a puppy from being put down, or getting your beliefs/blogging your experiences. If your page loads quickly, is easy to read, is obvious what you expect the reader to ‘get from your web presence’, then you and your web page reader/browser will enjoy a good relationship.

Related Posts:

• No Related Posts

$.ajax()

http://jsbin.u1st.us <–use jsbin to share your code!

Related Posts:

• Why “TAGS” Are So Critical To Improve Your Google Search Ranking

Creating tags is not a magical task, but tag creation is critical if you’re doing any content publishing or blogging.  Search engines, plugins, and even crawlers look for instances of the reuse of key terms and index your page/post accordingly.  Getting ‘tagged’ can be the difference of your site coming up in search results, and leaving you in the dust.  Using some generic logic can help you discern which words to latch on to, which words can help you to get closer to the top of the search results.

One method that is common is to search for the words and phrases that you want to use [inside your search engine of choice].  Place yourself amongst those who you want to be compared against.  If you want to be a fine dining result, then find like-minded sites, and study their keyword source – see if it’s pertinent to what you can, factually, offer as a word to ‘be known by’.

Anyone who wants to come up on a page of results needs to tag their site. If you’re using templates, use the meta keywords tags in the head, if you’re using a blogging structure, then take advantage of the seo/keywords/tag features that come default on almost any blog framework.  CMS (content management systems) have even incorporated  a tagging logic, allowing each page of the system to be able to be crawled, index, and make it a contender for a pertinent search query.

Example of the Meta Keywords tag:

<META NAME=”keywords” CONTENT=”oranges, lemons, limes”>

Blogging systems like WordPress, have input boxes on the side, where you can enter keywords, one at a time, called “Post Tags”.  The use and common advice is to repeat features that may ‘best describe the point you want to get across’.  For this post we chose, “metatag”, “keyword”, “seo”, “example”, “how to”, “html” and “blog”.   Just by even stating what my keywords are will increase the ranking of the post (the frequency).

There are different guidelines for each crawler, but as a general rule, you can usually use 10 keywords safely, and up to 25 – each separated by a comma. With this in mind, place (what you feel are) the most critical keywords up in the first 10.  Likewise, make your site description short and sweet – usually one sentence.  If possible, include your region – even your address if possible.

references: Seomoz | webmarketingnow.com |

Need a “Pick-Me-Up?”

Related Posts:

• The jQuery .ajax() Cheatsheet… The Quick Reference For ajax Settings!
• Web Design For The Beginner
• Combining flash with HTML/CSS
• The Right Tool For The Job
• Structuring your HTML code

Need to automate some scripts?  Tired of constantly entering ssh user@server.address, then the password?  Having a trusted connection can drastically improve productivity if it is used in the correct conditions.  If you’re using a public machine, then this is NOT SMART.  If you’re using a machine that anyone else has access to, then again, this is not a solution, and shouldn’t be considered as an option.

However, if you have a private machine that you keep secure, and you want to setup some quick access to remote server, setup automatic backup scripts, take snapshots of drive data structures, then this will get you going quick!

Here’s the quick steps to get you on the road to automated scripts:

On your box, generate the ssh public key:

• On your box, generate the ssh public key:
• ssh-keygen -t dsa
• when it asks for a passphrase, just hit return.
• go to your home directory, then type, cd .ssh
• cat id_dsa.pub – this is the generated ssh key you will give to the remote host.
• On the remote host, as username@yourdomain.com
• vi .ssh/authorized_keys
• insert your ssh public key – the text from the .ssh/id_dsa.pub file on your box
• make sure the text you copy is on a single line (it will not work if it’s not on a single line)
• verify trusted SSH
• In a terminal window type, ssh -Y username@yourdomain.com

If you want to take this one step further, and make it ever ‘faster’, setup an alias in the .bashrc file.

just add this line to your .bashrc in your home dir, and do not forget to close/reopen your terminal after you add this line, or you will not see it work (the config file will not be loaded):

alias home=’ssh username@yourdomain.com’

at the command prompt in terminal (after you’ve remembered to close & reopen it!) is type “home” and hit the enter key.

So, now you can type one word, get to your remote server in seconds rather than hassling through typing out the same info over and over.

One of your first tasks should be to write a backup script to backup your critical files like your .bashrc!

Enjoy,

Need a “Pick-Me-Up?”

Related Posts:

• No Related Posts

Add This offers statistical data so you can track how many times your site  was referred using their tool, but you will have to sign up for an account to be able to use that feature… After all, they need to know who to give the tally to

The list of networking sites seems to be growing at an unbelievable rate, and it’s great that someone is keeping up with all the js/api links that can connect stories or web items to their ‘circle of friends’ or colleagues.

Another one that has caught my attention is , “Share This“.  Share this seems to have a few more dynamic elements – a smoother presentation, but the number of services it can ‘share to’ are probably equal to any other like-service. One thing that seperates Share This apart is the application method – you’re able to literally download the plugin within a ‘format’ (e.g. wordpress, typePad, or generic script for any regular coding website).

As mentioned earlier, there are a few user-centric web applications starting to come to the forefront. One of the most significant is Threadsy.  At first I wasn’t sold on the all-in-one web tool idea, but after using it for a month, it’s become an essential tool.  It’s so easy to twitter, and if it’s appropriate, I can simultaneously post to Facebook.  It keeps all my email in one place (my tens of throw away/ sole-purpose email addresses [that i would never check otherwise?]).  The irony is I like Threadsy for the very reasons that I thought I would ever like an application like this… It has a vertical bar (as small as I want it to be) that can show me my twitter account/facebook notices without getting an email… if something scrolls by & I happen to want to reply – it’s a matter of clicking a button after typing my response.  At any given time, I used to have up to 20 browser window/tabs open. With Threadsy, it’s reduced to 5.

Regardless which one of these mash-up tools you use, be sure to share your findings in the comments.  We appreciate the comments and participation.

Thanks,

Greg

If you liked this post, please follow me on Twitter

Related Posts:

• No Related Posts

Start off by creating a fresh new drive of the size you’re after using the VirtualBox user interface. Then, locate both the your old, smaller HD and the new, larger one and run the following command:

VBoxManage clonehd --existing oldhd.vdi newhd.vdi

After some progress indicators ahve come and gone your HD should have been cloned to the larger one. You now need to use some software to expand your drive partition into the new space. Vista and W7 have this feature built in to Disk Management, or you could use something like GParted. I have never had luck with the integrated windows disk management tools, so I opted to use a free product called EASEUS PARTITION MASTER – home edition:

This tool was easy to install directly into the new vdi image.  Walked through the wizard after clicking on “Resize” – it rebooted itself and resized the partition without a fuss.

The command line entries for running the VirtualBox commands:

gmilby@gmilby-ubuntu64:~/.VirtualBox/HardDisks$ ls
XP_10GIG.vdi  xp.vdi
gmilby@gmilby-ubuntu64:~/.VirtualBox/HardDisks$ ls -l
total 6042484
-rw——- 1 gmilby gmilby      61952 2009-11-20 08:15 XP_10GIG.vdi
-rw——- 1 gmilby gmilby 6181380608 2009-11-20 07:56 xp.vdi
gmilby@gmilby-ubuntu64:~/.VirtualBox/HardDisks$ VBoxManage clonehd –existing xp.vdi XP_10GIG.vdi
VirtualBox Command Line Management Interface Version 3.0.12
(C) 2005-2009 Sun Microsystems, Inc.
All rights reserved.

0%…10%…20%…30%…40%…50%…60%…70%…80%…90%…100%
Clone hard disk created in format ‘VDI’. UUID: 1366bb7f-e827-41de-90ce-763e82309f26
gmilby@gmilby-ubuntu64:~/.VirtualBox/HardDisks$

Resized .vdi image:

Don’t forget to enter the Antispyware Give-away for December 2009!
Two lucky winners have won a free professional license of Superantispyware!

If you liked this post, please follow me on Twitter

Related Posts:

• No Related Posts

Enter The SUPERANTISPYWARE Give-Away

The best part is that you can try this software for free, “NOW” and they even offer a free version. The free version offers some limited features & does not offer the proactive features, but it still will removes ALL of the malware, spyware, and trojans. It just will not self-update, run 24/7/365 and do scheduled scans/remove all the bad things automatically like the professional version does.
If you decide to try the freeware version, there is no nagware – no aggrivating things asking for your information/etc. Either way you’ll be pleasantly surprised at the experience, and more importantly you’ll be shocked at what it finds & removes from your system.

Follow Me On Twitter!

====Ammendment====
Congrat’s to Jonathan Pereira our final SuperAntiSpyware Pro License winner for December 2009!
Need a RELIABLE Web Host?

Related Posts:

• No Related Posts

These no non-sense instructions will get you going quickly:

Linux/Ubuntu/Kubuntu requires that the Sun Java 6 JDK be installed on your system. Install it by typing: sudo apt-get install sun-java6-jdk

To download the installable package, navigate to Oracle’s SQL Developer download page at:
http://www.oracle.com/technology/software/products/sql/index.html

You can only download after you agree to the OTN License Agreement for SQL Developer at the top of the page (look for radio buttons). Choose the Accept License Agreement radio button.

Scroll down and select the package entitled ‘Oracle SQL Developer RPM for Linux’ to download the package. Don’t worry – we’ll deal with the RPM shortly.

If you’re in a hurry, and want to skip the compile process, then download the .DEB form here Syrbot SQLDeveloepr.deb Download

Compiling:
Next we need to convert the .rpm to a .deb to install it in Ubuntu. We’ll do this by using an application called ‘alien’. Install it by typing:
sudo apt-get install alien

Next, in a terminal session, browse to where you saved the SQL Developer .rpm package and type:
sudo alien -k –scripts sqldeveloper*(insert the version number)*.rpm

This will create a .deb package ready to be installed into our system. We do so by typing:
sudo dpkg -i sqldeveloper*.deb

Oracle SQL Developer is now installed, but you will need to create the profile directory in order to run it (the hidden folder in your home directory e.g. .sqldeveloper

Below, each directory had to be created individually, chowned to me (since mkdir is a sudo operation), then chmod to 777 to allow the system user to write in the files to the directory.
the folder labeled system1.5.5.59.69 will change as version numbers change – so pay attention.

Looking at the message we can see that it’s trying to obtain the JDK path by reading a file called ‘jdk’ in a directory called ‘~/.sqldeveloper’. Let’s resolve this dependency.

First we’ll create the missing directory by typing:
mkdir -p ~/.sqldeveloper

Next we’ll create an empty jdk file by typing:
touch ~/.sqldeveloper/jdk

Edit this file and input the path to the JDK by typing:
gedit ~/.sqldeveloper/jdk
and pasting into it:
/usr/lib/jvm/java-6-sun

gmilby@gmilby-ubuntu64:~$ ~/.sqldeveloper/system1.5.5.59.69/o.ide/diagnostics$

gmilby@gmilby-ubuntu64:~$ sudo chmod 777 -Rf .sqldeveloper

Once the profile path is created you should be able to launch SQLDeveloper via the menu (Applications/Programming), or by terminal window, typing, “sqldeveloper“.

Follow Me On Twitter!

Good Luck with this and post your comments below – we’re always open to improvements in the process.

Related Posts:

• Ubuntu & Debian Firewall Mysteries Revealed a.k.a. how to get the app or service working ASAP!
• CRONTAB The Super Easy No Non-sense Version

13 Styles offers cross browser/lightweight menu’s that offer a variety of styles ranging from simple to elegant to fun.  Most of the menu’s are generic, and can be easily implemented into an exisiting design.  The most you would need to do is to adjust some of the colors in the CSS.  The stylesheets are using standard property componenets (CSS1/2), and appear to work in backward versions of browsers also.  Which is good considering the bulk of corporate America is using ie6 still.  If you’re interested, these menu’s offer the PSD’s to totally customize the menu (for a price) if the free version doesn’t work for you.

CSS Menumaker offers more menu’s that are utilizing a more graphic flair, and most seem that they make work well with more conservative color palets (considering the vibrance of the menu’s).   These CSS menu’s offer solutions for creating dropdown menus (unique – most CSS sites do not even approach this topic).  This generator  has a pretty extensive customization feature – allowing you to build more than just the look on the webpage – this generator actually builds the menu items.   If you’re creating the menu’s dynamically, then this feature will not matter a whole lot.

CSS Play is the perverbial “Mother-Load” of every configuration imaginable… literally.  I was able to look through about half this site, and it’s literally overwhelming as to how many resources are actually offered.  The multi-level dropdown menus are new, and the menu’s appear to be consistent.  Sometimes CSS/js menu’s will have gaps depending upon the layout or browser used.  All of the menu’s appear to “look correct” regardless of how they’re used, and how they’re viewed.   If you are concerned about page size, they have some pure text CSS menu’s that are actually appealing.

enjoy.

Related Posts:

• No Related Posts