Web Development

Web Development Tips & Tricks, the things that you don’t want to figure out.





Posts Tagged ‘Javascript’

PHP.JS – Your Javascript PHP Library

Tuesday, August 4th, 2009

PHP.JSThe tile may have been a wee bit confusing, partially intended. PHP.JS is one of the most useful tools I’ve seen around, and boy did they do a good job. So, what is it, specifically?

PHP.JS is a Javascript library that has converted pretty much the entire PHP library into Javascript. This is their description:

“PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.”

It’s completely free (thank you, open source) and can help enormously.

The main question that was on my mind was, “Do I have to download the whole thing?” After all, something that comprehensive is probably pretty hefty.

The answer, thankfully, is no! They have every function broken out into pieces and the ability to download a wide variety of packages, and each package can be modified to add or subtract individual functions.

Well, that’s it for today! If you can’t think of many uses, let me know, because I can think of a plethora of uses.

Have a great day!

-Kerry

Javascript Countdown

Wednesday, July 29th, 2009

Javascript-KitSo… hard… to… find… time… to… post…

Of course I will be attempting to find more time to post as always, try to fit into my schedule, as I have SO much data I would like to share, so trying to find free time (like now), that I can share them with you.

Today, I had to do a Javascript countdown. No big deal, they’re everywhere, I just thought I would show you the one I used, as it worked great. I found it at Javascript Kit, which is a great site to find a good deal of free scripts.

I used one with a very simple function call. I simply reorganized the script code, customized it a little bit, and it worked great. You can find it here.

I would give you a link to the site, but it will only be there for 10 days, so I’ll just give you an image:

Countdown

Have a great day!

jQuery – The beginning of Web 3.0

Tuesday, June 23rd, 2009

jQueryI am fully aware that ‘Web 3.0′ isn’t really defined, other than it’s a step in the direction of a new age in web browsing. I believe jQuery is a large part/start in that direction.

So, what is jQuery?

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

That just sounds like a new way of writing Javascript, and not all that new and exciting. Essentially, it is just that, but what it brings about can yield spectacular results. It gives you complete control over Javascript and makes you able to change everything with ease.

Recently I had a project that I wanted everything to be on one page. With jQuery I was able to setup a Split-Pane Divider (like the ones you see in an explorer window), a sortable table that you could change the widths of the columns (by dragging), made my own accordion menu that when clicking on an item, dynamically populated the sortable table.

On top of all that, I used ThickBox to make it even more dynamic.

There’s more functionality that I’m not going into here (Calendar Control, etc.), but I ended up with a fully functional page that used multiple database tables and completely functional like a regular web page, without any refreshing, with animated effects (according menu slides down, other fields faded in and out). This is the result of jQuery.

From what I’ve gathered there are four main Javascript libraries, jQuery, Prototype, Dojo and Mootools. From the reviews I’ve read, jQuery is on the top, though some people prefer the others. Dojo might have a little bit more funtionality. All of them have their own plugins, hundreds of things to make your site more functional and increase it’s design with javascript animated effects.

jQuery has full documentation as well as premade visual plugins in their jQuery UI pack.

I’m completely sold and have been using it for a while. If you need tutorials, they have them too.

Shrinking Javascript the Better Way

Thursday, February 28th, 2008

Hello everyone!

There are many ways to shrink or obfuscate Javascript, simply search Google and you should find plenty of results. I found that many are programs that shrink it, then you upload the new code, which I was going to use until I found a better solution.

I found two that were recommended, jspacker and JSMin. After searching for jspacker and finding their site down, I went to JSMin. I found links at the bottom for PHP code that would do it on the spot, which made me happy because I figured I could figure out a way to do something tricky with it, which I did.

Through the use of .htaccess, JSMin and another file I created, I made the site I was working on automatically shrink all my Javascript files when called, but look completely normal in Dreamweaver.

Here’s the code:

.htaccess

Options +FollowSymLinks
RewriteEngine on

RewriteRule ^js/(.*).js$ /js/minimize.php?jsPage=$1 [L]

Quick note, I keep all my Javascript files in a folder called “js” which is also where “minimize.php” is located. You can adjust this according to your setup.

includes/minimize.php

<?php
require(‘../includes/jsmin.php‘);

// Output a minified version of the Javascript file.
echo JSMin::minify(file_get_contents($_GET['jsPage'] . ‘.js’));
?>

Again, should adjust the include of the “jsmin.php” which can be downloaded here. Also, with the way I set it up, “minimize.php” must be in the same folder. You can adjust all of this however you like, but this was the best for my use.That’s it! Basically what’s happening is when the site calls your “example.js” file, it instead reads the file “minimize.php?JSPage=example”, which then minimizes and outputs the “example.js”.

-Kerry