In every of those cases it is highly dangerous for users, since lack of security in here can cause the new owner of their private data to crack their passwords, thus be able to steal their identity on other places of teh interwebz. Good, strong, and different passwords for any website could solve this problem, but who would be able to memorize that… That’s why I have created this little web app, called Password generator.

Application can be found on this permanent URL: password.darsain.net

What problem is this solving

The functionality is simple. You need only one master password, and the domain name of a website you want to get your new password for, and it will generate you a 64 letters long unbreakable hash, which you can use as a password (for funny webs with max password length requirements, there are 40, and 16 letters long versions). If password like this will be again hashed into random website database, it is not important if they are salting or not, hash from such password can not be broken (I reserve 10 years long expiration date for this statement :P ).

Of course, when hacker have already got the access to database, you can’t do anything about protecting your account from being hacked on this hypothetical website. But you can minimize the damage from such event. Imagine, that he would get to your password you are using on every place on the Internet. Pretty awesome situation, isn’t it? :) And exactly the damage out of the boundaries of this hypothetical website is the issue that this Password generator is solving.

How is it working

I would like to think, that the UI of this little application is self explanatory :) The background, however, is not.

That is why you should always beware such websites, as they are pretty often used for phishing. To ensure the security, the whole generation and algorithms are done in your browser by JavaScript. No data whatsoever are send to any server, or simply everywhere else except your monitor screen.

The only disadvantage is, that – from some reason – I could shut this web application down, and you will be unable to regenerate your passwords. For issue like this, as everything is done with JavaScript and HTML (+ a little bit of unimportant flash), you can just simply save the whole website to your hard drive and run it from there without any problems. Well, there is one little issue with flash player permissions when running on localhost, so Copy to clipboard button may not work, unless you’ll set this flash player setting to Always allow.

If you don’t know hot to save whole website so it will be actually working, here are the downloads for you.

Single mht file for Opera and IE

255.77KB 145x

Archive with all application files

121.28KB 148x

Update:

Guys, do not use this. This password system idea is great, convenient, but in real world highly counter-productive, even useless. The security of websites on the internets is so bad, that they will simply not let you to have secure passwords like this. Almost every website out there have some restrictions, like having short passwords (max 16~ chars long), consisting only from alphanumeric characters, etcetera… From everywhere I’ve tried this, the only place where it worked was Google!

The best thing to do right now, is not to have any account anywhere at all… if a website is forcing you to register to download or view something they are offering for free, than just flip the finger, and either close the tab, register with some one time account, or in case of Firefox users -> download the spectacular BugMeNot plugin.

New upload feature preview

By calling files selection by flash, you can choose multiple files at once (or whole folder with Ctrl+a), which is not possible only with HTML~JS. That means, that you do not have to select all files one by one, and smash your head on keyboard after 101st image. All files are than inserted into an upload queue, which is triggered by the “Upload files” button. Everything is take care of by AJAX, so there is no need for site reloading, and you can see how you gallery is filling with images :)

Demo presentation

1.09KB 337x

Application files

7.64KB 197x

Bugs & suggestions

Report all bugs here as comments (or as comments on main MyGallery page on www.darsain.net).

If you have some suggestion, or feature requests … same way as with bugs :) just write them down here.

Future plans

In the next update I would like to jump straight to version 2.0, because I want to redesign the whole thing, and change app structure. I would love to recreate it to looks and function more like Deviantart Portfolio application.

We will write 2 functions for creating thumbnails from random image (png, jpg, gif). First function will take thumbnail width and height set by you, and cut the “most important” part from the image (I’m assuming, that you are creating thumbnails of websites, so center top is the area I’m talking about) according to thumbnail ratio, and resize it into your thumbnail in exact size that you’ve set. Second function will take max thumbnail width and height set by you, and resize the image so it will fit your max values, but with preserving its original resolution ratio.

1.) Generate thumbnail of exact size

