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

Angular 1.4, Polymer 1.0, & More — Issue11 — Meligy’s AngularJS & Web Dev Goodies

Hello there,
This is Meligy from gurustop.net/newsletter, the AngularJS and web development newsletter.

It has been quite a while since I wrote to you, and if you have been subscribed in the last month or so, this is probably the first time you read from me (previous letters).

Anyway, you probably signed up to this for some good AngularJS and web development resources / tips, and stuff, not to read this meta. So, let’s jump quick into that…

AngularJS

Angular 1.x

Angular 1.4 is now final

It was supposed to come in ng-conf a couple of months ago with a conservative plan announced in January, but the AngularJS team chose to polish it more and just had it ready.

They have a very good summary of what they added/moved in this blog post. They also added a separate migration document you should check for breaking changes.

– Don’t use $http’s .success()

A good tip about leaky abstractions. $http methods act like promises everywhere, except when you use their special methods.

If you call these inside a service or so, the consumer needs to check whether you return a regular promise or an http promise to check whether to use success(). Why not just treat it like any other promise!

Angular 2.0

[Video] AngularJS 2.0: Overview | Pluralsight

That’s not a PluralSight course on anything, just a free webinar available on YouTube. Have a look!

Dependency Injection in Angular 2

A very good deep dive into how DI works in Angular 2. It even shows you how to use the dependency injection framework on its own regardless of the rest of AngularJS.

– Angular 2 & NativeScript

Just in case you didn’t hear that the Angular team wants Angular 2 to run in NativeScript (which allows JS to work natively, and is associated with ReactJS typically today). This is their meeting notes document.

If I remember right, the other meeting notes documents from Angular team often keep the most recent meetings at the beginning. This one doesn’t, so the most recent meeting is at the end of the document.

JavaScript

JavaScript Application Architecture On The Road To 2015

Addy Osmani wrote this one at the end of 2014. In it he talks about the trends people architecting big applications and frameworks are following and why, and what problems you’d face architecting JavaScript applications today.

– We Tested How Googlebot Crawls Javascript And Here’s What We Learned

We know from late 2014 that Google started indexing JavaScript, but how good is that going? Does it solve the problem?

According to this article (the website is one of the best resources for SEO by the way), it’s mostly very impressive. You’ll still need to remember that Google is the BIGGEST but not the only crawler that might visit your site though.

Web Components

– Polymer 1.0 Released!

Polymer is Google’s framework for building independent web components (think widgets, like jQuery plug-ins or social sharing widgets, etc) that can be injecting into any website without conflicting with other content on the page. It also aims to build a big reusable component library ready for anyone to use.

While Polymer has a few similar features to AngularJS, notably data binding, it intends to be a widget framework not a whole application framework. It doesn’t offer things like routing, dependency injection, forms management, etc.

A few members of both teams said that Polymer and Angular do not have plans for merging or discontinuing one framework in favor of the other. Angular 2 aims to be able to work with any web component whether built with Polymer or not.

Tooling / IDEs

– Google Developer: TotallyToolingTips

A new article and video series about frontend tooling from Google Developers network.

The first episode is about using SublimeText for frontend, so, it’s very practical and pretty useful.

– Enhance Your JavaScript Debugging with Cross-Browser Source Maps

The article shows you how to get sourcemaps working in IE and Firefox not just Chrome. This might come handy in debugging scenarios as the world seems to shift into using other languages that translates to ES5 (the usual JavaScript) like ES6 and TypeScript.

Visual Studio

Visual Studio Code

You probably heard about Visual Studio Code already. It’s Microsoft’s SublimeText-like editor, just like Github’s own Atom editor. Actually, the word in the street is that VS Code is a fork of Atom.

Why would Microsoft do that? This doesn’t add anything, does it? It probably sounds silly to you and not worth investigating.

This is why I talk about it in here. I read all these thoughts then went and watched the video at the top of the Visual Studio Code homepage and it answered them all. There are a lot of editing and -even more- debugging experiences that are pretty inspired from the full Visual Studio. Adding these to a Sublime/Atom like editor is an awesome plus.

The features -especially debugging- are more complete for NodeJS than ASP.NET 5 (v. Next) BTW, which is funny, but at least we can be sure more ASP.NET 5 love is definitely coming.

If you are interested in VS Code, check out Johan Papa’s blog as well. He is blogging about it actively nowadays (and about ASP.NET 5 on Mac as well).

And for one or two who haven’t heard yet, you can actually get the full Visual Studio Professional edition for free as the Visual Studio Community Edition (yes, exactly as Pro) if you are alone or in a team or 5 people or less.

Publishing an ASP.NET 5 app to Docker on Linux with Visual Studio

