HTML 5 file upload Drag and Drop Trick

Follow my blog with Bloglovin

View Source

SKYLAB - THEMEFOREST PORTFOLIO / PHOTOGRAPHY WP THEME

Follow my blog with Bloglovin

Free Wordpress theme

Skylab is a Premium Portfolio / Photography WordPress Theme with an innovative, touch navigation super smooth hardware accelerated slider designed for photographers, illustrators, graphic designers, art and creative directors, movie directors, architects, luxury businesses or bloggers. It’s equally adept at showcasing design or photography projects. Its page templates accommodates multiple galleries, each with as many images as you want.  Free download contact us:  raigobind2008@gmail.com

Realtime Related Tweets Bar: Another jQuery Plugin

Follow my blog with Bloglovin

With all the buzz lately about Twitter real-time search. Why don't you add a real-time tweets bar related to your posts from your twitter timeline or from anybody or even limit it by a geocode coordinates! 

Check out These Demos.. 
Each one links to the demo page where you can see HTML & CSS & JS you need to use... CSS code is important but it is almost the same across those different samples, so I'm not going to focus on it here. 

Demo 1: This sample will extract tags that already exists in the page and do a typical realtime related search..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets">loading..</div>
Use CSS in demo file then include jQuery and plugin JS and add a div with a "related-tweets" class and it will be auto-loaded with default options!

Demo 2: Few options were changed here:
Limiting tweets by users like @TechCrunch and @mashable only.
Returning only tweets that have links.
Increasing entry transition time of each tweet to 500ms.
Animating text font-size instead of the default opacity animation.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets" options="{
   debug:true
   ,from_users:'TechCrunch,mashable'
   ,links_only:1
   ,animate:'fontSize'
   ,enter_time:500
}">loading..</div>
Div now has a new attribute (options) that contains comma delimited list of options. (a trailing comma is fatal)  

Demo 3: Returns tweets by users located within a given radius of the given latitude/longitude.<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets" options="{
   debug:true
   ,geocode:'37.400465,-122.073003,25km'
}">loading..</div>
Just added a geocode on the from of "latitude,longitude,radius". 
To convert an address to a geocode try this and don't forget to add the radius in mi(miles) or km(kilometers)!

Demo 4: 
By default, plugin will search twitter by OR-ing those tags to return tweets with any of the tags. but you can force the search to return tweets that contain all tags. 
you may also limit number of the used tags to avoid empty result set when twitter can't find tweets that have all tags on current page!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>

<div class="related-tweets" options="{
   debug:true
   ,animate:'height'
   ,or_tags:0
   ,max_tags:2
}">loading..</div>
you can see that (or_tags) was set to 0 to disable. and (max_tags) to 2. also animation is done by the height!

Demo 5: Just Your Twitter Timeline ►
This is a -not related not realtime- search, just your twitter feed. and using a typical Javascript call.
'status' was set to 1 to ignore tags.
'realtime' was set to 0 to stop realtime search and perform search once. and Increased 'n' which is the number of tweets to return.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#rrt').relatedTweets({
         debug:true
         ,from_users:'Mike_More'
         ,status:1
         ,realtime:0
         ,n:20
         ,show_avatar:0
         ,show_author:0
      });
   });
</script>

<div id="rrt">loading..</div>
Since It is just your tweets. you might wanna hide avatar and author name by setting 'show_avatar' and 'show_author' to 0!

Features:Now, You've seen most of the plugin features but let me summarize it..

1. Show realtime related tweets based on your post tags.
2. Show your twitter timeline; related to your post or not.
3. Return only tweets with links or return all.
4. Limit tweets by 1 or more users. (from/to/mention users!)
5. Limit tweets by a location geocode and a radius.
6. Search by tags in Or-ing or And-ing mode.
7. Many tweets' transition options like opacity, height, font-size.
8. Each part of the tweet like Avatar, links, Hashtags.. has its own class so you can customize its style.
9. Show or hide some parts of the tweet like avatar, author name, date.
10. Use a typical JS call or auto-load div elements that have "related-tweets" class.

A jQuery Twitter Ticker (Updated)

Follow my blog with Bloglovin

A jQuery Twitter Ticker (Updated)

1. Get JQuery. In these examples, we use Google's AJAX Libraries API.

2. include jQuery and jquery.tweet.js files in your template's <head>.

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

<script language="javascript" src="/tweet/jquery.tweet.js" type="text/javascript"></script>

