CSS3 cool animation for "Loading..." interface

Now a days we all uses HTML5 and CSS3 for any website.
So why use "loading..." image when CSS3 provides us many possibilities for the same.

Here is an example:

Here is the HTML Part :

<div class="loading-container">
    <div class="loading-progress">
        <div class="rotator">
            <div class="rotator">
                <div class="rotator colored">
                    <div class="rotator">
                        <div class="rotator colored">
                            <div class="rotator colored">
                            </div>
                            <div class="rotator">
                            </div>
                        </div>
                        <div class="rotator colored">
                        </div>
                    </div>
                    <div class="rotator">
                    </div>
                </div>
                <div class="rotator">
                </div>
            </div>
            <div class="rotator">
            </div>
        </div>
        <div class="rotator">
        </div>
    </div>
</div>

Here is the CSS3 part :

.loading-container{z-index:2000;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.55)}
.loading-container.loading-inactive{display:none}
.loading-container.loading-inactive .loading-progress{display:none}
.loading-container .loading-progress{z-index:2000;position:fixed;height:10px;width:10px;margin:auto;top:0;left:0;right:0;bottom:0}
.loading-container .loading-progress .rotator{-webkit-animation:spin 30s infinite linear;-moz-animation:spin 30s infinite linear;-o-animation:spin 30s infinite linear;animation:spin 30s infinite linear}
.loading-container .loading-progress>.rotator{left:-100px}
.loading-container .rotator{-webkit-background-origin:border-box;-moz-background-origin:border-box;background-origin:border-box;background-color:#fff;width:200px;height:7px;opacity:.75;position:absolute;top:0;left:0}
.loading-container .colored{background-color:#2dc3e8!important}
        
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}
@-o-keyframes spin{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

Click here to download GitHub to see the example.

Read More

Visual Studio 2013, Cool IDE Option for Code Preview in Scrollbar

Visual Studio 2013 has some cool features in IDE, one of its is Code Preview in stand of slandered scroll bar.

This feature help to navigates hundreds lines of  code.

Have a look difference between old new browser options:

Lets jump into the option.

New Behavior options for vertical scroll bar, and also available with MAP mode for Vertical Scrollbar.

Its allow 3 Preview option with Narrow, Medium and Wide.

And here its the cool view:

Vertical scroll bar changes into a code preview area. its show all color format which helps us to get quick jump when you mouse over on that scroll, its shows a readable code preview on that scroll area.

We can also split horizontal windows in Map Mode

Click and drag split icon, this option is also available in Window->Split from menu bar.

It will display something like below:

I really like to work with Map Mode in stand of classic scroll view.

Good IDE feature, isn't it?

Read More

Animated Recycle with Open Close Style using CSS3

CSS3 has some awesome techniques, let have do some form using transition property.

Have a look

Mouse hover on Recile Bin

Another example in table format mouse hover on last bin icon to see the cool animated effect

Language Name	How to say hello	Delete
Assamese	নমস্কাৰ (nomoskaar)
Bengali	নমস্কার (nômoshkar)
Gujarati	નમસ્તે (namaste)
Hindi	नमस्ते (namaste) नमस्कार (namaskār)
Kannada	ನಮಸ್ತೆ (namaste)
Malayalam	നമസ്തെ (namaste)
Oriya	ନମସ୍କର (namascara)
Punjabi	ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ। / ست سِری اَکال (sat srī akāl)
Tamil	வணக்கம் (vaṇakkam)

How it works:

Basically there are 3 div tag, A parent div tag will hold 2 child div.

1. Parent div for trash holder
2. Can div
3. Lid div

See the below to check with with border style, you can get more idea by this

So lets create CSS3 to get the animated recile bin icon.
See the Below Code :

<div class="trash" title="Remove"><span class="lid"></span><span class="can"></span></div>

You can see that there is a div tag with "trash", and two child div tag one with has "lid" class and second has "can" class
Now apply below CSS3 code to make it animated

.trash{transition:opacity 200ms;width:128px;height:128px;opacity:0.8;position:relative;right:0;top:3px;vertical-align:middle;cursor:pointer;margin:50px auto 10px}  
 .trash > .lid{transform-origin:19% 100%;transition:transform 150ms;height:28px;width:128px;-webkit-transform-origin:-7% 100%}  
 .trash > .can{background-position:0 -30px!important;width:128px;height:97px;margin:30px 0 0;padding:0!important}  
 .trash > .can,.trash > .lid{background:url(img/RecycleBin.png) 0 0 no-repeat;position:absolute;right:8px;top:2px;-webkit-transform:rotate(0deg);-webkit-transition:-webkit-transform 250ms}  
 .trash > .can:hover{border:none!important;box-shadow:none!important}  
 .trash > span{display:inline-block}  
 .trash:focus > .lid,.trash:hover > .lid{transform:rotate(-45deg);transition:transform 250ms;-webkit-transform:rotate(-45deg);-webkit-transition:-webkit-transform 250ms}  

I have tested with Chrome, Firefox, Internet Explorer 11

Click here to download source file from GitHub.

enjoy!
saAction

Read More

IIS Performance Improvement using IIS Add-On

We always care about performance in our application development, specially for web applications.
.Net Framework 4.5 has many features available for it, But as Web Server we always dependable on IIS.

Internet Information Services is an extensible web server for all .Net web application. So its handling all web sites and web services in Hosting Server.

IIS.net is Official Microsoft IIS Site, There are many downloads available to apply add-on functionalities for IIS in IIS Community Contributed Downloads

Download categories are deploy-and-migrate, develop, handle-requests, improve-performance, Manage, Secure, etc

I like to introduce Improve Performance, its a very unique add-ons available to IIS, here is some list which have experience:

1) Google Page Speed optimization for Microsoft IIS 7 and up
Speed up your website and drive conversions by automatically apply best practices, without affecting your workflow. Use more then 40 filters to optimize your html and resources, including mobile specific optimizations. Now also includes "In Place Resource Optimization" - a new optimization mode designed for shared hosters and forward proxy setups. IISpeed has a free mode which inserts a small banner at the bottom of optimized webpages, which can be removed by buying a license. Powered by Google PageSpeed. Works with any content, including static content, ASP.NET, PHP, ColdFusion, and Application Request Routing.

2) Aptimize Website Accelerator
The world’s biggest companies trust Aptimize to accelerate their websites and intranets. Aptimize Website Accelerator is an ISAPI filter for Microsoft IIS that automates performance tuning by dynamically optimizing web pages for high performance at runtime – just before a page is sent from web server to browser. Aptimize helps you reduce page load times by up to 75%.