This blog post is based on a very interesting extension Visual Studio 2015 RC Tools for Docker. The extension adds itself to the Visual Studio publish dialog seamlessly and seems to integrate very well.

Chrome Developer Tools Extensions

– Scratch JS

If you are learning ES6 and sharpening your teeth, it might help to have an extension that lets you run ES6 in the console like you do with ES5 today!

DOMListener

This extension makes you monitor / log all DOM changes, like added/removed elements, attribute changes, text changes, all. It’s pretty magical.

Although I admit, being a new tool that’s not already in my workflow, I just installed it a while ago, tested it with much wonder, then forgot about it until I checked my bookmarks for this newsletter. I guess I’ll be using it a bit more going forwards again!

Link Lists

Collections of resources for learning. You’ll want to skim over the list and decide if you find anything interesting. I mention the whole collection as I find so many interesting.

– Eric Elliott’s essential JavaScript links

This is a link list created by the author of the book Programming JavaScript Applications – O’Reilly Media. It has bunch articles, libraries and tools, recommendations of communities and people to follow, etc. It’s a bit random but worth skimming.

Actually, there’s an even nicer (forked) list that led me to the one above. It’s titled Eric Elliott’s essential JavaScript links or The way of the parrot, not.

The guy talked to the author of the list to prioritize the most important resources, then checked them on his own and wrote a summary of each in his forked list. He wanted to make sure he is not a parrot, recommending what he didn’t understand himself.

Check it out for the resources part especially not the libraries or so list. I could find pretty interesting learning links, and pretty basic / overly-obvious library links (like: react!).

– The New Boston

This site calls itself a social network or a forum, however, the value I see in it is a whole lot of videos in so many topics. The ones I checked for JS and MongoDB were recent and good. The site has a lot of categories to check though.

In closing…

That was it for this email. I’ll keep collecting resources and sharing them with you as I go. If you like them, share the love with your friends and tell them about the newsletter.

If you don’t like where I’m going with this, just email me or reply to this email, and let me know what can be made better.

Also, if you found some good article or tool that is a good fit for the ~600 web developers reading this newsletter, email / reply, or tweet it at me and I’ll have a look (and credit you of course).

As a bonus to this newsletter, you can also email me any problem or complex challenge that you have in you JavaScript or AngularJS application, and I’ll make sure to provide you with some good tips to get over it.

Cheers, and until next letter,

The Longest Write-Up On ng-conf, AngularJS 1.3, 1.4, 1.5 AND 2.0 Yet — Or — Meligy’s AngularJS & Web Dev Goodies — Issue10

Hello there, This is a special issue of the AngularJS and Web Dev newsletter. In this issue I’ll be talking only AngularJS, only ng-conf 2015, and specifically about the things we now know about Angular 1.3, 1.4, 1.5, and 2.0 now that ng-conf 2015 is over.

Quick disclaimer: This is an extraction from the time I spent watching the referenced videos. There’s a good chance I misunderstood some parts or so.

Now, to the meat of it:

What’s happening in Angular 2.0

rip-atscript

RIP AtScript .. Long live TypeScript

If you thought creating an entire new language to add an optional feature like annotations (attributes in C#), is, well, not the best idea, Google agrees!

So, they got Microsoft to sort TypeScript out, and are just going to use / recommend it.

Of course you’ll still be able to use plain ES6 or even ES5. But if you do, you’ll be writing some code that is redundant and the tooling / compilers can write for you. This is similar to how you can write reactJS without putting HTML in your JS (JSX syntax), except you write what the JSX-to-JS compiler writes, which is quite odd code to have to write yourself.

(for more about ES6, refer back to Issue8 of the newsletter)

Actually, mark my prediction, from a comment I made on an AngularJS facebook group yesterday:

TypeScript is “optionally” typed JavnaScript. They created it to be C# users friendly and 100% JavaScript compatible (any JS code is valid TS code). With Google cooperating, I can easily expect much of TS features to come in EcmaScript 8 or 9 (if too late for ES7).

New Website & Interoperability

There is a new Angular website dedicated to Angular 2.0, which is angular.io.

The site shows sample codes in JavaScript and Dart, but generally speaking, it’s still very early work in progress (there are references to AtScript in the docs still). I find it funny that the resources page happens to list only Savkin’s posts and the ToDo app video, which were all mentioned in the last issue of the newsletter, Issue9 :)

Having an entire new site reinforces how distinct Angular 2.0 will be. The team has an answer to your reasonable worry of this distinction:

The team will allow using Angular 1.x and 2.0 in the same application. You can have a parent Angular 1.x application with only parts of it using Angular 2.0, or you can convert your parent application to use Angular 2.0, and have each child application (not sure what this means, maybe child routes, given the new router supports both versions) still be 1.x and upgrade your child apps one by one.

