ITmeze - IT world server like cyprus meze

Browser and self closed script tag...

Itmeze

I keep on doing that thing for every new project. i simply make script tag self closing, like on the example below:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
Browsers may behave in really strange way - just for Your curiosity - try to run it common browsers. It looks like Chrome is less immune to this than IE and Firefox. And it comes with explanation:
XML self-closing tag syntax used on <script>. The tag will be closed by WebKit, but not all browsers do this. Change to <script></script> instead for best cross-browser compatibility.
So - for Your own safety, do not use self closing on script tag. Thus anyone of You know why not all major browsers just ignore this? I know that it is 'my' bug cause according to html specification i shouldn't selft close it. But we are all humans, making mistakes is in our nature...

Tags: [chrome] [firefox] [script] [web development]

Google Chrome has finally become my first browser!

Itmeze

Chrome... It has taken some time. I have tried to follow all the changes made since the first version. I have decided to give it a try from time to time. Each time new major version was released I promised my self to spend at least few days with Chrome as my default browser. Till version 3.0 or 4.0 Chrome was far far behind Firefox - lack of extensions made web browsing a little bit annoying. After that, when I was finally able to use gmail/wether/translate extensions i was using it more and more often. But still,each time I had to made some web development I was going back to firefox with it's unbeatable (till recent) add-on: firebug. Since latest stable Chrome (6.0) i use it even for web development. I have found firebug making my ajax request unstable, and all the embedded developer tools work like charm. There are still few (but just a few) things that i miss from firebug but in overall i am perfectly happy with all Chrome offers and how it saves CPU and memory (comparing to Firefox).

Tags: [browser] [chrome] [firefox] [web development]

Client side validation after Ajax Partial View result in ASP.NET MVC 3

Itmeze

Now, as ASP.NET MVC 3 beta was finally released I have decided to give it a try. The most exciting thing that I have noticed is implementation of an idea of so called Unobtrusive JavaScript. This is for both Ajax helpers and Client Validation. And I have to admit that I just love it. I wll just copy and paste text from scottgu blog:
Unobtrusive JavaScript and HTML 5: The AJAX and Validation helpers in ASP.NET MVC now both use an unobtrusive JavaScript approach by default. Unobtrusive JavaScript avoid injecting inline JavaScript into HTML, and instead enables cleaner separation of behavior using the new HTML 5 data- convention (which conveniently works on older browsers as well). This makes your HTML smaller and cleaner, and makes it easier to optionally swap out or customize JS libraries.  The Validation helpers in ASP.NET MVC 3 also now use the jQueryValidate plugin by default.
Basically we get all the validation done by loading js function parsing loaded DOM searching for specific parameters based on which validation rules are applied to elements. And all of that without a single js line from 'our' - web developers side. One thing is not obvious though and it certainly needs extra explanation: what happens after part of the page is loaded via Ajax request (common Partial View result). Validation is not turned for those elements although all attributes are correctly marked. I have dig a little and found within JavaScript file 'jquery.validate.unobtrusive.js' function: jQuery.validator.unobtrusive.parse(selector). Calling function after new content is loaded solves problem, like in the example below:

$.post("test/updateCustomer", { name: "Mark", surname: "Barker" },
  function(htmlContent){
    $('#container').html(htmlContent);
    jQuery.validator.unobtrusive.parse('#content')
  }
);

Hope it helps someone...

Tags: [asp.net-mvc] [client side validation] [jquery] [unobtrusive javascript] [web development]

Getting ugly with BeginActionLink helper!

Itmeze

Have You ever had such a moment when the most stupid and trivial solution turns out to be the ONLY ONE that is logically suitable at the moment? When I had such a feeling today.... I am working on a module for one of huge web portals (not to mention which one). Part of that module is only accessible to users with administration permissions - as typical as it can be. The reason why I am mentioning that is to highlight the fact that at this specific part performance does not matter so much. Anyway, my talk to one of designers (Friday, half an hour before 'the beginning of the weekend'): Designer: I am going to spend whole weekend on those Views... Me: Yeah... S*** happens.... Designer: Those 'Html.ActionLink' that You use everywhere, how do I put something inside, you know, images, spans, staff like that... Me: Argh... Hm..... I suddenly realize that before I leave the office this guy needs an extension method: BeginActionLink like right now!. The similar one that is used for Forms elements (BeginForm). Then I started to code... Have You ever realized that ActionLink has roughly 12 overloads!!!! That would take hours to prepare BeginActionLink for most of them. idea bulb When You are blocked, what You do? Me too, I started 'googling'. Nothing simple and smart enough. Except 200 lines of code with tons of overloads... argh... But then, completely unexpectedly .... My moment of genius! Don't laugh! For people over ... some age ... that things do not happen offen! :) There are solutions that developers are ashamed of, but they simply do their job:
public static string TrimEndTag(this MvcHtmlString htmlString, string tagName = "a")
        {
            var endTag = new TagBuilder(tagName).ToString(TagRenderMode.EndTag); 

            var tagString = htmlString.ToString();

            var endTagIndex = tagString.LastIndexOf(endTag);

            if(endTagIndex > 0)
                tagString = tagString.Remove(endTagIndex).TrimEnd();

            return tagString;
        }

        public static string ToEndTag(this HtmlHelper html, string tagName)
        {
            return new TagBuilder(tagName).ToString(TagRenderMode.EndTag);
        }
