Category Archives: AngularJS and Web Dev Goodies Newsletter

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 gurustop.net/newsletter.

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:

AngularJS

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

Egghead.io Cheat Sheets

Egghead.io 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 egghead.io videos. I found this channel by accident via a video about Isolate-Scope Attribute Expressions Use Dependency-Injection In AngularJS.

Testing

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

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

angular-translate
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.

ngTasty
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.

gulp-ng-config
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

dillinger.io – 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 dillinger.io 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.

JavaScript

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

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.

stream-handbook
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

ASP​.NET MVC

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

ASP​.NET vNext / ASP​.NET NET 5

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:

Security

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.

Books

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

Craftsmanship

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.

ng-sydney

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.

Finally

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?)

Thanks!

Have a great 2015 everyone :)

Meligy’s AngularJS & Web Dev Goodies — Issue 6: Performance, Rants, & More

Here we are again with a few more picks, Angular and stuff…

Oh, forgot to say Hi first. Hi!

If this is the first time you read this newsletter, check out all previous issues at gurustop.net/newsletter (you get early access to the picks via subscribing to the newsletter).

This time I want to share with you that the new ng-sydney usergroup seems to be up to something. I have finalized the details of the first meet-up and it’s going to be next week on December 3. Sorry if this doesn’t mean much, but you are my friend, and I’m very excited! Hopefully in the next issue I’ll talk to you about how the night goes.

I know those lines are trying to stand between you and the links, but one last thing before we get to these. Please give me a hand and tell your friends about this newsletter if you like it. Just mention it verbally to your mates or tweet something about like this pre-written tweet suggestion if you feel lazy. The more people this newsletter helps the better.
Remember that I really appreciate your feedback about what to focus on more or even completely change, just email me or mention me as @Meligy on twitter. I’ll listen.

Enough intro, let’s get to the meat of this issue…

Angular

Tutorials

Speeding up AngularJS apps with simple optimizations
A very nice article that shows some small things you can do to improve your AngularJS performance.

Improving Angular web app performance example
This example provides very good tips on how to get better performance of your application if you simply have to do complex / expensive stuff and that’s just the reality.

Official Angular Docs: Migrating from 1.2 to 1.3
I expect that some of you are going through this exercise, so here some help.

Using Breeze JS to Consume ASP.NET Web API OData in an Angular JS Application
OData and Breeze are not that popular, but I have found OData to be very useful, and this article made me think that I maybe I should check BreezeJS as well

Build a MailChimp Signup Form with AngularJS
(Not a mailing list form, the form you use to actually sign up to create Mailchimp lists, etc)

Angular 2.0

Migrating to AngularJS 2.0
A very good article on tips to apply to your Angular 1.x codebase, that might help ease the transition when it’s time for Angular 2. There’s another viral article on the same topic: How to Embrace Angular 2.0 Today with a Future-Friendly Angular 1.3 Application – in case you missed it.
The common wisdom in this area goes like: create custom directors instead of controllers and keep as much code as possible in services anyway, use controller as to pass data to view instead of $scope. Don’t communicate with parent scopes and use isolate scope in your directives, and start using ES 6.
My personal take: It’s too early to tell if these are actually going to help, and the team is considering having a compatibility layer to map the new APIs to old APIs anyway, they just are keeping thinking about it until they actually finalize the new API shape. The design patterns suggested are good to follow though.

Vido: Using ES6 With Angular Today
The very popular Pluralsight author Scott Allen talks about using ES6 with AngularJS today. This is particularly useful as ES6 is the way to go with Angular 2, so it (again, might) make your migration a bit easier.

Tom Dale Angular Rant
Tom Dale is one of the main creators of Ember. With how Ember is excelling in gradual improvement, of course he did have a few things to say about Angular. Turns out someone collected all his Angular rants as a Storify collection!
If you are interested how I found this one, it was mentioned in the article: Why Web Tools Like AngularJS Need To Keep Breaking Themselves.
A very good read from the same source on the variance between Angular and Ember is: Innovating Fast And Slow: EmberJS Insists, “We Don’t Need To Break The Web”.
And you are in for more rants, check: 2 years with Angular. Verdict: good enough (not really).

Modules / Directives / Tools

angular-kickstart
A project scaffolding tool and build system for AngularJS projects. Includes Gulp and Bower and a few other things. The docs suggest some good stuff in there.