The source code for Angular 2.0 is also available at github.com/angular. Don’t get this confused with github.com/angular.js (note the .js suffix), which is where Angular 1.x lives now.

What To Expect

The general themes that the team is focusing on in Angular 2 are:

  • Simplicity

    They are hoping the new component classes (directive replacements) and HTML templating syntax will be easier and make much more sense than existing ones.

  • Speed

    One way data binding (instead of 2-way data binding, which has implications on forms directives changing a bit) and changing the way scopes work -now called zones, and don’t requite $digest or $apply pain or having a special name- among other internal changes are reducing memory and DOM writes, causing possible 10x speed increases.

  • Consistency

    The new syntax Angular introduced for using directives in templates in Angular 2 aims at solving consistency problems we have in Angular 1. Examples from my understanding:

    Currently in Angular 1.x, with attribute directives, the directive author decides whether to use JavaScript expressions as the value of the attribute/property, or just a plain string property. I for one know that I always forget that to use ng-include I must put the template name inside quotes like 'template.html' because it takes a JS expression not a literal string (which is good).

    As a directive author as well, I also hated that I need to do extra work to support {{...}} syntax in attribute value. As both creator and consumer, I hated that each event I need to capture needs to have a directive (ng-click ng-blur, custom directive, etc, and yes there are workarounds).

    It’s even hard to tell whether a directive is meant to be a template that replaces the element completely or just adds an event handler or some properties. Some of you probably had problems when they accidentally tried to use two directives when both use the transclude feature.

    Solving these problems is at the heart of Angular 2, by giving a unified syntax for choosing whether to pass a literal string or JS expression when using a directive, and providing unified syntax for handling events without even needing to write a directive for that, also providing different syntax for template directives than component directives (which don’t rewrite the element).

    This bit can be quite confusing to explain in words. Check Day 2 keynote (linked below) for more about what the new syntax looks now, and why – Highly recommended.

  • Web Components

    To explain this without assuming knowledge of what Web Components are, I’ll use some over-simplified definitions (so, don’t make that offend you if know about Web Components). For a more proper introduction, check my video [Introducing Web Components & Polymer Projectpolymer-video, or the resources I used to learn about it, mostly listed in Issue7.

    Angular 2 embraces Web Components in two ways: first, it uses the Shadow DOM for template components (think: template/transclude directives).

    Shadow DOM is like inner HTML that is not affected by any CSS styles (even browser styles), cannot be matched by normal CSS selectors, and has its own child DOM document. Think of the many elements that browser renders when you add a <video tag to the page. This is the usual Shadow DOM example, except here we are talking about Shadow DOM that you create, style and control, not the browser.

    Shadow DOM is great for building reusable components that are guaranteed to not conflict with anything else on the whatever page they get used in, although can be a nightmare to style using today’s common CSS techniques that rely heavily on CSS inheritance / cascading. I hope that Shadow DOM will be optional, but I’m not sure.

    The other way Angular 2 embraces Web Components ensuing that Angular components (directives) can be used with / within Web Components transparently. You should be able to use custom HTML elements that have their own templates and Shadow DOM with Angular just like you’d with native HTML.

    This is the reason for all the weird [] and () characters used in directive attributes in Angular 2, so that they can be passed through the new HTML <template> element, often used in custom HTML elements (~ AKA Web Components) without being processed by the <template> itself.

    One thing to mention here: Google has another framework for building applications using custom elements / Web Components, Polymer Project. It enhances the new built in HTML <template> element and APIs to create custom elements and shadow DOM.

    In the Q & A session the Angular team explicitly said Angular 2 & Polymer are meant to work together very well, but are NOT likely to be merged in the future.

The first migration to Angular 2.0 will happen internally at Google around May 2015 (sounds too early to me, we’ll see).

This is all coming from the Day 1 keynote session (videoslides).

Whether you check Day 1 keynote or not, I highly recommend that you check Day 2 keynote.

It covers a lot about what the new Angular 2 syntax looks like (for both HTML and JS), and the reasoning behind it. It’s a true crash course (videoslidesdemo code).

From Q & A

In addition to above, here are the bits relevant to Angular 2.0 from the Q & A session:

  • The current plan is to make Angular 1.x and 2.0 work together and work side by side, even with either of them in the module / app containing the other. By embracing this direction, this seems to leave out providing a proper compatibility layer in place (although it might happen, as I’ll show below).

  • Angular 2 will support evergreen (auto-updating) browsers on the desktop. This means IE 11+ (this can obviously be a deal breaker). Mobile support matrix is not decided yet.

  • The template language in Angular 2 will probably be a MUCH better experience for directive / component creators. You think it’s crazy to create your own ng-repeat-like directive in Angular 1 (maybe you don’t even know what interpolation means)? Even this sort of stuff should be easy in Angular 2.

  • Serverside rendering in Angular 2.0 is not a no-no as we used to hear before. It’s not promised as well. The team think that the changes they are implementing in Angular 2 will have positive side-effects on server-rendering story, but it’s obviously not something they are actively working on enabling.

    To me this sounds like it might be easy for a 3rd party to build it, or may come in future 2.x releases past 2.0.

  • There was no mention of Angular 2 filter feature in previous sessions as in pipe filters, but that will still be supported, probably renamed to pipes (as in stream passing I guess, like gulp, etc. in node). The team promised this will be such a lovable improvement.

  • As Angular 2.0 will be written in TypeScript, Angular will use the Traceur compiler to translate TypeScript output to EcmaScript 6, EcmaScript 5, and Dart. This allowed Angular to merge the AngularJS and AngularDart teams into one.

  • This one is crazy and hard to explain if you don’t know C#, TypeScript is on road to have something like async/await syntax, coming from C#, this syntax allows you to write asynchronous code without any big changes to your existing code. And guess what? The team suggested that this feature is already used in the codebase for the new Angular router – somehow (haven’t checked code yet).

    My poor attempt to explain the feature: imagine you can add the word await before any method call that returns a promise, and after that, instead of having to call .then() and pass a function, the compiler assumes the rest of your code (within the current function) IS the then function.

What’s happening in Angular 1.x (Angular 1.3, Angular 1.4, and Angular 1.5+)

It looked like Angular team felt that they needed to show proof that they have good reasons to not screw Angular 1.x users, so here’s what they said:

There are 2,000 apps using various versions of Angular 1.x at Google, and ~ 1,000,000 users (1 million!) visiting the current angularjs.org website (fully dedicated to 1.x). There are also 400,000 monthly visitors to the actual Angular 1.x github repository. The team showed that they get how big and dead serious Angular 1.x user base is.

By the way, it was also mentioned that Twitter uses Angular 1.x for several internal systems, and PayPal has a new checkout experiment using AngularJS 1.x as well. That’s an app that generates REAL MONEY!

What To Expect

The themes that the team suggest they’ll spend effort on with Angular 1.x are:

  • The new router
  • Internationalization / localization
  • Material Design (directives that implement Google’s Material Design)
  • Changes that can make it easier to migrate to Angular 2.0
  • General support for any issues / bugs etc.

This shows currently in the following efforts:

  • Weekly batch (1.x.x) releases (bug fixes, backwards compatible features)

    There are fourteen 1.3.x releases at the moment. Turns out the target is weekly releases!

    This is exhausting to keep up with. You might consider a 2 or 4 weeks update in your apps. But the idea is that breaking changes are minimal in these releases, and the bigger breaking changes are saved for 1.x releases, like 1.4, 1.5 etc.

  • 1.4 RC0 is coming out this week

    If you followed the previous issues of the newsletter, many expected a final version of 1.4 in ng-conf. This didn’t happen, which is OK.

    The scope for Angular 1.4 as planned in January was a bit small IMHO. They added a few more things (so, it’s still not a big ball of mud update), and pushed the date slightly.

    I’m happier this way, because I thought we’d hold our breathe for for things like the router till 1.5, which would take even longer to come (it’s still likely major improvements will happen by the time of Angular 1.5).

  • Angular Router is coming to Angular 1.4

    The initial release of the new official router, which combines features that used to exist in ui-router (like nested routes) will come as part of Angular 1.4 announcement.

    It’s still going to be a separate library though. It’s supposed to work with Angular 1.x and 2.0. And it will have its own release cycles independent from Angular 1.x/2.x releases.

    This is also great. I’m hoping the initial release will be good enough to recommend it instead of ui-router, because the new router is eventually what most apps will end up using in the future anyway.

  • Localization / Internationalization in Angular 1.4

    I don’t know much about what is improving, but I know that the internationalization library for AngularJS is Angular-Translate, which is a very good looking one from its site or the ng-conf session about it (videoslides).

  • Performance Improvements

    The team always manages to find areas to improve internally on $scope digest cycling, ng-repeat etc., that quite often getting a new Angular release will give you a performance improvement with no code changes.

  • Continuing to plan in public

    That probably refers to publishing their weekly meeting notes on Google Drive (and sometimes recording them, although this is less often), as well as the usual OSS openness, that is: planning via public Github issues, accepting pull requests and responding to comments on Github issues and commits.

  • Shared components between Angular 1.x and Angular 2

    The components announced to be shared are:

    • the router (of course)
    • Internationalization support
    • Animation support (this is a bit of a surprise to me)

    Note that Material Design is not in the list, which makes sense because it’s quite more involved (it’s all about writing directives that apply the Material Design). Maybe that’d be a good migration / compatibility test subject, Google -if anyone is reading this :)

    A lot of this will be in proper shape by the time of Angular 1.5 (with some bits coming in Angular 1.4). Angular 1.5 could be happening around Summer-Fall (U.S. calendar not Aussie calendar of course).