I am simply removing end tag from ActionLink returned string! As simple as that! So all that is left for my buddy to do is to use it like that:
<%= Html.ActionLink(" ", "testAction", "testController", new { id = 4 }, new {}).TrimEndTag() %>

        images, spans, text, whatever...

    <%= Html.ToEndTag("a") %>
Wuala! Ugly, So ugly, but at the same time I am preserving original methods for ActionLinks and I couldn't figure out better solution....

Tags: [actionlink] [asp.net-mvc] [htmlhelpers] [web] [web development]

A hint for Entity Framework multi-join performance problem

Itmeze

How I have started my adventure with Entity framework Some of you may refer to one of my previous entries, when I was discussing tool I would use for my new web project. Look for (2. Database and ORM). I made a "brave" decision to choose Entity framework as my Object Relational Mapping tool. Well, I must say, i slightly regret this. To be honest, I would consider choosing other tools - or at least wait a little until more mature version of EF arrive (looking forward to play with it in .NET 4.0). Why I don't like it anymore There are few things that annoys me with that. Tools that enable to quickly generate model objects from database schema (ADO.NET Entity Data Model Designer) is sort of an "error prone". Each time i make modifications to db, and try to update model - it fails. And each time it is for a different reason. I completely stopped using it. And how i almost ended up using it But there are far serious problems. Or maybe ,better say, issues. One of them - one that really makes me feel scary was t-sql code generated by entity framework. In so many cases not really efficient one. But really strange when it comes to multiple joins. Have you ever looked at those gigantic "select" statement when you try to "Include" multiple entity collections to the result. I deliberately choose to name it "an issue", cause i understand that is not an error. Moreover such queries cause some serious performance problems. In my project, I ended up with following code:
var product = _productRepository.GetProductSet()
    .Include("Tags")
    .Include("Attachments")
    .Include("MarkAsDuplicatedBy")
    .Include("MarkAsDuplicatedBy.UserDetails")
    .Include(";FavouriteMarks")
    .Include("FavouriteMarks.User")
    .Include("FavoutiteMarks.User.UserDetails")
    .Include(";Orders")
    .Include("Orders.OrderDetails")
    .Include("Orders.User")
    .Include("Orders.Comments")
    .Include("Orders.Comments.User")
    .Include("Comments")
    .Include("Comments.User")
    .Include("Comments.User.UserDetails")
    .FirstOrDefault(p => p.ProductId == productId);
It is pretty straightforward. You have a product, products have a list of orders. Users can leave comments for each product, order or mark one as their favourite. Moreover, each product can be marked as a duplicate - notifying that there is another exactly the same product in in the store. Easy? Easy. And Now it is lesson I recently learned. Such query is a KILLER! Believe me or not, it produces query of 3500 lines, where word "join" occurs 713 times. Unbelievable! It takes 4 seconds for this query to execute on my machine. Now, playing with it a little I have managed to optimize it a lot. Don't know if i am such a genius or my first approach was so bad... Rather second option, anyway... First thing we may do is to reduce this code by separating "MarkAsDuplicate" property. That is something that will be used pretty rarely (le us hope so) so we can move it outside main query.
    if(product.MarkAsDuplicatedByReference.EntityKey != null){
        var user = product.MarkAsDuplicatedByReference
                                                .CreateSourceQuery()
                                                .Include("UserDetails").FirstOrDefault();
        product.MarkAsDuplicatedBy = user;
}
We first check if there is an assigned entity key for navigation property. Thanks to that we load more information only under condition there is a reason for that. Such a object is furhere assigned to Secondly we may separate favourite marks, orders and comments.

var favs = product.FavouriteMarks.CreateSourceQuery()
                                      .Include("User")
                                      .Include("User.UserDetails")
                                      .ToList();

