Useful Online Tools for Web Designers and Developers - Part 2

Color Scheme Designer

Color Scheme Designer is an easy to use and efficient tool that can help you choose color schemes for your designs.

Kuler

Similar to Color Scheme Designer, Adobe Kuler is an internet application from Adobe that lets you create and save various color schemes.

Typetester

Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make your life (as a web designer) easier when dealing with web fonts.

Pixlr

Pixlr is a free online photo editor. If you just need something to edit, adjust or filter your images, then Pixlr is the tool you’re searching for.

Browsershots

Browsershots is an online web application that provides developers a convenient way to test their website’s browser compatibility in one place. It can help you to make screenshots of your web design in different operating systems and browsers

Pingdom

Pingdom offers an online tool that can help you test the load time of a web page. Just enter a URL and test the load time of all elements on that page.

Iconfinder

This isn’t really a tool, but Iconfinder is a must-have. Just consider it as your number one “search tool” for free icons.

Code beautifier

As its name says, Code beautifier is a CSS formatter and optimiser tool.

CSS3 Please

Need an online place where you can test your CSS3 skills? Then here’s your playground!

Useful Online Tools for Web Designers and Developers - Part 1

Free Online 3D CSS Button Generator

Loading CSS spinners and bars generator for AJAX & JQuery

0 to 255

0to255 is a simple tool that helps web designers find variations of any color.

Spritebox

Spritebox is a WYSIWYG tool to help web designers quickly and easily create CSS classes and IDs from a single sprite image. It is based on the principle of using the background-position property to align areas of a sprite image into block elements of a web page. It was made using a combination of JQuery, CSS3 and HTML5, and is totally free to use!

JsFiddle

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc!

Frame Box

Frame Box is an easy to use online tool for creating and sharing wireframes

CSS3 Generator

CSS3 Generator is a simple tool that creates some cross-browser CSS3 code based on whatever values you want.

ProCSSor

ProCSSor is a powerful (and wholly free) CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Super Conversion Button

This little tool let’s you easily create a beautiful, effective call-to-action button in seconds

wordmark.it

Wordmark.it is a tool that lets you quickly preview how a wordmark looks with the fonts installed on your computer before setting out to find new ones.

Faster and Efficient Development with Visual Studio 2010 Extension Manager

In the last few years, Visual studio has been evolved much. VS 2010 has been shipped with pretty good features. Most of them are useful for developers to increase their programming efficiency, build better solutions on web space.
In this Blog post, I’ll show you how to extend the Development environment with Visual Studio 2010 Extension Manager and Stack of Tools that helps you for Coding, Best practices, Advanced Intellisense, Optimization, API reference and Deployment on web space.

Installing and Managing Visual Studio Tools and Extensions

The Visual Studio 2010 Extension Manager lets you install a range of tools and extensions for Visual Studio. To open Extension Manager, on the Tools menu, click Extension Manager as show in following figure

You can also download extensions from Web sites, or get them from other developers.
The Extension Manager window is divided into three panes. The left pane lets you select by group: installed extensions, new extensions from the online gallery, or updates to installed extensions.
The extensions in the selected group are displayed in the middle pane. You can use various filters to sort the list

Online Gallery

Extension Manager can install extensions from the Visual Studio Gallery on the MSDN website. These extensions may be packages, templates, or other components that add functionality to Visual Studio.

Extension Types

Extension Manager supports extensions in the VSIX package format, which may include project templates, item templates, toolbox items, Managed Extension Framework (MEF) components, and VSPackages. Extension Manager can also load and install MSI-based extensions, but it cannot enable or disable them. Visual Studio Gallery contains both VSIX and MSI extensions.

Dependency Handling

If a user tries to install an extension that has dependencies, the installer verifies that those dependencies are already installed. If they are not installed, Extension Manager shows the user a list of dependencies that must be installed before the extension can be installed

Visual Studio Tools and Extensions

NuGet Package Manager (Free)

This is a collection of tools to automate the process of downloading, installing, upgrading, configuring, and removing packages from a VS Project. You can download and install it via the Extension Manager (search for NuGet Package Manager to find it) as shown in following figure

Indent Guides (Free)

Adds vertical lines at each indent level. Displays indent guides in Visual Studio text editor windows.

Guides can be displayed at the indent specified in your settings, regardless of tabs or spaces, or wherever text has been indented to as shown in following figure

There are three styles of guides: solid, dotted and dashed, available in thin and thick varieties and customizable color. The default is dotted teal, as shown in the image. Each indent level can have a different style and color.

The deepest guide that includes the block with the caret is displayed in a different color or a glow, to help you find the start and end of your code. Guides can be shown and customized for any language in Visual Studio. It reads the spaces, not the code.