Most of this came from Day 1 keynote linked to before, and from the Angular 1.x session (videoslides).

Getting your Angular 1.3/1.4 App Ready for Angular 2

Here’s what the team says about preparing code for less migration effort when we get Angular 2.0, which is luckily in-line with the guesses that several others came up with so far.

  • Write code as ES6 classes, everything (directives, services, etc.)
  • Use the new Angular router (luckily it’s just around the corner)
  • Use directives more than controllers
  • Use the controllerAs syntax in your directives instead of using $scope

There already is a proposal for a compatibility layer to be introduced. You can see some actual code by watching the “Angular 1.3 meets Angular 2 0” session (videoslides).

From Q & A

Here are a few bits from the Q&A, that are supposed to happen as part of Angular 1.x development story / ecosystem:

  • It seems the Angular router team, at least those present at ng-conf, don’t know much about what ui-router provides. This is weird, but maybe because the Ember router is where they are getting most of their inspiration from.

  • The ng-inspector Chrome extension might be merged with the Angular Batarang extension going forward, if the conversations start soon and go smoothly

  • Angular Material Design animation support will come to Angular 1.x, but beyond 1.5.

    Google Material Design (a lame yet easy way to think of it is like Twitter Bootstrap & Windows Metro design mixed into one) defines UI look & feel, and some standard animation effects even on things like pressing a button.

    Angular Material Design 1.0 will come around Angular 1.5. It’ll have all UI styles builtin so that just adding ng-button or something like that will get you a Material button.

    However, the animation part of things will follow later with a new feature coming to Angular Animation library called “timeline”. This is required as Material Design animations are sometimes series of animations not a single animation effect.