foreach (var fav in favs){
    product.FavouriteMarks.Attach(fav);
}

var orders = product.Orders.CreateSourceQuery()
                                      .Include("OrderDetails")
                                      .Include("User")
                                      .Include("Comments")
                                      .Include("Comments.User")

foreach (var order in orders){
    product.Orders.Attach(order);
}
And similarly with comments.... Although such an approach produces four db calls instead of one (like previously) achieved performance improvement is significant. In my case I have managed to drop it from 4 seconds to 1 second. Look at the table below to compare performance:
No of sql statements No of JOINs Time[sec]
Before splitting 1 713 4
After splitting 4 360 0.8
As you can see, number of joins was reduced twice and now our query is 5 times faster. Another problem that arrives with such an approach is that it makes writing unit tests slightly harder. both Include and CreateSourceQuery methods are specific to Entity Framework. One way to overcome this is to prepare extension methods that would work differently depending on the context. Similar to example below:

public static class RepositoryExtensions {

        public static IQueryable<TEntity> LoadWith(this IQueryable<TEntity> obj, string path) {
             var query = obj as ObjectQuery<TEntity>;
             if (query != null)
                 return query.Include(path);
            return obj;
        }

        public static IQueryable<TEntity> CreateQuery(this EntityCollection<TEntity> entityCollection) where TEntity : EntityObject {
             var query = entityCollection.CreateSourceQuery();
             if (query == null)
                 return entityCollection.AsQueryable();
             return entityCollection.CreateSourceQuery();
        }
}

All that is left is to replace all calls to Include with LoadWith, and all calls to CreateSourceQuery with CreateQuery. Basic aim for those extension methods is to enable them to behave differently in case when we deal with ObjectQuery in entity framework environment, and differently when we have just a plain objects. Summary I hope some of You - especially those that are new to Entity Framework, like I am - will find this hint helpful. I have shown that sometimes, especially when we try to load entity with plenty of relations we made end up in a sql hell. In such a case it can be useful to split single query into few smaller. Despite the fact that we loose some performance due to those additional calls we end up with much higher gain. I have also demonstrated how further on such code may be improved for better unit testing. Thanks and happy coding

Tags: [web development]

Something is just wrong with this CAPTCHA!

Itmeze

Everyone knows what CAPTCHA is. This few weird letters/word that you write down to prove that you are a human. There are ton's of them all around. Here and there. Often people (or developers) overuse them on web sites, which can be really annoying. I was trying to register on one of the web sites today. After filling 16 (literally: sixteen) required fields on some really strange wizard I finally come up to form submission. This is what i saw: weird catcha Yeah, pretty straightforward. I thought. After filling input with PHN i saw JavaScript alert: 'Invalid captcha!. Please try again'. I tried. And again the same. I was just about to abandon whole the process, but it all looked so strange i decided to  check what is going on in firebug. And then i figured out that actually valid input would be: 'green'. WHAT? Then I have read carefully what was written below the image: 'If You are happy please type the color of the second character'. Argh! Wasn't that obvious? WEB DEVELOPERS! PLEASE, DON'T MAKE OUR LIFE DIFFICULT! DON'T LET US THINK! What a stupid idea to make so common thing other way around! Or maybe it is okay, and this was my fault/foolishness not to read what was written? What You think? Do You know any other weird CAPTCHA?

Tags: [captcha] [web] [web development]

Short history of Facebook

Itmeze

If You haven't seen or did not follow how world most popular social network changed over lat couple of years just take a break and spend next 4 minutes watching movie below. And wow, just look at those numbers! RESPECT to Mark Zuckerberg! After that I feel like an ant in today's world. I also recommend visiting web site: CheckFacebook. Where you can get some up to date stats about popularity and growth of Facebook user's all over the world. Here is a simple screen shoot: checkfacebook user's in cyprus It looks like it is pretty popular in Cyprus as well  - third of population....

Tags: [checkfacebook] [facebook] [internet startup] [web] [web development]

VS2010 Beta 2 is out! For MS employees :/

Itmeze

I have just read that It looks like Microsoft employees are already playing with beta 2 of Visual Studio 2010. Nice, very nice. We want it too! Especially that it sucks to use beta 1 on old machine! And because You promised to fix some performance issues in next beta I desperately need that. Like now! Read here blog entry from Misfit Geek. Hope to download this version soon...

Tags: [beta] [visual studio] [web development]

Making internet start-up… Advices from Kevin Rose... and me

Itmeze

