Stronger

Tuesday, 29 May 2012

Pretty animated Share buttons using JQuery and CSS

I made this component very quickly today (< 10min) and it looks amazing noneless.

Step 1: save these lines as index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>

 <ul style="margin: 100px">
  <li style="font-weight: bold; text-shadow: #c0c0c0 3px 3px 5px; margin-bottom: 10px; color: #000;">
   <span>Share this page</span><br />
  </li>
  <li>
   <div class="shareIconsContainer">
    <div>
     <span class="shareIcons emailShare"></span>
     <span class="shadow" />     
    </div>
    <div>
     <span class="shareIcons facebookShare"></span>
     <span class="shadow" />
    </div>
    <div>
     <span class="shareIcons twitterShare"></span>
     <span class="shadow" />
    </div>
    <div>
     <span class="shareIcons googleplusShare"></span>
     <span class="shadow" />
    </div>
   </div>
  </li>
 </ul>
 
 <script type="text/javascript">
  $('span.shareIcons').on({
   mouseenter: function(){
    $(this).stop(false, true).animate({
     'height' : '32px',
     'marginTop' : '0px'
    }, 150);
   },
   mouseleave: function(){
    $(this).stop(false, true).animate({
     'height' : '12px',
     'marginTop' : '20px'
    }, 150);
   }
  });
 </script>

</body>
</html>

Step 2: create a folder and name it "css", save these lines as style.css in it

body, ul, li, h1, h2, h3{
 margin:0;
 padding:0;
}

body{
 font-family:Arial, Helvetica, sans-serif;
 font-size:11px;
 color:#fff;
 overflow-x:hidden;
}

span.helpIcons {
    width: 200px;
    height: 32px;
    display: block;
    float: left;
    margin-bottom: 10px;
}

span.helpIcons a {
    margin-left: 36px;
    margin-top: 32px;
    -moz-transition: all 0.5s ease 0s;
    opacity: 0.50;
    text-decoration: none;
    font-size: 0.9em;
    line-height: 4em;
}

span.helpIcons a:hover {
    opacity: 1;
}

div.shareIconsContainer {
    width: 200px;
    height: 32px;
    display: block;
}

span.shareIcons {
    width: 32px;
    height: 12px;
    display: block;
    float: left;
    margin-right: 10px;
    margin-top: 20px;
    cursor: pointer;
}

span.shadow {
    width: 42px;
    height: 12px;
    display: block;
    float: left;
    margin-left: -47px;
    margin-top: 27px;
    background: url("../images/shadow.png") no-repeat scroll 0px 0px transparent;
}

.alertShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -160px transparent;
}

.printShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -96px transparent;
}

.emailShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -0px transparent;
}

.facebookShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -32px transparent;
}

.twitterShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -128px transparent;
}

.googleplusShare {
    background: url("../images/share_top.png") no-repeat scroll 0px -64px transparent;
}

Step 3: Use these 2 Images as Shadow and Icons (Right-Click -> Save as):

Sprite:

Shadow:

Preview:

Share this page

Wednesday, 14 September 2011

Desolder an SMD

I've added 2 new Videos to show how simple desoldering an SMD from a XBox360 Motherboard is. Course you can use this method on every Board.

Friday, 22 July 2011

Run a code on exit

Sometimes you would like to run a code at close point of your application. The implementing is very easy and is just by adding a ShutdownHook to your application.

hier is the example:



public class RunAtEnd {

    public static void main(final String[] args) {



        System.out.println("Starting the program");



        Runtime.getRuntime().addShutdownHook(new Thread(new Runnable() {

            @Override

            public void run() {

                System.out.println("You've closed your program");

            }

        }));

        

        System.out.print("Waiting 5 seconds ");

        for (int i = 0; i < 5; i ++) {

            System.out.print(".");

            try {

                Thread.sleep(1000);

            }

            catch (final InterruptedException e) {

                e.printStackTrace();

            }

        }

        System.out.println("");

    }

}

Monday, 16 May 2011

I used a normal Stop Watch to do reflowing/reballing and found it very hard to use, So I decided to write a little tool with C# to manage the Reballing and Reflowing profiles.
this tool, has a section to define your profiles which you can freely select them from main window.
after selecting a Profile and clicking on Start button, a timer will start and shows the specifications defined for that Step.
It will automatically jump to next step if you didn't select the "Pause" in your profile definition.

Download It Here

Change History:

1.0 first Public version

Friday, 8 April 2011

Java HTTP Proxy

I've found this very useful and smart, although you cannot use it in a StressTest with many connections.

Link to Main Source

This is a multi-threaded HTTP proxy server implementation in Java. Ideally you'll just run it on your local workstation so you can watch HTTP requests going back and forth (because of the way the threading works in this code, I wouldn't recommend running it as a proxy server that serves multiple clients -- see the comments in the code for more detail).

You can either point this proxy to a direct network/Internet connection, or you can point it to another proxy server (if that's how you're set up). Even though the jProxy class has a 'main' method that allows you to run it all by itself, I also tried to structure the methods in the class so you can easily call it from other classes. I didn't spend the time to javadoc any of the comments, but the code should be commented well enough that you can understand what's going on by reading through it.

jProxy.java

Thursday, 24 February 2011

Maven Quick Reference Card

I use normally the Content Assist in M2Eclipse Plugin to enter the maven commands, but if you use your own xml editor, a new Maven Quick Reference Card directly from Apache makes the life much easier. it contains the most basic items.

http://maven.apache.org/guides/MavenQuickReferenceCard.pdf

hope you enjoy using it.

Wednesday, 16 February 2011

Convert JUnit3 Tests modules to JUnit4

I needed to convert many test files to JUnit4, after a while, I considered that is a really painful task to do it manually. So I wrote a little program to automate the process.
I tested this application on a huge number of files wrote by various Persons and having various formats, therefore I hope that I works on every possible JUnit module.
Please send me a short comment if you found a case, that I didn't included in it.

you can call the application by entering this command on Command Line:

java -jar JUnit4Converter.jar -f <your JUnit3 Java file>

this will printout the converted file to Console, if you wanted to do an Inplace Conversion, add "-i" to commands.

java -jar JUnit4Converter.jar -i -f <your JUnit3 Java file>

You can access the application on Github