And of course, the Q & A session is also available to watch (watch).

These notes do not cover entire ng-conf

You can watch all the sessions from ng-conf on the ng-conf 2015 video playlist.

There are sessions about the new router, TypeScript, reactJS, a performance benchmarking tool called benchpress (used to measure performance improvements in Angular 2), John Papa’s AngularJS styleguide, and much much more…

Slides

As you watch the videos, you’ll find most presents link to their slides near the end or so. I have linked to all the slides I could find whenever I linked to a video.

If you didn’t find a slides link in the video, here’s what I did to get the “Angular 1.3 meets 2.0” slides: I went to ng-conf schedule page, found the talk details, clicked through to the speaker’s twitter account, and asked for the slides gently :)

I’m sure there’ll be some list of slides (official or not) at some point. I’ll keep you updated via this newsletter when I find about it.

Update

Here’s a big list of all ng-conf videos, slides, and speaker twitter links.

Finally

If you liked this special issue of my AngularJS And Web Dev Goodies newsletter, please let your friends know about it and sign up as well.

Thank you!

Meligy

Eng.Meligy@Gmail.com | twitter.com/meligy | gurustop.net/newsletter

Update

I showed this blog post to Brad Green from the Angular team, and he had some comments and explanations that are very valuable.

You can read them here:

Brad Green from Angular Team Comments On My AngularJS 2.0 / 1.x Post

Meligy’s AngularJS & Web Dev Goodies — Issue9: ng-conf is almost here!

Hello there,
This is a quick newsletter this time, just to give you something before ng-conf. No one knows how the next one will be influenced by it.

I will be spending several hours watching videos and stuff to see highlights for next issue.

For now, let’s see what we have…

AngularJS

ng-conf

ng-conf Submissions

ng-conf used an interesting way to choose speakers and sessions. They set up a Github repository and speakers went ahead and created issues and pull requests for their submissions.

This newsletter is a good place for exclusives and semi-secrets. I have been following this Github repository for a while for inspiration of what topics to talk / write about for AngularJS.

There are many topics that maybe are not fit for for ng-conf agenda, but can be good topics for a blog post, a YouTube video, a small book, a Udemy or Pluralsight course, etc.

ng-conf Schedule

For the really lazy, plus it’s surprising how much content there is going to be there. I was like “WHAAAT? ALL OF THAT?”…

Angular 2.0

Victor Savkin’s blog

Victor is a member of the Angular team (although he used to work on Angular Dart). He started blogging about Angular 2.0 and already has some interesting posts to check out:

He also goes into interesting areas, like building Angular applications using the Flux architecture (that’s the architecture that is recommended for reactJS development).

Video: Angular 2 Preparation – Part 1 – Code Structure Comparison

A video by a guy who is also a speaker at ng-conf. He is hilarious, overly too hillarious that it doesn’t really match my taste, but his Angular 2. video has a interesting hihglight: actually looking up the public Github repositories for checking what Angular 2.0 doesn’t need you to be a JS guru or so.

The highlight is from the dependency injection bit in the video. If you have 7 minutes to waste, it’s not that bad :P (or else wouldn’t have added it here).

What’s New in AngularJS 2.0

OK, about this one, here’s the thing. It’s not the best place to get a sense of what Angular 2.0 code is going to look like. You are better off with videos and blog posts in various earlier issues of this newsletter like the todo one from Issue 8

BUT .. It’s a good listing of all the feature areas in Angular 2.0. So, if you are after a comprehensive list of features and highlights, this is a really good one.

Angular 1.x

$ngCookies to support passing path & domain

It only took 2 years and 2 months, but AngularJS is finally getting a built-in cookie provider that’s actually useful! I talked about other alternatives in Issue 7 of the newsletter.

The commit is in master branch, used for Angular 1.4. I don’t see it in changelog for 1.4 beta 5 yet. It should be in the next release (whether it will be beta or not) likely to be announced in ng-conf.

Ionic Framework

Ionic is a framework that uses AngularJS and Phonegap to build HTML-based mobile applications. It provides great tooling for performance and mobile-focused UI, etc. It’s pretty much the go-to framework for mobile development with AngularJS.

Mastering the Ionic Framework Tutorial

A good step-by-step tutorial for learning Ionic for those who haven’t tried it before. It is a good written tutorial (it also offers a video version you can check if you want more guided version).

ASP​.NET MVC

Passing Data to Angular from ASP​.NET MVC Views

There is a single idea to take from here. You can have the data ready from your controller in the same page and just pass it to Angular. You don’t have to have another service if the data can be known at the time of the page load already. Later interactions can still depend on other REST services.

I have used similar approach in many AngularJS apps that I developed (where Angular was used for reach UI rather than single-page app), and it was always very useful.

Love & Hate

Is AngularJS ready for the enterprise?

I wasn’t sure whether I should include this in the newsletter. I mean .. really .. we don’t need more “Is Angular relevant?” questions, but the article itself isn’t too bad, and might make a good snack read or skim or whatever.

HTML5 & Web Components

Web Components is a term that refers to several new HTML non-finalized standards that add allow things like built-in template language, and completely independent pieces of HTML (shadow DOM) and more. I talked about it earlier in Issue 7 in a section with the same name as this section.

Video: Introduction To Web Components And Polymer Project

This is an introductory session (40 minutes) I gave this year about Web Components in general, and about Polymer, a Google project that builds on top of the standards and provide a great framework to build independent widgets with them with data-binding and more.

ASP​.NET

ASP​.NET 5 (vNext)

Top 10 Changes in ASP​.NET 5 and MVC 6

A very good summary on what to expect just to get a sense of how things are changing in Microsoft space.

There’s also another very good summary from Microsoft’s VP who created the first version of ASP​.NET MVC framework, Introducing ASP​.NET 5.

Understanding .NET 2015

The previous pick was a summary with code samples, specific to ASP​.NET. This one is the whole big picture with all different bits.

For example, you might have heard about the new compiler, Roslyn, do you know htat there other 2 new compiler shipping in the next version of .NET? Are you sure you really know what the new .NET Core thing is? This article answers those kinds of questions pretty well.

(And I realize this last paragraph sounded like a link-bait, yuk! – Sorry!)

Domain Driven Design (DDD)

Why do all my DDD apps look the same? – Slides & Video

This one seems to be an interesting take on how DDD sometimes goes wrong when you try to do it right. I have checked the slides -pretty inspiring- and the video is on my list (maybe not soon with ng-conf here).

I personally silly they require you to sign up for the video now. If my memory didn’t fail me this is a relatively new requirement. I have watched a lot of Skills Matter videos before and it’s usually very good (and often advanced) content though.

Developer Tools / Editors / IDEs

Visual Studio

– Using jspm with Visual Studio 2015 and ASP.NET 5

JSPM is a package manager for SystemJS. SystemJS identifies itself as “Universal dynamic module loader – loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS”. Why you might hear about such a thing?

Well, SPA frameworks of course, and ES 6. I talked about Aurelia in Issue 8, and if you watched the video, the author of the framework really likes SystemJS.