3) httpZip HTTP Compression for IIS
HTTP compression accelerates page loads, speeds up web apps, and reduces bandwidth costs dramatically. HttpZip transparently compresses webpages to reduce file sizes to as little as 2% of their original size (that's 98% smaller!). Safe defaults make httpZip an excellent choice for hosting providers or any site/app with complex code. With MIME type, file, and directory exclusions, browser compatibility checking delivers granular control over safe file compression.

4) IIS Traffic Monitor
While trying to work out which users on a server were consuming the most resources, I realised there was no easy way to see how much bandwidth an IIS website has used for a given period in time. A quick search showed plenty of commercial products that could be installed as filters to keep track of this kind of thing, but there didn't appear to be anything quick, simple and importantly, free. So I found some source code that uses Microsoft Log Parser (also free) to interrogate the log files for each site, and come up with a number to show how much traffic has gone through a website. I packaged it up into a nice little application and that's what you see here.

5) Web Performance Monitor
Web Performance Monitor is an easy to use web-based performance monitoring application. It allows you to monitor performance counters from your local or remote computer, in real time. It supports all major browsers, supports running over SSL and uses Ajax for smooth updates.

All above tools are not developed by Microsoft, so it is recommended to take backup before any installation. also read documentation to get guidance.

To download can directly install on IIS Server, but it is also available from Web Platform Installer.

Read More

Create Google Plus "Share what's new..." GUI using jQuery

I am sure you have seen many social networking websites, where user can post there comments, I got an opportunity to create Google+ "Share a comment" GUI using jQuery and CSS

So Lets do it.

 

Google+ GUI to post a comment, image, link, video or event.

I have study that HTML code, CSS and effect from Google+ and here is the output as below:

As you can see, its almost pretty same as Google+, cool

Click here to download GitHub.

https://github.com/saaction/GooglePlus-comment-GUI-using-jQuery.git

Read More