PowerCommands for Visual Studio 2010 (Free)

PowerCommands 10.0 is a set of useful extensions for the Visual Studio 2010 adding additional functionality to various areas of the IDE

Web Standards (Free)

Web Standards Update provides the much wanted HTML5 & CSS3 support to Visual Studio 2010 SP1. It brings VS 2010 intellisense & validation as close to W3C specification as we could get via means of an extension. The most notable supported features by this extension are:.

HTML5 – Video, Audio, Input Type, Drag & Drop, WAI-ARIA, Microdata, Schema.org
Browser API – GeoLocation & Local Storage
CSS3 – 2D Transforms, 3D Transforms, Animations, Background & Borders, Basic Box Model, Basic UI, Behavior, Color, Flexible Box Layout, Fonts, Paged Media, Hyperlink Presentation, Line, Lists, Marquee, Media Queries, Multi Column, Namespaces, Presentation Levels, Ruby, Selectors, Speech, Syntax, Template Layout, Text & Transitions. It also supports vendor specific prefixes like –ms, -webkit & -moz.

CodeMaid (Free)

CodeMaid is an open source Visual Studio extension to cleanup, dig through and simplify our C#, C++, XAML, XML, ASP, HTML, CSS and JavaScript coding

Image Optimizer(Free)

A Visual Studio extension that optimizes PNG, GIF and JPG file sizes without quality loss. It uses SmushIt and PunyPNG for the optimization

Adds a right-click menu to any folder and image in Solution Explorer that let's you automatically optimize all PNG, GIF and JPEG files in that folder. The optimization doesn't effect the quality of the images, but optimizes them using industry proven algorithms for removing EXIF and other metadata. The extension uses SmushIt and PunyPNG for optimizing the images

GhostDoc (Free)

GhostDoc is a Visual Studio extension that automatically generates XML documentation comments for methods and properties based on their type, parameters, name, and other contextual information

CSSCop (Free)

CSSCop helps you write better and more browser compatible stylesheets. It uses the CSS Lint (csslint.net) rules engine and is completely customizable

CSS Is Less (Free)

Make .less files load with the CSS language service.

Google Like Buttons - A simple CSS

I’m not a CSS guru, but recently I stared playing on this stuff. Just for a snooping, I created Google like small buttons with Icons. 

You can download the necessary 24X24 .png images from Small Gray Images

And add the following styles into you CSS. I’m using this style for Button and Anchor tags. You can customize it based on your UI requirement

