Meligy’s AngularJS and Web Dev Goodies – Issue 5: More Angular 2 vs 1.3

Hello again,
Last issue was so focused on what’s going on with Angular 2.0 and how it’s going to affect Angular 1.3. In future issues I’ll assume you are business as usual with 1.3 while still interested in what the 2.0 situation is going to be like. But for now, this is going to be another Angular 1.3/2.0 heavy issue.

Please let me know if you preferred the variety in previous issues more, or whether you prefer the full focus to be on Angular. As usual, just reply to this email (my address is eng.meligy@gmail.com), or shout at me on twitter (as @Meligy).

Speaking of twitter, I’d really appreciate if you tweet about the newsletter to your friends. Here’s a pre-written example. Use a pre-written tweet by clicking here or write your own.

One last thing before we start if you are in Sydney, Australia. I’m starting a new Angular usergroup called ng-sydney. I’m still working out the logistics (venue, etc), but it seems like it’ll be great. Please RSVP to the first meetup so that I can estimate how many will show up. BTW, I’m also looking for speakers, so let me know if you’d like to speak.

AngularJS 2.0

Correction

In Issue 4 of the newsletter the write up mixed the $scope and Directive Definition Object DDO together. The writing suggested they were the same thing in the part that mentioned the removal of $scope.

This is wrong. The DDO is the object that defines the directive, the one that has the compile and link functions and restrict and scope properties. Both are going away in Angular 2.0 though in favor of EcmaScript classes and AtScript annotations (like Attributes in C#).

References

The links in this section are ones that really should have made it to Issue 4, except I only found them shortly after the issue went out.

All About Angular 2.0
This is THE place to learn about everything related to Angular 2.0. This is a very comprehensive article written by Rob Eisenberg (@EisenbergEffect on twitter), the creator of DurandalJS who joined the AngularJS team a few months ago (he is mainly working on the router, but also trying to influence other areas).

Video: Angular 2.0
You can think of this as the video version of the previous article. In this video Rob explains the same points in his post, and for some (including myself), it’s a bit easier to just sit and watch!

Podcasts

The Angular team has been trying to show up to respond to the Angular 2 panic. Most of the answers are like “ES6 is a must and it doesn’t make sense to have our own way of what it does” and “There’s no migration path because we don’t have Angular 2 yet. When we finalize what it’ll be like, we’ll work on a migration path” as I keep mentioning, but still, listen to it in their own words:

Audio: Adventures in Angular: NG 1.3 and 2.0 with Brad Green, Igor Minar, and Miško Hevery
I mentioned the Adventures in Angular podcast in Issue 1 of this newsletter. They dedicated an episode to talk to the Angular team about Angular 2.
There’s also a transcript by John Papa if you prefer to read:
The Angular Team on Angular 1.3 and the Road Ahead to Angular 2.0

Video: Angular Air Episode 0: The Angular Team on 1.3 & 2.0
This is a special first episode of yet another Angular.JS podcast, except it’s a video podcast (using Google Hangouts). You can learn more about the podcast on ng-air.github.io.
Personal commentary: I don’t know what 2 podcasts would be good for, and I hate that it’s only available on YouTube because it means I can’t listen to it easily on phone (Android’s YouTube application pauses if the screen goes off), but they have a very strong start getting the Angular team in.

Different Angles…

AngularJS: The Bad Parts
This is critic of Angular 1.x, but it’s amazing if you look at it in the context of Angular 2, which solves all these problems.
Talk about dynamic scoping? Scope is going. Talk about dependency injection based on parameter name and confusing $inject property? Dependency injection is changing too. Talk about reinventing constructor methods, execution contexts and other JS concepts? This is all going away in favor of ES6 concepts (we still need to see how far the AtScript extension will go still).

This tweet also surprisingly got a little bit more traction than my usual (being a non twitter celebrity, the bar is admittedly quite low):

There’re a few other writings on Angular.JS 2.0 from well known people, but it’s all like: “Angular 2.0 is like Python 3, or is it? And is that a good or a bad thing?”, so, I just skipped these.

AngularJS 1.3

Have you heard of Angular-Hint?
Angular-Hint is a run time tool (a script you add to your page) that can tell you about anything you are doing wrong in your Angular code (via the browser console).
The tool didn’t get the attention it deserves when it was mentioned in ng-europe due to all the Angular 2 buzz, so I wrote this post in order to fix that!

AngularJS: Demystifying Directives
In a directive, does the controller function get called before or after the link function (or functions, pre and post link). Which is the best place to make changes to the HTML element? The article is a very good read even if you think you know directives pretty well

Ultimate guide to learning AngularJS in one day
From time to time, you need to refer a good tutorial to a newbie, or maybe check one yourself. Here’s what I found prior this issue.

Code School: Shaping up with Angular.js:
A new introductory course to Angular JS from Code School. They’ve kindly made it available for free.

EmberJS

Side note: I expect Ember to get a bit more traction coming from the Angular 2.0 panic. After all, it is the closest framework to it, and one of the 3 big frameworks IMHO: Angular, Ember, React (from Facebook).

React still a bit of a niche. It’s quite different from the usual MV* style frameworks like Angular and Ember, maybe a bit like Backbone, except its typical development involves some special .jsx files with HTML mixed with JS.

Ember feels the most natural alternative for those who decide to avoid Angular for now. It also has a great documentation and migration stories (both things it used to lack for long but now nails).

Rails JS frameworks: Ember.js vs. AngularJS
A very good Ember-Angular comparison, heavily focused on Rails and Rails tooling etc, but there’re a few good points even if you don’t use Rails.

Yahoo now uses Ember for all internal and external ads & data web apps
An interesting reddit comment spotted and shared on twitter by Tom Dale (@tomdale), the creator of EmberJS.

Ember.JS 1.8.0 And 1.9 BETA Released
A very good example of how Ember.JS manages version upgrades. Ember 1.8.0 is equivalent to 1.3.0 in Angular, except they are handling the version transition very nicely. Note the deprecation model similar to jQuery’s when deciding to change things in a major release.

The Road to Ember 2.0 RFC
Directly from Github, a “request for comments” pull request is exactly what decides what Ember.JS 2.0 is going to be like. Amazing!

Learning EmberJS


Not really a tutorial guide in itself, but good collection of resource and plan to study Ember if you consider learning it

ReactJS

Well, we talked about Ember, so, here’s another one for React :)
BTW, React is being used in a few areas of Facebook itself I heard, like the comments.

