Nettuts+ » Screencasts

5 More Helpful Video Quick Tips

Jeffrey Way — Fri, 20 Nov 2009 19:56:34 +0000

As many of you might know, I post a sporadic video quick tip on Twitter once a week or so. For those of you who don’t follow us, here are the latest five.

You’ll learn how to select anything and everything with jQuery, how to log PHP errors to a text file, how to change your website’s background with each WordPress post, and more. Each video does not exceed five minutes.

How to Change your Website’s Background with Each WordPress Blog Post

How to Rename the jQuery “$” Symbol

How to Select Anything and Everything with jQuery

Log Errors to a Text File with PHP

Stay Up to Date on the Latest Nettuts+ Screencasts with Boxee

Easy Website Updates with PageLime

Jeffrey Way — Fri, 13 Nov 2009 02:10:53 +0000

PageLime makes the process of editing static websites laughably easy. There are times when a full CMS like WordPress is far too complicated when only simple edits are required – not to mention the fact that a static template must first be modified accordingly to work with WordPress. Wouldn’t it be easier if your current static website could instantly be integrated with a service, without requiring hours of conversion time? This is where PageLime comes in.

In today’s video tutorial, we’ll go through the process of purchasing a site template on ThemeForest, and then integrating that specific template with PageLime, resulting in a website which is super easy to update…even for your mom.

PageLime is a remote Content Management System that allows you to update the content, images, and documents on your web site without installing any software.

The Screencast

Other Viewing Options

What’s in Store for PageLime?

In the CEO’s own words…

Repeating Regions – You/Your clients will be able to have regions that you define as repeatable. This will let you dynamically create new buttons in navigation, blog like article additions, etc. This is in testing now, and will roll out across all sites in the next week!
Multipage Dynamic Content – You will be able to define areas that show up on other places in the website. So when you update them, they update in other places.
Blog – Drop in simple PageLime managed blog.
Client Invoicing – We’re building an invoicing feature from withing PageLime that will let you manage your PageLime clients with auto recurring invoices that link to your PageLime account. This basically allows you to setup a subscription model for you clients, and pass the cost of PageLime directly to them. OR charge them more, and make money off of PageLime! This will be a feature in the Business Account Level.
iPhone App – Manage websites from an iPhone application. This is already designed, just need to go about building it soon. I can send you screenshots if you would like.
eCommerce – Either a partnership with another team, or build one ourselves that can be dropped in, like the blog.

Learn how to AJAXify Comment Forms

Jeffrey Way — Fri, 06 Nov 2009 18:28:28 +0000

In this week’s video tutorial, I’ll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.

Screencast

*Note – please forgive me, but I had a slight cold when recording this. I apologize if my words are a bit mumbled.

Other Viewing Options

Conclusion

This screencast demonstrated just one way to animate your contact forms. Truthfully, it’s probably a bit too much for a regular site! But we’re here to have fun with it. If you decide to implement something like this into your own site, perhaps a more toned down version, please do leave a comment with a link to the page for our review!

ASP.NET from Scratch: Lesson 1

Jeremy McPeak — Tue, 03 Nov 2009 21:43:07 +0000

Nettuts+ is primarily a PHP haven; however, I’m sure we can all agree that there are many fantastic, and technically more powerful languages and frameworks at our disposal. Jeremy McPeak, author of Professional AJAX, and Beginning JavaScript: 4th Edition, will teach you how to build ASP.NET applications from scratch over the course of the next several video tutorials. Enjoy!

Screencast

Other Viewing Options

Thank you, Screencast.com!

…for providing the hosting for these video tutorials.

How to Build a Simple Content Slider jQuery Plugin

Jeffrey Way — Fri, 30 Oct 2009 23:31:53 +0000

I was recently asked by a reader to recommend a helpful content slider plugin. No doubt, there are a bunch of excellent options available — some which are, perhaps, too excellent! With so much flexibility comes extra weight; especially when sometimes you only need a simple slide or fade transition.

So I figured, why not build a simple custom plugin that will get the job done?

Other Viewing Options

P.S. Speed Up

Don’t forget to take advantage of bundles when working in Textmate. If you need a helpful snippet to jump-start every new jQuery plugin, create a new snippet in Textmate, paste the following code in, and then assign a short-cut – like “jqueryplugin.”

(function(\$) {

	\$.fn.$1 = function(options) {

		var defaults = {
			$2
		},

		options = \$.extend(defaults, options);

		this.each(function() {

			var \$this = \$(this);		

			$3

            return this;

		}); // end each

	}

})(jQuery);

Conclusion

This is the only the first step. In the next screencast, we’ll continue refining this plugin, and adding more options/conveniences.

Thank you, Screencast.com!

…for providing the hosting for these video tutorials.

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Jeffrey Way — Sat, 24 Oct 2009 02:52:21 +0000

This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.

Please note that, even if you haven’t read the first two tutorials, you’ll be able to follow along with this video quite easily.

Part 1: Build a Promotional iPhone App Website Wireframe in Fireworks

Part 2: Create a Promotional iPhone App Site in Photoshop

Part 3: Converting Our Design to a Nicely Coded HTML and CSS Website

Section 1: Slicing the PSD – 0:00
Section 2: Coding the Markup – 18:43
Section 3: Adding the CSS – 47:11

Other Viewing Options

iTunes/Downloadable Version

Series Complete!

If you followed along for this entire series, congratulations are in order! If enjoy the idea of tutorial series’ that span multiple TUTS sites, be loud and let us know! I hope you learned a bit from this third entry; and thanks again to Sean Hodge (Psdtuts+/Vectortuts+ editor) for writing the first two tutorials in this series.

