This tutorial about my favorite place Dzone like data loading while page scrolling down with jQuery and PHP. We have lots of data but can not display all. This script helps you to display little data and make faster your website.
Tag: FireFox
Simple Tutorial to Make a Chrome Extension that uses jQuery UI
Google Chrome has had extensions for a while now, but because the Linux client is a little farther behind I never got farther than the simple hello world tutorial. Today, however, I am pleased to announce that Chrome extensions are totally boss, and it is extremely easy to get a jQuery UI skinned template app going in 15 minutes, just by following three easy steps.
Step 1 – Brushing up on the Hello World Extension Tutorial
Follow the Getting Started (Hello World) tutorial. The tutorial is very well written and will help you get your bearings about what extensions can do and the minimum you need to get started. A key part is the manifest.json
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://api.flickr.com/"
]
}
|
The name, version, and description fields are all self explanatory. The browser action one is interesting. It means that your extension will add a button to the browser (right after the address bar) with the specified icon. So far as I can tell the only thing that the button can do now is display a popup, though this popup can communicate with other parts of your extension. Permissions are also important, they specify what domains you can access via xmlhttprequests.
At this point you should have a working hello world tutorial, if not please continue to follow the rest of the directions on the full tutorial page, I’ll wait.
Step 2 jQuerying it up
After you finish the tutorial you may come to feel that raw JS is pretty harsh stuff and it would be great to get a little jQuery action in there. No need to fear, just add this to your “popup.html” file:
// <![CDATA[
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">
// ]]>
You don’t even need to add a file anywhere in your extension. Neat! Now you can rewrite the part of the tutorial that connects to the Flickr API like so:
$.get("http://api.flickr.com/services/rest/", {
method: "flickr.photos.search",
api_key: "90485e931f687a9b9c2a66bf58a3861a",
text: "hello world",
safe_search: 1,
content_type: 1,
sort: "relevance",
per_page: 20
}, function(data, status, request) {
var photos = request.responseXML.getElementsByTagName("photo"); for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}
);
|
Love that fresh jQuery scent. Note that I left the constructImageURL function unchanged, so you’ll still need it if you want the extension to continue working.
Step 3 Adding jQuery UI (It’s Easy!)
This is the easy part. Go to the jQuery UI custom build your own download. Keep all the UI stuff checked and choose your favorite theme, you’ll have plenty of time later to choose exactly what you want or need, but for now just focus on seeing how easy it is to integrate. Now download the zip and extract in into your extensions root directory.
You can go to chrome-extension://extensionId/index.html and see all the magic of the jQuery UI demo, but working from inside a Chrome Extension. Of course extensionId is whatever that giant random string of characters that Chrome assigned to your extension was, something like opnnhifacfpohionnikhlecfgheooenk. (Learn more here)
Congratulations!
Although getting a simple skeleton/hello world extension up only takes a short amount of time, learning about all the possibilities and actually making an extension that does great things will take much longer. I hope that with this tutorial that starting will be very easy and nothing will stand in the way of your dreams.
Peace!
How to Know if Someone Accessed My Computer When I am Away
Do you have a feeling that someone tried to access your computer when you stepped out for a lunch or quick coffee break? Perhaps your colleague or the person sitting in the next desk tried to log in or play something wicked on your computer while you were away for a quick session.
So, how do you know if someone tried to access your computer in your absence? Well, here is a way by which you get notified every time when such an attempt is made.
The website called MouseLock.co gives a solution here. All you have to do is visit the site’s homepage, sign in to your Gmail account and select your secret point (unlock code) from the screen. Once you do this, you will have to place your mouse cursor into the slot shown and click on it. This will activate the mouse lock feature on your computer screen.
So, when an unauthorized person tries to move the mouse in your absence, he will be given just a few seconds to select the unlock code. Upon failure to do so, you will get an instant notification about the intrusion in your mailbox.
If you have a webcam attached to your computer, you can even get the photo of the person trying to intrude. This will make it easy for you to figure out who actually was the person.
As this is an easy to use web application, you can use it any time just by loading the MouseLock website without the need to install anything on your computer. Even though MouseLock does not manage to prevent the intrusion, it will give you an instant notification about it, so that you aware of what is happening at your desk when you are away.
How it Works?
MouseLock operates by using the “mouseLeaveEvent” from JQuery to track the mouse movements. On the other hand, it uses the “getUserMedia()” API that is supported by Chrome and Firefox to capture the webcam photographs.
20 Free Online Tools for Website Speed Testing
We all should be aware by now that Internet users are impatient when it comes to waiting for a web page to load. Thus, your website’s performance and ability to render speedily is critical to its usability and, ultimately, its success.
In order to help you build faster websites and identify troublesome website performance bottlenecks, consider incorporating some of the following tools into your web development process.
Tip: It might be a good idea to use several of these website speed-testing tools so that you can obtain a better picture of site speed issues. Heck, they’re free, so why not?
1. Page Speed Online
Google’s Page Speed Online — which is a web-based adaptation of the popular Google Chrome web development browser extension, Page Speed — analyzes your website’s performance under Google’s Web Performance Best Practices (a set of rules for optimal front-end performance). You can gain lots of information from this handy web tool – it even includes a report for mobile device best practices for optimal performance.
2. Pingdom Tools
This free online website speed-testing tool by Pingdom (a server, network and website monitoring service) provides you with several reports such as a breakdown of how long each web page object (e.g. images, style sheets and JavaScript libraries) takes to download and performance grades for things like browser caching. Another useful report is a page analysis that provides information on load time, page size and requests.
3. Free Website Performance Test (BrowserMob)
This free website speed and performance testing tool by BrowserMob, a company that offers website load testing and monitoring service, gives you a ton of information about your web page speed such as average load time, total page weight and number of page objects. It pings your web page from four locations so that you can get a global view of your website’s performance.
4. Which loads faster?
This interesting tool pits two websites against each other in terms of loading time; for example, you can find out if Google loads faster than Bing does by using this tool. This can be a simple tool for comparing whether your website performs better or worse than competing sites. This open source tool (view the source on GitHub) was originally created to promote the importance of web performance.
5. WebPagetest
This nifty online tool tests your web page’s rendering speed in real browsers (Chrome, Firefox and IE) and gives you a choice of conducting the test from several locations around the world. It also has advanced settings with options for simulating common Internet connection speeds (e.g. DSL and 56K dial up) and ad-blocking so you can see the performance cost of running ads on your site.
6. Web Page Analyzer
This simple web page speed test analyzer — probably one of the oldest tools out there with its first version released in 2003 — gives you data on your web page’s size, assets and load time. It also supplies you with recommendations on things you can make better.
7. Show Slow
This is the web-based version of the open source server application by the same name (Show Slow). Show Slow allows you to add a URL to be monitored (publicly) and regularly captures results from three popular testing tools: YSlow, Page Speed and dynaTrace. This tool requires registration.
8. Site-Perf
This web-based website speed testing tool displays relevant data on page-rendering time, such as total download time, number of connections made and number of requests made. It also has some bonus features such as being able to run the test even if the web page has HTTP authentication (simply supply it with the password to the page) and the ability to simulate different types of Internet connections.
9. Load Impact
Load Impact’s free online load testing and performance tool gives you plenty of data on your website’s ability to handle website traffic. This online web performance evaluation tool has the ability to show graphed data such as user load time (simulated by an automated virtual machine) and requests per second (helpful for seeing how durable your web server is and how fast it can handle web page requests).
10. OctaGate SiteTimer
OctaGate SiteTimer is a rather straightforward online tool: you plug in the URL you want to test and, in turn, it will output a bar graph featuring all web page objects containing information such as download start times, end times and duration for each. This tool is beneficial for quickly discovering slow-loading page objects so that you can optimize them to improve website speed.
Other Website Speed Testing Tools to Check Out
- Web Site Performance Test (Gomez) – a real-time site performance tool displaying information on things such as DNS lookup time and connection time.
- Webslug – similar to the Which loads faster? tool mentioned above, this web tool will compare the site performance of two websites.
- WebWait – a basic website speed timer with options for specifying the number of requests to make and the interval between requests (e.g. 5 requests in 10 seconds).
- Website Speed Test (Searchmetrics) – provides plenty of data on page speed, including estimated load times for various types of Internet connections.
- GTmetrix – an online tool that uses YSlow and PageSpeed to evaluate your website’s front-end performance, giving you easy-to-understand information.
- Website Speed Test (WebToolHub) – a rather basic online tool that provides data such as page size, load time, download speed and average speed in tabular format.
- Yottaa Site Speed Optimizer – this web performance analyzer outputs great-looking reports. This tool requires you to sign up.
- Zoompf Free Web Performance Scan – this tool will scan a web page and gather data pertaining to web performance. You are required to provide and verify your email address in order to run tests.
- Site speed checker – a web-based site speed tool that allows you to run tests on 10 URLs all at once.
- Free web site speed test (Self SEO) – this simple website speed testing tool gives you the option to enter up to 10 URLs to run tests on simultaneously.
PHP File Upload
Create an Upload-File Form
To allow users to upload files from a form can be very useful.
Look at the following HTML form for uploading files:
<html>
<body>
<body>
<form action=”upload_file.php” method=”post”
enctype=”multipart/form-data”>
<label for=”file”>Filename:</label>
<input type=”file” name=”file” id=”file” />
<br />
<input type=”submit” name=”submit” value=”Submit” />
</form>
</body>
</html>
Notice the following about the HTML form above:
- The enctype attribute of thetag specifies which content-type to use when submitting the form. “multipart/form-data” is used when a form requires binary data, like the contents of a file, to be uploaded
- The type=”file” attribute of the <input> tag specifies that the input should be processed as a file. For example, when viewed in a browser, there will be a browse-button next to the input field
Note: Allowing users to upload files is a big security risk. Only permit trusted users to perform file uploads.
Create The Upload Script
The “upload_file.php” file contains the code for uploading a file:
<?php
if ($_FILES[“file”][“error”] > 0)
{
echo “Error: ” . $_FILES[“file”][“error”] . “<br />”;
}
else
{
echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;
echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;
echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;
echo “Stored in: ” . $_FILES[“file”][“tmp_name”];
}
?>
if ($_FILES[“file”][“error”] > 0)
{
echo “Error: ” . $_FILES[“file”][“error”] . “<br />”;
}
else
{
echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;
echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;
echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;
echo “Stored in: ” . $_FILES[“file”][“tmp_name”];
}
?>
By using the global PHP $_FILES array you can upload files from a client computer to the remote server.
The first parameter is the form’s input name and the second index can be either “name”, “type”, “size”, “tmp_name” or “error”. Like this:
- $_FILES[“file”][“name”] – the name of the uploaded file
- $_FILES[“file”][“type”] – the type of the uploaded file
- $_FILES[“file”][“size”] – the size in bytes of the uploaded file
- $_FILES[“file”][“tmp_name”] – the name of the temporary copy of the file stored on the server
- $_FILES[“file”][“error”] – the error code resulting from the file upload
This is a very simple way of uploading files. For security reasons, you should add restrictions on what the user is allowed to upload.
Restrictions on Upload
In this script we add some restrictions to the file upload. The user may upload .gif, .jpeg, and .png files; and the file size must be under 20 kb:
<?php
$allowedExts = array(“jpg”, “jpeg”, “gif”, “png”);
$extension = end(explode(“.”, $_FILES[“file”][“name”]));
if ((($_FILES[“file”][“type”] == “image/gif”)
|| ($_FILES[“file”][“type”] == “image/jpeg”)
|| ($_FILES[“file”][“type”] == “image/png”)
|| ($_FILES[“file”][“type”] == “image/pjpeg“))
&& ($_FILES[“file”][“size”] < 20000)
&& in_array($extension, $allowedExts))
{
if ($_FILES[“file”][“error”] > 0)
{
echo “Error: ” . $_FILES[“file”][“error”] . “<br />”;
}
else
{
echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;
echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;
echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;
echo “Stored in: ” . $_FILES[“file”][“tmp_name”];
}
}
else
{
echo “Invalid file”;
}
?>
$allowedExts = array(“jpg”, “jpeg”, “gif”, “png”);
$extension = end(explode(“.”, $_FILES[“file”][“name”]));
if ((($_FILES[“file”][“type”] == “image/gif”)
|| ($_FILES[“file”][“type”] == “image/jpeg”)
|| ($_FILES[“file”][“type”] == “image/png”)
|| ($_FILES[“file”][“type”] == “image/pjpeg“))
&& ($_FILES[“file”][“size”] < 20000)
&& in_array($extension, $allowedExts))
{
if ($_FILES[“file”][“error”] > 0)
{
echo “Error: ” . $_FILES[“file”][“error”] . “<br />”;
}
else
{
echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;
echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;
echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;
echo “Stored in: ” . $_FILES[“file”][“tmp_name”];
}
}
else
{
echo “Invalid file”;
}
?>
Note: For IE to recognize jpg files the type must be pjpeg, for FireFox it must be jpeg.
Saving the Uploaded File
The examples above create a temporary copy of the uploaded files in the PHP temp folder on the server.
The temporary copied files disappears when the script ends. To store the uploaded file we need to copy it to a different location:
<?php
$allowedExts = array(“jpg”, “jpeg”, “gif”, “png”);
$extension = end(explode(“.”, $_FILES[“file”][“name”]));
if ((($_FILES[“file”][“type”] == “image/gif”)
|| ($_FILES[“file”][“type”] == “image/jpeg”)
|| ($_FILES[“file”][“type”] == “image/png”)
|| ($_FILES[“file”][“type”] == “image/pjpeg”))
&& ($_FILES[“file”][“size”] < 20000)
&& in_array($extension, $allowedExts))
{
if ($_FILES[“file”][“error”] > 0)
{
echo “Return Code: ” . $_FILES[“file”][“error”] . “<br />”;
}
else
{
echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;
echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;
echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;
echo “Temp file: ” . $_FILES[“file”][“tmp_name”] . ”
“;
$allowedExts = array(“jpg”, “jpeg”, “gif”, “png”);
$extension = end(explode(“.”, $_FILES[“file”][“name”]));
if ((($_FILES[“file”][“type”] == “image/gif”)
|| ($_FILES[“file”][“type”] == “image/jpeg”)
|| ($_FILES[“file”][“type”] == “image/png”)
|| ($_FILES[“file”][“type”] == “image/pjpeg”))
&& ($_FILES[“file”][“size”] < 20000)
&& in_array($extension, $allowedExts))
{
if ($_FILES[“file”][“error”] > 0)
{
echo “Return Code: ” . $_FILES[“file”][“error”] . “<br />”;
}
else
{
echo “Upload: ” . $_FILES[“file”][“name”] . “<br />”;
echo “Type: ” . $_FILES[“file”][“type”] . “<br />”;
echo “Size: ” . ($_FILES[“file”][“size”] / 1024) . ” Kb<br />”;
echo “Temp file: ” . $_FILES[“file”][“tmp_name”] . ”
“;
if (file_exists(“upload/” . $_FILES[“file”][“name”]))
{
echo $_FILES[“file”][“name”] . ” already exists. “;
}
else
{
move_uploaded_file($_FILES[“file”][“tmp_name”],
“upload/” . $_FILES[“file”][“name”]);
echo “Stored in: ” . “upload/” . $_FILES[“file”][“name”];
}
}
}
else
{
echo “Invalid file”;
}
?>
The script above checks if the file already exists, if it does not, it copies the file to the specified folder.
Zeeshan Akhter 