This function will cut the biggest possible top center of image, so it can be resized into width and height you need without deforming it. The advantage of this method is, taht all thumbnails have same resolution, therefore they can be easily styled on website, and it just looks better. Disadvantage is, that sometimes, it could cut the important part of image.
For better understanding, click on the image below.

Lets define the function:

create_thumb( string $source_path, string $destination_path, int $thumb_width, int $thumb_height [, int $quality [, int $overwrite]] )

Parameters:

• $source_path: Path to source image (jpg, jpeg, png, gif).
• $destination_path: Thumbnail destination path. It has to have *.jpg extension, as all thumbnails will be generated in jpg.
• $thumb_width: Final thumbnail width.
• $thumb_height: Final thumbnail height.
• $quality: JPG compression quality (bigger: better quality,larger file). Range 0-100 (optimal 85).
• $overwrite: Set as true if you wan this function to overwrite thumbnail if it already exists.

Lets start with code. I’m lazy to comment every line, so I’ll just paste the whole function with comments in code :) Also, I was asked about cut size and coordinates calculation, but I don’t know what is there to explain. If you suck in math, than just copy paste it and live your miserable life :)

function create_thumb( $source_path, $destination_path, $thumb_width, $thumb_height, $quality=85, $overwrite=true ) {

    // If overwrite is set to FALSE and destination file allready exists, than return FALSE and quit execution
    if( file_exists( $destination_path ) && is_file( $destination_path ) && $overwrite == false ) return false;

    // Needed definitions
    $allowed_extensions = array( 'jpg', 'jpeg', 'png', 'gif' );

    $pathinfo = pathinfo( $source_path );

    // Check if source file exists, and is in array of allowed extensions.
    // Otherwise return FALSE
    if( file_exists( $source_path ) && in_array( strtolower( $pathinfo['extension'] ), $allowed_extensions ) )
    {

      // Get needed data about source image
      list( $original_width, $original_height, $type, $attr ) = getimagesize( $source_path );

      // Calculate cut size and coordinates
      $thumb_ratio = $thumb_width / $thumb_height;
      $original_ratio = $original_width / $original_height;

      if( $thumb_ratio > $original_ratio )
      {

          $cut_width  = $original_width;
          $cut_height = ( $original_width * $thumb_height ) / $thumb_width;

          $cut_x = 0;
          $cut_y = 0;

      }
      elseif( $thumb_ratio < $original_ratio )
      {

          $cut_width  = ( $original_height * $thumb_width ) / $thumb_height;
          $cut_height = $original_height;

          $cut_x = ( $original_width - $cut_width ) / 2;
          $cut_y = 0;

      }
      else
      {

          $cut_width  = $original_width;
          $cut_height = $original_height;

          $cut_x = 0;
          $cut_y = 0;

      }

      // Create final image layout
      $final_image = imagecreatetruecolor( $thumb_width, $thumb_height );

      // Is gif
      if( $pathinfo['extension'] == 'gif' )
      {
      	$source_image = imagecreatefromgif( $source_path );
      }
      // Is png
      elseif( $pathinfo['extension'] == 'png' )
      {
      	$source_image = imagecreatefrompng( $source_path );
      }
      // Is jpg, jpeg
      else
      {
      	$source_image = imagecreatefromjpeg( $source_path );
      }

      // Cut, resize source, and create final image
      imagecopyresampled( $final_image, $source_image, 0, 0, $cut_x, $cut_y, $thumb_width, $thumb_height, $cut_width, $cut_height );

      // Return TRUE if the thumbnail was created. Otherwise FALSE
      if ( imagejpeg( $final_image, $destination_path, $quality ) )
      {
        return true;
      }
      else
      {
        return false;
      }

    }
    else
    {
      return false;
    }

}

As you may notice, this function will always create a .jpg image. You can easily modify that to generate the same image type as source, but .jpg is simply the best choice for thumbnail, and it is not creating such mess on ftp as various image types. (If you are uploading animated gif, the first frame will be your thumbnail)

1.) Generate thumbnail by original image resolution ratio