Thank you, Screencast.com!

…for providing the hosting for these video tutorials.

Typekit: Removing the Wrapping Paper

Jeffrey Way — Fri, 16 Oct 2009 05:00:34 +0000

Services like Typekit live and die by how intuitive their products are. A couple weeks ago, I finally received my beta invite to join. For those unfamiliar, Typekit is a service that allows you to use a plethora of fonts on your own site with minimal effort.

This video demonstrates just how easy Typekit is to work with. Rather than being a tutorial per se, this is more akin to removing the wrapping paper for the first time! I literally pressed record with zero knowledge of how to use Typekit. However, as you’ll soon see, this service very well might prove to be the number one choice for designers and developers, once it officially launches. I know I’m on board!

The Screencast

Other Viewing Options

Thank you, Screencast.com!

…for providing the hosting for these video tutorials.

CodeIgniter from Scratch Day 7: Pagination

Jeffrey Way — Thu, 01 Oct 2009 20:58:50 +0000

In these last two weeks, I’ve received bunches of requests for a CodeIgniter pagination screencast; so that’s what we’ll be reviewing today! As a bonus, we’ll also take a look at the super convenient HTML Table class.

Catch Up

Day 7: Pagination

Other Viewing Options

Thank you, Screencast.com!

…for providing the hosting for these video tutorials.

Quick and Easy Filtering with jQuery

Jeffrey Way — Thu, 24 Sep 2009 21:42:11 +0000

In this week’s screencast, we’ll learn how to implement quick and dirty filtering without a database. By applying some classes and a touch of jQuery, we can implement a nice little system very quickly.

Overview

Just yesterday, I was asked how I was able to create the simple sorting feature found on the Vault page of my blog. Truthfully, it was done out of haste. Though I’ll eventually run everything through a database and sort it that way, for now, I needed a quick and dirty way to do it with JavaScript. I’ll show you what I did.

20 Minute Video Tutorial

Other Viewing Options

The Final jQuery

Updated a bit from the video.

var ulOptions = '

All
PHP
CSS
JavaScript
HTML


';
var $links = $('#links');

$links.before(ulOptions)
  		   .children('li')
		   .addClass('all')
		   .filter('li:odd')
		   .addClass('odd');

$('#options li a').click(function() {
	var $this = $(this),
		type = $this.attr('class');

	$links.children('li')
		.removeClass('odd')
		.hide()
		.filter('.' + type)
		.show()
		.filter(':odd')
		.addClass('odd');

	return false;
});

Update: Sneaky Little Bug

“SFdude” found a bug where, if you click on the same item twice, the entire list will disappear! Luckily, I was able to determine the problem quickly. The issue was that after the first click, we applied a class of “selected” to the anchor tag. That is what was causing the hiccup. Because now – it had two classes that would not correspond to anything! The fix is to remove these two lines:

$('#options li a').removeClass('selected');
$this.addClass('selected');

Truthfully – they were unnecessary. We can just as easily use the a:focus selector in our stylesheet to accomplish this.

a:focus {
 font-weight: bold;
}

And that does it. I’ve updated the demo and the source code. Thanks to SFdude for finding that sneaky little bug.

So what are your thoughts? Disagree with this method? Is there a better way to do it – without a database? Let me know!

Thank you, Screencast.com!

…for providing the hosting for these video tutorials.

5 Super Helpful Web Development Video Quick Tips

Jeffrey Way — Thu, 17 Sep 2009 17:40:44 +0000

It occurred to me that many of you might not be aware that, once a week or so, I post a five minute web development video quick tip for our Twitter followers. From now on, I’ll make a posting on Nettuts+ after every five new quick tips – for the rest of you. Here’s the first set. We cover a variety of neat CSS3 features, Photoshop, and more!

Nettuts+ » Screencasts

5 More Helpful Video Quick Tips

How to Change your Website’s Background with Each WordPress Blog Post

How to Rename the jQuery “$” Symbol

How to Select Anything and Everything with jQuery

Log Errors to a Text File with PHP

Stay Up to Date on the Latest Nettuts+ Screencasts with Boxee

Easy Website Updates with PageLime

The Screencast

Other Viewing Options

What’s in Store for PageLime?

Learn how to AJAXify Comment Forms

Screencast

Other Viewing Options

Conclusion

ASP.NET from Scratch: Lesson 1

Screencast

Other Viewing Options

Thank you, Screencast.com!

How to Build a Simple Content Slider jQuery Plugin

Other Viewing Options

P.S. Speed Up

Conclusion

Thank you, Screencast.com!

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

Part 1: Build a Promotional iPhone App Website Wireframe in Fireworks

Part 2: Create a Promotional iPhone App Site in Photoshop

Part 3: Converting Our Design to a Nicely Coded HTML and CSS Website

Other Viewing Options

Series Complete!

Thank you, Screencast.com!

Typekit: Removing the Wrapping Paper

The Screencast

Other Viewing Options

Thank you, Screencast.com!

CodeIgniter from Scratch Day 7: Pagination

Catch Up

Day 7: Pagination

Other Viewing Options

Thank you, Screencast.com!

Quick and Easy Filtering with jQuery

Overview

20 Minute Video Tutorial

Other Viewing Options

The Final jQuery

Update: Sneaky Little Bug

Thank you, Screencast.com!

5 Super Helpful Web Development Video Quick Tips

Creating Your First Template With CodeIgniter

Preview a Tiling Background Image Directly from Photoshop

Learn how to use the CSS3 Property: text-shadow

How to Add a Drop-Shadow Across All Browsers

How to Make Rounded Corners with CSS and JavaScript