Have You ever heard about Kevin Rose? No? He is known for his internet start-ups, like: Revision3 - internet television network, micro-blogging platform Pownce, and probably most known - social bookmarking Digg. Some of you might recognize wefollow.com project, especially If You are heavy twitter users. I have just watched his excellent presentation at FOWA (The Future of Web Apps London) - found on the Carsonified's Blog. He shares some ideas how to "take your site from one to one million users".  Some of You will definitely find this useful. Taking your Site from One to One Million Users by Kevin Rose from Carsonified on Vimeo. What Do You think? To be honest - I really, really liked it. Maybe It wasn't something fresh, something that we were not aware of, but something that allows web start-up creators to take another look at things they currently do or plan to do in the nearest future. And by the way, Kevin Rose is a good speaker and was able to present his ideas clearly, with some well chosen examples. Let me comment on few of his thoughts. 1. Ego (Give a reward for user's contributing to my system) This is mainly concern for all of You thinking about web 2.0 start-up - web site that will gather community. Idea is pretty simple - give a reward for what people are doing, how they contribute to system. Just look at the Facebook - how people are proud how many friends they have. Or Twitter - how users (or celebrities) compete to have more and more followers. To be honest - I am glad to have spam users following me - it doesn't matter as long as my counter increases :) Or take a look at StackOverflow - programmers care so much about their reputations and badges in the system. One of Kevin's new projects (wefollow.com) is just a twitter's leader board, no more... Whole project just about that. It was mentioned at the very end of the presentation (during "questions" time) that user's should not be punished for their improper behavior. I couldn't agree more. Before you punish someone (by banning user or deleting reputation) make sure that he/she fully understands how web site works... Probably punished user means lost user. 2. Simplicity and Analysis Some of top community portals are simple and they focus on their certain functionality. Digg is about Digging links, Twitter about Twitting, Google about Googling :) Everyone knows that. So, stop building new Facebook, it will take ages. Focus on your core features. And remember - if you think building even simple features like twitter or digg have, does not take days or weeks if you really want user friendly experience.
Stop thinking you understand your users. Don't assume that users do what you think they do.
Stop building new features that will take ages to finish, just because you think user's may like it. Don't spend time on features none cares about. Do investigation first. Allow user's to provide feedback at your website, do it yourself or make use of existing projects for collecting user's opinion, like: UserVoice or Get Satisfaction. Analyze your pages - use Google Analytics - it is for free and can bring a huge value to your knowledge about your customers, visitors. Analyze it - check how they show up on your website, what are they doing, when, from where they live (exit pages). 3. Marketing Run your own blog, run your project's blog. Talk to other bloggers about Your project - make them write about your project. Don't use force!  :) Use Google Alerts - it will help you to respond to articles, entries where they mention your start-up.  Show Your project at conferences, make a demo to visualize your ideas.  Just think about the fact that Digg is where it is without a penny spend on keyword campaigns in internet. Ugh... I am not really good at that. That makes me nervous every time i think about it. I like to think about myself as one to get job done. I am developer - marketing is fu! 4. Advisors No matter what You think and how clever you are, there are people smarter than you, more experienced than you - especially if it concerns specialized areas (marketing, recruitment, business model, fund raising). 5. At the end Most (90%) of web projects collapse. Extinct. It's not the case with you. But one smart guy once said that:
The only truly failed project is the one where you didn't learn anything along the way.
Uh... so true...

Tags: [carson] [digg] [internet startup] [kevin rose] [pownce] [startup] [web development] [wefollow]

Making internet start-up… Part 2: Choosing tools

Itmeze

It has been a while since my last entry in this series. In previous one i made decision: what i would like to make and why. To sum up, I want to make something simple, something about travelling, for travellers, something that may follow idea of websites like: Yahoo Answers or StackOverflow. The next step is to choose appropriate tools, that will help me to build start-up.

1. Choosing technology

Choosing the right technology for web development is crucial. What I believe, is that MVC pattern suits web and simply - it just the best for the web. So before choosing technology I need to consider if  there is a way to use MVC pattern with it. Python Django, RubyOnRails, PHP Zend, ASP.NET MVC. Taking look at populurity of them gives: compare frameworks On the graph, generated with Google Trends it is clearly visible that python django and php zend framework are gaining a increasing interest since middle of 2005. Slightly opposite things happen to "Ruby on Rails". ASP.NET MVC is relatively new in the group, but it is constantly gaining more and more interest. Before making decision I need to consider couple more factors. That is going to be a tough decision. Up to now I had very little experience with framworks beside ASP.NET. It so tempting for me to choose Django framework - not only it is so far the most popular framework following MVC patters - which tells something about community, it is nicely documented as well. It has a brilliant administration panel, and build-in ORM.  Moreover I love to learn, I love to play with something new. But on the other side - let's face the truth. It would take far longer to make new web site. I had experience with python during my studies - but assuming some things have changed during last years, it will take some time for me to adjust - to make full advantage of it's features. Moreover, there are some environments for python django that i am not really familiar with - like eclipse. Overall, after a lot of brain storms i decided to stick with ASP.NET MVC (wit Visual Studio 2008). I know it, I work with it. Also it looks like this project is under constant development - notice that after few months since ASP.NET 1.0 was released we already have APS.NET 2.0 preview. Decision: ASP.NET MVC (but would like to play with Django... :) Maybe next time...