btn  { float: left; padding-bottom: 5px; clear: both; }
input[type="submit"].btn, a.btn { color: #6e6e6e; font: normal 11px Helvetica, Arial, sans-serif; text-decoration: none; padding: 5px 12px; position: relative; display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); border: solid 1px #dcdcdc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-right: 10px; }
input[type="submit"].edit, a.edit { background: url(Images/edit.png) no-repeat #f3f3f3; padding-left: 30px; }
input[type="submit"].trash, a.trash { background: url(Images/delete.png) no-repeat #f3f3f3; padding-left: 30px; }
input[type="submit"].publish, a.publish { background: url(Images/publish.png) no-repeat #f3f3f3; padding-left: 30px; }
input[type="submit"].details, a.details { background: url(Images/details.png) no-repeat #f3f3f3; padding-left: 30px; }

We can make Bigger images just by adding Font-size and Padding attributes as follows

input[type="submit"].edit-big, a.edit-big { background: url(themes/Images/edit.png) no-repeat #f3f3f3; font-size: 16px; padding: 10px 15px 10px 35px; }

For your Buttons / Anchors add the class attribute as follows

<input type="submit" value="Edit" class="btn edit"/>

<a class="btn edit" href="#">Edit</a>

Finally your Buttons / Anchors looks like as follows:

Adding Facebook like button as Custom toolbar button in TinyMCE editor

To add a Facebook Like button to the TinyMCE editor, we need to use the setup callback function that enables us to add events to the editor instances before they get rendered.

Set 1: Add a Callback function in your TinyMCE init function

Add a callback function to your TinyMCE init function as follows. Make sure that all of your other configurations are taken care by separating each attribute values with comma (,)

tinyMCE.init({
   ...
   setup : function(ed) {
        ed.addButton('facebook', {
            title : 'Facebook Like',
            image : '[Your path for image]/facebook.png',
            onclick : function() {
                ed.focus();
                ed.selection.setContent('<fb:like send="false" width="450"  show_faces="true"></fb:like>');
            }
        });
    }
});

And add this new button to tool bar as follows:

theme_advanced_buttons4: “facebook"

By Default TinyMCE will strip all invalid tags from editor, to add the Facebook tags as valid tags in TinyMCE add the following line..

valid_elements: "fb:like[send|width|show_faces]"

The valid_elements option defines which elements will remain in the edited text when the editor saves
So, finally your TinyMCE init function looks like as follows

tinyMCE.init({
   ...
    valid_elements: "fb:like[send|width|show_faces]",
   setup : function(ed) {
        ed.addButton('facebook', {
            title : 'Facebook Like',
            image : '[Your path for image]/facebook.png',
            onclick : function() {
                ed.focus();
                ed.selection.setContent('<fb:like send="false" width="450"  show_faces="true"></fb:like>');
            }
        });
    },
     theme_advanced_buttons4: “facebook"
});

Step 2: Include the following JavaScript SDK of Facebook on your default Layout / Master page

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

That’s it; you’ll get a custom toolbar button in your TinyMCE editor!

CSS: Importance of Optimization

A coherent way to make your website faster is to make the client code you send to the browser smaller. When looking to optimize your CSS files, one of the most influential measures you can employ is to use each declaration just one time.

Using every declaration just once means making strict use of selector grouping.

For example, you can combine these rules:

h3 {color: #cdcdef ;}
p {color: #cdcdef ;}

into a single rule:

h3, p {color: #cdcdef;}

While this simple example appears obvious, things are getting more interesting and harder to compute when talking about complex style sheets. In our experience, using each declaration just one time can reduce the CSS file size by 20-40% on average.

Let's have a look at another example:

h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }

 

Applying the "any declaration just once" rule here results in:

h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }

 

Note that the !important declaration makes a difference.

There are some things to keep in mind when applying this method:

• First, very long selectors can render this method useless. Repeating selectors like html body table tbody tr td p span.example in order to have unique declarations doesn't save much file size. In fact, since "using each declaration just one time" might mean a higher number of selectors, this could even result in a bigger style sheet. Using more compact selectors would help, and would enhance the readability of your stylesheet.
• Second, be aware of CSS regulations. When a user agent can't parse the selector, it must ignore the declaration block as well. If you run into trouble with this, just bend the " each declaration just one time " rule – and use it more than once.

Third and most importantly, keep the cascade in mind. No matter if you're sorting your style sheets in a convinced way or are very tranquil about the order in which rules appear in your style sheets, using each declaration just one time will make you change the order of the rules in one way or another. This order, however, can be decisive for a browser to decide which rule to apply. The easiest solution if you're running into any issues with this is to make an exception as well and use the declaration in question more than once

Placing and Debugging of Script with Older version of IE

Placing the JavaScript Block

This is not really an advanced topic, but it helps the guys who recently jumped in Web development Bus!

Usually the content in HTML document is processed in linear approach in the order in which it appears, from top to bottom. If you have any script block that uses immediate JavaScript code [the raw script statements which are not wrapped in a function) is executes as soon as it is processed. So, to avoid such problems you must place script blocks after any elements that it manipulates.

However if your script blocks wrapped inside function/uses functions that are called later in the page life cycle (e.g. event handling functions that are triggered in response to a client-side event) cool guys! You don’t need to worry. In this situation, the browser will process the entire page before your functions are triggered. As a result, you can place your script block anywhere in the HTML document! It’s your area, your rule! But, according to me <head > section is the popular choice.

I know developers are like Heroes, But please stop behaving like James Bond!!

Placing JavaScript in a separate file or even embedding it in an assembly doesn’t prevent users retrieving it and examining it (my Friend Sowmya always do it, whenever she found an interesting JavaScript, she’ll save it directly and starts modifying it. Just kidding! But it’s a fact) and even modifying their local copy of the webpage to use a tampered version of the script file. Therefore, you should never include any secrete algorithms or sensitive information in your JavaScript code. You should also make sure you repeat any JavaScript validation steps on the server because the user can circumvent client-side code

Debugging JavaScript

Visual Studio has an integrated JavaScript debugging. If you are using IE 8, you don’t need to take any steps to switch on client-side debugging. Visual studio sets it up automatically, regardless of your Internet Explorer settings

Oops! What about older version of IE?

With versions of IE 8, you need to explicitly enable script debugging. To do so follow these steps

1. Choose Tools > Internet Options from the menu in IE
2. In the Internet Options dialog box, choose the advanced tab
3. In the list of settings, under the Browsing group, remove the check mark next to Disable Script Debugging (IE). You can also remove the check mark next to Disable Script Debugging (Other) to allow debugging for IE windows hosted in other applications
4. Click Ok to apply your changes

When script debugging is switched on, you’ll be prompted to debug web pages with script errors, even on websites that you don’t control, even on Google too! (But I’m dam sure; they don’t have any script errors)