Sometimes when there’s too much content for one page it’s convenient to hide some of it behind the tabs. Basically you can click on a tab to display one page or another. It comes quite handy and I use it a lot in many of my webapps. I came up with this handy directives that allows for dropping tabbed content pretty much anywhere on a page.

What I like about it is that even though it’s quite simple and concise it touches a lot of Angular concepts that believed to be complex and hard for beginners like transclusion and controller.

Interface is quite simple:

<nge-tabs>
  <nge-tab name='books' title='Books'>
    <!-- Some content here -->
  </nge-tab>
  <nge-tab name='reviews' title='Reviews'>
    <!-- Some content here -->
  </nge-tab>
</nge-tabs>

Let’s look under the hood

Here’s nge-tabs:

angular.module('readn.directives').directive 'ngeTabs', ->
    restrict: 'E'  # it only can be

I have to make a shameful confession.

Being a professional developer for 8 years now, I don’t know how to implement a quick sort. Or merge sort. Or whatever sort. I mean, I know the words, so I can try to make use of my brain and come up with some approach, but that attempt would probably fail. And when you start throwing these O(n), O(log n) things at me I would probably just roll my eyes ant try to disappear.

Now before you run to unsubscribe from this blog, let me try to explain what I mean by this, and why I really don’t care.

Let’s say that you’re hiring a developer for your super awesome startup. And I’m among the participators. The reason your company exists, is obviously making money. And whatever actions you do running it (including hiring engineers) have only one end goal — make more money.

Now if we try to make a logical connection between me as your engineer knowing

Metaprogramming in JS is not as much as big buzz word like say in Ruby. Partly perhaps because the whole experience of coding in JavaScript is one big meta-programming experience. But sometimes there are those small little hacks that make our life as developers easier, and I think “metaprogramming” is just the right term to describe them.

Let’s say you want to modify the behaviour of an existing Backbone view.

Have you ever had this feeling. You look at someone’s code. And you’re just trying to understand, what’s happening there. What methods are being invoked, and in what particular order. Wouldn’t it be nice if Backbone could log every method being invoked into console, maybe with some meta information like when it started, when it finished, how long did it take, etc.?

Well, there’s a really easy way to do this.

Let’s say, we have a Backbone view with several binded events, lot’s

I’ve been using Vim for several months now, which means I’m not even close to some of the professionals, but I still like it a lot. People ask me whether or not it improves my productivity, well It definitely does.

But not in the way you probably think of.

 Wanna edit text faster?

Vim lets you type, navigate and edit text fast. Or even really really fast if you use all of the navigation patterns and keystrokes, understand modes and run macrosses.

The thing is that we as programmers don’t just type text.

The vast majority of our time is being spent thinking about architecture or business domain or tracking some nasty bugs. Not typing. Even though Vim does improve our typing capabilities, it doesn’t improve our overall productivity much by doing this.

So this is not what sells it for me.

 Vim is light

JetBrains RubyMine is very mature. It can do things like syntax checking, fuzzy

Just wanted you guys to know, that I’ve started a weekly newsletter on revue recently in which I gather the most interesting stuff from the JavaScript world. It mostly focuses on ES6 and ES7 features, frameworks like Angular and React and functional programming.

If you’re interested in being on the edge, then you might wanna check it out.

The latest issue.

Subscribe to Full-Scale JavaScript here.

Gulp tasks run asynchronously. For example when you describe your build task like this:

gulp.task('build', ['clean', 'html', 'sass', 'coffee']);

you can’t be sure in which exact order the tasks will be finished. Sometimes this is the source of problems. For example, if sass task is trying to compile your styles into the build directory and at the same time clean trying to empty that directory, you can get in a lot of trouble.

Now one way of solving this is to specify task dependencies. You declare you sass, html, coffee as being dependent on clean:

gulp.task('sass', ['clean'], function() { ... })
gulp.task('html', ['clean'], function() { ... })
gulp.task('coffee', ['clean'], function() { ... })

Gulp will guarantee that these tasks will start running only after clean is finished. Which of cause is nice, but if you use livereload and watch sources to recompile on the fly, this can

In this article we’ll try to implement a minimal data-binding framework using new fancy Object.observe API which everyone’s in love with. We’ll go step by step and try to solve all of the problems appear on our way. The resulting framework is not by any means production-ready, though I’ll publish it on Github for this tutorial needs only.

 Data binding, eh?

Modern MVC frameworks like AngularJS or EmberJS gained their popularity for saving developer’s time in the era of ajax web-oriented applications. Mostly this is done by implementing data-to-html binding, so that a developer can focus on code and don’t care about the views much — they are updated accordingly automatically. This removes the need of working with DOM directly and thus reduces the effort dramatically.

Until very recent time, there were only two ways of binding your data.

One is putting your model object into a wrapper

There are several JavaScript tricks that are used widely by experienced programmers. Many of them may not be instantly obvious, especially for beginners. These tricks use language features not by their direct purpose, but rather by their side-effect to achieve goals, that can’t be achieved by default language means. Here I made a little compilation of such tricks with explanation.

You should understand that most of these tricks are rather hacks and not something you should use in your daily development. The purpose of that article is to explain how they work, not to push to use them.

 Using !! to convert value into a boolean

Everything in JavaScript can be interpreted either as [truthy or falsy](’http://www.sitepoint.com/javascript-truthy-falsy/’). This means that when you put object into an if expression, it will either let you go by true-branch (i.e. it’s ‘truthy’) of by false

Even if you don’t have to directly work with JavaScript I think it’s worth investing your time in learning JavaScript and I want to encourage you to do that with that little overview article. So if you are a java-developer and you want to catch a bit with JavaScript this is a good place to start.

I also must warn you that I’m not aiming to cover every aspect of JavaScript in this article. Instead I just want to focus on most confusing concepts for Java developers, because well… yeah… JavaScript can be confusing. Especially when it tries to pretend something which it isn’t.

 Object-oriented, but no classes

Alright, here is the thing to start with. There are no classes in JavaScript. Almost everything is an object. Even arrays, even function, but there are no classes as cornerstone language construct. While Java forces you to describe behaviour of your objects before you can initiate