This function will generate a thumbnail, which will fit into max thumbnail width and max height set by you, but also it will preserve the resolution image ratio of original, so it will be not deformed. Advantages and disadvantages of this method are exact opposite of previous one. Whole image is preserve in minified version, but on website, it could looks awful. Depends on how and where you are planning to use these thumbnails.
For better understanding, click on the image below.

Definition and parameters are exactly same, just function is called create_ratio_thumb. Differences are highlighted.

function create_ratio_thumb( $source_path, $destination_path, $thumb_width, $thumb_height, $quality=85, $overwrite=true ) {

    // If overwrite is set to FALSE and destination file allready exists, than return FALSE and quit execution
    if( file_exists( $destination_path ) && is_file( $destination_path ) && $overwrite == false ) return false;

    // Needed definitions
    $allowed_extensions = array( 'jpg', 'jpeg', 'png', 'gif' );

    $pathinfo = pathinfo( $source_path );

    // Check if source file exists, and is in array of allowed extensions.
    // Otherwise return FALSE
    if( file_exists( $source_path ) && in_array( strtolower( $pathinfo['extension'] ), $allowed_extensions ) )
    {

      // Get needed data about source image
      list( $original_width, $original_height, $type, $attr ) = getimagesize( $source_path );

      // Calculate final thumbnail resolution
      $thumb_ratio = $thumb_width / $thumb_height;
      $original_ratio = $original_width / $original_height;

      if( $thumb_ratio > $original_ratio )
      {

          $final_width  = round( ( $thumb_height * $original_width) / $original_height );
          $final_height = $thumb_height;

      }
      elseif( $thumb_ratio < $original_ratio )
      {

          $final_width  = $thumb_width;
          $final_height = round( ( $thumb_width * $original_height ) / $original_width );

      }
      else
      {

          $final_width  = $thumb_width;
          $final_height = $thumb_height;

      }

      // Create final image layout
  		$final_image = imagecreatetruecolor( $final_width, $final_height );

  		// Is gif
  		if( $pathinfo['extension'] == 'gif' )
  		{
  			$source_image = imagecreatefromgif( $source_path );
  		}
  		// Is png
  		elseif( $pathinfo['extension'] == 'png' )
  		{
  			$source_image = imagecreatefrompng( $source_path );
  		}
  		// Is jpg, jpeg
  		else
  		{
  			$source_image = imagecreatefromjpeg( $source_path );
  		}

  		// Resize source, and create the final image
  		imagecopyresampled( $final_image, $source_image, 0, 0, 0, 0, $final_width, $final_height, $original_width, $original_height );

      // Return TRUE if the thumbnail was created. Otherwise FALSE
      if ( imagejpeg( $final_image, $destination_path, $quality ) )
      {
        return true;
      }
      else
      {
        return false;
      }

    }
    else
    {
      return false;
    }

}

And that would be our tutorial on creating thumbnails :) Check out the demo, where you can try to generate thumbnail from your own image, or download the tutorial files. (and don’t forget to set chmod 0777 to destination folder)

Demo presentation

355x

Tutorial files

10.30KB 214x

Preview:

Template files

7.65KB 266x

PSD files

7.65KB 201x

Preview:

Downloads:

15 Icons pack

7.67KB 170x

PSD source file

7.65KB 186x

The templates count is a bit lower (as much of them sucked,… the others suck just a little bit less :) ), some of them probably can’t be used at all (SMF templates, because they are for old forum versions ), but there are some yeah-its-all-right-i-guess ones either, so, check it out, it will not hurt you :)

List of free web templates:

• Perfect World
• Lineage 2 Vampire
• Lineage 2 Van Halisha
• Atmosph
• Ragnarok SMF
• Health
• Lineage 2 Crossroader
• Lineage 2 – SMF
• Lineage 2 – Orbis Unum

You can download them here: Darsain.net – Templates

Demo presentation

474x

Tutorial files

24.93KB 247x

First, we need to decide, how the animation will be triggered, and by what object. I’ve choose the solution of creating your own attributes (yeah, now you can’t masturbate over 100% W3C validation result you hypocritical bastard ;)), so the triggering object can be almost any tag. Animation will start after click on any object with my custom attribute “toggle”, and animated will be object with id equals toggle value. The whole HTML will look like this:

<a href="#" toggle="myObject">Click me</a>

<div id="myObject">
content ...
</div>

Easy, huh? And as I already wrote, you can add this custom attribute to any object, like this:

<a href="#" toggle="myObject">Click me</a>
<div toggle="myObject">Click me</div>
<span toggle="myObject">Click me</span>
<h1 toggle="myObject">Click me</h1>

<div id="myObject">
content ...
</div>

All objects with attribute “toggle”, which is addressing to triggered object ID, are live buttons now.

“But, what if I need to show one object, but close few others with some group, or something?”

Nothing can be easier. We can add to targeted object another custom attribute called “group”, and give it the name of group as a value, so all the objects with this group will slide up, when another object is sliding down. Here is the HTML:

<a href="#" toggle="bread1">I want some bread</a>

<div id="bread" group="breakfast">
content ...
</div>

<a href="#" toggle="bread2">What about milk?</a>

<div id="milk" group="breakfast">
content ...
</div>

So, now, when we know how we want this to work, we can jump to creating our jQuery snippet.
We need to trigger the click() function, when any object with the attribute “toggle” is clicked.

$("[toggle]").click( function() {

});

Now, we need to define some variables to work with. Read the descriptions next to them.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle"); // get the ID of targeted object from "toggle" attribute value
  var targetObj = $("[id="+targetObjId+"]"); // find and target the needed object into variable
  var targetObjGroup = $(targetObj).attr("group"); // check, if tehre is any group reference on targeted object

});

We have our variables, so lets do some magic and finish the snippet. Again, read the comments in code.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup ) // if there is some reference to group, run this
  {
      $("[group="+targetObjGroup+"]").not(targetObj).slideUp(); // slide up (hide) all objects with refered group, but not our targetObj
      $(targetObj).slideDown(); // slide down (animated show function) our targetObj
  }
  else // if  there is no reference for group, run this
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).slideDown(); // if our targetObj is hidden, slide him down
      else $(targetObj).slideUp(); // in other case, slide him up
  }

  return false; // in case that triggering object is an <a> tag, we don't want to href="" got executed by browser

});

And thats it. This 19 lines of code can simply replace the whole Animated Collapsible DIV plugin. Interesting huh?

But this is not over yet :) In case, that you want to use this snippet as a tabs switcher, you have to do some changes, but you want to leave this snipped like it is, so simply copy paste it, and change the attribute to “showtab”. Here is the new snipped, with highlighted lines and explanations.

$("[showtab]").click( function() { // changed attribute

  var targetObjId = $(this).attr("showtab"); // changed attribute
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  {
      $("[group="+targetObjGroup+"]").not(targetObj).hide(); // in case of hiding tab, we don want to animate sliding, so it wouldn't mess with height of surrounding elements
      $(targetObj).fadeIn(); // fadeIn() animation is way better in tabs switching
  }
  else
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).fadeIn(); // in case, that there is only one tab, just toggle it
      else $(targetObj).fadeOut();
  }

  return false;

});

If you need to change style of triggering button after click, just create a css class called “active” with needed changes, and toggle this class to button after if().

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  { ... }
  else
  { ... }

  $(this).toggleclass('active'); // <- thats what I'm talking about

  return false;

});

Or add this class with addclass(), and remove with removeclass() whenever in code you need.

I hope, that this tutorial will be useful for someone, and remember: Try to create some functions & features yourself before finding the solution among plugins. That way, you will gain more experience, and know-hows.

As bonus, here are 2 simple snippets for “show” and “hide” attributes, for better understanding.

$("[show]").click( function() {

  var targetObjId = $(this).attr("show");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideDown();

});

$("[hide]").click( function() {

  var targetObjId = $(this).attr("hide");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideUp();

});

If you have any questions, do not hesitate to ask. Comments are always welcome.

Demo presentation

474x

Tutorial files

24.93KB 247x