Reactive MVC and the Virtual DOM
Apart from learning how to get started with React, this tutorial explains the approach the framework takes to work in the first place. For example, instead of extending the DOM and writing to it, React uses the shadow DOM (think the non-modifiable :before and :after elements you use in CSS for styling) for rending its views. This is very similar to the way Web Components typically works. It has some polyfill for older browsers though (up to IE8 I think).

HTML 5

Open Web Platform Milestone Achieved with HTML5 Recommendation
Do you know that HTML5 as a final W3C recommendation was only published end of last month? Yes, October 28, 2014. See the HTML5 recommendation page.

5 Obsolete Features in HTML5
First, obsolete means probably not supported. This is a bit different than deprecated which means it’s not obsolete yet but will be sometime in the future.
Here’re the five: the hgroup element, the pubdate attribute on time element, the scoped attribute on style element, the command element, and the center element (the only one a few might still be using for dirty hacks). A few are actually fun to read about!

Free Books

The following are books that you can read freely online, but you are also encouraged to buy / support them if you find them useful, to help the people working on them keep the great work.

Pro Git – 2nd Edition
The 2nd edition of THE git book, the official extensive Git reference.

High Performance Browser Networking Book
This book by Ilya Grigorik, a web performance engineer and developer advocate at Google (you should follow him on twitter or G+) covers everything about networking that many web developers should know, but they probably don’t.
I suggest you take a look at the table of contents, find areas which you feel more interesting (I’m certain you’ll find a few interesting areas you didn’t know about as you thought you did) and give them a read.

Craftsmanship

I came up with this category just to put the following article into this issue. It’s the best article I have found in a while, even though it’s not about code.

How to find your passion
Behind this very simple title a GREAT article that will make you redefine what passion is, and that’s a VERY good thing. If you don’t buy into the self-help stuff, I highly recommend you make this one an exception. A must read for pretty much everyone IMHO.

More from @Meligy / GuruStop

If you have made it that far in the issue, and you like what I brought you today, let’s connect in even more ways!

Follow Me On twitter — @Meligy

Check The Newsletter Archive — gurustop.net/newsletter

Get Friends To Subscribe — gurustop.net/newsletter/signup

