This week’s email question comes from Mohammed. He’d like to learn more about how to create AJAX request with the jQuery library. We’ll be reviewing the $.get and $.ajax methods.

Be sure to click on the “Full Screen Toggle”. Sample Code From Video

<script type="text/javascript"> //$.get('pageToLoad.php', '', function(responseText) { //$('#container').text(responseText); //});     //$('#container').load('pageToload.php');   $('#submit').click(function() { var name = $('#name').val(); // Jeffrey $.ajax({ url: 'pageToLoad.php', data: 'firstName=' + name, type: 'GET',   success: function(results) { console.log(results); } });   return false;   }); </script>

Subscribe to the ThemeForest RSS Feed for more daily web development screencasts and articles.

It’s been a while, but we’re back with Day 14 of our “Diving into PHP” series. Today, we’ll begin researching OOP techniques. We’ll start with a basic overview of classes and functions, and will then move into some more real-world and complicated examples in future tutorials.

Day 12: Files

Subscribe to the Theme Forest RSS Feed.

Today, we’ll review the answers to yesterday’s quiz. We’ll then move on to examining PHP and Javascript’s methods for comparing regular expressions against strings.

Day 2: Matching

Be sure to click on the “Full Screen Toggle”. Quiz 1: What’s the difference between PHP’s preg_match() and JavaScript’s “someVariable.match()”? What is returned from each method? 2: True or False: You should wrap quotations around your regular expressions when working with JavasScript. 3: Homework: What is the difference between “greedy” and “lazy” matching?

Subscribe to the ThemeForest RSS Feed for more daily web development screencasts and articles.

CSS 3 is on the horizon, and we’re all getting excited. Thanks to the latest browser updates, developers can begin working with time-saving new properties - such as @font-face. Unfortunately, the availability of these features is limited to a tiny fraction of our overall userbase. At least for the next year or so, we’ll need to continue utilizing the Flash and Javascript alternatives when embedding fonts.

Luckily, a new contender, Cufón, has made the process unbelievably simple. What makes it different? Rather than Flash, it uses a mixture of canvas and VML to render the fonts. In just a few minutes, I’ll demonstrate how to use any font you wish in your web applications. Excited?

Pros

Lightning fast! 100 times more simple than siFR. Up and running in a few minutes. Not dependent upon a server-side language, like FLIR is.

Cons

It’s Javascript dependent. If disabled, the default fonts will be used. The text isn’t selectable - never a good thing. You can’t apply a hover state to converted elements.

Step 1: Download Cufón

Visit Cufón’s website and right-click on the “Download” button at the top. Choose “Save-As” and place it on your desktop.

Step 2: Convert a Font

In order to function, we need to use the font converter utility on the website. Alternatively, you may download the source code and convert your fonts locally. For the purposes of demonstration, I’ve chosen to use an obnoxious font: “Jokerman”. Note - Windows users: you may have to copy the font from your “FONT” folder to the desktop for this to work.

If desired, also upload the italic and bold files as well.

Step 2b

Next, you’ll need to choose which glyphs should be included. Don’t be so quick to simply “CHOOSE ALL”. Doing so will cause the JS file size to increase dramatically. For example, we probably don’t need all of the Latin glyphs; so make sure they are left unchecked. In my case, I’ve checked the ones you see below.

Step 2c

Cufón allows you to designate a specific url for your file, to increase security. It’s extremely important that you ensure that you have the proper privileges to use a font. REFER HERE to review the terms. If advantageous, type in your site’s url into this box.

Since we’re just getting started, you can leave the final two sections at their default values. Accept the terms, and click “Let’s Do This”. You’ll then be presented with a download box asking you where to save the generated script. Once again, save it to your desktop for easy retrieval.

Step 3

The next step is to prepare our project. Create a new folder on your desktop, add an index.html file, and drag your two Javascript files in.

Open the index file in your favorite code editor, add the basic HTML tags, and then reference your two Javascript files just before the closing body tag (you’re free to add them to the head section as well).

<script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Jokerman_400.font.js"></script>

Calling the Script

