Here’s what the Angular team recommend to developers based on the AngularU keynote & Q A session

From watching the AngularU conference keynote and Q & A session, I noted some of their hints and answers into a list of recommendations

  • Use the latest stable 1.x version of Angular, at the moment 1.4
    No surprise, ha?!

  • Use the latest stable TypeScript.

    • Use the official Angular type definition file when using TypeScript.
    • Note that TypeScript 1.5 beta mainly gives you decorators/annotations, which are only relevant for Angular 2 anyway.
    • Alternatively, at least move to ES6, using Babel or Traceur
      • Both babel and tracer support annotations.
 
  • SystemJS seems like package manager of attention today, as it allows you to load libraries regardless of where they are packaged
    Obviously they are also checking all popular packaging options.

  • Follow John Papa’s Angular styledguide.
    That was a BIG endorsement IMHO, coming from the official team, even that it was kind-of in passing.

  • Use ui-router until the new Angular router (I think now Component Router) is ready.
    This was a very subtle recommendation, probably just due to the new router not being ready, and lack of other equivalent options.
    At least they said they looked at it for the new router, which wasn’t the case when I checked in March!

Disclaimer: The list is my personal interpretation – You can watch the full video and judge the correctness / accuracy.

AngularU, NPM 3, & Hosting Recommendations — Issue12 — Meligy’s AngularJS & Web Dev Goodies

Hello,

For the new ones around here, this is @Meligy writing this issue of GuruStop.NET Newsletter for JavaScript developers, especially those working with AngularJS.

I’ll mix in a few quick links with the ones I describe, for a change.

Please reply back and tell me whether you think this is a good idea.

Let’s jump to today’s picks:

AngularJS

AngularU Videos

You probably heard about AngularU, another big Angular event like ng-europe, with speakers from within and outside the Angular team.

There is a ton about Angular 2 (roadmap, server rendering, forms, TypeScript), but also several topics about Angular 1.x for both coding techniques and libraries, and even integration with different backends.

Angular 2

Contribute to Angular 2 [“community-help” Github Label]

In an up-for-grabs way, Angular 2 repository issues now has a special label for issues that the team expects external contributors from the community might be able to work on easily.

Check the list. You might find something that you can do!

React Native and NativeScript Integration [Article]

A narration from the “AngularJS 2 Roadmap” in AngularU that gets you the news pieces directly. It also links to the Angular 2 Rendering Architecture document.

Styling Angular 2 components [Article]

Angular 1.x

gulp.js starter for AngularJS SPAs

A scaffold starter kit for Angular applications that uses gulp and bower and tries to set a few more things than folder structure (which seems nice) like fonts, etc.

Similarly, here’s another one that uses NG6: ES6 + JSPM (or Webpack).

Angular Formly [Library]

This one seems to be getting A LOT of attention. I see several people sharing it, and I hear about it in the Angular Air podcast.

Give it a look, or check this article about how to use it.

New features in AngularJS 1.4, AngularJS Meetup South London [Article]

Using Angular 1.x With ES6 and Webpack [Article]

More traps, anti-patterns and tips about AngularJS promises [Article]

Directives (Angular 1.x)

A Guide To Transclusion in AngularJS [Article]

Very good explanation of templates and, obviously, transclusion.

Using NgModelController with Custom Directives [Article]

From GuruStop.NET

Using track by correctly with Angular 1.4 select ng-options

This is a one year follow up of the most read post ever in my blog, about select element quirks in AngularJS, How to set the initial selected value of a select element.

AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was getting ready for another post, bootstrapping my demo angular module manually, and I just couldn’t get Angular to work. After a bit of frustration, turned out I needed to run this after DOMContentLoaded was fired.

ReactJS

Nvigating the React Ecosystem [Article]

We know React is just a template / view library. What other tools and libraries are there that make building whole apps with it possible?

The pursuit of high performing, easily maintainable React apps [Article]

JavaScript

Debugging

Useful Javascript debugging tips you didn’t know [Article]

Being able to monitor function calls in the console is nice. Also, if you didn’t know about, black boxing library scripts is VERY nice for debugging jQuery / Angular / Polymer / etc. apps.

ES2015 / ES6

In case you don’t know, the committee that releases the JavaScript standard (EcmaScript standard) decided to have version names after the year of release.

So, the official name for EcmaScript 6 is actually EcmaScript 2015.

Announcing “Exploring ES6” [New Book] [Freebie]

The book is free for online reading, and you are encouraged to buy downloadable formats to support the author.

It’s high on my reading list. This guy’s blog is a very good resource for JavaScript info.

JavaScript.com

Code School learning website has aquired the domain and put some nice free learning materials in there for starters.

5min ES6 Intro (With Babel) [Video]

Setting up an ES6 Project Using Babel and Browserify [Article]

NodeJS

NPM 3.0 [News]

BPM v3 is released with label “latest” and actual description “beta”. It’s going to be side by side with future v2 releases, but at least it should fix several common issues with v3.

Gulp

Getting started with gulp [Article]

Good article that was updated a lot to keep up with Gulp.

Web Design

Improving Web Fonts Performance [Slides]

Bootstrap Sass Installation and Customization [Article]

Designing User Interfaces for Your Mother [Article]

Text Editors / IDEs

Visual Studio

JavaScript Editor Improvements in Visual Studio 2015 [News]

There’s some about AngularJS & requireJS support, but my most favourite is integrating JsDoc into intellisense (autocompolete).

JsDoc fairly common in documenting JS libraries, so, a lot of them will benefit greatly from it.

@Ch9 Connect(“On Demand”); [Videos]

Channel 9 has a nice new series of various length videos about Visual Studio 2015, and other related .NET, Azure, and programming language topics.

I watched a few and liked them a lot.