“kcd” Angular Module
When you use AngularJS 1.3 one-time binding, and you actually want to rebind your watches (except only in certain conditions, not all the time like normal bindings do), this directive solves this problem by simply running the Angular compilation again on the element it’s used on. There’s a simple test.

News

Rob Eisenberg: “Leaving Angular” (Reddit Comments)
Not really news if you are on social media. The writer of “All about Angular 2” and main developer on the new Angular router is leaving the Angular team. Crazy times, eh?
OK, he explicitly mentions he doesn’t think that Angular 2 is going to suck. He just says that there’s whatever (unmentioned) difference in the way he wanted it and the way the rest of the team did. This gets even more interesting when you know he is going to work on his abandoned Angular alternative framework “Durandal”, because the plans for the so called “Next Gen” Durandal have been quite similar to Angular 2 in the backwards compatibility side.
So, nothing more to watch in this space. If you are like me wondering what’s happening to Angular router, then be assured that the team is still working on it. It has been handed to Brian Ford from what the team meeting docs seem to suggest. It’s quite possible that the design of the router will change from what was demonstrated in ng-europe.

ui-router 0.2.13 release
There have been a new couple releases of ui-router in the last couple of weeks. You probably want the latest release if you intend to use it with Angular 1.3.
Remember that ui-router is the best router we have for Angular to day. The new Angular router will be released sometime next year (not sure of the exact time-frame).

AngularJS 1.3.4 and 1.2.27 are out
Yes, there’s some good work going in that area. The team is also working on Angular 1.4 BTW.

EmberJS

Ember.JS 1.8.0 And 1.9 Beta Released
They are getting rid of the string based Handlebars template and replacing it with the compatible HTMLBars template. I like how they approach deprecation as well.

What is HTMLBars and how is it better than Handlebars
In case you wondered ;)

JavaScript

Video: Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014
A very good video that explains how the browser JavaScript VM (at least v8) handles threading. It shows what the JavaScript event loop is and how it works, including how it handles asynchronous calls like timeout, etc. A must watch.

Video List: JSConf
The previous video from JSConf conference, which has several great videos as well. This is the full list. Browse it and let me know what other sessions you like.

5 functions of the Console object you didn’t know
If you don’t know any of these console methods console.assert(expression, message), console.table(object), console.profile(name), console.group(message) and console.time(name), you might want to check this post out. They are very useful, and quite unpopular!

MongoDB

Video & Slides: Preparing for peak holiday season: Ensuring a seamless customer experience
A webinar that goes through a few ways you can handle a very large load (like Black Friday sale), while still offering the data as close as possible to real time.

Craftsmanship

Pluralsight Smarterer Tech Pro Challenge
Smarterer Flock is a new online testing platform that is getting some strong traction recently, and I expect it to continue. It was recently acquired by Pluralsight (which aligns very well with them as the test identifies the gaps, which you later can attend courses to fill). They also have interesting Elance integration.
I recommend that you register and have a couple questions / tests. A quick tip: Read all the answer choices before you pick one (the answer is committed once you select it, and there’re a few “All” and “None” choices). It’s generally fun to play with too.
Watch this space. It will probably grow!

Write every day
Write drafts, with Markdown or whatever, get yourself used to writing even by writing just for a few minutes a day. It will make a difference, one that you’ll like.

Overcoming Impostor Syndrome
A good story also subtitled “Or How I Learned to Stop Worrying and Love Coding”.

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 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 4: ng-europe Special

Hello there,
First, allow me to welcome all the new subscribers who joined the newsletter since last issue. You can view the newsletter archive at any time on gurustop.net/newsletter. I’d also like to thank all the subscribers who have been on board for a few issues already. Please make sure to tweet about the newsletter to all your friends to get on board as well.

This time we have a bit of a theme around ng-Europe conference and recent Angular.JS 1.3 and 2.0 announcements.

A small warning though. This is a bit of a different issue. One that I get to be a bit more chatty at instead of just describing the links being shared. As always, I’d love to hear from you whether this style is better or worse. Reply to this email or mention me on twitter as @Meligy.

ng-europe

ng-europe is the European version (was held in Paris) of ng-conf 2014, the first big single-track Angular.JS conference. It took 2 days with presenters from the Angular team and community leaders. The conference is important as it’s the place where the Angular team finally explained their big plans for Angular 2.0, and a few related topics got more exposure like Angular Material Design.

Conference Notes:  Day 1  |  Day 2    (biggest announcements came out in day 2)
A wiki-style collection of notes written by conference attendees. The best place to go to for getting a summary of the conference. You can later decide which sessions you might want to watch in details.