Now, we need to decide what text should be replaced. Since our document is still blank, feel free to litter it with random tags and text. Let’s try to replace the default font in all the H1 tags with Jokerman.

<script type="text/javascript"> Cufon.replace('h1'); </script>

When we call the “replace” method, we may append a string containing the tag name that we wish to replace - in our case, all H1 tags. Save the file, and view it in your browser.

Step 3b

As always, IE needs a bit more to play nicely with the others. If you view this page in IE, you’ll notice a slight flickr/delay before the font is rendered. To remedy, simply append:

<script type="text/javascript"> Cufon.now(); </script>

Step 4

Let’s imagine that you want to have more control over your selector. For instance, perhaps you don’t want to change ALL the H1 tags, but merely the ones within the header of your document. Cufón doesn’t have its own selector engine built in. This feature was omitted to keep the file size as small as possible. Though this might seem like a downfall at first, it’s actually a great idea. Considering the ubiquity of Javascript frameworks lately, there is no need to double-up. We’ll review two methods to target specific elements.

Method 1: Javascript

If you won’t be using a JS framework in your project, we’ll simply use:

Cufon.replace(document.getElementById('header').getElementsByTagName('h1'));

The code above states, “Get the element which has an id of “header”. Then, find all of the H1 tags within this element, and “replace” them with our new font.

Method 2: jQuery

To piggyback off of jQuery’s selector engine, we only need to import jQuery before Cufón.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Jokerman_400.font.js"></script>

Cufon.replace('#header h1');

It’s as simple as that! Please note that you MUST import jQuery BEFORE your Cufón script in order for this method to work.

Complete

Believe it or not, you’re finished! With just a few lines of simple code, you’re free to use any font you wish! Just make sure you have permission and are compliant with type foundries’ licensing.

The main concern from the perspective of the type foundry appears to be that the typeface script generated by Cufón could be used to reverse engineer the very typeface itself. -Cameron Moll

What are your thoughts? Have a better method that I’m not familiar with?

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Hey everyone. Just a note that Day 13 of this series was posted on the nettuts+ blog. I’m hoping to attract more subscribers, so that we can ultimately put even more effort into bringing you great tutorials. Feel free to ask questions on either site. Watch it now!

We’ll take a short break from working with MySQL in order to analyze how to work with the file system. Today, you’ll learn how to use the “file” function, as well as “fopen”, “fgets”, and “fputs”.

Day 12: Files

Be sure to click on the “Full Screen Toggle”.

Subscribe to the Theme Forest RSS Feed.

I promised you last week that we’d begin working with databases in Day 10. I’ll show you how easy it is to get up and running with MySql. We’ll also review the correct way to retrieve information from our new database.

Day 10: Getting Started With MySql

Be sure to click on the “Full Screen Toggle”.

Subscribe to the Theme Forest RSS Feed.

Starting with day 9, I’m going to begin teaching you some practical uses of PHP. Today, I’ll show you how to detect whether or not a user has visited your site previously. This operation can then be used to add a “welcome” box to your site - that typically encourages the user to sign up, via the RSS feed. It’s easier than you’d think!

Day 9: First-Time Visitors

Be sure to click on the “Full Screen Toggle”.

Subscribe to the Theme Forest RSS Feed.

Continuing with our WordPress theme development series, today we will learn how to split and call our seperate theme files and include them in our theme. Splitting theme code into different and organized files is a vital part of WordPress development. We will also look at some very helpful php functions and useful WordPress template tags to create our widgetized sidebar.

Day 5: The Sidebar

Be sure to click on the “Full Screen Toggle” to move to full screen.

Resources You Might Enjoy

Wordpress Codex: wp_list_pages

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

Subscribe to the Theme Forest RSS Feed.

Not many people are familiar with “heredocs”. Heredocs allow you to disregard escaping single quotes when typing out long strings. I’ll show you how and when to use them today!

Day 8: Strings

Further Viewing

To learn more about strings, I recommend that you review PHP’s String page.

Subscribe to the Theme Forest RSS Feed.