Visual Studio Tools for Apache Cordova – Samples and Docs [Code Samples]

Atom

Github’s Atom free / open-source text editor.

Facebook open-sources its Nuclide IDE based on GitHub’s Atom text editor [News]

Github Atom 1.0 released (And very cool video)

Let’s see how long it will take other editors based on Atom to be in sync with it!

Software Design

Martin Fowler: Monolithic apps first, microservices later [Article]

In his own words “Almost all the successful microservice stories have started with a monolith that got too big and was broken up”.

The introduction to Reactive Programming you’ve been missing [Article]

Web Hosting

Where should I host my blog (WordPress or other), if I want my own server / VPS?

One of the blog posts I wanted to write for long time actually. In short, for Windows, use SoftSys Hosting, for Linux, use DigitalOcean, and maybe check BlueHost.

I got a comment in email saying why WordPress instead of static file based blog, but that might be a topic for another post!

Misc / Fun

DebConf14: QA with Linus Torvalds (August 2014)

One of these random Youtube autoplay videos, but I found it interesting, not having heard a lot from Linus before.

What happens when you type google.com and press enter? [Article]

How deep do you wnat to take the answer to? Send a Pull Request, it’s a Github repo :)

There’s also other variations on Quora and on StackOVerflow.

Community Casts [Videos]

A video collection website that seems to have around 100 AngularJS videos, and similar number or general JavaScript videos and for C#.

Seems like there are some people actively adding videos to it as several videos are added just hours before I checked it.

If you liked this newsletter

Donate?

You might consider buying me a coffee, or two ;)

You can donate to the newsletter via Paypal.

But most importantly

You can reply to me and make this newsletter better:

  • Is the current monthly frequency OK, or should it be closer to weekly or bi-weekly?

  • Do you like the content? Do you want more AngularJS content? Or less? More JavaScript? C# / .MET?

  • If uou find a good article, video, library / tool, or anything else that can fit into this newsletter, why not reply and share the love? Thanks :) :)

Apart from that…

See you next one :)

@Meligy –– GuruStop.NET

Solution for when AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was working on a small AngularJS demo today, when I found the following is not working:

As you can see that’s just an empty Angular app. I was trying in Plunker, I tried JSBin and same. I was very anxious.

Looking at the console, I saw an “undefined is not a function” error, deep in some AngularJS code, and a few other quirky errors as well about minified code (although my version of Angular wasn’t minified).

I couldn’t tell what was going on, till I did some googling, and found something worth sharing here.

Turns out the bootstrap call needed to be after the DOM content has been fully loaded, this is the “ready” jQuery event if you use it, or the “DOMContentLoaded” event in plain JavaScript.

So, to make this line work, all I needed to do is write the following:

If you are using jQuery, you could also alternatively write:

Just passing a function to jQuery will be equal to $(document).on("ready", myFunction).

Sharing this here to save someone else the confusion I had!

Where should I host my blog (WordPress or other), if I want my own server / VPS?

A friend of mine asked me the following question yesterday:

Need an advice on what is a good place to host a personal blog probably word press with custom domain.

I was very happy to see the question, but I always wanted to write a small post about my web hosting recomendations, and this is a good opportunity!

Here’s what I said to him:

The VPS Recommendations:

If you are going the VPS route, here are my personal recommendations:

Windows VPS

I always use and recommend:

SoftSys Hosting

This is THE Windows VPS hosting for me. Good performance, several locations (I host in West US as I get visitors from US and Australia), SSD VPS as an option (which I used as soon as it was announced), and great support and price.

Everyone I recommended it to thanked me afterwards.

Linux VPS

I haven’t done much in the Linux space, but these two are the big players used AND trusted by the people I follow and trust.

The both have tools to get you started and create the WordPress setup for you:

Classic VPS hosting, even shared hosting:

Blue Host
Blue Host is considered a budget hosting but some people used it for big stuff successfully.

Cloud Style Hosting, with SSD VPS:

Digital Ocean
The biggest sellers for Digital Ocean are cheap start point, SSD, and ability to resize servers.

Using track by correctly with Angular 1.4 select ng-options – Why can’t I select this option?

There is a change in the way AngularJS tracks each option of the select element that was released as part of Angular 1.4.

Instead of using the index of each item in your list when you don’t use track by and using the value pased to track by when you use it, it will use an object hash of the item or track by property.

If you are using track by with ng-options, and using it correctly, this change will not affect you. Otherwise, you may get some interesting side effects. Let’s see what this means.

Let’s assume the following model:

You notice that the first element has a simple key of number type. The others have different objects as their keys.

What would be the effect of that in Angular 1.4?

Without track by

Given the HTML:

Angular Will generate:

(I have tabified the results for easy read – The actual code doesn’t have all these tabs)

Angular uses the a hash of the object as its key. For items in the list used without track by we get the useless object bit, followed by a number that seems unique, but isn’t the index of the element for example.

Of course we also get the empty element added as we didn’t select an initial value. I talked about this before in detail here.

With track by

If we change our HTML to:

Where we tell Angular to differentiate between the items in the list by their key property, we get the following HTML generated in runtime:

Ignoring the first item and tabs and form classes again, and only looking at the value attribute of each option tag, we notice the following:

The generated hash code for the simple number value (key: 1), was the value itself, 1.

The generated has code for the objects, was just what you’d get if you write the object in an old browser console log, a silly useless [object Object].

Why does this matter?

Try to select item “Two” from this example (in Chrome, for example):

You can’t.

Because both item 2 and item 3 have the same value string [object Object].

Here’s the code to play with.

What to learn from this

I’d say, we have two best practices when using select and ng-options with AngularJS:

  • Always use track by
  • Always set your key to a simple value, a string or a number

This will save you too much trouble.