Video: All ng-europe Videos
All the conference videos are on YouTube. Check them out. Plenty of good stuff.

ng-europe Session Slides
For times when/if you need to refer to any of the session of the session slides.

Video: ng-conf 2014 Videos & Slides
I found this while preparing the newsletter, from the same site that put the ng-europe slides together. If you are bored you can check it out. Most if not all topics are still relevant.

Angular 1.3

Angular 1.3 was announced in early October, the main focus has been speed improvement and getting some directive improvements for form manipulation. We see one-time bindings, new way to create validations and show error messages, and more. Beware though, no IE 8 support.

Official Announcement — AngularJS 1.3.0 – superluminal-nudge
The post where Angular.JS 1.3 was announced. A good summary with links to documentation for each of the new major features. There’s alway the full changelog as well.

Vide: Angular 1.3 by Jeff Cross & Brian Ford at ng-europe 2014
I thought I’d highlight this video in particular. If you have 20 minutes to spare, watch this video, a good walkthrough of the features from the team that developed them.

Angular 2.0

Angular 2.0 has been in design phase since last December, while Angular.Js 1.3 was in development as well. Since then, we knew Angular 2.0 is going to be a big change and a complete rewrite, but we didn’t know how big exactly till ng-europe.

In Angular 2.0, the team plan to use EcmaScript 6 module system to replace Angular’s own module system AND dependency injection.

They also plan to use ES 6 classes to create directives in a new way that doesn’t just replace the current directive system but also the Angular controllers. With no controller, there will be no $scope as well (they referred to $scope as “Directive Definition Object”, DDO in ng-europe).

While on it, Angular 2.0 will also get rid of jqLite in favor of using the DOM directly (since it’s designed for modern browsers, where the DOM API has evolved enough already).

RIP in AngularjsJS 2

Video: Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014
(Just highlighting the relevant ng-europe video)

The announcement of Angular 2.0 had many reactions, more negative than positive. The main issue is that Angular 2.0 as explained in ng-europe feels like an entirely different framework.

Angular 1.x (The way from 1.3 to 2.0)

The announcement of Angular 2.0 makes people very skeptical of using Angular 1.x, even with Angular 1.3 still new, having tons of great features and performance. Here are a few write ups and news that help you make an informed decision whether to use Angular 1.x or not.

New Project Lead for Angular 1.x
Igor Minar (@IgorMinar on twitter), the AngularJS team lead, has decided to assign the most active Angular.JS community member as the leader of Angular 1.x. He says that there’s a lot of work to be done in Angular 1.x and if he focuses on both releases, not much of it will happen as he’s mainly focusing on Angular 2.0. Also check Angular 1.x: The plan forward, the letter Igor wrote to the team about the change.

Angular.JS Weekly Meeting
While not specific to Angular 1.x, this seems to THE place to watch for what’s happening in the Angular 1.x space. It’s as close as we can get to what the team is thinking, at least for now.

If you watched the ng-europe videos, you might be confused about the migration path from Angular 1.x to 2.0, as it looked like there isn’t going to be any. Looking at the plans and meetings for Angular.JS team, there are a few hints that suggest things might be a bit better than expected.

For example, there is a plan to share some critical components between Angular 1.x (1.3 in fact) and 2.0. Material Design and the Angular 2.0 router are the biggest names to mention in this context. Some 3rd party libraries have similar ambition as well, like Restangular.

Screw You Angular
Although the title suggests a rant, this post is actually tries to address all the criticism AngularJS got for lack of obvious migration path from 1.x to 2.0 (I was collecting these posts for the newsletter since they had very good points, but changed my mind as the post links to them anyway).
The answer the post provides is that the team hasn’t thought about migration because Angular 2.0 doesn’t exist yet! Once v2.0 gets more shape, the team can then think what the migration path to that could look like.
Not a very bad argument, and since the author is an AngularJS insider, it’s more of a knowledge than a guess.

AtScript

It seems that even EcmaScript 6 was not enough for Angular 2.0 vision of declarative programming that the team decided to implement their own language, AtScript! Crazy, huh?

It sure it. Many reject Facebook’s JavaScript framework, ReactJS, just because it introduces a new language (extension of JavaScript, .jsx files) that mixes HTML and JavaScript and requires its own compiler to translate to JavaScript. Angular.JS did something similar except the syntax isn’t as weird.