It also seems Angular 2.0 although will not embrace it officially (I guess), the push it will make to writing code in ES6 will raise the need for a framework that can play well with existing package styles and ES6 modules.

So, it’s a bit futuristic. Visual Studio 2015 is not final yet, but if you want a peak of more likely future trends, give that post a quick skim.

Sublime Text

– Themr & Schemr

If you use Sublime Text, and you get bored as quick as I do, you probably also change themes and colour schemes quite often. Those 2 Sublime Text plugins make the perience much easier by allowing to visually switch between themes and between colour schemes, with preview and very nice UI.

You can find Sublime Text themes everywhere. Here’s one list I found last week.

Finally

I read that quote and thought, this is exactly the message I want to tell all of you, ladies and gentleman:

reminder– you might feel like you’re imposing by asking someone if they’ll mentor you but more likely you’re making them feel honored (source)

I’m happy to help you with any issue you have related to ASP​.NET, AngularJS, or JavaScript. Just email me / reach out.

Apart from that. I’m still making small changes to the newsletter in every issue, and hoping to get feedback from you whether it’s going where you’d like to continue going. I’ll be back after ng-conf, not sure with what yet.

Stay tuned, and yes, please let your friends know about the newsletter.

See you,

Meligy’s AngularJS & Web Dev Goodies — Issue8: Birthday Edition :)

Hey maties!
It’s been a while since last issue, but it’s my birthday today. What could be a better execuse to take a day off from work, sit in a nice cafe, and compile some of the drafts I have into a new issue!

I originally had a longer opening, talking about how this list has grown to include over 290 real people, and how one of my goals is to reach 1,000 before next year. I planned to ask for help spreading the word.

But we are over this now already, aren’t we? Let’s keep it short and get into content.

AngularJS

Angular 2.0

An Angular2 Todo App: First look at App Development in Angular2

Before this video, everything most people knew about AngularJS 2.0 dated back to the teasers in ng-Europe last October. People had to go through Github commits and issues or meeting/design documents (which are publicly available and I linked to some earlier in this newsletter) even just to get a feel of what is going on.

The video (from a usergroup meetup) has a code demo, which shows the new HTML templates as well as the directive (or component) definition syntax, with the C#-attribute like AtScript sugar.

It also has a good Q & A session on the progress, and how it relates to other areas like, obviously, Angular 1.x, and how Angular 2.0 will remove 2-way data-binding!!

ng-conf 2015 | The AngularJS Conference

The next Angular conference is already around the corner, coming March 5-6. Keep an open eye on it!

I intended to put this in here because I was like “Sure there will be Angular 2.0 stuff in there”, even though the schedule only mentions it in a single talk!

It’s also mentioned in the above video that the team has more to say about it in ng-conf.

Note that Angular 1.4 will be announced in ng-conf as well. That’s already in beta 4 stage (as 1.3.x is now at 1.3.13). If you follow the newsletter for long, you know the best place to keep up to date with versions, the changelog.

Testing

Karma and Mocha for AngularJS testing

If you are like me, you are probably tired of so many names that come to mnind around testing, especially when it comes to AngularJS. This post helps a bit.

It picks a chain of tools, tells you what the choices it made are and what they do, and help wire them all into a usable workflow.

Visual Regression Testing For Angular Applications

Implementing responside design involves a whole lot of CSS breakpoints and JavaScript interactions etc. With all that going in the page, it can be quite hard to test these interactions beyond testing in so many devices.

The article presents a relatively simple approach that you can use on the long run to make sure new UI components are not breaking the existing UI. The approach feels useful even beyond responsive design, although I haven’t played with it (yet).

Accessibility

Unobfuscated: Angular.js Accessibility

Nice collection of blog posts about accessibility when using AngularJS (read the old ones first). Also has good work around improving the accessibility aspects of the TodoMVC sample AngularJS app.

ReactJS

Yes, Microsoft has found that React‘s popularity is not to be missed, and similar to catching up with Gulp support in soon-to-be-released Visual Studio 2015, they decided to support reactJS as well.

Aurelia

Aurelia is new JavaScript framework similar to AngularJS, EmberJS, and DurandalJS. Actually, it replaces DurandalJS, as it is from the same author.

Introducing Aurelia
Remember Rob Eisenberg, the guy behind DurandalJS? He joined AngularJS team working on the new pre-release Angular 1.x/2.0 router, he wrote the “All about Angular 2.0” post, then he left the team hinting to go work on Durandal NextGen.

Just in case you missed hte news last month. It seems he created yet another framework instead, Aurelia. In this post there’s a video that shows so many similarities with what Angular 2.0 is supposedly going to look like, except his bits are actually available for using today, and he doesn’t go too far to create something like AtScript.

