Elastic Search to the rescue

After spending a lot of money & time trying to optimise SQL queries and hiring DBAs as a freelancers; I took a decision to take a look on Elastic Search and Polr.

Large amount of data like 0.5 Million join with 0.5 Million left join with 0.75 Million, etc.. retrieving data in a second is a dream that will never come true with relational database and data integrity.

In a small companies we are a full stack developers. We are not experts in DB (And we do not want to). We want Entity Framework Code First to handle our database creation and relation. Having a good a knowledge in creating Non clustered indices is a plus (Getting the suggestions form SQL Server Management Studio Execution Plan will be more than enough).

But again, how could we make our search super fast. Yes, the solution was the Elastic search for me. And another library called Hang-fire will notify Elastic search service to reindex some data or to delete it.

Your suggestions and cooperation is appreciated.

My friend Amer Ala’amar added this comment when I shared with him this article.

Nice article, did u try live data cube with sql server analysis service. It will restructure your whole data to be very fast to retrieve. It depends on your business model, because it is a disconnected environment can be updated by configurable period, 5 minutes and so on. So if your data change can be more than this period on a specific type of search, then it is worthy to have a look over it.

What I learned from Angular Attack competition in 48 Hours

Angular Attack coding is over. I spent a wonderful time in learning new things and building my first Angular 2 application with Amal Ayyash as team (Sorief & Sela team).
I was lucky to work her since she is one of the best UI/UX in Jordan.