2. Database and ORM

I had experience with both SQL Server and MySql. Like both of them. But since decision concerning main technology/framework was made on advantage of microsoft technologies i decided to choose MS SQL Server for this task as well. Second choise is for object relational mapper. Here, knowing we are going to stick to .net we can choose among: NHibernate, SubSonic, Entity Framework, Linq to SQL. Lets play with Google trends again.... orms in google trends As expected NHibernate is a leader. It is no surprise as NHibernate is a quite mature - especially in IT world (5 years , wow, that's a lot!). Another interesting ORM is Entity Framework - as according to some Microsoft officials this is going to be a main line in the future. For me is no much difference. There is some buzz recently concerning new release of Entity Framework - version 4 - should be released together with .net 4.0 and visual studio 2010. There will be a "model first" approach and POCO classes. I'm excited. VS 2010 + .NET 4.0 is about to come in few months so i guess i will play with 1.0 version of EF and then immediately switch to newer one as soon as it is ready... Decision: Entity Framework

3. JavaScript framework

Here, answer is the pretty simple. Comparing some of popular JavaScript frameworks... javascript_frameworks No doubts this time. jQuery is the most popular one. Plus you can use Google's CDN. Plus it ships with Visual Studio on MIT licence.  Plus - it is just brilliant and has thousands of plugins.... Decision: jQuery

4. Rich JavaScript text editor

I want to enable heavy posting, answering, commenting on the web site. For that i need some rich text editor. There are generally two types of rich text editors: WYSIWYG (What You Sea Is What You Get) and WYSIWYM (What You See Is What You Mean).  From development point of view WYSIWYM editors are an obvious choice.  Why? Simply because most of WYSIWYG editors produce code of really poor quality, not to cal it sh**y. But for majority of users - WYSIWYG editors are more natural - simply because most of them are familiar with MS Word.   And it is a user that we really care about making internet web site. And I plan to make an application for all. Including my grandmas... How would i explain them how to use markup editors?  There are some mature WYSIWYG products, like  tinyMCE and CKEditor (previously known as FCKeditor). The only problem with them is that they are so heavy (above 100KB). That is way too much. Especially when I don't need new MS Word. I just need few basic actions: bold, italic, list, link. That's it. Nothing more. Why would i need some advanced features for posting questions or leaving comments? Since i already decided that jQuery will be my JavaScript framework I took a look at some plugins that can serve editor's functionality.  I have managed to find some: jwysiwyg, jquery RTE, jhtmlarea, RTE light. I have no bloody idea which one to choose. I will start jwysiwyg, play with it a little. If i am not happy, i will try other one. Let me just give it a try. I read somewhere that JQuery UI team is working on text editor... might consider that in the future.... Now, the tricky part with WYSIWYG editors is that you might get a poor html code. Moreover, this code might differ depending on user browser - as most of previously mentioned editors make use of some browser's build-in features. Making library that will help me to parse and "fix" user code - to change it info semantic html is very, very difficult and tricky. So note for everyone - don't do it yourself.  There is a library that might help you with that: HtmlAgilityPack, and it will definitely help me! Hey, check - after few quite years there is a fresh release of 1.4 beta. Decision: jwysiwyg for now. Changing that shouldn't be a problem...

5. Summary

This article is not a comparison of technologies. Remember, that i do not compare asp.net with python, mvc with django. I just choose tools to work with. Having Google Trends as a way to help me make a decision is a tiny add-on. Just to make sure some technology/framework/library - thus community - is not dead already. As i need help, like most of the developers. Life is brutal - although i would like to play with some alternatives i need to face the truth and i choose those that i feel most comfortable with and will enable me to deliver app in certain period of time. Uh, long post. time for ice-creams ... :)

Tags: [internet startup] [web development]

<-- Prev Next -->

Copyright 2013 © ITmeze