Meligy’s AngularJS & Web Dev Goodies — Issue7: Goodbye 2014!

Here we go, it’s the last day of the year!

Hi, it’s Meligy from GuruStop.NET, and this is another issue of the AngularJS and web development newsletter.

I wrote this intro several times this month to fit the success of the first ng-sydney usergroup meeting, a company presentation I put online about Angular 2, Christmas holidays and gifts and all, my own dramas with the first MacbookPro I owned ever, and now, well, here it comes, on the last day of the year!

According to my records, there’re 60+ new subscribers to this newsletter since the last issue. Thanks a lot if you shared it with your friends, and if you are one of the new friends, make sure to check the previous issues at

If you are not, this is always your go-to reference in addition to searching your mailbox. And thanks for always being here at this end of the newsletter :)

It has been a few weeks since last issue, so, I’m making it up for you. This issue is going to be long. Let’s jump in quick:


Angular 2.0

Video: My Take on Angular 1.3+ (1.x) and Angular 2.0
In this ~17mins video I share a few ideas about the misconceptions people seem to have about Angular 2.0, and where Angular 1.x is going. You probably read a few of them in previous issues of the newsletter.

AngularJS 2.0 Status and Preview
A pretty nice writeup on the current status of Angular 2`.0 with code. It’s a bit long that the post offers a table of contents!

Angular 1.4

Video: AngularJS 1.4 Planning Meeting

If you are interested in knowing what’s likely to make it to Angular 1.4 and 1.5. 1.4 is likely to make it to ng-conf in late January 2015 BTW! InfoQ wrote an article closely related to this video focusing on what to expect beyond 1.4 for the 1.x in 2015.

Official Angular Blog: Planning Angular 1.4
The team also put a summary of the meeting in this blog post. One thing you want to look at is the “Progress” and “Design Doc” links in there for the real meat of what’s going on.

A couple interesting things about 1.4 are:

  • The router looks like it’ll have an appearance in this release. I personally doubt it’ll be good enough!
  • There’s another round of forms improvements. These are always welcome :)

Learning Angular 1.x Cheat Sheets is the best place for short videos teaching AngularJS. The creator of the site now has posted some cheat sheets targeting some very interesting areas of Angular:

  • AngularJS Core Services (PDF)
  • AngularJS Directive Definition Object (PDF)
  • AngularJS ui-router (PDF)

Creating Custom AngularJS Directives – 7 Part Article
A very detailed primer on creating directives from Dan Wahlin. Dan has popular courses on AngularJS, and more importantly he is the creator of the Angular in 60 minutes video, which I still consider the best intro video for developers new to AngularJS.

Getting Started with Angular and Accessibility
A good introduction to accessibility in AngularjS and the ngAria official AngularJS module.

Videos: “AngularJS Fan” YouTube channel
A very good collection of videos with nifty tips & tricks, They are all very short also like the awesome videos. I found this channel by accident via a video about Isolate-Scope Attribute Expressions Use Dependency-Injection In AngularJS.


An Introduction To Unit Testing In AngularJS Applications
This article takes a good angle at unit testing your application with both theory and code.

3rd Party Modules & Tools

A replacement for default cookies service in AngularJS to take away the limitations of the default cookie implementation.

A good tool whether you need to support custom languages or just add proper pluralization. It takes care of the obvious details like lazy loading and flexibility to replace parts of the library.

A collection of directives and services that seem interesting. You can check their table directive with support for serverside paging/sorting, their range filter for when you need to repeat on a range of numbers not really a list of objects. I saw it mentioned a few times but haven’t played with the code myself yet.

If you ever needed to create something like a constants.js file that had some values that don’t change in the life of the application but change per dev environment (local, test, stage, prod), you might find this useful (provided you use gulp too I guess).

Code To Read – The Web-based Markdown Editor
A very good Markdown editor built with AngularJS on the front and NodeJS ExpressJS on the backend. It offers offline storage support and integration with many cloud storage options (Dropbox, Google Drive, One Drive, Github). You can play with it at but I thought you might be more interested in checking the code ;)

John Papa AngularJS Styleguide
John Papa is another great speaker who is now focusing on AngularJS among other things. He created a very nice styleguide that is worth looking at and deciding for yourself what to agree and what to disagree with.
If you are into validating your coding style, you should also learn about the official angular-hint module.


Should I be learning ES6?
I think the answer is yes. ES 6 is still effectively JavaScript vNext, but it’s good to learn one of the trasncompilers to ES 5 (current JavaScript). However, this link is not about what I think, but what reddit thinks.

CSS And Preprocessors

Introducing Sass-Compatibility
SASS was created on top of Ruby. There are a few popular versions of it out there and there’s a C implementation as well that other platform implementations rely on. The Sass-Compatibility site helps you tell what features are incompatible with what implementation. I haven’t really fallen into this problem before, but I’m very aware it exists and it might be just a matter of time.

The 5 Most Popular Frontend Frameworks of 2014 Compared
I looked here to see if I missed anything, but, TBH it just felt like Bootstrap is the king of this area still, arguably of course.

HTML5 & Web Components

Web components allow you to create independent UI widget that can have their own HTML/CSS/JS includes and have some JS-rich behaviors. While browser support is still poor for web components, the Polymer project provides a great polyfill for current browsers.

Video Playlist: Polymer Tutorial
I was looking for some Polymer tutorials and found this playlist which has several videos with good introductions to the Polymer concepts

Video: Web Components and the Future of CSS
Another introduction video focusing on shadow DOM (DOM that has its own isolated CSS and DOM selection).

No more JS frameworks
The post talks about what feature are making it to standard / native technologies that we have always had to get a JavaScript framework to have, like async loaded HTML templates, JS promises, etc.

The State of HTML5 Gaming
An interesting comparison of the big JavaScript game engines out there.


Node.js Best Practices
It’s not very common to see good best-practices guidance in the NodeJS world, especially for those who don’t write a lot of NodeJS code, so this one is a good gem.

A book about one of the most important and often confusing topics of NodeJS. It’s written as a Markdown file on Github with a build tool to view in browser, a nice way!

Functional Programming

Video: Functional programming design patterns by Scott Wlaschin
My friend @JorgeFioranelli suggested this video as a great one for those interested in the topic in general (He is my go-to person on it).

Having further look I noticed the entire site is a collection of NDC videos. NDC is one of the best in-depth developer conferences I know of, so, you better browse the video listing for topics that may interest you.

Microsoft Technologies


Using AngularJS, ASP.NET MVC, WebAPI and EntityFramework to build NLayered SPA
A detailed code sample that features an interesting boilerplate template builder


Yeoman generators for ASP.NET 5
With official production support for Mac OS & Linux in next version, we get to see crazy things like yo aspnet! Not just that, it has sub-generators that correspond to Visual Studio’s Add-New-Item dialog feature as well: Adding New Items to Your ASP.NET 5 Project with Yeoman Subgenerators.

Video: ASP.NET 5 – What do you need to know
A good introduction to the upcoming version of ASP​.NET, from ALT​.NET Sydney usergroup.

Building future .NET projects is quite pleasant
While several resources focus on development experience in ASP​.NET 5, this article talks about how nice the CI build story is as well (using TeamCity as the build runner as well).

Internet Explorer

It’s still no Chrome for sure, but there’re good things happening with the automatically updating (AKA: ever-green) IE 11. Here’s one:


How To Migrate To HTTPS
Addy Osmani from Chrome team shared this guide for “gradually” migrating to HTTPS. It’s currently an 8 pages WIP document. Definitely worth checking.


Pakt Publishing $5 Ebooks Bazonga
Pakt are having a $5 sale on all their ebooks and videos. It will end very soon so use it quick if you will.

Principles of Distributed Computing (lecture collection)
Looking at what algorithms fit more in a distributed world.

JavaScript Books

Eloquent JavaScript And Other Books
A post on reddit about how good the book Eloquent JavaScript triggered a good discussion of other good JavaScript.

Programming JavaScript Applications
Another good JavaScript book available for read onlineASP​.NET


How to Be an Expert in a Changing World
To quote “When experts are wrong, it’s often because they’re experts on an earlier version of the world”.

How to Send Email Like a Startup
This is more for the engineers who sometimes have to write marketing emails, ones that maintain customer relationship not normal ones like this email or you internal company email. I find it a very good sill to learn these for everyone though.


This is a one off section that will not make a frequent appearance in this newsletter.

In the last newsletter I talked about the new ng-sydney usergroup for AngularJS developers in Sydney. I promised to share a picture from the first meetup. So here it is:

There were about 35+ people attending. We had an open talk session that I was worried could go wrong but people actually loved it that it went beyond time. It was a great night.


A quick mention of the actions I’d love you to do NOW before closing this message (before the end of the year):

  • Send me feedback about YOUR thoughts of the newsletter and how to improve it (just email me or reply to this email) – I promise I’ll take action!

  • And tweet the newsletter to your friends if you are on twitter (or share on Facebook, LinkedIn, G+, you have one of these, don’t you?)


Have a great 2015 everyone :)

AngularJS Video: Create A Tree Hierarchy Using Recursive Templates & ng-include

Hello again and welcome to another Angular.JS video. This time I talk briefly about templates in AngularJS and the ng-include directives, and how to combine them to create recursive templates that can be used to model any number of tree levels.

Here’s the video. Check the code snippets belows:

The Code

In this demo, I used a dummy controller just to have a model to work on, the controller looks like that:

The obvious magic comes from the HTML, here’s the relevant part:

You can see the result below:

AngularJS Tree Demo

I hoped you liked this one, and until next video.

Allow Me To Share My Toolset Choices for Developing On .NET

There was a question in a tech facebook group I co-manage about what tools you’d use if starting a new project today.


I don’t know for sure. It depends -of course- is the expected answer. For example, there’s some idea I had I mind I considered using MongoDB or CouchDB for, while still using .NET, and then I wasn’t sure if I go extra mile in DB I’d go for Node or Rails as well or would prefer .NET for my personal productivity. I also often use Node/Bower when checking libraries with many dependencies.

So, for this question, I thought what tools I might use in a company project. Thinking back, I found that most tools I use now are good enough for what they do. So, I thought I’d list these.

These tools are my personal experience though. While some of them are widely adopted in Readify, some others may have been specific to some clients or Readify teams I worked with. Every team is free to choose the tools that work best for them and make it easier to deliver high quality deliverables in sensible time, so, even if you are at Readify, your mileage may vary…

The Tools

Server Side Web


  • SQL Server (or SQL Azure, although I don’t like SQL Azure, because it’s not compatible with some scripts generated from SSMS, which I sometimes use to generate migration scripts)

  • DbUp for DB migrations (there are some other nice options now)

  • Special SQL views + Web API OData + MS Excel for reporting

Client Side Web

  • Angular.JS on the client when I have the choice, Knockout.JS and jQuery UI (being deprecated now) at some big client I keep going back to every few gigs

  • LESS for CSS, or SASS (SCSS) when the CSS is handled by one of our favourite design agencies

  • Chrome devtools for web debugging (obviously), unless it’s IE issue of course.


  • Phonegap (most just the open source part of it, Cordova) and Ratchet CSS framework (considering alternatives, like TopCoat) for mobile development, with Angular.JS

  • Considering Xamarin as their work seems to be VERY cool, and I recently get access to their stuff via my company (OT: Also considering Neo4j DB for similar reasons).

IDEs and Text Editors



Internal Communication

  • Several kinds of wikis used by different clients, often with OneNote

  • HipChat for team communication, sometimes Skype and/or Lync as well

  • AnswerHub (Stackoverflow clone) for internal questions forum where I can safely quote client sensitive information in my question

  • Yammer for internal company social network

How about you?

What tools do you you use when developing?

Let me know in the comments, via email, or on twitter!

Angular JS 1.3.0-beta.1 Available – Removes Support for IE 8

AngularJS vs IE8

I was checking the last version of AngularJS now and noticed a new version, 1.3 beta 1 is now available. The last 1.2.x release is 1.2.14.

Interestingly, beta 1 doesn’t seem to have any big fixes or features. The changes presented only include a fix for using <tfoot> tag as a top-level parent of Angular template, and being able to use <style> tags in your Angular templates.

The features only include supporting new <input> types, in particular date, time, datetime-local, month, and week.

A Quiet Release

One interesting thing about this release is that there is no official blog post about it. Actually all the other minor versions (1.2.x) didn’t have special blog announcements, and the team said they’ll only do it for big releases. I’d still have thought the first Angular.JS 1.3 public release to be considered big though!

The only mention in the release notes goes to an old post dated in December last year, that informs about the removal of version 8 of Internet Explorer.

The Big Change: Bye bye IE 8

The obvious and only breaking change in the first beta of AngularJS 1.3 is removing support of Internet Explorer 8. The so-called-breaking change doesn’t remove IE8 specific behaviors or workarounds. It only removes IE8 from test configurations, but you probably expect more breaking changes to follow.

Is removing IE8 support a real problem?

I think it is. Well, removing it is not news, but it still is a tough step at least on the short term.

According to the new stats published by TheNextWeb (originally from NetMarketShare), Internet Explorer 8 is the world’s most popular browser version at the moment, and it’s increasing in popularity (even if only by a fraction percent):

IE8 unfortunately regained 0.48 percentage points, and it’s still the world’s most popular browser at 21.73 percent

Compared to Chrome:

At 16.84 percent, Chrome continues to slowly recover its losses in 2013, and is getting close to finally passing Firefox. Chrome 33 only managed to grab 3.70 percentage points, which would have been higher if it was available for a full month. Chrome 32 grew to 3.07 percentage points to 9.86 percent, while all other versions were down: Chrome 31, Chrome 30, and Chrome 39 fell a combined 5.91 points.

Yes, things are better if you ignore browser versions:

Nevertheless, for February 2014, StatCounter listed Chrome as first with 43.89 percent market share, IE in second with 22.49 percent, Firefox in third with 19.21 percent, Safari with 9.74 percent, and Opera with 1.34 percent. The only part everyone agrees on is that Safari and Opera are not in the top three.

But still, obviously browser versions are still a thing even for ever-green (automatically updating) browsers` stats, so, it’s even more important for non-automatically updating browsers.

