HTML editor enhancement in visual studio 2012

In this post I am going to explain about HTML Editor Enhancement in visual studio 2012. I have been writing few post about Visual studio 2012 new features and this post will also be part of that. You can read whole series at following link.

Visual Studio 2012 feature series

Tag highlighting in Visual Studio 2012:

In visual studio 2012 You can highlight the start and end tag of a particular HTML element. One you click on starting tag of HTML element it will have other part highlighted just like following.

HTMLTagHighLightVisualStudio2012

jQuery- JavaScript Library Write less do more

This is introductory post jQuery an open source JavaScript library. I know what you guys thinking and I also know that jQuery does not required introduction. It is so much popular and most of web developers whether they are developing using asp.net,php,Jsp or any language on web they are using jQuery but this post is for who is not aware of it and or they are new to the web based programming.

We all are using JavaScript for client side scripting language almost 95% percentage of web application uses JavaScript as client script. We do lots of things with JavaScript right from the alerts to validation of controls to animation and now days we calling web services from JavaScript and fetching server side data also and rendering them into browser. If you are using JavaScript then you are following some patterns like selecting a element on and then perform some operation on that element on client side like do validation of controls or changing the style sheet of that element or animating them etc. jQuery help you doing this in rather simpler way so you can save lots of time doing other things instead of writing long complex JavaScript.

Why jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. jQuery provides lots of functionality like animating elements,Ajax interaction with server sides web service, changing CSS of a Elements etc and you can complete those task in minimum line of the code. For example let’s see the code which are given Homepage of jQuery website.

$("p.neat").addClass("ohmy").show("slow");
Above code kind enough to animate a particular Div in Animating way. If you write this kind of code in normal JavaScript then it will take much time and dozens of line of code. Here you can do simply that in one line of code. So, I would highly recommend every web developers to use jQuery instead of regular JavaScript.

Use Full Links For jQuery

If you want to learn jQuery then following are links which can be useful to you.

http://docs.jquery.com/How_jQuery_Works- For How jQuery Works

http://jquery.org/history- For History of jQuery

http://docs.jquery.com/Main_Page- jQuery documentation

Hope this will help you!!! Happy programming..

Technorati Tags: ,
Shout it
kick it on DotNetKicks.com

How to remove white spaces between tags and lines of html render by asp.net page

When asp.net page loaded in to browser there are lots of white spaces between tags and in tags that will increase your html kb. For example if your page around 300 kb then it will take 3 second to load on 100 kbps internet connection and in dial up connection it will still take time. So if you want to load your site fast on dial up internet connection then you need to decrease html kb as much you can and removing white spaces from the html will be good idea for that.

Following is the code for the page on which you want to remove white spaces from the html. It will decrease your html kb by 30 percentage.

private static readonly Regex REGEX_FOR_TAGS = new Regex(@">s+<", RegexOptions.Compiled);

private static readonly Regex REGEX_FOR_BREAKS = new Regex(@">[\s]*<",
RegexOptions.Compiled);
protected override void Render(HtmlTextWriter writer)
{
  using (HtmlTextWriter writer = new HtmlTextWriter(new System.IO.StringWriter()))
  {
        base.Render(writer);
        string htmlkb = writer.InnerWriter.ToString();
        htmlkb = REGEX_FOR_TAGS.Replace(htmlkb, "> <");
        htmlkb= REGEX_FOR_BREAKS .Replace(htmlkb, "><");
        writer.Write(html.Trim());
   }
}

Here in the above code there are two regular expression one for white space in tag and another for whitespace between tag and by just overriding the render event of event you can replace the whitespace.

Happy Coding...

Technorati Tags: ,,,

Photoshop and CSS Tutorials.

I am creating a web template for my forthcoming question answer asp.net mvc site. I need a web 2.0 rich template for my site for that i have search on web and found some great photoshop and css links. Here is collection for that.

Photoshop link:

  1. First is the my link who created design for my blog. http://psdvibe.com/- Its a great resource to learn Photoshop and create professional template. Thanks you for giving me the best template free of charge.
  2. http://www.webdesignbooth.com/32-useful-portable-apps-for-web-designers-and-developers/
  3. http://hv-designs.co.uk- A Great Resource for Photoshop design
  4. http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  5. http://pelfusion.com/
  6. http://bestdesignoptions.com/
  7. http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
  8. http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-illustrative-web-design-from-scratch/
  9. http://speckyboy.com/2009/07/06/40-free-and-essential-web-design-and-development-books-from-google/
  10. http://webdesignledger.com
  11. http://sixrevisions.com/
  12. http://photoshoptutorials.ws/
  13. http://www.tutorialized.com/tutorials/Photoshop/1
  14. http://www.absolutecross.com/tutorials/photoshop/
  15. http://www.photoshopsupport.com/tutorials.html

CSS Link:

  1. http://www.freecsstemplates.org/ One of the greatest tutorial i have seen for free.
  2. http://www.free-css-templates.com/
  3. http://www.free-css.com/
  4. http://www.csstemplatesforfree.com/
  5. http://www.westciv.com/style_master/house/
  6. http://www.w3.org/Style/CSS/learning
  7. http://www.jasonbartholme.com/101-css-resources-to-add-to-your-toolbelt-of-awesomeness/
  8. http://speckyboy.com
  9. http://designreviver.com
  10. http://thecssblog.com/tips-and-tricks/image-slicing-and-css-being-smart-with-file-formats/
  11. http://line25.com/articles/15-must-read-articles-for-css-beginners
  12. http://www.smashingmagazine.com/2009/06/25/35-css-lifesavers-for-efficient-web-design/
  13. http://designreviver.com/tips/13-training-principles-of-css-everyone-should-know/
  14. http://arbent.net/blog/40-outstanding-css-techniques-and-tutorials

Happy designing…