A problem that has plagued web developers for years is how to add real-time information to their applications, such as a progress bar for file uploads. [...] JavaScript can access a file's name, type, and even the width and height of a local image, but it wasn't until HTML5 that it could access a file's size. [...] In this article I'll show you how [the session.upload_progress] feature can be used to create a simple upload progress bar without any external libraries or browser dependencies.

The tutorial provides all the steps you'll need to get it working - defining the form with the extra required field, styling it and plugging the Javascript in to call a small script to get the progress of the upload. It returns the difference between the content-length of the file and the current size (as a percentage of 100).

In this tutorial, I will show you how to create an attractive, pleasant to look form for your website and then I will explain you how to dynamically validate them using Javascript. We'll also cover server-side validation with PHP to make everything 100% safe. This tutorial will help you to add more functionality to your forms which leads to better user experience and better quality of your website.

His sample form (name, password, email and gender) is made from some pretty simple HTML markup. The real trick comes with the jQuery validation on each field handled in an onKeyUp. Included are both a "password strength" method and an email validation method to check the format of the address. Errored fields have their background color changed to indicate that they've failed and some basic validation (length, password match, etc.) are also included. The PHP does much of the same validation once the form is posted and returns any error messages that might have come up.

You can download the code or try out a live demo to see the scripts together in action.

What feeds do the super star PHP/ JavaScript web developers subscribe to? What are the essential PHP/ JavaScript/ Web Development feeds? I have shared my fledgling list below. Many of these feeds were recommended by my friends at PHPWomen, others I somehow stumbled across myself and some I picked up from articles tweeted with the #linktuesday hashtag, which are aggregated here.

So far, the links include php|architect, Planet-PHP.net, the YUI blog, Matt Gemmell's blog and Evan Goer's blog. If you have others to share, be sure to leave them in the comments!

Funkatron was kind enough to put together a blog post about building a Tumblelog with Gimme Bar and PHP so I told him I would write up what I did on my own blog. One of my intents was to use the Gimme Bar API to pull in a list of my latest Gimmies for the sidebar on this blog. Ed had posted a very simple example in Javascript (I cannot remember where it is) so I took it and ran with it to modify it to work with the blogging software used here.

He includes the simple javascript, about 15 lines of it, that pulls the latest "gimmies" from his own feed and posting them as sidebar items (as you can see right next to the code snippet).It uses a combination of Ender.js, Reqwest, Underscore and regular javascript to get the job done.

According to Wikipedia, more than 97% of all e-mails sent over the net are unwanted. That's around 200 billion spam messages per day. To keep this insane amount of spam out of your inbox, you should keep your e-mail safe when you display it on web. One of the ways to keep it safe is to obfuscate it. In this tutorial I'll show you how to create a script that will do just that.

The script converts the email address into a ROT13 obfuscated versions and reverse it. The spam bots harvesting addresses won't see it as a valid format but the user, thanks to some CSS rules, will see it and be able to copy it easily. Each part of the script is explained in the post and you can see a demo of it in action here.

Today I have new article for PHP. I will tell you about implementation autocomplete for your sites. Data can be located in different sources - directly in the JS code, in the database, and even in the XML file.

All of the code and markup you'll need is included - the HTML for the page containing the field, CSS to style it, the Javascript (jQuery) to make the field work and the SQL/PHP/XML for the backend. You can check out a live demo of the script in action here or download the source in a single package and get started.

It supports: browser Settings Detection, campaign Duration, campaign Fields (custom), cross-domain linking and last but not least Ecommerce tracking.

The configuration lets you set the various keys for your Analytics accounts, the domain name for it to live under, browser detection settings and various other settings for campaign configuration and domain setup. You can find the full code on his github account ready to download or clone.

Just a quick post to mention the excellent work by Norman Hippert aka @thewildcat, he successfully converted my Javascript based CSSReg into PHP. I was meaning to do this but never found the time so it's pretty awesome that not only did thewildcat convert the code but found some nice bugs in my code and fixed them. Great work Norman thanks very much!

You can see a demo of it here and grab the source as a download here. You can find out more about the origins of CSSReg (and some of its siblings) in this other post from Gareth.

Assetic is a PHP library for managing the deployment of your assets: JavaScript, CSS and other resources which will be requested by the browser. The library has been created by Kris Wallsmith from OpenSky, an e-shop where many of the active members of the PHP community work, or worked (see Jonathan Wage/Doctrine 1 and Bulat Shakirzyanov/Imagine.)

Giorgio compares it to the more traditional method (putting them in a public folder) and how Assetic gives you an advantage over this setup. The main feature of the tool is to bundle all of your assets into one file that is then sent to the browser and interpreted there reducing the need for HTTP calls to request multiple files. An example is included showing the creation of an asset collection and the output of the files all combined into one string.

I am going to write several useful extensions, the first of which is a YuiCompressorFilter. Phing already has support for a JavaScrip minifier in the form of the JsMinTask, but the yui-compressor is more useful. Not only does it usually compress better than JsMin, it can also compress CSS files. Also, because my YuiCompressor extension is implemented as a filter instead of a task you can do fancy things like minifying and concatenating files in a single step.

He includes both a sample of the task and it's configuration (the XML) in the post as well as a link to its source over on github.