Bonus Note: Following Up With Angular.JS Releases

The best way to know whether there is a new version of Angular.JS, and get a detailed list of all changes that can help you decide whether to upgrade to it is the official ChangeLog file on Github:

Every now and then I check this file and learn about new releases. That’s how I knew about the new beta.

Authoring Introductory Articles: The Pitfalls I See As A Reviewer

Authoring Introductory Articles

Just finished replying to an author who asked me to review his introductory article.

The lesson learned from reading and reviewing is that there are some quite common pitfalls to these kinds of articles, which are essentially the same thing:

Thinking That One Size Can Fit All

You are writing an introductory article, so, you target beginners, but even for beginners, you have to assume some level of common ground as a foundation to build on, but how much of a common ground is that? IS the author targeting those who have experience with similar tools/concepts? Students? Professionals with other (unrelated) programming experience?

Sometimes it feels like the author keeps changing his imaginary idea of the intended audience as they keep writing. Eventually the author finds himself inserting some hints and references that if the reader understands then they probably don’t need to read your article (except to review it).

Which leads to:

Unlearning is hard

Just simulating not knowing what you know already. Yes, it’s not that easy!

If you are an author

When you work on any kind of introductory material (which is different from these posts you write just because you want to “take the thought off your chest to the wild”), always be very strict about:

  • Who you audience are
  • Who your audience are not