AtScript, is an extension of TypeScript that should be able to compile to ES 6 (and then can be compiled to ES 5, the current JavaScript) or Dart (I know, I don’t care too, but BTW, most of the PoCs and early experiments of Angular 2.0 and some 1.x were in Dart). It adds some annotations that the framework will use to differentiate different kinds of directives and more…

AtScript

AtScript, Google’s new superset JavaScript runtime
A good article with highlights from the ng-europe session.

Video: Miško Hevery – Keynote on AtScript at ng-europe 2014
The video of day 2 keynote where AtScript was announced. Pretty fun to watch BTW.

Video: ES6 in Angular 2.0 by Erik Arvidsson at ng-europe 2014
This video explains how Google is planning to extend its ES 6 to ES 5 compiler so that it handles AtScript as well (from the user point of view). You get to see how the pieces of the puzzle come together.

AtScript Primer
The official AtScript design document.

If you are like me, you must have been quite surprised that Google has considered Microsoft’s TypeScript as a base for AtScript, here’s what Sir Anders Hejlsberg, the father of C# and TypeScript, thinks about that, in 140 letters or less:

More from @Meligy / GuruStop

Thanks a lot for making it that far. If you like what I brought you today, let’s connect in even more ways!

Follow me on twitter — @Meligy

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

Get friends to receive the newsletter — https://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 3

Hey there,
Welcome to Issue 3 of the newsletter. If you want to check the previous editions, you can go to gurustop.net/newsletter. You can access a particular issue like, for Issue 2 you go to gurustop.net/newsletter/2.

This time I have played a bit with the schedule and the order of sections. The idea is to experience different ways and hear your feedback on what works better. either on twitter or by email (simply replying to this message).

SEO — News

Video: Google will render JavaScript by end of the year
During AngularJS NYC usrgroup for September 2014, Brad Green, a Google engineering manager working on Angular.JS among other things said that Google crawler will render all JavaScript by the end of this year, and their should be tooling for checking that in Google Webmaster Tools as well – Discuss on reddit.

Angular.JS — Libraries

bind once for Angular.JS < 1.3
A set of directives that allow you to bind values to the UI only once instead of watching for model changes to update the UI. This is particularly useful when you have a long readonly list inside ng-repeat where most properties are unlikely to change until the entire list changes (and then the whole template will be re-rendered).
The concept is now native in Angular.JS 1.3, and there are other libraries that try to enhance it, like angular-watch-require and angular-watch-when.

overmind.js
If you use require.js and want to have lazy-loaded modules with it, there are several tries out there that get that sort of thing done. If all you want though is just lazy loaded modules that are loaded and bootstrapped on the fly when a certain route tree is matched (like areas in ASP​.NET MVC Areas or Rails Namespaces). Might be good for large Angular.JS apps. It also has been mentioned on the Adventures in Angular podcast.

JavaScript — MVC Frameworks

MVC Architecture
A very nice article about how we don’t exactly implement MVC as 3 parts, Model, View, and Controller. We usually had other parts too. I think the closest way to how I implement MVC is the last picture in the article.

Why I Don’t Want Your JavaScript Framework but I Love You
If you are in the mood of reading about what homework you may want to do before you actually go ahead and use a JavaScript framework, this could be a good read.

JavaScript — Ember.JS

I have a few links for Ember.JS this time that it will feel like I’m moving to it, although I’m not, I still find its innovation very inspiring as you’ll see below.

Mistakes I Made in My First Ember Project
If you have been following the newsletter for a bit, you know I value knowing how other SPA/MVC/MV* frameworks solve the same problems that Angular.JS solves. I think this knowledge is beneficial regardless of the framework because many of the issues have equivalent in every framework, and thinking about different approaches can really help you get the most out of whatever framework you use.

Event Delegation in Ember.JS – StackOverflow
When you use ng-click inside ng-repeat in Angular.JS, it doesn’t usually set one event handler for the parent of the element and use event bubbling to set it, although you can do it yourself via a directive. It was interesting to find out randomly via StackOverflow that event bubbling is how Ember.JS works by default!

Building rich single-page application with Ember.js
Historically, one of the things that stopped many people from learning Ember.JS was how hard it was to get to understand its pieces. This is now changing a lot (or may I say changed?) with better documentation and more great guides, like this one, which was very simple and lovely to browse.

JavaScript — ES6