Remember that you can just reply to this email or mention me on twitter to tell me what you feel needs to change in next issue. And please to tweet it to your friends too, the more people enjoying this, the more it encourages me to make it better.

Until next issue,

Meligy

Meligy’s AngularJS and Web Dev Goodies – Issue 1

Hello there!
Welcome to the first issue of this Angular.JS and web-dev newsletter. The newsletter is going to be a weekly collection of programming related findings that I find interesting throughout the week.

As the first issue, and I knew a few of you have been on the list for more than a week. The links for today’s issue are going to be from my findings in the last couple of weeks.

The different sections and links are going to evolve in the coming issues. Maybe add more of this, less of that, merge/split things, etc. — You can tell me how you want the newsletter changed on twitter or by email.

Angular.JS — New & Hot

Angular.JS Changelog (New 1.2.x & 1.3.x Releases)
Did you know that there are 2 release candidates of Angular.JS 1.3 out already? RC0 and RC1. RC2 is very close to the corner too, and the last 1.2.x version is 1.2.24. Use the page to stay updated about Angular.JS version progress.

Adventures in Angular, The Podcast
A nice podcast just for Angular.JS stuff (co-hosted by John Papa). There’re 7 episodes out already with topics like the history of Angular.JS (1st episode, I bet more details than you know), how to learn it and teach it, running meetups for Angular.JS, build processes, etc. Each episode includes some special resources picks as well.

Angular.JS — Resources

Video: AngularJS Fundamentals In 60-ish Minutes
Oldie but a goodie! This is the main resource I give to everyone who wants to learn Angular.JS. Once you get all the main conecepts

Common Problems & Solutions When Using Select Elements With Angular.JS
If there is one small part of Angular.JS that’s completely missed up, it’s the select element directive and its corresponding ng-options. It’s very hard to do simple things like have an option pre-selected without having it replaced by an empty option you didn’t add in the 1st place. That’s why this post, which shows all the select problems solved with some non-well-known tricks is the most read post in my blog today (you can skip the video at the end).

AngularAgility
I’m not sure how popular this library is, but it can be quite useful if you are using forms a lot in Angular.JS. It generates form fields for you using Bootstrap styles, but you don’t have to use it this way. I only use one part of this library which is generating validation error labels, and showing them smartly. By smartly I mean showing error only when the field has been edited or the user tried to submit the form, etc. That’s where I find it very useful.

ng-book, The Book
From the same guy behind ng-newsletter articles, this seems to be the best Angular.JS currently available.

JavaScript — ECMAScript 6

Video: Douglas Crockford – The Better Parts
This video from April Douglas talks about ES 6 and other changes happening to JavaScript, and to his own opinions, like this alternative to object.create() that he now uses. It’s also such a fun video like other videos from Douglas usually are.

ECMAScript 6 modules: the final syntax
The final ECMAScript 6 modules syntax was agreed on in July this year. This post gives an overview of how modules work in ECMAScript 6. Pro Tip: Explore the blog when you are there, it’s a great JS source.

Collecting and Iterating, the ES6 Way
The post talks about collections in ES 6, but it also has several links to learning other areas of the language, and also to es6-shim.

JavaScript — Libraries

Flot Charts (JavaScript Library)
In my current project I needed to display a bar chart where bars show in green or gray based on some criteria. I needed IE 8 support so something like d3 wasn’t an option. Then I found Flot, and although the API was quite very verbose, I was able to achieve what I wanted. While I can’t share the project code, here’s the prototype I created to test it.

Node.JS

Learning Gulp
A nice visual tutorial for learning Gulp task runner.

ASP.NET

ASP.NET vNext Community Standup
ASP.NET team is working on a complete rewrite of the framework in the next version. It should be able to work on Mac in production, and have autocomplete in Sublime Text, use Grunt or Gulp to combine and minify CSS / JS. Scott Hanselman started a weekly Google Hangout with the team to show what they work on that week.

What is the significance of ASP.NET vNext? (Quick 6 points)
Whether you are someone who really likes or really dislikes ASP.NET as it is now, in this post I have a quick summary of why the new complete rewrite in next version should be really good.