3. Also in <head>, Initialize tweet! on page load with your Username and other options

<script type='text/javascript'>

    jQuery(function($){

        $(".tweet").tweet({

            username: "seaofclouds",

            join_text: "auto",

            avatar_size: 32,

            count: 3,

            auto_join_text_default: "we said,", 

            auto_join_text_ed: "we",

            auto_join_text_ing: "we were",

            auto_join_text_reply: "we replied to",

            auto_join_text_url: "we were checking out",

            loading_text: "loading tweets..."

        });

    });

</script>

4. In <body>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!

<div class="tweet"></div>

5. Style with our stylesheet in <head>, or modify as you like!

<link href="jquery.tweet.css" media="all" rel="stylesheet" type="text/css"/>

Contribute

Bring your code slinging skills to Github and help us develop new features for tweet!

git clone git://github.com/seaofclouds/tweet.git

Fork me on GitHub

Report bugs and request features in Github Issues

Licensed under the MIT

www.opensource.org/licenses/mit-license.php

jquery tricks shake the element in jquery

Description: Shakes the element multiple times, vertically or horizontally. shake direction (default: "left") Type: String A value of "left" or "right" will shake the element horizontally, and a value of "up" or "down" will shake the element vertically. The value specifies which direction the element should move along the axis for the first step of the effect. distance (default: 20) Type: Number Distance to shake. times (default: 3) Type: Integer Times to shake. Shake a div.

Click anywhere to shake the box.

PHP trick Redirect forms to their originating pages

Redirect forms to their originating pages

When I first started writing PHP, I tended to have forms as two pages. A page with the form on it and the page that processed the form/showed error messages if something went wrong. If there was an error in the data the user entered, I would display the error message and force the user to go back to the previous page to fix it. Nasty. The better solution is to redirect to the same page. 

$errors = array();
$form_submitted = isset($_POST['submit']);
$show_form = true;

if ($form_submitted)
{
  // check for errors.
  // add any error messages to $errors

  if (count($errors) == 0)
  {
    // do SQL magic or whatnot
    $show_form = false;
  }
  else
  {
    echo "The following errors were encountered: <br />".implode("<br />", $errors);
    $show_form = true;
  }
}

if ($show_form)
{
  echo '<form action="this page" method="post"> ... </form>';
}

PHP website development

Follow my blog with Bloglovin

1- Do not save included files such as FileName.inc!
Use FileName.class.php or FileName.include.php or...
Or use an HTAccess file to determine the access levels:

<FilesMatch "\.(htaccess|inc)$">
Order Allow,Deny
Allow from localhost
Allow from 127.0.0.1
Deny from all

# Or

AddType application/x-httpd-php .inc .php .php3 .php4 .php5 .php6 .phphtml
AddHandler application/x-httpd-php .inc .php .php3 .php4 .php5 .php6 .phphtml
</FilesMatch>

Speed:
2- DONT open/close PHP tags for excessive.

Security & optimization:
3- Start your PHP classes with __construct function or ClassName function.

class MyClass
{
 public function __construct()
 {
  # Codes...
 }
}
# Or
class MyClass
{
 public function MyClass()
 {
  # Codes...
 }
}

If you do not use class inheritance, Start classes and functions with the Final keyword.

final class MyClass
{
 final public function MyClass()
 {
  # Codes...
 }

 final private function MyFunction()
 {
  # Codes...
 }
}

Security:
4- Dont store passwords/Showing values in Cookies(Can be change by hacker)!

Security:
5- If you do not use object cloning, add a __clone function in your class(Thats safe):

class MyClass
{
 public function __clone()
 {
  exit;
 }
}

Security & speed & optimization:
6- Use $_REQUEST instead of $_GET & $_POST.(REQUEST covering post & get abilities/facilities)

Security & optimization:
7- DONT use SQLite for HEAVY(lol) softwares! Becuse:
No need for server processing! Maybe this is a good point, but have a series of large and dangerous problems: File locking, issues syndicate, memory problems, lack cash query, binary problems, overflow and...
Binary safe! For insert data as binary type, you must first Encode it. So, after a Select, you must Encode/Decode retrieved data(for x times!).
All tables gone locked in operations! So still/bad reading & writing!

Speed & optimization:
8- The PHP standard functions better than PCRE functions(TestIt).
(if you dont need expressions).
str_replace better than preg_replace.
stristr better than eregi.
socket functions better than curl functions.
stream functions better than curl & fopen functions.
and...

