Earlier this year I talked to ALT.NET Sydney about the new big thing after HTML 5, yes, Web Components. I also talked about how you can create and consume Web components using the Polymer framework.

You can watch the talk from here:

,

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

, , ,

NPM On Windows

If you have been using NPM on Windows, you are used to npm install -g installing packages under your user profile. It has a bin folder where it adds a batch file for each package that executes the main JS file of the package using Node.

You can check the path for this folder by running npm bin -g. NodeJS installation would have added this folder to your PATH environment variable already.

It’s not the same on the Mac, and it’s by design.

NPM On Mac (Or any other Unix/Linux system)

If you go to the NodeJS official website and install Node from there on the Mac, then you run npm bin -g, you’ll get an interesting result:

This is a root folder outside your user folder ~. This is why you are required to use sudo (run as admin) with npm install -g.

sudo-npm

This is obviously inconsistent, but the NPM answer to this is that global installs usually mean “All users” install to *nix users.

Mac/Unix/Linux (*nix) Vs. Windows

So, why isn’t it the same on Windows? Because NPM seems to think that running as admin is a bit harder for Windows user and a surprise to users in a world where “per-user” installs are becoming more and more common. You can read the comments on the Github issue here.

The other alternative for Windows users if NPM were to standardize the approach is to have to open new console window as admin to install the global packages. There are probably other options but they’re even less common in Windows world.

Per User Or Per Machine

It’s interesting how things run differently in Windows and Unix/Linux lands. In Windows you are often granted with a good default that you typically change only if you have a reason to. In Linux/Unix land (including Mac), it seems how good the defaults are doesn’t matter. There will be a true defacto setting that is the real default, except you have to discover it on your own.

You can argue that Windows people are used to be dictated, or that the strive for better out of the box experience is better in Windows land. I’ll leave this one to you.

Although NPM use is much higher in *nix systems – I assume, most people will talk about NPM global install as per the defacto setting. Most people change the global bin location NPM config setting to a per-user folder, which they manually add to their environment path variable.

Some people run something like:

And then add $HOME/npm/bin to the environment path. Depending on whether you use bash or Zsh shell, you open your ~/.bashrc or ~/.zsh and append something like:

Then you’ll have the global packages installed under your user account, and their commands still available everywhere in the shell, and you can manage them without having to use sudo.

Another Viable Option: Node Version Manager

When I posted this article on twitter I got a few comments suggests that the official install isn’t the best way to install Node anyway, even with the userprofile hack. That’s another difference to learn about Mac and Linux, there are sometimes more than single non-official de-facto way to do things.

Similar to Ruby for example, which has RVM (Ruby Version Manager), a version manager exists for Node as well. And it’s non-surprisingly called NVM (Node Version Manager).

NVM eliminates the problem with global installs as it installs global packages in a folder relative to the selected Node version, which happens to be a user-specific folder.

A side effect though is that if you are using multiple versions of Node, you need to install the global packages once per version (discussion).

In Closing

Personally, I’m still leaning towards using the defaults and I just remember to use sudo. I’m still new in this Mac world, and the main reason isn’t that I think it’s superior to Windows (actually I’ve got much more respect to Windows than what I already have form using the Mac), but to learn these nitty-gritty *nix life.

I might share more findings later as well. Stay tuned!

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

, , , , , ,

angular-cover

Every 2 or 3 months, each local state team in my company, Readify, helds a night usergroup-like event, or a BarCamp. It’s an opportunity for consultants to share what they find useful, what they learned recently, or just practice public speaking in front of a friendly and supporting group.

I haven’t spoken at Readify’s Sydney BarCamp before. I really wanted to. So, I talked about my findings on the whole Angular 2.0 topic, and my conclusions on how this affects Angular 1.x developers.

I hope it helps you if you are in a similar situation.

By the way, if you like the idea of BarCamp, and want are interested in being part of this team, check out Knock Knock, even if you don’t currently live in Australia :)

, ,