The 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.
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:
I 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.
Ok, so the story behind this post is one of my sites, SendArticles.com. It is an article submission service, and one page, the reports page, was taking 10-15 second to load. I cannot stand waiting that long, it makes me not want to go to the page, yet I have to all the time. This is a dedicated server and it was nowhere near its max capacity, so I knew it had to be something else.
So, I decided to debug it. I removed a small piece of code, and BAM! Loaded in about half a second. I was confused, I put the code back in. 10-15 second delay was back. Ok, that was definitely it. So, it came down to a SQL (despite technically using MySQL, I’m just going to refer to it as the code is the same) query, which was essentially the following:
I apologize for the anonymity, but I do feel it’s necessary. Anyway, the main essence of the statement was that it was making a column (col2) match what another SELECT statement found. So, I decided to replace it with an INNER JOIN (I wasn’t in the practice of using them when I first wrote the code).
It produces the exact same results, but in about half a second. Almost no time at all, just instant results. So, I’ve resolved to go through every SQL statement in the hundreds of pages of files (luckily nearly all of them are contained in a handful of classes), and change any SQL IN statements to INNER JOIN.
I posted two rants yesterday, all about bad software and websites.
I was working on SendArticles.com, a new service that Studio98 just launched, and I decided I wanted a support system better than the ghetto contact form we had installed. So, I searched for “open source ticket system”.
The second listing appealed more than the first, and it was osTicket. I had no idea what to expect. I have never worked with the back end of a ticket system before, and never anything to do with installation.
So, I was almost immediately sold with their presentation of the product. I downloaded, installed, and voila, it was up and working!
I did have to go to their Wiki for a couple questions, but that was easy enough. I setup an email pipe system (never done that before), and it worked immediately.
The next step was integrating it. I have integrated many open source systems before. Never has it been this easy. I copied and pasted my header and footer includes to replace the ones they had, and voila, it all fit in like magic!
It still worked, and after messing with the system I had a fully functional support system that just took a few hours to install, customize and implement. All from scratch, with no prior experience.
I’ve looked a numerous “web developer’s list of Firefox extensions” and have gotten quite a few useful tools, and thought I’d share with you. Note, these are not all my recommended extensions, simply the ones that I think directly affect web development.
Here’s a list alphabetically:
ColorZilla – This adds a little Eye Dropper / Color Picker to your browser so you can find the value (RGB or Hex) and has multiple options to add to clipboard in various forms and is extremely useful when working with designs.
Firebug – This is a Javascript debugger, and it is a MUST for any Javascript work. This has been my Savior on many occasions, and I barely use it to its full potential as a debugger (haven’t taken the time to study it). It’s easy to do the simple things, and supports the complicated things when you need them.
Html Validator – For someone who does a lot of SEO, this will definitely speed things up. It is a built in HTML Validator and gives you a little check mark when the page is valid. Definitely easier than going to an external site for each page. Also, if you’re in a secured section of a website that external sites can’t validate, this will still work.
IE Tab - Adds a simple button that will switch between Firefox and whatever version of IE you have on your system. Saves a lot of time switching between browsers.
MeasureIt – This adds a little button that will allow you to measure the width and horizontal pixels of a designated area. It creates an expandable box with updated measurements of the pixel size.
Web Developer – This is the most useful toolbar you’ll get, it gives you massive amounts of information and many tools that you are invaluable to a web developer. If for whatever reason you don’t have this toolbar – get it. I promise you won’t regret it. It could be compared as useful as a magician’s staff is to a a magician.
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:
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.
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”.
For those of you that don’t know, Deezer is a website that allows you to play a huge selection of songs by huge selection of artists for free, no questions asked. You can also create playlists and so on, if you register an account with them.
(If you want to skip all the preamble just go down to the code section and you’ll see code that will fix the Deezer problem. If you have no idea what I’m talking about, continue reading.)
But, it is a very weird site. They’ve changed their layout a few times, it used to be “blogmusik.net”, but they’ve always been buggy. Apparently it’s run by someone in France as many of the writing is in French, which is often quite confusing.
Most people can ignore all these oddities as they can still search and play music.
Well, quite some time ago there were “grayed-out” songs. Meaning you couldn’t click on them anywhere. There was no support saying why they were that way, no FAQ, no instruction. It annoyed a good many users, including myself, so I went to the forums and found a simple work around. You could right click and say “Play This Track” and it would play.
I thought it foolish of them to have unexplained grayed-out songs that could be played with a right-click. I used this for many months, then I was informed they changed their layout.
Sure enough, next time I went to play a song from them, different layout, and you could no longer right-click to play a track, but there were no longer grayed-out songs. There were songs that simply wouldn’t play.
Well this was worse, again, nothing in the support or anywhere on the site saying why you couldn’t play these tracks. Some people on the forums reported adding them to a playlist, and then playing them would help. This, however, was not a universal solution.
I found, on the forums, someone who wrote a line of javascript to copy and paste into your browser, click “enter” then refresh your page, and it will work. I thought it was a weird solution, but worth a try. It worked!
With no further ado, this is the code:
I haven’t inspected this code thoroughly, but basically it looks like it sets your cookies to make it look like you’re from France.Today, I found out something strange. It was the first time I had used Deezer on a new computer so I knew I had to find that code again. It was not in the forums, and other people were asking for it, and someone noted that a moderator removed it. Apparently, in that forum someone posted it again. By the time I got there, it was removed.
My father had saved this code away in a google document, so I asked him for the link and used it. Yep, still worked. So, this is my “protest”, so to speaker, to their unexplained censorship. If they were kind enough to explain why they had unworking songs, why they didn’t want the code around, I could respect their wishes, but at the moment it seems very illogical.
If you’ve done much with CSS at all you know that the IE’s not only display differently than Firefox, but IE7 displays differently than IE6.
Instead of using Javascript or another scripting language to determine what browser is being used, there are a few simple techniques that can handle that problem for you. This works inline or through an included stylesheet.
The first applies to all browsers, Firefox, IE7 & IE 6. The second applies to IE7 & IE6. The last applies to only IE6. This means that if you define them in the order I have given you, the top only effects Firefox, while the second line only affects IE7 and the last line only affects IE6.-Kerry
I was recently implementing a persistent login feature and stumbled across a website that did it in a more unique way, seemingly more secure: Persistent Login Cookies Best Practice. I thought it was a smart way to use cookies and decided to use it.
Now, the way I set my system up was that someone would enter a username and password, which it validates and then sends a request to my MySQL database to make sure that it matches. Upon matching, it sets a cookie using the method mentioned above.
One things I do is I like to use includes to store variables procedures, etc. I always, always, store database connection data in an include. I don’t like to have any data on a page where someone in a passing glance at my screen could get that information, or something of that nature. So, just like any other page, I included the database connection, sent the queries out, then tried to set cookies.
I received the error “headers already sent out”, pointing to my database connection include. This lead me to believe that the functions themselves sent out headers, and so I would have to some weird way of settings cookies like reading another page with it as a query string and a lot of unneeded complexity would be added.
I decided to mention my problem to an ASP.NET programmer, who didn’t use cookies much and we ended up arguing because he wasn’t understanding my problem. In a fit of frustration, I replaced the contents of the include with the call to the include – meaning the database connection data was now on page.
It worked.
Why did this work? I didn’t know. This led me to believe that including a file sent out headers. So, to prove my point, I included another file.
It still worked.
I then thought because the other include I was using only contained variables, and the database connection include called a function, that you couldn’t call a function within an include, because that would send headers out.
Wrong again!
I did more tests and finally gave up trying to exclude the database login information in an include. I still don’t understand exactly why, I even tried to store just the variables of the information and then do the calls in the program, which didn’t work.
I continued with my work, going on to other things, and had the magnificent thought, why don’t I put the setcookie (PHP function) in with the database calls in an include file? This will save me extra code and will keep the database information secure — if it works.
It worked!
In conclusion, if you need to set cookies after making a database call and would like to keep your database login information secure, use some sort of of function, either within a class or just a function that will make the call for you.