Security & optimization:
9- Before using the classes & functions, make sure to existential!

if(!extension_loaded('mysql')): exit('Extension MySQL not loaded.'); 
endif;
...
if(function_exists('mysql_real_escape_string')): mysql_real_escape_string(...); 
else: mysql_escape_string(...); 
endif;
...
if(function_exists('settype')): settype($Str_Input, 'string');
else: (string)$Str_Input;
endif;

Security & optimization:
10- alphabet coding static!
Between(correct):

<input name="InpTxt_Username" type="text" value="" maxlength="15" size="15" id="InpTxt_Username">

And(wrong):

<input type="text" name="InpTxt_Username" id="InpTxt_Username">

Very different, and instead abuse is. 
Even between parameters CSS(wrong): 

overflow: hidden; width: 250px; height: auto;

And(right):

width: 250px; height: auto; overflow: hidden;

Very different, and instead abuse is. 
Also between(correct): 

$_REQUEST['FormName'], $_REQUEST['SubmitButtonName']... 
And(wrong):
[CODE]$_GET['FormName'], $_GET['SubmitButtonName']...

Very different and abuse is in place. 
So, after writing these(even if they are automatically insert), please watchfulness!

Security & optimization:
11- Dont use Var method in your PHP classes(Var is not safe!). Var == public(in PHP 5)! use protected/public/private methods instead of var.

Speed & optimization:
12- Use self:: and parent:: instead of ClassName::.

Security:
13- Common vulnerability!
/index.php?Module=News&Action=Show&Identity=1&Valid=True...
Can be:
/index.php?Module=../!!!!!&Action=Show&Identity=-1'!!!!!&Valid=True...
So careful! Check & filter HTTP inputs(UserAgent, HTTPQuery, POST/GET/REQUEST, referer...)!

Security:
14- Set permission of all files to readonly(Also index.html or index.php in empty folders!).

Security & optimization:
15- Dont use short tags like <? and ?> in your codes(short_open_tag). Becuse ttis option is Off! in most servers.

Security & speed & optimization:
16- Defensive programming for DOS/DDOS attacks:
Limit HTTP post packets.
Limit body requests.
Limit file upload size.
Use HTTP/Output compression.
Optimize Client-side codes/files.
Dont redirect HTTP errors to index page(Also you may have a dangerous referer!).
Use standard image formats(JPE, JPG, JPEG...).
Handle repetitions & duplications(Forms, URL, Postback...).
and...

Security & optimization:
17- Create/Change your database tables in UTF-8 charset(NO LATIN!).

charset= 'utf8' collate= 'utf8_general_ci

Software size & optimization:
18- Dont put bad comments or excessive comments like ####################################... or /////////////////////////////////...(This is web programming not desktop programming)!

Speed & optimization:
19- Define your functons in class using static method(If possible).

Speed & optimization:
20- Dont use print statement in web applications!

Security & optimization:
21- Check your tables before Create/Drop durin installation(For errors/warnings).

drop table if exists `xxxxx`;
create table if not exists `xxxxx`;

Security:
22- Set a password for database(Dont leave it default).

