CSS Pixel Insenity

1 בפברואר 2015

There are lots of articles trying to explain what is a pixel from CSS perspective. Here are the most popular ones A pixel is not a pixel is not a pixel A Pixel Identity Crisis Probably the most important knowledge base is the formal W3C document CSS Values and Units Module Level 3 If you read those articles and are still struggling to understand the true meaning of CSS pixel than keep reading. Instead of just tell you the formal definition lets take a practical path to defining a CSS pixel iPhone 3GS has a screen resolution of 320 x 480 iPhone 4 has a screen resolution...
no comments

Base Controller with AngularJS

1 בינואר 2015

There are two ways writing controllers in AngularJS Function based Class based For some reason, the first method is more popular (probably, because Angular's tutorials are written that way) (function (angular) {     angular.module("MyApp").controller("HomeCtrl", function ($scope) {         $scope.sayHello = function () {             alert("Hello");         }     }); })(angular); And the corresponding template <div ng-controller="HomeCtrl">     <button ng-click="sayHello()">Say Hello</button> </div> The other method is more elegant. You write the controller just as any other JavaScript class (function (angular) {     function HomeCtrl() {     }     HomeCtrl.prototype.sayHello = function () {         alert("Hello");     }     angular.module("MyApp").controller("HomeCtrl", HomeCtrl); })(angular); However, Angular does not support this style out of the box. You need to update the template <div ng-controller="HomeCtrl as ctrl">      <button ng-click="ctrl.sayHello()">Say Hello</button> </div> From my POV the big advantage using the later implementation is that it allows you to use a base controller class var MyApp = MyApp || {}; MyApp.BaseCtrl = (function () {     function BaseCtrl($scope) {         var me = this;         me.$scope = $scope;         me.$scope.$on("$destroy", function () {             me.onDispose();         });     }     BaseCtrl.prototype.onDispose = function () {         var me = this;         console.log(me.name + ".dtor");     }     return BaseCtrl; })(); The BaseCtrl is a great place to store common methods required by all controllers. In my sample above I register to...

The magical vertical_align

7 בדצמבר 2014

CSS is a nightmare ... Most web developers I know hate to fix/touch their CSS Have you ever had the chance to play with the vertical_align property? There are cases where you change the vertical_align property of one element but it actually effects another one. There are many blogs/posts about the common misconception of using vertical_align but none of them explain the internals of it. At last, I found a serious designer which decided to deep dive into W3C specification and explain the full picture. His name Christopher Aue. Click here to read his post Be aware, it is not fun ...
no comments

Angular 1.3 – Creating a controller

5 בדצמבר 2014

In one of my Angular projects I needed to control the way a controller is instantiated By default, the developer specifies the controller name inside the HTML or inside a route configuration and then Angular instantiates the controller. Suppose I want to the instantiate the controller my self and return it to Angular Well, this should be quite easy angular.module("MyApp").controller("HomeCtrl", function () {     function HomeCtrl() {         this.name = "Ori";     }     HomeCtrl.prototype.sayHello = function () {         alert(this.name);     }     return new HomeCtrl(); }); As you can see, I am not registering a JavaScript constructor but rather use anonymous function and then return a new controller object. Running this code under Angular 1.2 completes without any issue However, when switching to Angular 1.3 i noticed that all controllers instantiated this...

Entity Framework EDMX format is dead

28 באוקטובר 2014

Entity Framework is great. It allows parallelism. Application developer no longer needs to wait for the DB guy to design and implement a bunch of tables and stored procedures For small software projects it really shines. You can implement a full production solution without even touch one line of SQL code. Entity Framework offers 3 mode of operations DB First Model First Code First Selecting the appropriate mode is a matter of style and scenario. For long, I preferred the Code First mode. It allows you to write clean POCO classes which are associated to the database tables. You can use this mode to connect to existing database...
no comments

Angular 1.3 – Strict DI

16 באוקטובר 2014

Angular 1.3 was released two days ago. There are some nice small improvements that should be noticed. High level overview can be found here I think that the most noticeable improvement is the "One time binding" syntax. Angular team was talking a lot at the last two years about "performance issues with Angular". Their main conclusion is that there is no real performance issue. Funny, the first topic to be covered with 1.3 release is about performance. Still, I am happy to see that they are trying to target those issues. However, at this post I am going to look at a...

Sharing DbContext between multiple methods and classes

21 בספטמבר 2014

I've been working with EntityFramework for more than 3 years and I love the technology. For many cases it simplifies the work of accessing the database. It general, it is recommended to keep EntityFramework DbContext manipulation at the DAL level and not let it propagate to higher layers (BL and Presentation) So, suppose I am using the repository pattern. The application does not access the DbContext object directly but rather is using a repository object which encapsulates all the data access logic. For example, public class LoginRepository {     public Login GetLoginByID(int loginId)     {         using (MyDbContext context = new MyDbContext())         {             var login = context.Logins.Where(l => l.ID == loginId).Single();             return login;         }     }     public void DeleteLogin(int loginId)     {         using (MyDbContext context = new MyDbContext())         {             var login = GetLoginByID(loginId);             context.Logins.Remove(login);             context.SaveChanges();         }     } } This is quite a straightforward implementation. Let's use it from a Main method static void Main(string args) {     try     {         LoginRepository logins = new LoginRepository();         logins.DeleteLogin(1);     }     catch (Exception e)     {         Console.WriteLine("ERROR: " + e.ToString());     } } Surprisingly, the following error is reported The object...

Mixing EntityFramework ForEachAsync with using keyword

26 במרץ 2014

I just encountered an interesting question on Microsoft Web Developer forum What is the problem with below code? static void Main(string args) { RunAsyncEF(); Console.ReadKey(); } static void RunAsyncEF() { using (MyContext context = new MyContext()) { context.Products.ForEachAsync(p => { Console.WriteLine(p.Name); }); } } Surprisingly nothing is written to the Console window and no error is reported at run time My...
no comments

Building Single Page Application – Bundle Orderer

27 בדצמבר 2013

In my previous post I discussed a way to arrange scripts in a single page application. Short story: each application layer is associated with exactly one bundle. Assuming a vertical dependency between layers, we can just include the bundles in the right order and any time we add a new file to a layer that file is automatically added in the right position with respect to other files in other layers. For example, below is a common bundle configuration in my single page applications bundles.Add(new ScriptBundle("~/bundles/lib")     .IncludeDirectory("~/Scripts/Lib", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/server")     .IncludeDirectory("~/Scripts/Server", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/bl")     .IncludeDirectory("~/Scripts/BL", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/views")     .IncludeDirectory("~/Scripts/Views", "*.js", true)); bundles.Add(new ScriptBundle("~/bundles/app")     .IncludeDirectory("~/Scripts/App", "*.js", true)); Please note that each bundle is configured to include a specific directory. This means that when you add a...

Building Single Page Application – Bundling

30 באוגוסט 2013

Single page application consists of many JavaScript files. Traditionally, when adding JS file we need to add a reference into the the HTML file too. Moreover, the newly added reference need to be inserted at the right location according to the logical dependencies between this file and other files. ASP.NET MVC 4 supports the concept of bundling and minification. We can use the bundling feature to ease the maintenance of newly JavaScript files. A new MVC 4 project reveals the following bundling configuration (CSS bundling code and comments were removed) under file named ~/App_Start/BundleConfig.cs public class BundleConfig{   ...
no comments