The framework is really interesting, and people -of course- have already started writing about ditching Angular for Aurelia, as usual with every other new framework out there ;)

JavaScript

ES6

The new version of Javascript, which introduces interesting features features like classes anad modules, and scope variables (vs. function-level variables).

It’s not yet supported in most browsers, but there are tools to translate it to Ecmascript 5, the currently supported JS we know.

Getting Started with ES6 – Transpiling ES6 to ES5

A very simple tutorial on using 6To5 and gulp task runner to start writing code in ES6 today and translate it to ES5 for browsers. I here link to the entire (tiny) ES6 category in the blog for more about ES6.

Dan also has a nice Github repository of samples he links to in the post, which is very helpful for getting to know the new ES6 feature.

Dan Wahlin is a popular video course author and more, and the guy who made ths Angular in 60-ish minutes video I always recommend to devs new to AngularJS.

ES6 Language Specification Draft from Mozilla

Yes, it’s true. ES6 is not final yet, although most of it is pretty stable, so it’s not something to be worried about.

Learning a language by reading its specification is a very interesting way, and (sometimes) is not that crazy. This is the PDF standard rendered as HTML instead of PDF, with links to the official PDF and Word documents.

Give it a look (note that this is the entire language specification, not just what’s new in v6).

ASP​.NET

ASP​.NET 5 Updates and other improvements for Web Developers in VS 2015 CTP 6

Visual Studio 2015 CTP 6 came out yesterday. There’s a great official announcement, and the release page shows a (very) good summary of new features in all areas, but this link above is the detailed coverage of what’s new in ASP​.NET 5 (also known as ASP​.NET vNext).

General Web Dev

Some of you remember I made this list to remember the cool links I neeed ot check or come back to. These up are a few!

HTTP 2

HTTP/2, the first major change to HTTP in 16 years, has been finalized

It will take a while to be the norm of course, but HTTP 2 can be a real big deal. It promises a lot of speed enhancements, and one interesting enhancement is being able make multiple resource requests in one go. This alone can be very inspiring.

Let’s wait (quite a bit) and see what comes out of this. Again, it should be big!

– HTTP2 Book – Mozilla (PDF)

If you really want to dig into the protocol, this is a good read. It’s by a Mozilla guy who works on the protocol itself.

And it’s not even a specification (so don’t freak out), it started off a presentation he delivered last year. Check it out, it shouldn’t be too bad ;)

[Issue Bonus] Free Web Development Videos

Level Up Tutorials

I’m very surprised this site is not popular. It’s like egghead.io, a big library of free videos with some premium content. Except the videos cover a really wide range of topics.

It had a series about Web Components & Polymer Project that I found very useful for getting up to speed with it, but it also very wide range of topics like: SASS, CoffeeScript, Grunt, Gulp, WordPress and other topics, like Android dev and basic Mac command line.

Toptal Videos (AngularJS, JavaScript, UnderscoreJS)

This is a freelancing company that tries to market itself as a place for top developers. I don’t know who they are but I’m also not in the market for that need anyway. What I know is that they have very good articles and videos.

One thing I wish they did was provide some sort of tagging or categorization. I saw their AngularJS stuff and was nice. They also have some JS & UnderscoreJS-specific stuff. Should be worth skimming the list.

Microsoft Virtual Academy
Not many people know that Microsoft have some great online courses on C#, Mobile Development, BI and even the prerelease ASP.NET 5. Yes, another unpopular gem!

reddit.com/r/WatchPeopleCode
Not really something that would “teach” you, but think about it. live coding sessions streamed + recorded, on Reddit. Could it get any better?! Could it get any worse?!

In closing…

Send me good resources, please!

You probably didn’t know that Toptal contacted me explicitly last month to include their videos in the newsletter. No affiliation of any kind was there.

I didn’t get anything directly or indirectly from linking to them. I just checked their videos, loved them, and decided that I should have found them on my own earlier! So, I included them in this issue.

If you find any good links (created by others or even by yourself), just email me.

I’ll check them out, and if I find them good for me, they’ll hopefully be useful for other readers of this newsletter as well. So, I’ll include them, and (unless you tell me not to) thank you for sharing awesomeness.

Spread the word, Please, please, PLEASE!

If you did like this newsletter, there are a few things you can show the love. Having an idea that can make even more awesome and emailing it to me is one thing I can’t thank you enough for (same for things that could make it suck less).

Another way to show love is to tell just one friend or colleague about it. Maybe in person, in email, on twitter, or whatever really. The more people reading this, the more responsible I feel about NOT making it suck.

Thank you!

Meligy

Eng.Meligy@Gmail.com | twitter.com/meligy | gurustop.net/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://www.gurustop.net/newsletter

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

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