Identify them by what they do, and what experience they had doing what they do. Be honest with yourself about this identification means they’ll actually benefit from your material or they’ll just congratulate you on it (if you know some people who fit into the audience) without real benefit.

Think of what they are “not” more often as you keep writing. Check every assumption about the audience that you make in the material against the “not” bit.

You may find it hard. Depending on why you are working on the educational material, it may simple be worse changing the intended audience. If this happens without lots of modifications to the work you already did still, it means neither of your images about the intended audience were correct, not the original one, and not the new one too.

As A Reviewer

A reviewer also has their own challenge…

A Video of Aaron Powell Presenting IE 11 At Sydney JavaScript UG

I haven’t been able to attend ALT.NET Sydney or SydJS last month,
as I had to follow up some family issues in Egypt on daily basis.
However, Aaron Powell ( @slace) presented at SydJS last month, and was kind enough to
record his talk on his laptop as a screencast and put it online.

The talk is about dev tools in Internet Explorer 11.
Well, yeah, I know, IE! No matter what I or you think about this browser,
we all often have to test against IE and even worse, against older versions of it too.

With compatibility modes and all, I think it’s great if newer IE versions can make
this must-have experience easier, and can prevent IE from being a source of headache.

Watch Aaron showing us how this applies to IE 11

Videos from Sydney JavaScript UG, 19 June 2013