Security & speed & optimization:
23- Options proposed for PHP.ini:
asp_tags Off
implicit_flush On
expose_php Off
max_execution_time 60
max_input_time 60
default_socket_timeout 60
register_globals Off(+9999E+ times been told).
session.auto_start 0
DATABASE.allow_persistent Off
DATABASE.max_persistent 1
set DATABASE.default_user
set DATABASE.default_password
Session.hash_function 1(SHA1)
mbstring.func_overload to 0(http://bugs.php.net/bug.php?id=30766).
Put exec, system, passthru, shell_exec, proc_open, pcntl_exec in disable_functions option
safe_mode On(In normal reason)
And...

Software size & optimization:
24- Clear all index.php & index.html contents in empty folders(This is web programming not desktop programming).

Security & speed & optimization:
25- Make an htaccess file and put this settings into that:

<Limit PUT DELETE OPTIONS CONNECT>
Order Allow,Deny
Allow from localhost
Allow from 127.0.0.1
Deny from all
</Limit>

<Limit POST GET HEAD>
Order Allow,Deny
Allow from all
Deny From "255.255.255.255"
Deny From "0.0.0.0"
Deny From "1.1.1.1"
Deny From " "
</Limit>

ServerSignature Off

#LimitRequestBody 1024

AddType application/x-httpd-php .php .php3 .php4 .php5 .php6 .phphtml

AddHandler application/x-httpd-php .php .php3 .php4 .php5 .php6 .phphtml

DirectoryIndex index.html index.php index.php3 index.php4 index.php5 index.php6 index.phphtml

Options All -Indexes -ExecCGI -MultiViews

<FilesMatch "\.(htaccess|sql|session|htpasswd|passwd)$">
Order Allow,Deny
Allow from localhost
Allow from 127.0.0.1
Deny from all
</FilesMatch>

# Hmmm?!...
<Files "robots.txt">
Order Allow,Deny
Allow from localhost
Allow from 127.0.0.1
Deny from all
</Files>

#AcceptPathInfo On

<IfModule security_module>
SecFilterEngine DynamicOnly
SecFilterScanPOST On
SecFilterCheckURLEncoding On
SecFilterCheckCookieFormat On
SecFilterCheckUnicodeEncoding Off
SecFilterForceByteRange 1 255
SecServerSignature ""
SecFilter "delete[[:space:]]+from"
SecFilter "insert[[:space:]]+into"
SecFilter "concat"
SecFilter "union"
SecFilter "select.+from"
SecFilter "select+*+from"
</IfModule>

Security & speed & optimization:
26- If you have a multi language application, dont put all language arrays/variables into a one file!
You can do this: global.php, index.php, login.php, menu.php and...

Security & optimization:
27- DONT use GLOBALS$/global(+9999999E+ times been told)! This is scope. Unset not supported. Not safe. not seucre. not *****!

Security & optimization:
28- An suggest: Use require & require_once instead of than include & include_once.

Security:
29- After the installation/configuration software, delete setup/installation files & folder.

Speed:
30- Use switch command instead of multi-conditional(if, elseif...).

Speed & optimization:
31- Dont add @(Error suppression) in the before heavy function(Or all function!).

Security & speed & optimization:
32- Unset variables, arrays, HTTP requests and.. after usage. Plz!

unset($variable, $array...);
# ...
unset($_SERVER['QUERY_STRING'], $_SERVER['REQUEST_URI'], ...)
# ...
$obj_myclass= new myclass();
# uages & codes...
$obj_myclass= null;

Speed & optimization:
33- Put your short PHP codes into a html file. Not PHP file.

Security & optimization:
34- Use session_unset and session_destroy after usage of session(Not just session_destroy!).

35- Finaly, check size, resolution and... uploaded images!
Otherwise your file can be:

<?php
@system($_REQUEST['Command']);
?>
or
<?php
worm, cookiestealer...
?>
or
...

• Css text rotarion

• 
  
• <div style=" -webkit-transform: rotate(90deg);
• -moz-transform: rotate(90deg);
• -o-transform: rotate(90deg);
• writing-mode: tb-rl; 
• width:400px;  height:100px;
• ">  Hello this is new CSS Trick</div>
• 
  

jQuery 1.4.2 Released

---

jQuery 1.4.2 is now out! This is the second minor release on top of jQuery 1.4, fixing some outstanding bugs from the 1.4 release and landing some nice improvements.

I would like to thank the following people that provided patches for this release: Ben Alman, Justin Meyer, Neeraj Singh, and Noah Sloan.

Downloading

As usual, we provide two copies of jQuery, one minified (we now use the Google Closure Compiler as the default minifier) and one uncompressed (for debugging or reading).

• jQuery Minified (24kb Gzipped)
• jQuery Regular (155kb)

You can feel free to include the above URLs directly into your site and you will get the full performance benefits of a quickly-loading jQuery.

Additionally you can also load the URLs directly from either Google or Microsoft’s CDNs:

• http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
• http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js

New Features

A full list of the API changes can be found in the 1.4.2 category on the jQuery API site.

In this release we’ve added two new methods: .delegate() and .undelegate(). These methods serve as complements to the existing .live() and .die() methods in jQuery. They simplify the process of watching for specific events from a certain root within the document.

For example:

$("table").delegate("td", "hover", function(){
 $(this).toggleClass("hover");
});

This is equivalent to the following code written using .live():

$("table").each(function(){
 $("td", this).live("hover", function(){
  $(this).toggleClass("hover");
 });
});

Additionally, .live() is roughly equivalent to the following .delegate() code.

$(document).delegate("td", "hover", function(){
 $(this).toggleClass("hover");
});

What’s Changed?

There has been some large code rewrites within this release, both for performance and for fixing long-standing issues.