Introducing Gulp, Grunt, Bower, and npm support for Visual Studio
Microsoft decided to stop making fights that make no sense. Most clinet-side libraries are on Bower package manager not Microsoft’s Nuget Package Manager, so, they decided to support that in Visual Studio, first as an extension to VS 2013, and then soon as part of the product in VS vNext. They also support Grunt / Gulp (so, they didn’t try to declare a winner). I talk about these plans in my blog as well.

Git

GitHub Flow Like a Pro with these 13 Git Aliases
A nice blog post by Phil Haack from Github on using git aliases when following Github flow.

Git pretty
A flow chart for showing which git commands you might want to use in different cases.

UI / Design

Grunt Email Design Workflow
A Grunt workflow for designing and testing HTML email templates with SCSS. I haven’t played with this myself (so no, it’s not used to produce this email), but it’s kinda promising. I already use SCSS and use PreMailer.NET to inline CSS in emails sent from the applications I develop.

UI Gradients
A nice tool for gradient hero content inspirations for any landing page you might be creating.

Design Tips for Developers
Since we devs ending up mocking with designs a lot of the time, these are targeted resources for helping with that.

More from @Meligy / GuruStop

Follow me on twitter — @Meligy

Check The Newsletter Archive — https://www.gurustop.net/newsletter

Get friends to receive the newsletter — https://www.gurustop.net/newsletter/signup

Just Noticed GitHub DOES Support SubVersion/SVN [Not only Git]

The SVN News

Today I was hanging around GitHub when realized a relatively old news, dated to April 1, 2010, saying they do support SVN.

Announcing SVN Support

Yes, it’s April Fools day. Very funny date to announce anything serious as they admit themselves in an update to the news post, but it DOES work.

Use the same Git clone HTTP URL, just add “svn.” between “http://” and “github.com”:

http://svn.github.com/[user]/[repository]

It even allows you to write changes back to the repository, as announced in the more recent news post, dated May 4, 2010, check it out for the “cavets” (known issues):

Subversion Write Support

That uses the same URL but with HTTPS:

https://svn.github.com/[user]/[repository]

This should work best when you want to get some project for read-only access or very few commits from your side, when this project has a very long history you are not really interested in. Of course you wouldn’t want to use that if you are leading (or a main committer to) a project hosted at GitHub.

Background, Me and Git (Safe To Skip)

I have been playing with Distributed Version Control Systems (D-VCS) lately, not because it’s fun (it is), but mainly because many open source libraries I’m a fan of have converted from SVN to Git, most of them hosted at GitHub.

Although I feel geeky when dealing with Git (nice feeling), having to deal with its tooling was a bit unpleasant (I’m not against Console, but given there are alternatives with good GUI in other VCS, it felt bad), and having to get entire version history not last updates only for some projects with very big history was quite slow and bandwidth hungry thing.

I discovered the “-depth” switch in git clone command which allows getting last updates by checking TortoiseGit UI, but it still doesn’t play nice with pulling more recent changes after this. Best way is to drop what you have and re-clone the entire working copy.  This is bad not only for speed but also it removes some changes I usually need to do (and keep, those I mention at the end of the post).

Also tried TortoiseHg git and SVN modules thinking ti’s a better tooling, but I found that it doesn’t play nice with them also (the details aren’t at the top of my head right now).

What I’m Using It For

So, this news is very nice for me. That allows me to do the exact thing I needed. Get last version, modify local changes I’m not interested in merging with main project (like using key file with some VS project, or upgrading entire VS Solution version from VS2008 to VS2010, etc), update later when some remote changes happen, and get those merged with my stuff.

The clear example for this is NHibernate (hosted on SVN but I hear in uNHAddin mailing list there are early plans to convert to Mercurial). It allows me to do exactly that, and I was willing to do the same with FluentNHibenrate (hosted at GitHub). Now I can, YAY :)

Using Different VCS Clients?

To make it clear, this is not to get rid of Git completely, I think I need to get involved in it more. I used to like Mercurial more, but seems with time I’m getting into this git thing.

It’s nice there are many VCSes to choose from in general, but not nice that you cannot choose only one for yourself. Seriously hate the fact that I have to use different VCS clients at the same time, especially when that depends on what VCS the project uses, not what I happen to prefer.

Now CodePkex, GoogleCode, GitHub support SVN. That’s good for me. Will try to stay there as long as possible. TortoiseHg supports Git/SVN also via plugins, but I won’t stick to that as it’s not as great tooling as I need and extensions don’t always work right for different tasks.