Let me put the interesting stuff first, some good videos from SydJS gathering this month:

Pro-tip: Make sure to switch video quality to 720p for best experience. The video quality button is one of the left buttons next to full-screen button.

The videos

WebGL, the Goo Engine, and your Blackberry

I18n – why, how; and where the name came

JavaScript based ERP

Jerkins CI & JavaScript

The future is a promise


My readers know I have been experimenting with video publishing for a while, focusing on simplicity in getting releases out. I started with a simple introduction to the new Angular.JS library, a simple productivity trick for all users, and then a simple and old cross browser CSS trick. In the 3 videos, you saw me explaining stuff. It’s time for something different.

The idea is to record the usergroup sessions I go to. I started with ALT.NET Sydney last month, organized with speakers to use their own recording, then got a bit unfortunate due to technical issue on the machines used.

This month I didn’t have a connection with the speakers to coordinate the recording, so I just took my phone to Sydney JavaScript usergroup (SydJS), sat in the first row, and started recording a separate video for each session.

Due to the nature of the way I used, and being a first timer, you’ll find some issues with the videos like the scene moving up and down a bit, and zooming-in and out or fading a bit. However, the videos are still an OK resource for anyone who missed the event (or doesn’t live in Sydney at all). So, hopefully you like them, and I get to improve the technique next time.