Traceur is Awesome! … but still a little Painful
Don’t be turned off by the title. Traceur is a nice tool from Google to compile ES6 code to ES5 code that can run in any ES5 browser (most browsers, and even older ones can be polyfilled). This post describes what the experience is like when using it (.NET people might find using TypeScript a better option for its VS integration though, although it’s not not exactly ES6, you can sometimes go even crazier with some F# mix).

JavaScript — Debugging / Performance

Video: Advanced Debugging Techniques with Chrome
A must see video of what goodies exist in Google Chrome dev tools (including some of the relatively new features like new enhancements to emulation), this is probably a must-watch video for you. I have been using the tools for years and found quite a few things I didn’t know before.

JS Parse and Execution Time
When you use a framework (quite often you should), there’s only so much you can control in terms of performance. This article examines the time it takes to parse and execute jQuery on so many browsers and devices. It has some interesting observations, like how the total times vary like crazy between different devices, and how device hardware is still the major determinator is hardware rather than software (OS or browser).

Security – HTTPS

I think we are in the (very?) early days that will lead to all websites running HTTPS by default. Apart from privacy concerns, SCARY attacks, there’s also industry leaders push and relative ease of implementation. But it’s not something that everyone needs to worry about just yet.

SSL and SEO: Don’t Panic
There are a few messages that I want to send from sharing this:
1. Google announced they will consider SSL as one of its many ranking factors
2. This doesn’t mean you should freak out if you are not using SSL (the point of the link above)
3. But SSL is worth it anyway, as in most recent hardware and software (including IIS 8 and maybe 7.5) it’s already fast (the traditional old concern about SSL, apart from cost for tiny websites).

Slides: Is TLS fast yet?
If you are thinking about implementing HTTPS and worried about CPU performance, your server documentation documentation should tell you whether there are significant performance overhead (I checked some common ones and they were all saying nothing to worry about). This presentation helps assure the same idea.

Cloudflare – Introducing Universal SSL
The well known CDN provider Cloudflare announces availability of SSL services for all their plans, including their free plan. They serve files in HTTPS, and can be configured to pull assets (as source files to publish on the CDN) from HTTPS URLs as well. Here’s a basic write up of how to use it.

Security — General

Waxing Poetic with SwiftOnSecurity
I didn’t plan to make this newsletter mostly about security as it ended up being, but this story that reminds us of how some users can be so vulnerable in a way we can’t blame them for, is quite a good read.

Microsoft — Windows 10

Video: Windows 10: Enterprise Features & Core Experience for Businesses
You must have seen a ton of Windows 10 videos already, for me, this was pretty much the deepest one of them that related to me as a developer and showed the philosophy of the product.
One fun moment in the beginning of the video was giving a reason for the name, Windows 10 (instead of Windows 9), apart from considering Windows 8.1 as 9 (if you want) which the video didn’t suggest, it said that the main idea was calling it Windows One, similar to Xbox One and One Drive, etc. Windows One was taken as Windows 1, so they went for Windows 10! (if this is silly still – I think it was meant to be more funny than true-, I promise the rest of the video isn’t).

Video: Scott Hanselman Detailed Windows 10 Tour in just 8 Minutes
Scott is very well known in the ASP​.NET developer community as his work at Microsoft is mainly around that community and ASP​.NET MVPs, etc. He is a great person and speaker. His Windows videos are not something that he does for work, which makes them even greater and more realistic.

Windows 10 Insider Program / Preview
Just in case you missed the URL to get the technical preview! I have heard a few positive comments from some of those who played with it, especially on a Surface laptop (of course).

Apple / IPhone / iOS — Quick Links

iPhone 6 Screens Demystified
Also check their iPhone resolutions guide

iOS 8, thoroughly reviewed
Very long / detailed review

Video: Steve Jobs introduces WiFi to the masses with a hula hoop!

JavaScript — Quick Links

Promises in the Google APIs JavaScript Client Library
Google’s JavaScript SDK now return promises, for easier integration into promises-all-the-things!

Bye Bye Javascript Promises!
async/await like code in JS?

rcss.js
A JavaScript library to generate responsive stylesheets.

Explorations In Automatically Fixing JavaScript Linting-errors
By Addy Osmani from Google

Calculating Standard Deviation with Array.map and Array.reduce, In JavaScript
A bit of a different challenge

More from @Meligy / GuruStop

Thanks a lot for making it that far. If you like what I brought you, let’s connect in even more ways!

Follow me on twitter — @Meligy

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

Get friends to receive the newsletter — https://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.

Until then,