Building an entire membership system can be a tedious, and time-consuming task. Tim Cooper is going to show us how to build the ENTIRE thing in roughly thirty minutes. Rather than using MYSQL as our database, Tim will instead demonstrate an alternate approach: using an XML file. We’ll be reviewing PHP, .htaccess files, sessions, and more!

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Ben Nadel has generously created a comprehensive video overview of the jQuery framework. He carefully covers everything from the basic hide/show methods, to jQuery’s AJAX capabilities. This is a “DON’T MISS” tut. I highly recommend it.

What Does He Cover?

Introduction What Is jQuery UI Effects - Pain Free Animation Why I Didn’t Like jQuery At First jQuery For Developers Anonymous Methods $() Factory Method Wrapping DOM Elements jQuery Selectors jQuery Selector Moment of Bliss Working With The $() Collection Attributes And Values Moving Elements Around Traversing The DOM Filtering The jQuery Collection Iterating Over The Stack jQuery Closures - Awesome Voodoo Magic! Eventing Binding And Triggering Custom Event Types jQuery AJAX Monitoring AJAX Requests jQuery Data() Method Extending jQuery - Plugins And Selectors jQuery Is Mad Awesome jQuery Resources Thank You For Listening

Watch the Video

You can view Ben’s video training here.

It’s always nice to branch out from our usual topics. For today’s screencast entry, Jeff Hui will show us how to build a basic ticket management system, similar to Lighthouse. Though the project won’t be nearly as advanced as Lighthouse - for obvious reasons - it should make for a nice starter for newcomers to the Django framework.

Read On…

If you’re intrigued and would like to learn more, be sure to read our recent “Intro to Django” tut.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Today, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests that are made. As always, feel free to ask any questions in the comments area.

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

I’m going to show you how to use regular expressions with PHP. Over the course of about ten minutes, we’ll be reviewing the “preg_match()” and “preg_replace()” functions to validate a form.

Day 7: Regular Expressions

Further Viewing

To learn more about regular expressions, I recommend that you review this introductory screencast that I created months ago.

Subscribe to the Theme Forest RSS Feed.

jCrop is a fantastic jQuery plugin that allows your users to easily crop their photos to the exact dimensions that they choose. Setting up such a system is easier than you might think. Brenley will show us how!

Runner-Up: Brenley Dueck

Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.

Day 4 is here, and we’re jumping right back into creating our Wordpress theme from scratch! In this episode, we will have our first look at what is known as the Wordpress loop. We will be using the WordPress loop as well as some handy template tags to start pulling out and displaying content from our database. Lets get started!

Day 4: The WordPress Loop

Be sure to click on the “Full Screen Toggle” to move to full screen.

Want More? If you would like to read more about working with the Wordpress loop I encourage you to check out the wordpress documentation on the loop. Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

Subscribe to the Theme Forest RSS Feed.

Day 4 is here and we are jumping right back into creating our Wordpress theme from scratch! In this episode, we will have our first look at what is known as the Wordpress loop. We will be using the wordpress loop as well as some handy template tags to start pulling out and displaying content from our database. Lets get started!

Moving right along into day three of our Wordpress for Designers series; today we will start creating our own theme from scratch. We will have a close look at how exactly to go about setting up your themes stylesheet and information, as well as creating the index.php page. In addition, we will examine wordpress template tags, what they are, and how to use them properly.

Day 3: Creating a Theme From Scratch

Be sure to click on the “Full Screen Toggle” to move to full screen.

Questions?

Have a question or comment about wordpress or a certain aspect of the video? Be sure to ask them in the comment section below - where the community will be glad to help you out!

Stay Tuned.

In day 4 we will be jumping into the wordpress loop and displaying our own custom content and sidebars. Be sure to subscribe to keep up to date with all of the video series!

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

Subscribe to the Theme Forest RSS Feed.

Before diving straight in and developing a WordPress theme, it is vital that we understand the basics and have a solid foundation to begin our theme development. Today, we are going to examine the wordpress admin panel and explore some of the features.

Day 2: The Admin Panel

Be sure to click on the “Full Screen Toggle” to move to full screen.

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again.

Subscribe to the Theme Forest RSS Feed.