What is my opinion about Knockout vs. Angular ?

My Angular.JS video is getting way more traction than I thought, with over 2K views and a lot of comments on Youtube and Facebook. One of the comments on Facebook came today was:

What is your opinion about Knockout VS Angular what is the best !! and thanks for the Good tutorial Mr Mohamed

An interesting question. There is an easy answer that is both technically and politically correct, that goes like: There is no “best”, each has pros and cons. For which one to use, “it depends”.

But I bet this is not good enough for anyone interested in the question, so, I’ll expand a bit here…

A Personal Opinion

“A personal opinion you ask, a personal opinion you get, so, treat it like one, no more”

Mohamed Meligy

Angular.JS does more than binding DOM to JS objects, like routing and enforcing code organization, and connecting to REST server APIs, etc., so, the more accurate comparison is against Durandal.JS, which uses Knockout for DOM binding, Sammy.JS for routing, Breeze.JS for REST data interaction (can be used with Angular), etc.

Knockout is old, and very mature. It was designed to be very easy to plug it into any jQuery plugin or jQuery UI widget. It was also designed to work with all browsers down to IE6. With Durandal.JS you also get the other parts that Knockout itself does not cover. If you are writing an app that depends on very complex “existing” jQuery components that you didn’t write yourself, it may be a better option.

Angular.JS is relatively new. It doesn’t feel like new when you see so many tutorials around and very enthusiast community around it, but it does feel so when you look at things like how the official UI components are in complete refactor/reorganization mode for quite a while. Mind you, they still work nicely though.

Angular.JS does not care as much about legacy browsers. The lowest they support is IE8 and only with DOM/EcmaScript5/JSON shims, and when things don’t work in IE, the whole thing fails with no particular error line to start with.

Having said that, “for me” Angular is the future. I’m not saying that KnockoutJS will die or whatever, it’ll be stupid of me to think so. Angular.JS is very functional as it is now and I used it to save us time in a current project (yes, even with IE support), and along with time and very passionate community (just like Knockout started), it’s expected to get better.

Does this answer the question?

Maybe, and maybe not. I have done quite a bit with KnockoutJS, but not much Durandal.JS, hence this should be taken with a grain of salt. There are several comparisons on the web that go into more detail. I just wanted to write my personal take here so that I can refer to it later when people ask.

Of course, like many opinions, my opinion itself may change as I learn more or as both libraries evolve more.

So, yeah, I highly encourage you. Go ahead and make your own conclusion. Needless to mention, those two libraries are not the only two in their category too ;)

Welcome GuruStop’s New HTML5 Sidebar Search Widget!

Hey folks, I just removed the default WordPress search widget and a new one using the HTML 5 input search type, a bunch of CSS 3 (and fall back for older browsers like older versions of IE), and a little bit of JavaScript. It’s still based on the same background image used in this blog theme though.

Since some of you might be interested, here is the code that I use to implement it, instead of you trying to hack it with different browser developer tools!
Not the exact code though, but a version that is heavily commented for your convenience Smile

You can skim quick over the the simple HTML, spend some time with the CSS bits (most work is done here), and have a look at the bonus JavaScript, see the result without the context of the blog itself, and if you feel excited, click the "+" icon on the right to start editing it yourself to come with better implementation or fix a bug.!

If you like this post, you may want to share the post or comment below encouraging me to write more similar posts, maybe also check what offers are available by bog partners, or, follow me on twitter (@Meligy).