Simply I learned a lot. In 48 Hours I learned the following:

  1. Angular 2 for sure, angular.io was my reference. But that does not mean that I did not check angular 2 before that day. I watched John Pap videos in pluralight, and only 1 or 2 videos from egghead.io
  2. Typescript (For me it’s the evolution of JavaScript) in visual studio.
    I will use Typescript in all of my upcoming projects. It helps us to developer a maintainable neat code that is easier to read and it’s supported in Chrome Developer tool to debug and trace.
  3. Firebase, it’s easy and simple.
    “Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.” (https://firebase.google.com/docs/)Firebase will open a web socket between the repository and your web app.
    So every change on your Database will be reflected to the UI immediately.Change data in Firebase => Web Socket will send to the app => Finally, Angular will reflect the change to the UI.Easy to integrate with with other OAuth providers (e.g. Facebook, Google, Twitter, etc..). Also it’s very simple to set the security rules (Read, Write, and validation).
  4. Surge.sh is a static web publishing for Front-End Developers. It’s very simple. But if you decided to use firebase then it’s better to host your app there. both of them Firebase and Surge have a simple CLI tool to deploy your app.

Now we are waiting the judges decision. Regardless of the results, getting this knowledge in this short period was a prize and we’ve got a lot of fun while working on something new. You can vote for us, please do🙂 … and thank you for your support us advance.

Vote from this link => https://www.angularattack.com/entries/579-sorief

The very beginning slow steps in Entrepreneurship

Before three years, I bought a MAC Book, and I start learning objective-c to develop my first iOS app. It took from me 4 months to learn and to publish my first version of a semi application. (before couple of months I learned that they call this step Minimum Viable Product MVP).

I just created it for fun! watching objective-c videos and put my hands on dirt using Xcode.
I just want to resolve my issues and bugs using the art of copy paste form blog posts here and there😀 and yes it works.

After couple of releases on iOS and before 7 months from now, I found that i’m getting more than 4,000,000 impressions from Admob every month with ~ 150 K of downloads. So I decided to learn Android and to publish a new version of Telawat (Yeah, it’s the name of the app).

I did not like Android development! stateless UI! it works on 4.4  but not on 4.3! …etc.
Anyway, I should find a solution. A lot of bugs have been reported! the first 30 reviews from friends comes with 5 stars😀 … But things will never continue on this way .. And I found a very talented freelancer. iOS app will handle the expenses + small amount from my salary sometimes. But, Is it worth it! Yes of course. After resolving all bugs I created a Facebook Ads campaign which gives the application a very good jump (Check image below).


Things are moving in slow mode from my side, but I believe that I learned how to accelarate. The time is a very critical factor in entrepreneurship. So here is my advises:

  1. If you believe that you have a good Idea try to implement it by your self as fast as you can even if it’s not a feature complete (Do the MVP).
  2. If you cannot do it by your self, look for a trusted investor to share your Idea with him. Or maybe one of your friends and agree on some percentage.
  3. Social media: Share button in your app, Create Page on Facebook for you app, etc…
  4. with 5 to 10 Dollars bidding every day you can create a Facebook Ad. that will increase the number of users. (e.g. Say I want to advertise in Algeria & Egypt on Android 4.0 and above whom interested in these specific keywords).
  5. Feedback form users is important. I already implemented set of ideas based on users feedback.
  6. Finally, the most important one: Do not listen to the Discouragers … Believe me I heard from people: Ahh! Old Idea! ….. I want to say: “No need to create a market dude!” .. just add some extra value to an existing Idea and go.

Wish you luck dears ….. Peace😀


MVC Tooltip Validation using jQuery and Bootstrap

Check the Sample Code Github

Me and Ahmad Aqrabawi created a simple jQuery plugin to convert MVC Validation to a Boostrap tooltip validation error.

When you create a form; Validation Errors could change in the layout when its appear and may messed up the your layout .. So its error tooltips could be useful sometimes.
Simply, create new MVC project and navigate to “Register View” .. Add a validation message from Html helper directly after the text box

@Html.TextBoxFor(m => m.UserName, new { @class = “form-control” })

@Html.ValidationMessageFor(m => m.UserName)

Same thing for the other fields.

@section Scripts {



$(function () {

$(“form input”).tooltipValidation();




Also you can add placement option (by default its top)

$(“form input”).tooltipValidation({

placement: “right”


One more thing … your tooltips will appear in black colour now. If you to make it in red add this file

<link href=”~/Content/jquery.validate.mvc.css” rel=”stylesheet” />


Check the Sample Code Github

Geeks are linking Dots

All of us saw how Modern browser applications moving fast in a crazy way! A lot of developers (spectially Silverlight one) was really scared (like me) to learn Javascript because its super Dynamic, there is no IDE that support it very well. Anyway, that was in the past.

A lot of Silverlight devs moved to another technologies, but you can touch that they moved with their Silverlight skills and knowledge to Javascript world like John Papa (he has a great courses in Pluralight!).

I just talked about fast moving of web world … Pluralsight helped me a lot to learn faster, So lately, I started with Building Data-Centric Single Page Apps with Breeze course. Its amazing! Again,  You can touch how Brian Noyes used his WCF RIA knowledge in another technology. I already read his small useful book in WCF RIA services

And here is another Geek who moved to another world with his skills and knowledge http://ijoshsmith.com/ios-for-dotnet-devs/

be optimistic🙂 like them and keep learning

JayData Makes Web Phenomenal !


Creating Single Page Application, Web API, Upshot, An Exposed Service bring your data from Json Endpoints (maybe WEB API) … all of this is the new nueva moda.

This is nice till now. But the catastrophy started when you want to map your JSON with your EF Objects. Serializing stuff! Not Serializble! What the Hell! so change return type to ‘dynamic’ and bring ‘anonymous object’ … upshot is not documented!! And the Single Page Architecture Template (which is provided by Microsoft) .. Not mature enough! So simply they removed it from VS 12.

And Finally God guide me to JayData! Its amazing and phenomenal.

That’s what happened to me when I saw the first video for JayData

Imagine, Silverlight RIA can be used in Web. This “Framework” .. not just library

Solve this things in Previous Microsoft Single Page Architecture:

  • Generating the whole EF Model + Metadata automatically using JaySvcUtil.exe (You can see this in video)
  • Do not bother your self by creating many Web API controllers and doing all that mapping stuff between C# and JavaScript.
  • Getting optimized Data (Just needed data):

7-31-2012 6-02-35 AM

In this image you can see how I’m getting the Whole users from the WCF Data Service.

map ==> Used to get a specific properties from the object (That’s will minimize the size of the requested data; which means some KBs instead getting the whooole object).

Also I’m using Knockout to bind UI Elements with self.users observable array

7-31-2012 6-08-34 AM

  • You can use LINQ in JavaScript. Haha, Brilliant! For example if you have a users table and People table. And Each User is a Person. Lets see how to get Person Data if you clicked on a User.

7-31-2012 5-52-38 AM

First Param is a predicate that brings a person by Id.

this.Id ==> Passed in Second param as you see.

And Third one; is the callbacks from the operation. Awesome!

showPerson binded with list of users using Knockout JS (2nd image shows how I binded Div Element with showPerson function).

What else, See this video




Silverlight Tags Control Using RichTextBox, Popup and ListBox.


Download Sample



Before couple of days I created a an editable tagging control with autocomplete list.
I decided to create one “some how” Smile similar to Live mail application “To” field.


That’s exactly what I need; RichTextBox, Popup Control, and a ListBox inside that popup, and SL Cinch MVVM Framework.

And one more thing InlineUIContainer that contains my Tag Item control.

InlineUIContainer object used to wrap FrameworkElement controls inside RichTextBox; so the only way to add (border, StackPanel, or even buttons) is by using this object.


Buttons will be disabled if RichTextBox ReadOnly property equal false.
So if you want to add delete button to your Tag Item; I think that you should to make your RichTextBox works in modes (Editable, ReadOnly).
Editable: to add inline tag items.
RedOnly: to click on delete buttons for each tag Item.

I did not like this kind of user experience. So I just delete delete button from tag item. Make things simpler that better Smile. You can just delete it using backspace or by highlighting some item then delete “As you saw in Video”.


When you download the sample, you will find a Silverlight library project called bunjeeb.SL.Controls

Three DLLs added to this project:

  • Microsoft.Expression.Interactions
  • System.Windows.Interactivity
  • Cinch.SL

You can find these three DLLs in dependencies folder with the sample.

As you see below TagTextBox is very simple:

<Grid x:Name="LayoutRoot">

<Popup x:Name="PopupTags" IsOpen="False">
<ListBox x:Name="PopupTagsList" Height="Auto" 
    MinWidth="200" MaxHeight="250"

<RichTextBox x:Name="rtb"
   Background="{x:Null}" BorderThickness="1,1,0,0">
     <i:EventTrigger EventName="KeyUp">
         Command="{Binding RichTextBoxKeyUp, 
     <i:EventTrigger EventName="KeyDown">
         Command="{Binding RichTextBoxKeyDown,
     <i:EventTrigger EventName="ContentChanged">
         Command="{Binding RichTextBoxContentChanged, 
     <i:EventTrigger EventName="LostFocus">
         Command="{Binding RichTextBoxLostFocus, 



As you see here; I used EventToCommandTrigger to invoke these events using Commands. And that’s gonna help MVVMers to create there own ViewModel for that control. (If they want)

I’m sure that Sacha Barber (This one who creates Cinch Framework) used WeakReferences. and that gonna help GC to do his work. Smile Or simply you just use the delegate commands, or relay commands instead in PRISM. For me I prefer to use Cinch framework; I think it’s a preference.

TagsTextBox Control contains three properties:

  • Tags DependencyProperty: To display tags in RichTextBox.
  • AllTags DependencyProperty: Which contains all tags to display it on autocomplete popup.
  • InlineUITags CLR read only property: Which contains the Tag Items that you can find it in RichTextBox. 

When user starts typing FilterPopupList will be executed. The Main functionality of this Method is to:

  • Iterating into all InlineUIContainers to get tags texts.
  • Tags Popup will display = all tags except existing tags in RichTextBox.
private void FilterPopupList(string changedText)
   if (changedText == null)
      PopupTagsList.ItemsSource = null;

   //Get Tags from RichTextBox
   List<string> newTags = new List<string>();
   foreach (InlineUIContainer inlineUiContainer 
                in this.InlineUITags)
     TextBlock tagNameTxtBlock = (TextBlock)((StackPanel)

   IEnumerable<string> tags = this.AllTags
                .Where(x => x.ToLower()

   PopupTagsList.ItemsSource = null;
   PopupTagsList.ItemsSource = tags;


When user commit tag insertion (by clicking enter or by choosing one of the items in the list); Then the source should be updated.

UpdateTagsPropertyAndBindingSource will do this work. Let me explain the logic
this method in three points.
  • Reset popup state if you want using isResetPopupState parameter.
  • Collecting the new added Tags.
  • Some Tags were deleted; so we should tell the source about it.
  • And Some tags were added; and we should tell the source about it also.
  • Update source using binding.UpdateSource()
  • And Finally, Raise TagsChanged event which contains Tags Added & Tags Deleted.

  • private void UpdateTagsPropertyAndBindingSource(
              bool isResetPopupState)
          if (isResetPopupState)
          IEnumerable<string> newTags = GetNewItemsAdded();
          // If some item found in Tags Collection And 
          // not in RichTextBox; So we should delete it.
          IEnumerable<string> mustBeDeleted = 
          List<string> mustBeDeletedList = null;
          //Tags must be deleted from the source
          int mustBeDeletedCount = mustBeDeleted.Count();
          int lastRemoveIndex = mustBeDeletedCount - 1;
          if (mustBeDeletedCount > 0)
             mustBeDeletedList = mustBeDeleted.ToList();
             for (int i = lastRemoveIndex; i >= 0; i--)
           //Tags must be added to the source
           IEnumerable<string> mustBeAdded = 
           IEnumerable<string> mustBeAddedList = null;
           int mustBeAddedCount = mustBeAdded.Count();
           if (mustBeAddedCount > 0)
             mustBeAddedList = mustBeAdded.ToList();
             foreach (string mustAddItem in mustBeAdded)
            if (mustBeDeletedCount > 0 || mustBeAddedCount > 0)
             BindingExpression binding = 
               if (null != binding) binding.UpdateSource();
               if (this.TagsChanged != null)
                   new TagsChangedArgs()
                    TagOwner = binding.DataItem,
                    TagsAdded = mustBeAddedList,
                    TagsDeleted = mustBeDeletedList

Ok, One more thing to know, What If you have multiple instances of this control. And as you see in the video; that you can add entire new tag which is not listed in the auto complete popup list.

So how could tell other controls that All Tags List changed?

If sure that you folks have many many solutions in binding, Observable collection has the ability to notify the UI when item added. yeah you are right.

I decided to use the Mediator in Cinch framework. Its really amazing (pub sub mechanism) which is like Event Aggregator in PRISM.

So I just publish new All Tags List.

I just passed the Id to refocus RichTextBox.

        public void CandidateTagsChangedMessage(
            Tuple<int, IEnumerable<string>, Type> tuple)
       this.AllTags = tuple.Item2;

       PropertyInfo pinfo = tuple.Item3.GetProperty("Id");
       int currentId = (int)pinfo.GetValue(this.DataContext,
       int updatedId = tuple.Item1;

       if (updatedId == currentId)


So the above code for the subscriber. And the publisher is our main view model.

public ICommand TagsChangedCommand { get; set; }
private void OnTagsChangedCommand(EventToCommandArgs args)
    TagsChangedArgs e = args.EventArgs as TagsChangedArgs;

    // TODO: Remove, add tags, Submit Changes to RIA Service
    // e.TagsAdded
    // e.TagsDeleted

       .Send(new Tuple<object>(e.TagOwner));


This command is binded with our TagsTextBox.TagsChanged Event

<bunjeebControls:TagsTextBox x:Name="MyTagsTextBox2"
   AllTags="{Binding AllTags}" 
   Tags="{Binding SomeTags2, Mode=TwoWay}" >

        <i:EventTrigger EventName="TagsChanged">
        Command="{Binding TagsChangedCommand}"/>



Sorry for not completing the 2nd article of pivot view control. I found that its more important to talk about Tagging Control. Since I did not any Silverlight Tagging Control.

That’s it. Wishing best coding in your life Smile

Download Sample